/* ==========================================================
   QWOOD — Samples Wizard (Modal) · CSS COMPLETO
   v7.0 — Bold Clean 60/30/10
   2026-04-03
   Scope: #qwood-sample-overlay / #qwood-sample-modal + .qwood-sw-*
   ----------------------------------------------------------
   - Montserrat 800+900 cargada explícitamente
   - Extra bold via -webkit-text-stroke
   - Archivo autónomo
   ========================================================== */
/* Google Fonts Montserrat retirado 2026-04-24 — ver home.css nota. */


/* ==========================================================
   0) TOKENS — extraídos de qwood.es
   ========================================================== */

#qwood-sample-overlay{
  /* Tipografía */
  --qws-font: var(--qwood-font-sans, "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);

  /* Marca */
  --qws-primary: #1bcf17;
  --qws-primary-dark: #1bcf17;
  --qws-primary-text: #0d7d0a; /* FIX 2026-07-14 (audit muestras 4a - CSS-02): verde accesible para TEXTO (contraste AA ~5.9:1). El #1bcf17 de marca (~1.9:1) falla WCAG 1.4.3 en texto pequeno; se conserva para fondos/bordes/botones. */
  --qws-primary-soft: rgba(27,207,23,.08);
  --qws-primary-ring: rgba(27,207,23,.15);
  --qws-primary-glow: 0 0 0 3px rgba(27,207,23,.15);

  /* Texto */
  --qws-text: #0f172a;
  --qws-text-strong: #0f172a;
  --qws-muted: rgba(15,23,42,.5);
  --qws-muted-soft: rgba(15,23,42,.38);

  /* Superficies */
  --qws-white: #ffffff;
  --qws-card: #ffffff;
  --qws-bg: #ffffff;
  --qws-bg-alt: #ffffff;
  --qws-bg-tinted: #ffffff;

  /* Bordes — deep grey cleanup 2026-05-27: transparent */
  --qws-border: transparent;
  --qws-border-soft: transparent;
  --qws-border-green: rgba(27,207,23,.15);
  --qws-border-green-strong: rgba(27,207,23,.32);

  /* Semánticos */
  --qws-danger: #ef4444;
  --qws-ok: #1bcf17;

  /* Radios — 22px como la página */
  --qws-radius-xl: 22px;
  --qws-radius-lg: 22px;
  --qws-radius-md: 22px;
  --qws-radius-sm: 12px;
  --qws-radius-pill: 999px;

  /* Sombras — alineadas con página */
  --qws-shadow-soft: 0 8px 24px rgba(15,23,42,.05);
  --qws-shadow-card: 0 16px 38px rgba(15,23,42,.08);
  --qws-shadow-strong: 0 24px 60px rgba(15,23,42,.12);
  --qws-shadow-elevated: 0 24px 60px rgba(15,23,42,.14);
  --qws-shadow-btn: 0 6px 22px rgba(27,207,23,.25);

  /* Transiciones */
  --qws-ease: cubic-bezier(.2,.8,.2,1);
  --qws-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --qws-dur-fast: 140ms;
  --qws-dur: 220ms;
  --qws-dur-slow: 300ms;
  --qws-dur-reveal: 600ms;

  /* Focus ring */
  --qws-ring: 0 0 0 3px rgba(27,207,23,.18);
}


/* ==========================================================
   0.1) RESET SCOPED
   ========================================================== */

#qwood-sample-overlay,
#qwood-sample-overlay *{
  box-sizing: border-box;
  font-family: var(--qws-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#qwood-sample-modal ::selection{
  background: rgba(27,207,23,.18);
}

/* Extra bold: text-stroke para superar el límite de weight 900 */
.qwood-sw-title,
.qwood-sw-step-label,
.qwood-sw-stepper-pill,
.qwood-sw-stepper-label,
.qwood-sw-cardtitle,
.qwood-sw-cardeyebrow,
.qwood-sw-confirm-total,
.qwood-sw-badge-refund,
#qwood-sample-modal .qwood-sw-btn.qwood-sw-btn-link{
  -webkit-text-stroke: .25px currentColor;
}
/* NO text-stroke en botones con texto blanco (primary) — distorsiona */
#qwood-sample-modal .qwood-sw-btn.qwood-sw-btn-primary{
  -webkit-text-stroke: 0;
}

#qwood-sample-modal :focus{ outline: none; }

#qwood-sample-modal :where(button, [role="button"], a, input, select, textarea):focus-visible{
  box-shadow: var(--qws-ring);
  border-color: rgba(27,207,23,.75);
}

/* No transform on mobile focus (avoid viewport jank) */
@media (max-width: 980px){
  #qwood-sample-modal input:focus,
  #qwood-sample-modal button:focus,
  #qwood-sample-modal select:focus{
    transform: none !important;
  }
}


/* ==========================================================
   1) OVERLAY + BODY SCROLL LOCK
   ========================================================== */

body.qwood-sample-modal-open,
body.qwood-sw-modal-open{
  overflow: hidden !important;
  touch-action: none;
}
html.qwood-sw-html-lock{
  overflow: hidden !important;
}

#qwood-sample-overlay{
  position: fixed;
  inset: 0;
  z-index: 1000003;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 46px 22px;
  background: rgba(15,23,42,.52);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  overflow: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#qwood-sample-overlay.is-visible{
  display: flex;
}

/* Overlay entrance */
@keyframes qws-overlay-in{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

#qwood-sample-overlay.is-visible{
  animation: qws-overlay-in var(--qws-dur-slow) var(--qws-ease) both;
}


/* ==========================================================
   2) MODAL
   ========================================================== */

#qwood-sample-modal{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1020px;
  max-height: calc(100vh - 92px);
  background: var(--qws-white);
  border: none;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(15,23,42,.14);
  overflow: hidden;
  /* FIX 2026-07-14 (audit muestras 4a - CSS-01): fill-mode 'backwards' (no 'both'). Una
     animacion con 'forwards' que interpola transform deja el elemento en matrix(1,0,0,1,0,0)
     (identidad) PERMANENTEMENTE — sigue creando bloque contenedor y rompe position:fixed del
     zoom/toast, aunque el keyframe final sea transform:none. Sin forwards, tras la entrada el
     modal revierte a base (sin transform). */
  animation: qws-modal-in var(--qws-dur-slow) var(--qws-ease) backwards;
}

@keyframes qws-modal-in{
  from{
    opacity: 0;
    transform: translateY(24px) scale(.97);
  }
  to{
    opacity: 1;
    /* FIX 2026-07-14 (audit muestras 4a - CSS-01): transform:none (no translateY(0) scale(1)).
       Con animation-fill-mode:both el modal RETENIA un transform no-none al terminar, lo que
       crea un bloque contenedor y rompe position:fixed del zoom de imagen y del toast en
       desktop (>700px). translateY(0) scale(1) es visualmente identico a none. */
    transform: none;
  }
}


/* ==========================================================
   3) HEADER
   ========================================================== */

.qwood-sw-header{
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--qws-white);
  padding: 20px 28px 0;
  border-bottom: none;
  flex-shrink: 0;
}

/* LED glow bar under header — deep grey cleanup 2026-05-27: removed decorative stripe */
.qwood-sw-header::after{
  display: none;
}

/* --- Header Top Row --- */
.qwood-sw-header-top{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.qwood-sw-title-group{
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

h3.qwood-sw-title{
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
  color: #0f172a;
  letter-spacing: -.03em;
}

.qwood-sw-step-label{
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(15,23,42,.32);
}

/* --- Refund Badge --- */
.qwood-sw-badge-refund{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--qws-text);
  background: rgba(27,207,23,.06);
  border: 1px solid rgba(27,207,23,.15);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.qwood-sw-badge-refund-price{
  font-size: 15px;
  font-weight: 900;
  color: var(--qws-primary-text);
}

/* --- Close Button (audit 2026-04-06: ≥44×44 WCAG AA tap target) --- */
button.qwood-sw-close{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: rgba(15,23,42,.06);
  color: #0f172a;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}

button.qwood-sw-close:hover{
  background: rgba(15,23,42,.06);
  color: #0f172a;
}

button.qwood-sw-close svg{
  width: 18px;
  height: 18px;
}


/* ==========================================================
   4) STEPPER
   ========================================================== */

.qwood-sw-stepper{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding: 12px 0 16px;
}

/* Step item: agrupa pill + label en columna para que la línea
   quede visualmente entre las dos pills (no entre label y pill2).
   Ancho fijo para que ELEGIR y CONFIRMAR ocupen el mismo espacio
   y la línea quede equidistante de ambas pills. */
.qwood-sw-stepper-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 110px;
}

/* --- Pills --- */
.qwood-sw-stepper-pill{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  max-width: 46px;
  min-height: 46px;
  max-height: 46px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15,23,42,.08);
  color: var(--qws-muted-soft);
  font-size: 18px;
  font-weight: 900;
  flex-shrink: 0;
  transition: all var(--qws-dur) var(--qws-ease);
}

.qwood-sw-stepper-pill.is-active{
  background: var(--qws-primary);
  border-color: var(--qws-primary);
  color: var(--qws-white);
  box-shadow: 0 6px 20px rgba(27,207,23,.4), 0 2px 6px rgba(27,207,23,.25);
}

.qwood-sw-stepper-pill.is-done{
  background: var(--qws-primary);
  border-color: var(--qws-primary);
  color: var(--qws-white);
  box-shadow: none;
}

.qwood-sw-stepper-num{
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

/* --- Labels --- */
.qwood-sw-stepper-label{
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--qws-muted-soft);
  padding: 0 12px;
  transition: color var(--qws-dur) var(--qws-ease);
}

.qwood-sw-stepper-label.is-active{
  color: var(--qws-primary-text);
}

.qwood-sw-stepper-label.is-done{
  color: var(--qws-primary-text);
}

/* --- LED Connector Line --- */
.qwood-sw-stepper-line{
  flex: 0 0 60px;
  height: 3.5px;
  background: rgba(15,23,42,.06);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  /* Alinear el centro de la línea con el centro de la pill (46px).
     Con .qwood-sw-stepper en align-items:flex-start, el top del item
     coincide con el top de la pill, así que basta empujar la línea
     hacia abajo media-pill menos media-línea. */
  margin-top: calc((46px - 3.5px) / 2);
}

.qwood-sw-stepper-line-fill{
  position: absolute;
  inset: 0;
  width: 0%;
  background: rgba(27,207,23,.25);
  border-radius: inherit;
  transition: width var(--qws-dur-reveal) var(--qws-ease);
}

.qwood-sw-stepper-line.is-full .qwood-sw-stepper-line-fill{
  width: 100%;
}


/* ==========================================================
   5) CONTENT AREA
   ========================================================== */

.qwood-sw-content{
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 0;
}

/* Scrollbar */
.qwood-sw-content::-webkit-scrollbar{
  width: 5px;
}
.qwood-sw-content::-webkit-scrollbar-track{
  background: transparent;
}
.qwood-sw-content::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.12);
  border-radius: var(--qws-radius-pill);
}
.qwood-sw-content::-webkit-scrollbar-thumb:hover{
  background: rgba(15,23,42,.22);
}


/* ==========================================================
   6) SCREENS (transitions)
   ========================================================== */

.qwood-sw-screen{
  display: none;
  padding: 20px 28px 28px;
}

.qwood-sw-screen.is-active{
  display: block;
  animation: qws-screen-in var(--qws-dur-slow) var(--qws-ease) both;
}

@keyframes qws-screen-in{
  from{
    opacity: 0;
    transform: translateY(10px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==========================================================
   7) SCREEN 1 — GRID
   ========================================================== */

.qwood-sw-instruction{
  font-size: 14px;
  font-weight: 700;
  color: rgba(15,23,42,.45);
  margin: 0 0 18px;
  line-height: 1.5;
}

/* ==========================================================
   SHIPPING TIP — Bold Clean 60/30/10 (alineado con badges del wizard)
   "Pide varias y compáralas en casa — el envío es el mismo (10€)"
   v2026-04-06: refactor a tokens --qws-* + extra bold + radio 22px
   ========================================================== */
.qwood-sw-shipping-tip{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 22px;
  padding: 18px 20px;
  background: rgba(27,207,23,.06);
  border: 1px solid var(--qws-border-green);
  border-radius: var(--qws-radius-lg);
  box-shadow: var(--qws-shadow-soft);
  color: var(--qws-text);
  overflow: hidden;
}
/* Acento verde lateral subtil — aporta jerarquía sin gritar */
.qwood-sw-shipping-tip::before{
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--qws-primary);
  border-radius: 4px 0 0 4px;
}

.qwood-sw-shipping-tip-icon{
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 22px; /* legacy: emoji fallback antes del SVG. Inocuo con SVG. */
  line-height: 1;
  color: var(--qws-primary); /* SVG: heredado por stroke="currentColor" */
  background: var(--qws-white);
  border: 1px solid var(--qws-border-green);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(27,207,23,.10);
}
.qwood-sw-shipping-tip-icon svg{
  width: 20px;
  height: 20px;
  display: block;
}

.qwood-sw-shipping-tip-text{
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.55;
  color: rgba(15,23,42,.72);
  letter-spacing: .005em;
}

.qwood-sw-shipping-tip-text strong{
  display: block;
  margin-bottom: 4px;
  font-size: 14.5px;
  font-weight: 900;
  color: var(--qws-primary-text);
  letter-spacing: -.005em;
  /* Extra bold via text-stroke (mismo patrón que qwood-sw-title) */
  -webkit-text-stroke: .25px currentColor;
}

/* Variante compacta (screen 2 — confirmar)
   Mantiene la estética bold del step 1, solo reduce dimensiones.
   v2026-04-06: re-bold tras feedback del user. */
.qwood-sw-shipping-tip--compact{
  padding: 16px 18px;
  gap: 13px;
  margin: 16px 0 18px;
  background: rgba(27,207,23,.06);
  border: 1px solid var(--qws-border-green);
  box-shadow: var(--qws-shadow-soft);
}
.qwood-sw-shipping-tip--compact .qwood-sw-shipping-tip-icon{
  width: 34px;
  height: 34px;
  font-size: 19px;
  background: var(--qws-white);
  border: 1px solid var(--qws-border-green);
  box-shadow: 0 2px 8px rgba(27,207,23,.10);
}
.qwood-sw-shipping-tip--compact .qwood-sw-shipping-tip-text{
  font-size: 13.5px;
  font-weight: 800;
  color: var(--qws-text);
  -webkit-text-stroke: .18px currentColor;
}
.qwood-sw-shipping-tip--compact .qwood-sw-shipping-tip-text strong{
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 900;
  color: var(--qws-primary-text);
  -webkit-text-stroke: .25px currentColor;
}

/* Link "Añadir más muestras" — pill verde sutil estilo del wizard */
.qwood-sw-shipping-tip-back{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* FIX 2026-07-14 (audit muestras 4a - CSS-07): tap target >=44px (el propio fichero
     declara 44px como estandar; este link se quedaba en ~25px). */
  min-height: 44px;
  gap: 4px;
  margin-left: 6px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--qws-primary-text);
  background: rgba(27,207,23,.10);
  border: 1px solid var(--qws-border-green);
  border-radius: var(--qws-radius-pill);
  text-decoration: none;
  -webkit-text-stroke: .25px currentColor;
  transition: background var(--qws-dur) var(--qws-ease),
              border-color var(--qws-dur) var(--qws-ease),
              transform var(--qws-dur) var(--qws-ease);
}
.qwood-sw-shipping-tip-back:hover,
.qwood-sw-shipping-tip-back:focus-visible{
  background: rgba(27,207,23,.16);
  border-color: var(--qws-border-green-strong);
  transform: translateY(-1px);
}

@media (max-width: 640px){
  .qwood-sw-shipping-tip{
    padding: 16px 18px;
    gap: 12px;
    margin-bottom: 18px;
  }
  .qwood-sw-shipping-tip-icon{
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
  .qwood-sw-shipping-tip-text{ font-size: 13px; }
  .qwood-sw-shipping-tip-text strong{ font-size: 14px; }
}
@media (max-width: 380px){
  .qwood-sw-shipping-tip{
    padding: 14px 16px;
    gap: 10px;
  }
  .qwood-sw-shipping-tip-icon{
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
  .qwood-sw-shipping-tip-text strong{ font-size: 13.5px; }
}

/* --- Grid Layout --- */
.qwood-sw-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: start;
}

@media (max-width: 640px){
  .qwood-sw-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 400px){
  .qwood-sw-grid{
    grid-template-columns: 1fr;
  }
}

/* --- Grid card stagger entrance --- */
.qwood-sw-grid > .qwood-sw-wood-card{
  animation: qws-card-stagger var(--qws-dur-slow) var(--qws-ease) both;
}
.qwood-sw-grid > .qwood-sw-wood-card:nth-child(1){ animation-delay: 0ms; }
.qwood-sw-grid > .qwood-sw-wood-card:nth-child(2){ animation-delay: 50ms; }
.qwood-sw-grid > .qwood-sw-wood-card:nth-child(3){ animation-delay: 100ms; }
.qwood-sw-grid > .qwood-sw-wood-card:nth-child(4){ animation-delay: 150ms; }
.qwood-sw-grid > .qwood-sw-wood-card:nth-child(5){ animation-delay: 200ms; }
.qwood-sw-grid > .qwood-sw-wood-card:nth-child(6){ animation-delay: 250ms; }
.qwood-sw-grid > .qwood-sw-wood-card:nth-child(7){ animation-delay: 300ms; }
.qwood-sw-grid > .qwood-sw-wood-card:nth-child(8){ animation-delay: 350ms; }
.qwood-sw-grid > .qwood-sw-wood-card:nth-child(9){ animation-delay: 400ms; }
.qwood-sw-grid > .qwood-sw-wood-card:nth-child(n+10){ animation-delay: 420ms; }

@keyframes qws-card-stagger{
  from{
    opacity: 0;
    transform: translateY(14px) scale(.97);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- Grid Loading --- */
.qwood-sw-grid-loading{
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--qws-muted);
}

/* Skeleton shimmer for loading state */
/* FIX 2026-07-14 (audit muestras 4a - CSS-03): sin linear-gradient (prohibido por regla de
   marca). Barra sólida de color primario con pulso de opacidad como indicador indeterminado. */
.qwood-sw-grid-loading::after{
  content: "";
  width: 120px;
  height: 3px;
  border-radius: var(--qws-radius-pill);
  background: var(--qws-primary);
  animation: qws-loading-bar 1.2s ease-in-out infinite;
}

@keyframes qws-loading-bar{
  0%,100%{ opacity: .25; }
  50%{ opacity: .9; }
}


/* ==========================================================
   7b) RECOMMENDATION CARD (loaded via AJAX into grid)
   ========================================================== */

.qwood-sw-card{
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: none;
  background: #ffffff;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(15,23,42,.08);
  transition: box-shadow var(--qws-dur) var(--qws-ease),
              transform var(--qws-dur) var(--qws-ease);
}

.qwood-sw-card:hover{
  box-shadow: 0 12px 28px rgba(15,23,42,.12);
  transform: translateY(-1px);
}

.qwood-sw-card.is-in-list{
  border: 2.5px solid #1bcf17;
  box-shadow: 0 6px 22px rgba(27,207,23,.15);
}

.qwood-sw-card.is-in-list:hover{
  transform: none;
}

/* Force image height — scoped for specificity over intrinsic sizing */
#qwood-sample-modal .qwood-sw-cardthumb,
.qwood-sw-cardthumb{
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  background: var(--qws-bg);
  flex-shrink: 0;
  border-radius: 22px 22px 0 0;
}

.qwood-sw-cardbody{
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.qwood-sw-cardeyebrow{
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--qws-primary-text);
}

.qwood-sw-cardtitle{
  font-size: 16px;
  font-weight: 900;
  color: var(--qws-text);
  line-height: 1.3;
}

.qwood-sw-card .qwood-sw-btn{
  margin: 0 14px 14px;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 900;
}

/* --- Inline variation pills (card expanded) --- */
.qwood-sw-card-pills{
  padding: 0 14px 10px;
}
.qwood-sw-card-pills-label{
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(15,23,42,.40);
  margin-bottom: 6px;
}
.qwood-sw-card-pills-row{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.qwood-sw-card-pills .qwood-sw-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  border: none;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15,23,42,.08);
  color: #0f172a;
  cursor: pointer;
  transition: all .15s ease;
}
.qwood-sw-card-pills .qwood-sw-pill.qwood-sw-pill--has-img{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 3px;
  border-radius: 22px;
}
.qwood-sw-pill-thumb{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: none;
  transition: border-color .15s ease, transform .15s ease;
}
.qwood-sw-pill.is-active .qwood-sw-pill-thumb{
  border-color: #fff;
}
.qwood-sw-pill:hover .qwood-sw-pill-thumb{
  transform: scale(1.08);
}
.qwood-sw-pill-label{
  white-space: nowrap;
}
.qwood-sw-card-pills .qwood-sw-pill:hover{
  border-color: rgba(27,207,23,.30);
  background: rgba(27,207,23,.04);
}
.qwood-sw-card-pills .qwood-sw-pill.is-active{
  background: #1bcf17;
  border-color: var(--qws-primary);
  color: #fff;
}
.qwood-sw-card.is-expanded{
  border-color: rgba(27,207,23,.25);
}
.qwood-sw-card.is-expanded .qwood-sw-btn{
  opacity: .5;
}
.qwood-sw-card.is-expanded.is-in-list .qwood-sw-btn{
  opacity: 1;
}
/* --- Card expand: pills arriba + preview abajo (stacked) --- */
.qwood-sw-card-expand{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px 12px;
}
.qwood-sw-card-expand .qwood-sw-card-pills{
  padding: 0;
}
.qwood-sw-card-expand .qwood-sw-card-pills-row{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-height: 86px;
  overflow-y: auto;
}

/* Preview panel (todo el ancho, debajo de pills) */
.qwood-sw-card-preview{
  width: 100%;
  height: 150px;
  border-radius: var(--qws-radius-sm, 12px);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: var(--qws-bg-alt, #ffffff);
}
.qwood-sw-card-preview-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--qws-dur, 220ms) var(--qws-ease, ease);
}
.qwood-sw-card-preview:hover .qwood-sw-card-preview-img{
  transform: scale(1.03);
}
.qwood-sw-card-preview-label{
  position: absolute;
  bottom: 32px;
  left: 10px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
  pointer-events: none;
}
.qwood-sw-card-preview-zoom{
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(255,255,255,.92);
  border-radius: var(--qws-radius-pill, 999px);
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 800;
  color: var(--qws-text, #0f172a);
  cursor: pointer;
  transition: background var(--qws-dur-fast, 140ms) ease;
  pointer-events: auto;
}
.qwood-sw-card-preview-zoom:hover{
  background: #fff;
}

/* --- Mobile: pills + preview adjustments --- */
@media (max-width: 600px){
  .qwood-sw-card-expand .qwood-sw-pill-thumb{
    width: 22px;
    height: 22px;
  }
  .qwood-sw-card-preview{
    height: 120px;
  }
}

.qwood-sw-card .qwood-sw-btn-primary{
  background: var(--qws-primary);
  color: var(--qws-white);
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(27,207,23,.25);
  transition: background var(--qws-dur-fast) var(--qws-ease),
              box-shadow var(--qws-dur-fast) var(--qws-ease);
}

.qwood-sw-card .qwood-sw-btn-primary:hover{
  background: var(--qws-primary-dark);
}

.qwood-sw-card.is-in-list .qwood-sw-btn-primary{
  background: var(--qws-primary-dark);
}

/* Note messages */
.qwood-sw-note{
  grid-column: 1 / -1;
  padding: 24px 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--qws-muted);
  border-radius: var(--qws-radius-sm);
  background: var(--qws-bg);
}

.qwood-sw-note.is-warn{
  color: var(--qws-danger);
  background: rgba(239,68,68,.06);
}


/* ==========================================================
   8) WOOD CARD — COLLAPSED
   ========================================================== */

.qwood-sw-wood-card{
  position: relative;
  border-radius: 22px;
  border: none;
  background: #ffffff;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(15,23,42,.08);
  transition: box-shadow var(--qws-dur) var(--qws-ease),
              transform var(--qws-dur) var(--qws-ease);
}

.qwood-sw-wood-card:hover:not(.is-selected){
  box-shadow: 0 12px 28px rgba(15,23,42,.12);
  transform: translateY(-1px);
}

/* --- Collapsed Layout --- */
.qwood-sw-wood-card-collapsed{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px;
}

.qwood-sw-wood-card-img{
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  border-radius: calc(var(--qws-radius-md) - 4px);
  overflow: hidden;
  background: var(--qws-bg);
}

.qwood-sw-wood-card-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--qws-dur) var(--qws-ease);
}


.qwood-sw-wood-card-body{
  flex: 1;
  min-width: 0;
  padding: 4px 4px 4px 0;
}

.qwood-sw-wood-card-name{
  font-size: 13px;
  font-weight: 900;
  color: var(--qws-text);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qwood-sw-wood-card-sub{
  font-size: 11px;
  font-weight: 600;
  color: var(--qws-muted);
  line-height: 1.3;
}


/* ==========================================================
   9) WOOD CARD — SELECTED / EXPANDED
   ========================================================== */

.qwood-sw-wood-card.is-selected{
  border: 2.5px solid #1bcf17;
  box-shadow: 0 6px 22px rgba(27,207,23,.15);
}

.qwood-sw-wood-card.is-selected .qwood-sw-wood-card-collapsed{
  display: none;
}

/* --- Checkmark Badge --- */
.qwood-sw-checkmark{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--qws-primary);
  color: var(--qws-white);
  box-shadow: 0 2px 8px rgba(27,207,23,.3);
  animation: qws-check-pop var(--qws-dur) var(--qws-ease-spring) both;
}

.qwood-sw-wood-card.is-selected .qwood-sw-checkmark{
  display: flex;
}

.qwood-sw-checkmark svg{
  width: 14px;
  height: 14px;
}

@keyframes qws-check-pop{
  from{
    opacity: 0;
    transform: scale(.5);
  }
  to{
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Expanded Panel --- */
.qwood-sw-wood-card-expanded{
  display: none;
}

.qwood-sw-wood-card.is-selected .qwood-sw-wood-card-expanded{
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding: 14px;
  animation: qws-expand-in var(--qws-dur-slow) var(--qws-ease) both;
}


@keyframes qws-expand-in{
  from{
    opacity: 0;
    transform: translateY(6px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Expanded Image --- */
.qwood-sw-expanded-img{
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  border-radius: calc(var(--qws-radius-md) - 4px);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--qws-bg);
}

.qwood-sw-expanded-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--qws-dur) var(--qws-ease);
}

.qwood-sw-expanded-img:hover img{
  transform: scale(1.05);
}

/* --- Zoom Hint Lupa --- */
.qwood-sw-zoom-hint{
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--qws-text);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--qws-radius-pill);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--qws-dur-fast) var(--qws-ease),
              transform var(--qws-dur-fast) var(--qws-ease);
}

.qwood-sw-zoom-hint svg{
  width: 12px;
  height: 12px;
}

.qwood-sw-expanded-img:hover .qwood-sw-zoom-hint{
  opacity: 1;
  transform: translateY(0);
}

/* --- Expanded Content --- */
.qwood-sw-expanded-content{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
}

.qwood-sw-expanded-name{
  font-size: 15px;
  font-weight: 900;
  color: var(--qws-text);
  line-height: 1.25;
  letter-spacing: -.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qwood-sw-expanded-label{
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--qws-muted);
}

/* --- Variant Pills --- */
.qwood-sw-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

button.qwood-sw-pill{
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 800;
  color: var(--qws-text);
  background: #ffffff;
  border: none;
  box-shadow: 0 2px 8px rgba(15,23,42,.08);
  border-radius: var(--qws-radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--qws-dur-fast) var(--qws-ease);
}

button.qwood-sw-pill:hover{
  border-color: var(--qws-border-green);
  background: var(--qws-primary-soft);
}

button.qwood-sw-pill.is-active{
  background: var(--qws-primary);
  border-color: var(--qws-primary);
  color: var(--qws-white);
}

/* --- Deselect Button --- */
button.qwood-sw-deselect{
  display: inline-flex;
  align-items: center;
  padding: 5px 0;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--qws-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--qws-dur-fast) var(--qws-ease);
  align-self: flex-start;
}

button.qwood-sw-deselect:hover{
  color: var(--qws-danger);
}

/* --- Card Loading State --- */
.qwood-sw-wood-card.is-loading{
  pointer-events: none;
  opacity: .65;
}

.qwood-sw-wood-card.is-loading::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.25);
  animation: qws-shimmer 1.4s ease-in-out infinite;
}

@keyframes qws-shimmer{
  0%, 100%{ opacity: 0; }
  50%{ opacity: 1; }
}

/* --- Mobile: Expanded vertical layout --- */
@media (max-width: 640px){
  .qwood-sw-wood-card.is-selected .qwood-sw-wood-card-expanded{
    flex-direction: column;
  }

  .qwood-sw-expanded-img{
    width: 100%;
    height: 160px;
  }
}


/* ==========================================================
   10) IMAGE ZOOM OVERLAY
   ========================================================== */

.qwood-sw-imgzoom{
  position: fixed;
  inset: 0;
  z-index: 1000010;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15,23,42,.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: zoom-out;
}

.qwood-sw-imgzoom.is-open{
  display: flex;
  animation: qws-zoom-bg-in var(--qws-dur) var(--qws-ease) both;
}

@keyframes qws-zoom-bg-in{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* --- Close Zoom --- */
button.qwood-sw-imgzoom-close{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: var(--qws-radius-sm);
  color: #fff;
  cursor: pointer;
  transition: background var(--qws-dur-fast) var(--qws-ease);
}

button.qwood-sw-imgzoom-close:hover{
  background: rgba(255,255,255,.25);
}

button.qwood-sw-imgzoom-close svg{
  width: 20px;
  height: 20px;
}

/* --- Zoom Stage --- */
.qwood-sw-imgzoom-stage{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 24px;
}

.qwood-sw-imgzoom-img{
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--qws-radius-md);
  box-shadow: 0 24px 80px rgba(0,0,0,.4);
  animation: qws-zoom-img-in var(--qws-dur-slow) var(--qws-ease-spring) both;
}

@keyframes qws-zoom-img-in{
  from{
    opacity: 0;
    transform: scale(.88);
  }
  to{
    opacity: 1;
    transform: scale(1);
  }
}


/* ==========================================================
   11) SCREEN 2 — CONFIRM
   ========================================================== */

/* --- Confirm List --- */
.qwood-sw-confirm-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

/* --- Confirm Row --- */
.qwood-sw-confirm-row{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #ffffff;
  border: none;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(15,23,42,.08);
  animation: qws-row-in var(--qws-dur-slow) var(--qws-ease) both;
}

@keyframes qws-row-in{
  from{
    opacity: 0;
    transform: translateX(-8px);
  }
  to{
    opacity: 1;
    transform: translateX(0);
  }
}

/* Stagger animation for rows */
.qwood-sw-confirm-row:nth-child(1){ animation-delay: 0ms; }
.qwood-sw-confirm-row:nth-child(2){ animation-delay: 60ms; }
.qwood-sw-confirm-row:nth-child(3){ animation-delay: 120ms; }
.qwood-sw-confirm-row:nth-child(4){ animation-delay: 180ms; }
.qwood-sw-confirm-row:nth-child(5){ animation-delay: 240ms; }

/* Slide-out on remove */
.qwood-sw-confirm-row.is-removing{
  animation: qws-row-out var(--qws-dur) var(--qws-ease) forwards;
}

@keyframes qws-row-out{
  from{
    opacity: 1;
    transform: translateX(0);
  }
  to{
    opacity: 0;
    transform: translateX(-20px);
  }
}

/* --- Confirm Thumb --- */
img.qwood-sw-confirm-thumb{
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 10px;
  object-fit: cover;
  background: #ffffff;
}

/* --- Confirm Info --- */
.qwood-sw-confirm-info{
  flex: 1;
  min-width: 0;
}

.qwood-sw-confirm-title{
  font-size: 13px;
  font-weight: 900;
  color: var(--qws-text);
  line-height: 1.3;
  letter-spacing: -.01em;
}

.qwood-sw-confirm-variant{
  font-size: 11px;
  font-weight: 600;
  color: var(--qws-muted);
  line-height: 1.3;
  margin-top: 1px;
}

/* --- Confirm Price --- */
.qwood-sw-confirm-price{
  font-size: 14px;
  font-weight: 900;
  color: var(--qws-text);
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- Confirm Remove --- */
button.qwood-sw-confirm-remove{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  flex-shrink: 0;
  border: none;
  border-radius: 10px;
  background: var(--qws-white);
  box-shadow: 0 2px 8px rgba(15,23,42,.08);
  color: var(--qws-muted);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: all var(--qws-dur-fast) var(--qws-ease);
}

/* Expand effective tap target to 44x44 without enlarging the visible circle */
button.qwood-sw-confirm-remove::after{
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 12px;
}

button.qwood-sw-confirm-remove:hover{
  border-color: rgba(239,68,68,.3);
  color: var(--qws-danger);
  background: rgba(239,68,68,.06);
}

/* --- Confirm Total --- */
.qwood-sw-confirm-total{
  padding: 18px 0 0;
  border-top: 1px solid rgba(15,23,42,.06);
  margin-top: 10px;
}

.qwood-sw-confirm-total-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.qwood-sw-confirm-total-text{
  font-size: 14px;
  font-weight: 700;
  color: var(--qws-text);
}

.qwood-sw-confirm-total-badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 15px;
  font-weight: 900;
  color: var(--qws-primary-text);
  background: rgba(27,207,23,.06);
  border: 1px solid rgba(27,207,23,.15);
  border-radius: 12px;
}

/* --- Confirm Actions --- */
.qwood-sw-confirm-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}


/* ==========================================================
   12) SCREEN 3 — SUCCESS
   ========================================================== */

.qwood-sw-success{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 16px;
  gap: 12px;
}

.qwood-sw-success-icon{
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(27,207,23,.08);
  color: var(--qws-primary-text);
  margin-bottom: 4px;
  animation: qws-success-pop var(--qws-dur-slow) var(--qws-ease-spring) both;
}

.qwood-sw-success-icon svg{
  width: 28px;
  height: 28px;
}

@keyframes qws-success-pop{
  from{
    opacity: 0;
    transform: scale(.5);
  }
  60%{
    transform: scale(1.08);
  }
  to{
    opacity: 1;
    transform: scale(1);
  }
}

h4.qwood-sw-success-title{
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -.02em;
}

p.qwood-sw-success-text{
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--qws-muted);
  line-height: 1.55;
  max-width: 380px;
}

.qwood-sw-success-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  justify-content: center;
}


/* ==========================================================
   13) FOOTER
   ========================================================== */

.qwood-sw-footer{
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: #ffffff;
  border-top: 1px solid rgba(15,23,42,.06);
  padding: 14px 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* --- Footer Counter (inline) --- */
.qwood-sw-footer-counter{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--qws-text);
}

.qwood-sw-footer-sep{ color: rgba(15,23,42,.3); }
.qwood-sw-footer-price{ font-weight: 900; color: var(--qws-primary-text); }
.qwood-sw-footer-refund{ font-size: 12px; color: rgba(15,23,42,.4); }

/* --- Footer CTA --- */
#qwood-sw-footer-cta,
.qwood-sw-footer-cta{
  border-radius: 999px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 900;
  background: #1bcf17;
  color: #fff;
  border: none;
  box-shadow: 0 6px 22px rgba(27,207,23,.25);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
#qwood-sw-footer-cta:disabled,
.qwood-sw-footer-cta:disabled{
  opacity: .45;
  box-shadow: none;
  cursor: not-allowed;
}

/* Legacy footer-main/count (compat with old HTML) */
.qwood-sw-footer-main{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0;
}

.qwood-sw-footer-count{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.qwood-sw-footer-count-text{
  font-size: 14px;
  font-weight: 800;
  color: var(--qws-text);
}

.qwood-sw-footer-count-text .qwood-sw-price{
  font-weight: 900;
  color: var(--qws-primary-text);
}

.qwood-sw-footer-count-refund{
  font-size: 11px;
  font-weight: 600;
  color: var(--qws-muted);
}


/* ==========================================================
   14) BUTTONS
   ========================================================== */

.qwood-sw-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  font-family: var(--qws-font) !important;
  font-size: 14px;
  font-weight: 900 !important;
  line-height: 1.2;
  letter-spacing: -.01em;
  border: none;
  border-radius: var(--qws-radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--qws-dur) var(--qws-ease);
  user-select: none;
  -webkit-user-select: none;
}

/* --- Primary Button --- */
.qwood-sw-btn.qwood-sw-btn-primary{
  background: var(--qws-primary);
  color: var(--qws-white);
  border: none;
  font-weight: 900;
  box-shadow: 0 6px 22px rgba(27,207,23,.25);
}

.qwood-sw-btn.qwood-sw-btn-primary:hover{
  background: var(--qws-primary-dark);
  transform: translateY(-1px);
}

.qwood-sw-btn.qwood-sw-btn-primary:active{
  transform: translateY(0) scale(.98);
}

.qwood-sw-btn.qwood-sw-btn-primary:disabled,
.qwood-sw-btn.qwood-sw-btn-primary[disabled]{
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* Disabled state via JS class */
.qwood-sw-btn.is-disabled{
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Submit spinner */
.qwood-sw-btn-submit-spinner{
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: qws-spin .6s linear infinite;
  vertical-align: middle;
  margin-left: 8px;
}
@keyframes qws-spin{
  to{ transform: rotate(360deg); }
}

/* --- Link Button --- */
.qwood-sw-btn.qwood-sw-btn-link{
  background: none;
  color: var(--qws-muted);
  padding: 10px 20px;
  font-weight: 900;
  /* FIX 2026-07-14 (audit muestras 4a - CSS-07): tap target >=44px (se quedaba en ~37px). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

.qwood-sw-btn.qwood-sw-btn-link:hover{
  color: var(--qws-text);
  background: var(--qws-bg);
}

/* --- Submit variant (same as primary, just for specificity clarity) --- */
.qwood-sw-btn.qwood-sw-btn-submit{
  width: 100%;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 900;
}


/* ==========================================================
   15) TOAST
   ========================================================== */

.qwood-sw-toast{
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 1000020;
  display: none;
  padding: 12px 24px;
  font-size: 13px;
  font-weight: 800;
  color: var(--qws-white);
  background: var(--qws-text);
  border-radius: var(--qws-radius-md);
  box-shadow: var(--qws-shadow-strong);
  white-space: nowrap;
  max-width: calc(100vw - 40px);
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
}

.qwood-sw-toast.is-visible{
  display: block;
  animation: qws-toast-in var(--qws-dur-slow) var(--qws-ease) forwards;
}

.qwood-sw-toast.is-hiding{
  animation: qws-toast-out var(--qws-dur) var(--qws-ease) forwards;
}

@keyframes qws-toast-in{
  from{
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes qws-toast-out{
  from{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to{
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
}

/* Toast color variants */
.qwood-sw-toast.is-success{
  background: var(--qws-primary-dark);
}

.qwood-sw-toast.is-error{
  background: var(--qws-danger);
}

.qwood-sw-toast.is-warning{
  background: #b45309;
}

.qwood-sw-toast.is-info{
  background: var(--qws-text);
}


/* ==========================================================
   16) RESPONSIVE — TABLET
   ========================================================== */

@media (max-width: 768px){
  #qwood-sample-overlay{
    padding: 24px 12px;
  }

  #qwood-sample-modal{
    max-height: calc(100vh - 48px);
    border-radius: 22px;
  }

  .qwood-sw-header{
    padding: 16px 20px 0;
  }

  .qwood-sw-header-top{
    flex-wrap: wrap;
    gap: 10px;
  }

  h3.qwood-sw-title{
    font-size: 17px;
  }

  .qwood-sw-badge-refund{
    font-size: 11px;
    padding: 5px 12px;
  }

  .qwood-sw-screen{
    padding: 16px 20px 24px;
  }

  .qwood-sw-footer{
    padding: 12px 20px;
  }
}

/* ===== MOBILE CARD + FOOTER ===== */
@media (max-width: 640px){
  #qwood-sample-modal .qwood-sw-cardthumb,
  .qwood-sw-cardthumb{
    height: 110px;
  }
  .qwood-sw-card .qwood-sw-btn{
    margin: 0 10px 10px;
    padding: 9px 14px;
    font-size: 12px;
  }
  .qwood-sw-cardbody{
    padding: 10px 12px 6px;
  }
  .qwood-sw-cardtitle{
    font-size: 12px;
  }
  .qwood-sw-cardeyebrow{
    font-size: 9px;
  }
  .qwood-sw-footer{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 16px 16px;
  }
  .qwood-sw-footer-counter{
    font-size: 13px;
    justify-content: center;
  }
  #qwood-sw-footer-cta,
  .qwood-sw-footer-cta{
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 14px 20px;
  }
}


/* ==========================================================
   17) RESPONSIVE — SMALL MOBILE
   ========================================================== */

@media (max-width: 480px){
  #qwood-sample-overlay{
    padding: 10px 6px;
  }

  #qwood-sample-modal{
    max-height: calc(100vh - 20px);
    border-radius: var(--qws-radius-md);
  }

  .qwood-sw-header{
    padding: 14px 16px 0;
  }

  h3.qwood-sw-title{
    font-size: 16px;
  }

  .qwood-sw-badge-refund{
    display: none;
  }

  .qwood-sw-stepper-line{
    flex: 0 0 36px;
  }

  .qwood-sw-stepper-label{
    font-size: 10px;
    padding: 0 8px;
  }

  .qwood-sw-screen{
    padding: 14px 16px 20px;
  }

  .qwood-sw-footer{
    padding: 10px 14px 14px;
  }

  .qwood-sw-footer-counter{
    font-size: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Confirm rows: tighter */
  .qwood-sw-confirm-row{
    gap: 10px;
    padding: 10px 12px;
  }

  img.qwood-sw-confirm-thumb{
    width: 48px;
    height: 48px;
  }

  .qwood-sw-confirm-title{
    font-size: 12px;
  }

  .qwood-sw-confirm-price{
    font-size: 13px;
  }
}


/* ==========================================================
   18) FULL-SCREEN MOBILE (very small)
   ========================================================== */

@media (max-width: 380px){
  #qwood-sample-overlay{
    padding: 0;
  }

  #qwood-sample-modal{
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .qwood-sw-stepper-pill{
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
    max-width: 38px;
    min-height: 38px;
    max-height: 38px;
    border-radius: 50%;
    padding: 0 !important;
  }

  .qwood-sw-stepper-num{
    font-size: 12px;
  }

  /* Reajustar el margin-top de la línea: pill pasa de 46 a 38 */
  .qwood-sw-stepper-line{
    margin-top: calc((38px - 3.5px) / 2);
  }
}


/* ==========================================================
   19) ACCESSIBILITY — REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce){
  #qwood-sample-overlay,
  #qwood-sample-overlay *,
  #qwood-sample-modal,
  #qwood-sample-modal *{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Stop infinite loaders cleanly instead of snapping to a 100% frame.
     Each loading state keeps a textual/structural cue. */
  .qwood-sw-wood-card.is-loading::after{ animation: none !important; opacity: 0; }
  .qwood-sw-grid-loading::after{ animation: none !important; opacity: .25; }
  .qwood-sw-btn-submit-spinner{ animation: none !important; }
}


/* ==========================================================
   20) PRINT — HIDE MODAL
   ========================================================== */

@media print{
  #qwood-sample-overlay{
    display: none !important;
  }
}


/* ==========================================================
   21) MOBILE @≤700px — full-screen, footer fixed, floating trio
   2026-05-01: aplica las mismas reglas que el wizard "Configura
   tu parquet" para consistency UX. Refs:
   - Modal full-screen edge-to-edge (no margins ni border-radius)
   - transform/will-change/contain neutralizados → containing-block
     no rompe position:fixed de descendientes
   - Footer position:fixed al viewport bottom con safe-area-inset
   - Header normal flow, padding reducido
   - Close button flotante top-right (38x38 frosted) con la misma
     elevation/blur que el wizard parquet
   - Step chip "X / 2" flotante a la izquierda del close
   ========================================================== */
@media (max-width: 700px){
  /* Overlay y modal full viewport */
  #qwood-sample-overlay{
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    height: 100vh !important;
    height: 100dvh !important;
  }
  #qwood-sample-modal{
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: 0 !important;
    /* Liberar containing-block para que descendientes fixed se posicionen
       respecto al viewport (no respecto al modal). */
    transform: none !important;
    will-change: auto !important;
    contain: none !important;
    isolation: auto !important;
    /* Desactivar la animación de entrada (translateY+scale crea
       containing-block transitorio que rompe el footer fixed). */
    animation: none !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  /* Header normal flow + padding reducido */
  .qwood-sw-header{
    position: static !important;
    padding: 12px 64px 8px 20px !important;
    border-bottom: none !important;
  }
  .qwood-sw-header::after{
    display: none !important;
  }
  .qwood-sw-header-top{
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .qwood-sw-title{
    font-size: 18px !important;
  }
  .qwood-sw-step-label{
    margin-bottom: 0 !important;
  }
  /* Badge "5€ reembolsable por muestra" oculto en mobile — el dato vive
     en el footer y en las cards individuales; en mobile compite con el
     título y los flotantes. */
  .qwood-sw-badge-refund{
    display: none !important;
  }

  /* Content padding ajustado para que la última card no quede oculta tras
     el footer fixed (≈ 99px sample wizard footer). */
  .qwood-sw-content{
    padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* === FOOTER FIXED al viewport bottom === */
  #qwood-sw-footer,
  .qwood-sw-footer{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -8px 24px rgba(15,23,42,.08) !important;
    z-index: 1000005 !important;
    border-top: 1px solid rgba(15,23,42,.06) !important;
    background: #ffffff !important;
  }

  /* === FLOATING TRIO — chip + close ===
     Solo 2 elementos (no hay call button en sample wizard). Mismo design
     system que el parquet wizard (38px height, frosted glass, layered
     shadow, spacing 16/12 desde edge). */
  .qwood-sw-floating-step,
  #qwood-sample-modal button.qwood-sw-close{
    position: fixed !important;
    height: 38px !important;
    top: max(14px, calc(14px + env(safe-area-inset-top, 0px))) !important;
    z-index: 1000005 !important;
    backdrop-filter: blur(14px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.10) inset,
      0 10px 28px -12px rgba(15,23,42,.22),
      0 4px 12px -6px rgba(15,23,42,.14) !important;
    transition:
      transform .18s cubic-bezier(.2,.8,.2,1),
      box-shadow .18s ease,
      background-color .18s ease !important;
  }

  /* Close button — círculo frosted white 44x44 (WCAG 2.5.5 tap target) */
  #qwood-sample-modal button.qwood-sw-close{
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    color: #0f172a !important;
    padding: 0 !important;
    right: 16px !important;
  }

  /* Keyboard focus ring survives the layered box-shadow override above */
  #qwood-sample-modal button.qwood-sw-close:focus-visible{
    box-shadow: var(--qws-ring) !important;
    border-color: rgba(27,207,23,.75) !important;
  }

  @media (hover: hover) and (pointer: fine){
    #qwood-sample-modal button.qwood-sw-close:hover{
      background: #ffffff !important;
      transform: translateY(-1px) !important;
      box-shadow:
        0 1px 0 rgba(255,255,255,.14) inset,
        0 14px 32px -12px rgba(15,23,42,.30),
        0 6px 16px -6px rgba(15,23,42,.18) !important;
    }
  }
  #qwood-sample-modal button.qwood-sw-close:active{
    transform: translateY(0) !important;
  }
}

/* Floating step chip — hidden por defecto; solo visible en mobile */
.qwood-sw-floating-step{
  display: none;
}

@media (max-width: 700px){
  .qwood-sw-floating-step{
    display: inline-flex !important;
    align-items: center !important;
    right: 64px !important; /* 16 (close edge) + 38 (close width) + 10 gap */
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: rgba(15,23,42,.92) !important;
    color: #ffffff !important;
    font-family: var(--qws-font, "Montserrat", system-ui, sans-serif) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    pointer-events: none;
    user-select: none;
    font-variant-numeric: tabular-nums;
    -webkit-font-feature-settings: 'tnum' on, 'lnum' on;
    font-feature-settings: 'tnum' on, 'lnum' on;
  }
  .qwood-sw-floating-step__current{
    color: #ffffff;
    font-weight: 900;
  }
  .qwood-sw-floating-step__sep{
    color: rgba(255,255,255,.36);
    font-weight: 400;
    margin: 0 6px;
  }
  .qwood-sw-floating-step__total{
    color: rgba(255,255,255,.62);
    font-weight: 700;
  }

  /* Step label "Paso 1 de 2" del header — ocultar en mobile, su info está
     ahora en el chip flotante */
  .qwood-sw-step-label{
    display: none !important;
  }

  /* Stepper visual "1 ELEGIR → 2 CONFIRMAR" — ocultar en mobile.
     Razón: ocupa ~80px verticales y duplica la información del chip
     flotante "1 / 2". En móvil prima el espacio para las cards.
     En desktop sigue visible y manda. */
  .qwood-sw-stepper{
    display: none !important;
  }
}