/* NORTH storefront: shared design system
   Layout concept: a calm catalogue grid. Warm paper ground, charcoal type, one olive accent.
   Boldness lives in the hero and the workspace promo; everything else stays quiet and product-first. */

:root{
  /* color */
  --bg:#FAF8F4;        /* page, warm white */
  --bg2:#F1EEE7;       /* secondary surface, off-white */
  --bg3:#E6E2D8;       /* placeholder / pressed */
  --ink:#242422;       /* primary text, primary action */
  --ink2:#55524B;      /* secondary text */
  --mute:#7C776B;      /* captions */
  --line:#E0DBCF;      /* borders */
  --olive:#586042;     /* accent */
  --olive-d:#444B32;
  --olive-l:#DEE1D0;
  --sale:#9B4A2E;
  --ok:#4C6B3A;
  --out:#9A9488;
  --on-dark:#F4F2EC;
  /* type */
  --f-display:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --f-body:'Figtree','Helvetica Neue',Arial,sans-serif;
  /* spacing scale */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:112px;
  /* radius */
  --r-sm:4px;--r-md:8px;--r-pill:99px;
  /* container */
  --wrap:1360px;--gut:clamp(16px,3.6vw,48px);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
[hidden]{display:none!important}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px;border-radius:var(--r-sm)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:var(--s8)}
.section.tight{padding-block:var(--s7)}
.bg2{background:var(--bg2)}

/* ---------- type scale ---------- */
.display{font:600 clamp(40px,6vw,92px)/.98 var(--f-display);letter-spacing:-.035em;text-wrap:balance}
.h1{font:600 clamp(32px,4vw,52px)/1.05 var(--f-display);letter-spacing:-.03em;text-wrap:balance}
.h2{font:600 clamp(26px,2.6vw,36px)/1.1 var(--f-display);letter-spacing:-.025em;text-wrap:balance}
.h3{font:600 20px/1.25 var(--f-display);letter-spacing:-.01em}
.lead{font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:var(--ink2);max-width:46ch}
.small{font-size:14px;color:var(--ink2)}
.cap{font-size:13px;color:var(--mute)}
.label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.num{font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);border-radius:var(--r-md);border:1px solid var(--ink);background:var(--ink);color:var(--bg);font-weight:600;font-size:15px;line-height:1;transition:background .2s,border-color .2s,color .2s,transform .12s;white-space:nowrap}
.btn:hover{background:var(--olive-d);border-color:var(--olive-d)}
.btn:active{transform:translateY(1px)}
.btn.sec{background:transparent;color:var(--ink)}
.btn.sec:hover{background:var(--ink);color:var(--bg)}
.btn.soft{background:var(--bg2);border-color:var(--bg2);color:var(--ink)}
.btn.soft:hover{background:var(--bg3);border-color:var(--bg3)}
.btn.light{background:var(--on-dark);border-color:var(--on-dark);color:var(--ink)}
.btn.light:hover{background:#fff;border-color:#fff}
.btn.sec.onDark{color:var(--on-dark);border-color:#F4F2EC66}
.btn.sec.onDark:hover{background:var(--on-dark);color:var(--ink)}
.btn.sm{min-height:40px;padding:0 var(--s4);font-size:14px}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.tlink{font-weight:600;font-size:15px;border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .2s}
.tlink:hover{color:var(--olive)}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border:0;background:none;border-radius:var(--r-pill);transition:background .2s}
.icon-btn:hover{background:var(--bg2)}
.icon-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.badge-n{position:absolute;top:3px;right:1px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--olive);color:#fff;font-size:11px;font-weight:600;line-height:18px;text-align:center}
.badge-n:empty,.badge-n[data-n="0"]{display:none}

/* ---------- forms ---------- */
.field{display:grid;gap:6px}
.field label{font-size:13px;font-weight:600}
.input,.select{width:100%;height:48px;padding:0 var(--s4);border:1px solid var(--line);border-radius:var(--r-md);background:#fff;font-size:15px;transition:border-color .2s,box-shadow .2s}
.input:hover,.select:hover{border-color:var(--mute)}
.input:focus,.select:focus{outline:none;border-color:var(--olive);box-shadow:0 0 0 3px var(--olive-l)}
.select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23242422' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center;padding-right:40px}
.chk{display:flex;align-items:center;gap:var(--s3);min-height:36px;cursor:pointer;font-size:15px}
.chk input{appearance:none;flex:none;width:18px;height:18px;margin:0;border:1px solid var(--mute);border-radius:var(--r-sm);background:#fff;display:grid;place-items:center;transition:background .15s,border-color .15s}
.chk input::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.chk input:checked{background:var(--ink);border-color:var(--ink)}
.chk input:checked::after{opacity:1}
.chk input:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.chk .ct{margin-left:auto;font-size:13px;color:var(--mute)}
.dot{flex:none;width:16px;height:16px;border-radius:50%;border:1px solid #0002;background:var(--c)}
.qty{display:inline-flex;align-items:center;height:44px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.qty button{width:40px;height:100%;border:0;background:none;font-size:20px;line-height:1;border-radius:var(--r-md);transition:background .15s}
.qty button:hover{background:var(--bg2)}
.qty output{min-width:28px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- image placeholder ---------- */
.ph{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:var(--r,4/5);background:var(--tone,#E6E1D6);overflow:hidden;color:#6E695D}
.ph span{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:var(--s3);opacity:.8}
.ph::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent calc(50% - .5px),#0000001a calc(50% - .5px),#0000001a calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(45deg,transparent calc(50% - .5px),#0000001a calc(50% - .5px),#0000001a calc(50% + .5px),transparent calc(50% + .5px))}
.ph>span{position:relative;background:var(--tone,#E6E1D6);padding:6px 12px}
.zoom .ph{transition:transform .6s var(--ease)}
.zoom:hover .ph{transform:scale(1.035)}

/* ---------- header ---------- */
.announce{background:var(--ink);color:var(--on-dark);font-size:13px}
.announce .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:38px}
.announce a{text-decoration:underline;text-underline-offset:3px}
.hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--bg);border-bottom:1px solid var(--line)}
.hd-row{display:flex;align-items:center;gap:var(--s5);min-height:76px}
.logo{font:700 26px/1 var(--f-display);letter-spacing:.2em;padding-left:.2em}
.nav{flex:1}
.nav>ul{display:flex;gap:clamp(12px,2.2vw,36px);justify-content:center}
.nav>ul>li{position:static}
.nav>ul>li>a{display:flex;align-items:center;min-height:76px;font-size:15px;font-weight:500;position:relative}
.nav>ul>li>a::after{content:"";position:absolute;left:0;right:0;bottom:22px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav>ul>li:hover>a::after,.nav>ul>li:focus-within>a::after{transform:none}
.drop{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s,transform .22s var(--ease),visibility .22s}
.nav>ul>li:hover .drop,.nav>ul>li:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,200px)) minmax(0,280px);gap:var(--s7);justify-content:center;padding-block:var(--s6)}
.drop h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-bottom:var(--s3)}
.drop li a{display:block;padding:5px 0;font-size:15px;color:var(--ink2);transition:color .15s,transform .2s}
.drop li a:hover{color:var(--ink);transform:translateX(3px)}
.util{display:flex;align-items:center;gap:2px;margin-left:auto}
.menu-btn{display:none}
.searchbar{border-bottom:1px solid var(--line);background:var(--bg)}
.searchbar .wrap{padding-block:var(--s4);display:grid;gap:var(--s3)}
.searchbar form{display:flex;gap:var(--s3)}
.searchbar .pop{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;font-size:14px;color:var(--mute)}
.searchbar .pop a{padding:4px 12px;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--ink2)}
.searchbar .pop a:hover{border-color:var(--ink)}
.mnav{position:fixed;inset:0;z-index:70;visibility:hidden}
.mnav.open{visibility:visible}
.mnav .scrim{position:absolute;inset:0;background:#24242280;opacity:0;transition:opacity .25s}
.mnav.open .scrim{opacity:1}
.mnav .panel{position:absolute;left:0;top:0;bottom:0;width:min(86vw,380px);background:var(--bg);transform:translateX(-100%);transition:transform .3s var(--ease);display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px)}
.mnav.open .panel{transform:none}
.mnav .ph-top{display:flex;justify-content:space-between;align-items:center;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.mnav .body{overflow:auto;padding:var(--s3) var(--s4)}
.mnav details{border-bottom:1px solid var(--line)}
.mnav summary,.mnav .lone{display:flex;justify-content:space-between;align-items:center;list-style:none;min-height:54px;font:600 18px var(--f-display);cursor:pointer}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:"+";font-weight:400;font-size:22px}
.mnav details[open] summary::after{content:"\2212"}
.mnav details ul{padding:0 0 var(--s3)}
.mnav details li a{display:block;padding:9px 0;color:var(--ink2)}
.mnav .lone{border-bottom:1px solid var(--line)}

/* ---------- product card ---------- */
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s3)}
@media(min-width:700px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7) var(--s5)}}
@media(min-width:1100px){.pgrid.c4,.pgrid.c5{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1280px){.pgrid.c5{grid-template-columns:repeat(5,minmax(0,1fr))}}
.pc{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.pc-media{position:relative;overflow:hidden;border-radius:var(--r-sm)}
.pc-media .zoom{display:block}
.pc-tag{position:absolute;left:var(--s3);top:var(--s3);z-index:2;padding:4px 10px;border-radius:var(--r-pill);background:var(--bg);font-size:11px;font-weight:700;letter-spacing:.08em}
.pc-tag.sale{background:var(--sale);color:#fff}
.pc-tag.new{background:var(--olive-l);color:var(--olive-d)}
.wish{position:absolute;right:var(--s2);top:var(--s2);z-index:2;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:#FAF8F4cc;transition:background .2s,transform .2s}
.wish:hover{background:var(--bg)}
.wish svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.6;transition:fill .2s,stroke .2s}
.wish[aria-pressed="true"] svg{fill:var(--sale);stroke:var(--sale)}
.wish.pop{animation:pop .35s var(--ease)}
@keyframes pop{40%{transform:scale(1.25)}}
.qadd{position:absolute;left:var(--s3);right:var(--s3);bottom:var(--s3);z-index:2;transform:translateY(calc(100% + var(--s3)));transition:transform .3s var(--ease)}
.pc-media:hover .qadd,.pc-media:focus-within .qadd{transform:none}
@media(hover:none){.qadd{transform:none;min-height:38px;font-size:13px;left:var(--s2);right:var(--s2);bottom:var(--s2)}}
.pc-cat{font-size:13px;color:var(--mute)}
.pc h3{font:600 16px/1.3 var(--f-body)}
.pc h3 a:hover{color:var(--olive)}
.pc-rate{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2)}
.pc-rate svg{width:13px;height:13px;fill:var(--olive);stroke:none}
.pc-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--s3);font-weight:600;font-variant-numeric:tabular-nums}
.pc-price s{font-weight:400;font-size:14px;color:var(--mute)}
.pc-price.is-sale b{color:var(--sale)}
.pc-stock{font-size:13px;color:var(--out)}

/* ---------- home ---------- */
.hero{padding-block:var(--s6) var(--s8)}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s7);align-items:end}
.hero-copy{display:grid;gap:var(--s5);padding-bottom:var(--s5)}
.hero-copy .ctas{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2)}
.hero-note{display:flex;align-items:center;gap:var(--s3);padding-top:var(--s5);border-top:1px solid var(--line);font-size:14px;color:var(--ink2)}
.hero-note svg{flex:none;width:18px;height:18px;stroke:var(--olive);fill:none;stroke-width:1.5}
.hero-media{position:relative}
.hero-media .ph{--r:6/5;border-radius:var(--r-sm)}
.hotspot{position:absolute;left:var(--s5);bottom:var(--s5);display:flex;gap:var(--s4);align-items:center;background:var(--bg);padding:var(--s3) var(--s4);border-radius:var(--r-md);max-width:calc(100% - var(--s6));transition:transform .25s var(--ease)}
.hotspot:hover{transform:translateY(-3px)}
.hotspot .ph{width:56px;--r:1;flex:none;border-radius:var(--r-sm)}
.hotspot .ph span{display:none}
.hotspot b{display:block;font-size:15px;line-height:1.25}
.hotspot small{font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s5);margin-bottom:var(--s6);flex-wrap:wrap}
.cats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s3)}
.cat{grid-column:span 2;position:relative;display:block;overflow:hidden;border-radius:var(--r-sm)}
.cat:nth-child(-n+2){grid-column:span 3}
.cat .ph{--r:3/4}
.cat:nth-child(-n+2) .ph{--r:4/3}
.cat-l{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s4);background:linear-gradient(transparent,#24242299);color:#fff}
.cat-l b{font:600 22px var(--f-display);letter-spacing:-.01em}
.cat-l span{font-size:13px;opacity:.9}
@media(min-width:1000px){.cats{grid-template-columns:repeat(5,minmax(0,1fr))}.cat,.cat:nth-child(-n+2){grid-column:auto}.cat:nth-child(-n+2) .ph{--r:3/4}}
@media(max-width:560px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}.cat,.cat:nth-child(-n+2){grid-column:auto}.cat:nth-child(-n+2) .ph{--r:3/4}.cat:last-child{grid-column:span 2}.cat:last-child .ph{--r:16/9}.cat-l b{font-size:18px}.cat-l span{display:none}}
.promo{background:var(--olive-d);color:var(--on-dark)}
.promo-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:center;padding-block:var(--s8)}
.promo-copy{display:grid;gap:var(--s5);justify-items:start}
.promo p{color:#F4F2ECCC;max-width:44ch}
.promo ul{display:grid;gap:var(--s2);font-size:15px;color:#F4F2ECCC}
.promo li{display:flex;gap:var(--s3);align-items:center}
.promo li::before{content:"";width:18px;height:1px;background:#F4F2EC88}
.promo .ph{--r:5/4;--tone:#6A7352;color:#E8EAD9;border-radius:var(--r-sm)}
.promo .ph span{background:var(--tone)}
.promo .ph::before{background:linear-gradient(135deg,transparent calc(50% - .5px),#ffffff22 calc(50% - .5px),#ffffff22 calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(45deg,transparent calc(50% - .5px),#ffffff22 calc(50% - .5px),#ffffff22 calc(50% + .5px),transparent calc(50% + .5px))}
.svc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6)}
.svc>div{display:grid;gap:var(--s2);align-content:start;padding-top:var(--s5);border-top:1px solid var(--ink)}
.svc svg{width:28px;height:28px;stroke:var(--olive);fill:none;stroke-width:1.4;margin-bottom:var(--s2)}
.svc b{font:600 18px var(--f-display)}
.svc p{font-size:15px;color:var(--ink2)}
.biz{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s7);align-items:center;padding:var(--s7);border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg2)}
.biz .ctas{display:flex;flex-wrap:wrap;gap:var(--s3)}
.biz p{margin-top:var(--s3)}

/* ---------- footer ---------- */
.ft{background:var(--ink);color:var(--on-dark);margin-top:var(--s8)}
.ft-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.6fr);gap:var(--s6);padding-block:var(--s8) var(--s7)}
.ft h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#F4F2EC99;font-weight:600;margin-bottom:var(--s4)}
.ft li a{display:block;padding:5px 0;font-size:15px;color:#F4F2ECDD;transition:color .15s}
.ft li a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ft form{display:grid;gap:var(--s3)}
.ft p{font-size:14px;color:#F4F2ECBB}
.ft .input{background:#ffffff12;border-color:#ffffff33;color:#fff}
.ft .input::placeholder{color:#F4F2EC88}
.ft-base{border-top:1px solid #ffffff22;padding-block:var(--s5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);font-size:13px;color:#F4F2EC99}
.ft-base .logo{font-size:20px;color:var(--on-dark)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--s5) + env(safe-area-inset-bottom,0px));z-index:90;transform:translate(-50%,24px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--s5);background:var(--ink);color:var(--on-dark);border-radius:var(--r-md);font-size:14px;max-width:calc(100vw - 32px);transition:opacity .25s,transform .3s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast a{text-decoration:underline;text-underline-offset:3px;font-weight:600;white-space:nowrap}

/* ---------- breadcrumb / page head ---------- */
.crumb{display:flex;flex-wrap:wrap;gap:var(--s2);font-size:13px;color:var(--mute);padding-block:var(--s5) var(--s4)}
.crumb a:hover{color:var(--ink);text-decoration:underline}
.crumb li+li::before{content:"/";margin-right:var(--s2)}
.crumb li:last-child{color:var(--ink)}
.crumb ol{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* ---------- shop ---------- */
.shop-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s6);flex-wrap:wrap;padding-bottom:var(--s6);border-bottom:1px solid var(--line)}
.shop-head p{margin-top:var(--s3)}
.shop-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--s7);padding-top:var(--s5);align-items:start}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);margin-bottom:var(--s4);flex-wrap:wrap}
.toolbar .right{display:flex;align-items:center;gap:var(--s3)}
.toolbar .select{width:220px;height:44px}
.fbtn{display:none}
.filters{position:sticky;top:calc(92px + env(safe-area-inset-top,0px));max-height:calc(100vh - 110px);overflow:auto;padding-right:var(--s2)}
.filters .f-top{display:none}
.fgroup{border-bottom:1px solid var(--line)}
.fgroup summary{display:flex;justify-content:space-between;align-items:center;min-height:52px;font-weight:600;list-style:none;cursor:pointer}
.fgroup summary::-webkit-details-marker{display:none}
.fgroup summary::after{content:"";width:8px;height:8px;border:solid var(--ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease)}
.fgroup[open] summary::after{transform:rotate(-135deg)}
.fgroup .opts{padding:0 0 var(--s4)}
.fgroup .opts a{display:block;padding:7px 0;font-size:15px;color:var(--ink2)}
.fgroup .opts a:hover,.fgroup .opts a.on{color:var(--ink);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s5)}
.chips:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:var(--s2);min-height:34px;padding:0 var(--s3) 0 var(--s4);border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;font-size:14px}
.chip:hover{border-color:var(--ink)}
.chip.clear{border:0;background:none;text-decoration:underline;text-underline-offset:3px;padding:0 var(--s2)}
.empty{padding:var(--s8) 0;text-align:center;display:grid;gap:var(--s4);justify-items:center}
.more{display:grid;justify-items:center;gap:var(--s4);padding-top:var(--s8)}
.bar{width:220px;height:2px;background:var(--line);position:relative}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--ink);transition:width .4s var(--ease)}
.scrim-f{display:none}

/* ---------- product detail ---------- */
.pdp{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s8);align-items:start;padding-top:var(--s2)}
.gal{display:grid;gap:var(--s3)}
.gal .main .ph{--r:5/4;border-radius:var(--r-sm)}
.gal .thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.thumb{padding:0;border:2px solid transparent;border-radius:var(--r-sm);background:none;overflow:hidden;transition:border-color .2s}
.thumb .ph{--r:4/3}
.thumb .ph span{display:none}
.thumb[aria-current="true"]{border-color:var(--ink)}
.buy{position:sticky;top:calc(96px + env(safe-area-inset-top,0px));display:grid;gap:var(--s5)}
.buy h1{font:600 clamp(30px,3vw,40px)/1.08 var(--f-display);letter-spacing:-.03em}
.buy .meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);font-size:14px;color:var(--ink2)}
.buy .meta svg{width:14px;height:14px;fill:var(--olive);vertical-align:-1px}
.price-row{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.price-row b{font:600 30px var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price-row s{color:var(--mute)}
.opt-h{display:flex;justify-content:space-between;font-size:14px;margin-bottom:var(--s3)}
.opt-h b{font-weight:600}
.swatches{display:flex;gap:var(--s3)}
.sw{display:flex;align-items:center;gap:var(--s3);min-height:48px;padding:0 var(--s4) 0 var(--s3);border:1px solid var(--line);border-radius:var(--r-md);background:#fff;transition:border-color .2s}
.sw:hover{border-color:var(--mute)}
.sw[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.sw i{width:22px;height:22px;border-radius:50%;background:var(--c);border:1px solid #0002}
.avail{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.avail li{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:10px var(--s4);font-size:14px}
.avail li+li{border-top:1px solid var(--line)}
.st{display:inline-flex;align-items:center;gap:var(--s2);font-weight:600;font-size:13px}
.st::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.st.in{color:var(--ok)}.st.out{color:var(--out)}
.buy-actions{display:grid;gap:var(--s3)}
.buy-actions .row{display:grid;grid-template-columns:auto 1fr;gap:var(--s3)}
.quote{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s4);border:1px dashed var(--mute);border-radius:var(--r-md);font-size:14px}
.quote b{display:block;font-size:15px}
.acc details{border-bottom:1px solid var(--line)}
.acc details:first-child{border-top:1px solid var(--line)}
.acc summary{display:flex;justify-content:space-between;align-items:center;min-height:56px;font-weight:600;list-style:none;cursor:pointer}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:22px;font-weight:400;line-height:1}
.acc details[open] summary::after{content:"\2212"}
.acc .c{padding:0 0 var(--s5);font-size:15px;color:var(--ink2);display:grid;gap:var(--s2)}
.acc dl{display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s5);margin:0}
.acc dt{color:var(--mute)}.acc dd{margin:0;color:var(--ink)}

/* ---------- cart ---------- */
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--s8);align-items:start;padding-top:var(--s4)}
.cart-head{display:grid;grid-template-columns:1fr 130px 150px 40px;gap:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.line{display:grid;grid-template-columns:120px minmax(0,1fr) 130px 150px 40px;gap:var(--s5);align-items:center;padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.line .ph{--r:1;border-radius:var(--r-sm)}
.line .ph span{display:none}
.line h3{font:600 17px/1.3 var(--f-body)}
.line .v{font-size:14px;color:var(--ink2);display:flex;align-items:center;gap:var(--s2);margin-top:4px}
.line .u{font-size:14px;color:var(--mute);margin-top:4px;font-variant-numeric:tabular-nums}
.line .tot{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.line .rm{width:40px;height:40px;border:0;background:none;border-radius:50%;display:grid;place-items:center;color:var(--mute);transition:background .15s,color .15s}
.line .rm:hover{background:var(--bg2);color:var(--sale)}
.line .rm svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5}
.summary{position:sticky;top:calc(96px + env(safe-area-inset-top,0px));display:grid;gap:var(--s5);padding:var(--s6);background:var(--bg2);border-radius:var(--r-md)}
.summary dl{display:grid;gap:var(--s3);margin:0}
.summary .r{display:flex;justify-content:space-between;gap:var(--s4);font-variant-numeric:tabular-nums}
.summary .r dd{margin:0}
.summary .grand{padding-top:var(--s4);border-top:1px solid var(--line);font:600 20px var(--f-display)}
.promo-f{display:flex;gap:var(--s2)}
.promo-f .input{height:44px}
.ful{display:flex;gap:var(--s3);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-md);background:#fff;font-size:14px;color:var(--ink2)}
.ful svg{flex:none;width:22px;height:22px;stroke:var(--olive);fill:none;stroke-width:1.5}
.ful b{display:block;color:var(--ink);font-size:15px}
.msg{font-size:13px;color:var(--ok);min-height:1.2em}
.msg.err{color:var(--sale)}

/* ---------- design system page ---------- */
.ds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s4)}
.sw-c{display:grid;gap:var(--s2);font-size:13px}
.sw-c i{display:block;height:84px;border-radius:var(--r-md);border:1px solid #0001;background:var(--c)}
.sw-c b{font-size:14px}
.ds-sec{padding-block:var(--s7);border-top:1px solid var(--line);display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s6)}
.ds-row{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.ds-sec .pgrid{max-width:720px}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .ft-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ft-grid .nl{grid-column:1/-1}
  .svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cart-layout{grid-template-columns:minmax(0,1fr) 340px;gap:var(--s6)}
  .line{grid-template-columns:96px minmax(0,1fr) 130px 120px 40px;gap:var(--s4)}
  .cart-head{grid-template-columns:1fr 130px 120px 40px}
}
@media(max-width:1000px){
  .nav{display:none}.menu-btn{display:inline-grid}
  .hd-row{min-height:64px;gap:var(--s2)}
  .logo{font-size:22px;margin-right:auto;margin-left:var(--s1)}
  .hero-grid,.promo-grid,.pdp,.biz{grid-template-columns:minmax(0,1fr)}
  .hero-grid{gap:var(--s6)}.hero-copy{padding-bottom:0}
  .promo-grid{gap:var(--s6);padding-block:var(--s7)}
  .promo-copy{order:2}
  .biz{padding:var(--s6)}
  .pdp{gap:var(--s6)}.buy{position:static}
  .shop-layout{grid-template-columns:minmax(0,1fr)}
  .fbtn{display:inline-flex}
  .filters{position:fixed;inset:0 auto 0 0;z-index:80;width:min(90vw,380px);max-height:none;background:var(--bg);padding:0 var(--s4) env(safe-area-inset-bottom,0px);transform:translateX(-102%);transition:transform .3s var(--ease);display:flex;flex-direction:column;overflow:hidden}
  .filters.open{transform:none}
  .filters .f-top{display:flex;justify-content:space-between;align-items:center;min-height:64px;border-bottom:1px solid var(--line);font:600 20px var(--f-display);flex:none}
  .filters .f-body{overflow:auto;flex:1}
  .filters .f-foot{display:flex;gap:var(--s3);padding:var(--s4) 0;border-top:1px solid var(--line);flex:none}
  .filters .f-foot .btn{flex:1}
  .scrim-f{display:block;position:fixed;inset:0;z-index:75;background:#24242280;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
  .scrim-f.open{opacity:1;visibility:visible}
  .cart-layout{grid-template-columns:minmax(0,1fr)}
  .summary{position:static}
}
@media(min-width:1001px){.filters .f-foot{display:none}}
@media(max-width:760px){
  .section{padding-block:var(--s7)}
  .announce .hide-sm{display:none}
  .announce .wrap{justify-content:center}
  .announce a{display:none}
  .svc{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .svc>div{grid-template-columns:40px 1fr;column-gap:var(--s3);padding-top:var(--s4)}
  .svc svg{grid-row:span 2;margin:0}
  .biz{padding:var(--s5)}
  .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding-block:var(--s7) var(--s6)}
  .ds-sec{grid-template-columns:minmax(0,1fr)}
  .cart-head{display:none}
  .line{grid-template-columns:84px minmax(0,1fr) auto;grid-template-areas:"img info rm" "img qty tot";gap:var(--s3) var(--s4);align-items:start}
  .line>.ph{grid-area:img}.line>.info{grid-area:info}.line>.qty{grid-area:qty;justify-self:start;height:40px}.line>.tot{grid-area:tot;align-self:center}.line>.rm{grid-area:rm}
  .toolbar .select{width:170px}
  .quote{flex-direction:column;align-items:stretch}
  .hotspot{left:var(--s3);bottom:var(--s3);padding:var(--s2) var(--s3)}
  .hotspot .ph{width:44px}
}
@media(max-width:440px){
  .swatches{flex-wrap:wrap}
  .sw{flex:1 1 calc(50% - 8px)}
  .buy-actions .row{grid-template-columns:minmax(0,1fr)}
  .buy-actions .qty{justify-self:start}
  .display{font-size:clamp(38px,11vw,48px)}
  .promo-f{flex-direction:column}
  .biz .ctas .btn,.hero-copy .ctas .btn{flex:1 1 100%}
  .pc h3{font-size:15px}
  .pc-price{font-size:15px}
  .pc-tag{font-size:10px;padding:3px 8px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---------- wishlist ---------- */
.pc-actions{display:grid;gap:var(--s2);justify-items:stretch;margin-top:var(--s2)}
.tlink-btn{border:0;background:none;padding:6px 0;font-size:14px;color:var(--ink2);text-decoration:underline;text-underline-offset:3px;justify-self:start}
.tlink-btn:hover{color:var(--sale)}
.wl-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s5);flex-wrap:wrap;padding-bottom:var(--s6);margin-bottom:var(--s6);border-bottom:1px solid var(--line)}
.wl-head h1:focus{outline:none}

/* ---------- checkout ---------- */
.co-layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:var(--s8);align-items:start;padding-top:var(--s4)}
.co-form{display:grid;gap:var(--s7)}
.co-sec{display:grid;gap:var(--s5)}
.co-sec>h2{font:600 22px/1.2 var(--f-display);letter-spacing:-.015em;padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.fgrid .full{grid-column:1/-1}
.field .opt-l{font-weight:400;color:var(--mute)}
.field .req{color:var(--sale)}
.field .er{font-size:13px;color:var(--sale);min-height:0}
.field .er:empty{display:none}
.input[aria-invalid="true"],.select[aria-invalid="true"]{border-color:var(--sale);box-shadow:0 0 0 3px #9B4A2E1f}
textarea.input{height:auto;min-height:104px;padding:var(--s3) var(--s4);resize:vertical;line-height:1.5}
.optlist{display:grid;gap:var(--s3)}
.opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s4);min-height:68px;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-md);background:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.opt:hover{border-color:var(--mute)}
.opt.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt:focus-within{outline:2px solid var(--olive);outline-offset:2px}
.opt input{appearance:none;width:20px;height:20px;margin:0;border:1px solid var(--mute);border-radius:50%;background:#fff;display:grid;place-items:center;transition:border-color .15s}
.opt input::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform .15s}
.opt input:checked{border-color:var(--ink)}
.opt input:checked::after{transform:scale(1)}
.opt input:focus-visible{outline:none}
.opt-t{display:grid;gap:2px;min-width:0}
.opt-t b{font-weight:600;font-size:15px}
.opt-t small{font-size:13px;color:var(--ink2)}
.opt-p{font-weight:600;white-space:nowrap}
.note-box{display:flex;gap:var(--s3);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg2);font-size:14px;color:var(--ink2)}
.note-box svg{flex:none;width:22px;height:22px;stroke:var(--olive);fill:none;stroke-width:1.5}
.note-box b{display:block;font-size:16px;color:var(--ink)}
.co-sum{position:sticky;top:calc(96px + env(safe-area-inset-top,0px));display:grid;gap:var(--s5);padding:var(--s6);background:var(--bg2);border-radius:var(--r-md)}
.co-sum .row-h{display:flex;justify-content:space-between;align-items:baseline}
.si-list{display:grid;gap:var(--s4)}
.si{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:var(--s3);align-items:center}
.si-img{position:relative}
.si-img .ph{--r:1;border-radius:var(--r-sm)}
.si-img .ph span{display:none}
.si-q{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--ink);color:#fff;font-size:12px;font-weight:600;line-height:20px;text-align:center}
.si-t{display:grid;gap:2px;min-width:0}
.si-t b{font-size:15px;line-height:1.3}
.si-t span{font-size:13px;color:var(--ink2)}
.si-p{font-weight:600;font-size:15px}
.co-sum dl{display:grid;gap:var(--s3);margin:0;padding-top:var(--s4);border-top:1px solid var(--line)}
.co-sum .r{display:flex;justify-content:space-between;gap:var(--s4);font-variant-numeric:tabular-nums}
.co-sum .r dd{margin:0}
.co-sum .grand{padding-top:var(--s4);border-top:1px solid var(--line);font:600 20px var(--f-display)}
.co-done{padding:var(--s4);border:1px solid var(--olive);border-radius:var(--r-md);background:var(--olive-l);font-size:14px;color:var(--olive-d)}
@media(max-width:1180px){.co-layout{grid-template-columns:minmax(0,1fr) 360px;gap:var(--s6)}}
@media(max-width:1000px){.co-layout{grid-template-columns:minmax(0,1fr)}.co-sum{position:static;order:2}}
@media(max-width:560px){.fgrid{grid-template-columns:minmax(0,1fr)}.co-sum{padding:var(--s5)}.opt{padding:var(--s3)}}

/* ---------- quotation ---------- */
.qt-lead{display:grid;gap:var(--s3);margin-bottom:var(--s7)}
.qt-lead .h3{font-weight:500;color:var(--ink2)}
.qt-hint{display:inline-flex;align-items:center;gap:var(--s2);font-size:14px;color:var(--olive-d)}
.qt-hint::before{content:"";width:18px;height:1px;background:var(--olive)}
.helper{font-size:13px;color:var(--mute)}
.qlist{display:grid;border-top:1px solid var(--line)}
.qrow{display:grid;grid-template-columns:80px minmax(0,1fr) auto 140px 40px;gap:var(--s4);align-items:center;padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.q-img .ph{--r:1;border-radius:var(--r-sm)}
.q-img .ph span{display:none}
.q-info{display:grid;gap:2px;min-width:0;font-size:14px;color:var(--ink2)}
.q-info b{font-size:16px;color:var(--ink);line-height:1.3}
.q-info b a:hover{color:var(--olive)}
.q-v{display:flex;align-items:center;gap:var(--s2)}
.qty-in input{width:64px;height:100%;border:0;border-inline:1px solid var(--line);text-align:center;font-weight:600;background:transparent;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.qty-in input::-webkit-outer-spin-button,.qty-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-in input:focus{outline:2px solid var(--olive);outline-offset:-2px}
.q-tot{display:grid;text-align:right;font-variant-numeric:tabular-nums}
.q-empty{padding:var(--s6) 0;color:var(--ink2);font-size:15px;border-bottom:1px solid var(--line)}
.qrow .rm{width:40px;height:40px;border:0;background:none;border-radius:50%;display:grid;place-items:center;color:var(--mute);transition:background .15s,color .15s}
.qrow .rm:hover{background:var(--bg2);color:var(--sale)}
.qrow .rm svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5}
.qt-side{display:grid;gap:var(--s5)}
.qt-side .co-sum{position:static}
.checkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1) var(--s5)}
.card-b{display:grid;gap:var(--s4);padding:var(--s6);border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.steps{display:grid;gap:var(--s4);counter-reset:s}
.steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s3);align-items:start;font-size:15px;color:var(--ink2);counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--ink);font-size:13px;font-weight:600;color:var(--ink)}
.flow{display:flex;flex-direction:column;align-items:flex-start}
.fl{padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:13px;background:var(--bg)}
.fl.cur{background:var(--olive-l);border-color:var(--olive);color:var(--olive-d);font-weight:600}
.fl+.fl{margin-top:14px;position:relative}
.fl+.fl::before{content:"";position:absolute;left:20px;top:-14px;width:1px;height:14px;background:var(--mute)}
.qt-done{display:grid;gap:var(--s4);padding:var(--s6);border:1px solid var(--olive);border-radius:var(--r-md);background:var(--olive-l);color:var(--olive-d);margin-bottom:var(--s7)}
.qt-done:focus{outline:2px solid var(--olive);outline-offset:3px}
.qt-done h2{font:600 24px/1.2 var(--f-display);color:var(--ink)}
.qt-no{display:inline-block;padding:6px 14px;border-radius:var(--r-md);background:#fff;border:1px solid var(--olive);font:600 18px var(--f-display);letter-spacing:.02em;color:var(--ink)}
.qt-done .ctas{display:flex;flex-wrap:wrap;gap:var(--s3)}
@media(max-width:760px){
  .qrow{grid-template-columns:72px minmax(0,1fr) 40px;grid-template-areas:"img info rm" "qty qty qty" "tot tot tot";align-items:start}
  .qrow .q-img{grid-area:img}.qrow .q-info{grid-area:info}.qrow .rm{grid-area:rm}.qrow .qty{grid-area:qty;justify-self:start}.qrow .q-tot{grid-area:tot;display:flex;justify-content:space-between;align-items:baseline;text-align:left}
  .checkgrid{grid-template-columns:minmax(0,1fr)}
  .card-b{padding:var(--s5)}
}
.qt-side .co-sum{order:0}

/* ---------- quotation mode banner ---------- */
.qbar{position:sticky;top:calc(77px + env(safe-area-inset-top,0px));z-index:35;background:var(--olive-d);color:var(--on-dark)}
.qbar-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s2) var(--s5);flex-wrap:wrap;padding-block:var(--s3)}
.qbar-t{display:grid;gap:2px;font-size:14px;color:#F4F2ECDD}
.qbar-t b{font:600 16px/1.25 var(--f-display);color:var(--on-dark)}
.qbar-a{display:flex;align-items:center;gap:var(--s4)}
.tlink-btn.onD{color:#F4F2ECCC}
.tlink-btn.onD:hover{color:#fff}
.qmode .filters{top:calc(150px + env(safe-area-inset-top,0px));max-height:calc(100vh - 170px)}
.qmode .buy{top:calc(150px + env(safe-area-inset-top,0px))}
@media(max-width:1000px){.qbar{top:calc(65px + env(safe-area-inset-top,0px))}}
@media(max-width:560px){.qbar-in{flex-direction:column;align-items:stretch}.qbar-a{justify-content:space-between}.qbar-a .btn{flex:1;min-height:44px}}
/* ---------- quotation request receipt ---------- */
.rc{display:grid;gap:var(--s5);padding:var(--s6);border:1px solid var(--ink);border-radius:var(--r-md);background:#fff}
.rc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);flex-wrap:wrap}
.rc-no{font:600 clamp(24px,3.4vw,38px)/1.1 var(--f-display);letter-spacing:.01em;margin-top:var(--s2);overflow-wrap:anywhere}
.rc-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s6);margin:0}
.rc-dl>div{display:grid;gap:2px;min-width:0}
.rc-dl .full{grid-column:1/-1}
.rc-dl dt{font-size:13px;color:var(--mute)}
.rc-dl dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.rc-meta{padding-top:var(--s5);border-top:1px solid var(--line)}
.rc-act{display:flex;flex-wrap:wrap;gap:var(--s3)}
.rc-mail{font:600 18px var(--f-display);overflow-wrap:anywhere}
.cf-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:var(--s4);align-items:center;padding:var(--s4) 0;border-bottom:1px solid var(--line)}
@media(max-width:560px){.rc{padding:var(--s5)}.rc-dl{grid-template-columns:minmax(0,1fr)}.rc-act .btn{flex:1 1 100%}.cf-row{grid-template-columns:56px minmax(0,1fr);}.cf-row .q-tot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;text-align:left}}

/* ---------- account ---------- */
.ac-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--s8);align-items:start;padding-bottom:var(--s7)}
.ac-side{display:grid;gap:var(--s5);position:sticky;top:calc(96px + env(safe-area-inset-top,0px))}
.ac-who{display:grid;gap:2px;padding-bottom:var(--s5);border-bottom:1px solid var(--line);min-width:0}
.ac-who b{font:600 20px var(--f-display)}
.ac-who span{font-size:14px;color:var(--ink2);overflow-wrap:anywhere}
.ac-nav{display:grid;gap:2px}
.ac-tab{display:flex;align-items:center;min-height:48px;padding:0 var(--s4);border:0;border-radius:var(--r-md);background:none;text-align:left;font-size:16px;font-weight:500;color:var(--ink2);transition:background .15s,color .15s}
.ac-tab:hover{background:var(--bg2);color:var(--ink)}
.ac-tab[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.ac-proto{padding-top:var(--s2)}
.ac-main{min-width:0}
.ac-panel{min-width:0}
.ac-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin-top:var(--s6)}
.ac-c{display:grid;gap:var(--s2);align-content:start;justify-items:start;padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.ac-c b{font:600 22px/1.2 var(--f-display);letter-spacing:-.01em}
.tlink-btn{cursor:pointer}
a.tlink-btn{display:inline-block;padding:6px 0;font-size:14px;color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
a.tlink-btn:hover{color:var(--olive)}
.ac-act{display:grid;border-top:1px solid var(--line)}
.ac-act-b{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--s4);width:100%;min-height:68px;padding:var(--s3) 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;transition:background .15s}
.ac-act-b:hover{background:var(--bg2)}
.ac-act-b div{display:grid;gap:2px;min-width:0}
.ac-act-b div span{font-size:14px;color:var(--ink2);overflow-wrap:anywhere}
.ac-list{display:grid;gap:var(--s4)}
.ac-card{display:grid;gap:var(--s4);padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-md);background:#fff;min-width:0}
.ac-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);flex-wrap:wrap}
.ac-head>div{display:grid;gap:2px;min-width:0}
.ac-no{font:600 18px var(--f-display);overflow-wrap:anywhere}
.ac-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin:0}
.ac-meta>div{display:grid;gap:2px;min-width:0}
.ac-meta .w2{grid-column:1/-1}
.ac-meta dt{font-size:13px;color:var(--mute)}
.ac-meta dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.ac-detail{display:grid;gap:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.ac-tot{display:grid;gap:var(--s2);margin:0;justify-self:end;min-width:min(100%,260px)}
.ac-tot>div{display:flex;justify-content:space-between;gap:var(--s5)}
.ac-tot dd{margin:0}
.ac-tot .g{padding-top:var(--s2);border-top:1px solid var(--line);font-weight:600}
.ac-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.ac-addr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.ac-ad{font-style:normal;font-size:15px;color:var(--ink2);line-height:1.6}
.ac-acts{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.ac-acts .tlink-btn{min-height:36px}
.ac-conf{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);font-size:14px}
.ac-form{display:grid;gap:var(--s5);max-width:720px;margin-bottom:var(--s6)}
.ac-main .empty{padding:var(--s7) 0}
.sb{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;white-space:nowrap;background:var(--bg3);color:var(--ink2)}
.sb::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.sb.s-requested,.sb.s-processing{background:var(--olive-l);color:var(--olive-d)}
.sb.s-review{background:#EBE3CF;color:#5E5230}
.sb.s-sent{background:#D3D9C0;color:var(--olive-d)}
.sb.s-accepted{background:#D5E1CB;color:#36512A}
.sb.s-rejected{background:#F0DED6;color:var(--sale)}
.sb.s-expired{background:var(--bg3);color:var(--mute)}
.flow.h{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s2) 0}
.flow.h .fl+.fl{margin:0 0 0 22px}
.flow.h .fl+.fl::before{left:-22px;top:50%;width:22px;height:1px}
@media(max-width:1180px){.ac-layout{grid-template-columns:220px minmax(0,1fr);gap:var(--s6)}.ac-meta{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){
  .ac-layout{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .ac-side{position:static;gap:var(--s4)}
  .ac-who{padding-bottom:var(--s4)}
  .ac-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
  .ac-tab{justify-content:center;border:1px solid var(--line);min-height:46px;padding:0 var(--s2);font-size:15px}
  .ac-tab[aria-selected="true"]{border-color:var(--ink)}
  .ac-proto{display:none}
}
@media(max-width:560px){
  .ac-cards,.ac-addr{grid-template-columns:minmax(0,1fr)}
  .ac-meta{grid-template-columns:minmax(0,1fr)}
  .ac-card,.ac-c{padding:var(--s4)}
  .ac-act-b{grid-template-columns:minmax(0,1fr) auto}
  .ac-act-b .num{grid-column:1/-1}
  .flow.h{flex-direction:column;align-items:flex-start}
  .flow.h .fl+.fl{margin:14px 0 0}
  .flow.h .fl+.fl::before{left:20px;top:-14px;width:1px;height:14px}
}

/* ---------- customer authentication (Phase 3D) ---------- */
.auth-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:var(--s8);align-items:start;padding:var(--s6) 0 var(--s8)}
.auth-intro{display:grid;gap:var(--s5);padding-top:var(--s5);max-width:560px;min-width:0}
.auth-card{padding:var(--s6);border:1px solid var(--line);border-radius:var(--r-md);background:#fff;min-width:0}
.auth-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);margin-bottom:var(--s6)}
.auth-tabs .ac-tab{justify-content:center;font-size:15px}
.auth-card h2{margin-bottom:var(--s3)}
.auth-form{display:grid;gap:var(--s4);margin-top:var(--s5)}
.auth-status{font-size:14px;color:var(--ink2);overflow-wrap:anywhere}
.auth-status:empty{display:none}
.auth-status.is-error{color:var(--sale)}
.auth-form .btn{width:100%}
.auth-form .tlink-btn{min-height:44px}
.auth-form [disabled],.ac-form [disabled],.ac-main button[disabled]{opacity:.65;cursor:wait}
.ac-state{padding:var(--s5) 0 var(--s8);display:grid;justify-items:start;gap:var(--s4)}
.ac-state p{max-width:60ch}
.ac-who b,.ac-ad{overflow-wrap:anywhere}
.ac-form .input[readonly]{background:var(--bg2);color:var(--ink2)}
@media(max-width:900px){.auth-layout{grid-template-columns:minmax(0,1fr);gap:var(--s6);max-width:640px;margin:auto}.auth-intro{padding-top:0}}
@media(max-width:430px){.auth-card{padding:var(--s4)}.auth-tabs .ac-tab{padding:0 var(--s2);font-size:14px}.auth-layout{padding-top:var(--s4)}}

/* Email verification states share the existing NORTH auth card. */
#verifyDestination { overflow-wrap:anywhere; }
#verifiedPanel .btn { margin-top:24px; }
#verifyCode { letter-spacing:.16em; }

/* Commercial quantity handoff; quotation remains an independent requirement draft. */
.retail-limit{width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #D9D4C8;border-radius:6px;padding:28px;background:#FAF8F4;color:#242422}.retail-limit::backdrop{background:rgb(25 26 23 / .55)}.retail-limit h2{margin:0 0 16px;font-size:28px}.retail-limit p{line-height:1.6;color:#605E55}.retail-limit-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.retail-limit-actions .btn{white-space:normal;text-align:center}.retail-limit .btn:first-child{background:#596348;border-color:#596348}@media(max-width:430px){.retail-limit{padding:20px}.retail-limit-actions .btn{width:100%}}

/* Real catalog labels / variant configurations must fit existing frames. */
#buy .swatches{flex-wrap:wrap}
#buy .sw{max-width:100%;white-space:normal;overflow-wrap:anywhere}
#buy .meta,#buy .avail li{flex-wrap:wrap}
#buy h1,.pc h3,.shop-head .lead{overflow-wrap:anywhere}

/* Disabled retail quantity control; quotation mode remains independent. */
#buy .qty[aria-disabled="true"]{opacity:.45}
#buy .qty[aria-disabled="true"] button{cursor:not-allowed}

/* Real quotation identities and long local references stay inside existing frames. */
body[data-page="quotation"] .q-info,body[data-page="qconfirm"] .q-info{min-width:0;overflow-wrap:anywhere}
body[data-page="qconfirm"] .rc-no{overflow-wrap:anywhere;white-space:normal}

/* Phase 3F order details reuse checkout rows and spacing. */
.order-result{max-width:940px;margin:0 auto 80px;overflow-wrap:anywhere}
.order-result .h1{overflow-wrap:anywhere}.order-totals{max-width:420px;margin-left:auto}.order-totals>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0}.order-totals dd{margin:0}
body[data-page="checkout"] .si-t,body[data-page="order"] .si-t{min-width:0;overflow-wrap:anywhere}
body[data-page="checkout"] #coReview{overflow-wrap:anywhere}