/*
  Tokens below are DEFAULTS only — app.js overwrites them at runtime from
  brands/<id>/brand.json (theme.colors / theme.colorsDark / theme.fonts) by
  injecting a <style id="brand-theme"> block. Edit brand.json to re-skin a
  store; this file defines structure, not any one brand's look.
*/
:root{
  --paper:#ECE9E1; --ink:#1B1D22; --accent:#B5502A; --accent2:#3B5068; --muted:#75705F;
  --card:#F5F3ED; --card-line:rgba(27,29,34,.16); --line:rgba(27,29,34,.14);
  --radius:3px;
  --font-display:"Arial Narrow",sans-serif;
  --font-body:system-ui,sans-serif;
  --font-mono:ui-monospace,monospace;
  color-scheme:light;
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-body);
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
  min-height:100%;
}
h1,h2,h3,.disp{font-family:var(--font-display); text-wrap:balance; line-height:1; margin:0;}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.label{font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--muted);}
button{font-family:inherit; cursor:pointer;}
.wrap{max-width:1180px; margin:0 auto;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em; border:1.5px solid var(--ink); background:var(--ink); color:var(--paper); padding:.85em 1.4em; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; border-radius:var(--radius); transition:transform .12s ease, opacity .12s ease;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn[disabled]{opacity:.55; cursor:default; transform:none;}
.btn-ghost{background:transparent; color:var(--ink);}
.btn-accent{background:var(--accent); border-color:var(--accent); color:#fff;}
.btn-block{width:100%;}
.link-btn{background:none; border:none; padding:0; color:var(--ink); text-decoration:underline; text-underline-offset:3px; font:inherit;}
.hairline{border:none; border-top:1px solid var(--line); margin:0;}

/* top bar / header */
.topbar{background:var(--ink); color:var(--paper); padding-block:.5em; font-family:var(--font-display); letter-spacing:.08em; text-transform:uppercase; font-size:.72rem; text-align:center; padding-inline:max(16px, env(safe-area-inset-left,0px)) max(16px, env(safe-area-inset-right,0px));}
header.site{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:var(--paper); border-bottom:1px solid var(--line);}
.nav-row{display:flex; align-items:center; gap:1.2em; padding-block:.9em;}
.wordmark{font-family:var(--font-display); font-weight:800; font-size:1.5rem; letter-spacing:.01em; white-space:nowrap; background:none; border:none; color:var(--ink); padding:0;}
.wordmark em{color:var(--accent); font-style:normal;}
.nav-links{display:flex; gap:1.3em; flex-wrap:wrap; font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.82rem; flex:1;}
.nav-links button{background:none;border:none;color:var(--muted);padding:.3em 0;border-bottom:2px solid transparent;}
.nav-links button:hover, .nav-links button.active{color:var(--ink); border-bottom-color:var(--accent);}
.theme-toggle{background:none; border:1.5px solid var(--line); border-radius:50%; width:2.2em; height:2.2em; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--ink);}
.cart-btn{position:relative; background:none; border:1.5px solid var(--ink); border-radius:var(--radius); padding:.5em .7em; display:flex; align-items:center; gap:.4em; flex-shrink:0;}
.cart-count{background:var(--accent); color:#fff; font-family:var(--font-mono); font-size:.68rem; min-width:1.4em; height:1.4em; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 .2em;}

main{display:block;}
.view{padding-block:2.5em 4em;}
section.block{padding-block:3em;}
.wrap h2.section-title{font-size:clamp(1.6rem,4vw,2.4rem); margin:0 0 .2em;}

/* hero */
.hero{padding-block:3em 2.5em; border-bottom:1px solid var(--line);}
.hero .tag{display:inline-block; background:var(--accent); color:#fff; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; padding:.3em .7em; margin-bottom:1em;}
.hero h1{font-size:clamp(2.6rem,8vw,5.2rem); margin:0 0 .3em;}
.hero p.sub{max-width:38ch; color:var(--muted); font-size:1.05rem; margin:0 0 1.6em;}
.hero .ctas{display:flex; gap:1em; flex-wrap:wrap;}
.trust-strip{display:flex; gap:1.6em; flex-wrap:wrap; padding-block:1.4em; border-bottom:1px solid var(--line); color:var(--muted); font-size:.85rem;}
.trust-strip div{display:flex; align-items:center; gap:.5em;}
.trust-strip .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;}

/* category tiles */
.cat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.cat-tile{background:var(--card); padding:1.6em 1.2em; display:flex; flex-direction:column; gap:.6em; border:none; text-align:left; min-height:120px;}
.cat-tile:hover{background:var(--paper);}
.cat-tile .n{font-family:var(--font-mono); font-size:.72rem; color:var(--muted);}
.cat-tile .t{font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:1.1rem; letter-spacing:.02em;}

/* toolbar / search / pills / sort */
.toolbar{display:flex; justify-content:space-between; align-items:center; gap:1em; flex-wrap:wrap; margin-bottom:1em;}
.search-row{flex:1; min-width:200px;}
.search-row input{width:100%; border:1.5px solid var(--line); background:var(--card); color:var(--ink); padding:.65em .9em; border-radius:var(--radius); font-family:var(--font-body); font-size:.92rem;}
.search-row input:focus{outline:2px solid var(--accent2); outline-offset:1px;}
.pills{display:flex; gap:.5em; flex-wrap:wrap; margin-bottom:1em;}
.pill{border:1.5px solid var(--line); background:transparent; color:var(--ink); padding:.45em .9em; border-radius:999px; font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:.74rem;}
.pill.active{background:var(--ink); border-color:var(--ink); color:var(--paper);}
select.sort{border:1.5px solid var(--line); background:var(--card); color:var(--ink); padding:.5em .7em; font-family:var(--font-mono); font-size:.78rem; border-radius:var(--radius); flex-shrink:0;}
.result-count{color:var(--muted); font-size:.82rem; margin:0 0 1em;}

/* product grid / cards */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.2em;}
.card{background:var(--card); border:1px solid var(--card-line); padding:1em; display:flex; flex-direction:column; gap:.7em; position:relative; border-radius:calc(var(--radius) + 2px); min-width:0;}
.card .badge{position:absolute; top:.9em; left:.9em; background:var(--accent); color:#fff; font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:.62rem; letter-spacing:.08em; padding:.25em .55em; z-index:1;}
.card .sale-badge{position:absolute; top:.9em; right:.9em; background:var(--accent2); color:#fff; font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:.62rem; letter-spacing:.08em; padding:.25em .55em; z-index:1;}
.card .thumb{display:flex; justify-content:center; align-items:center; padding-block:.4em; aspect-ratio:1/1; background:var(--paper); border-radius:var(--radius); overflow:hidden;}
.card .thumb img{width:100%; height:100%; object-fit:contain;}
.card .cat{font-size:.68rem;}
.card h3{font-size:1.15rem; margin:.1em 0 0; text-transform:none; font-family:var(--font-display); font-weight:700; letter-spacing:.01em;}
.card .meta{color:var(--muted); font-size:.78rem;}
.card .row-bottom{display:flex; align-items:center; justify-content:space-between; margin-top:auto; gap:.6em;}
.card .price{font-size:1.05rem;}
.card .price .was{color:var(--muted); text-decoration:line-through; font-size:.85em; margin-right:.4em;}
.card .view-btn{display:inline-block; border:1.5px solid var(--ink); background:none; padding:.5em .8em; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.74rem; border-radius:var(--radius); color:var(--ink); white-space:nowrap; text-decoration:none; cursor:pointer;}
.card .view-btn:hover{background:var(--ink); color:var(--paper);}
.card .custom-btn{border-color:var(--accent); color:var(--accent);}
.card .custom-btn:hover{background:var(--accent); border-color:var(--accent); color:#fff;}

/* pagination */
.pagination{display:flex; justify-content:center; align-items:center; gap:.4em; margin-top:2em; flex-wrap:wrap;}
.page-btn{border:1.5px solid var(--line); background:var(--card); color:var(--ink); min-width:2.4em; height:2.4em; border-radius:var(--radius); font-family:var(--font-mono); font-size:.85rem;}
.page-btn.active{background:var(--ink); border-color:var(--ink); color:var(--paper);}
.page-btn[disabled]{opacity:.4; cursor:default;}
.page-ellipsis{color:var(--muted); padding:0 .3em;}

/* modal (quick view) */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:50; display:flex; align-items:flex-end; justify-content:center;}
@media (min-width:720px){.overlay{align-items:center;}}
.modal{background:var(--paper); width:100%; max-width:760px; max-height:92vh; overflow-y:auto; border-radius:8px 8px 0 0; padding:1.6em; padding-bottom:max(1.6em, env(safe-area-inset-bottom,0px)); position:relative;}
@media (min-width:720px){.modal{border-radius:8px;}}
.modal-grid{display:grid; grid-template-columns:1fr; gap:1.4em;}
@media (min-width:600px){.modal-grid{grid-template-columns:1fr 1.1fr;}}
.modal .thumb-big{aspect-ratio:1/1; background:var(--card); border:1px solid var(--card-line); border-radius:4px; overflow:hidden;}
.modal .thumb-big img{width:100%; height:100%; object-fit:contain; display:block;}
.modal .thumb-big canvas{width:100%; height:100%; display:block;}
.gallery-row{display:flex; gap:.5em; margin-top:.5em; flex-wrap:wrap;}
.gallery-thumb{width:3.2em; height:3.2em; border-radius:var(--radius); overflow:hidden; border:2px solid transparent; padding:0; background:var(--card);}
.gallery-thumb.active{border-color:var(--accent);}
.gallery-thumb img{width:100%; height:100%; object-fit:contain; display:block;}
.close-x{position:absolute; top:1em; right:1em; background:none; border:none; font-size:1.4rem; line-height:1; color:var(--muted); padding:.2em .4em;}
.size-row{display:flex; gap:.5em; flex-wrap:wrap; margin-block:.5em;}
.size-btn{border:1.5px solid var(--line); background:var(--card); color:var(--ink); min-width:3em; padding:.5em; text-align:center; font-family:var(--font-mono); font-size:.82rem; border-radius:var(--radius);}
.size-btn.active{border-color:var(--ink); background:var(--ink); color:var(--paper);}
.size-btn[disabled]{opacity:.35; text-decoration:line-through; cursor:default;}
.qty-row{display:flex; align-items:center; gap:.8em; margin-block:.9em;}
.stepper{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:var(--radius);}
.stepper button{background:none; border:none; width:2.2em; height:2.2em; font-size:1rem; color:var(--ink);}
.stepper span{min-width:2em; text-align:center; font-family:var(--font-mono);}
.desc{color:var(--muted); font-size:.92rem; line-height:1.55; margin-block:.6em;}
.spec-table{width:100%; font-size:.82rem; margin-block:1em;}
.spec-table tr td{padding:.35em 0; border-bottom:1px solid var(--line);}
.spec-table tr td:first-child{color:var(--muted); width:40%;}
.spec-table tr td:last-child{font-family:var(--font-mono);}

/* cart drawer */
.drawer-overlay{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:50; display:flex; justify-content:flex-end;}
.drawer{background:var(--paper); width:min(420px,100%); height:100%; display:flex; flex-direction:column; padding:1.4em; padding-top:max(1.4em, env(safe-area-inset-top,0px)); padding-bottom:max(1.4em, env(safe-area-inset-bottom,0px));}
.drawer-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:1em;}
.drawer-items{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:1em;}
.cart-line{display:flex; gap:.9em; border-bottom:1px solid var(--line); padding-bottom:.9em;}
.cart-line .ci-thumb{width:54px; height:54px; flex-shrink:0; border-radius:var(--radius); overflow:hidden; background:var(--card);}
.cart-line .ci-thumb img{width:100%;height:100%;object-fit:contain;}
.cart-line .ci-info{flex:1; min-width:0;}
.cart-line .ci-name{font-family:var(--font-display); font-weight:700; font-size:.95rem;}
.cart-line .ci-meta{color:var(--muted); font-size:.76rem; margin-top:.1em;}
.cart-line .ci-bottom{display:flex; justify-content:space-between; align-items:center; margin-top:.5em;}
.remove-btn{background:none;border:none;color:var(--muted); text-decoration:underline; font-size:.76rem; padding:0;}
.empty-state{text-align:center; padding-block:3em; color:var(--muted);}
.color-picker-wrap{position:relative; margin-bottom:1em;}
.color-picker-trigger{width:100%; display:flex; align-items:center; gap:.6em; border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:var(--radius); padding:.55em .7em; font-size:.82rem; cursor:pointer; text-align:left;}
.color-picker-trigger .swatch-dot{width:18px; height:18px; border-radius:4px; flex:none; outline:1px solid rgba(255,255,255,.25); outline-offset:-1px;}
.color-picker-trigger .caret{margin-left:auto; opacity:.7; font-size:.75em;}
.color-picker-popover{position:absolute; top:calc(100% + .4em); left:0; right:0; z-index:20; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:.8em; max-height:280px; overflow-y:auto; box-shadow:0 10px 28px rgba(0,0,0,.45);}
.color-swatch-grid{display:flex; flex-wrap:wrap; gap:.4em; margin-bottom:1em;}
.color-swatch{width:26px; height:26px; padding:0; flex:none; border-radius:4px; border:2px solid transparent; outline:1px solid rgba(255,255,255,.2); outline-offset:-1px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.85rem; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6);}
.color-swatch-original{background:repeating-linear-gradient(45deg, #2a2a2a, #2a2a2a 4px, #3a3a3a 4px, #3a3a3a 8px);}
.color-swatch:hover{outline-color:rgba(255,255,255,.5);}
.color-swatch.active{border-color:#fff;}
.custom-badge{display:inline-block; font-family:var(--font-mono); font-size:.65rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); border:1px solid var(--accent); border-radius:3px; padding:.1em .4em; vertical-align:middle;}
.text-layer-row{display:grid; grid-template-columns:1fr 4.5em 2.4em 1.8em; gap:.4em; align-items:center; margin-bottom:.5em;}
.text-layer-row input[type="text"]{border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:var(--radius); padding:.5em; font-size:.82rem; min-width:0;}
.text-layer-row select{border:1.5px solid var(--line); background:var(--card); color:var(--ink); border-radius:var(--radius); padding:.4em; font-size:.76rem;}
.text-layer-row input[type="color"]{width:100%; height:2.2em; padding:0; border:1.5px solid var(--line); border-radius:var(--radius); background:var(--card);}
.drawer-foot{border-top:1px solid var(--line); padding-top:1em; margin-top:.6em;}
.sub-row{display:flex; justify-content:space-between; margin-bottom:.4em; font-size:.92rem;}
.sub-total{font-weight:700; font-size:1.05rem;}

/* checkout */
.checkout-grid{display:grid; grid-template-columns:1fr; gap:2.5em;}
@media (min-width:860px){.checkout-grid{grid-template-columns:1.1fr .9fr;}}
.form-h{font-size:1rem; letter-spacing:.06em; margin-top:1.4em;}
.field{display:flex; flex-direction:column; gap:.35em; margin-bottom:.9em; min-width:0;}
.field label{font-size:.78rem; color:var(--muted); font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em;}
.field input, .field select{border:1.5px solid var(--line); background:var(--card); color:var(--ink); padding:.7em .8em; border-radius:var(--radius); font-family:var(--font-body); font-size:.95rem; width:100%;}
.field input:focus, .field select:focus{outline:2px solid var(--accent2); outline-offset:1px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:.8em;}
.order-box{background:var(--card); border:1px solid var(--card-line); border-radius:4px; padding:1.2em; position:sticky; top:calc(env(safe-area-inset-top,0px) + 1em);}
.oi-line{display:flex; gap:.7em; margin-bottom:.8em; align-items:flex-start;}
.oi-line .oi-thumb{width:42px;height:42px;flex-shrink:0; border-radius:var(--radius); overflow:hidden; background:var(--paper);}
.oi-line .oi-thumb img{width:100%;height:100%;object-fit:contain;}
.oi-line .n{font-size:.86rem; font-weight:600;}
.oi-line .m{font-size:.74rem; color:var(--muted);}
.test-badge{display:inline-flex; align-items:center; gap:.4em; background:var(--accent2); color:#fff; font-size:.68rem; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-weight:700; padding:.3em .6em; border-radius:var(--radius); margin-bottom:1em;}
.pay-note{font-size:.76rem; color:var(--muted); margin-top:.6em;}

/* confirmation */
.confirm-box{text-align:center; max-width:560px; margin:0 auto; padding-block:2em;}
.confirm-head{font-size:1.6rem; margin:.3em 0 1em; text-transform:uppercase;}

/* legal */
.legal{max-width:720px; margin:0 auto;}
.legal h2.doc-h{font-size:1.1rem; margin:1.6em 0 .5em; text-transform:uppercase; font-family:var(--font-display);}
.legal p, .legal li{color:var(--muted); font-size:.92rem; line-height:1.65;}
.legal ul{padding-left:1.2em;}
.updated{font-size:.78rem; color:var(--muted); font-family:var(--font-mono);}

/* footer */
footer{border-top:1px solid var(--line); padding-block:3em; margin-top:2em;}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:2em; margin-bottom:2em;}
.foot-col h4{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.07em; font-size:.78rem; color:var(--muted); margin:0 0 .9em;}
.foot-col .link-btn{display:block; margin-bottom:.6em; font-size:.88rem; text-decoration:none;}
.foot-col .link-btn:hover{color:var(--accent);}
.foot-col p{font-size:.88rem; color:var(--muted); margin:0 0 .6em;}
.newsletter-row{display:flex; gap:.5em; margin-top:.5em; flex-wrap:wrap;}
.newsletter-row input{flex:1; min-width:140px; border:1.5px solid var(--line); background:var(--card); padding:.6em .8em; border-radius:var(--radius); color:var(--ink);}
.foot-bottom{display:flex; justify-content:space-between; gap:1em; flex-wrap:wrap; font-size:.76rem; color:var(--muted); border-top:1px solid var(--line); padding-top:1.4em;}

/* toast */
.toast{position:fixed; bottom:max(1.4em, env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%) translateY(10px); background:var(--ink); color:var(--paper); padding:.8em 1.3em; border-radius:4px; font-size:.86rem; z-index:60; opacity:0; transition:opacity .25s ease, transform .25s ease; pointer-events:none;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

[hidden]{display:none!important;}
@media (prefers-reduced-motion: reduce){ *{transition:none!important;} }