.cl-box { box-sizing:border-box; width:100%; max-width:100%; border:1px solid #e5e5e5; padding:12px; margin:12px 0; background:#fff; border-radius:10px; }
.cl-title { font-size:16px; font-weight:600; margin:0 0 10px; }
.cl-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.cl-btn { flex:1 1 140px; padding:10px 12px; border:0; border-radius:8px; background:#2b6cb0; color:#fff; cursor:pointer; line-height:1.2; }
.cl-btn:active { transform: translateY(1px); }
.cl-canvas-wrap { box-sizing:border-box; width:100%; max-width:560px; border:1px solid #ddd; padding:10px; background:#fafafa; overflow:hidden; border-radius:10px; }
.cl-canvas-wrap canvas { display:block; width:100%; height:auto; background:#fff; border:1px solid #ccc; border-radius:8px; }
.cl-hint { margin:8px 0 0; font-size:12px; color:#666; }

.cl-personalizar-page { width: 100%; }
.cl-p-header { margin: 10px 0 12px; }
.cl-p-title { margin: 0 0 4px; font-size: 22px; }
.cl-p-sub { margin: 0; color: #555; font-size: 13px; }

.cl-p-grid { display:grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items:start; }
.cl-p-buybox { border:1px solid #e5e5e5; background:#fff; border-radius:10px; padding:12px; }
.cl-p-tip { margin:10px 0 0; font-size:12px; color:#555; }

@media (max-width: 900px){
  .cl-p-grid { grid-template-columns: 1fr; }
  .cl-canvas-wrap { max-width: 100%; }
}

/* Vitrine (HOME) via shortcode */
.cl-vitrine {
  display: grid;
  gap: 14px;
}

.cl-vitrine-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cl-vitrine-cols-3 { grid-template-columns: repeat(3, 1fr); }
.cl-vitrine-cols-4 { grid-template-columns: repeat(4, 1fr); }
.cl-vitrine-cols-5 { grid-template-columns: repeat(5, 1fr); }
.cl-vitrine-cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 900px){
  .cl-vitrine-cols-4, .cl-vitrine-cols-5, .cl-vitrine-cols-6 { grid-template-columns: repeat(2, 1fr); }
}

.cl-vitrine-card {
  border: 1px solid #e5e5e5;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
}

.cl-vitrine-thumb { display:block; }
.cl-vitrine-img { width: 100%; height: auto; display:block; }

.cl-vitrine-title { margin-top: 8px; font-weight: 600; font-size: 14px; }
.cl-vitrine-price { margin-top: 4px; font-size: 13px; color: #333; }

.cl-vitrine-actions {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.cl-vitrine-actions .button {
  width: 100%;
  text-align: center;
}

.cl-vitrine-personalizar { background: #2b6cb0; color: #fff; border: 0; }