/**
 * Stacciolla — global.css
 * Estilos globales del tema: navbar, botones base.
 * Cargado en frontend y editor. Solo var(--fe-*).
 */

/* ============================================================
   GLOBAL RESET — Overflow horizontal
   Previene que cualquier elemento desborde y cree scroll lateral.
   ============================================================ */

html {
  scroll-behavior: smooth;
  /* Compensa el header fijo al navegar a anclas (#section).
     Sin esto, el navegador salta al elemento exacto y el header
     de 80px lo tapa. +20px de respiro visual. */
  scroll-padding-top: calc(var(--fe-nav-height) + 20px);
}

html,
body {
  overflow-x: clip; /* clip (no hidden) — no crea scroll container, no rompe position:sticky */
  max-width: 100%;
  /* Mata el efecto elástico (rubber-band) horizontal en iOS Safari.
     overflow-x: clip previene el scroll horizontal sin crear scroll container
     (overflow:hidden sí lo crea y rompe position:sticky en descendientes).
     overscroll-behavior-x: none previene el rebote visual que hace
     que la página baile lateralmente al rozar el borde con el dedo. */
  overscroll-behavior-x: none;
}

/* ── Prevención de swipe horizontal tipo app móvil ── */
/* touch-action: pan-y permite solo scroll vertical a nivel de body.
   Elementos individuales (galería) sobrescriben esto con touch-action: auto.
   touch-action trabaja en conjunto con overscroll-behavior-x para iOS. */
@media (max-width: 768px) {
  body {
    touch-action: pan-y;
    position: relative; /* crea un contexto de apilamiento que ayuda a contener fixed elements */
  }
}

/* ============================================================
   GLOBAL RESET — Links
   Elimina el azul nativo del navegador en todo el tema.
   Los componentes (navbar, botones, cards) sobrescriben esto
   con sus propias reglas de color y text-decoration.
   ============================================================ */

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: inherit;
}

/* ============================================================
   NAVBAR
   ============================================================ */

.fe-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--fe-nav-height);
  background: transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* ── Estado transparente (home al top): texto e íconos blancos ── */

.fe-nav .fe-nav__list a,
.fe-nav .fe-nav__logo-text,
.fe-nav .fe-nav__icon,
.fe-nav .fe-nav__hamburger {
  color: var(--fe-white);
  transition: color 0.3s ease;
}

.fe-nav .fe-nav__logo svg path,
.fe-nav .fe-nav__logo svg rect,
.fe-nav .fe-nav__logo svg text {
  fill: var(--fe-white);
  transition: fill 0.3s ease;
}

/* ── Estado sólido: scroll en home o todas las páginas internas ── */

.fe-nav--scrolled,
.fe-nav--solid {
  background: var(--fe-white);
  border-bottom: 1px solid var(--fe-border);
}

.fe-nav--scrolled .fe-nav__list a,
.fe-nav--solid .fe-nav__list a,
.fe-nav--scrolled .fe-nav__logo-text,
.fe-nav--solid .fe-nav__logo-text,
.fe-nav--scrolled .fe-nav__icon,
.fe-nav--solid .fe-nav__icon,
.fe-nav--scrolled .fe-nav__hamburger,
.fe-nav--solid .fe-nav__hamburger {
  color: var(--fe-black);
}

.fe-nav--scrolled .fe-nav__logo svg path,
.fe-nav--solid .fe-nav__logo svg path,
.fe-nav--scrolled .fe-nav__logo svg rect,
.fe-nav--solid .fe-nav__logo svg rect,
.fe-nav--scrolled .fe-nav__logo svg text,
.fe-nav--solid .fe-nav__logo svg text {
  fill: var(--fe-black);
}

.fe-nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  max-width: var(--fe-container-max);
  margin: 0 auto;
  padding: 0 var(--fe-space-8);
  gap: var(--fe-space-8);
}

/* ── Listas de nav ── */

.fe-nav__left,
.fe-nav__right {
  display: flex;
  align-items: center;
}

.fe-nav__right {
  justify-content: flex-end;
  gap: var(--fe-space-8);
}

.fe-nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--fe-space-8);
  margin: 0;
  padding: 0;
}

.fe-nav__list a {
  font-family: var(--fe-font-body);
  font-size: var(--fe-size-xs);
  font-weight: var(--fe-weight-regular);
  letter-spacing: var(--fe-tracking-widest);
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
}

/* Compatibilidad: --light y --dark como alias de --solid */
.fe-nav--light .fe-nav__list a,
.fe-nav--dark .fe-nav__list a,
.fe-nav--light .fe-nav__logo-text,
.fe-nav--dark .fe-nav__logo-text,
.fe-nav--light .fe-nav__icon,
.fe-nav--dark .fe-nav__icon {
  color: var(--fe-black);
}

/* Underline hover */
.fe-nav__list a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--fe-transition);
}

.fe-nav__list a:hover::after,
.fe-nav__list .current-menu-item > a::after {
  transform: scaleX(1);
}

/* ── Logo centro ── */

.fe-nav__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.fe-nav__logo svg,
.fe-nav__logo img {
  height: 44px;
  width: auto;
  display: block;
}

/* Compatibilidad: --light y --dark como alias de --solid */
.fe-nav--light .fe-nav__logo svg path,
.fe-nav--dark .fe-nav__logo svg path,
.fe-nav--light .fe-nav__logo svg rect,
.fe-nav--dark .fe-nav__logo svg rect,
.fe-nav--light .fe-nav__logo svg text,
.fe-nav--dark .fe-nav__logo svg text {
  fill: var(--fe-black);
}

.fe-nav__logo-text {
  font-family: var(--fe-font-display);
  font-size: var(--fe-size-lg);
  font-weight: var(--fe-weight-light);
  letter-spacing: var(--fe-tracking-widest);
  text-transform: uppercase;
  transition: color var(--fe-transition);
}

/* ── Utilidades (search, account, cart) ── */

.fe-nav__utils {
  display: flex;
  align-items: center;
  gap: var(--fe-space-4);
}

.fe-nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: opacity var(--fe-transition);
  text-decoration: none;
}

.fe-nav__icon:hover {
  opacity: 0.65;
}

.fe-nav__cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background: var(--fe-gold);
  color: var(--fe-white);
  font-family: var(--fe-font-body);
  font-size: 9px;
  font-weight: var(--fe-weight-medium);
  border-radius: var(--fe-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── Hamburger (mobile) ── */

.fe-nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: currentColor;
}

.fe-nav__hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform var(--fe-transition), opacity var(--fe-transition);
}

.fe-nav__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.fe-nav__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.fe-nav__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ── Mobile drawer ── */

.fe-nav__mobile-drawer {
  display: none;
  position: fixed;
  inset: 0;          /* top:0 right:0 bottom:0 left:0 — full viewport */
  background: var(--fe-white);
  z-index: 1100;     /* above header(1000) + mega panels(1002) */
  padding: 0;        /* internal padding handled by fe-mob__* children */
  overflow-y: auto;
  /* Visibility: hidden previene que el elemento pintado fuera del viewport
     cause scroll horizontal en iOS Safari. El transition con delay asegura
     que se vuelva invisible DESPUÉS de que termine la animación de cierre. */
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform var(--fe-transition-slow),
              visibility 0s linear var(--fe-transition-slow);
  /* Flex column: nav area scrolls, footer stays pinned to bottom */
  flex-direction: column;
}

.fe-nav__mobile-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition: transform var(--fe-transition-slow),
              visibility 0s linear 0s;
}

.fe-nav__mobile-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--fe-space-8);
}

.fe-nav__mobile-list li {
  border-bottom: 1px solid var(--fe-border);
}

.fe-nav__mobile-list a {
  display: block;
  padding: var(--fe-space-4) 0;
  font-family: var(--fe-font-display);
  font-size: var(--fe-size-xl);
  font-weight: var(--fe-weight-light);
  color: var(--fe-black);
  text-decoration: none;
  transition: color var(--fe-transition);
}

.fe-nav__mobile-list a:hover {
  color: var(--fe-gold);
}

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */

.fe-search {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.fe-search.is-open {
  opacity: 1;
  visibility: visible;
}

.fe-search__close {
  position: absolute;
  top: 28px;
  right: 32px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 8px;
  transition: color var(--fe-transition);
}

.fe-search__close:hover {
  color: var(--fe-white);
}

.fe-search__content {
  width: 90%;
  max-width: 600px;
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}

.fe-search.is-open .fe-search__content {
  transform: translateY(0);
}

.fe-search__input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--fe-font-display);
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--fe-white);
  text-align: center;
  caret-color: var(--fe-gold);
}

.fe-search__input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.fe-search__line {
  width: 100%;
  height: 1px;
  background: var(--fe-gold);
  margin-top: 12px;
  opacity: 0.6;
}

.fe-search__results {
  margin-top: 32px;
  max-height: 400px;
  overflow-y: auto;
}

.fe-search__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: opacity var(--fe-transition);
}

.fe-search__item:hover {
  opacity: 0.7;
}

.fe-search__item-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  flex-shrink: 0;
}

.fe-search__item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fe-search__item-name {
  font-family: var(--fe-font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--fe-white);
}

.fe-search__item-price {
  font-family: var(--fe-font-body);
  font-size: 0.8rem;
  color: var(--fe-gold);
  letter-spacing: 0.05em;
}

.fe-search__empty {
  font-family: var(--fe-font-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  padding: 20px 0;
  margin: 0;
}

@media (max-width: 768px) {
  .fe-search__input {
    font-size: 1.8rem;
  }

  .fe-search__content {
    width: 85%;
  }

  .fe-search__item-img {
    width: 48px;
    height: 48px;
  }

  .fe-search__close {
    top: 20px;
    right: 20px;
  }
}

/* ============================================================
   BOTONES BASE (compartidos por todos los bloques)
   ============================================================ */

.fe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fe-space-3);
  font-family: var(--fe-font-body);
  font-size: var(--fe-size-xs);
  font-weight: var(--fe-weight-regular);
  letter-spacing: var(--fe-tracking-widest);
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--fe-space-4) var(--fe-space-8);
  border-radius: var(--fe-radius);
  transition: all var(--fe-transition);
  cursor: pointer;
  white-space: nowrap;
}

.fe-btn--primary {
  background: var(--fe-black);
  color: var(--fe-cream);
  border: 1px solid var(--fe-black);
}

.fe-btn--primary:hover {
  background: var(--fe-black-soft);
  color: var(--fe-gold-light);
}

.fe-btn--outline {
  background: transparent;
  color: var(--fe-black);
  border: 1px solid var(--fe-black);
}

.fe-btn--outline:hover {
  background: var(--fe-black);
  color: var(--fe-cream);
}

/* ============================================================
   CONTENT LINKS — Estilo Stacciolla para links en contenido
   Aplica a todas las páginas legales, de contenido y WordPress.
   El subrayado gold en hover reemplaza el azul nativo.
   ============================================================ */

.fe-legal-content a,
.fe-manifesto-content a,
.fe-terms-content a,
.page-content a,
.entry-content a,
.wp-block-post-content a {
  color: var(--fe-black);
  text-decoration: underline;
  text-decoration-color: var(--fe-border);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}

.fe-legal-content a:hover,
.fe-manifesto-content a:hover,
.fe-terms-content a:hover,
.page-content a:hover,
.entry-content a:hover,
.wp-block-post-content a:hover {
  color: var(--fe-black);
  text-decoration-color: var(--fe-gold);
}

/* ============================================================
   RESPONSIVE — NAVBAR
   ============================================================ */

@media (max-width: 1024px) {
  .fe-nav__inner {
    padding: 0 var(--fe-space-6);
  }
  .fe-nav__list {
    gap: var(--fe-space-6);
  }
}

@media (max-width: 768px) {
  .fe-nav__logo svg,
  .fe-nav__logo img {
    height: 40px;
    width: auto;
  }

  .fe-nav__left,
  .fe-nav__right .fe-nav__list {
    display: none;
  }

  /* Utils visible en mobile — ocupa todo el ancho del nav__right */
  .fe-nav__utils {
    width: 100%;
    gap: 0;
  }

  /* Search separa grupo izquierdo (hamburger+search) del derecho (account+cart) */
  .fe-nav__icon--search {
    margin-right: auto;
  }

  .fe-nav__right {
    width: 100%;
  }

  .fe-nav__hamburger {
    display: flex;
  }

  .fe-nav__mobile-drawer {
    display: flex; /* flex-direction:column set in base rule */
    /* visibility: hidden + pointer-events: none heredados del bloque base
       previenen el scroll horizontal causado por el elemento off-screen */
  }

  .fe-nav__inner {
    display: flex !important;
    padding: 0 var(--fe-space-4);
    position: relative;
  }
}

/* ============================================================
   EDITOR OVERRIDES — solo dentro del iframe de Gutenberg
   ============================================================ */

.editor-styles-wrapper .fe-nav {
  position: relative;
}


/* ============================================================
   WOOCOMMERCE NOTICES — Fixed toast, upper-right corner
   380 px wide, slides in from the right, white card style.
   Does NOT affect page layout flow.
   ============================================================ */

@keyframes fe-notice-slide-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fe-notice-slide-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* Wrapper — fixed upper-right, no layout impact */
.woocommerce-notices-wrapper {
  position: fixed !important;
  top: 96px !important;
  right: 24px !important;
  left: auto !important;
  transform: none !important;
  z-index: 9990 !important;
  width: 380px !important;
  max-width: calc(100% - 48px) !important;
  pointer-events: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Kill ALL decorative icons — ::before, ::after, SVG */
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-message::after,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-info::after,
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-error::after {
  display: none !important;
  content: none !important;
}

.woocommerce-notices-wrapper .woocommerce-message svg,
.woocommerce-notices-wrapper .woocommerce-message .woocommerce-message__icon,
.woocommerce-notices-wrapper .woocommerce-message .wc-block-components-notice-banner__icon {
  display: none !important;
}

/* Notice card — white, gold top border, shadow, slide from right */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
  pointer-events: all !important;
  background: var(--fe-white) !important;
  color: var(--fe-black) !important;
  border: 1px solid var(--fe-border) !important;
  border-top: 2px solid var(--fe-gold) !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
  padding: 1.25rem 1.5rem !important;
  font-family: var(--fe-font-body), sans-serif !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  letter-spacing: 0.02em !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  margin: 0 0 8px !important;
  list-style: none !important;
  animation: fe-notice-slide-in 0.3s ease forwards !important;
}

/* Error variant — gold top border becomes muted red */
.woocommerce-notices-wrapper .woocommerce-error {
  border-top-color: #c0392b !important;
}

/* "View cart" / action link inside notices */
.woocommerce-notices-wrapper .woocommerce-message a.button,
.woocommerce-notices-wrapper .woocommerce-message a,
.woocommerce-notices-wrapper .woocommerce-info a.button,
.woocommerce-notices-wrapper .woocommerce-info a,
.woocommerce-notices-wrapper .woocommerce-error a.button,
.woocommerce-notices-wrapper .woocommerce-error a {
  background: transparent !important;
  color: var(--fe-black) !important;
  border: 1px solid var(--fe-black) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  font-family: var(--fe-font-body), sans-serif !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 0.5rem 1rem !important;
  margin-left: auto !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  pointer-events: all !important;
  transition: background 0.2s, color 0.2s !important;
}

.woocommerce-notices-wrapper .woocommerce-message a.button:hover,
.woocommerce-notices-wrapper .woocommerce-message a:hover,
.woocommerce-notices-wrapper .woocommerce-info a.button:hover,
.woocommerce-notices-wrapper .woocommerce-info a:hover,
.woocommerce-notices-wrapper .woocommerce-error a.button:hover,
.woocommerce-notices-wrapper .woocommerce-error a:hover {
  background: var(--fe-black) !important;
  color: var(--fe-white) !important;
}

/* Dismiss animation class — added by JS before DOM removal */
.woocommerce-notices-wrapper .woocommerce-message.fe-notice--out,
.woocommerce-notices-wrapper .woocommerce-info.fe-notice--out,
.woocommerce-notices-wrapper .woocommerce-error.fe-notice--out {
  animation: fe-notice-slide-out 0.3s ease forwards !important;
}


/* ============================================================
   MOBILE DRAWER — fe-mob__*
   Only active inside .fe-nav__mobile-drawer on mobile.
   ============================================================ */

/* ── Drawer header ─────────────────────────────────────────── */

.fe-mob__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--fe-border);
  flex-shrink: 0;
}

.fe-mob__label {
  font-family: var(--fe-font-body), sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--fe-warm-gray);
}

.fe-mob__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fe-black);
  padding: 0;
  margin-right: -8px;
}

/* ── Nav list ──────────────────────────────────────────────── */

.fe-mob__nav {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.fe-mob__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fe-mob__item {
  border-bottom: 1px solid var(--fe-border);
}

/* ── Accordion trigger ─────────────────────────────────────── */

.fe-mob__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--fe-font-body), sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--fe-black);
  text-align: left;
}

.fe-mob__plus {
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  color: var(--fe-warm-gray);
  transition: transform 0.22s ease;
  flex-shrink: 0;
}

.fe-mob__item.is-open > .fe-mob__trigger .fe-mob__plus {
  transform: rotate(45deg);
}

/* ── Sub-menu ──────────────────────────────────────────────── */

.fe-mob__sub {
  list-style: none;
  margin: 0;
  padding: 0 0 12px 0;
  display: none;
  background: var(--fe-cream);
}

.fe-mob__item.is-open > .fe-mob__sub {
  display: block;
}

.fe-mob__sub li {
  padding: 0;
}

.fe-mob__sub a {
  display: block;
  padding: 11px 24px 11px 32px;
  font-family: var(--fe-font-body), sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--fe-warm-gray);
  text-decoration: none;
  transition: color 0.18s;
}

.fe-mob__sub a:hover {
  color: var(--fe-black);
}

/* ── Direct links (no sub) ─────────────────────────────────── */

.fe-mob__link {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  font-family: var(--fe-font-body), sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--fe-black);
  text-decoration: none;
  transition: color 0.18s;
}

.fe-mob__link--loyalty {
  color: var(--fe-gold);
}

.fe-mob__link:hover {
  color: var(--fe-gold);
}

/* ── Utility footer ────────────────────────────────────────── */

.fe-mob__footer {
  border-top: 1px solid var(--fe-border);
  padding: 8px 24px 32px;
  flex-shrink: 0;
}

.fe-mob__util {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  font-family: var(--fe-font-body), sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: var(--fe-warm-gray);
  text-decoration: none;
  transition: color 0.18s;
  border-bottom: 1px solid var(--fe-border);
}

.fe-mob__footer .fe-mob__util:last-child {
  border-bottom: none;
}

.fe-mob__util:hover {
  color: var(--fe-black);
}

.fe-mob__util svg {
  flex-shrink: 0;
  opacity: 0.6;
}

/* flex-direction:column is set in the base .fe-nav__mobile-drawer rule above */