/* ============================================================
   Friends & Family — estilos de la aplicación
   1) Base   2) Primitivas del DS (btn/qty/pcard/nav)  3) Secciones
   4) Drawer del carrito   5) Modal de login   6) WhatsApp   7) Responsive
   Valores portados 1:1 desde Home.dc.html + el bundle del sistema de diseño.
   ============================================================ */

/* ---------------- 1) Base ---------------- */
/* Normalización mínima propia. El reset.css del tema padre está desactivado (ver inc/assets.php),
   así que reponemos aquí solo lo imprescindible; los botones/campos los estiliza el DS. */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
body { font-family: var(--fyf-font-sans); color: var(--fyf-text-body); background: var(--fyf-white); }
/* Enlaces del prototipo (el reset del padre ya no interviene). */
a { color: var(--fyf-text-link); text-decoration: none; }
a:hover, a:focus, a:active { color: var(--fyf-primary-dark); }
:root { --fyf-nav-heading: #183e6c; } /* el azul de encabezado más oscuro usado en los títulos de sección */

/* ---------------- 2) Primitivas del DS ---------------- */

/* Botón */
.fyf-btn{
  --_bg:var(--fyf-primary); --_fg:var(--fyf-white); --_bd:transparent;
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--fyf-space-8); box-sizing:border-box;
  font-family:var(--fyf-font-sans); font-weight:var(--fyf-weight-semibold);
  border:var(--fyf-border-width) solid var(--_bd); border-radius:var(--fyf-radius-md);
  background:var(--_bg); color:var(--_fg); cursor:pointer; white-space:nowrap;
  text-decoration:none; transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.fyf-btn:focus-visible{ outline:none; box-shadow:var(--fyf-shadow-focus); }
.fyf-btn:active{ transform:translateY(1px); }
/* Mantener el color de texto propio del botón en hover/focus — ganarle al color a:hover del tema padre. */
.fyf-btn:hover, .fyf-btn:focus, .fyf-btn:active, a.fyf-btn:hover, a.fyf-btn:focus{ color:var(--_fg); }
.fyf-btn--full{ width:100%; }
.fyf-btn--sm{ height:32px; padding:0 var(--fyf-space-16); font-size:var(--fyf-small-size); line-height:var(--fyf-small-line); border-radius:var(--fyf-radius-sm); }
.fyf-btn--md{ height:40px; padding:0 var(--fyf-space-24); font-size:var(--fyf-body-size); line-height:var(--fyf-body-line); }
.fyf-btn--lg{ height:48px; padding:0 var(--fyf-space-32); font-size:var(--fyf-body-size); line-height:var(--fyf-body-line); }
.fyf-btn--primary{ --_bg:var(--fyf-primary); --_fg:var(--fyf-white); }
.fyf-btn--primary:hover{ --_bg:var(--fyf-primary-dark); }
.fyf-btn--secondary{ --_bg:var(--fyf-white); --_fg:var(--fyf-primary); --_bd:var(--fyf-primary); }
.fyf-btn--secondary:hover{ --_bg:rgba(0,116,203,.08); }
.fyf-btn--ghost{ --_bg:transparent; --_fg:var(--fyf-primary); --_bd:transparent; }
.fyf-btn--ghost:hover{ --_bg:rgba(0,116,203,.08); }
.fyf-btn--danger{ --_bg:var(--fyf-error); --_fg:var(--fyf-white); }
.fyf-btn:disabled, .fyf-btn[aria-disabled="true"]{ cursor:not-allowed; pointer-events:none; --_bg:var(--fyf-gray-300); --_fg:var(--fyf-gray-500); --_bd:transparent; transform:none; }

/* Selector de cantidad */
.fyf-qty{ display:inline-flex; align-items:center; box-sizing:border-box; border:var(--fyf-border-width) solid var(--fyf-border); border-radius:var(--fyf-radius-sm); background:var(--fyf-white); overflow:hidden; font-family:var(--fyf-font-sans); }
.fyf-qty__btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:0; background:transparent; cursor:pointer; color:var(--fyf-primary); transition:background .15s ease, color .15s ease; }
.fyf-qty__btn:hover:not(:disabled){ background:rgba(0,116,203,.08); }
.fyf-qty__btn:disabled{ cursor:not-allowed; }
/* Glifos −/+ dibujados con pseudo-elementos (fiable sin importar cómo el tema/plugin maneje el SVG). */
.fyf-qty__btn--dec::before, .fyf-qty__btn--inc::before{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:11px; height:2px; border-radius:2px; background:var(--fyf-primary); }
.fyf-qty__btn--inc::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:2px; height:11px; border-radius:2px; background:var(--fyf-primary); }
.fyf-qty__btn:disabled::before, .fyf-qty__btn:disabled::after{ background:var(--fyf-gray-300); }
.fyf-qty__val{ min-width:40px; text-align:center; padding:0 var(--fyf-space-8); font-size:var(--fyf-body-size); line-height:var(--fyf-body-line); font-weight:var(--fyf-weight-semibold); color:var(--fyf-text-strong); border-left:var(--fyf-border-width) solid var(--fyf-border); border-right:var(--fyf-border-width) solid var(--fyf-border); align-self:stretch; display:flex; align-items:center; justify-content:center; }
.fyf-qty--sm .fyf-qty__btn{ width:28px; height:28px; }
.fyf-qty--sm .fyf-qty__val{ min-width:32px; font-size:var(--fyf-small-size); }

/* Tarjeta de producto */
.fyf-pcard{ display:flex; flex-direction:column; width:100%; box-sizing:border-box; background:var(--fyf-surface); border:var(--fyf-border-width) solid var(--fyf-border); border-radius:var(--fyf-radius-lg); overflow:hidden; font-family:var(--fyf-font-sans); transition:box-shadow .18s ease; }
.fyf-pcard:hover{ box-shadow:var(--fyf-shadow-md); }
.fyf-pcard__media{ position:relative; height:325px; display:flex; align-items:center; justify-content:center; padding:var(--fyf-space-16) var(--fyf-space-16) var(--fyf-space-8); text-decoration:none; }
.fyf-pcard__media img{ max-height:100%; max-width:80%; object-fit:contain; }
.fyf-pcard__disc{ position:absolute; top:var(--fyf-space-16); right:var(--fyf-space-16); padding:3px var(--fyf-space-8); background:var(--fyf-primary-dark); color:#fff; border-radius:var(--fyf-radius-sm); font-size:var(--fyf-caption-size); font-weight:var(--fyf-weight-bold); }
.fyf-pcard__body{ display:flex; flex:1 1 auto; flex-direction:column; gap:var(--fyf-space-8); padding:0 var(--fyf-space-16) var(--fyf-space-16); }
.fyf-pcard__rule{ height:2px; background:var(--fyf-primary-light); opacity:.5; border-radius:2px; margin:0 0 var(--fyf-space-8); }
.fyf-pcard__brand{ font-size:var(--fyf-caption-size); font-weight:var(--fyf-weight-semibold); letter-spacing:.06em; text-transform:uppercase; color:var(--fyf-text-muted); }
.fyf-pcard__prow{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--fyf-space-8); }
.fyf-pcard__plabel{ font-size:var(--fyf-small-size); color:var(--fyf-text-muted); }
.fyf-pcard__plabel b{ font-weight:var(--fyf-weight-bold); font-style:italic; color:var(--fyf-text-strong); }
.fyf-pcard__ppub{ font-size:var(--fyf-small-size); color:var(--fyf-text-muted); text-decoration:line-through; }
.fyf-pcard__pff{ font-size:var(--fyf-body-size); font-weight:var(--fyf-weight-bold); color:var(--fyf-primary); }
.fyf-pcard__name{ font-size:var(--fyf-small-size); line-height:var(--fyf-small-line); font-weight:var(--fyf-weight-semibold); color:var(--fyf-text-strong); text-transform:uppercase; margin:var(--fyf-space-4) 0 0; }
.fyf-pcard__name a{ color:inherit; text-decoration:none; }
.fyf-pcard__foot{ display:flex; align-items:center; gap:var(--fyf-space-8); margin-top:auto; }
.fyf-pcard__foot .fyf-qty{ flex:0 0 auto; }          /* no dejar que el stepper se encoja y se recorte */
.fyf-pcard__foot > *:last-child{ flex:1 1 auto; }
/* Overrides de Home: CTA + stepper cuadrados, etiqueta en mayúsculas */
.fyf-pcard .fyf-btn{ border-radius:0; }
.fyf-pcard .fyf-qty{ border-radius:0; }
.fyf-pcard__add{ min-width:0; padding:0 12px; font-size:var(--fyf-small-size); text-transform:uppercase; letter-spacing:.04em; font-weight:var(--fyf-weight-bold); }

/* Navbar (usada por el widget FF Header) */
.fyf-nav{ font-family:var(--fyf-font-sans); background:var(--fyf-surface); }
.fyf-nav__top{ display:flex; align-items:center; gap:var(--fyf-space-24); max-width:var(--fyf-content-max); margin:0 auto; height:76px; padding:0 var(--fyf-space-24); box-sizing:border-box; }
.fyf-nav__brand{ flex:0 0 auto; color:var(--fyf-primary); display:flex; align-items:center; text-decoration:none; }
.fyf-nav__brand svg{ height:60px; width:auto; }
.fyf-nav__marcas{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; padding:var(--fyf-space-8); border:0; background:transparent; cursor:pointer; color:var(--fyf-primary); font-family:inherit; font-size:var(--fyf-small-size); font-weight:var(--fyf-weight-semibold); border-radius:var(--fyf-radius-sm); text-transform:uppercase; letter-spacing:.02em; text-decoration:none; transition:opacity .15s ease; }
.fyf-nav__marcas:hover{ opacity:.7; color:var(--fyf-primary); }
.fyf-nav__search{ flex:1 1 auto; display:flex; align-items:center; gap:var(--fyf-space-8); min-width:0; height:44px; padding:0 4px 0 var(--fyf-space-16); background:var(--fyf-white); border:var(--fyf-border-width) solid var(--fyf-border); border-radius:var(--fyf-radius-pill); color:var(--fyf-text-muted); transition:border-color .15s ease; }
.fyf-nav__search:focus-within{ border-color:var(--fyf-primary); }
.fyf-nav__search input{ flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent; font-family:inherit; font-size:var(--fyf-small-size); color:var(--fyf-text-strong); }
.fyf-nav__search input::placeholder{ color:var(--fyf-text-muted); }
.fyf-nav__searchbtn{ width:34px; height:34px; flex:0 0 auto; border:0; border-radius:var(--fyf-radius-pill); cursor:pointer; background:var(--fyf-primary-light); color:#fff; display:inline-flex; align-items:center; justify-content:center; }

/* Buscador AJAX — desplegable de resultados en vivo */
.fyf-nav__search{ position:relative; }
.fyf-nav__results{ position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:130; background:var(--fyf-white); border:1px solid var(--fyf-border); border-radius:var(--fyf-radius-lg); box-shadow:0 16px 40px rgba(9,78,160,.16); max-height:min(70vh,520px); overflow:auto; padding:6px; }
.fyf-nav__results[hidden]{ display:none; }
.fyf-nav__results.is-loading{ min-height:56px; }
.fyf-nav__results.is-loading::after{ content:""; position:absolute; top:20px; left:50%; width:20px; height:20px; margin-left:-10px; border:2px solid var(--fyf-border); border-top-color:var(--fyf-primary); border-radius:999px; animation:ff-spin .6s linear infinite; }
@keyframes ff-spin{ to{ transform:rotate(360deg); } }
.fyf-nav__results-list{ list-style:none; margin:0; padding:0; }
.fyf-nav__result{ display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:10px; text-decoration:none; color:var(--fyf-text-strong); }
.fyf-nav__result:hover, .fyf-nav__result.is-active{ background:var(--fyf-gray-100); color:var(--fyf-text-strong); }
.fyf-nav__result-img{ flex:0 0 auto; width:44px; height:54px; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,var(--fyf-gray-100),#eaf2fb); border:1px solid var(--fyf-border); border-radius:8px; overflow:hidden; padding:4px; box-sizing:border-box; }
.fyf-nav__result-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.fyf-nav__result-info{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.fyf-nav__result-brand{ font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--fyf-text-muted); }
.fyf-nav__result-name{ font-size:13px; font-weight:600; line-height:1.25; text-transform:uppercase; color:var(--fyf-text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fyf-nav__result-price{ font-size:13px; font-weight:700; color:var(--fyf-primary); }
.fyf-nav__result-more{ display:block; text-align:center; padding:11px; margin-top:4px; font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--fyf-primary); border-top:1px solid var(--fyf-border); }
.fyf-nav__result-more:hover{ color:var(--fyf-primary-dark); }
.fyf-nav__noresults{ margin:0; padding:20px; text-align:center; color:var(--fyf-text-muted); font-size:14px; }
.fyf-nav__actions{ display:flex; align-items:center; gap:var(--fyf-space-16); flex:0 0 auto; }
.fyf-nav__cta{ display:inline-flex; align-items:center; gap:6px; padding:0 var(--fyf-space-24); height:40px; border:0; border-radius:var(--fyf-radius-pill); cursor:pointer; background:var(--fyf-primary); color:#fff; font-family:inherit; font-size:var(--fyf-small-size); font-weight:var(--fyf-weight-bold); text-transform:uppercase; letter-spacing:.02em; white-space:nowrap; text-decoration:none; transition:background .15s ease; }
.fyf-nav__cta:hover{ background:var(--fyf-primary-dark); color:#fff; }
.fyf-nav__icon{ position:relative; width:46px; height:46px; border:0; background:transparent; cursor:pointer; border-radius:var(--fyf-radius-pill); color:var(--fyf-primary); display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.fyf-nav__icon:hover{ color:var(--fyf-primary); }
.fyf-nav__icon--fill{ background:var(--fyf-primary); color:#fff; }
.fyf-nav__icon--fill:hover{ color:#fff; }
.fyf-nav__icon--fill svg{ width:24px; height:24px; }
.fyf-nav__icon:not(.fyf-nav__icon--fill) svg{ width:28px; height:28px; }
.fyf-nav__badge{ position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 4px; box-sizing:border-box; background:var(--fyf-primary-dark); color:#fff; border:1.5px solid #fff; border-radius:var(--fyf-radius-pill); font-size:10px; line-height:14px; font-weight:var(--fyf-weight-bold); text-align:center; }
/* Botones solo-móvil (buscador deslizante + hamburguesa): ocultos en escritorio */
.fyf-nav__mbtn{ display:none; }

/* Menú off-canvas (móvil): panel del 95% que entra deslizando desde la izquierda */
.ff-mnav{ position:fixed; inset:0; z-index:120; background:rgba(26,26,26,.38); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s; }
.ff-mnav.is-open{ opacity:1; visibility:visible; }
.ff-mnav__panel{ position:absolute; top:8px; bottom:8px; left:0; width:95%; max-width:430px; background:var(--fyf-gray-100); border-radius:0 24px 24px 0; box-shadow:0 24px 64px rgba(9,78,160,.25); padding:18px 16px 24px; box-sizing:border-box; overflow-y:auto; -webkit-overflow-scrolling:touch; transform:translateX(-105%); transition:transform .28s ease; }
.ff-mnav.is-open .ff-mnav__panel{ transform:translateX(0); }
.ff-mnav__head{ display:flex; align-items:center; justify-content:space-between; padding:6px 6px 16px; }
.ff-mnav__logo{ display:inline-flex; color:var(--fyf-primary); }
.ff-mnav__close{ width:38px; height:38px; border:0; border-radius:999px; background:var(--fyf-white); color:var(--fyf-text-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:color .15s ease; }
.ff-mnav__close:hover{ color:var(--fyf-text-strong); }
.ff-mnav__list{ display:flex; flex-direction:column; gap:12px; }
.ff-mnav__list--alt{ margin-top:22px; }
.ff-mnav__item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 20px; background:var(--fyf-white); border-radius:14px; font-size:15px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--fyf-text-strong); box-shadow:0 1px 2px rgba(16,24,40,.05); }
.ff-mnav__item:hover, .ff-mnav__item:focus{ color:var(--fyf-primary); }
.ff-mnav__item--alt{ background:var(--fyf-gray-300); }
.ff-mnav__chev{ flex:0 0 auto; color:var(--fyf-primary); }

.fyf-nav__sub{ background:var(--fyf-primary-light); }
.fyf-nav__sub-inner{ display:flex; align-items:center; gap:var(--fyf-space-4); max-width:var(--fyf-content-max); margin:0 auto; padding:0; height:44px; box-sizing:border-box; justify-content:space-between; }
.fyf-nav__cat{ display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 var(--fyf-space-16); flex:0 0 auto; border:0; background:transparent; cursor:pointer; text-decoration:none; border-radius:var(--fyf-radius-pill); font-family:inherit; font-size:var(--fyf-small-size); font-weight:var(--fyf-weight-semibold); text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; color:#fff; transition:background .15s ease; }
.fyf-nav__cat:hover{ background:rgba(255,255,255,.18); color:#fff; }
.fyf-nav__cat.is-active{ height:44px; margin-left:-5vw; padding:0 34px 0 calc(5vw + 34px); border-radius:0 var(--fyf-radius-pill) var(--fyf-radius-pill) 0; font-weight:var(--fyf-weight-bold); background:var(--fyf-primary-dark); }
.fyf-nav__caret{ opacity:.8; flex:0 0 auto; }

/* Menú principal renderizado como menú de WordPress (barra de categorías) */
.fyf-nav__menu{ list-style:none; align-items:stretch; }
.fyf-nav__menu > li{ position:relative; display:flex; align-items:center; }
.fyf-nav__menu .current-menu-item > .fyf-nav__cat,
.fyf-nav__menu .current-menu-ancestor > .fyf-nav__cat,
.fyf-nav__menu .current-menu-parent > .fyf-nav__cat{ background:var(--fyf-primary-dark); color:#fff; font-weight:var(--fyf-weight-bold); }
.fyf-nav__menu .menu-item-has-children > .fyf-nav__cat::after{ content:""; display:inline-block; width:6px; height:6px; margin-left:3px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor; transform:translateY(-1px) rotate(45deg); opacity:.85; }
.fyf-nav__menu .sub-menu{ position:absolute; top:100%; left:0; z-index:130; min-width:220px; margin:0; padding:6px; list-style:none; background:var(--fyf-white); border:1px solid var(--fyf-border); box-shadow:0 16px 40px rgba(9,78,160,.16); border-radius:0 0 var(--fyf-radius-md) var(--fyf-radius-md); opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .14s ease, transform .14s ease, visibility .14s; }
.fyf-nav__menu > li:hover > .sub-menu, .fyf-nav__menu > li:focus-within > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.fyf-nav__menu .sub-menu li{ display:block; }
.fyf-nav__menu .sub-menu a{ display:block; padding:9px 12px; border-radius:8px; color:var(--fyf-text-strong); font-size:14px; font-weight:500; text-decoration:none; white-space:nowrap; }
.fyf-nav__menu .sub-menu a:hover{ background:var(--fyf-gray-100); color:var(--fyf-primary); }

/* ---------------- 3) Secciones ---------------- */
.ff-section{ max-width:var(--fyf-content-max); margin:0 auto; }
.ff-section--hot{ padding:64px 24px 0; }
.ff-section--brands{ padding:72px 24px 0; }
.ff-section--combos{ padding:40px 24px 0; }

.ff-sec-title{ margin:0; text-align:center; font-size:clamp(26px,4.2vw,34px); line-height:1.15; font-weight:700; letter-spacing:-.01em; text-transform:uppercase; color:var(--fyf-nav-heading); }
.ff-sec-title--sm{ font-size:clamp(24px,4vw,32px); }  /* título de la sección de combos (el diseño es 2px más pequeño que "Hot") */
.ff-sec-title em{ font-style:italic; }
.ff-sec-sub{ margin:10px 0 0; text-align:center; font-size:16px; color:var(--fyf-text-muted); }

.ff-ruled-head{ display:flex; align-items:center; gap:28px; }
.ff-ruled-head__line{ flex:1; height:1px; background:var(--fyf-border); }
.ff-ruled-head__title{ margin:0; font-size:clamp(23px,3.6vw,30px); font-weight:700; letter-spacing:-.01em; text-transform:uppercase; color:var(--fyf-nav-heading); white-space:nowrap; }
.ff-combos-divider{ height:1px; background:var(--fyf-border); margin-bottom:56px; }

/* Hero — variante de imagen (por defecto, desde el arte de campaña banner.png) */
.ff-hero-image{ width:100%; background:#0a1c52; }
.ff-hero-image img{ display:block; width:100%; height:auto; }

/* Hero — variante promo */
.ff-hero-promo{ position:relative; overflow:hidden; background:linear-gradient(120deg,#0a1c52 0%,#0b3a86 55%,#094EA0 100%); color:#fff; }
.ff-hero-promo__mark{ position:absolute; left:-70px; bottom:-90px; color:#fff; opacity:.07; pointer-events:none; }
.ff-hero-promo__grid{ position:relative; max-width:var(--fyf-content-max); margin:0 auto; padding:64px 24px 56px; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; min-height:300px; }
.ff-hero-promo__col{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.ff-hero-promo__badge{ display:inline-flex; align-items:center; gap:8px; background:var(--fyf-error); color:#fff; font-size:15px; font-weight:700; letter-spacing:.02em; padding:7px 16px; border-radius:var(--fyf-radius-pill); }
.ff-hero-promo__h1{ margin:0; font-size:clamp(34px,6vw,56px); line-height:.98; font-weight:700; letter-spacing:-.02em; text-transform:uppercase; color:#fff; }
.ff-hero-promo__p{ margin:0; font-size:clamp(16px,2.4vw,20px); line-height:1.35; font-weight:500; color:rgba(255,255,255,.92); max-width:440px; }
.ff-hero-promo__by{ display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.8); font-size:14px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.ff-hero-promo__by span{ width:26px; height:1px; background:rgba(255,255,255,.5); }
.ff-hero-promo__media{ position:relative; aspect-ratio:16/10; border:1.5px dashed rgba(255,255,255,.35); border-radius:var(--fyf-radius-lg); background:rgba(255,255,255,.06); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:rgba(255,255,255,.75); text-align:center; padding:20px; }
.ff-hero-promo__media img{ max-width:100%; height:auto; border-radius:var(--fyf-radius-lg); }
.ff-hero-promo__legal{ position:relative; border-top:1px solid rgba(255,255,255,.15); }
.ff-hero-promo__legal p{ max-width:var(--fyf-content-max); margin:0 auto; padding:12px 24px; font-size:11px; line-height:1.5; letter-spacing:.02em; color:rgba(255,255,255,.7); text-align:center; text-transform:uppercase; }

/* Franja legal */
.ff-legal-strip{ border-bottom:1px solid var(--fyf-border); }
.ff-legal-strip p{ max-width:var(--fyf-content-max); margin:0 auto; padding:14px 24px; text-align:center; font-size:13px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--fyf-primary); }

/* Carrusel (track nativo con scroll-snap + flechas) */
.ff-carousel{ display:flex; align-items:center; gap:12px; margin-top:36px; }
.ff-carousel__arrow{ flex:0 0 auto; width:42px; height:42px; border-radius:var(--fyf-radius-pill); border:1px solid var(--fyf-border); background:var(--fyf-surface); color:var(--fyf-primary); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease; }
.ff-carousel__arrow:hover{ background:var(--fyf-gray-100); }
.ff-track{ flex:1 1 auto; min-width:0; display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 2px 12px; scrollbar-width:none; -ms-overflow-style:none; }
.ff-track::-webkit-scrollbar{ display:none; }
/* Tarjetas visibles por fila: 5 en escritorio (>1440) · 3 en laptop (≤1440) · 2 en tablet+móvil (≤1024). Los ítems extra hacen scroll. */
.ff-track > .fyf-pcard{ flex:0 0 calc((100% - 80px) / 5); scroll-snap-align:start; }
@media (max-width:1440px){ .ff-track > .fyf-pcard{ flex-basis:calc((100% - 40px) / 3); } }
@media (max-width:1024px){ .ff-track > .fyf-pcard{ flex-basis:calc((100% - 20px) / 2); } }

/* Grid de marcas */
.ff-brands{ margin-top:40px; display:grid; grid-template-columns:repeat(var(--ff-brand-cols,8),1fr); gap:16px; }
.ff-brand-tile{ aspect-ratio:181 / 140; border:1px solid var(--fyf-border); border-radius:var(--fyf-radius-lg); background:var(--fyf-gray-100); display:flex; align-items:center; justify-content:center; overflow:hidden; transition:box-shadow .15s ease; }
.ff-brand-tile:hover{ box-shadow:var(--fyf-shadow-md); }
.ff-brand-tile img{ max-width:70%; max-height:70%; object-fit:contain; }
.ff-brand-tile__mark{ display:inline-flex; color:var(--fyf-primary-light); opacity:.28; }

/* Banner informativo (azul sólido) */
.ff-info{ margin-top:80px; background:var(--fyf-primary); }
.ff-info__inner{ max-width:75%; margin:0 auto; padding:56px 24px; display:flex; align-items:center; gap:64px; }
.ff-info__logo{ flex:0 0 auto; color:#fff; }
.ff-info__text{ flex:1; display:flex; flex-direction:column; gap:20px; }
.ff-info__text p{ margin:0; font-size:clamp(15px,1.8vw,18px); line-height:1.55; color:rgba(255,255,255,.95); }
.ff-info__text strong{ font-weight:700; }

/* Barra de confianza */
.ff-trust{ background:var(--fyf-surface); }
.ff-trust__inner{ max-width:65%; margin:0 auto; padding:64px 24px; display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.ff-trust__item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
.ff-trust__icon{ color:var(--fyf-primary); }
.ff-trust__item h3{ margin:0; font-size:16px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--fyf-text-strong); }
.ff-trust__item p{ margin:0; max-width:250px; font-size:14px; line-height:1.5; color:var(--fyf-text-muted); }

/* Pie de página */
.ff-foot{ background:var(--fyf-primary-light); color:#fff; }
.ff-foot__inner{ max-width:var(--fyf-content-max); margin:0 auto; padding:56px 24px 44px; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; }
.ff-foot__logo{ color:#fff; }
.ff-foot__col h4{ margin:0 0 14px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; padding-bottom:10px; border-bottom:2px solid rgba(255,255,255,.4); }
.ff-foot__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.ff-foot__col a{ font-size:13px; font-weight:500; letter-spacing:.03em; text-transform:uppercase; color:rgba(255,255,255,.92); text-decoration:none; }
.ff-foot__col a:hover{ color:#fff; }
.ff-foot__legal{ background:var(--fyf-primary-dark); }
.ff-foot__legal-inner{ max-width:var(--fyf-content-max); margin:0 auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.ff-foot__legal p{ margin:0; font-size:11px; line-height:1.5; color:rgba(255,255,255,.85); max-width:820px; }
.ff-foot__legal-links{ display:flex; gap:24px; flex:0 0 auto; }
.ff-foot__legal a{ font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:rgba(255,255,255,.9); text-decoration:none; }
.ff-foot__legal a:hover{ color:#fff; }

/* ---------------- 4) Drawer del carrito ---------------- */
.ff-cart{ position:fixed; inset:0; z-index:130; display:none; }
.ff-cart.is-open{ display:block; }
.ff-cart__overlay{ position:absolute; inset:0; background:rgba(15,23,42,.38); }
.ff-cart__panel{ position:absolute; top:0; right:0; bottom:0; width:min(540px,100%); background:var(--fyf-white); box-shadow:-14px 0 44px rgba(9,78,160,.16); display:flex; flex-direction:column; animation:fyfCartIn .25s ease; }
@keyframes fyfCartIn{ from{ transform:translateX(100%); } to{ transform:none; } }
.ff-cart__head{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 24px; border-bottom:1px solid var(--fyf-border); }
.ff-cart__title{ margin:0; display:flex; align-items:center; gap:10px; font-size:22px; font-weight:700; letter-spacing:-.01em; color:var(--fyf-primary-light); }
.ff-cart__title-icon{ display:inline-flex; }
.ff-cart__close{ width:38px; height:38px; border:0; border-radius:var(--fyf-radius-pill); background:var(--fyf-gray-100); color:var(--fyf-text-strong); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .15s ease; }
.ff-cart__close:hover{ background:var(--fyf-border); }
.ff-cart__scroll{ flex:1 1 auto; overflow-y:auto; padding:20px 24px; display:flex; flex-direction:column; gap:16px; }
.ff-cart__body{ display:flex; flex-direction:column; gap:16px; }
.ff-cart__items{ display:flex; flex-direction:column; gap:16px; }
.ff-cart-item{ display:flex; gap:14px; align-items:flex-start; }
.ff-cart-item__thumb{ flex:0 0 auto; width:58px; height:74px; border-radius:10px; background:linear-gradient(160deg,var(--fyf-gray-100),#e7f0fb); border:1px solid var(--fyf-border); display:flex; align-items:center; justify-content:center; overflow:hidden; padding:6px; box-sizing:border-box; }
.ff-cart-item__thumb img{ max-height:100%; max-width:100%; object-fit:contain; }
.ff-cart-item__main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; }
.ff-cart-item__brand{ font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--fyf-text-muted); }
.ff-cart-item__name{ font-size:13px; font-weight:600; line-height:1.3; text-transform:uppercase; color:var(--fyf-text-strong); }
.ff-cart-item__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; }
.ff-cart-item__line{ font-size:15px; font-weight:700; color:var(--fyf-primary); }
.ff-cart-item__remove{ flex:0 0 auto; width:28px; height:28px; border:0; background:none; color:var(--fyf-text-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:color .15s ease; }
.ff-cart-item__remove:hover{ color:var(--fyf-error); }
.ff-cart__empty{ margin:8px 0; text-align:center; color:var(--fyf-text-muted); font-size:14px; }
.ff-cart__subtotal{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-top:16px; border-top:1px solid var(--fyf-border); }
.ff-cart__subtotal-label{ font-size:15px; font-weight:600; color:var(--fyf-text-strong); }
.ff-cart__subtotal-val{ font-size:22px; font-weight:700; color:var(--fyf-primary); }
.ff-cart__upsell{ margin-top:auto; padding-top:8px; }  /* empujado al fondo del área de scroll */
.ff-cart__upsell-title{ margin:0 0 14px; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--fyf-primary-light); }
.ff-cart__upsell-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ff-cart__upsell-grid .fyf-pcard__media{ height:228px; }
.ff-cart__foot{ flex:0 0 auto; padding:18px 24px; border-top:1px solid var(--fyf-border); }
.ff-cart.is-loading .ff-cart__body{ opacity:.5; pointer-events:none; transition:opacity .15s ease; }

/* ---------------- 5) Modal de login ---------------- */
.ff-login{ position:fixed; inset:0; z-index:100; background:rgba(255,255,255,.8); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); display:none; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:24px; box-sizing:border-box; }
.ff-login.is-open{ display:flex; }
.ff-login__card{ position:relative; width:min(560px,100%); background:var(--fyf-white); border-radius:20px; box-shadow:0 24px 64px rgba(9,78,160,.20); padding:40px 48px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; animation:fyfLoginIn .22s ease; }
@keyframes fyfLoginIn{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
.ff-login__x{ position:absolute; top:14px; right:14px; width:34px; height:34px; border:0; background:var(--fyf-gray-100); border-radius:var(--fyf-radius-pill); color:var(--fyf-text-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .15s ease; }
.ff-login__x:hover{ background:var(--fyf-border); color:var(--fyf-text-strong); }
.ff-login__logo{ display:inline-flex; color:var(--fyf-primary); }
.ff-login__title{ margin:16px 0 24px; font-size:24px; font-weight:700; letter-spacing:-.01em; color:var(--fyf-primary); text-align:center; }
.ff-login__msg{ width:100%; margin-bottom:16px; padding:10px 14px; border-radius:10px; font-size:13px; font-weight:500; text-align:center; box-sizing:border-box; }
.ff-login__msg.is-error{ background:rgba(217,48,37,.08); color:var(--fyf-error); }
.ff-login__msg.is-success{ background:rgba(46,175,93,.10); color:var(--fyf-success); }
.ff-login__msg.is-info{ background:rgba(0,116,203,.08); color:var(--fyf-primary); }
.ff-login__step{ width:100%; }
.ff-login__row{ display:flex; gap:12px; width:100%; flex-wrap:wrap; align-items:center; margin:0; }
.fyf-login-input{ flex:1 1 240px; min-width:0; height:48px; padding:0 20px; border:1px solid var(--fyf-border); border-radius:10px; font-family:inherit; font-size:13px; font-weight:500; letter-spacing:.02em; color:var(--fyf-text-strong); outline:none; background:var(--fyf-white); box-sizing:border-box; }
.fyf-login-input::placeholder{ color:#9aa3ad; }
.fyf-login-input:focus{ border-color:var(--fyf-primary); box-shadow:0 0 0 3px var(--fyf-focus-ring); }
.ff-login__resend{ margin:18px auto 0; background:none; border:0; cursor:pointer; font-family:inherit; font-size:13px; font-weight:500; letter-spacing:.01em; color:var(--fyf-text-muted); display:block; }
.ff-login__resend:hover:not(:disabled){ color:var(--fyf-primary); }
.ff-login__resend:disabled{ cursor:default; opacity:.75; }
.ff-login__links{ margin-top:14px; text-align:center; width:100%; }
.ff-login__links a{ font-size:13px; color:var(--fyf-text-muted); }
.ff-login__links a:hover{ color:var(--fyf-primary); }
.ff-login__back{ background:none; border:0; cursor:pointer; font-family:inherit; font-size:14px; font-weight:600; letter-spacing:.02em; color:var(--fyf-primary); }
.ff-login__back:hover{ color:var(--fyf-primary-dark); }
.ff-login__dev{ width:100%; margin-top:14px; padding:8px 12px; border-radius:8px; background:rgba(246,168,0,.12); color:#8a6100; font-size:12px; text-align:center; box-sizing:border-box; }

/* ---------------- 6) WhatsApp flotante ---------------- */
.ff-wa{ position:fixed; bottom:26px; right:26px; width:58px; height:58px; border-radius:var(--fyf-radius-pill); background:var(--fyf-white); color:var(--fyf-primary); display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--fyf-shadow-lg); z-index:120; transition:transform .15s ease; }
.ff-wa:hover{ transform:translateY(-2px); }

/* ---------------- 7) Responsive ---------------- */
@media (max-width:1024px){
  .ff-hero-promo__grid{ grid-template-columns:1fr; }
  .ff-brands{ grid-template-columns:repeat(4,1fr); }
  .ff-foot__inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width:768px){
  /* Contenedor móvil: 95% de ancho y sin padding lateral (el margen lo da el propio contenedor) */
  :root{ --fyf-content-max:95%; }
  html, body{ overflow-x:clip; } /* guard contra desbordes horizontales */

  /* --- Cabecera móvil: logo · Agregar amigos · buscador · carrito · hamburguesa --- */
  .fyf-nav{ position:relative; border-bottom:3px solid var(--fyf-primary); }
  .fyf-nav__top{ flex-wrap:nowrap; height:auto; gap:8px; padding:10px 0; }
  .fyf-nav__brand svg{ height:42px; }
  .fyf-nav__marcas, .fyf-nav__icon--fav, .fyf-nav__icon--account{ display:none; } /* pasan al off-canvas */
  .fyf-nav__mbtn{ display:inline-flex; }
  .fyf-nav__actions{ flex:1 1 auto; justify-content:flex-end; gap:4px; } /* todo el grupo (CTA incluido) alineado a la derecha */
  .fyf-nav__cta{ height:36px; padding:0 12px; font-size:12px; }
  .fyf-nav__icon{ width:44px; height:44px; }
  .fyf-nav__icon[data-ff-search-toggle] svg{ width:42px; height:42px; }
  .fyf-nav__icon[data-ff-cart-toggle] svg{ width:38px; height:38px; }
  .fyf-nav__sub{ display:none; } /* la barra de categorías vive en el off-canvas */

  /* Buscador deslizante bajo la cabecera (mismo formulario AJAX) */
  .fyf-nav__search{ position:absolute; top:calc(100% + 8px); left:2.5%; right:2.5%; z-index:115; height:48px; background:var(--fyf-white); box-shadow:0 12px 32px rgba(9,78,160,.14); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px); transition:opacity .22s ease, transform .22s ease, visibility .22s; }
  .fyf-nav.is-search-open .fyf-nav__search{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }

  /* --- Secciones: sin padding lateral --- */
  .ff-section--hot{ padding:44px 0 0; }
  .ff-section--brands{ padding:52px 0 0; }
  .ff-section--combos{ padding:32px 0 0; }
  .ff-hero-promo__grid{ padding:44px 0 40px; }
  .ff-legal-strip p{ padding:14px 0; }
  .ff-info__inner{ max-width:var(--fyf-content-max); padding:44px 0; flex-direction:column; text-align:center; gap:28px; }
  .ff-trust__inner{ max-width:var(--fyf-content-max); padding:48px 0; grid-template-columns:1fr; gap:36px; }
  .ff-foot__inner{ padding:44px 0 36px; }
  .ff-foot__legal-inner{ padding:16px 0; flex-direction:column; align-items:flex-start; gap:12px; }
  .ff-cartpage, .ff-favpage, .ff-pdp{ padding-left:0; padding-right:0; }
  .ff-account__head{ padding-left:0; padding-right:0; }
  .ff-account__grid{ padding-left:0; padding-right:0; }

  /* --- Carruseles: touch puro, sin flechas ni padding lateral --- */
  .ff-carousel{ gap:0; }
  .ff-carousel__arrow{ display:none; }
  .ff-track{ padding:4px 0 12px; gap:12px; }
  .ff-track > .fyf-pcard{ flex-basis:calc((100% - 12px) / 2); }

  /* --- Nuestras marcas: scroll horizontal, 1 tarjeta y media visible --- */
  .ff-brands{ display:flex; overflow-x:auto; gap:12px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:8px; }
  .ff-brands::-webkit-scrollbar{ display:none; }
  .ff-brand-tile{ flex:0 0 63%; scroll-snap-align:start; }
}
@media (max-width:560px){
  .ff-brands{ grid-template-columns:repeat(3,1fr); }
  .ff-foot__inner{ grid-template-columns:1fr; }
  .ff-login__card{ padding:32px 22px; }
  /* Tarjetas estrechas (2 por fila): apilar la fila de compra para que COMPRAR nunca se recorte. */
  .fyf-pcard__foot{ flex-wrap:wrap; justify-content:center; }
  .fyf-pcard__foot .fyf-qty{ flex:0 0 auto; }
  .fyf-pcard__add{ flex:1 0 100%; }
}
@media (max-width:400px){
  .ff-brands{ grid-template-columns:repeat(2,1fr); }
}

/* ---------------- 8) Producto individual (PDP) ---------------- */
.ff-pdp-main{ background:var(--fyf-white); }
.ff-pdp{ max-width:var(--fyf-content-max); margin:0 auto; padding:48px 24px 24px; }
.ff-pdp__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:start; }
.ff-pdp__media{ position:relative; background:linear-gradient(160deg,var(--fyf-gray-100),#e7f0fb); border:1px solid var(--fyf-border); border-radius:var(--fyf-radius-xl); min-height:600px; display:flex; align-items:center; justify-content:center; padding:40px; }
.ff-pdp__img{ max-height:520px; max-width:70%; width:auto; object-fit:contain; filter:drop-shadow(0 24px 40px rgba(9,78,160,.18)); }
.ff-pdp__info{ display:flex; flex-direction:column; }
.ff-pdp__title{ margin:0; font-size:clamp(30px,4vw,46px); line-height:1.04; font-weight:700; letter-spacing:-.02em; color:var(--fyf-primary); }
.ff-pdp__subrow{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:12px; }
.ff-pdp__subtitle{ margin:0; font-size:clamp(15px,1.8vw,19px); font-weight:600; color:var(--fyf-text-strong); }
.ff-pdp__disc{ flex:0 0 auto; background:var(--fyf-primary-dark); color:#fff; font-size:13px; font-weight:700; padding:5px 11px; border-radius:var(--fyf-radius-sm); }
.ff-pdp__prices{ margin-top:30px; display:flex; flex-direction:column; gap:8px; }
.ff-pdp__prow{ display:flex; align-items:baseline; gap:14px; }
.ff-pdp__plabel{ font-size:20px; color:var(--fyf-text-muted); }
.ff-pdp__plabel--ff{ font-weight:700; color:var(--fyf-text-strong); }
.ff-pdp__plabel--ff em{ font-style:italic; }
.ff-pdp__ppub{ font-size:18px; color:var(--fyf-text-muted); text-decoration:line-through; }
.ff-pdp__pff{ font-size:32px; font-weight:700; line-height:1; color:var(--fyf-primary); }
.ff-pdp__buy{ display:flex; align-items:center; gap:18px; margin-top:34px; flex-wrap:wrap; }
.ff-pdp-qty{ display:flex; align-items:center; gap:10px; }
.ff-pdp-qty__btn{ position:relative; width:48px; height:48px; border:0; border-radius:12px; background:var(--fyf-primary); color:#fff; cursor:pointer; transition:background .15s ease; }
.ff-pdp-qty__btn:hover{ background:var(--fyf-primary-dark); }
.ff-pdp-qty__btn--dec::before, .ff-pdp-qty__btn--inc::before{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:16px; height:2.4px; border-radius:2px; background:#fff; }
.ff-pdp-qty__btn--inc::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:2.4px; height:16px; border-radius:2px; background:#fff; }
.ff-pdp-qty__val{ min-width:66px; height:48px; padding:0 12px; border:1px solid var(--fyf-primary); border-radius:12px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; font-weight:600; color:var(--fyf-text-strong); box-sizing:border-box; }
.ff-pdp__add{ padding:0 44px; }
.ff-pdp__buy--wc .quantity{ display:none; } /* el formulario variable de WC conserva sus propios controles */
.ff-pdp-tabs{ display:flex; gap:36px; margin-top:48px; border-bottom:1px solid var(--fyf-border); flex-wrap:wrap; }
.ff-pdp-tab{ position:relative; background:none; border:0; cursor:pointer; font-family:inherit; font-size:15px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--fyf-primary); padding:0 2px 14px; }
.ff-pdp-tab.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--fyf-primary); border-radius:3px; }
.ff-pdp-tabcontent{ margin-top:26px; max-width:660px; min-height:120px; }
.ff-pdp__text, .ff-pdp-panel p{ margin:0 0 12px; font-size:clamp(15px,1.6vw,17px); line-height:1.65; color:var(--fyf-text-muted); }
.ff-pdp-panel p:last-child{ margin-bottom:0; }
.ff-pdp__detail{ display:flex; flex-direction:column; font-size:15px; line-height:1.6; }
.ff-pdp__detail-row{ display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--fyf-border); }
.ff-pdp__detail-row--last{ border-bottom:0; }
.ff-pdp__detail-k{ color:var(--fyf-text-muted); }
.ff-pdp__detail-v{ font-weight:600; color:var(--fyf-text-strong); text-align:right; }
.ff-pdp-main .ff-combos-divider{ margin-bottom:48px; } /* el divisor de relacionados de la PDP es 48px (diseño), no los 56px del home */
@media (max-width:900px){
  .ff-pdp__grid{ grid-template-columns:1fr; gap:32px; }
  .ff-pdp__media{ min-height:420px; }
}

/* ---------------- 9) Checkout (estilo Shopify, página desnuda) ---------------- */
.ff-checkout-page{ background:var(--fyf-white); }
.ff-checkout-wrap{ min-height:100vh; }

/* estilos de campo compartidos */
/* !important le gana al estilo propio de WooCommerce .woocommerce form .form-row .input-text (0,3,1). */
.co-field,
.ff-co .form-row .input-text, .ff-co .form-row input.input-text{
  width:100% !important; height:52px !important; padding:0 16px !important; border:1px solid var(--fyf-border) !important; border-radius:8px !important; font-family:var(--fyf-font-sans) !important; font-size:15px !important; font-weight:400 !important; line-height:normal !important; color:var(--fyf-text-strong) !important; outline:none; background:var(--fyf-white) !important; box-sizing:border-box !important; box-shadow:none; transition:border-color .15s ease, box-shadow .15s ease;
}
.co-field::placeholder, .ff-co .form-row .input-text::placeholder{ color:var(--fyf-text-muted) !important; opacity:1; }
.co-field:focus, .ff-co .form-row .input-text:focus{ border-color:var(--fyf-primary) !important; box-shadow:0 0 0 3px var(--fyf-focus-ring) !important; }
.co-selwrap{ position:relative; display:block; border:1px solid var(--fyf-border); border-radius:8px; padding:9px 14px 7px; background:var(--fyf-white); box-sizing:border-box; }
.co-selwrap:focus-within{ border-color:var(--fyf-primary); box-shadow:0 0 0 3px var(--fyf-focus-ring); }
.co-selwrap span{ display:block; font-size:11px; color:var(--fyf-text-muted); letter-spacing:.01em; }
.co-selwrap select{ -webkit-appearance:none; appearance:none; border:0; outline:0; width:100%; background:transparent; font-family:var(--fyf-font-sans); font-size:15px; font-weight:500; color:var(--fyf-text-strong); padding-right:22px; cursor:pointer; }
.co-chev{ position:absolute; right:12px; top:calc(50% + 4px); transform:translateY(-50%); pointer-events:none; color:var(--fyf-text-muted); }

/* maquetación */
.ff-co__grid{ min-height:100vh; display:grid; grid-template-columns:1.12fr .88fr; font-family:var(--fyf-font-sans); }
.ff-co__left{ background:var(--fyf-white); display:flex; justify-content:flex-end; padding:44px 56px 72px; }
.ff-co__inner{ width:100%; max-width:600px; }
.ff-co__logo{ display:inline-flex; color:var(--fyf-primary-light); }

/* stepper */
.ff-co__stepper{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 6px; margin-top:34px; font-size:13px; }
.ff-co__step{ display:inline-flex; align-items:center; gap:7px; color:var(--fyf-text-muted); }
.ff-co__step i{ width:22px; height:22px; border-radius:999px; background:var(--fyf-gray-300); color:var(--fyf-text-strong); font-size:12px; font-weight:700; font-style:normal; display:inline-flex; align-items:center; justify-content:center; }
.ff-co__step--done i, .ff-co__step--active i{ background:var(--fyf-primary); color:#fff; }
.ff-co__step--active{ color:var(--fyf-text-strong); font-weight:700; }
.ff-co__sep{ color:var(--fyf-text-muted); }

.ff-co__h1{ margin:34px 0 18px; font-size:28px; font-weight:700; letter-spacing:-.01em; color:var(--fyf-text-strong); }
.ff-co__h2{ margin:34px 0 16px; font-size:24px; font-weight:700; letter-spacing:-.01em; color:var(--fyf-text-strong); }

/* campos de WC → campos del diseño */
/* Fuerza ancho completo: WooCommerce marca first_name/last_name como .form-row-first/last (width:47%; float),
   lo que dejaba Nombre/Apellidos a media caja dentro del grid. Aquí cada form-row llena su celda. */
.ff-co .form-row{ margin:0; padding:0; width:100% !important; float:none !important; }
.ff-co .form-row > label{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.ff-co .woocommerce-input-wrapper{ display:block; width:100%; }
.ff-co abbr.required{ border:0; text-decoration:none; color:var(--fyf-primary); }
.ff-co__row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ff-co__row3{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; align-items:stretch; }
.ff-co-mt{ margin-top:14px; }
.ff-co__row3 .co-selwrap, .ff-co__row3 .form-row{ height:100%; display:flex; flex-direction:column; justify-content:center; }

/* toggle de la línea 2 de la dirección */
.ff-co__addr2-toggle{ display:inline-flex; align-items:center; gap:10px; margin:14px 2px 0; background:none; border:0; cursor:pointer; font-family:inherit; font-size:14px; color:var(--fyf-text-muted); }
.ff-co__addr2-toggle:hover{ color:var(--fyf-primary); }
.ff-co__radio{ width:16px; height:16px; border-radius:999px; border:2px solid var(--fyf-text-muted); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.ff-co__radio::after{ content:""; width:6px; height:6px; border-radius:999px; background:var(--fyf-text-muted); }
.ff-co__addr2[hidden]{ display:none; }
.ff-co__addr2{ margin-top:14px; }

/* teléfono con bandera */
.ff-co__phone{ display:flex; align-items:stretch; gap:0; border:1px solid var(--fyf-border); border-radius:8px; overflow:hidden; }
.ff-co__phone:focus-within{ border-color:var(--fyf-primary); box-shadow:0 0 0 3px var(--fyf-focus-ring); }
.ff-co__flag{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:0 12px; background:var(--fyf-gray-100); border-right:1px solid var(--fyf-border); }
.ff-co__flag-chev{ color:var(--fyf-text-muted); }
.ff-co__phone-input{ flex:1 1 auto; min-width:0; height:52px; border:0 !important; outline:0; padding:0 16px; font-family:var(--fyf-font-sans); font-size:15px; color:var(--fyf-text-strong); background:var(--fyf-white); box-shadow:none !important; }

/* acciones */
.ff-co__actions{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:34px; flex-wrap:wrap; }
.ff-co__back{ font-size:14px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--fyf-primary); }
.ff-co__back:hover{ color:var(--fyf-primary-dark); }
.ff-co__submit{ border-radius:var(--fyf-radius-pill); padding:0 30px; }

/* derecha — resumen */
.ff-co__right{ background:var(--fyf-primary-light); color:#fff; display:flex; justify-content:flex-start; padding:60px 56px; }
.ff-co__right-inner{ width:100%; max-width:500px; }
.ff-co__delivery{ background:var(--fyf-white); border-radius:16px; padding:22px 26px; box-shadow:0 10px 30px rgba(9,78,160,.12); }
.ff-co__delivery-h{ font-size:15px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--fyf-text-body); }
.ff-co__delivery-d{ margin-top:4px; font-size:15px; line-height:1.4; letter-spacing:.01em; text-transform:uppercase; color:var(--fyf-text-muted); }
.ff-co__products{ margin-top:34px; display:flex; flex-direction:column; gap:20px; }
.ff-co__product{ display:flex; align-items:center; gap:20px; }
.ff-co__thumb{ flex:0 0 auto; width:78px; height:118px; border-radius:12px; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; overflow:hidden; padding:8px; box-sizing:border-box; }
.ff-co__thumb img{ max-height:100%; max-width:100%; object-fit:contain; }
.ff-co__pinfo{ flex:1 1 auto; min-width:0; }
.ff-co__pname{ font-size:17px; font-weight:700; line-height:1.25; text-transform:uppercase; color:#fff; }
.ff-co__punit{ margin-top:4px; font-size:15px; font-weight:600; color:#fff; }
.ff-co-qty{ display:inline-flex; align-items:center; border:1px solid rgba(255,255,255,.5); border-radius:8px; overflow:hidden; margin-top:12px; }
.ff-co-qty__btn{ position:relative; width:32px; height:32px; border:0; background:rgba(255,255,255,.14); cursor:pointer; }
.ff-co-qty__btn:hover{ background:rgba(255,255,255,.28); }
.ff-co-qty__btn--dec::before, .ff-co-qty__btn--inc::before{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:11px; height:2px; border-radius:2px; background:#fff; }
.ff-co-qty__btn--inc::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:2px; height:11px; border-radius:2px; background:#fff; }
.ff-co-qty__val{ min-width:38px; text-align:center; font-size:15px; font-weight:600; color:#fff; }
.ff-co__promo-line{ margin-top:26px; font-size:15px; color:#fff; }
.ff-co__promo-line a{ color:#fff; font-weight:700; text-decoration:underline; }
.ff-co__promo-form{ display:flex; gap:10px; margin-top:12px; }
.ff-co__promo-form[hidden]{ display:none; }
.ff-co__promo-input{ flex:1 1 auto; height:46px !important; border:0 !important; box-shadow:none !important; }
.ff-co__promo-btn{ height:46px; background:#fff; --_bg:#fff; }
.ff-co__totals{ margin-top:30px; }
.ff-co__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 18px; }
.ff-co__row + .ff-co__row{ margin-top:14px; }
.ff-co__row span{ font-size:16px; color:#fff; }
.ff-co__row span:last-child{ font-weight:600; }
.ff-co__row--tint{ padding:14px 18px; background:rgba(255,255,255,.16); border-radius:10px; }
.ff-co__row--coupon span{ font-size:15px; }
.ff-co__row--total{ margin-top:22px; padding:16px 18px; }
.ff-co__row--total span:first-child{ font-size:17px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; }
.ff-co__row--total span:last-child{ font-size:22px; font-weight:700; }
/* WC renderiza el pago + place-order vía un hook después de nuestro review — oculto por
   diseño (este es el paso "Información" de Shopify). !important le gana al show() inline de WC. */
.ff-co #payment, .ff-co .woocommerce-checkout-payment, .ff-co__payment{ display:none !important; }

/* Restricción geográfica (PRD §9): nota de cobertura + fila de IVA + pantalla de pago fallido */
.ff-co__cobertura{ margin:10px 2px 0; font-size:12px; line-height:1.5; color:var(--fyf-text-muted); }
.ff-co__row--tax span{ font-size:13px; color:rgba(255,255,255,.85); }
.ff-pago-fallido{ max-width:640px; margin:40px auto; padding:28px 30px; border:1px solid var(--fyf-error); border-radius:var(--fyf-radius-lg); background:rgba(217,48,37,.05); }
.ff-pago-fallido h2{ margin:0 0 10px; font-size:22px; color:var(--fyf-error); }
.ff-pago-fallido p{ margin:0 0 12px; color:var(--fyf-text-body); line-height:1.6; }

.ff-co__step--link{ text-decoration:none; cursor:pointer; }
.ff-co__step--link:hover{ color:var(--fyf-text-strong); }
@media (max-width:860px){
  .ff-co__grid{ grid-template-columns:1fr; }
  .ff-co__left{ order:2; justify-content:flex-start; padding:36px 24px 56px; }
  .ff-co__right{ order:1; padding:36px 24px; }
  .ff-co__row2, .ff-co__row3{ grid-template-columns:1fr; }
}

/* ---------------- 10) Página de carrito ---------------- */
/* El diseño ya trae su propio título "Tu carrito"; ocultamos el título de página por defecto del tema */
.woocommerce-cart .page-header, .ff-favoritos-page .page-header{ display:none; }
.ff-cartpage{ max-width:var(--fyf-content-max); margin:0 auto; padding:48px 24px 72px; }
.ff-cartpage__grid{ display:grid; grid-template-columns:1fr 360px; gap:48px; align-items:start; }
.ff-cartpage__title{ display:flex; align-items:center; gap:12px; margin:0 0 24px; font-size:clamp(24px,3.5vw,32px); font-weight:700; letter-spacing:-.01em; color:var(--fyf-primary-light); }
.ff-cartpage__title-icon{ display:inline-flex; }
.ff-cartpage__count{ font-size:15px; font-weight:600; color:var(--fyf-text-muted); }
.ff-cartpage__items{ display:flex; flex-direction:column; border-top:1px solid var(--fyf-border); }
.ff-cartpage__item{ display:grid; grid-template-columns:96px 1fr auto auto auto; align-items:center; gap:20px; padding:20px 0; border-bottom:1px solid var(--fyf-border); }
.ff-cartpage__thumb{ width:96px; height:120px; border-radius:12px; background:linear-gradient(160deg,var(--fyf-gray-100),#e7f0fb); border:1px solid var(--fyf-border); display:flex; align-items:center; justify-content:center; overflow:hidden; padding:8px; box-sizing:border-box; }
.ff-cartpage__thumb img{ max-height:100%; max-width:100%; object-fit:contain; }
.ff-cartpage__info{ min-width:0; display:flex; flex-direction:column; gap:5px; }
.ff-cartpage__brand{ font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--fyf-text-muted); }
.ff-cartpage__name{ font-size:15px; font-weight:600; line-height:1.3; text-transform:uppercase; color:var(--fyf-text-strong); }
.ff-cartpage__name a{ color:inherit; }
.ff-cartpage__unit{ font-size:13px; color:var(--fyf-text-muted); }
.ff-cartpage__line{ font-size:17px; font-weight:700; color:var(--fyf-primary); white-space:nowrap; }
.ff-cartpage__remove{ width:32px; height:32px; border:0; background:none; color:var(--fyf-text-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:color .15s ease; }
.ff-cartpage__remove:hover{ color:var(--fyf-error); }
.ff-cartpage__continue{ display:inline-block; margin-top:24px; font-size:14px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--fyf-primary); }
.ff-cartpage__summary{ position:sticky; top:24px; background:var(--fyf-surface); border:1px solid var(--fyf-border); border-radius:var(--fyf-radius-lg); padding:26px 24px; box-shadow:var(--fyf-shadow-sm); }
.ff-cartpage__summary-title{ margin:0 0 18px; font-size:18px; font-weight:700; color:var(--fyf-text-strong); }
.ff-cartpage__row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.ff-cartpage__row span:first-child{ font-size:15px; color:var(--fyf-text-body); }
.ff-cartpage__subtotal{ font-size:22px; font-weight:700; color:var(--fyf-primary); }
.ff-cartpage__note{ margin:10px 0 20px; font-size:13px; line-height:1.5; color:var(--fyf-text-muted); }
.ff-cartpage__empty{ text-align:center; padding:80px 24px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.ff-cartpage__empty-icon{ color:var(--fyf-primary-light); opacity:.5; }
.ff-cartpage__empty-title{ margin:8px 0 0; font-size:26px; font-weight:700; color:var(--fyf-text-strong); }
.ff-cartpage__empty-text{ margin:0 0 12px; color:var(--fyf-text-muted); }
@media (max-width:860px){
  .ff-cartpage__grid{ grid-template-columns:1fr; gap:32px; }
  .ff-cartpage__item{ grid-template-columns:72px 1fr auto; grid-template-areas:"thumb info remove" "thumb qty line"; column-gap:14px; row-gap:12px; }
  .ff-cartpage__thumb{ grid-area:thumb; width:72px; height:96px; }
  .ff-cartpage__info{ grid-area:info; }
  .ff-cartpage__qty{ grid-area:qty; }
  .ff-cartpage__line{ grid-area:line; text-align:right; align-self:center; }
  .ff-cartpage__remove{ grid-area:remove; justify-self:end; }
}

/* ---------------- 11) Favoritos (lista de deseos) ---------------- */
.fyf-pcard{ position:relative; }
/* Botón de corazón (base, compartido por tarjeta y PDP) */
.fyf-fav{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; background:none; cursor:pointer; color:var(--fyf-text-muted); transition:color .15s ease, transform .1s ease, background .15s ease, border-color .15s ease; -webkit-tap-highlight-color:transparent; }
.fyf-fav:hover{ color:var(--fyf-primary); }
.fyf-fav.is-active{ color:var(--fyf-primary); }
.fyf-fav:active{ transform:scale(.9); }
/* En la tarjeta: SVG puro ARRIBA A LA IZQUIERDA (opuesto a .fyf-pcard__disc), sin borde ni fondo */
.fyf-pcard__fav{ position:absolute; top:var(--fyf-space-16); left:var(--fyf-space-16); z-index:3; padding:2px; }
.fyf-pcard__fav svg{ width:54px; height:54px; }
/* En la PDP: botón con etiqueta */
.ff-pdp__fav{ margin-top:16px; padding:10px 18px; border:1px solid var(--fyf-border); border-radius:var(--fyf-radius-md); font-size:14px; font-weight:600; color:var(--fyf-text-muted); }
.ff-pdp__fav:hover{ border-color:var(--fyf-primary); color:var(--fyf-primary); }
.ff-pdp__fav.is-active{ border-color:var(--fyf-primary); color:var(--fyf-primary); background:rgba(0,116,203,.06); }

/* Página de favoritos */
.ff-favpage{ max-width:var(--fyf-content-max); margin:0 auto; padding:40px 24px 72px; }
.ff-favpage__title{ display:flex; align-items:center; gap:12px; margin:0 0 28px; font-size:clamp(24px,3.5vw,32px); font-weight:700; letter-spacing:-.01em; color:var(--fyf-primary-light); }
.ff-favpage__title-icon{ display:inline-flex; color:var(--fyf-primary); }
.ff-favpage__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:20px; align-items:start; }
.ff-favpage__grid[hidden]{ display:none; }
.ff-favpage__empty{ text-align:center; padding:70px 24px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.ff-favpage__empty[hidden]{ display:none; }
.ff-favpage__empty-icon{ color:var(--fyf-primary-light); opacity:.5; }
.ff-favpage__empty-title{ margin:8px 0 0; font-size:24px; font-weight:700; color:var(--fyf-text-strong); }
.ff-favpage__empty-text{ margin:0 0 12px; color:var(--fyf-text-muted); }

/* ---------------- 12) Mi cuenta (Amigos.dc.html) ---------------- */
/* El tema padre limita .site-main (500–1140px); las vistas de tienda/cuenta usan
   el ancho del diseño (90% de la ventana), así que liberamos el contenedor. */
.woocommerce-account .site-main, .woocommerce-cart .site-main, .ff-favoritos-page .site-main{ max-width:none !important; padding-inline:0 !important; }
/* Cabecera centrada */
.ff-account{ padding-bottom:80px; }
.ff-account__head{ text-align:center; padding:48px 24px 8px; }
.ff-account__eyebrow{ font-size:clamp(14px,1.8vw,19px); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--fyf-primary-light); }
.ff-account__title{ margin:8px 0 0; font-size:clamp(26px,4vw,36px); font-weight:700; letter-spacing:-.01em; text-transform:uppercase; color:var(--fyf-primary-dark); }
/* Cuadrícula sidebar + contenido */
.ff-account__grid{ max-width:var(--fyf-content-max); margin:0 auto; padding:32px 24px 0; display:grid; grid-template-columns:280px 1fr; gap:40px; align-items:start; }
/* Neutraliza el layout flotante de WooCommerce (nav 30% / contenido 68%) y los
   subrayados de enlaces que impone el tema padre dentro de .page-content. */
.ff-account .woocommerce-MyAccount-navigation, .ff-account__nav{ width:auto !important; float:none !important; }
.ff-account .woocommerce-MyAccount-content, .ff-account__content{ width:auto !important; float:none !important; }
.ff-account a{ text-decoration:none; }
/* Sidebar azul */
.ff-account__nav{ background:var(--fyf-primary); border-radius:var(--fyf-radius-lg); padding:10px 22px; color:#fff; align-self:start; }
.ff-account__nav-item{ display:flex; align-items:center; gap:14px; padding:16px 4px; font-size:15px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:#fff; border-bottom:1px solid rgba(255,255,255,.22); transition:opacity .15s ease; }
.ff-account__nav-item:last-child{ border-bottom:0; }
.ff-account__nav-item:hover, .ff-account__nav-item:focus{ color:#fff; opacity:.8; }
.ff-account__nav-item.is-active{ font-weight:700; }
.ff-account__nav-icon{ display:inline-flex; flex:0 0 auto; }
/* El título de página por defecto del tema sobra aquí (la sección trae su propia cabecera) */
.woocommerce-account .page-header{ display:none; }

/* Formulario de invitación (Mi círculo) */
.am-input{ width:100%; height:52px; padding:0 20px; border:1px solid var(--fyf-border); border-radius:10px; font-family:var(--fyf-font-sans); font-size:14px; letter-spacing:.02em; text-transform:uppercase; color:var(--fyf-text-strong); outline:none; background:var(--fyf-white); box-sizing:border-box; }
.am-input::placeholder{ color:var(--fyf-text-muted); }
.am-input:focus{ border-color:var(--fyf-primary); box-shadow:0 0 0 3px var(--fyf-focus-ring); }
.ff-circle__form{ display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:14px; align-items:center; }
.ff-circle__send{ height:52px; padding:0 42px; }
.ff-circle__grid{ margin-top:30px; display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }

/* Tarjeta de amigo (portada 1:1 del design system) */
.fyf-fcard{ display:flex; flex-direction:column; width:100%; box-sizing:border-box; background:var(--fyf-surface); border:2px solid var(--fyf-primary-light); border-radius:var(--fyf-radius-lg); overflow:hidden; font-family:var(--fyf-font-sans); transition:box-shadow .18s ease, transform .18s ease; }
.fyf-fcard:hover{ box-shadow:var(--fyf-shadow-md); transform:translateY(-2px); }
.fyf-fcard__top{ display:flex; flex-direction:column; align-items:center; gap:var(--fyf-space-8); padding:var(--fyf-space-24) var(--fyf-space-16) var(--fyf-space-16); background:var(--fyf-white); flex:1 1 auto; }
.fyf-fcard__label{ font-size:var(--fyf-body-size); font-weight:var(--fyf-weight-bold); letter-spacing:.02em; text-transform:uppercase; color:var(--fyf-primary); }
.fyf-fcard__glass{ color:var(--fyf-primary-light); }
.fyf-fcard__band{ background:var(--fyf-primary-light); color:#fff; text-align:center; padding:var(--fyf-space-16) var(--fyf-space-16); font-size:var(--fyf-h3-size); line-height:1.15; font-weight:var(--fyf-weight-bold); text-transform:uppercase; letter-spacing:.02em; }
.fyf-fcard__foot{ display:flex; align-items:center; justify-content:center; gap:var(--fyf-space-8); background:var(--fyf-primary-dark); color:#fff; padding:12px var(--fyf-space-16); font-size:var(--fyf-body-size); font-weight:var(--fyf-weight-bold); text-transform:uppercase; letter-spacing:.04em; }
.fyf-fcard__dot{ width:12px; height:12px; border-radius:50%; background:var(--_d); flex:0 0 auto; }
.fyf-fcard--active{ --_d:var(--fyf-status-active); }
.fyf-fcard--pending{ --_d:var(--fyf-status-pending); }
.fyf-fcard--invited{ --_d:var(--fyf-status-invited); }
.fyf-fcard--inactive{ --_d:var(--fyf-status-inactive); }
/* Tarjeta "Invitar amigo" */
.fyf-invite{ display:flex; flex-direction:column; width:100%; box-sizing:border-box; cursor:pointer; background:var(--fyf-surface); border:2px solid var(--fyf-primary-light); border-radius:var(--fyf-radius-lg); overflow:hidden; font-family:var(--fyf-font-sans); transition:box-shadow .18s ease, transform .18s ease; }
.fyf-invite:hover{ box-shadow:var(--fyf-shadow-md); transform:translateY(-2px); }
.fyf-invite__top{ display:flex; flex-direction:column; align-items:center; gap:var(--fyf-space-8); padding:var(--fyf-space-24) var(--fyf-space-16) var(--fyf-space-16); background:var(--fyf-white); flex:1 1 auto; }
.fyf-invite__label{ font-size:var(--fyf-body-size); font-weight:var(--fyf-weight-bold); letter-spacing:.02em; text-transform:uppercase; color:var(--fyf-primary); }
.fyf-invite__glass{ color:var(--fyf-primary-light); }
.fyf-invite__band{ background:var(--fyf-primary-light); color:#fff; text-align:center; padding:var(--fyf-space-16); font-size:var(--fyf-h3-size); line-height:1.15; font-weight:var(--fyf-weight-bold); text-transform:uppercase; letter-spacing:.02em; }

/* Modal de invitación (Mi círculo) — mismo lenguaje que el modal de login */
.ff-invmodal{ position:fixed; inset:0; z-index:110; background:rgba(255,255,255,.8); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); display:none; align-items:center; justify-content:center; padding:24px; box-sizing:border-box; }
.ff-invmodal.is-open{ display:flex; }
.ff-invmodal__card{ position:relative; width:min(520px,100%); background:var(--fyf-white); border-radius:20px; box-shadow:0 24px 64px rgba(9,78,160,.20); padding:40px 44px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; text-align:center; animation:fyfLoginIn .22s ease; }
.ff-invmodal__close{ position:absolute; top:16px; right:16px; width:34px; height:34px; border:0; border-radius:999px; background:none; color:var(--fyf-text-muted); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:color .15s ease, background .15s ease; }
.ff-invmodal__close:hover{ color:var(--fyf-text-strong); background:var(--fyf-gray-100); }
.ff-invmodal__label{ font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fyf-primary); }
.ff-invmodal__label:empty{ display:none; }
.ff-invmodal__title{ margin:6px 0 22px; font-size:22px; font-weight:700; letter-spacing:-.01em; text-transform:uppercase; color:var(--fyf-primary-dark); }
.ff-invmodal__form{ width:100%; display:flex; flex-direction:column; gap:14px; }

/* Soporte en la pantalla de acceso (PRD §8): WhatsApp + teléfono dentro del modal */
.ff-login__soporte{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:22px; padding-top:16px; border-top:1px solid var(--fyf-border); font-size:13px; color:var(--fyf-text-muted); width:100%; }
.ff-login__soporte-btn{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid var(--fyf-border); border-radius:var(--fyf-radius-pill); font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--fyf-primary); background:var(--fyf-white); transition:border-color .15s ease, color .15s ease; }
.ff-login__soporte-btn:hover{ border-color:var(--fyf-primary); color:var(--fyf-primary-dark); }

/* Escritorio: saludo + accesos rápidos */
.ff-dash__hello{ margin:0 0 24px; font-size:16px; line-height:1.6; color:var(--fyf-text-body); }
.ff-dash__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:16px; }
.ff-dash__card{ display:flex; flex-direction:column; gap:8px; padding:24px 20px; background:var(--fyf-surface); border:2px solid var(--fyf-primary-light); border-radius:var(--fyf-radius-lg); color:var(--fyf-text-strong); transition:box-shadow .18s ease, transform .18s ease; }
.ff-dash__card:hover{ box-shadow:var(--fyf-shadow-md); transform:translateY(-2px); color:var(--fyf-text-strong); }
.ff-dash__card-icon{ color:var(--fyf-primary); display:inline-flex; }
.ff-dash__card-label{ font-size:15px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--fyf-primary-dark); }
.ff-dash__card-desc{ font-size:13px; color:var(--fyf-text-muted); line-height:1.45; }

/* Cupones */
.ff-coupons{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:16px; }
.ff-coupon{ display:flex; align-items:stretch; border:2px dashed var(--fyf-primary-light); border-radius:var(--fyf-radius-lg); overflow:hidden; background:var(--fyf-surface); }
.ff-coupon__amount{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px 20px; background:var(--fyf-primary); color:#fff; font-size:24px; font-weight:700; line-height:1; }
.ff-coupon__amount span{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; opacity:.85; margin-top:4px; }
.ff-coupon__info{ display:flex; flex-direction:column; gap:4px; justify-content:center; padding:14px 18px; min-width:0; }
.ff-coupon__code{ font-size:16px; font-weight:700; letter-spacing:.04em; color:var(--fyf-primary-dark); }
.ff-coupon__desc{ font-size:13px; color:var(--fyf-text-body); }
.ff-coupon__exp{ font-size:12px; color:var(--fyf-text-muted); }

/* Estado vacío genérico de la cuenta */
.ff-account__empty{ text-align:center; padding:50px 24px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.ff-account__empty-icon{ color:var(--fyf-primary-light); opacity:.5; }
.ff-account__empty-title{ margin:8px 0 0; font-size:24px; font-weight:700; color:var(--fyf-text-strong); }
.ff-account__empty-text{ margin:0 0 12px; max-width:480px; color:var(--fyf-text-muted); }

/* Contenido estándar de WooCommerce dentro de la cuenta, al estilo de la web */
.ff-account__content{ min-width:0; font-family:var(--fyf-font-sans); }
.ff-account__content h2, .ff-account__content h3, .ff-account__content legend{ font-size:18px; font-weight:700; letter-spacing:.01em; text-transform:uppercase; color:var(--fyf-primary-dark); }
/* Tablas (pedidos, detalle de pedido) */
.ff-account__content table.shop_table{ width:100%; border:1px solid var(--fyf-border) !important; border-radius:var(--fyf-radius-lg); border-collapse:separate; border-spacing:0; overflow:hidden; font-size:14px; }
.ff-account__content table.shop_table th, .ff-account__content table.shop_table td{ border:0 !important; border-bottom:1px solid var(--fyf-border) !important; padding:14px 16px; text-align:left; vertical-align:middle; background:var(--fyf-white); }
.ff-account__content table.shop_table thead th{ background:var(--fyf-gray-100); font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--fyf-text-muted); }
.ff-account__content table.shop_table tbody tr:last-child td, .ff-account__content table.shop_table tbody tr:last-child th{ border-bottom:0 !important; }
.ff-account__content table.shop_table tbody tr:hover > td{ background:var(--fyf-gray-100); }
.ff-account__content .woocommerce-orders-table__cell-order-number a{ font-weight:700; }
/* Botones de WC (ver pedido, guardar, paginación) */
.ff-account__content .button, .ff-account__content button[type="submit"], .ff-account__content .woocommerce-button{ display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 24px; border:0; border-radius:var(--fyf-radius-pill); background:var(--fyf-primary) !important; color:#fff !important; font-family:var(--fyf-font-sans); font-size:14px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; cursor:pointer; transition:background .15s ease; }
.ff-account__content .button:hover, .ff-account__content button[type="submit"]:hover, .ff-account__content .woocommerce-button:hover{ background:var(--fyf-primary-dark) !important; color:#fff !important; }
/* Formularios (detalles de la cuenta, direcciones) */
.ff-account__content .form-row{ margin:0 0 16px; padding:0; width:100% !important; float:none !important; }
.ff-account__content .form-row label{ display:block; margin:0 0 6px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--fyf-text-muted); }
.ff-account__content .form-row .input-text, .ff-account__content .form-row select, .ff-account__content .form-row input[type="password"]{ width:100% !important; height:52px !important; padding:0 20px !important; border:1px solid var(--fyf-border) !important; border-radius:10px !important; font-family:var(--fyf-font-sans) !important; font-size:15px !important; color:var(--fyf-text-strong) !important; background:var(--fyf-white) !important; box-sizing:border-box !important; outline:none; box-shadow:none; transition:border-color .15s ease, box-shadow .15s ease; }
.ff-account__content .form-row .input-text:focus, .ff-account__content .form-row select:focus{ border-color:var(--fyf-primary) !important; box-shadow:0 0 0 3px var(--fyf-focus-ring) !important; }
.ff-account__content fieldset{ margin:26px 0 0; padding:0; border:0; }
.ff-account__content fieldset legend{ margin-bottom:14px; padding:0; }
.ff-account__content .show-password-input{ top:14px; right:14px; }
/* Direcciones: tarjetas */
.ff-account__content .woocommerce-Addresses{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
/* El clearfix ::before/::after de WC (display:table) se volvería una celda fantasma del grid */
.ff-account__content .woocommerce-Addresses::before, .ff-account__content .woocommerce-Addresses::after{ content:none !important; }
.ff-account__content .woocommerce-Address{ width:auto !important; float:none !important; border:2px solid var(--fyf-primary-light); border-radius:var(--fyf-radius-lg); padding:20px 22px; background:var(--fyf-surface); }
.ff-account__content .woocommerce-Address-title{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.ff-account__content .woocommerce-Address-title .edit{ font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--fyf-primary); }
.ff-account__content .woocommerce-Address address{ margin-top:10px; font-style:normal; line-height:1.7; color:var(--fyf-text-body); }
/* Avisos dentro de la cuenta */
.ff-account__content .woocommerce-message, .ff-account__content .woocommerce-info, .ff-account__content .woocommerce-error{ list-style:none; margin:0 0 20px; padding:14px 18px; border:1px solid var(--fyf-primary-light); border-radius:var(--fyf-radius-md); background:rgba(0,116,203,.06); color:var(--fyf-text-strong); font-size:14px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
/* El icono de la fuente de WooCommerce no carga aquí y pisa el texto: fuera */
.ff-account__content .woocommerce-message::before, .ff-account__content .woocommerce-info::before, .ff-account__content .woocommerce-error::before{ content:none !important; display:none !important; }
.ff-account__content .woocommerce-error{ border-color:var(--fyf-error); background:rgba(217,48,37,.06); }
.ff-account__content .woocommerce-message a, .ff-account__content .woocommerce-info a{ font-weight:700; }
/* Los botones dentro de avisos (p. ej. "Explorar los productos") también en pill primario */
.ff-account__content .woocommerce-info a.button, .ff-account__content .woocommerce-message a.button, .ff-account__content a.woocommerce-Button{ background:var(--fyf-primary) !important; color:#fff !important; margin-left:auto; }
.ff-account__content .woocommerce-info a.button:hover, .ff-account__content .woocommerce-message a.button:hover, .ff-account__content a.woocommerce-Button:hover{ background:var(--fyf-primary-dark) !important; }

/* Responsive Mi cuenta (breakpoints del prototipo) */
@media (max-width:1024px){
  .ff-account__grid{ grid-template-columns:1fr; }
  .ff-circle__grid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:768px){
  .ff-circle__grid{ grid-template-columns:repeat(3,1fr); }
  .ff-circle__form{ grid-template-columns:1fr; }
  .ff-account__content .woocommerce-Addresses{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .ff-circle__grid{ grid-template-columns:repeat(2,1fr); }
}