/* ============================================================
SUN DAY RED — store concept shell (Tier 2, store/*)
Their brand world: dark monochrome + red. Tokens approximated
where noted in research/assets.md.
CANONICAL HEAD SNIPPET (store pages):
Store concept by Slice of the Pie Marketing — part of the Sun Day Red growth pitch
View the pitch →
CANONICAL STORE NAV:
============================================================ */
:root{
--s-ink:#0A0A0A; --s-coal:#111214; --s-slate:#1A1B1E; --s-bone:#F4F4F4; --s-gray:#8A8A8E;
--s-line:#26272B; --s-red:#C8102E; --s-red-dark:#9E0C24; --s-white:#FFFFFF;
--s-max:1320px; --s-r:4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--s-ink);color:var(--s-bone);font:400 16px/1.6 'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1.02;margin:0 0 .45em}
h1{font-size:clamp(40px,6.5vw,92px)}
h2{font-size:clamp(28px,4vw,54px)}
h3{font-size:clamp(18px,2vw,24px);letter-spacing:.06em}
.s-eyebrow{font:700 11px/1 'Archivo';letter-spacing:.28em;text-transform:uppercase;color:var(--s-red);margin:0 0 16px}
.s-dek{color:var(--s-gray);max-width:640px;font-size:clamp(15px,1.4vw,18px)}
/* RIBBON */
.pitch-ribbon{position:sticky;top:0;z-index:70;display:flex;justify-content:center;align-items:center;gap:14px;background:#FAF6EF;color:#0A0A0A;font:600 12.5px/1 'Inter';padding:9px 16px;border-bottom:1px solid #EFE4D3}
.pitch-ribbon a{color:#E5701B;font-weight:800;text-decoration:none;white-space:nowrap}
.pitch-ribbon a:hover{text-decoration:underline}
@media(max-width:640px){.pitch-ribbon span{font-size:11px}}
/* NAV */
.s-nav{position:sticky;top:33px;z-index:60;background:rgba(10,10,10,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--s-line)}
.s-nav-inner{max-width:var(--s-max);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.s-wordmark{display:flex;gap:8px;text-decoration:none;font:900 15px/1 'Archivo';letter-spacing:.34em;text-transform:uppercase}
.s-wordmark span:last-child{color:var(--s-red)}
.s-menu{display:flex;gap:26px}
.s-menu a{font:700 12px/1 'Archivo';letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--s-gray);transition:.2s}
.s-menu a:hover{color:var(--s-white)}
.s-actions{display:flex;align-items:center;gap:16px}
.s-cart-link{font:700 12px/1 'Archivo';letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.s-cart-count{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:50%;background:var(--s-red);color:#fff;font:800 11px/1 'Inter';margin-left:4px;padding:0 5px}
.s-burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.s-burger span{display:block;width:22px;height:2px;background:var(--s-bone);margin:5px 0}
@media(max-width:860px){
.s-burger{display:block}
.s-menu{position:fixed;left:0;right:0;top:97px;background:var(--s-coal);flex-direction:column;padding:20px 24px;gap:18px;border-bottom:1px solid var(--s-line);transform:translateY(-140%);transition:.3s;z-index:55}
.s-menu.open{transform:none}
}
/* SECTIONS */
.s-section{max-width:var(--s-max);margin:0 auto;padding:88px 24px}
.s-full{padding:0}
.s-grid{display:grid;gap:18px}
.sg2{grid-template-columns:repeat(2,1fr)}.sg3{grid-template-columns:repeat(3,1fr)}.sg4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.sg4{grid-template-columns:repeat(2,1fr)}.sg3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.sg2,.sg3{grid-template-columns:1fr}.sg4{grid-template-columns:repeat(2,1fr)}}
/* HERO */
.s-hero{position:relative;min-height:92vh;display:grid;align-items:end;overflow:hidden}
.s-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center 20%;animation:kenburns 18s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.s-hero .bg{animation:none;transform:none}}
.s-hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.25) 0%,rgba(10,10,10,.1) 40%,rgba(10,10,10,.92) 100%)}
.s-hero .content{position:relative;max-width:var(--s-max);margin:0 auto;width:100%;padding:0 24px 72px}
/* PRODUCT CARDS */
.p-card{position:relative;background:var(--s-coal);border:1px solid var(--s-line);border-radius:var(--s-r);overflow:hidden;transition:.25s;text-decoration:none;display:block}
.p-card:hover{border-color:var(--s-gray);transform:translateY(-3px)}
.p-card .ph{aspect-ratio:3/4;background:#F4F4F4;overflow:hidden}
.p-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.p-card:hover .ph img{transform:scale(1.05)}
@media(prefers-reduced-motion:reduce){.p-card .ph img{transition:none}.p-card:hover .ph img{transform:none}}
.p-card .info{padding:14px 16px 18px}
.p-card .nm{font:700 13px/1.3 'Archivo';letter-spacing:.1em;text-transform:uppercase}
.p-card .pr{color:var(--s-gray);font:600 14px/1 'Inter';margin-top:6px}
.p-card .flag{position:absolute;top:12px;left:12px;background:var(--s-red);color:#fff;font:800 10px/1 'Archivo';letter-spacing:.14em;text-transform:uppercase;padding:6px 9px;border-radius:2px}
.p-card .flag.muted{background:#3A3B40}
/* BUTTONS */
.s-btn{display:inline-block;font:800 13px/1 'Archivo';letter-spacing:.18em;text-transform:uppercase;padding:17px 34px;border-radius:2px;text-decoration:none;border:0;cursor:pointer;transition:.2s}
.s-btn-red{background:var(--s-red);color:#fff}
.s-btn-red:hover{background:var(--s-red-dark)}
.s-btn-ghost{background:transparent;color:var(--s-bone);box-shadow:inset 0 0 0 1.5px var(--s-bone)}
.s-btn-ghost:hover{background:var(--s-bone);color:var(--s-ink)}
.s-btn-block{display:block;width:100%;text-align:center}
.s-btn[disabled]{opacity:.4;cursor:not-allowed}
/* FREE-SHIP PROGRESS */
.ship-progress{background:var(--s-coal);border:1px solid var(--s-line);border-radius:var(--s-r);padding:14px 16px;font-size:13.5px}
.ship-progress .bar{height:6px;background:var(--s-line);border-radius:3px;margin-top:10px;overflow:hidden}
.ship-progress .bar>span{display:block;height:100%;background:var(--s-red);width:0;transition:width .8s ease}
.ship-progress b{color:#fff}
/* SWATCHES / SIZES */
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatch{width:34px;height:34px;border-radius:50%;border:2px solid transparent;outline:1px solid var(--s-line);cursor:pointer;padding:0;transition:.15s}
.swatch[aria-pressed="true"]{border-color:var(--s-ink);outline:2px solid var(--s-bone)}
.sizes{display:flex;gap:8px;flex-wrap:wrap}
.size-btn{min-width:52px;padding:12px 0;text-align:center;background:transparent;border:1px solid var(--s-line);color:var(--s-bone);font:700 13px/1 'Archivo';cursor:pointer;border-radius:2px;transition:.15s}
.size-btn[aria-pressed="true"]{background:var(--s-bone);color:var(--s-ink);border-color:var(--s-bone)}
.size-btn[disabled]{opacity:.3;cursor:not-allowed;text-decoration:line-through}
/* STICKY ATC (mobile) */
.sticky-atc{position:fixed;left:0;right:0;bottom:0;z-index:65;background:rgba(17,18,20,.97);border-top:1px solid var(--s-line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:none;align-items:center;gap:14px}
.sticky-atc.show{display:flex}
.sticky-atc .meta{flex:1;min-width:0}
.sticky-atc .meta b{display:block;font:700 12px/1.3 'Archivo';letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-atc .meta span{color:var(--s-gray);font-size:13px}
@media(min-width:900px){.sticky-atc.show{display:none}}
/* EDITORIAL BANDS */
.ed-band{position:relative;min-height:70vh;display:grid;align-items:center;overflow:hidden}
.ed-band .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.ed-band .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.4) 60%,rgba(10,10,10,.15) 100%)}
.ed-band .content{position:relative;max-width:var(--s-max);margin:0 auto;width:100%;padding:96px 24px}
.red-line{width:56px;height:3px;background:var(--s-red);margin-bottom:24px}
/* SCROLL SEQUENCE (Sunday Red moment) */
.seq{position:relative}
.seq .frame{position:sticky;top:97px;height:calc(100vh - 97px);display:grid;place-items:center;overflow:hidden}
.seq .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.seq .frame img.on{opacity:1}
.seq .cap{position:relative;z-index:2;background:rgba(10,10,10,.72);backdrop-filter:blur(4px);padding:28px 32px;max-width:560px;margin:0 24px;border-left:3px solid var(--s-red)}
.seq .spacer{height:100vh}
@media(prefers-reduced-motion:reduce){.seq .frame img{transition:none}}
/* REVEAL */
.s-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.s-reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.s-reveal{opacity:1;transform:none;transition:none}}
/* FOOTER */
.s-footer{border-top:1px solid var(--s-line);background:var(--s-coal);margin-top:96px}
.s-footer-inner{max-width:var(--s-max);margin:0 auto;padding:64px 24px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
@media(max-width:800px){.s-footer-inner{grid-template-columns:1fr}}
.s-footer h4{font:800 12px/1 'Archivo';letter-spacing:.22em;text-transform:uppercase;color:var(--s-gray);margin:0 0 16px}
.s-footer a{color:var(--s-bone);text-decoration:none;display:block;padding:5px 0;font-size:14.5px}
.s-footer a:hover{color:var(--s-red)}
.s-fine{color:#5B5C61;font-size:12px;max-width:520px;line-height:1.7}
.s-fine a{display:inline;padding:0;color:var(--s-gray);text-decoration:underline}
/* MISC */
.s-note{border:1px dashed var(--s-line);border-radius:var(--s-r);padding:14px 18px;color:var(--s-gray);font-size:13px}
.s-price{font:800 26px/1 'Archivo'}
.s-strike{color:var(--s-gray);text-decoration:line-through;font-weight:500}
.klarna-line{font-size:13.5px;color:var(--s-gray)}
.klarna-line b{color:var(--s-bone)}
.trust-row{display:flex;gap:22px;flex-wrap:wrap;color:var(--s-gray);font-size:13px}
.trust-row b{color:var(--s-bone);display:block;font-size:13px}
/* QA: ensure no horizontal scroll leaks */
body{overflow-x:hidden}
/* QA pass 2 fixes */
.s-grid>*{min-width:0}