/* Shared 21st collections-navigation layout in the site's fine-line language. */
:root { --site-nav-height:80px; }
html { scroll-padding-top:calc(var(--site-nav-height) + 20px); }
.site-header { --site-ink:#edf3f3; --site-muted:#a2b5bf; --site-rule:#a4c6ca36; --site-surface:#07111a; position:fixed; inset:0 0 auto; z-index:95; height:var(--site-nav-height); color:var(--site-ink); background:var(--site-surface); border-bottom:1px solid var(--site-rule); transition:background .24s,color .24s,border-color .24s; }
.site-header[data-tone="paper"] { --site-ink:#192326; --site-muted:#657175; --site-rule:#1721252b; --site-surface:#f2f1ee; background:transparent; }
.site-header-inner { height:100%; width:min(1520px,92%); margin-inline:auto; display:flex; justify-content:space-between; align-items:center; gap:30px; }
.site-brand { display:flex; align-items:center; min-height:44px; flex-shrink:0; padding-inline-end:10px; color:var(--site-ink); }
.site-brand-word { font:400 23px/1 Anton,Arial,sans-serif; letter-spacing:.04em; white-space:nowrap; }
.site-brand-mark { display:inline-block; color:#ef493d; font-size:28px; margin-left:7px; }
.site-brand-small { display:none; font:400 28px/1 Anton,Arial,sans-serif; }
.site-brand-small span { color:#ef493d; margin-left:6px; }
.site-desktop-nav { display:flex; align-items:center; gap:25px; height:100%; }
.site-nav-link { min-height:44px; display:inline-flex; align-items:center; position:relative; font-size:12px; white-space:nowrap; color:var(--site-muted); }
.site-nav-link::after { content:""; position:absolute; inset:auto 0 3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .2s; }
.site-nav-link:hover,.site-nav-link[aria-current="page"] { color:var(--site-ink); }
.site-nav-link:hover::after,.site-nav-link[aria-current="page"]::after { transform:scaleX(1); }
.site-store-combo { display:flex; height:100%; align-items:center; gap:2px; }
.site-category-trigger { display:grid; place-items:center; width:30px; height:44px; padding:0; border:0; background:none; color:var(--site-muted); }
.site-category-trigger svg { width:16px; height:16px; transition:transform .2s; }
.site-category-trigger[aria-expanded="true"] { color:var(--site-ink); }
.site-category-trigger[aria-expanded="true"] svg { transform:rotate(180deg); }
.site-header-actions { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.site-shop-action { position:relative; display:flex; align-items:center; justify-content:center; gap:18px; min-height:42px; padding:9px 15px; border:1px solid var(--site-rule); font-size:11px; white-space:nowrap; }
.site-shop-action::before,.site-shop-action::after { content:""; position:absolute; width:5px; height:5px; top:-1px; right:-1px; border-top:1px solid currentColor; border-right:1px solid currentColor; }
.site-shop-action::after { inset:auto auto -1px -1px; transform:rotate(180deg); }
.site-shop-action:hover { border-color:var(--site-ink); background:#9eb9bd0c; }
.site-shop-action .lucide { width:16px; height:16px; }
.site-reading-progress { position:absolute; inset:auto 0 -1px; height:1px; background:#a5e2dd; transform:scaleX(var(--site-reading,0)); transform-origin:right; pointer-events:none; }
.site-header[data-tone="paper"] .site-reading-progress { background:#ec5547; }
.site-category-panel { position:absolute; top:calc(100% + 1px); right:clamp(20px,24%,430px); width:590px; padding:18px; display:grid; grid-template-columns:1.15fr 1fr; gap:20px; background:var(--site-surface); color:var(--site-ink); border:1px solid var(--site-rule); box-shadow:0 24px 50px #0002; }
.site-category-panel[hidden] { display:none; }
.site-category-list { padding:5px 3px; }
.site-panel-eyebrow { display:block; font-size:11px; color:var(--site-muted); padding:0 11px 12px; }
.site-category-link { display:flex; gap:13px; align-items:center; min-height:76px; padding:11px; border-top:1px solid var(--site-rule); }
.site-category-link:hover { background:#a8bec40b; }
.site-category-link>span:nth-child(2) { flex:1; }
.site-category-number { display:none; }
.site-category-link b { display:block; font-size:12px; font-weight:500; }
.site-category-link small { display:block; font-size:11px; margin-top:6px; line-height:1.7; color:var(--site-muted); }
.site-category-link .lucide { width:14px; height:14px; }
.site-all-products { display:flex; align-items:center; justify-content:space-between; font-size:11px; padding:14px 11px 2px; border-top:1px solid var(--site-rule); }
.site-all-products .lucide { width:14px; height:14px; }
.site-featured { min-width:0; position:relative; display:flex; flex-direction:column; background:#abcbd80a; border:1px solid var(--site-rule); padding:15px; }
.site-featured-label { font:11px/1.4 Arial,sans-serif; letter-spacing:.16em; color:var(--site-muted); }
.site-featured img { display:block; width:100%; min-height:0; height:210px; object-fit:contain; flex:1; }
.site-featured>span:last-child { display:flex; align-items:center; justify-content:space-between; font-size:11px; }
.site-featured .lucide { width:14px; height:14px; }
.site-mobile-trigger { display:none; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--site-rule); background:transparent; color:var(--site-ink); }
.site-mobile-trigger>svg { width:23px; height:23px; }
.site-mobile-menu { position:fixed; inset:0 0 0 auto; margin:0; width:min(440px,92vw); height:100dvh; max-width:none; max-height:100dvh; padding:0 26px 28px; color:#edf3f3; background:#07111a; border:0; border-left:1px solid #b5d8d644; overflow-y:auto; overscroll-behavior:contain; }
.site-mobile-menu::backdrop { background:#01070bbd; }
.site-mobile-top { display:flex; align-items:center; justify-content:space-between; height:86px; border-bottom:1px solid #abc5ce2e; }
.site-mobile-top h2 { margin:0; font:400 23px/1 Anton,Arial,sans-serif; letter-spacing:.03em; }
.site-mobile-top h2 span { color:#ef493d; margin-left:5px; }
.site-mobile-close { display:grid; place-items:center; width:42px; height:42px; border:1px solid #abc5ce40; color:inherit; background:transparent; padding:0; }
.site-mobile-close .lucide { width:18px; height:18px; }
.site-mobile-nav { display:grid; padding:22px 0; }
.site-mobile-nav>a { display:flex; align-items:center; gap:18px; min-height:59px; border-bottom:1px solid #abc5ce1c; font-size:15px; color:#c1cfd6; }
.site-mobile-nav>a[aria-current="page"] { color:#aee7df; }
.site-mobile-nav>a>span:nth-child(2) { flex:1; }
.site-mobile-index { display:none; }
.site-mobile-nav .lucide { width:16px; height:16px; }
.site-mobile-categories { padding:10px 0 27px; }
.site-mobile-categories h3 { font-size:11px; font-weight:400; color:#839ca7; margin:0 0 12px; }
.site-mobile-categories>a { display:flex; align-items:center; justify-content:space-between; min-height:42px; font-size:12px; }
.site-mobile-categories .lucide { width:14px; height:14px; color:#95c5c8; }
.site-mobile-bottom { position:relative; display:block; border:1px solid #abc5ce40; padding:17px 20px; }
.site-mobile-bottom>span { display:block; font-size:11px; color:#9fb7c1; margin-bottom:8px; }
.site-mobile-bottom strong { font-size:14px; font-weight:500; }
.site-mobile-bottom .lucide { position:absolute; left:20px; top:calc(50% - 9px); }
@media(min-width:1021px) and (max-width:1250px) {
  .site-header-inner { width:94%; gap:20px; }
  .site-desktop-nav { gap:18px; }
  .site-brand-word { font-size:20px; }
  .site-shop-action { padding-inline:11px; gap:11px; }
}
@media(max-width:1020px) {
  :root { --site-nav-height:72px; }
  .site-header-inner { width:90%; gap:15px; }
  .site-desktop-nav { display:none; }
  .site-mobile-trigger { display:grid; }
  .site-brand-word { font-size:23px; }
  .site-shop-action { min-height:42px; }
}
@media(max-width:520px) {
  .site-brand-word { display:none; }
  .site-brand-small { display:inline; }
  .site-header-inner { width:91%; }
  .site-header-actions { gap:10px; }
  .site-shop-action { font-size:11px; gap:14px; padding-inline:12px; }
  .site-mobile-menu { padding-inline:22px; }
}
@media(prefers-reduced-motion:reduce) {
  .site-header,.site-category-trigger svg,.site-nav-link::after { transition:none; }
}

/* v9: compact functional nav (owner 2026-10-12). Seven items, no logo on the white entry page. */
:root { --site-nav-height:56px; }
.site-header { background:color-mix(in srgb, var(--site-surface) 80%, transparent); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); transition:background .35s, border-color .35s, color .35s; }
.site-header[data-tone="paper"] { background:transparent; border-bottom-color:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
.site-header-inner { position:relative; width:min(1320px, calc(100% - 32px)); gap:16px; }
.site-brand { min-height:40px; transition:opacity .35s, visibility .35s; }
.site-brand-word { font-size:17px; letter-spacing:.08em; }
.site-header[data-tone="paper"] .site-brand { opacity:0; visibility:hidden; }
.site-desktop-nav { position:absolute; left:50%; transform:translateX(-50%); gap:2px; }
.site-nav-link { min-height:34px; padding:0 13px; border-radius:999px; font-size:12.5px; font-weight:500; letter-spacing:0; transition:color .2s, background-color .2s; }
.site-nav-link::after { display:none; }
.site-nav-link:hover, .site-nav-link:focus-visible { color:var(--site-ink); background:color-mix(in srgb, var(--site-ink) 8%, transparent); }
.site-header-actions { gap:8px; }
.site-login { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 14px 0 12px; border-radius:999px; font-size:12.5px; font-weight:600; background:var(--site-ink); color:var(--site-surface); transition:background-color .35s, color .35s, transform .2s; }
.site-login:hover { transform:translateY(-1px); }
.site-login svg { width:14px; height:14px; }
.site-cart { position:relative; display:grid; place-items:center; width:34px; height:34px; border-radius:999px; color:var(--site-ink); border:1px solid var(--site-rule); }
.site-cart[hidden] { display:none; }
.site-cart svg { width:16px; height:16px; }
.site-cart b { position:absolute; top:-5px; left:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:#EB3337; color:#fff; font:700 10px/17px Vazirmatn, sans-serif; text-align:center; }
.site-cart.bump b { animation:site-cart-bump .3s cubic-bezier(.3,1.8,.5,1); }
@keyframes site-cart-bump { 50% { transform:scale(1.3); } }
.site-mobile-trigger { width:40px; height:40px; border:0; border-radius:999px; }
.site-mobile-trigger>svg { width:21px; height:21px; }
.site-header :focus-visible { outline:2px solid #F05666; outline-offset:2px; }
@media(min-width:1021px) and (max-width:1250px) { .site-nav-link { padding:0 9px; } }
@media(max-width:1020px) {
  :root { --site-nav-height:52px; }
  .site-header-inner { width:calc(100% - 32px); }
  .site-desktop-nav { display:none; }
  .site-brand-word { font-size:16px; }
}
/* v9 Eco/Pro switch: always visible next to the nav (mobile too); the active side glows */
.site-mode { display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); margin-inline-end:8px; flex-shrink:0; }
.site-header[data-tone=paper] .site-mode { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.16); }
.site-mode button { border:0; border-radius:999px; padding:7px 13px; font:700 12.5px/1 Vazirmatn, Tahoma, sans-serif; color:inherit; background:transparent; cursor:pointer; opacity:.7; transition:background .2s, opacity .2s, box-shadow .2s; }
.site-mode button:hover { opacity:1; }
.site-mode button[aria-pressed=true] { opacity:1; color:#fff; background:linear-gradient(90deg,#EB3337,#A83991); box-shadow:0 0 18px rgba(240,86,102,.5); }
.site-mode button[data-mode=eco][aria-pressed=true] { color:#03140c; background:linear-gradient(90deg,#5EEAD4,#9BE15D); box-shadow:0 0 18px rgba(94,234,212,.45); }
.site-mode button:focus-visible { outline:2px solid #F05666; outline-offset:2px; }
@media (max-width:520px) { .site-mode button { padding:7px 10px; } }