/* =========================================================================
   FERNS MODA — componentes fm-* (briefing/design-system/components.css)
   Solo var(--fm-*) y tokens de la base: sin colores escritos a mano.
   Parte 1: tipografía y utilidades · 2: botones y enlaces · 3: formularios · 4: avisos
            5: barra de anuncios, header y menú lateral · 6: footer · 7: ajustes sobre la base
   ========================================================================= */

/* ---------- 1. Tipografía y utilidades ---------- */
.fm-display { font-family: var(--fm-font-display); font-weight: var(--fm-fw-regular); letter-spacing: var(--fm-ls-display); line-height: var(--fm-lh-snug); margin: 0; }
.fm-hero-title { font-size: var(--fm-fs-hero); text-transform: uppercase; line-height: var(--fm-lh-tight); font-weight: var(--fm-fw-light); }
.fm-h1 { font-size: var(--fm-fs-h1); }
.fm-h2 { font-size: var(--fm-fs-h2); text-transform: uppercase; }
.fm-h3 { font-family: var(--fm-font-display); font-weight: var(--fm-fw-regular); font-size: var(--fm-fs-h3); line-height: var(--fm-lh-snug); letter-spacing: var(--fm-ls-display); }
.fm-label {
  font-family: var(--fm-font-sans); font-size: var(--fm-fs-label); font-weight: var(--fm-fw-semibold);
  text-transform: uppercase; letter-spacing: var(--fm-ls-label); line-height: 1.4;
}
.fm-micro { font-size: var(--fm-fs-micro); font-weight: var(--fm-fw-semibold); text-transform: uppercase; letter-spacing: var(--fm-ls-wide); }
.fm-muted { color: var(--fm-text-muted); }
.fm-container { width: 100%; max-width: var(--fm-container); margin-inline: auto; padding-inline: var(--fm-gutter); }

/* ---------- 2. Botones y enlaces ---------- */
.fm-btn,
body .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--fm-space-2);
  min-height: var(--fm-btn-h); height: auto; padding: 0 var(--fm-btn-px); border-radius: var(--fm-radius-0);
  font-family: var(--fm-font-sans); font-size: var(--fm-fs-label); font-weight: var(--fm-fw-semibold);
  text-transform: uppercase; letter-spacing: var(--fm-ls-label); line-height: 1.2;
  position: relative; overflow: hidden; isolation: isolate; cursor: pointer;
  transition: color var(--fm-dur-base) var(--fm-ease-soft), border-color var(--fm-dur-base);
}
/* relleno que sube desde abajo en hover */
.fm-btn::before,
body .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleY(0); transform-origin: bottom; transition: transform var(--fm-dur-base) var(--fm-ease-out); }
.fm-btn:hover::before,
body .btn:hover::before { transform: scaleY(1); }

.fm-btn--primary,
body .btn-primary, body .btn-dark {
  background: var(--fm-ink-900); color: var(--fm-white); border: 0; box-shadow: none; transform: none;
}
.fm-btn--primary::before, body .btn-primary::before, body .btn-dark::before { background: var(--fm-ink-700); }
.fm-btn--primary:hover, body .btn-primary:hover, body .btn-dark:hover { background: var(--fm-ink-900); color: var(--fm-white); box-shadow: none; transform: none; }

.fm-btn--accent { background: var(--fm-accent); color: var(--fm-ink-900); border: 0; }
.fm-btn--accent::before { background: var(--fm-sand-100); }

.fm-btn--outline,
body .btn-secondary {
  background: transparent; border: 1px solid var(--fm-border-strong); color: var(--fm-ink-900);
}
.fm-btn--outline::before, body .btn-secondary::before { background: var(--fm-ink-900); }
.fm-btn--outline:hover, body .btn-secondary:hover { color: var(--fm-white); background: transparent; }

body .btn-outline-light { background: transparent; border: 1px solid currentColor; color: var(--fm-sand-100); }
body .btn-outline-light::before { background: var(--fm-sand-100); }
body .btn-outline-light:hover { color: var(--fm-ink-900); border-color: var(--fm-sand-100); background: transparent; }

.fm-btn--block { width: 100%; }
.fm-btn:disabled, body .btn:disabled, body .btn[disabled] { opacity: .4; pointer-events: none; }

/* Botones de WooCommerce con el estilo primario (Tinta) */
body .single_add_to_cart_button, body .checkout-button, body #place_order,
body .woocommerce a.button.alt, body .woocommerce button.button.alt, body .woocommerce #respond input#submit.alt {
  background: var(--fm-ink-900); color: var(--fm-sand-100); border: 0; border-radius: var(--fm-radius-0); box-shadow: none; transform: none;
  font-family: var(--fm-font-sans); font-size: var(--fm-fs-label); font-weight: var(--fm-fw-semibold); text-transform: uppercase; letter-spacing: var(--fm-ls-label);
  transition: background var(--fm-dur-base) var(--fm-ease-soft);
}
body .single_add_to_cart_button:hover, body .checkout-button:hover, body #place_order:hover,
body .woocommerce a.button.alt:hover, body .woocommerce button.button.alt:hover { background: var(--fm-ink-700); color: var(--fm-white); box-shadow: none; transform: none; }
body .single_add_to_cart_button.disabled, body .single_add_to_cart_button:disabled, body .single_add_to_cart_button.wc-variation-selection-needed { opacity: .4; }

/* Enlace con subrayado que crece */
.fm-link {
  background: linear-gradient(currentColor 0 0) 0 100% / 0 1px no-repeat;
  transition: background-size var(--fm-dur-base) var(--fm-ease-out); padding-bottom: 2px;
}
.fm-link:hover, .fm-link.is-active { background-size: 100% 1px; }

/* Enlaces de acción de la base: mismas letras que el sistema */
body .btn-link, body .sec-link {
  font-family: var(--fm-font-sans); font-size: var(--fm-fs-label); font-weight: var(--fm-fw-semibold);
  text-transform: uppercase; letter-spacing: var(--fm-ls-label); color: var(--fm-ink-900);
}
body .btn-link:hover, body .sec-link:hover { color: var(--fm-ink-900); }
body .btn-link--light { color: var(--fm-sand-100); }

/* Flechas redondas */
.fm-arrow { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--fm-radius-pill); background: var(--fm-ink-100); transition: background var(--fm-dur-fast); }
.fm-arrow:hover, .fm-arrow.is-active { background: var(--fm-ink-900); color: var(--fm-sand-100); }

/* Chips */
.fm-chip { display: inline-flex; align-items: center; height: 32px; padding-inline: var(--fm-space-4); border: 1px solid var(--fm-border); border-radius: var(--fm-radius-pill); font-size: var(--fm-fs-label); text-transform: uppercase; letter-spacing: var(--fm-ls-label); }
.fm-chip.is-active { background: var(--fm-ink-900); color: var(--fm-sand-100); border-color: var(--fm-ink-900); }

/* ---------- 3. Formularios ---------- */
.fm-field { display: grid; gap: var(--fm-space-2); }
.fm-field label { font-size: var(--fm-fs-label); font-weight: var(--fm-fw-semibold); letter-spacing: var(--fm-ls-label); text-transform: uppercase; }
.fm-input, .fm-select, .fm-textarea,
.woocommerce form .input-text, .woocommerce form select, .woocommerce form textarea,
body.woocommerce-checkout .input-text, body.woocommerce-checkout select, body.woocommerce-checkout textarea,
body.woocommerce-account .input-text, body.woocommerce-account select, body.woocommerce-account textarea {
  min-height: var(--fm-input-h); width: 100%; padding: 0 var(--fm-space-4);
  border: 1px solid var(--fm-border); border-radius: var(--fm-radius-0); background: var(--fm-white); color: var(--fm-text);
  font: inherit; font-family: var(--fm-font-sans); font-size: var(--fm-fs-small); box-shadow: none;
  transition: border-color var(--fm-dur-fast);
}
.fm-textarea, .woocommerce form textarea { min-height: 120px; padding-block: var(--fm-space-3); }
.fm-input:focus, .fm-select:focus, .fm-textarea:focus,
.woocommerce form .input-text:focus, .woocommerce form select:focus, .woocommerce form textarea:focus {
  outline: 0; border-color: var(--fm-border-strong); box-shadow: none;
}
.fm-input[aria-invalid="true"], .woocommerce form .woocommerce-invalid .input-text { border-color: var(--fm-error); }
.woocommerce form .form-row label { font-size: var(--fm-fs-label); font-weight: var(--fm-fw-semibold); letter-spacing: var(--fm-ls-label); text-transform: uppercase; }
html body :focus-visible { outline: 2px solid var(--fm-focus); outline-offset: 2px; }

/* ---------- 4. Avisos ---------- */
.fm-notice,
body .woocommerce-message, body .woocommerce-info, body .woocommerce-error {
  padding: var(--fm-space-4); border: 0; border-left: 2px solid var(--fm-ink-900); border-radius: var(--fm-radius-0);
  background: var(--fm-bg-alt); color: var(--fm-text); font-size: var(--fm-fs-small); box-shadow: none;
}
.fm-notice--success, body .woocommerce-message { border-left-color: var(--fm-success); }
.fm-notice--error, body .woocommerce-error { border-left-color: var(--fm-error); }
body .woocommerce-message::before, body .woocommerce-info::before, body .woocommerce-error::before { color: var(--fm-ink-900); }

/* ---------- 5. Barra de anuncios, header y menú lateral ---------- */
.fm-announce {
  position: relative; height: var(--fm-announce-h); overflow: hidden;
  background: var(--fm-announce-bg); color: var(--fm-announce-text);
  font-size: var(--fm-fs-micro); font-weight: var(--fm-fw-semibold); letter-spacing: var(--fm-ls-wide); text-transform: uppercase;
}
.fm-announce__msg {
  position: absolute; inset: 0; margin: 0; display: grid; place-items: center; text-align: center; padding-inline: var(--fm-gutter);
  opacity: 0; transform: translateY(40%); transition: opacity var(--fm-dur-base) var(--fm-ease-out), transform var(--fm-dur-base) var(--fm-ease-out);
}
.fm-announce__msg.is-on { opacity: 1; transform: none; }

.fm-header {
  position: sticky; top: 0; z-index: var(--fm-z-header);
  background: var(--fm-bg); border-bottom: var(--fm-border-hair);
  transition: transform var(--fm-dur-base) var(--fm-ease-out);
}
/* Navbar siempre visible; al hacer scroll, cristal esmerilado (glassmorphism) */
.fm-header { transition: background var(--fm-dur-base) var(--fm-ease-soft), border-color var(--fm-dur-base); }
.fm-header.is-scrolled { background: color-mix(in srgb, var(--fm-white) 58%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border-bottom-color: color-mix(in srgb, var(--fm-white) 55%, transparent); }
.fm-header__bar { height: var(--fm-header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--fm-space-4); }
.fm-header__left { display: flex; align-items: center; }
.fm-header__nav { display: flex; gap: var(--fm-space-6); }
.fm-header__nav .fm-link { color: var(--fm-text); }
.fm-header button, .fm-header__actions a { color: var(--fm-text); background: none; border: 0; padding: 0; display: inline-flex; align-items: center; cursor: pointer; }
.fm-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--fm-space-5); }
.fm-header__actions svg, .fm-header__burger svg { display: block; }
.fm-header .fm-header__burger { display: none; }
/* ---- Hover global: --fm-hover (arena), NUNCA azul. Blocksy pinta enlaces con --theme-link-hover-color ---- */
html:root, html body { --theme-link-hover-color: var(--fm-hover); --theme-link-initial-color: currentColor; }
html body a:not(.fm-btn):not(.btn):hover, html body a:not(.fm-btn):not(.btn):focus-visible, html body a:not(.fm-btn):not(.btn):active { color: var(--fm-hover); }
html body .fm-header button:hover, html body .fm-header button:focus-visible { color: var(--fm-hover); }
/* excepciones: elementos sobre foto mantienen su color */
html body a.fm-cat:hover, html body a.fm-cat:focus-visible, html body a.fm-cat:active, html body a.fm-card__media:hover, html body a.fm-card__media:focus-visible, html body a.fm-card__media:active { color: inherit; }
html body .fm-footer a:not(.fm-btn):hover, html body .fm-footer a:not(.fm-btn):focus-visible { color: var(--fm-hover, var(--fm-sand-600)); } /* sobre tinta, la arena clara */
.fm-logo { display: inline-flex; align-items: center; color: var(--fm-text); transition: color var(--fm-dur-base) var(--fm-ease-soft); }
html body .fm-logo:hover, html body .fm-logo:focus-visible { color: var(--fm-hover); } /* arena; Blocksy pinta azul */
html body .fm-footer__brand:hover .fm-wordmark { color: var(--fm-hover, var(--fm-sand-600)); }
/* Marca escrita con la tipografía display (provisional hasta tener el logo en vectores) */
.fm-wordmark { font-family: var(--fm-font-display); font-weight: var(--fm-fw-medium); font-size: 2.25rem; line-height: 1; letter-spacing: var(--fm-ls-display); text-transform: lowercase; }
.fm-wordmark--sm { font-size: 1.625rem; }
.fm-wordmark--mega { font-size: var(--fm-fs-mega); font-weight: var(--fm-fw-regular); line-height: .9; color: var(--fm-accent); }
.cart-wrap { position: relative; }
.fm-badge-count,
.fm-header .cart-count {
  position: absolute; top: -7px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--fm-radius-pill);
  background: var(--fm-ink-900); color: var(--fm-sand-100); box-shadow: none;
  font-family: var(--fm-font-sans); font-size: var(--fm-fs-micro); font-weight: var(--fm-fw-semibold); line-height: 1; display: inline-grid; place-items: center;
}
.fm-header #sdgSearchToggle[aria-expanded="true"] { color: var(--fm-sand-600); }

/* buscador de la base, dentro del header de Ferns */
/* glassmorphism: mismo vidrio que el header al hacer scroll */
html body .fm-header .sdg-search { background: color-mix(in srgb, var(--fm-white) 80%, transparent); border-top: var(--fm-border-hair); border-bottom: 1px solid color-mix(in srgb, var(--fm-white) 55%, transparent); box-shadow: none; -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); }
/* un backdrop-filter dentro de otro no desenfoca la página: con el buscador abierto, el header cede su vidrio al panel */
html body .fm-header:has(.sdg-search.is-open) { -webkit-backdrop-filter: none; backdrop-filter: none; }

@media (max-width: 899px) {
  .fm-header__nav { display: none; }
  .fm-header .fm-header__burger { display: inline-flex; }
  .fm-header__actions { gap: var(--fm-space-4); }
}

/* Menú lateral */
.fm-overlay { position: fixed; inset: 0; z-index: var(--fm-z-overlay); background: color-mix(in srgb, var(--fm-ink-900) 45%, transparent); }
.fm-overlay[hidden] { display: none; }
.fm-drawer {
  position: fixed; top: 0; bottom: 0; width: min(420px, 100%); z-index: var(--fm-z-drawer); background: var(--fm-white);
  display: flex; flex-direction: column; box-shadow: var(--fm-shadow-drawer);
  transition: transform var(--fm-dur-slow) var(--fm-ease-in-out), visibility 0s linear var(--fm-dur-slow);
  visibility: hidden;
}
.fm-drawer--left { left: 0; transform: translateX(-100%); }
.fm-drawer--right { right: 0; transform: translateX(100%); }
.fm-drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.fm-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--fm-space-4) var(--fm-gutter); border-bottom: var(--fm-border-hair); }
.fm-drawer__close { background: none; border: 0; color: var(--fm-text); cursor: pointer; display: inline-flex; }
.fm-drawer__nav { display: flex; flex-direction: column; padding: var(--fm-space-6) var(--fm-gutter); gap: var(--fm-space-2); overflow-y: auto; flex: 1; }
.fm-drawer__link { color: var(--fm-text); padding-block: var(--fm-space-2); }
.fm-drawer__foot { display: flex; flex-direction: column; gap: var(--fm-space-3); padding: var(--fm-space-6) var(--fm-gutter); border-top: var(--fm-border-hair); align-items: flex-start; }
body.fm-drawer-open { overflow: hidden; }

/* ---------- 6. Footer (estructura del demo: suscripción, columnas, marca gigante) ---------- */
.fm-footer { background: var(--fm-bg-inverse); color: var(--fm-text-inverse); padding-block: var(--fm-space-16) var(--fm-space-8); }
.fm-footer a { color: inherit; transition: color var(--fm-dur-fast) var(--fm-ease-soft); }
html body .fm-footer a:hover, html body .fm-footer a:focus-visible { color: var(--fm-hover, var(--fm-sand-600)); }
.fm-footer__cols { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: var(--fm-space-12); width: 100%; max-width: none; margin: 0; }
.fm-footer__eyebrow { margin: var(--fm-space-6) 0 var(--fm-space-2); font-size: var(--fm-fs-small); font-weight: var(--fm-fw-semibold); letter-spacing: var(--fm-ls-wide); text-transform: uppercase; color: var(--fm-text-subtle-inverse); }
.fm-footer__col > .fm-footer__eyebrow:first-child { margin-top: 0; }
.fm-footer__eyebrow::before { content: "○ "; }
.fm-footer__about { margin: 0 0 var(--fm-space-8); max-width: 34ch; font-size: var(--fm-fs-body); line-height: var(--fm-lh-normal); color: var(--fm-text-subtle-inverse); }
.fm-footer__big { display: block; margin: var(--fm-space-2) 0 var(--fm-space-8); font-size: var(--fm-fs-body-lg); }
.fm-footer__big a + a::before { content: " / "; }
.fm-footer__line { display: block; margin: 0 0 var(--fm-space-2); font-size: var(--fm-fs-body); color: var(--fm-text-subtle-inverse); }
.fm-footer__list { list-style: none; margin: 0; padding: 0; align-self: start; display: grid; gap: var(--fm-space-3); font-size: var(--fm-fs-body); line-height: var(--fm-lh-normal); letter-spacing: var(--fm-ls-label); text-transform: uppercase; }
.fm-footer__brand { display: block; max-width: none; margin: var(--fm-space-16) 0 0; line-height: .9; overflow: hidden; }
.fm-footer .fm-wordmark--mega { font-size: clamp(5.5rem, 9.5vw, 9.5rem); } /* tamaño de la referencia: la marca ocupa ~un cuarto del ancho */
.fm-footer__base { margin-top: var(--fm-space-8); padding-top: var(--fm-space-4); border-top: 1px solid var(--fm-border-inverse); display: flex; justify-content: space-between; gap: var(--fm-space-6); flex-wrap: wrap; }
.fm-footer__pay, .fm-footer__copy { margin: 0; font-size: var(--fm-fs-label); letter-spacing: var(--fm-ls-label); text-transform: uppercase; color: var(--fm-text-subtle-inverse); }
@media (max-width: 899px) {
  .fm-footer { padding-block: var(--fm-space-12) var(--fm-space-6); }
  .fm-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--fm-space-8); }
  .fm-footer__col--lead { grid-column: 1 / -1; }
  .fm-footer__brand { margin-top: var(--fm-space-12); }
}

/* ---------- 7. Ajustes sobre la base (sin cambiar su marcado) ---------- */
/* La Home de la base subía el hero bajo su header translúcido; el de Ferns es sólido (la Home propia llega en F10). */
body.home .hero { margin-top: 0; }

/* Swatch de Diseño (TAXONOMIA.md §2): imagen circular, más grande que el de Color para que se lea el estampado. */
.woo-variation-swatches .variable-items-wrapper.image-variable-items-wrapper .variable-item:not(.radio-variable-item) {
  width: 48px; height: 48px; padding: 3px; border-radius: 50%; box-shadow: 0 0 0 1px var(--fm-border);
}
.woo-variation-swatches .variable-items-wrapper.image-variable-items-wrapper .variable-item img,
.woo-variation-swatches .variable-items-wrapper.image-variable-items-wrapper .variable-item .variable-item-contents { border-radius: 50%; overflow: hidden; }
.woo-variation-swatches .variable-items-wrapper.image-variable-items-wrapper .variable-item:not(.radio-variable-item).selected,
.woo-variation-swatches .variable-items-wrapper.image-variable-items-wrapper .variable-item:not(.radio-variable-item):hover { box-shadow: 0 0 0 2px var(--fm-text); }


/* ---------- Botones principales (negro solido) ----------
   Reposo: fondo tinta, texto blanco. Hover: sube el relleno arena, el texto sigue blanco y el borde toma el color del relleno. */
html body .fm-btn--primary, html body .fm-btn--accent {
  background: var(--fm-ink-900); color: var(--fm-white); border: 0; box-shadow: none; font-size: calc(var(--fm-fs-small) * .92);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: color var(--fm-dur-base) var(--fm-ease-soft), border-color var(--fm-dur-base) var(--fm-ease-soft);
}
html body .fm-btn--primary::before, html body .fm-btn--accent::before { background: var(--fm-accent); }
html body .fm-btn--primary:hover, html body .fm-btn--primary:focus-visible, html body .fm-btn--accent:hover, html body .fm-btn--accent:focus-visible {
  background: var(--fm-ink-900); color: var(--fm-white); box-shadow: none;
}
/* flecha final del botón: más grande */
.fm-btn__arrow { display: inline-block; font-size: 1em; font-weight: var(--fm-fw-regular); line-height: 1; transform: none; transition: transform var(--fm-dur-base) var(--fm-ease-out); }
.fm-btn:hover .fm-btn__arrow { transform: translate(.12em, -.12em); }

/* Footer: ancho de la seccion de beneficios (mismo contenedor), columnas de enlaces mas pequenas y con la linea de enlace al pasar el cursor */
html body .fm-footer .fm-container { width: calc(100% - 2 * var(--fm-gutter)); max-width: calc(var(--fm-container) - 2 * var(--fm-gutter)); padding-inline: 0; }
.fm-footer__list { font-size: var(--fm-fs-small); }
.fm-footer__list a { background: linear-gradient(currentColor 0 0) 0 100% / 0 1px no-repeat; transition: background-size var(--fm-dur-base) var(--fm-ease-out), color var(--fm-dur-fast) var(--fm-ease-soft); padding-bottom: 2px; }
.fm-footer__list a:hover, .fm-footer__list a:focus-visible { background-size: 100% 1px; }

/* Boton de WhatsApp: el icono siempre blanco, tambien en hover */
html body .sdg-wa-float, html body .sdg-wa-float:hover, html body .sdg-wa-float:focus-visible { color: var(--fm-white); }
.fm-footer__list a { display: block; }
html body a.sdg-wa-float:not(.fm-btn):not(.btn), html body a.sdg-wa-float:not(.fm-btn):not(.btn):hover, html body a.sdg-wa-float:not(.fm-btn):not(.btn):focus-visible, html body .sdg-wa-float:hover * { color: var(--fm-white) !important; }
.fm-footer { padding-top: calc(var(--fm-space-16) + var(--fm-space-6)); }

/* ---------- Escala y migas de pan comunes a TODAS las páginas (antes solo Home y Tienda) ---------- */
:root { --fm-page-zoom: var(--home-scale, .9); }
body { zoom: var(--fm-page-zoom); }   /* header, anuncio y márgenes laterales idénticos en todo el sitio */
.fm-page-head { border-bottom: var(--fm-border-hair); padding-block: var(--fm-space-5); }
.fm-breadcrumb, body .shop-crumbs, body .woocommerce-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--fm-space-2); margin: 0; font-family: var(--fm-font-sans); font-size: var(--fm-fs-micro); font-weight: var(--fm-fw-regular); letter-spacing: var(--fm-ls-wide); text-transform: uppercase; color: var(--fm-text-muted); }
.fm-breadcrumb a, body .shop-crumbs a, body .woocommerce-breadcrumb a { color: var(--fm-text-muted); transition: color var(--fm-dur-fast); }
.fm-breadcrumb a:hover, body .shop-crumbs a:hover, body .woocommerce-breadcrumb a:hover { color: var(--fm-hover); }
.fm-breadcrumb [aria-current], body .shop-crumbs [aria-current] { color: var(--fm-text); }

/* Mismo contenedor que la Tienda (ancho máximo + margen lateral) en las páginas de la base */
html body main.sdg-cart-page > .wrap, html body main.sdg-acc-page > .wrap, html body main.sdg-legal-page > .wrap, html body .sdg-co-page .wrap,
html body.woocommerce-cart .sdg-cart-page .wrap, html body.sdg-co-body .sdg-co-page .wrap, html body main > .wrap:has(.ember-page-article) {
  width: 100% !important; max-width: var(--fm-container) !important; margin-inline: auto !important; padding-inline: var(--fm-gutter) !important; box-sizing: border-box;
}
/* Migas de pan de la base con el estilo de la Tienda */
html body .sdg-crumbs, html body .ember-page-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fm-space-2); font: var(--fm-fw-regular) var(--fm-fs-micro)/1.4 var(--fm-font-sans); letter-spacing: var(--fm-ls-wide); text-transform: uppercase; color: var(--fm-text-muted); justify-content: flex-start; }
html body .sdg-crumbs a, html body .ember-page-breadcrumbs a { color: var(--fm-text-muted) !important; }
html body .sdg-crumbs a:hover, html body .ember-page-breadcrumbs a:hover { color: var(--fm-hover) !important; }
html body .sdg-crumbs .sep { color: var(--fm-text-muted); }
html body .sdg-crumbs .current, html body .sdg-crumbs [aria-current] { color: var(--fm-text); font-weight: var(--fm-fw-regular); }

/* ---------- Chip estándar (Rafael, F6): bordes rectos, title case, verde pastel. Único estilo de chip informativo ---------- */
.fm-chip-std {
  display: inline-flex; align-items: center; gap: var(--fm-space-1); padding: 3px var(--fm-space-2); border-radius: 0;
  background: var(--fm-chip-bg); color: var(--fm-chip-text);
  font-family: var(--fm-font-sans); font-size: var(--fm-fs-label); font-weight: var(--fm-fw-semibold);
  letter-spacing: .01em; line-height: 1.4; text-transform: none; white-space: nowrap;
}
/* Notificaciones en línea: dorada (oferta por alcanzar) y verde (ahorro logrado) */
.fm-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fm-space-2); margin: 0; padding: var(--fm-space-2) var(--fm-space-3); border: 1px solid; font-size: var(--fm-fs-small); line-height: var(--fm-lh-normal); }
.fm-note--gold { background: var(--fm-note-gold-bg); border: 0; color: var(--fm-note-gold-text); align-items: flex-start; flex-wrap: nowrap; }
.fm-note--gold .fm-ico { flex: none; margin-top: 2px; }
.fm-note--gold .amount, .fm-note--gold b { color: var(--fm-note-gold-text); font-weight: var(--fm-fw-semibold); }
.fm-note--ok { background: var(--fm-chip-bg); border-color: var(--fm-note-ok-line); color: var(--fm-chip-text); }
.fm-note--ok b, .fm-note--ok .amount { font-weight: var(--fm-fw-semibold); }

.fm-saving { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fm-space-2) var(--fm-space-3); margin: 0; font-size: var(--fm-fs-small); color: var(--fm-text); }
.fm-saving__txt { display: inline-flex; align-items: center; gap: var(--fm-space-2); }
.fm-saving__txt .fm-ico { flex: none; color: var(--fm-chip-text); }
.fm-saving b { font-weight: var(--fm-fw-semibold); }

/* ---------- Migas de pan legibles en TODO el sitio (Rafael, 2026-10-07): Title Case, texto pequeño legible, página actual en tinta ---------- */
html body .fm-breadcrumb, html body .shop-crumbs, html body .woocommerce-breadcrumb, html body .sdg-crumbs, html body .ember-page-breadcrumbs,
html body.fm-shop-page .fm-shop-head .fm-breadcrumb {
  gap: var(--fm-space-3); font-size: var(--fm-fs-small) !important; line-height: 1.4; letter-spacing: 0 !important; text-transform: none !important;
}
html body .fm-breadcrumb [aria-current], html body .shop-crumbs [aria-current], html body .sdg-crumbs .current, html body .sdg-crumbs [aria-current],
html body.fm-shop-page .fm-shop-head .fm-breadcrumb [aria-current] { color: var(--fm-text); font-weight: var(--fm-fw-medium) !important; }
html body .sdg-crumbs .sep, html body .fm-breadcrumb [aria-hidden="true"] { color: var(--fm-border); }

/* ---------- Páginas legales: sin doble zoom, columna centrada (45rem) y texto a 16px ---------- */
html body .sdg-legal { zoom: 1 !important; }
html body.sdg-legal-body .sdg-legal .wrap { max-width: var(--fm-container) !important; padding-inline: var(--fm-gutter) !important; }
html body .sdg-legal-doc { max-width: 45rem; }
html body .sdg-legal .t-eyebrow { color: var(--fm-sand-700); font-weight: var(--fm-fw-semibold); }
html body .sdg-legal-updated { font-size: var(--fm-fs-small) !important; }
html body .sdg-legal-body-text { font-size: var(--fm-fs-body); line-height: 1.75; }

/* ---------- Botón de WhatsApp estándar (Rafael, 2026-10-08): verde WhatsApp, icono oficial, sin brillo ni hover. Único estilo en todo el sitio ---------- */
.fm-btn.fm-btn--wa, .fm-btn.fm-btn--wa:hover, .fm-btn.fm-btn--wa:focus, .fm-btn.fm-btn--wa:active {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--fm-space-2);
  background: var(--wa-76); color: var(--fm-white); border: 0; border-radius: var(--fm-radius-0);
  font-family: var(--fm-font-sans); font-size: var(--fm-fs-small); font-weight: var(--fm-fw-semibold); letter-spacing: .01em;
  text-transform: none; text-decoration: none; white-space: nowrap; transition: none; transform: none; box-shadow: none;
}
.fm-btn.fm-btn--wa::before, .fm-btn.fm-btn--wa::after { content: none; }
.fm-btn--wa .fm-ico-wa { flex: none; width: 1.25rem; height: 1.25rem; }
.fm-btn.fm-btn--wa:focus-visible { outline: 2px solid var(--fm-focus); outline-offset: 2px; }