/* ─────────────────────────────────────────────────────────────────────────
   Ok.station — NAVBAR UNIFICADO (oknav)
   ---------------------------------------------------------------------
   Reemplaza a los TRES encabezados que conviven hoy:
     · .site-header + .header-bar → portada y 19 landings
     · .shopbar                   → ficha de producto y compra rápida
     · .topbar/.popbar-row        → catálogo (tienda.html)

   TRES FILAS, como el encabezado del sitio:
     0) cinturillo → ¿Quiénes somos? · Contacto · lema · redes
     1) logo · buscador · ubicación · cuenta · deseados · carrito
     2) Categorías · Ofertas ┃ servicios ········· WhatsApp

   SIN NINGÚN DEGRADADO. Donde el original usaba uno se puso su color plano:
     · Cinturillo (--grad-purple)  → azul de marca plano.
     · Barra principal             → blanca, como .site-header (que ya es #fff).
     · Fila de navegación          → --surface-bg.
     · WhatsApp                    → #25D366 plano.
     · Avatar                      → azul de marca plano.

   Lo demás sale de los tokens de styles.css (--brand-*, --surface-*, --text-*,
   --border-*, --radius-*), así que se ve igual que el resto del sitio y el
   modo oscuro llega solo. Los botones copian el chip .acct__btn del header
   blanco: píldora, borde de 1px y sombra suave.
   Los valores tras la coma son el respaldo por si falta styles.css.
   ───────────────────────────────────────────────────────────────────── */

.oknav {
  position: sticky; top: 0; z-index: 200;
  background: var(--surface-card, #FFFFFF);
  border-bottom: 1px solid var(--border-light, #E4E7F0);
  /* Sombra FINA: apenas despega la barra del contenido al hacer scroll, sin cajón. */
  box-shadow: 0 1px 3px rgba(12, 20, 50, .06);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Cada fila pinta su propio fondo sólido. En navegadores móviles la barra sticky puede
   promoverse a otra capa al hacer scroll; depender solo del fondo del padre hacía que
   esa capa se viera transparente durante algunos cuadros. */
.oknav__row--main { background: var(--surface-card, #FFFFFF); }

.oknav__wrap {
  max-width: 1280px; margin: 0 auto; padding: 0 var(--space-4, 16px);
  display: flex; align-items: center; gap: 10px;
}

/* ── CINTURILLO ───────────────────────────────────────────────────────────
   Mismas medidas que .header-bar (8px de alto interior, .8125rem, peso 500),
   pero en azul plano en vez del degradado morado. */
.oknav__belt {
  background: var(--brand-blue, #066CFF);
  color: rgba(255,255,255,0.95);
  font-size: 0.8125rem; font-weight: 500;
}
.oknav__belt > .oknav__wrap { min-height: 34px; gap: var(--space-4, 16px); }
.oknav__beltlinks { display: flex; align-items: center; gap: var(--space-4, 16px); flex: 0 0 auto; }
.oknav__beltlinks a { color: #fff; text-decoration: none; opacity: .92; white-space: nowrap; transition: opacity .15s; }
.oknav__beltlinks a:hover { opacity: 1; text-decoration: underline; }
.oknav__belttag { flex: 1 1 auto; text-align: center; margin: 0; min-width: 0; }
.oknav__beltsocial { display: flex; align-items: center; gap: var(--space-2, 8px); flex: 0 0 auto; }
.oknav__beltsocial a {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.16); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; transition: background .15s;
}
.oknav__beltsocial a:hover { background: rgba(255,255,255,0.30); }

/* ── FILA 1 ─────────────────────────────────────────────────────────────
   Alto de fila = altura del control más alto (el buscador, 45px) + aire arriba y
   abajo. Con 60px quedaban 7.5px por lado y la barra se leía apretada; con 68px
   son 11.5px. Solo cambia el respiro vertical: ni el diseño ni la distribución
   horizontal se tocan. */
.oknav__row--main > .oknav__wrap { min-height: 68px; }

.oknav__burger {
  display: none;                  /* solo en pantallas chicas */
  flex: 0 0 auto; width: 40px; height: 40px;
  border: 0; background: none; cursor: pointer;
  border-radius: var(--radius-full, 99px); position: relative;
  transition: background .15s;
}
.oknav__burger:hover { background: var(--surface-bg, #F2F4F8); }
.oknav__burger span {
  position: absolute; left: 11px; width: 18px; height: 2px; border-radius: 2px;
  background: var(--text-primary, #12141C); transition: transform .18s, opacity .18s;
}
.oknav__burger span:nth-child(1) { top: 14px; }
.oknav__burger span:nth-child(2) { top: 19px; }
.oknav__burger span:nth-child(3) { top: 24px; }
.oknav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.oknav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.oknav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* La barra es blanca, así que el logo va en sus colores normales. Solo se
   invierte en modo oscuro (ver el bloque del final). */
.oknav__logo { flex: 0 0 auto; display: flex; align-items: center; text-decoration: none; }
.oknav__logo img { height: 26px; width: auto; max-width: 100%; display: block; }
.oknav__brandmark {
  display: inline-flex; align-items: baseline; color: var(--text-primary, #12141C);
  font-size: 1.42rem; font-weight: 700; line-height: 1; letter-spacing: -.045em;
  white-space: nowrap;
}
.oknav__brandmark strong { color: var(--brand-blue, #066CFF); font-weight: 850; }
.oknav__brandmark span { font-weight: 650; }

/* Buscador: la lupa dentro a la izquierda y se envía con Enter (sin botón:
   serían dos lupas en el mismo campo). */
.oknav__search { flex: 1 1 240px; min-width: 0; position: relative; display: flex; align-items: center; }
.oknav__search > svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted, #717890); pointer-events: none;
}
.oknav__search input {
  width: 100%; font: inherit; font-size: .9rem;
  padding: 10px 14px 10px 40px;
  border: 1px solid var(--border-light, #E4E7F0);
  border-radius: var(--radius-full, 99px);
  background: var(--surface-bg, #F2F4F8);
  color: var(--text-primary, #12141C);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.oknav__search input::placeholder { color: var(--text-muted, #717890); }
.oknav__search input:focus {
  outline: none; background: var(--surface-card, #fff);
  border-color: var(--brand-blue, #066CFF);
  box-shadow: 0 0 0 3px rgba(6,108,255,.15);
}
.oknav__search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Autocompletado */
.oknav__ac {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-light, #E4E7F0);
  border-radius: var(--radius-md, 16px);
  box-shadow: 0 18px 50px rgba(12,20,50,.18);
  overflow-y: auto; z-index: 30; max-height: min(60vh, 420px);
}
.oknav__ac[hidden] { display: none; }
.oknav__acitem {
  display: flex; align-items: center; gap: 11px; padding: 9px 14px;
  text-decoration: none; color: var(--text-primary, #12141C); border: 0; background: none;
  width: 100%; text-align: left; cursor: pointer; font: inherit;
}
.oknav__acitem:hover, .oknav__acitem.is-on { background: var(--surface-bg, #F2F4F8); }
.oknav__acth {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-sm, 10px);
  background: #fff; border: 1px solid var(--border-light, #E4E7F0);
  display: grid; place-items: center; overflow: hidden;
}
.oknav__acth img { width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; }
.oknav__acth .ph-logo { padding: 8px; opacity: .9; }
.oknav__actxt { flex: 1 1 auto; min-width: 0; }
.oknav__acname { display: block; font-size: .86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oknav__acmeta { display: block; font-size: .74rem; color: var(--text-muted, #717890); }
.oknav__acprice { flex: 0 0 auto; font-size: .86rem; font-weight: 700; color: var(--brand-blue, #066CFF); }
.oknav__acempty { padding: 14px; font-size: .86rem; color: var(--text-muted, #717890); text-align: center; }

/* ── Acciones ─────────────────────────────────────────────────────────────
   Mismo chip que .acct__btn del header blanco: píldora, borde de 1px y sombra
   suave. La JERARQUÍA es la que dejaron anotada en tienda.html: Cuenta
   discreta, Favoritos solo ícono, y el carrito el ÚNICO sólido. */
.oknav__actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2, 8px); margin-left: auto; }

.oknav__loc, .oknav__acct, .oknav__ico, .oknav__cart {
  flex: none; display: flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius-full, 99px);
  border: 1px solid var(--border-light, #E4E7F0); background: var(--surface-card, #fff);
  color: var(--text-primary, #12141C); font-weight: 600; font-size: .85rem;
  white-space: nowrap; text-decoration: none; cursor: pointer; position: relative;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.oknav__loc:hover, .oknav__acct:hover, .oknav__ico:hover {
  border-color: var(--border-medium, #C8CEDF); box-shadow: var(--shadow-sm, 0 1px 3px rgba(12,20,50,.08));
}
.oknav__acct svg, .oknav__loc svg { width: 17px; height: 17px; flex: none; color: var(--brand-blue, #066CFF); }

/* Favoritos: solo ícono. */
.oknav__ico { width: 40px; height: 40px; padding: 0; justify-content: center; gap: 0; }
.oknav__ico svg { width: 19px; height: 19px; flex: none; color: var(--brand-blue, #066CFF); }

/* Ubicación: dos renglones (rótulo chico arriba, valor abajo). Importa de
   verdad porque cambia el IVA y el costo de envío. */
.oknav__loc { padding: 5px 12px; max-width: 200px; }
.oknav__loctxt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.oknav__loctxt small { font-size: .66rem; color: var(--text-muted, #717890); font-weight: 500; }
.oknav__loctxt b { font-size: .8rem; font-weight: 700; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.oknav__lbl { font-size: .85rem; font-weight: 600; }

/* Carrito: el único SÓLIDO, azul de marca plano. Es a donde debe ir el ojo. */
.oknav__cart { background: var(--brand-blue, #066CFF); border-color: var(--brand-blue, #066CFF); color: #fff; }
.oknav__cart svg { width: 18px; height: 18px; flex: none; color: #fff; }
.oknav__cart:hover { background: var(--brand-blue-hover, #0558CC); border-color: var(--brand-blue-hover, #0558CC); }

/* Globito: FLOTA en la esquina superior derecha, no en línea (si va en línea
   empuja el contenido y estira el botón). El anillo lo despega del borde. */
.oknav__ct {
  position: absolute; top: -6px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-full, 99px);
  background: var(--brand-orange, #FF7C19); color: #fff;
  font-size: .66rem; font-weight: 800;
  display: grid; place-items: center; line-height: 1;
  border: 2px solid var(--surface-card, #fff); box-sizing: border-box;
}
.oknav__ct[hidden] { display: none; }

/* Avatar con sesión: azul de marca PLANO (el original usaba el degradado).
   El contenedor tiene que ser flex: siendo un <span> normal, el avatar (que es
   display:grid) forzaba salto de línea y la píldora crecía a 66px de alto. */
.oknav__acctbox { display: flex; align-items: center; gap: 8px; min-width: 0; }
.oknav__avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--brand-blue, #066CFF); color: #fff;
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
}
.oknav__acct:has(.oknav__avatar) { padding: 5px 12px 5px 6px; }
.oknav__acct .oknav__lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }

.oknav__loc:focus-visible, .oknav__acct:focus-visible, .oknav__ico:focus-visible,
.oknav__cart:focus-visible, .oknav__cats:focus-visible, .oknav__burger:focus-visible,
.oknav__wa:focus-visible, .oknav__beltlinks a:focus-visible {
  outline: 3px solid var(--brand-cyan, #00C6FF); outline-offset: 2px;
}

/* ── FILA 2 ───────────────────────────────────────────────────────────── */
.oknav__row--nav {
  background: var(--surface-bg, #F2F4F8);
  border-top: 1px solid var(--border-light, #E4E7F0);
}
/* Misma idea que la fila 1: sus píldoras miden 38px y con 44px de fila les
   quedaban 4.5px por lado —la fila que peor se veía—; con 54px son 8px. */
.oknav__row--nav > .oknav__wrap { min-height: 54px; gap: var(--space-2, 8px); }
.oknav__mobile-stores { display: none; }

.oknav__cats, .oknav__ofertas, .oknav__links a {
  white-space: nowrap; border: 1px solid var(--border-light, #E4E7F0);
  background: var(--surface-card, #fff); border-radius: var(--radius-full, 99px);
  padding: 7px 14px; font-size: .84rem; font-weight: 600;
  color: var(--text-primary, #12141C);
  flex: none; display: flex; align-items: center; gap: 6px; text-decoration: none;
  cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s, color .15s;
}
.oknav__cats:hover { border-color: var(--brand-blue, #066CFF); color: var(--brand-blue, #066CFF); }
.oknav__cats[aria-expanded="true"] { background: var(--brand-blue, #066CFF); border-color: var(--brand-blue, #066CFF); color: #fff; }
.oknav__cats svg { transition: transform .18s; }
.oknav__cats[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Ofertas: naranja de marca, PLANO. */
.oknav__ofertas { background: var(--brand-orange, #FF7C19); border-color: var(--brand-orange, #FF7C19); color: #fff; }
.oknav__ofertas:hover { filter: brightness(1.06); }

/* Frontera entre lo que es TIENDA y lo que es SITIO. */
.oknav__sep { width: 1px; height: 20px; background: var(--border-light, #E4E7F0); margin: 0 6px; flex: 0 0 auto; }

/* Los servicios van sin cápsula: son navegación del sitio, no filtros. */
.oknav__links { display: flex; align-items: center; gap: 2px; min-width: 0; }
.oknav__links a { background: none; border-color: transparent; color: var(--text-secondary, #4A5068); font-weight: 500; }
.oknav__links a:hover { background: var(--brand-blue-light, #EAF1FF); color: var(--brand-blue, #066CFF); }

/* WhatsApp: verde PLANO (el original llevaba degradado). */
.oknav__wa {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 14px; border-radius: var(--radius-full, 99px);
  background: #25D366; border: none; color: #fff;
  text-decoration: none; font-size: .82rem; font-weight: 700; white-space: nowrap;
  transition: background .15s;
}
.oknav__wa:hover { background: #1FBA57; }

/* Desplegable de categorías */
.oknav__catsmenu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface-card, #fff);
  border-bottom: 1px solid var(--border-light, #E4E7F0);
  box-shadow: 0 24px 60px rgba(12,20,50,.18);
  z-index: 20; padding: var(--space-4, 16px); max-height: min(70vh, 520px); overflow-y: auto;
}
.oknav__catsmenu[hidden] { display: none; }
.oknav__catsgrid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px;
}
.oknav__catlink {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm, 10px); text-decoration: none;
  color: var(--text-primary, #12141C); font-size: .86rem; font-weight: 600;
  border: 0; background: none; cursor: pointer; font-family: inherit; text-align: left; width: 100%;
}
.oknav__catlink:hover { background: var(--surface-bg, #F2F4F8); color: var(--brand-blue, #066CFF); }
.oknav__catn { font-size: .74rem; font-weight: 600; color: var(--text-muted, #717890); }

/* ── Cajón (☰) ────────────────────────────────────────────────────────── */
.oknav__scrim { position: fixed; inset: 0; background: rgba(8,14,32,.5); z-index: 190; opacity: 0; transition: opacity .2s; }
.oknav__scrim.is-open { opacity: 1; }
.oknav__scrim[hidden] { display: none; }

.oknav__drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 86vw);
  background: var(--surface-card, #fff); z-index: 195; overflow-y: auto; padding: var(--space-4, 16px);
  transform: translateX(-100%); transition: transform .22s ease;
  box-shadow: 18px 0 50px rgba(12,20,50,.28);
  font-family: "Inter", system-ui, sans-serif;
}
.oknav__drawer.is-open { transform: translateX(0); }
.oknav__drawer[hidden] { display: none; }
.oknav__dhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3, 12px); }
.oknav__dhead img { height: 20px; width: auto; }
.oknav__dclose {
  width: 38px; height: 38px; border: 0; background: none; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--text-primary, #12141C); border-radius: var(--radius-sm, 10px);
}
.oknav__dclose:hover { background: var(--surface-bg, #F2F4F8); }
.oknav__dtitle {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted, #717890); margin: var(--space-4, 16px) 0 var(--space-1, 4px);
}
.oknav__dlist { display: flex; flex-direction: column; gap: 2px; }
.oknav__dlist a, .oknav__dlist button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px; border-radius: var(--radius-sm, 10px); text-decoration: none;
  color: var(--text-primary, #12141C); font-size: .9rem; font-weight: 600;
  border: 0; background: none; cursor: pointer; font-family: inherit; text-align: left; width: 100%;
}
.oknav__dlist a:hover, .oknav__dlist button:hover { background: var(--surface-bg, #F2F4F8); color: var(--brand-blue, #066CFF); }
.oknav__dsocial { display: flex; gap: var(--space-2, 8px); padding: 4px 12px; }
.oknav__dsocial a {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-bg, #F2F4F8);
  display: grid; place-items: center; color: var(--text-primary, #12141C); padding: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────
   El plan por fila, decidido ANTES de construir (esta barra ya se desbordó
   dos veces por no hacerlo): a 375px la anterior apenas cabía en 359px. */

/* El lema es lo primero que sobra del cinturillo. */
@media (max-width: 1180px) {
  .oknav__belttag { display: none; }
  .oknav__belt > .oknav__wrap { justify-content: space-between; }
  .oknav__acct .oknav__lbl { display: none; }
  .oknav__loctxt b { max-width: 100px; }
}

/* Los servicios se van al cajón y la hamburguesa aparece en el MISMO punto:
   si algo se mudó al cajón, el cajón tiene que poder abrirse. */
@media (max-width: 1000px) {
  .oknav__links, .oknav__sep { display: none; }
  .oknav__burger { display: block; }

  /* La fila 1 pasa a REJILLA con zonas nombradas. Con flex-wrap el resultado
     dependía de cuánto medía cada pieza: a 375px salían 2 renglones, a 430px
     TRES y a 820px las acciones se iban solas. Con la rejilla siempre son 2. */
  .oknav__row--main > .oknav__wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "burger logo actions" "search search search";
    align-items: center; row-gap: var(--space-2, 8px);
    /* Mismo respiro que en escritorio: aquí la fila 1 son DOS renglones (logo/acciones
       y buscador), así que el aire va en el padding en vez del min-height. */
    padding-top: var(--space-3, 12px); padding-bottom: var(--space-3, 12px);
  }
  .oknav__burger  { grid-area: burger; }
  .oknav__logo    { grid-area: logo; min-width: 0; }
  .oknav__actions { grid-area: actions; }
  .oknav__search  { grid-area: search; margin: 0; }
}

@media (max-width: 760px) {
  .oknav {
    background: var(--surface-card, #FFFFFF);
    opacity: 1;
    isolation: isolate;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .oknav__row--main { background: var(--surface-card, #FFFFFF); }
  /* El cinturillo se va entero: sus enlaces y redes ya están en el cajón, y
     aquí solo haría más alta una barra que además es pegajosa. */
  .oknav__belt { display: none; }
  /* El botón de tema se va al cajón: con él, hamburguesa + logo + acciones
     sumaban 377px contra 336 disponibles a 360px de pantalla. */
  .oknav__actions .theme-toggle { display: none; }
  .oknav__loc, .oknav__acct { display: none; }   /* viven en el cajón */
  .oknav__wa { display: none; }                  /* ya hay botón flotante */
  .oknav__logo img { height: 22px; }
  .oknav__brandmark { font-size: 1.28rem; }
  .oknav__logo { min-height: 44px; }
  .oknav__burger, .oknav__ico, .oknav__cart { min-width: 44px; min-height: 44px; }
  .oknav__cats, .oknav__ofertas { min-height: 44px; }
  .oknav__row--nav > .oknav__wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px 8px; padding-top: 8px; padding-bottom: 8px; overflow: visible;
  }
  .oknav__row--nav > .oknav__wrap::-webkit-scrollbar { display: none; }
  .oknav__mobile-stores {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px; width: 100%;
  }
  .oknav__mobile-store {
    min-width: 0; min-height: 42px; padding: 8px 10px; border-radius: var(--radius-full, 99px);
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: var(--brand-blue, #066CFF); color: #fff; text-decoration: none;
    font-size: .82rem; font-weight: 750; line-height: 1.1; text-align: center;
  }
  .oknav__mobile-store--quick { background: var(--brand-orange, #FF7C19); }
  .oknav__mobile-store svg { flex: none; }
  .oknav__cats, .oknav__ofertas { width: 100%; min-height: 40px; justify-content: center; }
  .oknav__catsmenu {
    max-height: calc(100dvh - var(--oknav-h, 0px)); overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .oknav__drawer, .oknav__ac { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}

/* En teléfonos la búsqueda parte como una lupa: así la primera fila conserva
   logo, carrito y navegación sin ocupar otro renglón completo. Al enfocarla se
   abre debajo del logo, dentro del propio header, tal como espera el usuario. */
@media (max-width: 480px), (max-width: 760px) and (max-height: 480px) {
  .oknav__row--main > .oknav__wrap {
    grid-template-columns: auto minmax(0, 1fr) 44px auto;
    grid-template-areas: "burger logo search actions";
    column-gap: 8px; row-gap: 0;
    padding-top: 8px; padding-bottom: 8px;
    position: relative;
  }
  .oknav__actions .oknav__ico { display: none; }
  .oknav__actions { gap: 0; }
  .oknav__search {
    width: 44px; height: 44px; justify-self: end;
    transition: width .18s ease;
  }
  .oknav__search > svg {
    left: 50%; transform: translate(-50%, -50%);
  }
  .oknav__search input {
    width: 44px; height: 44px; padding: 0;
    color: transparent; caret-color: transparent;
    cursor: pointer;
  }
  .oknav__search input::placeholder { color: transparent; }
  .oknav__row--main > .oknav__wrap:has(.oknav__search:focus-within) {
    grid-template-areas:
      "burger logo . actions"
      "search search search search";
    row-gap: 8px;
  }
  .oknav__search:focus-within {
    position: relative; left: auto; right: auto; bottom: auto;
    width: 100%; height: 44px; z-index: 10;
  }
  .oknav__search:focus-within > svg {
    left: 13px; transform: translateY(-50%);
  }
  .oknav__search:focus-within input {
    width: 100%; padding: 10px 38px 10px 40px;
    color: var(--text-primary, #12141C); caret-color: currentColor;
    cursor: text;
  }
  .oknav__search:focus-within input::placeholder {
    color: var(--text-muted, #717890);
  }
  .oknav__row--nav > .oknav__wrap {
    gap: 6px 8px; padding-top: 6px; padding-bottom: 6px;
  }
  .oknav__mobile-store { min-height: 40px; padding-top: 7px; padding-bottom: 7px; }
  .oknav__cats, .oknav__ofertas { min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
}

/* Teléfono angosto: el total en texto del carrito es lo primero que sobra
   (el globito ya dice cuántas piezas llevas) y el logo cede ancho. */
@media (max-width: 430px) {
  .oknav__cart span:not(.oknav__ct) { display: none; }
  .oknav__cart { padding: 8px 12px; }
  .oknav__logo img { height: 20px; }
  .oknav__brandmark { font-size: 1.14rem; }
  .oknav__wrap { gap: var(--space-2, 8px); padding: 0 var(--space-3, 12px); }
}

/* ── Modo oscuro ─────────────────────────────────────────────────────────
   Casi todo llega solo: styles.css redefine --surface-*, --text-* y
   --border-* en html[data-theme="dark"], y esta barra se construyó sobre esos
   tokens. Aquí solo va lo que no es un token. */
html[data-theme="dark"] .oknav__logo img,
html[data-theme="dark"] .oknav__dhead img { filter: brightness(0) invert(1); }
html[data-theme="dark"] .oknav__brandmark { color: var(--text-primary, #E9EDF6); }
html[data-theme="dark"] .oknav__acth { background: #E9EEF7; border-color: transparent; }
html[data-theme="dark"] .oknav__scrim { background: rgba(0,0,0,.62); }
/* El cinturillo baja de intensidad en oscuro: el azul pleno deslumbra. */
html[data-theme="dark"] .oknav__belt { background: #0A3578; }

@media (prefers-reduced-motion: reduce) {
  .oknav__drawer, .oknav__scrim, .oknav__burger span, .oknav__cats svg { transition: none !important; }
}

/* Accesos directos a la tienda / compra rápida en la fila de servicios.
   Píldoras PLANAS (sin degradado). Especificidad .oknav__links a.oknav__gostore
   para ganarle al enlace de texto base. */
.oknav__links a.oknav__gostore { background: var(--brand-blue, #066CFF); border-color: var(--brand-blue, #066CFF); color: #fff; font-weight: 600; }
.oknav__links a.oknav__gostore:hover { background: var(--brand-blue-hover, #0558CC); color: #fff; }
.oknav__links a.oknav__gostore--rapida { background: var(--brand-purple, #9C1DFF); border-color: var(--brand-purple, #9C1DFF); }
.oknav__links a.oknav__gostore--rapida:hover { background: var(--brand-purple-hover, #7B16CC); }

/* Densidad automática para laptops y viewports bajos. La altura publicada en
   --oknav-h sigue midiéndose en oknav.js, así que paneles y contenido se recolocan
   solos debajo de la barra compactada. */
@media (min-width: 1001px) and (max-width: 1440px), (min-width: 1001px) and (max-height: 820px) {
  .oknav__belt > .oknav__wrap { min-height: 30px; }
  .oknav__row--main > .oknav__wrap { min-height: 60px; }
  .oknav__row--nav > .oknav__wrap { min-height: 48px; }
  .oknav__logo img { height: 23px; }
  .oknav__field { padding-top: 8px; padding-bottom: 8px; }
  .oknav__acct, .oknav__loc { padding-top: 6px; padding-bottom: 6px; }
  .oknav__cats, .oknav__link { padding-top: 6px; padding-bottom: 6px; }
  .oknav__ofertas, .oknav__quick { height: 31px; }
}