/* ==========================================================
   Fragancias Factory Storefront V3.8
   Correcciones sobre V3.7:
   · producto individual en PC: fin del solapamiento real
   · marquesina de métodos de pago en miniatura
   · presentaciones como control segmentado profesional
   · buscador móvil rediseñado
   · vista lista/cuadrícula solo en móvil
   · aviso de progreso del 3×2
   ========================================================== */

/* ============================================================
   1. PRODUCTO INDIVIDUAL EN PC — la corrección de verdad

   Diagnóstico: v36.css convierte div.product en una rejilla de dos columnas y
   asigna grid-column a una LISTA EXPLÍCITA de hijos posteriores
   (.woocommerce-tabs, .related, .upsells…). Los bloques añadidos después por
   V3.1 y V3.3 — .ff-product-subnav y .ff-product-story ("Detalles que cuentan
   su historia") — no estaban en esa lista, así que el auto-placement de CSS
   Grid los colocaba en la fila 1, encima de la galería y del resumen.

   Solución: una regla universal en lugar de una lista. Cualquier hijo de
   div.product que no sea la galería ni el resumen ocupa el ancho completo y
   se sitúa en una fila nueva, incluidos los bloques que se añadan en el futuro.
   ============================================================ */
@media (min-width:1024px) {
  .single-product .woocommerce div.product > *:not(.woocommerce-product-gallery):not(.summary) {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    position: static !important;
  }
  /* El resumen y la galería mantienen su celda declarada. */
  .single-product .woocommerce div.product > .woocommerce-product-gallery { grid-column:1!important; grid-row:1!important; }
  .single-product .woocommerce div.product > .summary { grid-column:2!important; grid-row:1!important; }

  /* Los dos bloques que causaban el solapamiento, ahora en banda propia. */
  .single-product .ff-product-story,
  .single-product .ff-product-subnav { margin-top:38px!important; }
  .single-product .ff-product-story__heading { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
  .single-product .ff-product-story__heading h2 { font-size:clamp(28px,2.6vw,38px)!important; line-height:1.08!important; margin:0!important; }
  .single-product .ff-product-subnav { position:static!important; display:flex; gap:20px; flex-wrap:wrap; padding:14px 0!important; border-top:1px solid rgba(29,42,36,.1); border-bottom:1px solid rgba(29,42,36,.1); }
}

/* El título deja de ser editorial gigante en la ficha: es una página de compra. */
@media (min-width:1024px) {
  .single-product .product_title { font-size:clamp(30px,2.6vw,40px)!important; letter-spacing:-.01em; }
}

/* ============================================================
   2. PRESENTACIONES — control segmentado
   Antes: dos botones anchos, planos y desproporcionados.
   Ahora: un segmento compacto con pastilla activa, alineado al precio.
   ============================================================ */
.ff-split-variation { margin:0 0 16px!important; }
.ff-split-variation__label {
  display:block; margin:0 0 8px!important;
  font-size:9px!important; letter-spacing:.2em!important; text-transform:uppercase;
  color:#7b8780!important;
}
.ff-split-variation__row {
  display:inline-flex!important;
  flex-wrap:wrap;
  gap:3px!important;
  padding:3px!important;
  border:1px solid rgba(29,42,36,.14)!important;
  border-radius:11px!important;
  background:#f4f6f1!important;
  max-width:100%;
}
.ff-split-variation__row button,
.ff-split-variation__row .ff-split-variation__option,
.ff-split-variation__row [data-ff-variation-option] {
  flex:0 0 auto!important;
  min-height:40px!important;
  padding:0 20px!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  color:#3d4a43!important;
  font-family:inherit!important;
  font-size:13px!important;
  font-weight:500!important;
  letter-spacing:.02em!important;
  line-height:40px!important;
  cursor:pointer;
  transition:background .18s cubic-bezier(.22,.61,.36,1), color .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease;
}
.ff-split-variation__row button:hover,
.ff-split-variation__row [data-ff-variation-option]:hover { background:rgba(255,255,255,.7)!important; color:#17392f!important; }
.ff-split-variation__row button[aria-pressed="true"],
.ff-split-variation__row button.is-active,
.ff-split-variation__row .is-active,
.ff-split-variation__row [data-ff-variation-option][aria-pressed="true"] {
  background:#fff!important;
  color:#17392f!important;
  box-shadow:0 1px 2px rgba(14,28,20,.10), 0 6px 14px -10px rgba(14,28,20,.4)!important;
}
.ff-split-variation__row button:focus-visible { outline:2px solid #17392f; outline-offset:2px; }
.ff-split-variation__row button[disabled],
.ff-split-variation__row button[aria-disabled="true"] { opacity:.38; cursor:not-allowed; text-decoration:line-through; }

/* El enlace "Limpiar" de WooCommerce era ruido suelto en la columna. */
.single-product .reset_variations {
  font-size:10px!important; letter-spacing:.12em; text-transform:uppercase;
  color:#8b968f!important; text-decoration:none!important;
}
.single-product .reset_variations:hover { color:#17392f!important; }

/* ============================================================
   3. MARQUESINA DE MÉTODOS DE PAGO — miniatura e infinita
   ============================================================ */
.ff-paymarquee {
  display:block; clear:both; float:none;
  width:100%; max-width:100%;
  margin:14px 0 0; padding:13px 0 0;
  border-top:1px solid rgba(29,42,36,.09);
}
.ff-paymarquee__label {
  display:block; margin:0 0 9px;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:#8b968f;
}
.ff-paymarquee__viewport {
  position:relative; overflow:hidden; max-width:100%;
  /* Los extremos se desvanecen: el bucle no se ve cortar. */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ff-paymarquee__track {
  display:flex; align-items:center; gap:14px;
  width:max-content;
  animation:ff-marquee var(--ff-marquee-duration,24s) linear infinite;
}
.ff-paymarquee:hover .ff-paymarquee__track,
.ff-paymarquee:focus-within .ff-paymarquee__track { animation-play-state:paused; }
@keyframes ff-marquee {
  from { transform:translate3d(0,0,0); }
  to   { transform:translate3d(-50%,0,0); }
}
.ff-paymark {
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto;
  height:24px; padding:0 8px;
  border:1px solid rgba(29,42,36,.08); border-radius:5px;
  background:#fff;
  opacity:.92;
}
.ff-paymark svg { display:block; height:13px; width:auto; }
.ff-paymark--mastercard svg,
.ff-paymark--oxxo svg,
.ff-paymark--spei svg,
.ff-paymark--mercadopago svg { height:15px; }
.ff-paymark--gateway img { display:block; height:15px; width:auto; max-width:56px; object-fit:contain; margin:0; }
.ff-paymarquee--cart { margin-top:16px; }
.ff-paymarquee--empty { font-size:11px; line-height:1.6; color:#8b968f; }
.ff-paymarquee--empty small { display:block; margin-top:5px; }

/* Nunca en la misma línea que cantidad + añadir al carrito. */
.single-product form.cart + .ff-paymarquee,
.single-product .summary .ff-paymarquee { flex-basis:100%!important; }

@media (prefers-reduced-motion:reduce) {
  .ff-paymarquee__track { animation:none!important; }
  .ff-paymarquee__viewport { overflow-x:auto; }
}

/* ============================================================
   4. BUSCADOR MÓVIL — overlay rediseñado
   Antes: campo sin contenedor propio, chips flotando y un párrafo suelto
   sobre un panel medio vacío.
   ============================================================ */
@media (max-width:1023px) {
  .ff-search-overlay,
  [data-ff-search-overlay] {
    background:#f7f9f4!important;
    padding:0!important;
  }
  .ff-search-overlay__inner,
  [data-ff-search-overlay] > div:first-child { padding:0!important; }

  .ff-search-overlay__field,
  .ff-search-overlay form {
    display:flex!important; align-items:center!important; gap:10px!important;
    margin:0!important;
    padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 12px!important;
    background:#fff!important;
    border-bottom:1px solid rgba(29,42,36,.09)!important;
    box-shadow:0 1px 0 rgba(29,42,36,.03)!important;
  }
  .ff-search-overlay input[type="search"],
  .ff-search-overlay__field input {
    flex:1 1 auto!important; min-width:0!important;
    min-height:46px!important;
    padding:0 14px 0 40px!important;
    border:1px solid rgba(29,42,36,.14)!important;
    border-radius:10px!important;
    background:#f4f6f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8780' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") 13px center/16px no-repeat!important;
    font-family:inherit!important; font-size:15px!important; color:#1d2a24!important;
    -webkit-appearance:none; appearance:none;
  }
  .ff-search-overlay input[type="search"]:focus {
    outline:none!important;
    border-color:rgba(23,57,47,.4)!important;
    background-color:#fff!important;
    box-shadow:0 0 0 3px rgba(23,57,47,.08)!important;
  }
  .ff-search-overlay input[type="search"]::placeholder { color:#939e97!important; font-size:14px!important; }
  .ff-search-overlay__close,
  .ff-search-overlay [data-ff-search-close] {
    flex:0 0 auto!important;
    min-width:auto!important; min-height:46px!important; padding:0 4px!important;
    border:0!important; background:transparent!important;
    font-size:11px!important; letter-spacing:.1em!important; text-transform:uppercase!important;
    color:#5a6a61!important;
  }
  /* El icono duplicado dentro del campo se retira: el fondo del input ya lo trae. */
  .ff-search-overlay__field > svg,
  .ff-search-overlay form > svg { display:none!important; }

  .ff-search-overlay__body,
  .ff-search-overlay__results { padding:16px 14px 24px!important; }

  /* Chips de categoría: fila deslizable, no rejilla suelta. */
  .ff-search-overlay__chips,
  .ff-search-overlay__cats {
    display:flex!important; flex-wrap:nowrap!important; gap:7px!important;
    margin:0 -14px 18px!important; padding:0 14px 2px!important;
    max-width:100%!important;
    overflow-x:auto!important; scrollbar-width:none;
    scroll-snap-type:x proximity; overscroll-behavior-x:contain;
  }
  .ff-search-overlay__chips::-webkit-scrollbar,
  .ff-search-overlay__cats::-webkit-scrollbar { display:none; }
  .ff-search-overlay__chips a,
  .ff-search-overlay__cats a {
    flex:0 0 auto!important; scroll-snap-align:start;
    min-height:36px!important; display:inline-flex!important; align-items:center!important;
    padding:0 14px!important;
    border:1px solid rgba(29,42,36,.13)!important; border-radius:99px!important;
    background:#fff!important;
    font-size:11px!important; letter-spacing:.09em!important; text-transform:uppercase!important;
    color:#3d4a43!important; white-space:nowrap!important;
  }
  .ff-search-overlay__chips a:active { background:#eff3ed!important; }

  /* El texto de estado vacío deja de ser un párrafo suelto. */
  .ff-search-overlay__hint,
  .ff-search-overlay__empty {
    margin:0!important; padding:22px 16px!important;
    border:1px dashed rgba(29,42,36,.14)!important; border-radius:12px!important;
    background:#fff!important;
    font-size:13px!important; line-height:1.6!important; color:#6c7a72!important;
    text-align:center!important;
  }

  /* Resultados: fila compacta con foto, nombre, inspiración y precio. */
  .ff-search-overlay__result,
  .ff-search-result {
    display:grid!important; grid-template-columns:52px minmax(0,1fr) auto!important;
    align-items:center!important; gap:12px!important;
    padding:10px 0!important; border-bottom:1px solid rgba(29,42,36,.07)!important;
  }
  .ff-search-overlay__result img,
  .ff-search-result img { width:52px!important; height:52px!important; border-radius:7px!important; object-fit:cover!important; }
  .ff-search-overlay__result strong,
  .ff-search-result strong { font-family:var(--ff-display,'Marcellus',serif)!important; font-size:15px!important; font-weight:400!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
  .ff-search-overlay__result small,
  .ff-search-result small { font-size:11px!important; font-style:italic; color:#7b8780!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
  .ff-search-overlay__result .price,
  .ff-search-result .price { font-size:13px!important; font-weight:500!important; white-space:nowrap; }
}

/* ============================================================
   5. VISTA LISTA / CUADRÍCULA — solo móvil
   V3.7 la había puesto en escritorio; corregido.
   ============================================================ */
.ff-view-switch { display:none; }
@media (max-width:1023px) {
  .ff-view-switch {
    display:inline-flex; flex:0 0 auto; gap:2px;
    padding:2px; border:1px solid rgba(29,42,36,.14); border-radius:9px; background:#fff;
  }
  .ff-view-switch button {
    display:inline-grid; place-items:center;
    width:40px; min-height:36px;
    border:0; border-radius:7px; background:transparent; color:#7b8780; cursor:pointer;
    transition:background .16s ease, color .16s ease;
  }
  .ff-view-switch button[aria-pressed="true"] { background:#eff3ed; color:#17392f; }
  .ff-view-switch button:focus-visible { outline:2px solid #17392f; outline-offset:2px; }
  .ff-view-switch__icon { width:15px; height:15px; background-color:currentColor; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; }
  .ff-view-switch__icon--grid { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='8' height='8' rx='1'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='8' height='8' rx='1'/%3E%3Crect x='13' y='3' width='8' height='8' rx='1'/%3E%3Crect x='3' y='13' width='8' height='8' rx='1'/%3E%3Crect x='13' y='13' width='8' height='8' rx='1'/%3E%3C/svg%3E"); }
  .ff-view-switch__icon--list { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='4' rx='1'/%3E%3Crect x='3' y='10' width='18' height='4' rx='1'/%3E%3Crect x='3' y='16' width='18' height='4' rx='1'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='4' rx='1'/%3E%3Crect x='3' y='10' width='18' height='4' rx='1'/%3E%3Crect x='3' y='16' width='18' height='4' rx='1'/%3E%3C/svg%3E"); }

  /* Lista vertical: una columna, tarjeta horizontal compacta. */
  body.ff-view-list .woocommerce ul.products { grid-template-columns:minmax(0,1fr)!important; gap:9px!important; }
  body.ff-view-list .woocommerce ul.products li.product {
    display:grid!important; grid-template-columns:104px minmax(0,1fr)!important;
    align-items:center!important; gap:12px!important;
    padding:9px!important; background:#fff; border:1px solid rgba(29,42,36,.1); border-radius:10px;
  }
  body.ff-view-list .woocommerce ul.products li.product img { width:104px!important; height:104px!important; border-radius:7px; object-fit:cover; }
  body.ff-view-list .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size:15px!important; text-align:left!important; }
  body.ff-view-list .woocommerce ul.products li.product .price { font-size:14px!important; text-align:left!important; }
  body.ff-view-list .ff-card-v2__body { text-align:left!important; padding:0!important; }
}
/* En escritorio el selector no existe: la cuadrícula es la única vista. */
@media (min-width:1024px) {
  .ff-view-switch, [data-ff-view-switch] { display:none!important; }
  body.ff-view-list .woocommerce ul.products { grid-template-columns:repeat(4,minmax(0,1fr))!important; }
  body.ff-view-list .woocommerce ul.products li.product { display:flex!important; flex-direction:column!important; }
  body.ff-view-list .woocommerce ul.products li.product img { width:100%!important; height:auto!important; }
}

/* ============================================================
   6. AVISO DE PROGRESO DEL 3×2
   ============================================================ */
.ff-promo-progress {
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  margin:0 0 18px; padding:12px 14px;
  border:1px solid rgba(29,42,36,.12); border-radius:10px;
  background:#f7f9f4;
}
.ff-promo-progress__tag {
  flex:0 0 auto;
  padding:5px 9px; border-radius:5px;
  background:#d9c27a; color:#2a2109;
  font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.ff-promo-progress__text { font-size:13px; line-height:1.5; color:#3d4a43; min-width:0; }
.ff-promo-progress--complete { background:#eef5ec; border-color:rgba(46,110,74,.24); }
.ff-promo-progress--complete .ff-promo-progress__tag { background:#2e6e4a; color:#fff; }

/* La línea de descuento en los totales se distingue del resto. */
.woocommerce-cart .cart-subtotal + .fee th,
.woocommerce-cart .fee th,
.woocommerce-checkout .fee th { color:#2e6e4a!important; }
.woocommerce-cart .fee td,
.woocommerce-checkout .fee td { color:#2e6e4a!important; font-weight:500!important; }

/* ============================================================
   7. Guardas de overflow, reafirmadas al cierre de la cascada.
   ============================================================ */
html, body.ff-storefront-v38 { max-width:100%; overflow-x:clip; }
body.ff-storefront-v38 img, body.ff-storefront-v38 svg { max-width:100%; }
body.ff-storefront-v38 .ff-paymarquee__viewport,
body.ff-storefront-v38 .ff-search-overlay__chips { max-width:100%; }