/* ═══════════════════════════════════════════════════════════════════
   LaPlataVP — Shell V3 (Phase 2A.1)
   Global shell chrome shared by every route: drawer primitive, menu
   drawer, header menu trigger, navbar scroll-state hooks.

   Visual language: white / off-white surfaces, navy ink, system font,
   hairlines. No gradients, no glow, no colorful glass.
   Loaded after storefront-v3.css. Route-themed header/nav styling stays
   in style.css (legacy dark) and storefront-v3.css (V3 light).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --shell-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --shell-surface: #ffffff;
  --shell-surface-muted: #f5f5f7;
  --shell-ink: #0a1425;
  --shell-ink-secondary: #5a6472;
  --shell-ink-tertiary: #8a929e;
  --shell-brand: #0f2a5a;
  --shell-hairline: rgba(10, 20, 37, 0.12);
  --shell-hairline-soft: rgba(10, 20, 37, 0.07);
  --shell-scrim: rgba(10, 20, 37, 0.34);
  --shell-focus: 2px solid #0f2a5a;
  --shell-radius: 12px;
  --shell-control: 44px;
  --shell-drawer-w: 400px;
  --shell-drawer-pad: 24px;
  --shell-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --shell-dur: 0.26s;
  /* Above minicart (100) and filters; the shell keeps one active drawer at a time. */
  --shell-z-scrim: 120;
  --shell-z-drawer: 121;
}

/* ─── Header composition ───────────────────────────────────────────────
   All breakpoints: [ Menu (+ Advisor on phone) ] ........ [ Logo centered in viewport ] ........ [ Search ] [ Cart ]
   Checkout keeps its own back + right-logo flex composition. */
.nav-menu-btn {
  /* Inherits .nav-icon-btn geometry (44px hit area). The 44px box is wider than
     its 20–22px glyph, so pull it back by the inner slack to sit the glyph on the
     container's content edge instead of floating 11px inside it. */
  flex: 0 0 auto;
  margin-left: -11px;
}
.nav-menu-btn svg {
  width: 22px;
  height: 22px;
  display: block;
}
html.lpvp-storefront-v3 .nav-menu-btn svg {
  width: var(--v3-icon);
  height: var(--v3-icon);
}
.nav-cluster-left {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}
.nav-advisor-btn {
  flex: 0 0 auto;
  background: transparent;
}
.nav-advisor-btn img {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
  background: transparent;
  border-radius: 0;
  /* Owner advisor webp already has a transparent canvas. Render it as-is so
     the original cyan/gold mark stays intact on the white header. */
  filter: none;
  mix-blend-mode: normal;
}
html.lpvp-storefront-v3:not(.lpvp-chrome-checkout) .navbar .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
}
html.lpvp-storefront-v3:not(.lpvp-chrome-checkout) .navbar .container > * {
  grid-row: 1;
}
html.lpvp-storefront-v3:not(.lpvp-chrome-checkout) .navbar .container > .nav-cluster-left,
html.lpvp-storefront-v3:not(.lpvp-chrome-checkout) .navbar .container > .nav-menu-btn {
  grid-column: 1;
  justify-self: start;
}
html.lpvp-storefront-v3:not(.lpvp-chrome-checkout) .navbar .container > .chk-shell-back {
  grid-column: 1;
}
html.lpvp-storefront-v3:not(.lpvp-chrome-checkout) .navbar .container > .brand-logo {
  grid-column: 2;
  justify-self: center;
  margin-left: 0;
  margin-right: 0;
}
html.lpvp-storefront-v3:not(.lpvp-chrome-checkout) .navbar .container > .nav-actions {
  grid-column: 3;
  justify-self: end;
  margin-left: 0;
}
@media (min-width: 601px) {
  /* Desktop header stays [ Menu ] [ Logo ] [ Search Cart ]. Advisor lives in the menu. */
  html.lpvp-storefront-v3 .nav-advisor-btn {
    display: none;
  }
}
@media (max-width: 600px) {
  html.lpvp-storefront-v3 .nav-advisor-btn {
    display: inline-flex;
  }
  html.lpvp-storefront-v3 .nav-advisor-btn img {
    width: 26px;
    height: 26px;
    background: transparent;
    filter: none;
    mix-blend-mode: normal;
  }
}

/* Screen-reader-only helper for shell markup (e.g. external-link hint). */
.shell-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── Scrim ─── */
.shell-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--shell-z-scrim);
  background: var(--shell-scrim);
  opacity: 0;
  transition: opacity var(--shell-dur) ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.shell-scrim[data-state="open"] {
  opacity: 1;
}
.shell-scrim[hidden] {
  display: none;
}

/* ─── Drawer primitive (LEFT-anchored side panel) ───
   The menu trigger sits on the left of the header, so the panel emerges from
   the left edge (Phase 2A.1.3 owner correction). Scrim covers the rest. */
.shell-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: var(--shell-z-drawer);
  width: min(100vw, var(--shell-drawer-w));
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--shell-surface);
  color: var(--shell-ink);
  font-family: var(--shell-font);
  border-right: 1px solid var(--shell-hairline);
  box-shadow: 1px 0 0 rgba(10, 20, 37, 0.04);
  transform: translate3d(-100%, 0, 0);
  transition: transform var(--shell-dur) var(--shell-ease);
  will-change: transform;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  outline: none;
}
.shell-drawer[data-state="open"] {
  transform: translate3d(0, 0, 0);
}
.shell-drawer[hidden] {
  display: none;
}
.shell-drawer *,
.shell-drawer *::before,
.shell-drawer *::after {
  box-sizing: border-box;
  font-family: inherit;
}

/* Head: label sits on the content edge (same left pad as the lists); the close
   glyph sits on the right content edge — the 44px hit box overhangs the padding
   by the glyph slack (12px) so the visible "×" aligns, not the invisible box. */
.shell-drawer-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: calc(6px + env(safe-area-inset-top, 0px)) calc(var(--shell-drawer-pad) - 12px) 6px var(--shell-drawer-pad);
  border-bottom: 1px solid var(--shell-hairline-soft);
}
.shell-drawer-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--shell-ink-tertiary);
}
/* Close: quiet glyph, full 44px hit target, no ring/outline/shadow. */
.shell-drawer-close {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--shell-ink-secondary);
  width: var(--shell-control);
  height: var(--shell-control);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color 0.16s ease, background 0.16s ease;
}
.shell-drawer-close svg {
  width: 20px;
  height: 20px;
  display: block;
}
.shell-drawer-close:hover {
  color: var(--shell-ink);
  background: var(--shell-surface-muted);
}
.shell-drawer-close:active {
  color: var(--shell-ink);
  background: var(--shell-hairline-soft);
}
.shell-drawer a:focus-visible {
  outline: var(--shell-focus);
  outline-offset: 2px;
}
/* Close receives initial focus on open; WebKit paints :focus-visible for script
   focus even after a pointer tap, so keep the ring tight around the glyph rather
   than boxing the whole 44px hit area. */
.shell-drawer-close:focus-visible {
  outline: var(--shell-focus);
  outline-offset: -5px;
}

.shell-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 0 20px;
}

.shell-drawer-foot {
  flex: 0 0 auto;
  padding: 16px var(--shell-drawer-pad) calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--shell-hairline-soft);
}

/* ─── Menu drawer information architecture ───
   Primary (Inicio / Catálogo + categories / Asesor) → hairline →
   institutional (Envíos / Cambios / Contacto). Rhythm: 8px list gutters,
   16px group gap, 48px primary rows, 44px secondary rows. */
.shell-menu-list {
  list-style: none;
  margin: 0;
  padding: 4px var(--shell-drawer-pad) 12px;
}
.shell-menu-list + .shell-menu-list {
  border-top: 1px solid var(--shell-hairline-soft);
  margin-top: 8px;
  padding-top: 16px;
}
.shell-menu-list li {
  margin: 0;
  padding: 0;
}
.shell-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 0;
  color: var(--shell-ink);
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  transition: color 0.16s ease;
}
.shell-menu-link:hover {
  color: var(--shell-brand);
}
.shell-menu-link[aria-current="page"] {
  color: var(--shell-brand);
}
.shell-menu-list--secondary .shell-menu-link {
  min-height: 44px;
  padding: 8px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--shell-ink-secondary);
}
.shell-menu-list--secondary .shell-menu-link:hover {
  color: var(--shell-ink);
}
.shell-menu-sub {
  list-style: none;
  margin: -2px 0 6px;
  padding: 0 0 0 16px;
  border-left: 1px solid var(--shell-hairline);
}
.shell-menu-sub a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 0;
  color: var(--shell-ink-secondary);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  transition: color 0.16s ease;
}
.shell-menu-sub a:hover {
  color: var(--shell-brand);
}
/* Contacto opens WhatsApp in a new tab; the arrow glyph was the only trailing
   icon in the list and read as clutter — the hint is now screen-reader-only. */

/* Legal utility (consumer rights) — a utility control, not a navigation entry.
   Muted band + label + outlined control keep it visible on every route while
   reading as separate from the list above ("Cambios y arrepentimiento"). */
.shell-menu-legal-utility {
  background: var(--shell-surface-muted);
  border-top: 1px solid var(--shell-hairline);
}
.shell-menu-legal-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--shell-ink-tertiary);
}
.shell-menu-legal-label a,
.shell-menu-legal-text {
  color: inherit;
  text-decoration: none;
}
.shell-menu-legal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--shell-hairline);
  border-radius: 8px;
  background: var(--shell-surface);
  color: var(--shell-brand);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color 0.16s ease, background 0.16s ease;
}
.shell-menu-legal:hover {
  border-color: var(--shell-brand);
  text-decoration: none;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  :root {
    --shell-drawer-w: 360px;
    --shell-drawer-pad: 20px;
  }
  .shell-drawer {
    width: min(88vw, var(--shell-drawer-w));
  }
  .shell-menu-link {
    font-size: 19px;
  }
}

@media (max-width: 380px) {
  .shell-drawer {
    width: 100vw;
    border-right: 0;
  }
}

.shell-drawer[data-state="open"] .shell-menu-link {
  animation: shell-menu-in 180ms var(--shell-ease) both;
}
.shell-drawer[data-state="open"] .shell-menu-list--primary li:nth-child(1) .shell-menu-link { animation-delay: 20ms; }
.shell-drawer[data-state="open"] .shell-menu-list--primary li:nth-child(2) .shell-menu-link { animation-delay: 40ms; }
.shell-drawer[data-state="open"] .shell-menu-list--primary li:nth-child(3) .shell-menu-link { animation-delay: 60ms; }
.shell-drawer[data-state="open"] .shell-menu-list--primary li:nth-child(4) .shell-menu-link { animation-delay: 80ms; }
.shell-drawer[data-state="open"] .shell-menu-list--primary li:nth-child(5) .shell-menu-link { animation-delay: 100ms; }
@keyframes shell-menu-in {
  from { opacity: 0.55; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .shell-drawer,
  .shell-scrim {
    transition: none;
  }
  .shell-drawer[data-state="open"] .shell-menu-link {
    animation: none;
  }
}

/* While a shell drawer is open the bottom nav is suspended by app.js
   (nav-suspended); this only guarantees the scrim covers floating chrome. */
html.shell-drawer-open .floating-wa {
  pointer-events: none;
}