/* ==========================================================================
   Fragancias Factory 3.12.0 — Design System

   Tokens (custom properties) con el valor aprobado de 3.11 como default y
   componentes que los consumen. El Personalizador solo sobrescribe tokens en
   :root (ver inc/design-system.php → ff_ds_print_css). Sin cambios en el
   Personalizador, el resultado computado es idéntico a 3.11.

   Breakpoints técnicos conservados:
     carruseles  ≤767 · 768–1023 · 1024–1279 · 1280–1599 · 1600+   (3.11)
     tipografía  ≤430 · ≤719 · 720–1023 · ≥1024 · ≥1280 · ≥1600  (v31 + 3.11)
   En la UI solo hay DESKTOP (referencia 1280–1599) y MOBILE (referencia
   431–719); los demás tramos se derivan con calc().

   El motor de carruseles 3.11 (v311.css + v311.js) no se reescribe: aquí solo
   se alimentan --ff-visible y --ff-gap, que v311.css ya consume.
   ========================================================================== */

:root {
  /* Tarjeta */
  --ff-card-bg:transparent;
  --ff-card-border-width:0px;
  --ff-card-border-color:var(--ff-border);
  --ff-card-radius:0px;
  --ff-card-shadow:none;
  --ff-card-pad-desktop:0px;
  --ff-card-pad-mobile:0px;
  --ff-card-gap-desktop:11px;
  --ff-card-gap-mobile:8px;
  /* Imagen */
  --ff-img-ratio:1 / 1;
  --ff-img-h:100%;
  --ff-img-fit:cover;
  --ff-img-bg:#eef1ea;
  --ff-img-pad-desktop:0px;
  --ff-img-pad-mobile:0px;
  /* Nombre */
  --ff-title-color:currentColor;
  --ff-title-weight:400;
  --ff-title-desktop:16px;
  --ff-title-lh-desktop:1.18;
  --ff-title-lines-desktop:2;
  --ff-title-mobile:11px;
  --ff-title-lh-mobile:1.15;
  --ff-title-lines-mobile:1;
  /* Inspirado en */
  --ff-insp-color:#758079;
  --ff-insp-weight:400;
  --ff-insp-desktop:11.5px;
  --ff-insp-mobile:9.5px;
  /* Precio */
  --ff-price-color:currentColor;
  --ff-price-sale-color:var(--ff-color-sale, currentColor);
  --ff-price-weight:600;
  --ff-price-desktop:16px;
  --ff-price-mobile:11px;
  /* Compra rápida */
  --ff-quick-size:38px;
  --ff-quick-border-width:1px;
  --ff-quick-border-color:rgba(29,42,36,.2);
  --ff-quick-bg:#fff;
  --ff-quick-icon:var(--ff-ink,#1d2a24);
  --ff-quick-hover-bg:#17392f;
  --ff-quick-hover-border:#17392f;
  --ff-quick-hover-icon:#fff;
  --ff-quick-hover-lift:-1px;
  /* Hover */
  --ff-card-lift:0px;
  --ff-img-zoom:1.035;
  --ff-track-bleed-top:0px;
  --ff-track-bleed-bottom:0px;
  /* Carruseles */
  --ff-carousel-gap-desktop:16px;
  --ff-carousel-gap-mobile:8px;
  --ff-arrow-size:42px;
  /* Tipografía */
  --ff-section-title-desktop:38px;
  --ff-section-title-mobile:25px;
}

/* --------------------------------------------------------------------------
   Tarjeta de carrusel · base (móvil y tablet)
   -------------------------------------------------------------------------- */
.ff-mini-rail .ff-mini-card {
  background:var(--ff-card-bg);
  border:var(--ff-card-border-width) solid var(--ff-card-border-color);
  border-radius:var(--ff-card-radius);
  box-shadow:var(--ff-card-shadow);
  padding:var(--ff-card-pad-mobile);
  transition:transform .22s ease,box-shadow .22s ease;
}
.ff-mini-rail .ff-mini-card__media {
  aspect-ratio:var(--ff-img-ratio);
  background:var(--ff-img-bg);
  padding:var(--ff-img-pad-mobile);
  border-radius:max(0px, calc(var(--ff-card-radius) - var(--ff-card-pad-mobile) - var(--ff-card-border-width)));
}
.ff-mini-rail .ff-mini-card__media img { height:var(--ff-img-h); object-fit:var(--ff-img-fit); }
.ff-mini-rail .ff-mini-card__copy { padding-top:var(--ff-card-gap-mobile); }
.ff-mini-rail .ff-mini-card__name {
  color:var(--ff-title-color);
  font-weight:var(--ff-title-weight);
  line-height:var(--ff-title-lh-mobile);
  /* 720–1023: interpolación móvil/escritorio (3.11: 14px) */
  font-size:calc((var(--ff-title-mobile) + var(--ff-title-desktop)) / 2 + .5px);
}
.ff-mini-rail .ff-mini-card__inspired {
  color:var(--ff-insp-color);
  font-weight:var(--ff-insp-weight);
  font-size:var(--ff-insp-mobile);
}
.ff-mini-rail .ff-mini-card__price {
  color:var(--ff-price-color);
  font-weight:var(--ff-price-weight);
  /* 720–1023: interpolación (3.11: 13px) */
  font-size:calc((var(--ff-price-mobile) + var(--ff-price-desktop)) / 2 - .5px);
}
.ff-mini-rail .ff-mini-card__price .amount { font-weight:var(--ff-price-weight); }
.ff-mini-rail .ff-mini-card__price ins { color:var(--ff-price-sale-color); }

@media (max-width:719px) {
  .ff-mini-rail .ff-mini-card__name { font-size:var(--ff-title-mobile); }
  .ff-mini-rail .ff-mini-card__price { font-size:var(--ff-price-mobile); }
  .ff-rail-heading h2 { font-size:var(--ff-section-title-mobile); }
}
@media (max-width:430px) {
  .ff-mini-rail .ff-mini-card__name { font-size:calc(var(--ff-title-mobile) - .5px); }
  .ff-mini-rail .ff-mini-card__price { font-size:calc(var(--ff-price-mobile) - .5px); }
}

/* --------------------------------------------------------------------------
   Tarjeta de carrusel · escritorio
   -------------------------------------------------------------------------- */
@media (min-width:1024px) {
  .ff-mini-rail .ff-mini-card { padding:var(--ff-card-pad-desktop); }
  .ff-mini-rail .ff-mini-card__media {
    padding:var(--ff-img-pad-desktop);
    border-radius:max(0px, calc(var(--ff-card-radius) - var(--ff-card-pad-desktop) - var(--ff-card-border-width)));
  }
  .ff-mini-rail .ff-mini-card__copy { padding-top:var(--ff-card-gap-desktop); }
  .ff-mini-rail .ff-mini-card__name {
    font-size:calc(var(--ff-title-desktop) - 1px);
    line-height:var(--ff-title-lh-desktop);
    -webkit-line-clamp:var(--ff-title-lines-desktop);
  }
  .ff-mini-rail .ff-mini-card__inspired { font-size:calc(var(--ff-insp-desktop) - .5px); }
  .ff-mini-rail .ff-mini-card__price { font-size:calc(var(--ff-price-desktop) - 1px); }

  .ff-mini-rail .ff-mini-card__quick {
    width:var(--ff-quick-size);
    height:var(--ff-quick-size);
    border:var(--ff-quick-border-width) solid var(--ff-quick-border-color);
    background:var(--ff-quick-bg);
    color:var(--ff-quick-icon);
  }
  .ff-mini-rail .ff-mini-card__quick:hover {
    background:var(--ff-quick-hover-bg);
    border-color:var(--ff-quick-hover-border);
    color:var(--ff-quick-hover-icon);
    transform:translateY(var(--ff-quick-hover-lift));
  }

  .ff-mini-rail .ff-rail-arrow { width:var(--ff-arrow-size); height:var(--ff-arrow-size); }
  .ff-mini-rail .ff-rail-arrow--prev { left:calc(var(--ff-arrow-size) / -2 + 2px); }
  .ff-mini-rail .ff-rail-arrow--next { right:calc(var(--ff-arrow-size) / -2 + 2px); }

  .ff-rail-heading h2 { font-size:clamp(calc(var(--ff-section-title-desktop) - 8px), 2.5vw, var(--ff-section-title-desktop)); }
}
@media (min-width:1280px) {
  .ff-mini-rail .ff-mini-card__name { font-size:var(--ff-title-desktop); }
  .ff-mini-rail .ff-mini-card__inspired { font-size:var(--ff-insp-desktop); }
  .ff-mini-rail .ff-mini-card__price { font-size:var(--ff-price-desktop); }
}
@media (min-width:1600px) {
  .ff-mini-rail .ff-mini-card__name { font-size:calc(var(--ff-title-desktop) + 1px); }
  .ff-mini-rail .ff-mini-card__price { font-size:calc(var(--ff-price-desktop) + 1px); }
}

/* --------------------------------------------------------------------------
   Hover: solo dispositivos con ratón. En táctil no hay efecto hover.
   -------------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine) {
  .ff-mini-rail .ff-mini-card:hover .ff-mini-card__media img { transform:scale(var(--ff-img-zoom)); }
}
@media (hover:hover) and (pointer:fine) and (min-width:1024px) {
  .ff-mini-rail .ff-mini-card:hover { transform:translateY(calc(-1 * var(--ff-card-lift))); }
}
@media (hover:none), (pointer:coarse) {
  .ff-mini-rail .ff-mini-card:hover,
  .ff-mini-rail .ff-mini-card:hover .ff-mini-card__media img { transform:none; }
}

/* --------------------------------------------------------------------------
   Carruseles: parametrización del motor 3.11 (no se reescribe)
   -------------------------------------------------------------------------- */
/* El track hereda la separación del carrusel (v31 fijaba 8px en su propio nodo). */
.ff-mini-rail > .ff-mini-rail__track {
  --ff-gap:inherit;
  /* Margen para elevación/sombra sin cambiar el layout: padding y margen negativo se anulan. */
  padding-top:var(--ff-track-bleed-top);
  margin-top:calc(-1 * var(--ff-track-bleed-top));
  padding-bottom:calc(4px + var(--ff-track-bleed-bottom));
  margin-bottom:calc(-1 * var(--ff-track-bleed-bottom));
}
.ff-mini-rail[data-ff-arrows="0"] .ff-rail-arrow { display:none; }

.ff-mini-rail {
  --_gd:var(--ff-carousel-gap-desktop);
  --_gm:var(--ff-carousel-gap-mobile);
}
.ff-mini-rail--best {
  --_vd:var(--ff-rail-best-vis-d,4);
  --_vm:var(--ff-rail-best-vis-m,2.6);
  --_gd:var(--ff-rail-best-gap-d,var(--ff-carousel-gap-desktop));
  --_gm:var(--ff-rail-best-gap-m,var(--ff-carousel-gap-mobile));
}
.ff-mini-rail--caballero {
  --_vd:var(--ff-rail-caballero-vis-d,5);
  --_vm:var(--ff-rail-caballero-vis-m,2.6);
  --_gd:var(--ff-rail-caballero-gap-d,var(--ff-carousel-gap-desktop));
  --_gm:var(--ff-rail-caballero-gap-m,var(--ff-carousel-gap-mobile));
}
.ff-mini-rail--dama {
  --_vd:var(--ff-rail-dama-vis-d,5);
  --_vm:var(--ff-rail-dama-vis-m,2.6);
  --_gd:var(--ff-rail-dama-gap-d,var(--ff-carousel-gap-desktop));
  --_gm:var(--ff-rail-dama-gap-m,var(--ff-carousel-gap-mobile));
}
.ff-mini-rail--unisex {
  --_vd:var(--ff-rail-unisex-vis-d,5);
  --_vm:var(--ff-rail-unisex-vis-m,2.6);
  --_gd:var(--ff-rail-unisex-gap-d,var(--ff-carousel-gap-desktop));
  --_gm:var(--ff-rail-unisex-gap-m,var(--ff-carousel-gap-mobile));
}
.ff-mini-rail--ambientales {
  --_vd:var(--ff-rail-ambientales-vis-d,5);
  --_vm:var(--ff-rail-ambientales-vis-m,3.15);
  --_gd:var(--ff-rail-ambientales-gap-d,var(--ff-carousel-gap-desktop));
  --_gm:var(--ff-rail-ambientales-gap-m,var(--ff-carousel-gap-mobile));
}
.ff-mini-rail--concentrated {
  --_vd:var(--ff-rail-concentrated-vis-d,4);
  --_vm:var(--ff-rail-concentrated-vis-m,3.15);
  --_gd:var(--ff-rail-concentrated-gap-d,var(--ff-carousel-gap-desktop));
  --_gm:var(--ff-rail-concentrated-gap-m,var(--ff-carousel-gap-mobile));
}
.ff-mini-rail--essences {
  --_vd:var(--ff-rail-essences-vis-d,6);
  --_vm:var(--ff-rail-essences-vis-m,3.15);
  --_gd:var(--ff-rail-essences-gap-d,var(--ff-carousel-gap-desktop));
  --_gm:var(--ff-rail-essences-gap-m,var(--ff-carousel-gap-mobile));
}

@media (max-width:767px) {
  .ff-mini-rail { --ff-gap:var(--_gm); }
  .ff-mini-rail--best { --ff-visible:var(--_vm); }
  .ff-mini-rail--caballero { --ff-visible:var(--_vm); }
  .ff-mini-rail--dama { --ff-visible:var(--_vm); }
  .ff-mini-rail--unisex { --ff-visible:var(--_vm); }
  .ff-mini-rail--ambientales { --ff-visible:var(--_vm); }
  .ff-mini-rail--concentrated { --ff-visible:var(--_vm); }
  .ff-mini-rail--essences { --ff-visible:var(--_vm); }
}
@media (min-width:768px) and (max-width:1023px) {
  .ff-mini-rail { --ff-gap:calc((var(--_gm) + var(--_gd)) / 2); }
  .ff-mini-rail--best { --ff-visible:max(1.2, calc(var(--_vd) - 0.7)); }
  .ff-mini-rail--caballero { --ff-visible:max(1.2, calc(var(--_vd) - 0.7)); }
  .ff-mini-rail--dama { --ff-visible:max(1.2, calc(var(--_vd) - 0.7)); }
  .ff-mini-rail--unisex { --ff-visible:max(1.2, calc(var(--_vd) - 0.7)); }
  .ff-mini-rail--ambientales { --ff-visible:max(1.2, calc(var(--_vd) - 0.7)); }
  .ff-mini-rail--concentrated { --ff-visible:max(1.2, calc(var(--_vd) - 0.5)); }
  .ff-mini-rail--essences { --ff-visible:max(1.2, calc(var(--_vd) - 1.5)); }
}
@media (min-width:1024px) and (max-width:1279px) {
  .ff-mini-rail { --ff-gap:max(0px, calc(var(--_gd) - 2px)); }
  .ff-mini-rail--best { --ff-visible:max(1.2, calc(var(--_vd) - 0.6)); }
  .ff-mini-rail--caballero { --ff-visible:max(1.2, calc(var(--_vd) - 0.7)); }
  .ff-mini-rail--dama { --ff-visible:max(1.2, calc(var(--_vd) - 0.7)); }
  .ff-mini-rail--unisex { --ff-visible:max(1.2, calc(var(--_vd) - 0.7)); }
  .ff-mini-rail--ambientales { --ff-visible:max(1.2, calc(var(--_vd) - 0.7)); }
  .ff-mini-rail--concentrated { --ff-visible:max(1.2, calc(var(--_vd) + 0.2)); }
  .ff-mini-rail--essences { --ff-visible:max(1.2, calc(var(--_vd) - 0.5)); }
}
@media (min-width:1280px) and (max-width:1599px) {
  .ff-mini-rail { --ff-gap:var(--_gd); }
  .ff-mini-rail--best { --ff-visible:calc(var(--_vd) + 0.2); }
  .ff-mini-rail--caballero { --ff-visible:calc(var(--_vd) + 0.3); }
  .ff-mini-rail--dama { --ff-visible:calc(var(--_vd) + 0.3); }
  .ff-mini-rail--unisex { --ff-visible:calc(var(--_vd) + 0.3); }
  .ff-mini-rail--ambientales { --ff-visible:calc(var(--_vd) + 0.3); }
  .ff-mini-rail--concentrated { --ff-visible:calc(var(--_vd) + 0.6); }
  .ff-mini-rail--essences { --ff-visible:calc(var(--_vd) + 0.3); }
}
@media (min-width:1600px) {
  .ff-mini-rail { --ff-gap:calc(var(--_gd) + 2px); }
  .ff-mini-rail--best { --ff-visible:calc(var(--_vd) + 0.4); }
  .ff-mini-rail--caballero { --ff-visible:calc(var(--_vd) + 0.4); }
  .ff-mini-rail--dama { --ff-visible:calc(var(--_vd) + 0.4); }
  .ff-mini-rail--unisex { --ff-visible:calc(var(--_vd) + 0.4); }
  .ff-mini-rail--ambientales { --ff-visible:calc(var(--_vd) + 0.4); }
  .ff-mini-rail--concentrated { --ff-visible:calc(var(--_vd) + 0.7); }
  .ff-mini-rail--essences { --ff-visible:calc(var(--_vd) + 0.4); }
}