/* ══════════════════════════════════════════════════════════
 * STK-WIDGET.CSS v2.11 — Design Tokens + Shared Components
 *
 * Este archivo controla TODA la apariencia del widget.
 * Cambia una variable aquí → cambia en desktop y mobile.
 *
 * ESTRUCTURA:
 *   1. FUENTES        — tipografías (de GeneratePress)
 *   2. COLORES        — textos, fondos, botones, badges
 *   3. LAYOUT         — contenedor, grid, stage, carrusel
 *   4. TAMAÑOS        — fuentes, espaciado, bordes
 *   5. COMPONENTES    — estilos compartidos desktop + mobile
 *   6. SHAPE CARDS    — nuevo estilo tarjeta para formas
 *   7. RESPONSIVE     — media queries
 * ══════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────
   DESIGN TOKENS
   ───────────────────────────────────────────────────────── */
:root {
  --stk-font:             inherit;
  --stk-font-heading:     "Inter Tight", sans-serif;
  --stk-text:             #000;
  --stk-text-muted:       #888;
  --stk-text-placeholder: #aaa;
  --stk-heading:          #000;
  --stk-accent:           #f5c518;
  --stk-accent-hover:     #e6b800;
  --stk-cart-bg:          #5BA238;
  --stk-cart-bg-hover:    #0BA11E;
  --stk-cart-color:       #fff;
  --stk-success:          #22a653;
  --stk-success-dark:     #1d8f47;
  --stk-discount:         #34b364;
  --stk-badge:            #FFFFFF;
  --stk-bg:               #fff;
  --stk-bg-stage:         #f7f7f7;
  --stk-bg-active:        #F2F2F2;
  --stk-bg-subtle:        #fafafa;
  --stk-bg-carousel:      #2a2a2a;
  --stk-container-bg:     #fff;
  --stk-border:           #e0e3ed;
  --stk-border-light:     #f0f0f0;
  --stk-radio-border:     #bbb;
  --stk-container-pad-top: 50px;
  --stk-container-pad-x:  20px;
  --stk-grid-columns:     65fr 35fr;
  --stk-grid-gap:         40px;
  --stk-stage-border:     #cfcfcf;
  --stk-stage-padding:    30px;
  --stk-loading-bg:       rgba(247,247,247,0.85);
  --stk-loading-color:    #555;
  --stk-arrow-bg:         rgba(0,0,0,0.65);
  --stk-arrow-bg-hover:   rgba(0,0,0,0.85);
  --stk-arrow-color:      #fff;
  --stk-arrow-size:       44px;
  --stk-dot-color:        rgba(255,255,255,0.4);
  --stk-dot-color-active: #fff;
  --stk-carousel-img-fit: cover;
  --stk-upload-size:      13px;
  --stk-upload-shadow:    0 4px 14px rgba(245,197,24,.4);
  --stk-heading-size:     60px;
  --stk-heading-weight:   900;
  --stk-subtitle-size:    10px;
  --stk-desc-size:        16px;
  --stk-label-size:       18px;
  --stk-text-size:        13px;
  --stk-text-weight:      500;
  --stk-text-weight-bold: 800;
  --stk-badge-size:       10px;
  --stk-price-size:       28px;
  --stk-radius:           6px;
  --stk-section-gap:      72px;
}


/* ─────────────────────────────────────────────────────────
   RESET
   ───────────────────────────────────────────────────────── */
#stk-v38,
#stk-mobile                              { -webkit-tap-highlight-color: transparent; }
#stk-v38 *,
#stk-mobile *                            { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
#stk-v38 button, #stk-v38 .stk-mat-card,
#stk-v38 .stk-finish-btn, #stk-v38 .stk-size-btn,
#stk-v38 .stk-shape-btn, #stk-v38 .stk-qty-row,
#stk-mobile button                       { outline: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }


/* ─────────────────────────────────────────────────────────
   TÍTULOS DEL PRODUCTO
   ───────────────────────────────────────────────────────── */
.stk-heading-subtitle {
  display: none; /* v2.4: eyebrow eliminado */
}
.stk-heading-title {
  font-family: var(--stk-font-heading);
  font-size: var(--stk-heading-size);
  font-weight: var(--stk-heading-weight);
  color: var(--stk-heading);
  margin: 0 0 28px 0;
  letter-spacing: 1px;
  line-height: 1.1;
}
.stk-heading-desc {
  font-size: var(--stk-desc-size);
  font-weight: 500;
  color: var(--stk-text);
  margin: 0 0 20px 0 !important;
  line-height: 1.6;
  letter-spacing: 0.5px;
}


/* ─────────────────────────────────────────────────────────
   LABELS DE SECCIÓN
   ───────────────────────────────────────────────────────── */
.stk-label,
.stkm-config-label {
  font-family: var(--stk-font-heading) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: 0.7px;
  color: var(--stk-heading) !important;
  margin: 0 0 14px 0;
}


/* ─────────────────────────────────────────────────────────
   OPCIONES (formas, acabados, tamaños, cantidades)
   ───────────────────────────────────────────────────────── */
.stk-shape-btn, .stk-finish-btn, .stk-size-btn,
.stk-qty-pcs, .stk-qty-price,
.stkm-config-shape, .stkm-config-finish, .stkm-config-size,
.stkm-config-qty-pcs, .stkm-config-qty-price,
.stkm-drawer-item-label,
.stkm-qty-pcs, .stkm-qty-price,
.stkm-option-value                       { font-size: var(--stk-text-size); font-weight: var(--stk-text-weight); color: var(--stk-text); }

.stk-shape-btn.active, .stk-finish-btn.active, .stk-size-btn.active,
.stk-qty-row.active, .stk-qty-row.active .stk-qty-pcs, .stk-qty-row.active .stk-qty-price,
.stkm-config-shape.active, .stkm-config-finish.active, .stkm-config-size.active,
.stkm-config-qty-row.active,
.stkm-drawer-item.active,
.stkm-qty-row.active                     { font-weight: var(--stk-text-weight-bold); }

.stk-shape-btn.active, .stk-finish-btn.active, .stk-size-btn.active, .stk-qty-row.active,
.stkm-config-shape.active, .stkm-config-finish.active, .stkm-config-size.active,
.stkm-config-qty-row.active              { background: var(--stk-bg-active); }


/* ─────────────────────────────────────────────────────────
   MATERIALES
   ───────────────────────────────────────────────────────── */
.stk-mat-name                            { font-size: var(--stk-text-size); }
.stkm-mat-name                           { font-size: 11px; }
.stk-mat-name, .stkm-mat-name            { font-weight: var(--stk-text-weight); color: var(--stk-text); text-align: center; }
.stk-mat-card.active .stk-mat-name,
.stkm-mat.active .stkm-mat-name          { font-weight: var(--stk-text-weight-bold); }


/* ─────────────────────────────────────────────────────────
   BADGES
   ───────────────────────────────────────────────────────── */
.stk-badge-popular,
.stkm-badge                              { font-size: var(--stk-badge-size); font-weight: 600; color: #000; background: var(--stk-badge); border-radius: 4px; padding: 2px 8px; letter-spacing: 0.5px; }

.stk-qty-disc, .stkm-config-qty-disc,
.stkm-qty-disc                           { font-size: var(--stk-badge-size); font-weight: 600; color: #fff; background: var(--stk-discount); border-radius: 4px; padding: 2px 8px; display: inline-block; }
.stk-qty-disc:empty, .stkm-config-qty-disc:empty,
.stkm-qty-disc:empty                     { background: none; padding: 0; }
.stk-qty-disc.stk-disc-popular,
.stkm-config-qty-disc.popular,
.stkm-qty-disc.popular                   { background: var(--stk-accent); color: #000; }


/* ─────────────────────────────────────────────────────────
   PRECIOS
   ───────────────────────────────────────────────────────── */
.stk-price-total strong,
.stkm-config-price strong                { font-size: var(--stk-price-size); font-weight: 900; color: var(--stk-text); }
.stkm-header-price                       { font-family: var(--stk-font-heading); font-size: 18px; font-weight: 900; color: var(--stk-text); }


/* ─────────────────────────────────────────────────────────
   RADIO BUTTONS (acabado)
   ───────────────────────────────────────────────────────── */
.stk-finish-radio, .stkm-finish-radio    { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--stk-radio-border); position: relative; flex-shrink: 0; }
.stk-finish-btn.active .stk-finish-radio,
.stkm-config-finish.active .stkm-finish-radio { border-color: var(--stk-text); }
.stk-finish-btn.active .stk-finish-radio::after,
.stkm-config-finish.active .stkm-finish-radio::after { content: ''; position: absolute; top: 2px; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--stk-text); }


/* ─────────────────────────────────────────────────────────
   CARRUSEL
   ───────────────────────────────────────────────────────── */
.stk-carousel-slide, .stkm-carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; display: flex; align-items: center; justify-content: center; }
.stk-carousel-slide.active, .stkm-carousel-slide.active { opacity: 1; }
.stk-carousel-slide img, .stkm-carousel-slide img { width: 100% !important; height: 100% !important; object-fit: var(--stk-carousel-img-fit) !important; }
.stk-carousel-dot, .stkm-carousel-dot    { width: 10px; height: 10px; border-radius: 50%; border: none; background: var(--stk-dot-color); cursor: pointer; padding: 0; transition: background .2s; }
.stk-carousel-dot.active, .stkm-carousel-dot.active { background: var(--stk-dot-color-active); }
.stk-carousel-dot:hover                  { background: rgba(255,255,255,0.7); }


/* ─────────────────────────────────────────────────────────
   COLORES DE VINILO
   ───────────────────────────────────────────────────────── */
.stk-vinyl-colors                        { display: none !important; }
.stk-vinyl-label                         { font-size: 11px; font-weight: 600; color: var(--stk-text); letter-spacing: 0.3px; }
.stk-vinyl-dots                          { display: flex; gap: 9px; align-items: center; }
.stk-vcolor                              { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; transition: transform 0.15s, border-color 0.15s; outline: none; flex-shrink: 0; }
.stk-vcolor:hover                        { transform: scale(1.15); }
.stk-vcolor.active                       { border-color: var(--stk-heading) !important; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--stk-heading); }


/* ─────────────────────────────────────────────────────────
   TEXTAREA / COMENTARIOS
   ───────────────────────────────────────────────────────── */
.stk-comment, .stkm-comment-textarea     { width: 100%; padding: 12px 14px; border: 1px solid var(--stk-border); border-radius: var(--stk-radius); font-family: inherit; font-size: var(--stk-text-size); color: var(--stk-text); resize: vertical; box-sizing: border-box; transition: border-color .12s; }
.stk-comment:focus, .stkm-comment-textarea:focus { outline: none; border-color: var(--stk-heading); }
.stk-comment::placeholder, .stkm-comment-textarea::placeholder { color: var(--stk-text-placeholder); }


/* ─────────────────────────────────────────────────────────
   DRAWER CHECKS (mobile)
   ───────────────────────────────────────────────────────── */
.stkm-drawer-item .stkm-check            { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ccc; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.stkm-drawer-item.active .stkm-check     { border-color: var(--stk-heading); background: var(--stk-heading); }
.stkm-drawer-item.active .stkm-check::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; }


/* ─────────────────────────────────────────────────────────
   SHAPE CARDS — Selector de forma estilo tarjeta
   ─────────────────────────────────────────────────────────
   CONTEXTO:
   stk-desktop.css define .stk-shapes con border-top/bottom y
   overflow:hidden (estilo lista). Estas reglas sobreescriben
   ese comportamiento cuando el selector usa el nuevo formato
   de tarjetas (.stk-shape-card).

   ESTRUCTURA HTML:
   .stk-shapes
     └── .stk-shape-btn.stk-shape-card[.active]
           ├── .stk-shape-card-icon  → SVG fill="currentColor"
           └── .stk-shape-card-label → texto

   COLORES:
   - Inactivo: icono #c8c8c8 (gris claro), fondo blanco
   - Activo:   icono #1a1a1a (negro),      fondo #F2F2F2
   - Sin bordes en ningún lado
   ───────────────────────────────────────────────────────── */

/* Contenedor — elimina bordes y overflow de stk-desktop.css */
.stk-shapes:has(.stk-shape-card) {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  border-top: none !important;
  border-bottom: none !important;
  overflow: visible !important;
}

/* Card base — con borde 1px v2.5 */
.stk-shape-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 20px !important;
  border: 1px solid var(--stk-border) !important;
  border-radius: 0 !important;
  background: var(--stk-bg) !important;
  cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s !important;
}

/* Hover */
.stk-shape-card:hover {
  background: var(--stk-bg-active) !important;
}

/* Activo — fondo gris */
.stk-shape-card.active {
  background: var(--stk-bg-active) !important;
}

/* Icono contenedor */
.stk-shape-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG inactivo — gris claro
   Nota: usa fill Y color para vencer .stk-shape-btn svg { color: var(--stk-heading) }
   definido en stk-desktop.css */
.stk-shape-card:not(.active) svg {
  color: #c8c8c8 !important;
  fill: #c8c8c8 !important;
}

/* SVG activo — negro */
.stk-shape-card.active svg {
  color: #1a1a1a !important;
  fill: #1a1a1a !important;
}

/* Label inactivo */
.stk-shape-card-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--stk-text-muted) !important;
  text-align: center;
  line-height: 1.3;
}

/* Label activo */
.stk-shape-card.active .stk-shape-card-label {
  color: var(--stk-text) !important;
  font-weight: 800 !important;
}


/* ─────────────────────────────────────────────────────────
   MATERIAL CARDS — rediseño estilo shape cards (v2.7)
   Thumb = cuadro bordeado 105x90, círculo dentro, nombre fuera
   ───────────────────────────────────────────────────────── */

/* Card contenedor: sin borde ni fondo */
.stk-mats { gap: 8px !important; }
.stk-mat-card {
  padding: 0 !important;
  background: none !important;
  border: none !important;
  gap: 0 !important;
  width: auto !important;
}

/* Thumb = el cuadro bordeado, 105x90 igual que shape cards */
.stk-mat-thumb {
  width: 105px !important;
  height: 90px !important;
  border-radius: 0 !important;
  border: 1px solid #e2e2e2 !important;
  background: #fff !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Activo: fondo gris sin borde — igual que shape cards */
.stk-mat-card.active .stk-mat-thumb {
  background: #F2F2F2 !important;
  border: none !important;
}

/* Hover: fondo gris claro */
.stk-mat-card:hover .stk-mat-thumb {
  background: #F2F2F2 !important;
}

/* Imagen: círculo fijo 48x48 centrado, no se deforma */
.stk-mat-thumb img {
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  object-fit: cover !important;
  border: 1px solid #c8c8c8 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* Reflectivo — círculo con gradiente metálico (no hay imagen) */
.stk-mat-card[data-material="reflective"] .stk-mat-thumb img {
  display: none !important;
}
.stk-mat-card[data-material="reflective"] .stk-mat-thumb::after {
  content: '' !important;
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  border: 1px solid #c8c8c8 !important;
  background: linear-gradient(135deg,
    #c8c8d0 0%, #e8e8ee 25%, #a8a8b4 45%,
    #f0f0f6 60%, #c0c0cc 80%, #e0e0e8 100%) !important;
  flex-shrink: 0 !important;
}

/* Nombre debajo — fuera del cuadro, con aire top y bottom */
.stk-mat-name {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--stk-text-muted) !important;
  text-align: center !important;
  padding: 10px 0 !important;
  display: block !important;
}
.stk-mat-card.active .stk-mat-name {
  color: var(--stk-text) !important;
  font-weight: 700 !important;
}

/* ─────────────────────────────────────────────────────────
   ACABADO — inactivo con borde 1px (v2.10)
   ───────────────────────────────────────────────────────── */
.stk-finish-btn:not(.active) {
  border: 1px solid var(--stk-border) !important;
}

/* ─────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────── */
.stk-desktop-widget { display: block; }
.stk-mobile-widget  { display: none; }

@media (max-width: 768px) {
  .stk-desktop-widget { display: none !important; }
  .stk-mobile-widget  { display: block !important; margin-top: 0 !important; padding-top: 0 !important; }
  .separate-containers .inside-article   { padding: 18px !important; padding-top: 0 !important; margin-top: 0 !important; }
  .separate-containers .inside-article,
  .inside-article .entry-content,
  .entry-content, .site-main,
  #primary, .content-area                { padding-top: 0 !important; margin-top: 0 !important; }
  .inside-page-header                    { padding-top: 0 !important; margin-top: 0 !important; }
  #stkm-config-stage                     { margin-left: -18px !important; margin-right: -18px !important; width: calc(100% + 36px) !important; }
  .stk-heading-subtitle                  { margin: 0 0 4px 0; }
  .stk-heading-title                     { font-size: 42px; margin: 0 0 14px 0; }
  .stkm-config-label                     { font-size: 25px; margin: 0 0 18px; }
}

/* Upload btn — v2.11 */
.stk-upload-btn {
  font-family: "Inter Tight", sans-serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
}