/* ============================================================
   MARCO VARNI — Sylius shop chrome
   Styles the storefront affordances layered onto the export header (account /
   cart icons, locale link, burger, off-canvas mobile nav) so they read on BOTH
   the transparent hero header (homepage) and the solid inner-page header.
   Loaded after marcovarni.css / marcovarni-lab.css. Tokens come from
   marcovarni.css (:root --mv-*).
   ============================================================ */

/* ---- Inner-page header occupies layout space ----
   The export header is `position: fixed` (overlays the homepage hero). On every
   other page we make it sticky so it occupies space — that way non-export Sylius
   pages (cart / login / account / checkout) clear it automatically instead of
   sliding underneath. Only the homepage keeps the fixed transparent overlay. */
.mv-header { position: sticky; top: 0; }
.mv-header[data-mv-overlay] { position: fixed; }
/* The export pagehead padding was sized to clear a fixed header; with a sticky
   header that already occupies space it only needs breathing room. */
.mv-pagehead { padding-top: clamp(34px, 5vh, 58px); }

/* ---- Account / cart icons ---- */
.mv-header__icon {
  display: inline-flex; align-items: center; color: var(--mv-ink-soft);
  transition: color 200ms var(--mv-ease);
}
.mv-header__icon:hover { color: var(--mv-gold-deep); }

/* ---- Inactive locale link (matches .mv-lang button look) ---- */
.mv-lang__link {
  color: var(--mv-ink-faint); padding: 6px 2px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em;
  transition: color 200ms var(--mv-ease);
}
.mv-lang__link:hover { color: var(--mv-gold-deep); }

/* ---- Burger (mobile only) ---- */
.mv-burger { display: none; flex-direction: column; gap: 5px; width: 26px; padding: 6px 0; }
.mv-burger span { display: block; height: 1.5px; width: 100%; background: var(--mv-ink); transition: background 200ms var(--mv-ease); }

/* ---- Transparent hero header (homepage, not scrolled): lift chrome to cream ---- */
.mv-header:not(.is-scrolled) .mv-header__icon { color: var(--mv-cream-soft); }
.mv-header:not(.is-scrolled) .mv-header__icon:hover { color: var(--mv-cream); }
.mv-header:not(.is-scrolled) .mv-lang__link { color: var(--mv-cream-faint); }
.mv-header:not(.is-scrolled) .mv-lang__link:hover { color: var(--mv-gold-bright); }
.mv-header:not(.is-scrolled) .mv-burger span { background: var(--mv-cream); }

/* ---- Off-canvas mobile navigation ---- */
.mv-mobile-nav { position: fixed; inset: 0; z-index: 80; }
.mv-mobile-nav[hidden] { display: none; }
.mv-mobile-nav__backdrop { position: absolute; inset: 0; background: rgba(33, 11, 17, 0.6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.mv-mobile-nav__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(340px, 86vw);
  background: var(--mv-marble-raised); border-left: 1px solid var(--mv-gold-line);
  padding: 26px 26px 32px; display: grid; gap: 20px; align-content: start; overflow-y: auto;
}
.mv-mobile-nav__close { justify-self: end; font-size: 28px; line-height: 1; color: var(--mv-ink-faint); transition: color 200ms var(--mv-ease); }
.mv-mobile-nav__close:hover { color: var(--mv-ink); }
.mv-mobile-nav__brand { display: flex; }
.mv-mobile-nav__brand .mv-wordmark__name {
  font-family: var(--mv-serif); font-size: 22px; font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--mv-ink);
}
.mv-mobile-nav__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mv-mobile-nav__links a {
  display: block; padding: 13px 0; border-bottom: 1px solid var(--mv-line-soft);
  font-family: var(--mv-serif); font-size: 22px; font-weight: 500; color: var(--mv-ink);
  transition: color 200ms var(--mv-ease);
}
.mv-mobile-nav__links a:hover { color: var(--mv-gold-deep); }

/* ---- Responsive: swap nav for the burger ---- */
@media (max-width: 1080px) {
  .mv-burger { display: flex; }
}
@media (max-width: 560px) {
  .mv-header__icon { display: none; }
}