/* =================================
   Space Vanta Theme 1.0
   Header: tokens, layout, navigation
   Path: public/header/header.css

   Palette rule: warm ground, cool chrome.

   Layout (desktop), two rows split by job:
     row 1  [logo]  locale ................ Find · Account · Cart     (transactional)
     row 2  [logo]  navigation ............ Vision · Privilege        (browse + brand)
   Follow state (is-condensed): one row  [logo] nav .. brand tools

   Other files:
   - dna/frame.css         island edge, divider, light seam, announcement line
   - dna/featured.css      Find trigger, Vision, Privilege
   - dna/mobile-strip.css  mobile extension strip
   - viewport/*            Find / Vision floating screens
   - drawer/drawer.css     mobile drawer
   - surface/surface.css   warm global background (optional switch)
   ================================= */

:root {
  /* warm ground */
  --sv-ground: #fbf8f3;
  --sv-ground-2: #f4eee4;
  --sv-card: #fffdf9;

  /* ink */
  --sv-ink: #252321;
  --sv-ink-2: #4b443c;
  --sv-muted: #7a7167;
  --sv-line: rgba(120, 104, 84, 0.22);

  /* cool chrome */
  --sv-silver: #cdd0d6;
  --sv-blue: #1d6bff;
  --sv-blue-2: #4d8dff;
  --sv-blue-soft: #eaf1ff;
  --sv-blue-glow: rgba(29, 107, 255, 0.38);

  --sv-cut: 16px;
  --sv-max: 1480px;
  --sv-gap: 12px;

  /* floating levels, warm-tinted shadows (reusable by other sections) */
  --sv-elev-1: 0 1px 2px rgba(70, 48, 24, 0.06), 0 4px 12px -4px rgba(70, 48, 24, 0.10);
  --sv-elev-2: 0 2px 4px rgba(70, 48, 24, 0.06), 0 12px 28px -10px rgba(70, 48, 24, 0.18);
  --sv-elev-3: 0 4px 8px rgba(70, 48, 24, 0.06), 0 24px 48px -16px rgba(70, 48, 24, 0.26);

  --sv-font: "Inter", "Manrope", "Noto Sans SC", "Noto Sans TC", -apple-system, "Segoe UI", sans-serif;
}

html[lang="zh-HK"], html[lang="zh-TW"], html[lang^="zh-Hant"] {
  --sv-font: "Inter", "Noto Sans TC", "Noto Sans HK", -apple-system, sans-serif;
}

[hidden] { display: none !important; }

/* ---------- Wrap / slot ---------- */
.sv-header-wrap {
  position: relative;
  z-index: 100;
  font-family: var(--sv-font);
  color: var(--sv-ink);
}

.sv-header__slot {
  box-sizing: border-box;
  padding: var(--sv-gap) 16px 0;
}

/* ---------- Announcement (warm sand) ---------- */
.sv-header__announcement {
  position: relative;
  background: linear-gradient(90deg, #f3ece0 0%, #faf6ee 50%, #f3ece0 100%);
  color: var(--sv-ink-2);
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.05em;
}
.sv-header__announcement[data-empty] { display: none; }
.sv-header__announcement-track { padding: 8px 16px; min-height: 34px; box-sizing: border-box; }
.sv-header__announcement a,
.sv-header__announcement span { color: inherit; text-decoration: none; display: inline-block; }
.sv-header__announcement a:hover { color: var(--sv-blue); }

/* ---------- Header island ---------- */
.sv-header {
  position: relative;
  max-width: var(--sv-max);
  margin: 0 auto;
  font-family: var(--sv-font);
  font-size: 14px;
  color: var(--sv-ink);
  filter: drop-shadow(0 10px 18px rgba(70, 48, 24, 0.10)) drop-shadow(0 2px 3px rgba(70, 48, 24, 0.07));
}

.sv-header a { color: inherit; text-decoration: none; }
.sv-header :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.sv-header ul { list-style: none; margin: 0; padding: 0; }

.sv-header__surface { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* follow header (state set by follow/follow.js) */
.sv-header.is-following {
  position: fixed;
  top: var(--sv-gap);
  left: 0; right: 0;
  width: calc(100% - 32px);
  margin: 0 auto;
  z-index: 900; /* above page content, below the Find / Vision / drawer layers (10000) */
  transition: transform 0.38s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.sv-header.is-following.is-hidden { transform: translateY(calc(-100% - 28px)); }

/* ---------- Bar: desktop grid ---------- */
.sv-header__bar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "logo locale tools"
    "logo nav    brand";
  column-gap: 32px;
  row-gap: 6px;
  align-items: center;
  padding: 10px 28px 6px;
}

.sv-header__menu-btn { display: none !important; }
.sv-wordmark { grid-area: logo; }
.sv-header__locale { grid-area: locale; }
.sv-header__nav { grid-area: nav; }
.sv-header__tools { grid-area: tools; justify-self: end; }
.sv-header__brand { grid-area: brand; justify-self: end; }

.sv-header__tools { display: flex; align-items: center; gap: 14px; }
.sv-header__brand { display: flex; align-items: center; }

/* condensed (follow state after 60px): single row */
.sv-header.is-condensed .sv-header__bar {
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "logo nav brand tools";
  column-gap: 20px;
  padding: 8px 28px;
}
.sv-header.is-condensed .sv-header__locale { display: none; }
.sv-header.is-condensed .sv-header__nav > ul { justify-content: center; }

/* ---------- Language / currency (mounted by the Shopline app) ---------- */
.sv-header__locale {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 22px;
  font-size: 12px;
  color: var(--sv-muted);
}

/* ---------- Wordmark ---------- */
.sv-wordmark { display: inline-flex; align-items: center; gap: 12px; --sv-logo-h: 44px; }
.sv-wordmark__img { display: block; height: var(--sv-logo-h); width: auto; max-width: 200px; object-fit: contain; mix-blend-mode: multiply; }
.sv-wordmark__mark { width: var(--sv-logo-h); height: var(--sv-logo-h); flex: none; }
.sv-wordmark__text { font-weight: 500; font-size: 15px; letter-spacing: 0.06em; white-space: nowrap; }
.sv-wordmark__s { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.sv-wordmark__v { font-size: 21px; font-weight: 700; line-height: 1; margin-left: 4px; }

.sv-header.is-condensed .sv-wordmark { --sv-logo-h: 36px; }

/* ---------- Navigation (row 2) ---------- */
.sv-header__nav > ul { display: flex; gap: 2px; justify-content: flex-start; flex-wrap: nowrap; }
.sv-header__nav-item { position: static; }
.sv-header__nav-item > a {
  position: relative;
  display: inline-block;
  padding: 11px 14px 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.sv-header__nav-item > a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  background: var(--sv-blue);
  box-shadow: 0 0 8px var(--sv-blue-glow);
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.sv-header__nav-item:hover > a::after,
.sv-header__nav-item:focus-within > a::after { transform: scaleX(1); }

.sv-header__dropdown {
  position: absolute;
  left: 0; right: 0; top: 100%;
  padding-top: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 5;
}
.sv-header__nav-item:hover > .sv-header__dropdown,
.sv-header__nav-item:focus-within > .sv-header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.sv-header__dropdown > ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 24px 32px;
  padding: 28px 32px 32px;
  background: linear-gradient(180deg, #fffefb, #fbf7f0);
  clip-path: polygon(var(--sv-cut) 0, 100% 0, 100% calc(100% - var(--sv-cut)), calc(100% - var(--sv-cut)) 100%, 0 100%, 0 var(--sv-cut));
}
.sv-header__dropdown > ul > li > a { display: inline-block; margin-bottom: 8px; font-weight: 600; }
.sv-header__level-3 li a { display: block; padding: 4px 0; color: var(--sv-muted); }
.sv-header__level-3 li a:hover,
.sv-header__dropdown a:hover { color: var(--sv-blue); }

/* ---------- Account ---------- */
.sv-account { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sv-ink-2); }
.sv-account__icon { width: 18px; height: 18px; }
.sv-account:hover { color: var(--sv-blue); }

/* ---------- Cart ---------- */
.sv-actions__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
}
.sv-actions__icon { width: 24px; height: 24px; }
.sv-actions__cart:hover { color: var(--sv-blue); }

/* badge: only when the cart has items */
.sv-actions__badge { display: none; }
.sv-actions__badge.has-items {
  display: block;
  position: absolute;
  top: 3px; right: 0;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  background: var(--sv-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .sv-header__bar { padding-left: 20px; padding-right: 20px; column-gap: 20px; }
  .sv-header__nav-item > a { padding-left: 10px; padding-right: 10px; }
  .sv-account__label { display: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .sv-header__slot { padding: 8px 10px 0; }
  .sv-header.is-following { width: calc(100% - 20px); top: 8px; }

  .sv-header__bar,
  .sv-header.is-condensed .sv-header__bar {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "menu logo tools";
    column-gap: 6px;
    padding: 6px 10px;
  }

  .sv-header__menu-btn {
    grid-area: menu;
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 40px; height: 40px;
  }
  .sv-header__menu-btn span { display: block; width: 20px; height: 1.5px; background: var(--sv-ink); }

  /* locale moves into the drawer; nav lives in the drawer; brand lives in the strip */
  .sv-header .sv-header__locale { display: none; }
  .sv-header__nav { display: none; }
  .sv-header__brand { display: none; }

  .sv-header__tools { gap: 2px; }
  .sv-account { width: 38px; height: 40px; justify-content: center; }
  .sv-account__label { display: none; }
  .sv-account__icon { width: 22px; height: 22px; }

  .sv-wordmark,
  .sv-header.is-condensed .sv-wordmark { --sv-logo-h: 32px; }
  .sv-wordmark__s { font-size: 23px; }
  .sv-wordmark__v { font-size: 17px; }
  .sv-wordmark__text { font-size: 13px; }
}

@media (max-width: 380px) {
  .sv-wordmark { gap: 8px; }
  .sv-wordmark__text { font-size: 11px; letter-spacing: 0.03em; }
  .sv-wordmark__s { font-size: 19px; }
  .sv-wordmark__v { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-header * { transition: none !important; animation: none !important; }
  .sv-header.is-following { transition: none; }
}

/* very narrow phones: keep the Find word, tighten the rest */
@media (max-width: 380px) {
  .sv-header__bar,
  .sv-header.is-condensed .sv-header__bar { padding-left: 6px; padding-right: 6px; column-gap: 4px; }
  .sv-header__menu-btn { width: 36px; }
  .sv-account { width: 34px; }
  .sv-actions__cart { width: 38px; }
}