/* ==========================================================================
   Fragancias Factory 3.11.0 — sistema responsive de carruseles y Home

   Geometría única: el ancho de cada tarjeta se deriva del CONTENEDOR, no del
   viewport ni de un cálculo en JavaScript.

       --ff-visible  productos visibles en ese breakpoint (admite decimales)
       --ff-gap      separación real entre tarjetas
       --ff-card-w   calc((100% - (visibles - 1) * gap) / visibles)

   Como el track mide 100 % del contenedor y las tarjetas son porcentajes de
   ese mismo ancho, el último producto termina exactamente donde termina el
   scroll: no hay espacio fantasma posible, con 3, 5 o 12 productos.
   ========================================================================== */

.ff-mini-rail {
  --ff-gap:10px;
  --ff-visible:3.15;
  --ff-card-w:calc((100% - (var(--ff-visible) - 1) * var(--ff-gap)) / var(--ff-visible));
  position:relative;
  overflow:visible;
  min-width:0;
  max-width:100%;
}
.ff-mini-rail__track {
  gap:var(--ff-gap);
  /* Un único scroller y sin remanente: el final del track es el último producto. */
  overflow-x:auto;
  overflow-y:hidden;
  padding-right:0;
  margin-right:0;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
  scroll-padding-inline:0;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.ff-mini-rail__track::-webkit-scrollbar { display:none; width:0; height:0; }
.ff-mini-rail__track::after,
.ff-mini-rail__track::before { content:none!important; }
.ff-mini-card { flex:0 0 var(--ff-card-w); }
.ff-mini-card:last-child { margin-right:0!important; }

/* --------------------------------------------------------------------------
   MÓVIL  ≤767px — se conserva la densidad actual
   -------------------------------------------------------------------------- */
@media (max-width:767px) {
  .ff-mini-rail { --ff-gap:8px; --ff-visible:3.15; }
  .ff-mini-rail--best,
  .ff-mini-rail--caballero,
  .ff-mini-rail--dama,
  .ff-mini-rail--unisex { --ff-visible:2.6; }
  .ff-mini-rail--essences { --ff-visible:3.15; }
  .ff-mini-card__quick { display:none!important; }
  .ff-rail-arrow { display:none!important; }
}

/* --------------------------------------------------------------------------
   TABLET  768–1023px
   -------------------------------------------------------------------------- */
@media (min-width:768px) and (max-width:1023px) {
  .ff-mini-rail { --ff-gap:12px; --ff-visible:4.3; }
  .ff-mini-rail--best { --ff-visible:3.3; }
  .ff-mini-rail--concentrated { --ff-visible:3.5; }
  .ff-mini-rail--essences { --ff-visible:4.5; }
  .ff-mini-card__quick { display:none!important; }
  .ff-rail-arrow { display:none!important; }
}

/* --------------------------------------------------------------------------
   DESKTOP PEQUEÑO  1024–1279px
   -------------------------------------------------------------------------- */
@media (min-width:1024px) and (max-width:1279px) {
  .ff-mini-rail { --ff-gap:14px; --ff-visible:4.5; }
  .ff-mini-rail--best { --ff-visible:3.4; }        /* ≈ 290 px */
  .ff-mini-rail--caballero,
  .ff-mini-rail--dama,
  .ff-mini-rail--unisex,
  .ff-mini-rail--ambientales { --ff-visible:4.3; } /* ≈ 219 px */
  .ff-mini-rail--concentrated { --ff-visible:4.2; }
  .ff-mini-rail--essences { --ff-visible:5.5; }
}

/* --------------------------------------------------------------------------
   DESKTOP  1280–1599px
   -------------------------------------------------------------------------- */
@media (min-width:1280px) and (max-width:1599px) {
  .ff-mini-rail { --ff-gap:16px; --ff-visible:5.3; }
  .ff-mini-rail--best { --ff-visible:4.2; }        /* ≈ 284–312 px */
  .ff-mini-rail--caballero,
  .ff-mini-rail--dama,
  .ff-mini-rail--unisex,
  .ff-mini-rail--ambientales { --ff-visible:5.3; } /* ≈ 235–260 px */
  .ff-mini-rail--concentrated { --ff-visible:4.6; }
  .ff-mini-rail--essences { --ff-visible:6.3; }
}

/* --------------------------------------------------------------------------
   DESKTOP GRANDE  ≥1600px  (el contenedor ya está topado en 1400 px)
   -------------------------------------------------------------------------- */
@media (min-width:1600px) {
  .ff-mini-rail { --ff-gap:18px; --ff-visible:5.4; }
  .ff-mini-rail--best { --ff-visible:4.4; }        /* ≈ 310 px */
  .ff-mini-rail--caballero,
  .ff-mini-rail--dama,
  .ff-mini-rail--unisex,
  .ff-mini-rail--ambientales { --ff-visible:5.4; } /* ≈ 252 px */
  .ff-mini-rail--concentrated { --ff-visible:4.7; }
  .ff-mini-rail--essences { --ff-visible:6.4; }
}

/* --------------------------------------------------------------------------
   Tarjeta del carrusel en escritorio: fotografía con presencia
   -------------------------------------------------------------------------- */
@media (min-width:1024px) {
  .ff-mini-card {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "media media"
      "copy quick";
    align-items:end;
    column-gap:10px;
  }
  .ff-mini-card__media { grid-area:media; }
  .ff-mini-card__copy { grid-area:copy; padding-top:11px; }
  .ff-mini-card__quick { grid-area:quick; }
  .ff-mini-card__name { font-size:15px; line-height:1.18; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .ff-mini-card__inspired { display:block; margin-top:4px; font-size:11px; }
  .ff-mini-card__price { margin-top:7px; font-size:15px; }

  .ff-mini-card__quick {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    margin-bottom:2px;
    border:1px solid rgba(29,42,36,.2);
    border-radius:50%;
    background:#fff;
    color:var(--ff-ink,#1d2a24);
    cursor:pointer;
    transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
  }
  .ff-mini-card__quick svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; }
  .ff-mini-card__quick:hover { background:#17392f; border-color:#17392f; color:#fff; transform:translateY(-1px); }
  .ff-mini-card__quick.added,
  .ff-mini-card__quick.loading { opacity:.6; }
}
/* WooCommerce inyecta «Ver carrito» como hermano del botón: no pertenece a la tarjeta. */
.ff-mini-card > .added_to_cart { display:none!important; }
@media (min-width:1280px) {
  .ff-mini-card__name { font-size:16px; }
  .ff-mini-card__price { font-size:16px; }
  .ff-mini-card__inspired { font-size:11.5px; }
}
@media (min-width:1600px) {
  .ff-mini-card__name { font-size:17px; }
  .ff-mini-card__price { font-size:17px; }
}

/* --------------------------------------------------------------------------
   Flechas de escritorio: sin scrollbar, avance por grupos
   -------------------------------------------------------------------------- */
.ff-rail-arrow {
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease,visibility .18s ease,background .18s ease,transform .18s ease;
}
@media (min-width:1024px) {
  .ff-mini-rail { padding-inline:0; }
  .ff-rail-arrow {
    top:34%;
    width:42px;
    height:42px;
    border:1px solid rgba(29,42,36,.16);
    background:rgba(255,255,255,.97);
    box-shadow:0 10px 26px rgba(19,31,24,.1);
    color:var(--ff-ink,#1d2a24);
  }
  .ff-rail-arrow--prev { left:-19px; }
  .ff-rail-arrow--next { right:-19px; }
  .ff-rail-arrow:hover { background:#17392f; border-color:#17392f; color:#fff; transform:scale(1.04); }
  .ff-rail-arrow:focus-visible { outline:2px solid #17392f; outline-offset:2px; }
  /* Solo existen cuando hay contenido fuera del viewport del carrusel. */
  .ff-mini-rail.has-overflow .ff-rail-arrow { opacity:1; visibility:visible; }
  .ff-mini-rail .ff-rail-arrow[disabled] { opacity:0; visibility:hidden; pointer-events:none; }
  /* Con flechas el desplazamiento es programado: nada de barra gris. */
  .ff-mini-rail__track { scroll-behavior:smooth; }
}
@media (prefers-reduced-motion:reduce) {
  .ff-mini-rail__track { scroll-behavior:auto; }
}

/* --------------------------------------------------------------------------
   Ritmo vertical del Home en escritorio: −15/−25 % de aire, sin apretar
   -------------------------------------------------------------------------- */
@media (min-width:1024px) {
  .ff-home-v31 .ff-section { padding-bottom:clamp(38px,4.4vw,68px); }
  .ff-home-v31 .ff-home-rail { padding-bottom:clamp(30px,3.6vw,52px); }
  .ff-home-v31 .ff-home-rail--soft { padding-top:clamp(28px,3vw,44px); margin-bottom:clamp(30px,3.6vw,52px); }
  .ff-home-v31 .ff-home-rail--soft > .ff-shell { padding-bottom:clamp(28px,3vw,44px); }
  .ff-home-v31 .ff-section--categories { padding-bottom:clamp(30px,3.6vw,50px); }
  .ff-home-v31 .ff-quick-access { padding-bottom:clamp(22px,2.6vw,36px); }
  .ff-rail-heading { margin-bottom:18px; }
  .ff-rail-heading h2 { font-size:clamp(30px,2.5vw,38px); }
  .ff-rail-heading__copy { font-size:14px; }
}

/* --------------------------------------------------------------------------
   Hero: reparto 50/50 y producto con más presencia. Sin rediseño.
   -------------------------------------------------------------------------- */
@media (min-width:1280px) {
  .ff-home-v31 .ff-hero-v2 {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    min-height:min(720px,calc(100vh - 110px));
    padding-bottom:clamp(38px,4.4vw,70px);
  }
  .ff-home-v31 .ff-hero-3d { min-height:560px; }
  .ff-home-v31 .ff-hero-3d__image { width:min(92%,660px)!important; height:88%!important; }
}
@media (min-width:1600px) {
  .ff-home-v31 .ff-hero-3d { min-height:610px; }
}

/* --------------------------------------------------------------------------
   Bloques grandes Caballero / Dama / Unisex: se conservan, con más escala
   -------------------------------------------------------------------------- */
@media (min-width:1024px) {
  .ff-home-v31 .ff-category-card { min-height:440px; }
  .ff-category-card__media img { transition:transform .5s cubic-bezier(.2,.7,.2,1); }
  .ff-category-card:hover .ff-category-card__media img { transform:scale(1.03); }
  .ff-category-card__overlay { padding:26px; }
  .ff-category-card__overlay h2 { font-size:33px; }
}
@media (min-width:1280px) {
  .ff-home-v31 .ff-category-card { min-height:490px; }
  .ff-category-grid { gap:18px; }
}
@media (min-width:1600px) {
  .ff-home-v31 .ff-category-card { min-height:530px; }
}

/* --------------------------------------------------------------------------
   Rejilla de catálogo en escritorio: tarjetas con tamaño real
   -------------------------------------------------------------------------- */
@media (min-width:1280px) {
  body.ff-storefront-final.ff-view-grid ul.products { gap:18px!important; }
}

/* Guarda: el scroll horizontal pertenece al track, nunca al documento. */
html, body { max-width:100%; overflow-x:clip; }
.ff-home-rail, .ff-mini-rail, .ff-shell { min-width:0; max-width:100%; }

/* Cuando todo el carrusel cabe (3 productos en una fila de 5, por ejemplo) no hay
   recorrido: las tarjetas reparten el sobrante hasta un tope, así no queda un
   hueco muerto a la derecha ni una tarjeta desproporcionada. */
.ff-mini-rail__track.is-filled .ff-mini-card {
  flex-grow:1;
  max-width:calc(var(--ff-card-w) * 1.3);
}