.announcement { display:flex; justify-content:center; gap:.5rem; padding:.38rem 1rem; background:#eee8de; color:#63594d; font-size:.64rem; letter-spacing:.12em; text-align:center; text-transform:uppercase; }
.site-header { position:sticky; z-index:var(--z-header); top:0; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; min-height:4.75rem; padding:0 var(--gutter); border-bottom:1px solid var(--line); background:rgba(248,246,242,.97); backdrop-filter:blur(10px); view-transition-name:storefront-header; }
.wordmark { display:inline-flex; width:max-content; align-items:center; color:var(--ink); line-height:1; }
.wordmark img { display:block; width:auto; height:2.35rem; max-width:min(48vw,12rem); object-fit:contain; }
.footer-brand .wordmark img { height:2.05rem; }
::view-transition-image-pair(storefront-header),::view-transition-image-pair(admin-brand-area) { isolation:auto; }
::view-transition-old(storefront-header),::view-transition-new(storefront-header),::view-transition-old(admin-brand-area),::view-transition-new(admin-brand-area) { display:block; animation:none !important; mix-blend-mode:normal; }
.desktop-nav,.header-actions { display:flex; align-items:center; }
.desktop-nav { justify-content:center; gap:clamp(1rem,3vw,2.8rem); }
.desktop-nav a,.header-actions a { font-size:.78rem; }
.desktop-nav a:hover,.desktop-nav a[aria-current="page"],.footer-column a:hover { color:var(--accent); }
.header-actions { justify-content:flex-end; gap:1.4rem; }
.bag-link { white-space:nowrap; }
.bag-count { display:inline-grid; min-width:1.3rem; height:1.3rem; place-items:center; margin-left:.2rem; border-radius:50%; background:var(--soft); font-size:.68rem; }
.menu-toggle { display:none; width:2.8rem; height:2.8rem; padding:.7rem; border:0; background:none; }
.menu-toggle span { display:block; width:1.25rem; height:1px; margin:.32rem auto; background:var(--ink); transition:transform var(--duration-fast); }
.mobile-nav { display:none; }
.site-main { min-height:55vh; }
.shell { width:min(var(--container),100%); margin-inline:auto; padding-inline:var(--gutter); }
.page-shell { padding-top:1.6rem; padding-bottom:var(--space-9); }
.site-footer { padding:4rem var(--gutter) 1.4rem; background:#f0ece5; }
.footer-main,.footer-bottom { width:min(var(--container),100%); margin-inline:auto; }
.footer-main { display:grid; grid-template-columns:1.45fr .8fr .8fr 1fr; gap:3rem; padding-bottom:3.4rem; }
.footer-brand p,.footer-note p { margin:1.2rem 0 0; color:var(--muted); font-size:.82rem; }
.footer-note p { margin-top:0; }
.footer-column { display:grid; align-content:start; gap:.62rem; }
.footer-column h2 { margin:0 0 .55rem; font-size:.72rem; font-weight:600; }
.footer-column a { width:max-content; color:var(--muted); font-size:.78rem; }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem; padding-top:1rem; border-top:1px solid var(--line); color:var(--muted); font-size:.67rem; }
.sample-disclosure { text-align:right; }
@media (min-width:761px) and (max-width:900px) {
  .site-header { column-gap:.6rem; }
  .desktop-nav { gap:.75rem; }
  .desktop-nav a { font-size:.68rem; }
  .header-actions { gap:.6rem; }
  .site-header .wordmark img { height:2rem; max-width:min(18vw,11rem); }
}
@media (max-width:760px) {
  .site-header { grid-template-columns:1fr auto; min-height:4.1rem; }
  .desktop-nav { display:none; }
  .header-actions { gap:1rem; }
  .menu-toggle { display:block; }
  .mobile-nav:not([hidden]) { position:sticky; z-index:var(--z-menu); top:4.1rem; display:grid; padding:.5rem var(--gutter) 1rem; border-bottom:1px solid var(--line); background:var(--bg); box-shadow:0 12px 22px rgba(41,40,35,.06); }
  .mobile-nav a { padding:.82rem 0; border-bottom:1px solid var(--line); font-size:.9rem; }
  .mobile-nav a:last-child { border:0; }
  .footer-main { grid-template-columns:1fr 1fr; gap:2rem 1.2rem; }
  .footer-brand { grid-column:1/-1; }
  .footer-note { grid-column:1/-1; }
  .footer-bottom { font-size:.64rem; }
}
@media (max-width:420px) { .announcement { font-size:.56rem; letter-spacing:.09em; } .site-header .wordmark img { height:2.05rem; max-width:43vw; } .header-actions { gap:.7rem; } .header-actions a { font-size:.72rem; } }
@media (max-width:360px) { .site-header .wordmark img { max-width:35vw; } .header-actions { gap:.45rem; } .menu-toggle { width:2.55rem; } }
@media (prefers-reduced-motion:reduce) { ::view-transition-group(*) { animation-duration:0s !important; } }