/* ==========================================================================\n   Fragancias Factory 3.13.4\n   · Categorías móviles = scroller horizontal real (sin ancho fantasma)\n   · Estado activo = subrayado limpio, sin pill/punto/tap highlight\n   · Vista Lista = fila horizontal compacta sobre el markup real ff-card-v31\n   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Categorías rápidas bajo el header

   v36 dejó min-width:max-content en .ff-category-tabs. Eso hacía crecer el NAV
   completo hasta el ancho de todos los enlaces; como el body recorta overflow,
   el cliente veía categorías fuera de pantalla pero no podía desplazar el NAV.
   El scroller debe ser el propio NAV, no la página.
   -------------------------------------------------------------------------- */
@media (max-width:719px) {
  body.ff-storefront-v31 .ff-category-tabs-v310 {
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    flex:0 0 auto!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    touch-action:pan-x pan-y;
    scroll-snap-type:x proximity;
    scroll-padding-inline:12px;
    scrollbar-width:none!important;
    padding-inline:12px!important;
  }
  body.ff-storefront-v31 .ff-category-tabs-v310::-webkit-scrollbar {
    display:none!important;
    width:0!important;
    height:0!important;
  }
  body.ff-storefront-v31 .ff-category-tabs-v310 > a {
    position:relative;
    flex:0 0 auto!important;
    scroll-snap-align:start;
    min-width:0!important;
    min-height:44px;
    padding:0 10px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#4a5a51!important;
    box-shadow:none!important;
    outline:none!important;
    -webkit-tap-highlight-color:transparent!important;
  }

  /* v31 subrayaba "Todo" permanentemente (.is-all). 3.13.4 deja una sola
     autoridad visual: únicamente la categoría actual (o foco de teclado). */
  body.ff-storefront-v31 .ff-category-tabs-v310 > a::after {
    content:"";
    position:absolute;
    left:10px!important;
    right:calc(100% - 10px)!important;
    bottom:3px!important;
    height:1.5px!important;
    background:#17392f!important;
    border-radius:2px;
    transition:right .18s ease;
  }
  body.ff-storefront-v31 .ff-category-tabs-v310 > a.is-all:not(.is-current)::after {
    right:calc(100% - 10px)!important;
  }
  body.ff-storefront-v31 .ff-category-tabs-v310 > a.is-current {
    background:transparent!important;
    color:#17392f!important;
    font-weight:600;
  }
  body.ff-storefront-v31 .ff-category-tabs-v310 > a.is-current::after,
  body.ff-storefront-v31 .ff-category-tabs-v310 > a:focus-visible::after {
    right:10px!important;
  }
  body.ff-storefront-v31 .ff-category-tabs-v310 > a:active,
  body.ff-storefront-v31 .ff-category-tabs-v310 > a:focus,
  body.ff-storefront-v31 .ff-category-tabs-v310 > a:focus-visible {
    background:transparent!important;
    color:#17392f!important;
    outline:none!important;
    box-shadow:none!important;
  }
}

/* --------------------------------------------------------------------------
   2. Vista LISTA real

   content-product.php usa .ff-card-v31 con dos hijos reales:
   .ff-card-v31__media-wrap + .ff-card-v31__body. Las reglas anteriores de
   final.css apuntaban a selectores heredados .ff-card-v2 y por eso la imagen
   seguía ocupando todo el ancho. Aquí se estiliza el DOM que WooCommerce
   realmente imprime en esta versión.
   -------------------------------------------------------------------------- */
body.ff-storefront-final.ff-view-list ul.products {
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:9px!important;
}

body.ff-storefront-final.ff-view-list ul.products li.product.ff-card-v31 {
  --ff-list-thumb:clamp(92px,27vw,116px);
  display:grid!important;
  grid-template-columns:var(--ff-list-thumb) minmax(0,1fr)!important;
  grid-template-rows:auto!important;
  align-items:stretch!important;
  gap:0!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  float:none!important;
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid rgba(29,42,36,.10)!important;
  border-radius:9px!important;
  transform:none!important;
  box-shadow:none!important;
  text-align:left!important;
}
body.ff-storefront-final.ff-view-list ul.products li.product.ff-card-v31:hover {
  transform:none!important;
}

body.ff-storefront-final.ff-view-list .ff-card-v31__media-wrap {
  grid-column:1!important;
  grid-row:1!important;
  width:var(--ff-list-thumb)!important;
  min-width:var(--ff-list-thumb)!important;
  height:var(--ff-list-thumb)!important;
  margin:0!important;
  overflow:hidden!important;
  align-self:center!important;
}
body.ff-storefront-final.ff-view-list .ff-card-v31__media {
  display:block!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
}
body.ff-storefront-final.ff-view-list .ff-card-v31__media img {
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  margin:0!important;
  transform:none!important;
}
body.ff-storefront-final.ff-view-list .ff-card-v31__media-wrap::after {
  display:none!important;
}

body.ff-storefront-final.ff-view-list .ff-card-v31__body {
  grid-column:2!important;
  grid-row:1!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 34px!important;
  align-items:center!important;
  align-content:center!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
  min-height:var(--ff-list-thumb)!important;
  margin:0!important;
  padding:9px 9px 9px 11px!important;
  overflow:hidden!important;
  text-align:left!important;
}
body.ff-storefront-final.ff-view-list .ff-card-v31__copy {
  min-width:0!important;
  overflow:hidden!important;
}
body.ff-storefront-final.ff-view-list .ff-card-v31__title,
body.ff-storefront-final.ff-view-list .ff-card-v31__title a {
  display:block!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  font-size:14px!important;
  line-height:1.15!important;
  font-weight:600!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-align:left!important;
}
body.ff-storefront-final.ff-view-list .ff-card-v31__inspired {
  display:block!important;
  max-width:100%!important;
  margin:3px 0 0!important;
  font-size:9.5px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-align:left!important;
}
body.ff-storefront-final.ff-view-list .ff-card-v32__presentations {
  display:block!important;
  max-width:100%!important;
  margin:3px 0 0!important;
  font-size:8.5px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.ff-storefront-final.ff-view-list .ff-card-v31__price {
  margin:6px 0 0!important;
  font-size:13px!important;
  line-height:1.1!important;
  text-align:left!important;
  white-space:nowrap!important;
}
body.ff-storefront-final.ff-view-list .ff-card-v31__price .ff-price-prefix {
  font-size:9px!important;
}
body.ff-storefront-final.ff-view-list .ff-card-v31__quick {
  align-self:center!important;
  justify-self:end!important;
  width:31px!important;
  height:31px!important;
  min-width:31px!important;
  min-height:31px!important;
  margin:0!important;
}
body.ff-storefront-final.ff-view-list .ff-card-v31__badge {
  top:5px!important;
  left:5px!important;
  padding:3px 5px!important;
  font-size:7px!important;
}

@media (max-width:359px) {
  body.ff-storefront-final.ff-view-list ul.products li.product.ff-card-v31 {
    --ff-list-thumb:88px;
  }
  body.ff-storefront-final.ff-view-list .ff-card-v31__body {
    grid-template-columns:minmax(0,1fr) 30px!important;
    gap:5px!important;
    padding:8px!important;
  }
  body.ff-storefront-final.ff-view-list .ff-card-v31__quick {
    width:29px!important;
    height:29px!important;
    min-width:29px!important;
    min-height:29px!important;
  }
  body.ff-storefront-final.ff-view-list .ff-card-v31__title,
  body.ff-storefront-final.ff-view-list .ff-card-v31__title a { font-size:13px!important; }
}

@media (min-width:720px) {
  body.ff-storefront-final.ff-view-list ul.products li.product.ff-card-v31 {
    --ff-list-thumb:132px;
  }
  body.ff-storefront-final.ff-view-list .ff-card-v31__body {
    grid-template-columns:minmax(0,1fr) 38px!important;
    padding:12px 13px!important;
  }
  body.ff-storefront-final.ff-view-list .ff-card-v31__title,
  body.ff-storefront-final.ff-view-list .ff-card-v31__title a { font-size:17px!important; }
  body.ff-storefront-final.ff-view-list .ff-card-v31__inspired { font-size:11px!important; }
  body.ff-storefront-final.ff-view-list .ff-card-v31__price { font-size:15px!important; }
}

@media (min-width:1024px) {
  body.ff-storefront-final.ff-view-list ul.products li.product.ff-card-v31 {
    --ff-list-thumb:150px;
  }
  body.ff-storefront-final.ff-view-list .ff-card-v31__body {
    grid-template-columns:minmax(0,1fr) 42px!important;
    padding:15px 17px!important;
  }
  body.ff-storefront-final.ff-view-list .ff-card-v31__title,
  body.ff-storefront-final.ff-view-list .ff-card-v31__title a { font-size:20px!important; }
  body.ff-storefront-final.ff-view-list .ff-card-v31__price { font-size:17px!important; }
}