/* KITSYUU store. Loads after ../styles.css and reuses its tokens (--ink, --paper, --red, --muted, --line, --display, --body, --mono),
   focus rings, skip link, .eyebrow, .button, .text-link and .section-label. Store classes use the st- prefix so nothing leaks into the landing page. */
:root{--st-gutter:clamp(16px,4vw,64px);--st-max:1560px;--st-head:72px;--st-stage:#d8d4cc;--st-stage-hover:#ceC9c0;--st-panel:#171719;--st-soft:#191719}
html.st{scroll-padding-top:calc(var(--st-head) + 16px)}
body.store{min-height:100vh;display:flex;flex-direction:column;background:var(--ink)}
.store main{flex:1;outline:0}
.store :is(h1,h2,h3):not(:where(.kitsyuu-landing *)){margin:0}
.store ul{list-style:none;margin:0;padding:0}
.st-wrap{width:100%;max-width:var(--st-max);margin:0 auto;padding:0 var(--st-gutter)}
.store input:focus-visible,.store summary:focus-visible,.store select:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.st-reduce *,.st-reduce *:before,.st-reduce *:after{transition:none!important;animation:none!important}

/* Prototype notice */
.st-notice{margin:0;padding:9px var(--st-gutter);background:var(--st-notice-bg);border-bottom:1px solid var(--line);color:var(--muted);font:10px/1.6 var(--mono);letter-spacing:1.4px;text-transform:uppercase;text-align:center}
.st-notice b{color:var(--paper);font-weight:400}

/* Header */
.st-header{position:sticky;top:0;z-index:30;height:var(--st-head);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:0 var(--st-gutter);background:var(--st-header-bg);border-bottom:1px solid var(--st-line-1)}
.st-brand{display:inline-flex;align-items:center;gap:12px;justify-self:start;min-height:44px}
.st-brand .logo-crop{width:30px;height:43px}
.st-wordmark{font:700 21px/1 var(--body);letter-spacing:-.06em;text-transform:uppercase}
.st-brand:hover .st-wordmark{color:var(--red)}
.st-nav-main{display:flex;gap:34px}
.st-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;font:11px var(--mono);letter-spacing:1.2px;text-transform:uppercase}
.st-nav a:hover{color:var(--red)}
.st-nav-main>li>a[aria-current],.st-nav-main>li>a.is-active{color:var(--paper)}
.st-nav-main>li>a[aria-current]:after,.st-nav-main>li>a.is-active:after{content:'';position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--red)}
.st-nav-sub,.st-nav-extra{display:none}
.st-tools{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.st-tool{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;justify-content:center;padding:0 8px;white-space:nowrap;background:none;border:0;color:var(--paper);font:11px var(--mono);letter-spacing:1.2px;text-transform:uppercase}
.st-tool svg{width:18px;height:18px;flex:none}
.st-tool:hover{color:var(--red)}
.st-tool[aria-disabled=true]{cursor:default}
.st-count-badge{font:10px var(--mono);color:var(--muted)}
.st-menu-toggle{display:none}

/* Toast for controls that connect in phase 2 */
.st-toast{position:fixed;left:50%;bottom:24px;z-index:50;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);margin:0;padding:14px 18px;background:var(--paper);color:var(--ink);font:12px/1.5 var(--mono);letter-spacing:.4px;box-shadow:0 10px 40px #0008}
.st-toast:empty{display:none}

/* Shared section heading */
.store .section-label{text-transform:uppercase}
.st-section{padding:96px 0;border-top:1px solid var(--line)}
.st-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin:26px 0 40px}
.st-section-head h2{font:600 clamp(32px,3.2vw,50px)/1 var(--display);letter-spacing:.01em;text-transform:uppercase}
.st-section-head h2 em{color:var(--red);font-style:normal}
.st-section-head .text-link{flex:none}
.st-section-head p{max-width:330px;margin:0 0 6px;color:var(--muted);font-size:14px;line-height:1.8}

/* Store masthead */
.st-hero{position:relative;min-height:clamp(540px,80svh,860px);display:flex;align-items:flex-end;overflow:hidden;background:#0a0a0b}
.st-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 40%}
.st-hero-sequence{position:absolute;display:block;opacity:0;transition:opacity .6s;pointer-events:none}
.st-hero.is-turntable .st-hero-sequence{opacity:1}
.st-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0a0a0bf2 0%,#0a0a0bb8 34%,transparent 64%),linear-gradient(0deg,#101011 0%,transparent 34%)}
.st-hero-copy{position:relative;padding-top:120px;padding-bottom:84px}
.st-hero-copy :is(h1,h2){font:600 clamp(42px,4.8vw,76px)/.96 var(--display);letter-spacing:.005em;margin:22px 0 26px;text-transform:uppercase}
.st-hero-copy :is(h1,h2) em{color:var(--red);font-style:normal}
.st-hero-copy>p:not(.eyebrow){max-width:380px;color:#c9c7c1;line-height:1.8;margin:0 0 30px}
.st-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px}
.st-caption{position:absolute;right:var(--st-gutter);bottom:30px;font:10px var(--mono);letter-spacing:1.4px;color:#aaa79f;text-transform:uppercase}

/* Product grid and card */
.st-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:52px 20px}
.st-card{position:relative;display:flex;flex-direction:column;height:100%}
.st-card-media{position:relative;aspect-ratio:4/5;display:grid;place-items:center;overflow:hidden;background:var(--st-stage);transition:background .25s}
.st-card-media img{display:block;width:auto;height:auto;max-width:78%;max-height:84%;object-fit:contain;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.st-card:hover .st-card-media{background:var(--st-stage-hover)}
.st-card:hover .st-card-media img{transform:translateY(-5px)}
.st-card-media.is-held,.st-card:hover .st-card-media.is-held{background:var(--st-panel)}
.st-tag{position:absolute;left:10px;top:10px;z-index:1;padding:6px 8px;background:var(--ink);color:var(--paper);font:10px/1 var(--mono);letter-spacing:1px}
.st-tag-new{top:auto;bottom:10px;background:var(--red);text-transform:uppercase}
.st-index{position:absolute;left:12px;bottom:4px;z-index:1;font:600 clamp(30px,2.8vw,44px)/1 var(--display);color:var(--ink);opacity:.9}
.is-held .st-index{color:var(--paper)}
.st-card-body{flex:1;display:flex;flex-direction:column;gap:7px;padding-top:15px}
.st-card-cat{order:-1;margin:0;color:var(--muted);font:10px var(--mono);letter-spacing:1.2px;text-transform:uppercase}
.st-card-name{font:600 23px/1 var(--display);letter-spacing:.2px;text-transform:uppercase}
.st-card-name a:after{content:'';position:absolute;inset:0;z-index:1}
.st-card-name a:focus-visible{outline:0}
.st-card-name a:focus-visible:after{outline:2px solid var(--red);outline-offset:5px}
.st-card:hover .st-card-name a{color:var(--red)}
.st-price{margin:auto 0 0;font:500 15px var(--body)}
.st-price small{margin-left:7px;color:var(--muted);font:9px var(--mono);letter-spacing:1px}
.st-wish{position:absolute;top:4px;right:4px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;background:none;border:0;color:var(--ink)}
.st-wish svg{width:19px;height:19px}
.st-wish:hover{color:var(--red)}
.st-card:has(.is-held) .st-wish{color:var(--paper)}
.st-wish[aria-disabled=true]{cursor:default}

/* Shop by category */
.st-cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.st-cat{position:relative;display:block}
.st-cat-media{display:grid;place-items:center;aspect-ratio:4/5;background:var(--st-stage);overflow:hidden;transition:background .25s}
.st-cat-media img{max-width:70%;max-height:80%;width:auto;height:auto;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.st-cat:hover .st-cat-media{background:var(--st-stage-hover)}
.st-cat:hover .st-cat-media img{transform:scale(1.03)}
.st-cat-meta{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;padding:18px 0 12px;border-bottom:1px solid var(--line)}
.st-cat-name{font:600 clamp(26px,2.4vw,38px)/1 var(--display);letter-spacing:.015em;text-transform:uppercase}
.st-cat-name:after{content:' ↗';font:400 .45em Arial,sans-serif;color:var(--red);vertical-align:.6em}
.st-cat:hover .st-cat-name{color:var(--red)}
.st-cat-count{color:var(--muted);font:10px var(--mono);letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap}
.st-cat-index{position:absolute;left:12px;top:12px;font:10px var(--mono);letter-spacing:1px;background:var(--ink);padding:6px 8px}
.st-cat-subs{display:flex;flex-wrap:wrap;gap:4px 18px;padding-top:6px}
.st-cat-subs a{display:inline-flex;align-items:center;min-height:40px;color:var(--muted);font-size:13px}
.st-cat-subs a:hover{color:var(--paper)}

/* Editorial banner */
.st-editorial{display:grid;grid-template-columns:1fr 1fr;min-height:640px;border-top:1px solid var(--line)}
.st-editorial-img{position:relative;overflow:hidden}
.st-editorial-img img{display:block;width:100%;height:100%;object-fit:cover}
.st-editorial-img .st-caption{left:24px;right:auto;bottom:22px;color:#fff}
.st-editorial-copy{display:flex;flex-direction:column;justify-content:center;padding:70px 10%;background:var(--st-soft)}
.st-editorial-copy h2{font:600 clamp(38px,4vw,62px)/.98 var(--display);letter-spacing:.005em;margin:18px 0 30px;text-transform:uppercase}
.st-editorial-copy h2 em{color:var(--red);font-style:normal}
.st-editorial-copy>p:not(.eyebrow){max-width:360px;color:var(--muted);line-height:1.8}
.st-editorial-copy .text-link{align-self:flex-start;margin-top:12px}

/* Product banner */
.st-feature{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.st-feature-copy h2{font:600 clamp(40px,4.4vw,68px)/.96 var(--display);letter-spacing:.005em;margin:20px 0 26px;text-transform:uppercase}
.st-feature-copy h2 em{color:var(--red);font-style:normal}
.st-feature-copy>p:not(.eyebrow){max-width:360px;color:var(--muted);line-height:1.8;margin-bottom:26px}
.st-feature-items{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* Newsletter */
.st-news{padding:84px 0;background:#762639}
.st-news-inner{display:grid;grid-template-columns:1fr minmax(0,520px);gap:40px 80px;align-items:end}
.st-news h2{font:600 clamp(38px,4.2vw,64px)/.96 var(--display);letter-spacing:.005em;margin-top:18px;text-transform:uppercase}
.st-news label{display:block;margin-bottom:10px;font:11px var(--mono);letter-spacing:1.2px;text-transform:uppercase}
.st-news-row{display:flex;gap:12px;align-items:stretch}
.st-news input{flex:1;min-width:0;min-height:50px;padding:12px 2px;background:transparent;border:0;border-bottom:1px solid #e9e5dfaa;border-radius:0;color:var(--paper)}
.st-news input::placeholder{color:#e9e5df99}
.st-news .button{flex:none;gap:28px}
.st-news .button:hover{background:var(--ink);border-color:var(--ink)}
.st-note{margin:14px 0 0;font:11px/1.6 var(--mono);letter-spacing:.4px;color:var(--st-note)}
.st-news-msg{margin:10px 0 0;font-size:14px;line-height:1.6}
.st-news-msg:empty{display:none}

/* Footer */
.st-footer{display:block;padding:0;margin-top:0;border-top:1px solid var(--line);background:var(--st-footer-bg)}
.st-footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.5fr;gap:40px;padding-top:64px;padding-bottom:56px}
.st-footer h2{margin:0 0 16px;color:var(--muted);font:10px var(--mono);letter-spacing:1.4px;text-transform:uppercase}
.st-footer li a{display:inline-flex;align-items:center;min-height:36px;font-size:14px}
.st-footer li a:hover{color:var(--red)}
.st-footer-brand p{margin:18px 0 0;font:11px/1.7 var(--mono);letter-spacing:.8px}
.st-footer-brand .st-brand .logo-crop{width:36px;height:52px}
.st-footer-top>:last-child{grid-column:-2/-1}
.st-footer-note{margin:0;color:var(--muted);font-size:13px;line-height:1.75}
.st-footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:22px;padding-bottom:30px;border-top:1px solid var(--line);color:var(--muted);font:11px var(--mono);letter-spacing:.8px}
.st-footer-bottom a{display:inline-flex;align-items:center;min-height:44px;color:var(--paper)}
.st-footer-bottom a:hover{color:var(--red)}

/* Listing page */
.st-crumbs{padding-top:26px}
.st-crumbs ol{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0;padding:0;list-style:none;color:var(--muted);font:10px var(--mono);letter-spacing:1.2px;text-transform:uppercase}
.st-crumbs li{display:flex;align-items:center;min-height:28px}
.st-crumbs li+li:before{content:'/';margin-right:10px;color:var(--st-line-5)}
.st-crumbs a{display:inline-flex;min-height:28px;align-items:center}
.st-crumbs a:hover{color:var(--paper)}
.st-crumbs [aria-current]{color:var(--paper)}
.st-plp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;padding:34px 0 30px}
.st-plp-head h1{font:600 clamp(36px,4vw,60px)/.96 var(--display);letter-spacing:.01em;text-transform:uppercase}
.st-plp-head h1 small{display:block;margin-bottom:14px;color:var(--muted);font:11px var(--mono);letter-spacing:1.4px}
.st-plp-aside{max-width:340px}
.st-plp-aside p{margin:0;color:var(--muted);font-size:14px;line-height:1.75}
.st-result-count{display:block;margin-bottom:10px;color:var(--paper)!important;font:11px var(--mono)!important;letter-spacing:1.4px;text-transform:uppercase}
.st-subnav{margin-bottom:36px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.st-subnav::-webkit-scrollbar{display:none}
.st-subnav ul{display:flex;gap:28px;width:max-content}
.st-subnav a{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 1px;border-bottom:2px solid transparent;color:var(--muted);font-size:14px;white-space:nowrap}
.st-subnav a:hover{color:var(--paper)}
.st-subnav a[aria-current]{color:var(--paper);border-color:var(--red)}
.st-subnav sup{font:10px var(--mono);color:var(--muted)}
.st-footnote{margin:64px 0 0;padding:20px 0 90px;border-top:1px solid var(--line);color:var(--muted);font:11px/1.7 var(--mono);letter-spacing:.4px}
.st-status{padding:120px 0;color:var(--muted);font:12px var(--mono);letter-spacing:1px;text-transform:uppercase}
.st-empty{padding:110px 0 130px}
.st-empty h1{font:600 clamp(36px,4vw,60px)/.96 var(--display);letter-spacing:.005em;margin:20px 0 22px;text-transform:uppercase}
.st-empty>p:not(.eyebrow){max-width:460px;color:var(--muted);line-height:1.8;margin-bottom:30px}

/* Product detail page */
.st-pdp{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,1fr);gap:clamp(28px,5vw,88px);align-items:start;padding-top:26px}
.st-gallery{position:relative}
.st-gallery-main{position:relative;margin:0}
.st-gallery-stage{display:grid;place-items:center;aspect-ratio:4/5;background:var(--st-stage);overflow:hidden}
.st-gallery-stage img{display:block;width:auto;height:auto;max-width:min(82%,var(--w,100%));max-height:86%;object-fit:contain;cursor:default}
.st-gallery-main.is-held .st-gallery-stage{background:var(--st-panel)}

/* Held products: an intentional coming-soon panel in place of a photo. Sized in container units so cards and the product page match. */
.st-card-media,.st-gallery-stage{container-type:inline-size}
.st-soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:radial-gradient(120% 75% at 50% 38%,#232326 0%,#18181a 58%,#121213 100%);color:var(--paper)}
.st-soon:before{content:'';position:absolute;inset:4.5cqi;border:1px solid #ffffff17;pointer-events:none}
.st-soon:after{content:'';position:absolute;right:4.5cqi;bottom:4.5cqi;width:7cqi;height:7cqi;border-right:2px solid var(--red);border-bottom:2px solid var(--red);pointer-events:none}
.st-soon .st-soon-mark,.st-card:hover .st-card-media .st-soon-mark{position:absolute;top:50%;left:50%;width:52cqi;height:auto;max-width:none;max-height:none;transform:translate(-50%,-50%);filter:invert(1);opacity:.06}
.st-soon-title{position:relative;margin-top:6cqi;font:600 clamp(20px,9.5cqi,56px)/.92 var(--display);letter-spacing:.01em;text-transform:uppercase}
.st-soon-label{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:clamp(10px,4cqi,22px);color:var(--muted);font:clamp(8px,2.6cqi,11px)/1.4 var(--mono);letter-spacing:.16em}
.st-soon-label:before{content:'';width:6px;height:6px;background:var(--red);flex:none}
.st-gallery-main figcaption{display:flex;justify-content:space-between;gap:16px;padding-top:12px;color:var(--muted);font:10px/1.6 var(--mono);letter-spacing:1.1px;text-transform:uppercase}
.st-thumbs{display:flex;gap:10px;margin-top:14px}
.st-thumbs button{width:72px;aspect-ratio:4/5;padding:4px;background:var(--st-stage);border:1px solid transparent}
.st-thumbs button[aria-pressed=true]{border-color:var(--red)}
.st-thumbs img{width:100%;height:100%;object-fit:contain}
.st-info{position:sticky;top:calc(var(--st-head) + 28px)}
.st-pdp-meta{margin:0 0 18px;color:var(--muted);font:10px/1.7 var(--mono);letter-spacing:1.3px;text-transform:uppercase}
.st-pdp-meta b{color:var(--paper);font-weight:400}
.st-info h1{font:600 clamp(32px,2.9vw,46px)/1 var(--display);letter-spacing:.01em;text-transform:uppercase}
.st-pdp-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:24px 0 0;font:500 24px var(--body)}
.st-pdp-price small{color:var(--muted);font:10px/1.6 var(--mono);letter-spacing:1px;text-transform:uppercase}
.st-colour{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-size:14px;color:var(--muted)}
.st-colour i{width:14px;height:14px;border:1px solid var(--st-line-5);border-radius:50%;flex:none}
.st-colour b{color:var(--paper);font-weight:500}
.st-desc{margin:24px 0 0;padding-top:24px;border-top:1px solid var(--line);color:var(--st-text-2);line-height:1.8;max-width:520px}
.st-buy{margin-top:30px}
.st-fieldset{margin:0 0 24px;padding:0;border:0}
.st-fieldset legend{display:flex;justify-content:space-between;width:100%;padding:0;margin-bottom:12px;font:11px var(--mono);letter-spacing:1.2px;text-transform:uppercase}
.st-fieldset legend span{color:var(--muted)}
.st-sizes{display:flex;flex-wrap:wrap;gap:8px}
.st-size input{position:absolute;opacity:0;width:1px;height:1px}
.st-size span{display:grid;place-items:center;min-width:56px;min-height:48px;padding:0 14px;border:1px solid var(--st-line-4);font:500 14px var(--body);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.st-size span:hover{border-color:var(--paper)}
.st-size input:checked+span{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.st-size input:focus-visible+span{outline:2px solid var(--red);outline-offset:3px}
.st-size input:disabled+span{color:var(--st-line-5);border-style:dashed;text-decoration:line-through;cursor:not-allowed}
.st-qty-row{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.st-qty{display:inline-flex;border:1px solid var(--st-line-4)}
.st-qty button{width:48px;min-height:52px;background:none;border:0;color:var(--paper);font-size:20px}
.st-qty button:hover:not(:disabled){color:var(--red)}
.st-qty button:disabled{color:var(--st-line-5);cursor:default}
.st-qty input{width:52px;text-align:center;background:none;border:0;border-left:1px solid var(--st-line-2);border-right:1px solid var(--st-line-2);color:var(--paper);-moz-appearance:textfield;appearance:textfield}
.st-qty input::-webkit-inner-spin-button,.st-qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.st-add{flex:1;justify-content:space-between;gap:16px;min-height:54px;white-space:nowrap;cursor:pointer}
.st-add[aria-disabled=true]{cursor:default}
.st-wish-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;margin-top:10px;background:none;border:1px solid var(--st-line-4);color:var(--paper);font-size:14px}
.st-wish-btn svg{width:17px;height:17px}
.st-wish-btn:hover{border-color:var(--paper)}
.st-wish-btn[aria-disabled=true]{cursor:default}
.st-phase-note{margin:12px 0 0;color:var(--muted);font:11px/1.6 var(--mono);letter-spacing:.3px}
.st-details{margin-top:30px;border-bottom:1px solid var(--line)}
.st-details details{border-top:1px solid var(--line)}
.st-details summary{display:flex;justify-content:space-between;align-items:center;min-height:54px;cursor:pointer;list-style:none;font:11px var(--mono);letter-spacing:1.3px;text-transform:uppercase}
.st-details summary::-webkit-details-marker{display:none}
.st-details summary:after{content:'+';font:300 20px var(--body);color:var(--red)}
.st-details details[open] summary:after{content:'−'}
.st-details ul{padding:0 0 20px;list-style:none}
.st-details li{position:relative;padding:5px 0 5px 20px;color:var(--st-text-2);font-size:14px;line-height:1.6}
.st-details li:before{content:'';position:absolute;left:0;top:14px;width:8px;height:1px;background:var(--red)}
.st-details p{margin:0 0 20px;color:var(--muted);font-size:14px;line-height:1.7}
.st-details dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0 0 20px;font-size:13px}
.st-details dt{color:var(--muted);font:10px/1.9 var(--mono);letter-spacing:1px;text-transform:uppercase}
.st-details dd{margin:0}
.st-rail{margin-top:110px}
.st-rail .st-section-head{margin:18px 0 28px}
.st-rail .st-section-head h2{font-size:clamp(28px,2.6vw,40px)}

/* Phase 2: live cart, wishlist, search, sorting and prototype checkout */
:root{--st-error:#ef7a8b}
.st-wish[aria-pressed=true] svg,.st-wish-btn[aria-pressed=true] svg{fill:currentColor}
.st-wish-btn[aria-pressed=true]{border-color:var(--paper)}
.st-tool[aria-current]{box-shadow:inset 0 -2px var(--red)}
.st-fieldset.is-invalid legend,.st-fieldset.is-invalid legend span{color:var(--st-error)}
.st-fieldset.is-invalid .st-size span{border-color:var(--st-error-line)}
.st-buy-status:empty{display:none}
.st-buy-status a,.st-note a{text-decoration:underline;text-underline-offset:3px}
.st-buy-status a:hover{color:var(--red)}
.st-toolbar{display:flex;align-items:center;gap:12px 20px;margin:-14px 0 28px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.st-toolbar-sort{display:flex;align-items:center;gap:12px;margin-left:auto}
.st-toolbar-count{color:var(--muted);font:10px var(--mono);letter-spacing:1.2px;text-transform:uppercase}
.st-toolbar label{color:var(--muted);font:10px var(--mono);letter-spacing:1.2px;text-transform:uppercase}
.st-toolbar select{min-height:44px;padding:0 12px;background:var(--ink);border:1px solid var(--st-line-4);border-radius:0;color:var(--paper);color-scheme:var(--st-scheme);font-size:14px;cursor:pointer}
.st-toolbar select:hover{border-color:var(--paper)}
.st-clear{min-height:44px;padding:0 4px;background:none;border:0;border-bottom:1px solid var(--st-link-line);color:var(--paper);font-size:13px}
.st-clear:hover{color:var(--red);border-color:var(--red)}

/* Cart, checkout and confirmation */
.st-cart{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(28px,4vw,64px);align-items:start;padding-bottom:100px}
.st-lines{border-top:1px solid var(--line)}
.st-line{display:grid;grid-template-columns:112px minmax(0,1fr) auto minmax(90px,auto);gap:22px;align-items:start;padding:22px 0;border-bottom:1px solid var(--line)}
.st-line-media{display:grid;place-items:center;aspect-ratio:4/5;background:var(--st-stage);overflow:hidden}
.st-line-media img{max-width:80%;max-height:86%;width:auto;height:auto;object-fit:contain}
.st-line-name{font:600 24px/1 var(--display);text-transform:uppercase;letter-spacing:.2px}
.st-line-name a:hover{color:var(--red)}
.st-line-meta{margin:10px 0 0;color:var(--muted);font:10px/1.9 var(--mono);letter-spacing:1.1px;text-transform:uppercase}
.st-line-meta b{color:var(--paper);font-weight:400}
.st-line-unit{margin:10px 0 0;font-size:14px}
.st-line-unit small{color:var(--muted);font:10px var(--mono)}
.st-line-controls{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.st-line-controls .st-qty button{width:44px;min-height:44px}
.st-line-controls .st-qty input{width:46px}
.st-line-remove{min-height:40px;padding:0;background:none;border:0;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:3px}
.st-line-remove:hover{color:var(--red)}
.st-line-total{margin:0;font:500 16px var(--body);text-align:right;white-space:nowrap}
.st-summary{position:sticky;top:calc(var(--st-head) + 24px);padding:28px;background:var(--st-soft);border:1px solid var(--line)}
.st-summary h2{margin-bottom:18px;color:var(--muted);font:11px var(--mono);letter-spacing:1.4px;text-transform:uppercase}
.st-summary dl{display:grid;grid-template-columns:1fr auto;gap:12px 16px;margin:0 0 24px;padding-top:16px;border-top:1px solid var(--line)}
.st-summary dt{font-size:14px}
.st-summary dt small{color:var(--muted);font:10px var(--mono)}
.st-summary dd{margin:0;text-align:right;font-size:14px}
.st-summary dl>dd:first-of-type{font:500 20px var(--body)}
.st-summary dl>dd:nth-of-type(2){color:var(--muted)}
.st-checkout{width:100%;justify-content:space-between}
.st-summary .st-note{color:var(--muted);margin:14px 0 18px}
.st-empty-inline{padding:30px 0 120px;border-top:1px solid var(--line)}
.st-empty-inline h2{font:600 clamp(30px,3.4vw,50px)/.98 var(--display);letter-spacing:.005em;margin:18px 0;text-transform:uppercase}
.st-mini{margin-bottom:18px}
.st-mini li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 0}
.st-mini-media{display:grid;place-items:center;aspect-ratio:4/5;background:var(--st-stage)}
.st-mini-media img{max-width:82%;max-height:86%;width:auto;height:auto}
.st-mini-info b{display:block;font:600 16px/1.05 var(--display);text-transform:uppercase}
.st-mini-info small{display:block;margin-top:5px;color:var(--muted);font:9px/1.6 var(--mono);letter-spacing:.8px;text-transform:uppercase}
.st-mini-info small+small{margin-top:0}
.st-mini-total{font-size:14px;white-space:nowrap}
.st-form-alert{margin-bottom:18px;padding:14px 16px;border-left:3px solid var(--st-error);background:var(--st-alert-bg);font-size:14px;line-height:1.6}
.st-form-group{margin:0;padding:26px 0 30px;border:0;border-top:1px solid var(--line);min-width:0}
.st-form-group legend,.st-form-group h2{float:left;width:100%;margin:0 0 20px;padding:0;color:var(--muted);font:11px var(--mono);letter-spacing:1.4px;text-transform:uppercase}
.st-form-group legend+*,.st-form-group h2+*{clear:both}
.st-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
.st-field-wide{grid-column:1/-1}
.st-field label,.st-field-label{display:block;margin-bottom:8px;font:10px var(--mono);letter-spacing:1.1px;text-transform:uppercase}
.st-field input{width:100%;min-height:50px;padding:12px 14px;background:var(--st-field-bg);border:1px solid var(--st-line-3);border-radius:0;color:var(--paper)}
.st-field input:hover{border-color:var(--st-line-6)}
.st-field input[aria-invalid=true]{border-color:var(--st-error)}
.st-field-error{margin:6px 0 0;color:var(--st-error);font-size:13px}
.st-field-static{margin:0;min-height:50px;display:flex;align-items:center;color:var(--muted)}
.st-proto-tag{margin-left:10px;padding:4px 7px;background:var(--red);color:var(--paper);font:9px var(--mono);letter-spacing:1px;vertical-align:1px}
.st-pay p{margin:0;max-width:520px;color:var(--muted);font-size:14px;line-height:1.75;clear:both}
.st-place{width:100%;justify-content:space-between;margin-top:6px}
.st-checkout-form .st-note{color:var(--muted)}
.st-confirm{padding:30px 0 56px}
.st-confirm h1{font:600 clamp(38px,4.4vw,66px)/.96 var(--display);letter-spacing:.005em;margin:22px 0 26px;text-transform:uppercase}
.st-confirm h1 em{color:var(--red);font-style:normal}
.st-confirm-lead{max-width:520px;color:var(--st-text-2);line-height:1.8}
.st-confirm-ref{display:inline-grid;gap:8px;margin:18px 0 0;padding:18px 22px;border:1px solid var(--line)}
.st-confirm-ref dt{color:var(--muted);font:10px var(--mono);letter-spacing:1.3px;text-transform:uppercase}
.st-confirm-ref dd{margin:0;font:600 26px var(--display);letter-spacing:.5px}
.st-confirm-details p{clear:both;margin:0;line-height:1.8;color:var(--st-text-2)}
.st-confirm-details .button{margin-top:10px}

/* Search */
.st-search{max-width:860px;padding-top:4px}
.st-search label{display:block;margin-bottom:12px;color:var(--muted);font:11px var(--mono);letter-spacing:1.2px;text-transform:uppercase}
.st-search-row{display:flex;gap:14px;align-items:stretch}
.st-search input{flex:1;min-width:0;min-height:56px;padding:10px 2px;background:transparent;border:0;border-bottom:1px solid var(--st-input-line);border-radius:0;color:var(--paper);font-size:22px}
.st-search input::placeholder{color:var(--st-placeholder-2)}
.st-search input::-webkit-search-cancel-button{filter:invert(1)}
.st-search-count{margin:26px 0 22px}
.st-search-count:empty{display:none}
.st-search-empty{padding:36px 0 110px}
.st-search-empty h2{font:600 clamp(30px,3.6vw,48px)/1 var(--display);text-transform:uppercase;margin-bottom:16px}
.st-search-empty p{max-width:520px;color:var(--muted);line-height:1.8}
.st-search-browse{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 26px}
.st-search-browse a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--st-line-4);font-size:14px}
.st-search-browse a:hover{border-color:var(--paper)}

@media(min-width:1600px){.st-grid{gap:60px 24px}}

@media(max-width:1100px){
 .st-nav-main{gap:22px}
 .st-tool .st-tool-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}

@media(max-width:1000px){
 .st-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 16px}
 .st-footer-top{grid-template-columns:1fr 1fr;row-gap:44px}
 .st-feature{grid-template-columns:1fr}
 .st-editorial{min-height:540px}
 .st-news-inner{grid-template-columns:1fr}
 .st-pdp{grid-template-columns:minmax(0,1fr) minmax(300px,1fr)}
}

@media(max-width:900px){
 .st-header{grid-template-columns:1fr auto}
 .st-menu-toggle{display:inline-flex}
 .st-nav{display:none;position:fixed;left:0;right:0;top:var(--st-menu-top,var(--st-head));bottom:0;z-index:29;overflow-y:auto;overscroll-behavior:contain;padding:18px var(--st-gutter) 40px;background:var(--ink)}
 .st-nav.is-open{display:block}
 .st-nav-main{display:block}
 .st-nav-main>li{border-bottom:1px solid var(--line)}
 .st-nav-main>li>a{display:flex;min-height:64px;font:700 40px/1 var(--display);letter-spacing:-.01em}
 .st-nav-main>li>a[aria-current]:after,.st-nav-main>li>a.is-active:after{left:auto;right:0;top:50%;bottom:auto;width:8px;height:8px;transform:translateY(-50%)}
 .st-nav-sub{display:flex;flex-wrap:wrap;gap:0 22px;padding:0 0 14px}
 .st-nav-sub a{min-height:40px;color:var(--muted);font-size:11px}
 .st-nav-sub a[aria-current]{color:var(--paper)}
 .st-nav-extra{display:block;margin-top:28px}
 .st-nav-extra a{min-height:44px;color:var(--muted)}
 .st-menu-open{overflow:hidden}
 .st-tool-wish{display:none}
 .st-tools{gap:0}
}

@media(max-width:700px){
 :root{--st-head:64px}
 .st-notice{font-size:9px;letter-spacing:.8px}
 .st-wordmark{font-size:18px}
 .st-section{padding:68px 0}
 .st-section-head{display:block;margin:20px 0 28px}
 .st-section-head .text-link{margin-top:18px}
 .st-section-head p{margin-top:16px}
 .st-hero{min-height:0;display:block}
 .st-hero-img{position:relative;display:block;height:auto;aspect-ratio:4/5;max-height:62svh;object-position:74% 40%}
 .st-hero-shade{background:linear-gradient(0deg,#101011 0%,#101011 38%,transparent 62%)}
 .st-hero-copy{margin-top:-120px;padding-top:0;padding-bottom:56px}
 .st-hero-copy :is(h1,h2){font-size:clamp(38px,11vw,56px)}
 .st-hero .st-caption{top:16px;bottom:auto;right:auto;left:var(--st-gutter)}
 .st-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 12px}
 .st-card-name{font-size:19px}
 .st-price{font-size:14px}
 .st-price small{display:block;margin:4px 0 0}
 .st-tag{left:6px;top:6px;padding:5px 6px;font-size:9px}
 .st-tag-new{top:auto;bottom:6px}
 .st-wish{top:0;right:0}
 .st-index{font-size:30px;left:8px}
 .st-cat-grid{grid-template-columns:1fr;gap:34px}
 .st-cat-media{aspect-ratio:5/4}
 .st-editorial{grid-template-columns:1fr;min-height:0}
 .st-editorial-img{aspect-ratio:1}
 .st-editorial-copy{padding:52px var(--st-gutter) 60px}
 .st-feature-items{gap:12px}
 .st-news{padding:60px 0}
 .st-news-row{flex-direction:column}
 .st-footer-top{grid-template-columns:1fr;gap:34px;padding-top:48px}
 .st-plp-head{display:block;padding:26px 0 24px}
 .st-plp-aside{text-align:left;margin-top:22px}
 .st-subnav{margin-left:calc(var(--st-gutter) * -1);margin-right:calc(var(--st-gutter) * -1);padding:0 var(--st-gutter)}
 .st-pdp{grid-template-columns:1fr;gap:28px;padding-top:16px}
 .st-info{position:static}
 .st-gallery{margin:0 calc(var(--st-gutter) * -1)}
 .st-gallery-main figcaption{padding-left:var(--st-gutter);padding-right:var(--st-gutter);flex-direction:column;gap:2px}
 .st-thumbs{padding:0 var(--st-gutter)}
 .st-rail{margin-top:80px}
 .st-toolbar{justify-content:flex-start;margin:-18px 0 24px}
 .st-cart{grid-template-columns:1fr;padding-bottom:70px}
 .st-summary{position:static;padding:22px}
 .st-line{grid-template-columns:88px minmax(0,1fr) auto;grid-template-areas:"media info total" "media controls controls";gap:12px 16px}
 .st-line-media{grid-area:media}
 .st-line-info{grid-area:info}
 .st-line-total{grid-area:total}
 .st-line-controls{grid-area:controls;flex-direction:row;align-items:center;justify-content:space-between;width:100%}
 .st-line-name{font-size:20px}
 .st-fields{grid-template-columns:1fr}
 .st-search-row{flex-direction:column}
 .st-search input{font-size:18px}
 .st-confirm-ref dd{font-size:20px}
}
@media(min-width:701px) and (max-width:1000px){.st-cart{grid-template-columns:1fr}.st-summary{position:static}}

/* /our-story: the original landing page under the one store header and above the one store footer. Its own header
   (.nav) and footer are not shown; the scroll film's sticky stage sits just below the sticky store header. */
.st-our-story .kitsyuu-landing>header.nav,.st-our-story .kitsyuu-landing>footer{display:none}
.st-our-story .kitsyuu-landing .stage{height:calc(100svh - var(--st-head))}
.motion-ready .st-our-story .kitsyuu-landing .stage{top:var(--st-head);height:calc(100svh - var(--st-head))}
.st-our-story .kitsyuu-landing :is(#top,#story,#edit,#about){scroll-margin-top:0}
/* Page navigation on /our-story is instant; styles.css makes all scrolling smooth, which would animate Back/Forward
   through the whole story. The landing's own in-page links keep their smooth scroll (components/LandingScript.tsx). */
html:has(.kitsyuu-landing){scroll-behavior:auto}
.kitsyuu-landing [data-anchor-focus]:focus{outline:none}

/* Homepage brand hero: the landing film's poster frame and wordmark, then the way into the store. */
/* Scroll film (components/BrandHero.tsx): with .is-scrub the section is taller than the screen and the stage stays pinned
   under the header while the film plays with the scroll. Without it (no JS, reduced motion) it is one screen with the poster. */
.st-brand-hero{position:relative;background:#0a0a0b}
.st-brand-hero.is-scrub{height:calc(100svh - var(--st-head) + 220svh)}
.st-brand-stage{position:relative;height:calc(100svh - var(--st-head));min-height:520px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.is-scrub>.st-brand-stage{position:sticky;top:var(--st-head)}
.st-brand-hero-img,.st-brand-film{position:absolute;inset:0;width:100%;height:100%}
.st-brand-hero-img{object-fit:cover;object-position:50% 45%}
.st-brand-film{opacity:0;transition:opacity .3s}
.has-film .st-brand-film{opacity:1}
.st-brand-hero-word{transition:none;will-change:opacity,transform}
.st-brand-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--st-line-1);display:none}
.is-scrub .st-brand-progress{display:block}
.st-brand-progress>span{display:block;height:100%;background:var(--red);transform-origin:left;transform:scaleX(var(--st-film,0))}
.st-brand-hero-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#0a0a0bf0 0%,#0a0a0b99 22%,transparent 48%),linear-gradient(180deg,#0a0a0b80 0%,transparent 18%)}
.st-brand-hero-top{position:absolute;top:28px;left:var(--st-gutter);right:var(--st-gutter);display:flex;justify-content:space-between;gap:20px;color:#c5c0b5;margin:0}
.st-brand-hero-top b{color:var(--red);font-weight:400;margin:0 8px}
.store h1.st-brand-hero-word{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);margin:0;width:max-content;max-width:96%;font-family:'DM Sans',Arial,sans-serif;font-size:clamp(72px,17vw,290px);font-weight:1000;line-height:.85;letter-spacing:-.085em;text-indent:-.085em;color:#f1eee8;text-shadow:0 5px 35px #0003;white-space:nowrap}
.st-brand-hero-copy{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;padding-top:40px;padding-bottom:56px}
.st-brand-hero-copy .eyebrow{margin:0 0 10px}
.st-brand-hero-lead{max-width:420px;font-size:18px;line-height:1.6;color:#dcd8d0;margin:0}
.st-brand-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px}
@media(max-width:700px){
 .st-brand-hero.is-scrub{height:calc(100svh - var(--st-head) + 180svh)}
 .st-brand-hero-img{object-position:58% 40%}
 .store h1.st-brand-hero-word{top:36%;font-size:21vw}
 .st-brand-hero-top{top:20px;font-size:11px}
 .st-brand-hero-copy{padding-bottom:36px}
 .st-brand-hero-lead{font-size:16px}
 .st-brand-hero-actions .button{width:100%}
}

/* Display headings: the red second line is drawn as an outline (hollow red letters), and single-line page titles
   carry a small red marker, so the calmer heading sizes keep a streetwear accent. */
:is(.st-section-head h2,.st-hero-copy :is(h1,h2),.st-editorial-copy h2,.st-feature-copy h2,.st-confirm h1) em{color:transparent;-webkit-text-stroke:1.6px var(--red);paint-order:stroke fill}
.st-plp-head h1:before{content:'';display:inline-block;width:.2em;height:.2em;margin:0 .32em .1em 0;background:var(--red);vertical-align:middle}
@supports not (-webkit-text-stroke:1px red){:is(.st-section-head h2,.st-hero-copy :is(h1,h2),.st-editorial-copy h2,.st-feature-copy h2,.st-confirm h1) em{color:var(--red)}}

/* Shop: Filter & sort panel (a native <dialog>: a drawer from the right, a bottom sheet on phones), active-filter chips */
.st-filter-open{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;background:none;border:1px solid var(--st-line-4);color:var(--paper);font:11px var(--mono);letter-spacing:1.2px;text-transform:uppercase}
.st-filter-open:hover{border-color:var(--paper)}
.st-filter-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;background:var(--red);color:var(--paper);font:10px var(--mono);letter-spacing:0}
.store .st-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:-10px 0 28px}
.st-chips button:not(.st-clear){display:inline-flex;align-items:center;gap:10px;min-height:34px;padding:0 12px;background:var(--st-chip-bg);border:1px solid var(--line);color:var(--paper);font-size:13px}
.st-chips button:not(.st-clear):hover{border-color:var(--red)}
.st-chips button span{color:var(--red);font-size:16px;line-height:1}
.st-chips .st-clear{min-height:34px}
.st-no-match{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.st-no-match p{margin:0}
.st-filter{position:fixed;inset:0 0 0 auto;width:min(420px,100vw);max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-left:1px solid var(--line);background:var(--ink);color:var(--paper)}
.st-filter::backdrop{background:#000000a8;backdrop-filter:blur(2px)}
.st-filter[open]{animation:st-filter-in .28s cubic-bezier(.2,.7,.2,1)}
@keyframes st-filter-in{from{transform:translateX(40px);opacity:0}}
.st-filter-inner{display:flex;flex-direction:column;height:100%}
.st-filter-head{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;border-bottom:1px solid var(--line)}
.st-filter-head h2{font:600 26px/1 var(--display);letter-spacing:.02em;text-transform:uppercase}
.st-filter-head h2:before{content:'';display:inline-block;width:.24em;height:.24em;margin:0 .35em .12em 0;background:var(--red);vertical-align:middle}
.st-filter-x{width:44px;height:44px;background:none;border:1px solid transparent;color:var(--paper);font-size:26px;line-height:1}
.st-filter-x:hover{border-color:var(--line);color:var(--red)}
.st-filter-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 28px 20px}
.st-facet{border-bottom:1px solid var(--line)}
.st-facet summary{display:flex;justify-content:space-between;align-items:center;min-height:58px;cursor:pointer;list-style:none;font:11px var(--mono);letter-spacing:1.4px;text-transform:uppercase}
.st-facet summary::-webkit-details-marker{display:none}
.st-facet summary:after{content:'+';color:var(--muted);font:300 20px var(--body)}
.st-facet[open] summary:after{content:'–'}
.st-facet summary span{margin-left:auto;margin-right:14px;color:var(--red);font-size:10px}
.st-facet-opts{display:grid;gap:2px;padding:0 0 18px}
.st-facet-opts.is-sizes{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px}
.st-opt{display:flex;align-items:center;gap:12px;min-height:38px;cursor:pointer;font-size:14px;color:var(--st-text-3)}
.st-opt:hover{color:var(--paper)}
.st-opt small{margin-left:auto;color:var(--muted);font:10px var(--mono)}
.st-opt input{appearance:none;flex:none;width:16px;height:16px;margin:0;border:1px solid var(--st-line-6);background:none;display:grid;place-items:center;cursor:pointer}
.st-opt input[type=radio]{border-radius:50%}
.st-opt input:checked{border-color:var(--red);background:var(--red);box-shadow:inset 0 0 0 3px var(--ink)}
.st-opt.is-empty{opacity:.38;cursor:not-allowed}
.is-sizes .st-opt{position:relative;justify-content:center;min-height:44px;border:1px solid var(--st-line-3);font:12px var(--mono)}
.is-sizes .st-opt input{position:absolute;inset:0;width:100%;height:100%;border:0;background:none;box-shadow:none;opacity:0}
.is-sizes .st-opt small{display:none}
.is-sizes .st-opt:has(input:checked){border-color:var(--paper);background:var(--paper);color:var(--ink)}
.is-sizes .st-opt:has(input:focus-visible){outline:2px solid var(--red);outline-offset:3px}
.st-price{display:flex;align-items:flex-end;gap:12px;padding-bottom:10px}
.st-price label{flex:1}
.st-price label span{display:block;margin-bottom:8px;color:var(--muted);font:10px var(--mono);letter-spacing:1.1px;text-transform:uppercase}
.st-price input{width:100%;min-height:46px;padding:10px 12px;background:var(--st-field-bg);border:1px solid var(--st-line-3);border-radius:0;color:var(--paper);color-scheme:var(--st-scheme)}
.st-price>span{padding-bottom:14px;color:var(--muted)}
.st-price-hint{margin:0 0 18px;color:var(--muted);font:10px var(--mono);letter-spacing:.8px}
.st-filter-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 28px;border-top:1px solid var(--line);background:var(--st-sheet-foot)}
.st-filter-foot .button{flex:1;max-width:240px}
.st-filter-foot .st-clear:disabled{opacity:.35;cursor:default}
@media(max-width:700px){
 .st-toolbar-sort{display:none}
 .st-toolbar-count{margin-left:auto}
 .st-filter{inset:auto 0 0 0;width:100vw;height:88dvh;border-left:0;border-top:1px solid var(--line)}
 @keyframes st-filter-in{from{transform:translateY(40px);opacity:0}}
 .st-filter-head,.st-filter-body,.st-filter-foot{padding-left:var(--st-gutter);padding-right:var(--st-gutter)}
}

/* Reviews (M12): product page list, account pages, review form */
.st-reviews{padding:72px 0}
.st-reviews-summary{margin:0 0 6px;color:var(--paper);font:12px var(--mono);letter-spacing:1px}
.st-stars{color:var(--st-star);letter-spacing:3px}
.store .st-review-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.st-review{display:grid;gap:8px;padding:22px;background:var(--st-soft);border:1px solid var(--line)}
.st-review p{margin:0}
.st-review h3{margin:0;font:600 20px/1.1 var(--display);letter-spacing:.02em;text-transform:uppercase}
.st-review-body{color:var(--st-text-3);line-height:1.7;white-space:pre-line}
.st-review-photos{display:flex;gap:8px;flex-wrap:wrap}
.st-review-photos img{width:88px;height:88px;object-fit:cover;border:1px solid var(--line)}
.st-review-meta{color:var(--muted);font:10px var(--mono)!important;letter-spacing:1px;text-transform:uppercase}
.st-account-section{margin:0 0 40px}
.st-account-section h2{margin:0 0 14px;font:600 24px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.store .st-review-todo,.store .st-review-mine{display:grid;gap:10px}
.st-review-todo li,.st-review-mine li{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--line)}
.st-review-todo small,.st-review-mine small{display:block;color:var(--muted);font:10px var(--mono);letter-spacing:1px;text-transform:uppercase}
.st-review-mine li[data-status=approved] small{color:var(--st-ok)}
.st-review-mine li[data-status=rejected] small{color:var(--st-error)}
.st-textarea,.st-file{width:100%;padding:12px 14px;background:var(--st-field-bg);border:1px solid var(--st-line-3);border-radius:0;color:var(--paper);font:inherit}
.st-textarea{min-height:140px;resize:vertical}
.st-review-form .st-radio-group .st-radio span{color:var(--st-star);letter-spacing:3px}

/* Announcement bar (M17): one line of text set in the admin, above the header */
.st-announce{margin:0;padding:9px var(--st-gutter);background:var(--red);color:var(--paper);text-align:center;font:11px/1.4 var(--mono);letter-spacing:1.2px;text-transform:uppercase}
.st-announce a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ============================ KITSYUU v2 — homepage image choreography ============================
   components/Choreo.tsx writes --p (scroll progress) and data-step / .is-current / .is-past; everything here is
   transform, opacity or clip-path. Image frames stay sharp rectangles (no border-radius anywhere). The pinned
   sequences run only on wide screens with motion allowed (html.ch-on); otherwise the still layout below is used.
   The brand hero (st-brand-hero) is not touched by any rule here. */
:root{--ch-ease:cubic-bezier(.2,.7,.2,1);--ch-slow:1.15s}
.ch-frame{position:relative;display:block;overflow:hidden;background:var(--st-stage)}
.ch-frame img{display:block;width:100%;height:100%;object-fit:cover}
.ch-count{display:block;font:11px var(--mono);letter-spacing:1.4px;color:var(--muted)}
.ch-count b{color:var(--paper);font-weight:400}
.ch-progress{display:none}

/* reveals (cards fade and rise; framed photographs are uncovered from below) */
.ch-on [data-reveal]:not(.ch-frame){opacity:0;transform:translateY(42px);transition:opacity .9s var(--ch-ease) var(--d,0ms),transform 1.1s var(--ch-ease) var(--d,0ms)}
.ch-on [data-reveal].is-in:not(.ch-frame){opacity:1;transform:none}
.ch-on .ch-frame[data-reveal]{clip-path:inset(100% 0 0 0);transition:clip-path var(--ch-slow) var(--ch-ease) var(--d,0ms)}
.ch-on .ch-frame[data-reveal].is-in{clip-path:inset(0 0 0 0)}

/* ---------- 01 New arrivals ---------- */
.ch-na{padding-bottom:0}
.ch-na-reel{padding-bottom:96px}
.ch-na-list{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;list-style:none;margin:0;padding:0 0 14px;scrollbar-width:thin}
.ch-na-item{flex:0 0 min(80vw,440px);scroll-snap-align:start}
.ch-na-info .ch-count{margin-bottom:6px}
@media(min-width:901px){
  /* Pinned reel. Travel = n × 95% of a screen; the stage stays sticky for all of it. Per picture i (from Choreo's --t):
     --r = how far it has wiped in, --e = how far it has moved on, --v = how visible its text is. Scroll-driven only:
     no timed transitions, so the state always matches the scroll position, forwards and backwards. */
  .ch-on .ch-na-reel{height:calc(100svh + var(--n) * 95svh);padding-bottom:0}
  .ch-on .ch-na-stage{position:sticky;top:var(--st-head);height:calc(100svh - var(--st-head));display:flex;flex-direction:column;justify-content:center;padding-top:16px;padding-bottom:40px}
  .ch-on .ch-na-list{display:grid;overflow:visible;height:100%;max-height:780px;padding:0}
  .ch-on .ch-na-item{grid-area:1/1;min-height:0;pointer-events:none;
    --r:clamp(0, calc(var(--t, 0) - var(--i) + 1), 1);--e:clamp(0, calc(var(--t, 0) - var(--i)), 1);
    --v:min(clamp(0, calc((var(--t, 0) - var(--i)) * 3 + 1), 1), clamp(0, calc((var(--i) - var(--t, 0)) * 3 + 1), 1))}
  .ch-on .ch-na-item.is-current{pointer-events:auto}
  .ch-on .ch-na-card{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,80px);height:100%;align-items:end}
  .ch-on .ch-na-media{order:2;aspect-ratio:auto;height:100%;clip-path:inset(calc((1 - var(--r)) * 100%) 0 0 0)}
  .ch-on .ch-na-media img{max-width:58%;max-height:84%;transform:translateY(calc((1 - var(--r)) * 12% - var(--e) * 8%)) scale(calc(1.06 - var(--r) * .06 - var(--e) * .03));transition:none}
  /* Performance: only the picture on screen and the one wiping in next get their own compositor layer (not every picture). */
  .ch-on .ch-na-item:is(.is-current,.is-current+li) .ch-na-media{will-change:clip-path}
  .ch-on .ch-na-item:is(.is-current,.is-current+li) .ch-na-media img{will-change:transform}
  .ch-on .ch-na-info{order:1;padding:0 0 8px;opacity:var(--v);transform:translateY(calc((1 - var(--v)) * 22px))}
  .ch-on .ch-na-info .ch-count{font-size:12px;margin-bottom:22px}
  .ch-on .ch-na-info .ch-count b{font:600 clamp(56px,6vw,96px)/.9 var(--display);letter-spacing:0;display:block;margin-bottom:6px}
  .ch-on .ch-na-info .st-card-name{font-size:clamp(34px,3.2vw,54px);line-height:.98}
  .ch-on .ch-na-info .st-price{margin-top:14px;font-size:17px}
  .ch-on .ch-na-card .st-wish{opacity:var(--v)}
  .ch-on .ch-progress{display:block;position:absolute;left:var(--st-gutter);right:var(--st-gutter);bottom:18px;height:1px;background:var(--line)}
  .ch-on .ch-progress:after{content:"";position:absolute;inset:0;background:var(--red);transform-origin:0 50%;transform:scaleX(var(--p,0))}
}
.ch-na-stage{position:relative}

/* ---------- Shop the rotation ---------- */
.ch-rot .st-hero-img{transform:scale(1.08) translateY(calc((var(--p,.5) - .5) * -7%));will-change:transform}
.ch-rot-frames{position:absolute;inset:0;pointer-events:none;z-index:2}
.ch-rot-frame{pointer-events:auto;cursor:pointer}
.st-media-link{position:absolute;inset:0;z-index:1}
.ch-rot-frame{position:absolute;display:grid;place-items:center;aspect-ratio:4/5;box-shadow:0 0 0 1px #ffffff14}
.ch-rot-frame img{width:auto;height:auto;max-width:78%;max-height:84%;object-fit:contain}
.ch-rot-frame-1{right:clamp(16px,4vw,72px);top:11%;width:clamp(150px,14vw,240px);transform:translateY(calc((var(--p,.5) - .5) * -160px))}
.ch-rot-frame-2{right:clamp(170px,19vw,360px);bottom:9%;width:clamp(118px,10vw,176px);transform:translateY(calc((var(--p,.5) - .5) * 220px));--d:.18s}
.ch-rot .st-hero-copy{position:relative;z-index:1}
@media(max-width:900px){.ch-rot-frames{display:none}}

/* ---------- 02 Shop by category ---------- */
.ch-cats{padding-bottom:0}
.ch-cat-reel{padding-bottom:96px}
.ch-cat-list{display:grid;gap:64px;list-style:none;margin:0;padding:0}
.ch-cat-item{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:end}
.ch-cat-text .ch-count{margin-bottom:18px}
.ch-cat-link .st-cat-name{font-size:clamp(56px,7vw,120px);line-height:.9}
.ch-cat-link:hover .st-cat-name{color:var(--red)}
.ch-cat-visual{position:relative;display:block;aspect-ratio:16/11}
.ch-cat-photo{position:absolute;inset:0 0 10% 12%}
.ch-cat-photo img{transition:transform 1.6s var(--ch-ease)}
.ch-cat-piece{position:absolute;left:0;bottom:0;width:32%;aspect-ratio:4/5;display:grid;place-items:center;box-shadow:0 0 0 1px var(--ink)}
.ch-cat-piece img{width:auto;height:auto;max-width:78%;max-height:84%;object-fit:contain}
.ch-cat-visual:hover .ch-cat-photo img{transform:scale(1.03)}
@media(min-width:901px){
  /* Pinned like New arrivals: travel = n × one screen; same --r / --e / --v per panel, scroll-driven only. */
  .ch-on .ch-cat-reel{height:calc(100svh + var(--n) * 100svh);padding-bottom:0}
  .ch-on .ch-cat-stage{position:sticky;top:var(--st-head);height:calc(100svh - var(--st-head));padding-top:16px;padding-bottom:40px}
  .ch-on .ch-cat-list{height:100%;gap:0}
  .ch-on .ch-cat-item{grid-area:1/1;height:100%;align-items:stretch;pointer-events:none;
    --r:clamp(0, calc(var(--t, 0) - var(--i) + 1), 1);--e:clamp(0, calc(var(--t, 0) - var(--i)), 1);
    --v:min(clamp(0, calc((var(--t, 0) - var(--i)) * 3 + 1), 1), clamp(0, calc((var(--i) - var(--t, 0)) * 3 + 1), 1))}
  .ch-on .ch-cat-item.is-current{pointer-events:auto}
  .ch-on .ch-cat-text{align-self:end;padding-bottom:8px;opacity:var(--v);transform:translateY(calc((1 - var(--v)) * 28px))}
  .ch-on .ch-cat-visual{aspect-ratio:auto;height:100%}
  .ch-on .ch-cat-photo{clip-path:inset(calc((1 - var(--r)) * 100%) 0 0 0)}
  .ch-on .ch-cat-photo img{transform:scale(calc(1.14 - var(--r) * .12 - var(--e) * .02)) translateY(calc((1 - var(--r)) * 5% - var(--e) * 4%));transition:none}
  .ch-on .ch-cat-item:is(.is-current,.is-current+li) .ch-cat-photo{will-change:clip-path}
  .ch-on .ch-cat-item:is(.is-current,.is-current+li) .ch-cat-photo img{will-change:transform}
  .ch-on .ch-cat-piece{opacity:var(--v);transform:translateY(calc((1 - var(--v)) * 36%))}
  .ch-on .ch-cats .ch-progress{display:block}
}
.ch-cat-stage{position:relative}
@media(max-width:900px){.ch-cat-item{grid-template-columns:minmax(0,1fr);gap:18px}.ch-cat-visual{order:-1}.ch-cat-link .st-cat-name{font-size:clamp(44px,12vw,72px)}}

/* ---------- 03 After hours ---------- */
.ch-ed{min-height:720px;overflow:hidden}
.ch-ed .ch-ed-main{transform:scale(calc(1.14 - var(--p,.5) * .14)) translateY(calc((var(--p,.5) - .5) * -5%));transform-origin:50% 60%;will-change:transform}
.ch-ed .st-editorial-copy{position:relative}
.ch-ed-inset{position:absolute;bottom:7%;left:-25%;width:clamp(170px,17vw,280px);aspect-ratio:16/9;box-shadow:0 0 0 1px var(--ink);transform:translateY(calc((var(--p,.5) - .5) * -150px))}
@media(max-width:900px){.ch-ed{min-height:0}.ch-ed-inset{display:none}}

/* ---------- 04 Featured: one row of four, the 2nd and 4th set lower (editorial stagger) ---------- */
@media(min-width:901px){
  .ch-ft .st-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 24px;align-items:start}
  .ch-ft .st-grid>li:nth-child(even){margin-top:72px}
}

/* ---------- 05 Outerwear: jacket 01 → jacket 02 ---------- */
@media(min-width:901px){
  /* Pinned (2026-10-03): the card stays in place for 90% of a screen of scrolling while jacket 02 wipes in (--t from
     Choreo, 0 → 1), so the change is always seen complete before the section moves on. The card is kept short enough to
     fit under the header. */
  .ch-on .ch-ow-reel[data-steps="2"]:after{content:"";display:block;height:90svh}
  .ch-on .ch-ow[data-steps="2"]{position:sticky;top:calc(var(--st-head) + 24px);grid-template-columns:minmax(0,1fr);--s:clamp(0, var(--t, 0), 1)}
  .ch-on .ch-ow[data-steps="2"]>li{grid-area:1/1}
  .ch-on .ch-ow[data-steps="2"]>li:nth-child(1){opacity:calc(1 - var(--s))}
  .ch-on .ch-ow[data-steps="2"]>li:nth-child(2){clip-path:inset(0 0 0 calc((1 - var(--s)) * 100%));pointer-events:none}
  .ch-on .ch-ow-reel[data-step="1"] .ch-ow>li:nth-child(2){pointer-events:auto}
  .ch-on .ch-ow-reel[data-step="1"] .ch-ow>li:nth-child(1){pointer-events:none}
  .ch-on .ch-ow[data-steps="2"] .st-card-media{aspect-ratio:5/4;max-height:calc(100svh - var(--st-head) - 190px)}
}
@media(min-width:1001px){
  /* Two columns: the heading stays beside the pinned card instead of scrolling away from it. */
  .ch-on .ch-ow-wrap{align-items:start}
  .ch-on .ch-ow-wrap .st-feature-copy{position:sticky;top:calc(var(--st-head) + 24px)}
}

/* ---------- SHOP mega-menu (desktop; components/Header.tsx MegaMenu) — compact: link columns + one row of tiles ---------- */
.st-mega{display:none}
@media(min-width:901px){
  .st-nav-main>li.has-mega{position:static}
  .st-mega{display:grid;grid-template-columns:auto minmax(0,1fr);gap:56px;position:absolute;left:0;right:0;top:100%;z-index:40;padding:30px var(--st-gutter) 34px;background:var(--st-mega-bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .18s var(--ch-ease),transform .22s var(--ch-ease),visibility 0s linear .22s}
  .st-mega:before{content:"";position:absolute;left:0;right:0;bottom:100%;height:24px}
  .has-mega:hover>.st-mega,.has-mega:focus-within>.st-mega{visibility:visible;opacity:1;transform:none;transition-delay:.05s,.05s,0s}
  .has-mega.is-off>.st-mega{visibility:hidden;opacity:0}
  .st-mega-cols{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:0 48px;align-content:start}
  .st-mega-h{margin:0 0 12px;font:11px var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--red)}
  .st-mega ul{list-style:none;margin:0;padding:0}
  .st-mega-col li a{min-height:0;padding:5px 0;font:14px/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--st-text-2)}
  .st-mega-col li a:hover{color:var(--paper)}
  .st-mega-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,150px));justify-content:end;gap:16px}
  .st-mega-tile{display:block;min-height:0}
  .st-mega .st-mega-tile{display:block}
  .st-mega-img{display:grid;place-items:center;aspect-ratio:4/5;background:var(--st-stage);overflow:hidden}
  .st-mega-img img{width:auto;height:auto;max-width:78%;max-height:84%;transition:transform .4s var(--ch-ease)}
  .st-mega-tile:hover .st-mega-img img{transform:scale(1.04)}
  .st-mega-tile b{display:block;margin-top:10px;font:600 16px/1 var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--paper)}
  .st-mega-tile:hover b{color:var(--red)}
}
@media(min-width:901px){
  .st-mega-tile small{display:block;margin-top:5px;font:13px var(--body);color:var(--muted)}
  .st-mega-tile b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.05}
}
@media(min-width:901px){
  .st-mega{background:var(--ink)}
  .st-mega-tiles{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,150px);justify-content:end}
}
/* Third pass: colour choice on the product page */
.st-colours-set{margin-top:18px}
.st-colour-opt span{gap:8px;grid-auto-flow:column}
.st-colour-opt i{width:14px;height:14px;border:1px solid var(--st-line-5);border-radius:50%;flex:none}
.st-colour-out{color:var(--muted);font-weight:400}

/* ---------- Themes (2026-10-01). Dark is the default; light is opt-in: <html data-theme="light"> (see app/layout.tsx and
   components/ThemeToggle.tsx). Page colours come from these tokens; the dark values are exactly the earlier ones.
   Photo-led bands (brand hero, rotation hero, editorial, newsletter, the Our story film, the photo-coming-soon panel) keep
   the dark palette in both themes, because their text sits on dark photography. ---------- */
:root{color-scheme:dark;--st-scheme:dark;
  --st-notice-bg:#0b0b0c;--st-footer-bg:#0c0c0d;--st-sheet-foot:#0d0d0e;--st-header-bg:#101011f5;--st-mega-bg:#101011fa;
  --st-line-1:#ffffff17;--st-line-2:#ffffff1f;--st-line-3:#ffffff2e;--st-line-4:#ffffff38;--st-line-5:#ffffff4d;--st-line-6:#ffffff66;
  --st-field-bg:#161617;--st-chip-bg:#1b1b1d;--st-text-2:#c9c7c1;--st-text-3:#d8d5ce;--st-link-line:#aaa89c;
  --st-input-line:#e9e5dfaa;--st-placeholder:#e9e5df99;--st-placeholder-2:#e9e5df66;--st-note:#e9e5dfcc;
  --st-alert-bg:#2a1418;--st-error-line:#ef7a8b80;--st-ok:#7fc49a;--st-ok-line:#8fbf98;--st-ok-bg:#152019;--st-star:#e0b64a;--st-danger:#f0a3b1}
:root[data-theme=light]{color-scheme:light;--st-scheme:light;
  --ink:#f4f1eb;--paper:#141413;--muted:#5f5b55;--line:#00000021;--st-panel:#ebe7df;--st-soft:#ece8e1;
  --st-notice-bg:#e9e5dd;--st-footer-bg:#ebe7df;--st-sheet-foot:#ebe7df;--st-header-bg:#f4f1ebf5;--st-mega-bg:#f4f1ebfa;
  --st-line-1:#0000001a;--st-line-2:#00000024;--st-line-3:#00000033;--st-line-4:#0000003d;--st-line-5:#00000059;--st-line-6:#00000073;
  --st-field-bg:#ffffff;--st-chip-bg:#e7e3dc;--st-text-2:#3d3b37;--st-text-3:#2e2c29;--st-link-line:#6f6c66;
  --st-input-line:#00000080;--st-placeholder:#00000073;--st-placeholder-2:#00000059;--st-note:#000000b3;
  --st-error:#b3263c;--st-alert-bg:#fbe9ec;--st-error-line:#b3263c80;--st-ok:#2f7a4c;--st-ok-line:#2f7a4c;--st-ok-bg:#e6f2ea;--st-star:#a87a10;--st-danger:#b3263c}
/* Photo-led bands: the dark palette again, whatever the theme. */
:root[data-theme=light] :is(.st-brand-hero,.st-hero,.st-editorial,.st-news,.kitsyuu-landing,.st-soon){color-scheme:dark;--st-scheme:dark;
  --ink:#101011;--paper:#e9e5df;--muted:#aaa6a2;--line:#ffffff26;--st-line-1:#ffffff17;--st-line-4:#ffffff38;--st-link-line:#aaa89c;
  --st-input-line:#e9e5dfaa;--st-placeholder:#e9e5df99;--st-note:#e9e5dfcc;color:var(--paper)}
/* Shared landing rules (styles.css is byte-identical to the landing, so these are overridden here, not edited there). */
:root[data-theme=light] .logo-crop img{filter:none;mix-blend-mode:multiply}
:root[data-theme=light] .button-outline{border-color:var(--st-line-6)}
:root[data-theme=light] .text-link{border-bottom-color:var(--st-link-line)}
:root[data-theme=light] :is(.st-brand-hero,.st-hero,.st-editorial,.st-news) .button-outline{border-color:#ffffff55}
/* The theme switch in the header tools. */
.st-theme-toggle{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;background:none;border:0;color:inherit;cursor:pointer}
.st-theme-toggle svg{width:19px;height:19px}
.st-theme-toggle:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* Performance (2026-10-01): cart / wishlist before this browser's list is read: space kept for the content (no layout jump). */
.st-loading-area{min-height:60svh}

/* The welcome popup for the first-order offer (2026-10-12; components/FirstOfferPopup.tsx). A modal dialog on the store's own
   surface and type: no colour of its own. Full width with a 16px gutter on phones; no motion for reduced-motion visitors. */
.st-offer-layer{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px}
.st-offer-backdrop{position:absolute;inset:0;background:#000000a6}
.st-offer{position:relative;width:min(100%,440px);max-height:calc(100dvh - 32px);overflow:auto;padding:36px 28px 28px;background:var(--ink);color:var(--paper);border:1px solid var(--line);animation:st-offer-in .28s ease-out both}
.st-offer h2{margin:6px 0 14px;font:400 clamp(28px,7vw,40px)/1.05 var(--display);letter-spacing:.01em;text-transform:uppercase}
.st-offer-terms{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:6px;color:var(--muted);font-size:14px;line-height:1.5}
.st-offer-code{margin:0 0 18px;font-size:14px}
.st-offer-code b{display:inline-block;margin-left:8px;padding:6px 12px;border:1px dashed var(--line);font:500 15px var(--mono);letter-spacing:1.5px;color:var(--paper)}
.st-offer-actions{display:grid;gap:12px;justify-items:start}
.st-offer-actions .button{width:100%;justify-content:center;min-height:48px}
.st-offer-actions .text-link{background:none;border:0;padding:6px 0;min-height:44px;cursor:pointer;color:inherit;font:inherit;text-align:left}
.st-offer-close{position:absolute;top:6px;right:6px;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:inherit;font-size:26px;line-height:1;cursor:pointer}
.st-offer :is(a,button):focus-visible{outline:2px solid var(--red);outline-offset:2px}
@keyframes st-offer-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.st-offer{animation:none}}

/* Referrals (2026-10-12; app/account/referrals): the customer's code and reward coupons, in the account's own type. */
.st-ref-code{margin:0 0 10px}
.st-ref-code b,.st-ref-coupon{display:inline-block;padding:6px 12px;border:1px dashed var(--line);font:500 15px var(--mono);letter-spacing:1.5px}
.st-ref-link{overflow-wrap:anywhere;font-family:var(--mono);font-size:13px}

/* Help window (2026-10-12): a Help button bottom-right and the window it opens (help topics, order status, a message).
   Below the welcome offer (z-index 60) so the two never fight; full width at phone size; no motion of its own. */
.st-help{position:fixed;right:16px;bottom:16px;z-index:50}
.st-help-launch{min-width:72px;min-height:48px;padding:0 20px;background:var(--ink);color:var(--paper);border:1px solid var(--line);font:500 13px var(--mono);letter-spacing:1.2px;text-transform:uppercase;cursor:pointer}
.st-help-launch:hover{border-color:var(--paper)}
.st-help-panel{display:flex;flex-direction:column;width:min(380px,calc(100vw - 32px));max-height:min(640px,calc(100dvh - 32px));background:var(--ink);color:var(--paper);border:1px solid var(--line);box-shadow:0 12px 40px #00000066}
.st-help-head{position:relative;padding:16px 56px 12px 18px;border-bottom:1px solid var(--line)}
.st-help-head h2{margin:0 0 6px;font:400 24px/1.1 var(--display);letter-spacing:.02em;text-transform:uppercase}
.st-help-head p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.5}
.st-help-close{position:absolute;top:6px;right:6px;width:44px;height:44px;display:grid;place-items:center;background:none;border:0;color:inherit;font-size:26px;line-height:1;cursor:pointer}
.st-help-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.st-help-tabs button{min-height:44px;padding:6px 4px;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font:500 11px var(--mono);letter-spacing:.8px;text-transform:uppercase;cursor:pointer}
.st-help-tabs button.is-on{color:var(--paper);border-bottom-color:var(--paper)}
.st-help-body{padding:16px 18px 18px;overflow:auto;font-size:14px;line-height:1.55}
.st-help-note{margin:10px 0;color:var(--muted);font-size:13px}
.st-help-body .text-link{background:none;border:0;padding:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;min-height:24px}
.st-help-ask label,.st-help-form label{display:block;margin:12px 0 6px;font:11px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.st-help-ask label{margin-top:0}
.st-help-row{display:flex;gap:8px}
.st-help-row input{flex:1;min-width:0}
.st-help-body :is(input,select,textarea){width:100%;min-height:44px;padding:10px 12px;background:transparent;color:inherit;border:1px solid var(--line);font:inherit;font-size:16px}
.st-help-body select option{color:#101011;background:#fff}
.st-help-body textarea{resize:vertical}
.st-help-body .button{min-height:44px;justify-content:center}
.st-help-form .button{width:100%;margin-top:16px}
.st-help-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.st-help-topics{margin:12px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.st-help-topics li{border-bottom:1px solid var(--line)}
.st-help-topics summary{padding:12px 0;min-height:44px;cursor:pointer;font-weight:500}
.st-help-topics p{margin:0 0 12px;color:var(--muted)}
.st-help-order{margin:14px 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.st-help-order div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.st-help-order dt{color:var(--muted)}
.st-help-order dd{margin:0;text-align:right;overflow-wrap:anywhere}
.st-help :is(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media (max-width:480px){
  .st-help{right:12px;bottom:12px}
  .st-help-panel{width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}
}
@media print{.st-help{display:none}}

/* The robot picture on the Help button and the help window's title (2026-10-12). */
.st-help-launch{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.st-help-head h2{display:flex;align-items:center;gap:10px}
.st-help-bot{flex:none}

/* The help mascot (2026-10-12): a small white robot with electric-blue eyes above the Help button, with a "Need help?"
   bubble. It floats very gently, blinks, and waves now and then; all of it stops for reduced motion. It sits in the same
   corner as the Help button, inside the safe area, and is not in the page while the help window is open. */
.st-help{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}
.st-help-trigger{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.st-help-robot{position:relative;display:block;width:84px;height:92px;padding:0;margin-right:2px;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.st-help-robot:focus-visible{outline:2px solid #1f6bff;outline-offset:4px;border-radius:12px}
.st-help-mascot{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 10px #00000040)}
.st-help-mascot-shadow{fill:#00000026}
.st-help-mascot-body{animation:st-mascot-float 4.5s ease-in-out infinite;transform-origin:48px 60px}
.st-help-mascot-arm{transform-origin:72px 66px;animation:st-mascot-wave 7s ease-in-out infinite}
.st-help-mascot-eyes{transform-origin:48px 34px;animation:st-mascot-blink 5.5s linear infinite}
.st-help-robot:hover .st-help-mascot-body{animation-duration:2.6s}
.st-help-bubble{position:absolute;right:calc(100% - 14px);top:2px;padding:7px 12px;white-space:nowrap;background:#ffffff;color:#0b1b3a;border:1.5px solid #0b1b3a;border-radius:14px 14px 4px 14px;font:600 13px/1.2 var(--font,system-ui,sans-serif);box-shadow:0 6px 16px #00000033}
@keyframes st-mascot-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes st-mascot-wave{0%,72%,100%{transform:rotate(0)}76%{transform:rotate(-14deg)}80%{transform:rotate(8deg)}84%{transform:rotate(-12deg)}88%{transform:rotate(6deg)}92%{transform:rotate(0)}}
@keyframes st-mascot-blink{0%,94%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.1)}}
@media (max-width:480px){
  .st-help{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}
  .st-help-robot{width:64px;height:70px}
  .st-help-bubble{font-size:12px;padding:6px 10px}
}
@media (prefers-reduced-motion:reduce){.st-help-mascot-body,.st-help-mascot-arm,.st-help-mascot-eyes{animation:none}}

/* The help window could not load: the message and its "Try again" button (2026-10-12). */
.st-help [data-help-unavailable] p{margin:0 0 12px}
.st-help [data-help-unavailable] .button{width:100%}