/* ============================================================================
   SORA LIFE V2 — ANNOUNCEMENT + HEADER
   Sharp geometry: the announcement bar and the header are edge-attached, so
   both are radius 0. Header icons are bare thin-line glyphs — no bubbles.
   ========================================================================= */

/* --------------------------------------------------------- announcement */
.v2-ann {
  background:var(--slv2-f800); color:#EFE7D6;
  border-radius:0;
  display:flex; align-items:center; justify-content:center;
  height:32px; padding:0 10px; overflow:hidden;
}
.v2-ann__viewport { display:flex; align-items:center; gap:10px; min-width:0; }
.v2-ann__item {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--slv2-sans);
  font-size:10px; font-weight:600; letter-spacing:.085em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transform:translateY(4px);
  animation:v2-ann-in .5s ease forwards;
}
.v2-ann__item svg { color:var(--slv2-gold-2); flex:0 0 auto; }
.v2-ann__dots { display:none; }
@keyframes v2-ann-in { to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .v2-ann__item { animation:none; opacity:1; transform:none; }
}
@media (min-width: 768px) {
  .v2-ann { height:38px; }
  .v2-ann__viewport { gap:26px; }
  .v2-ann__item { font-size:11.5px; letter-spacing:.11em; }
}

/* --------------------------------------------------------------- header */
.v2-hdr {
  background:var(--slv2-ivory);
  border-bottom:1px solid var(--slv2-line-2);
  border-radius:0;
  position:sticky; top:0; z-index:60;
}
.v2-hdr__bar {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  height:56px; gap:8px;
  width:100%; max-width:var(--slv2-container); margin-inline:auto;
  padding-inline:var(--slv2-gutter);
}
.v2-hdr__left  { display:flex; align-items:center; gap:16px; min-width:0; }
.v2-hdr__right { display:flex; align-items:center; justify-content:flex-end; gap:16px; min-width:0; }
.v2-hdr__brand { display:flex; align-items:center; justify-content:center; min-width:0; }

/* The Logo component is untouched; V2 only constrains its box here. */
.v2-hdr__brand .logo,
.v2-hdr__brand .logo--img { display:inline-flex; align-items:center; text-decoration:none; }
.v2-hdr__brand .logo__img { height:30px; width:auto; display:block; }
@media (min-width: 768px) { .v2-hdr__brand .logo__img { height:39px; } }
@media (min-width: 1024px) { .v2-hdr__brand .logo__img { height:46px; } }
@media (max-width: 359px) { .v2-hdr__brand .logo__img { height:25px; } }

/* Bare icon actions — square hit area, no container */
.v2-hdr__act {
  position:relative; display:inline-grid; place-items:center;
  width:28px; height:28px; color:var(--slv2-ink-2);
  background:none; border:0; padding:0; cursor:pointer; text-decoration:none;
  border-radius:var(--slv2-r-ui);
}
.v2-hdr__act::after { content:""; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%,-50%); }
.v2-hdr__act:hover { color:var(--slv2-f700); }
.v2-hdr__act:focus-visible { outline:2px solid var(--slv2-f500); outline-offset:2px; }
/* V2-scoped responsive utilities. The legacy .only-mobile/.hide-mobile pair
   is single-class and loses to .v2-hdr__act's own display, so the header
   carries its own two-class versions instead. */
.v2-hdr__act.v2-only-mobile { display:inline-grid; }
.v2-hdr__act.v2-hide-mobile { display:none; }
@media (min-width: 901px) {
  .v2-hdr__act.v2-only-mobile { display:none; }
  .v2-hdr__act.v2-hide-mobile { display:inline-grid; }
}

.v2-hdr__count {
  position:absolute; top:-5px; right:-7px; min-width:15px; height:15px; padding:0 3px;
  background:var(--slv2-f700); color:var(--slv2-ivory);
  border-radius:var(--slv2-r-ui);            /* rectangular label, not a bubble */
  font-family:var(--slv2-sans);
  font-size:9px; font-weight:700; line-height:1;
  display:grid; place-items:center; font-variant-numeric:tabular-nums;
}

/* ---- desktop search field, sits in the left utility slot ---- */
.v2-hdr__search { display:none; position:relative; }
.v2-hdr__searchbox {
  display:flex; align-items:center; gap:9px;
  width:270px; height:40px; padding:0 12px;
  background:var(--slv2-cream); border:1px solid var(--slv2-line);
  border-radius:var(--slv2-r-ui);
}
.v2-hdr__searchbox input {
  flex:1; min-width:0; border:0; background:none; outline:none;
  font-family:var(--slv2-sans); font-size:12.5px; color:var(--slv2-ink);
}
.v2-hdr__searchbox input::placeholder { color:var(--slv2-ink-4); }
.v2-hdr__searchbox button { background:none; border:0; padding:0; display:grid; place-items:center; color:var(--slv2-ink-3); cursor:pointer; }
.v2-hdr__suggest {
  position:absolute; top:calc(100% + 6px); left:0; width:320px; z-index:70;
  background:var(--slv2-paper); border:1px solid var(--slv2-line);
  border-radius:var(--slv2-r-ui); overflow:hidden;
  box-shadow:var(--slv2-sh-hover);
}
.v2-hdr__suggest-item {
  display:grid; grid-template-columns:38px 1fr auto; gap:10px; align-items:center;
  padding:8px 12px; text-decoration:none; color:var(--slv2-ink);
  border-bottom:1px solid var(--slv2-line-2);
}
.v2-hdr__suggest-item:last-child { border-bottom:0; }
.v2-hdr__suggest-item:hover { background:var(--slv2-cream); }
.v2-hdr__suggest-thumb { width:38px; height:38px; overflow:hidden; border:1px solid var(--slv2-line-2); border-radius:var(--slv2-r-ui); }
.v2-hdr__suggest-name { font-size:12.5px; font-weight:500; line-height:1.3; }
.v2-hdr__suggest-price { font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.v2-hdr__suggest-empty { padding:14px; font-size:12.5px; color:var(--slv2-ink-3); }

/* ---- desktop nav row ---- */
.v2-hdr__nav { display:none; }
@media (min-width: 901px) {
  .v2-hdr__bar { height:74px; }
  .v2-hdr__search { display:block; }
  .v2-hdr__nav {
    display:flex; justify-content:center; gap:30px;
    border-top:1px solid var(--slv2-line-2);
    padding:13px var(--slv2-gutter);
    max-width:var(--slv2-container); margin-inline:auto;
  }
  .v2-hdr__navitem { position:relative; }
  .v2-hdr__link {
    display:inline-flex; align-items:center; gap:5px;
    font-family:var(--slv2-sans);
    font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
    color:var(--slv2-ink-2); text-decoration:none;
    padding-bottom:2px; border-bottom:2px solid transparent; border-radius:0;
  }
  .v2-hdr__link:hover { color:var(--slv2-f700); }
  .v2-hdr__link.active { color:var(--slv2-f700); border-bottom-color:var(--slv2-f700); }
  .v2-hdr__mega {
    position:absolute; top:calc(100% + 13px); left:50%; transform:translateX(-50%);
    width:min(760px, 90vw); background:var(--slv2-paper);
    border:1px solid var(--slv2-line); border-radius:var(--slv2-r-ui);
    padding:20px; z-index:70; box-shadow:var(--slv2-sh-hover);
    opacity:0; visibility:hidden; transition:opacity .16s ease;
  }
  .v2-hdr__navitem:hover .v2-hdr__mega,
  .v2-hdr__navitem:focus-within .v2-hdr__mega { opacity:1; visibility:visible; }
  .v2-hdr__mega-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:2px 20px; }
  .v2-hdr__mega-cell { display:block; padding:9px 10px; text-decoration:none; border-radius:var(--slv2-r-ui); }
  .v2-hdr__mega-cell:hover { background:var(--slv2-cream); }
  .v2-hdr__mega-name { display:block; font-size:13px; font-weight:600; color:var(--slv2-ink); }
  .v2-hdr__mega-tag  { display:block; font-size:11px; color:var(--slv2-ink-4); margin-top:2px; }
  .v2-hdr__mega-all {
    display:inline-flex; align-items:center; gap:6px; margin-top:14px;
    font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:var(--slv2-f700); text-decoration:none;
  }
}
@media (prefers-reduced-motion: reduce) { .v2-hdr__mega { transition:none; } }

/* Below the desktop breakpoint the mega panel must never paint. */
@media (max-width: 900px) { .v2-hdr__mega { display:none; } }
/* Mobile header: move brand from centered column toward the left */
@media (max-width:900px) {
  .v2-hdr__bar {
    grid-template-columns:auto 1fr auto;
  }

  .v2-hdr__brand {
    justify-content:flex-start;
    margin-left:8px;
  }
}

/* Nav placeholder: holds a link's exact slot while the category list settles,
   so hydration cannot reflow the row or swap a label under the cursor. */
.v2-hdr__link--ph {
  position: relative;
  color: transparent;          /* reserves the label's exact width, unseen */
  pointer-events: none;
  user-select: none;
}
.v2-hdr__link--ph::after {     /* the visible "loading" bar */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 11px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: rgba(22, 33, 27, 0.11);
}
@media (prefers-reduced-motion: no-preference) {
  .v2-hdr__link--ph { transition: opacity .2s ease; }
}