:root { --bg:#050607; --fg:#e9ecef; --muted:#8a9099; --line:#22262b; --card:#0d0f11; --ok:#7bd88f; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--fg); font:300 16px/1.6 Inter, system-ui, sans-serif; }
body.lock { overflow:hidden; }
a { color:inherit; }
img { max-width:100%; }
button { font:inherit; color:inherit; }
:focus-visible { outline:1px solid var(--fg); outline-offset:3px; }

.ticker { position:fixed; inset:0 0 auto; height:30px; z-index:21; background:var(--fg); color:var(--bg);
          font-size:11px; letter-spacing:.25em; text-transform:uppercase; overflow:hidden; white-space:nowrap; }
.ticker span { display:inline-block; line-height:30px; padding-left:100%; animation:tick 28s linear infinite; }
@keyframes tick { to { transform:translateX(-100%); } }

.site-nav { position:fixed; inset:30px 0 auto; display:flex; justify-content:space-between; align-items:center;
      padding:12px clamp(16px,4vw,48px); z-index:20; transition:background .3s;
      background:linear-gradient(rgba(5,6,7,.75), transparent); }
.site-nav.solid { background:rgba(5,6,7,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.site-nav img { height:44px; display:block; }
.site-nav .links { display:flex; align-items:center; gap:28px; }
.site-nav .links a { text-decoration:none; font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.cart-btn { background:none; border:1px solid var(--line); padding:8px 14px; cursor:pointer; font-size:12px;
            letter-spacing:.2em; text-transform:uppercase; display:flex; gap:8px; align-items:center; }
.cart-btn b { background:var(--fg); color:var(--bg); font-weight:500; min-width:20px; height:20px; border-radius:10px;
              display:inline-grid; place-items:center; font-size:11px; letter-spacing:0; }
@media (max-width:700px) { .site-nav .links a.hide-sm { display:none; } }

.page { padding-top:130px; }
.eyebrow { font-size:11px; letter-spacing:.35em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
h1, h2 { font-family:'Cormorant Garamond', serif; font-weight:300; line-height:1; }
h1 { font-size:clamp(44px,8vw,110px); }
h1 em, h2 em { font-style:italic; color:var(--muted); }
h2 { font-size:clamp(36px,6vw,84px); max-width:12ch; }
.muted { color:var(--muted); }

.btn { display:inline-block; margin-top:28px; padding:15px 34px; border:1px solid var(--fg); background:transparent;
       color:var(--fg); text-decoration:none; font-size:12px; letter-spacing:.25em; text-transform:uppercase;
       cursor:pointer; text-align:center; transition:background .3s, color .3s; }
.btn:hover, .btn:focus-visible, .btn.solid { background:var(--fg); color:var(--bg); }
.btn.solid:hover, .btn.solid:focus-visible { background:transparent; color:var(--fg); }
.btn.block { display:block; width:100%; margin-top:12px; }

section { padding:clamp(72px,11vw,150px) clamp(16px,7vw,110px); border-top:1px solid var(--line); }
.wrap { padding-left:clamp(16px,7vw,110px); padding-right:clamp(16px,7vw,110px); }
.head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px; }
.head .btn { margin-top:0; }

.perks { display:flex; flex-wrap:wrap; gap:16px 48px; padding:28px clamp(16px,7vw,110px); border-top:1px solid var(--line); font-size:13px; }
.perks b { font-weight:500; display:block; }
.perks span { color:var(--muted); }

.filters { display:flex; flex-wrap:wrap; gap:10px; }
.filters button, .filters select { background:none; border:1px solid var(--line); color:var(--muted); padding:8px 18px; cursor:pointer;
                  font-size:12px; letter-spacing:.15em; text-transform:uppercase; }
.filters select { background:var(--bg); }
.filters button[aria-pressed="true"] { border-color:var(--fg); color:var(--fg); }

.products { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:28px; margin-top:40px; }
.product { position:relative; }
.product > a { text-decoration:none; display:block; }
.product .img { position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--card); }
.product img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .5s, transform .8s; }
.product img + img { opacity:0; }
.product:hover img { transform:scale(1.04); }
.product:hover img + img { opacity:1; }
.product .tag { position:absolute; top:12px; left:12px; z-index:1; font-size:10px; letter-spacing:.2em;
                background:var(--fg); color:var(--bg); padding:3px 8px; }
.product h3 { font:300 22px 'Cormorant Garamond', serif; margin-top:14px; }
.product .meta { display:flex; justify-content:space-between; color:var(--muted); font-size:13px; }
.product .meta b { color:var(--fg); font-weight:500; }
.quick { position:absolute; left:12px; right:12px; bottom:12px; z-index:2; padding:12px; background:rgba(233,236,239,.95);
         color:var(--bg); border:0; cursor:pointer; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
         opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s; }
.product:hover .quick, .quick:focus-visible { opacity:1; transform:none; }
@media (hover:none) { .quick { opacity:1; transform:none; position:static; width:100%; margin-top:10px; background:var(--fg); } }

.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:48px; margin-top:64px; }
.grid h3 { font:300 28px 'Cormorant Garamond', serif; margin-bottom:10px; }
.grid p { color:var(--muted); }
.grid .num { font:300 14px Inter; color:var(--muted); letter-spacing:.2em; margin-bottom:12px; }

details { border-bottom:1px solid var(--line); padding:20px 0; max-width:820px; }
details.first, .faq details:first-of-type { border-top:1px solid var(--line); }
.faq { margin-top:48px; }
summary { cursor:pointer; font:300 24px 'Cormorant Garamond', serif; list-style:none; display:flex; justify-content:space-between; gap:16px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; color:var(--muted); }
details[open] summary::after { content:"−"; }
details p, details ul { color:var(--muted); margin-top:12px; max-width:62ch; }
details ul { padding-left:18px; }

.cta { text-align:center; }
.cta h2 { margin:0 auto; max-width:none; }
.cta p { color:var(--muted); max-width:42ch; margin:20px auto 0; }

.qty { display:inline-flex; border:1px solid var(--line); }
.qty button { background:none; border:0; width:38px; cursor:pointer; font-size:18px; color:var(--muted); }
.qty button:hover { color:var(--fg); }
.qty span { min-width:34px; display:grid; place-items:center; font-size:14px; }

/* cart drawer */
.scrim { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:30; opacity:0; pointer-events:none; transition:opacity .3s; }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); background:#0a0b0d; z-index:31;
          border-left:1px solid var(--line); display:flex; flex-direction:column; transform:translateX(100%); transition:transform .35s ease; }
.cart-open .scrim { opacity:1; pointer-events:auto; }
.cart-open .drawer { transform:none; }
.drawer header { display:flex; justify-content:space-between; align-items:center; padding:22px 24px; border-bottom:1px solid var(--line); }
.drawer header h2 { font-size:30px; }
.drawer .x { background:none; border:0; font-size:26px; cursor:pointer; color:var(--muted); }
.drawer .body { flex:1; overflow:auto; padding:8px 24px; }
.drawer footer { padding:20px 24px 24px; border-top:1px solid var(--line); }
.line { display:grid; grid-template-columns:72px 1fr auto; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); align-items:center; }
.line img { width:72px; aspect-ratio:4/5; object-fit:cover; display:block; }
.line h4 { font:300 19px/1.15 'Cormorant Garamond', serif; }
.line h4 a { text-decoration:none; }
.line .qty { margin-top:8px; }
.line .qty button { width:30px; }
.line .rm { background:none; border:0; color:var(--muted); font-size:11px; letter-spacing:.15em; text-transform:uppercase; cursor:pointer; text-decoration:underline; }
.line .right { text-align:right; display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.total { display:flex; justify-content:space-between; font-size:15px; }
.total b { font:300 28px 'Cormorant Garamond', serif; }
.assure { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; font-size:12px; color:var(--muted); }
.assure span::before { content:"✓ "; color:var(--ok); }
.empty { text-align:center; padding:60px 0; color:var(--muted); }
.upsell { margin-top:24px; }
.upsell .eyebrow { margin-bottom:8px; }
.upsell .line { grid-template-columns:56px 1fr auto; border:0; padding:8px 0; }
.upsell .line img { width:56px; }
.add-mini { background:none; border:1px solid var(--line); padding:6px 12px; font-size:11px; letter-spacing:.15em; text-transform:uppercase; cursor:pointer; }
.add-mini:hover { border-color:var(--fg); }

.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); z-index:40; background:var(--fg); color:var(--bg);
         padding:12px 22px; font-size:13px; opacity:0; transition:opacity .3s, transform .3s; pointer-events:none; }
.toast.on { opacity:1; transform:translate(-50%,0); }
.cart-open .toast { display:none; } /* the drawer is already the feedback */

.site-foot { padding:64px clamp(16px,7vw,110px) 40px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.site-foot .cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:40px; }
.site-foot img { height:60px; margin-bottom:14px; }
.site-foot h5 { font-size:11px; letter-spacing:.3em; color:var(--fg); font-weight:500; margin-bottom:14px; }
.site-foot a { display:block; text-decoration:none; padding:3px 0; }
.site-foot a:hover { color:var(--fg); }
.site-foot .base { margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:12px; }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; }
  .ticker span { padding-left:16px; }
  html { scroll-behavior:auto; }
}