/* Sartoria: dark editorial menswear, one gold accent. Tokens in :root; later layers override earlier ones. */
:root{
  --bg:#0C0B0A;--bg2:#141311;--surface:rgba(255,255,255,.035);--surface2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.16);
  --fg:#F1EDE5;--muted:#A39C8F;--faint:#6F6A61;--gold:#C9A84C;--gold2:#E0C374;--danger:#D97A6C;
  --display:"Playfair Display",Georgia,serif;--body:"Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--r:14px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.6 var(--body);min-height:100dvh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:
  radial-gradient(900px 500px at 85% -5%,rgba(201,168,76,.09),transparent 65%),
  radial-gradient(700px 500px at -10% 110%,rgba(201,168,76,.05),transparent 60%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;letter-spacing:-.01em}

/* Header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:40px;height:72px;padding:0 max(16px,4vw);
  background:rgba(12,11,10,.72);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--line)}
.top h1{font-size:24px;font-style:italic;color:var(--fg);white-space:nowrap}
.top h1::first-letter{color:var(--gold)}
nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;height:100%;align-items:stretch}
nav::-webkit-scrollbar{display:none}
nav button{border-radius:0;height:100%;padding:0 14px;color:var(--muted);border:0;border-bottom:1px solid transparent;white-space:nowrap;font-size:13.5px}
nav button:hover{background:none;color:var(--fg)}
nav button.on{color:var(--fg);border-bottom-color:var(--gold)}
nav button i{font-size:16px;opacity:.8}
nav button.on i{color:var(--gold);opacity:1}

/* Buttons */
button{font:500 14px var(--body);color:var(--fg);background:transparent;border:1px solid transparent;border-radius:999px;padding:9px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:background .25s var(--ease),border-color .25s var(--ease),color .25s,transform .15s}
button:hover{background:var(--surface2)}
button:active{transform:scale(.98)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.drop:focus-visible,a:focus-visible,[role=button]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gold{background:var(--gold);color:#17140B;font-weight:600}
.gold:hover{background:var(--gold2)}
.ghost{border-color:var(--line2)}
.danger{color:var(--danger)}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold2)}

/* Layout */
main{position:relative;z-index:1;max-width:1440px;margin:0 auto;padding:40px max(16px,4vw) 96px}
.vhead{margin-bottom:28px;max-width:62ch}
.vhead h2{font-size:clamp(30px,4vw,44px);line-height:1.1}
.vhead p{color:var(--muted);margin:10px 0 0}
.view:not([hidden]){animation:rise .6s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.bar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:28px}
.bar .gold{margin-left:auto}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{border-color:var(--line);padding:6px 14px;font-size:13px;color:var(--muted);text-transform:lowercase}
.chips button::first-letter{text-transform:uppercase}
#statusChips{padding-left:20px;border-left:1px solid var(--line2)}
.chips button:hover{color:var(--fg)}
.chips button.on{background:var(--fg);border-color:var(--fg);color:var(--bg)}

/* Grids & cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:28px 20px}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.card{background:none;border:0;border-radius:var(--r);overflow:visible;cursor:pointer;text-align:left;padding:0;display:flex;flex-direction:column;gap:12px;color:var(--fg)}
.card:hover{background:none}
.card .photo{border-radius:var(--r);transition:box-shadow .4s var(--ease)}
.card:hover .photo{box-shadow:0 0 0 1px rgba(201,168,76,.45),0 24px 48px -24px rgba(0,0,0,.8)}
.card:hover .photo img{transform:scale(1.04)}
.grid>.card{animation:rise .6s var(--ease) both;animation-delay:calc(min(var(--i,0),12) * 40ms)}
.photo{aspect-ratio:4/5;width:100%;background:var(--bg2);display:grid;place-items:center;color:var(--faint);font-size:34px;overflow:hidden;position:relative}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.photo .tag{position:absolute;bottom:10px;right:10px;font-size:11.5px;background:rgba(12,11,10,.78);backdrop-filter:blur(6px);color:var(--fg);padding:3px 9px;border-radius:999px}
.meta{padding:0 2px;display:grid;gap:2px;width:100%;justify-items:start;text-align:left}
.card .photo img{filter:brightness(.94)}
.meta b{font-weight:500;font-size:14.5px;line-height:1.35}
.meta span{color:var(--muted);font-size:12.5px}

/* Look / content cards (text blocks with surface) */
.look{background:var(--surface);border:1px solid var(--line);overflow:hidden;gap:0;transition:border-color .3s var(--ease),transform .4s var(--ease)}
.look:hover{border-color:rgba(201,168,76,.35);transform:translateY(-3px)}
.look .photo{border-radius:0}
.look .meta{gap:8px;padding:20px 22px 22px}
.look h3{font-size:22px;line-height:1.2}
.look p{margin:0;color:var(--muted)}
.look ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.7}
.eyebrow{color:var(--gold);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.hint{color:var(--muted);font-size:13.5px;white-space:pre-line}
.hint i{color:var(--gold)}

/* Builder */
.builder{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start}
@media (max-width:860px){.builder{grid-template-columns:1fr}}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}
.slot .photo{font-size:14px;flex-direction:column;gap:6px;border:1px dashed var(--line2)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:8px;position:sticky;top:96px}
.shop.panel{position:static}

/* Forms */
label{font-size:12px;color:var(--muted);letter-spacing:.04em;margin-top:8px}
input,select,textarea{width:100%;font:14px var(--body);color:var(--fg);background:rgba(0,0,0,.3);border:1px solid var(--line2);border-radius:6px;padding:10px 12px;transition:border-color .2s}
textarea{resize:vertical;min-height:84px;line-height:1.5}
input::placeholder{color:var(--faint)}
input:hover,select:hover,textarea:hover{border-color:rgba(255,255,255,.28)}
.collage{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--bg2);border-radius:var(--r) var(--r) 0 0;overflow:hidden}
.collage .photo{aspect-ratio:3/4;font-size:22px;border-radius:0}

/* Tables */
.shop{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:600px}
th,td{padding:14px 12px;text-align:left;vertical-align:middle}
tbody tr{border-top:1px solid var(--line);transition:background .2s}
tbody tr:hover{background:rgba(255,255,255,.025)}
th{color:var(--faint);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.num{text-align:right;font-variant-numeric:tabular-nums}
tfoot td{font-family:var(--display);font-size:20px;color:var(--gold);padding-top:20px;border-top:1px solid var(--line2)}
.thumb{width:52px;height:65px;border-radius:6px;object-fit:cover;background:var(--bg2);display:grid;place-items:center;color:var(--faint)}

/* Tiers */
.tierhead{margin:8px 0 24px;max-width:70ch}.tierhead p{margin:0 0 12px;color:var(--muted)}
.brand{padding:5px 12px;border:1px solid var(--line2);border-radius:999px;font-size:12.5px;color:var(--fg)}
#tierChips{margin-bottom:20px}
#tierBody .panel{position:static}
.lookpic{aspect-ratio:4/5}.lookpic img{object-fit:cover;width:100%;height:100%}

/* Dialogs */
dialog{background:#161512;color:var(--fg);border:1px solid var(--line2);border-radius:var(--r);padding:28px;width:min(580px,94vw);max-height:92dvh;box-shadow:0 40px 80px -20px rgba(0,0,0,.7)}
dialog[open]{animation:rise .4s var(--ease)}
dialog::backdrop{background:rgba(6,5,4,.7);backdrop-filter:blur(6px)}
dialog h2{font-size:26px;margin-bottom:6px}
#pickDlg{width:min(960px,94vw)}
dialog form{display:grid;gap:6px}
.drop{border:1px dashed var(--line2);border-radius:var(--r);min-height:190px;display:grid;place-items:center;text-align:center;color:var(--muted);cursor:pointer;overflow:hidden;margin-top:10px;transition:border-color .2s,background .2s}
.drop:hover,.drop.over{border-color:var(--gold);background:rgba(201,168,76,.04)}
.drop i{font-size:34px;color:var(--gold)}
.drop img{max-height:300px;width:100%;object-fit:contain}
.row{display:flex;gap:8px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.two>div{display:grid;gap:6px}
.actions{display:flex;gap:8px;margin-top:18px;align-items:center}
.actions span{flex:1}
.err{color:var(--danger);min-height:1em;margin:0;font-size:13px}
.empty{color:var(--muted);padding:64px 0;grid-column:1/-1;text-align:center;font-family:var(--display);font-size:20px;font-style:italic}
#toast{position:fixed;z-index:70;bottom:28px;left:50%;transform:translate(-50%,10px);background:var(--fg);color:var(--bg);padding:10px 20px;border-radius:999px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* Trips */
.trip-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.trip-hero .art{aspect-ratio:16/11;border-radius:var(--r);overflow:hidden;background:var(--bg2)}
.trip-hero .art img{width:100%;height:100%;object-fit:cover}
.trip-hero h2{font-size:clamp(36px,5vw,60px);line-height:1.05;margin:10px 0 14px}
.trip-hero p{color:var(--muted);margin:0 0 18px;max-width:52ch}
.facts{display:grid;grid-template-columns:repeat(3,auto);gap:24px;justify-content:start;padding-top:18px;border-top:1px solid var(--line)}
.facts div{display:grid;gap:2px}.facts span{color:var(--faint);font-size:12px}.facts b{font-weight:500}
.days{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,340px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:20px;margin:0 calc(-1*max(16px,4vw));padding-left:max(16px,4vw);padding-right:max(16px,4vw);scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.day{scroll-snap-align:start;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.day .photo{aspect-ratio:4/5}
.day .body{padding:20px 22px 24px;display:grid;gap:10px;align-content:start}
.day h3{font-size:22px}
.day ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.7;font-size:14px}
.day.key{border-color:rgba(201,168,76,.55);background:linear-gradient(180deg,rgba(201,168,76,.08),var(--surface) 40%)}
.day.key h3{color:var(--gold2)}
.sec-title{display:flex;align-items:baseline;gap:16px;margin:64px 0 24px}
.sec-title h2{font-size:32px}.sec-title span{color:var(--muted);font-variant-numeric:tabular-nums}
.progress{height:2px;background:linear-gradient(90deg,var(--gold) var(--p),transparent var(--p));margin:-12px 0 28px}
.pack{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:40px 32px}
.pack h3{font-size:18px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.check{display:flex;gap:12px;align-items:center;padding:7px 0;font-size:14px;letter-spacing:0;color:var(--fg);text-transform:none;margin:0;cursor:pointer}
.check input{appearance:none;width:18px;height:18px;padding:0;flex:none;border:1px solid var(--line2);border-radius:5px;display:grid;place-items:center;background:transparent;cursor:pointer}
.check input:checked{background:var(--gold);border-color:var(--gold)}
.check input:checked::after{content:"";width:9px;height:5px;border:2px solid #17140B;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.check input:checked+span{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--faint)}
@media (max-width:860px){.trip-hero{grid-template-columns:1fr;gap:24px}.facts{grid-template-columns:1fr 1fr}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (prefers-reduced-transparency:reduce){.top{background:var(--bg);backdrop-filter:none}}
/* Guide */
.principles{list-style:none;counter-reset:p;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px 40px}
.principles li{counter-increment:p;display:grid;grid-template-columns:44px 1fr;gap:4px 12px}
.principles li::before{content:counter(p);grid-row:span 2;font-family:var(--display);font-size:30px;font-style:italic;color:var(--gold);line-height:1}
.principles p{margin:0;font-size:16px;line-height:1.5}
.principles span{color:var(--faint);font-size:12.5px}
.src{display:grid;gap:6px;align-content:start}
.src h3{font-size:19px;line-height:1.3}.src h3 a{color:var(--fg)}.src h3 a:hover{color:var(--gold)}
.src h3 i{font-size:13px;color:var(--gold)}
.src>span{color:var(--faint);font-size:12.5px}.src p{margin:0;color:var(--muted);font-size:14px}
.meta span{color:#ADA698}
@media (max-width:768px){.grid.wide{grid-template-columns:1fr}nav{scroll-snap-type:x proximity}}
/* review round 3 */
.days{margin:0;padding:0 0 20px;scroll-padding-inline:0;mask-image:linear-gradient(90deg,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);align-items:stretch}
.day .body{flex:1}.day .body>.hint:last-child{margin-top:auto;padding-top:6px}
.day .hint,.day ul{color:#B3AC9F}
.trip-hero{align-items:center}.trip-hero h2{text-wrap:balance}.trip-hero p{max-width:60ch}
.facts{grid-template-columns:repeat(3,minmax(0,auto));gap:20px 32px}
@media (max-width:860px){.facts{grid-template-columns:1fr}}
.principles li{grid-template-rows:auto 1fr;row-gap:10px}
.principles li::before{font-variant-numeric:lining-nums;font-feature-settings:"lnum";min-width:2.5ch}
.principles span,.src>span{color:#9C9588;font-size:12.5px}
.src .eyebrow{text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--gold)}
.pack{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

/* Boot (loading / error) */
body:not(.ready) .view{display:none}
.boot{display:grid;justify-items:center;gap:14px;padding:96px 0;text-align:center;color:var(--muted)}
.boot h2{font-size:28px;color:var(--fg)}
.boot p{margin:0;max-width:46ch}
.boot i{font-size:34px;color:var(--gold)}
.spin{animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Keyboard-activatable cards */
.card[role=button]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* Picker toggle */
.pickbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:10px 0 18px}
.pickbar .check{padding:0}
.pickempty{grid-column:1/-1;text-align:center;padding:40px 12px;color:var(--muted);display:grid;gap:14px;justify-items:center}
.pickempty b{font-family:var(--display);font-weight:500;font-size:20px;color:var(--fg)}
.pickempty p{margin:0;max-width:52ch}
#pickGrid{max-height:60dvh;overflow-y:auto;padding:4px}

/* Trip selector */
#tripChips{margin-bottom:28px}
.trip-actions{margin-top:48px;display:flex;justify-content:flex-end}

/* Planner */
.planform{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-bottom:20px}
.planform>div{display:grid;gap:6px;align-content:start}
.planform label{margin-top:0}
.planbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:24px}
.planbar .status{margin-left:auto;font-size:13px;color:var(--muted)}
.planbar .status.bad{color:var(--danger)}
#planChips{margin-bottom:20px}
.plan{display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:start}
.plan .panel{top:96px}
.planfilters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-bottom:14px}
.planlist{display:grid;gap:8px}
.prow{display:grid;grid-template-columns:22px 48px 1fr auto;gap:14px;align-items:center;padding:10px 14px;margin:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);cursor:pointer;color:var(--fg);font-size:14px;letter-spacing:0;transition:border-color .2s,background .2s}
.prow:hover{border-color:var(--line2)}
.prow.sel{border-color:rgba(201,168,76,.5);background:rgba(201,168,76,.06)}
.prow.over{border-color:var(--danger);background:rgba(217,122,108,.09)}
.prow input{appearance:none;width:18px;height:18px;padding:0;border:1px solid var(--line2);border-radius:5px;display:grid;place-items:center;background:transparent;cursor:pointer}
.prow input:checked{background:var(--gold);border-color:var(--gold)}
.prow input:checked::after{content:"";width:9px;height:5px;border:2px solid #17140B;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.prow .thumb{width:48px;height:60px}
.prow .nm{display:grid;gap:2px;min-width:0}
.prow .nm b{font-weight:500;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.prow .nm span{color:var(--muted);font-size:12.5px}
.prow .pr{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.prow .pr small{display:block;color:var(--danger);font-size:11.5px;min-height:1em}
.sum{display:grid;gap:14px}
.sum h3{font-size:20px}
.big{font-family:var(--display);font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums}
.big.over{color:var(--danger)}
.meter{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;width:var(--p);background:var(--gold);border-radius:999px;transition:width .4s var(--ease)}
.meter.over i{background:var(--danger)}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-variant-numeric:tabular-nums}
.kv span{color:var(--muted)}
.kv.bad b{color:var(--danger)}
.tiertab{min-width:0;font-size:13.5px}
.tiertab th{padding:6px 6px}.tiertab td{padding:7px 6px}
.tiertab tfoot td{font-size:14px;padding-top:10px;font-family:var(--body)}
.sel-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px}
.sel-list li{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:6px 8px;border-radius:6px;border:1px solid transparent}
.sel-list li.over{border-color:var(--danger);background:rgba(217,122,108,.09)}
.sel-list li small{display:block;color:var(--muted)}
.sel-list li.over small{color:var(--danger)}
.sel-list button{padding:4px 8px}
.planempty{color:var(--muted);font-size:14px;margin:0}
.plannote{color:var(--muted);font-size:12.5px;margin:0}

/* Responsive overrides: keep last so they win over the base rules above */
@media (max-width:768px){nav{mask-image:linear-gradient(90deg,#000 80%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent)}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}#statusChips{padding-left:0;border-left:0}.bar .gold{width:100%;justify-content:center}.top{gap:16px;height:60px}.top h1{font-size:20px}nav button span,nav button{font-size:13px;padding:0 10px}}
@media (max-width:860px){.plan{grid-template-columns:1fr}.plan .panel{position:static;order:-1}}
@media (max-width:768px){.planform,.planfilters{grid-template-columns:1fr}.prow{grid-template-columns:22px 44px 1fr;row-gap:4px}.prow .pr{grid-column:3;text-align:left}.planbar .status{margin-left:0;width:100%}.trip-actions{justify-content:stretch}}
.pickbar .check input:checked+span{color:var(--fg);text-decoration:none}
.boot[hidden]{display:none}
#planChips button,#tripChips button{text-transform:none}
/* Guide extras, matrix, seasons, buy order */
.sec-title.first{margin-top:0}
.principles.rules{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.principles.rules li{grid-template-rows:auto}
.palette{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.palette li{display:grid;gap:2px}
.palette .sw{display:block;height:64px;border-radius:var(--r);border:1px solid var(--line2);margin-bottom:6px}
.palette small{color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
.sec-title h2{font-size:32px}
table.matrix{min-width:560px}
.matrix tbody tr{cursor:pointer}
.matrix tbody tr.on{background:rgba(201,168,76,.1);box-shadow:inset 3px 0 var(--gold)}
.matrix tbody tr:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.matrix-hit{display:grid;gap:24px;margin-top:20px}
.matrix-hit h3{font-size:18px;margin-bottom:10px}
.matrix-hit .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.season .meta{gap:12px}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.season h4{margin:0 0 4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:500}
.season ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.6;font-size:14px}
.seasonhits{display:grid;gap:8px}
.mini{width:100%;display:grid;grid-template-columns:40px 1fr;gap:12px;text-align:left;border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;white-space:normal;border-radius:10px}
.mini .thumb{width:40px;height:50px}
.mini span{display:grid;gap:2px;min-width:0}.mini b{font-weight:500;font-size:13.5px}.mini small{color:var(--muted);font-size:12px}
.buyorder{position:static;margin-bottom:16px;padding:16px 18px}
.buyorder ol{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px}
.buyorder li{display:grid;gap:0}.buyorder li span{color:var(--muted)}
@media (max-width:768px){.sgrid{grid-template-columns:1fr}}
.card{white-space:normal;min-width:0}
.card{white-space:normal;min-width:0}
[hidden]{display:none!important}
@media (max-width:768px){table.matrix{min-width:0;width:100%}.matrix th,.matrix td{padding:8px 6px;font-size:13px}.matrix th{font-size:10px;letter-spacing:.04em}}

/* ============ Sartoria design layer (2026-10) ============
   Type scale (px): 12 / 13 / 14 / 16 / 20 / 24 / 32 / 44 / 60. Spacing: 4-pt grid.
   Radii: 6 inputs, 12 cards, 20 sheets, pill buttons. Elevation: e1 hover, e2 sheet. */
:root{
  --t-xs:12px;--t-sm:13px;--t-md:14px;--t-base:16px;--t-lg:20px;--t-xl:24px;--t-2xl:32px;--t-3xl:44px;--t-4xl:60px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --r-sm:6px;--r:12px;--r-lg:20px;
  --e1:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -24px rgba(0,0,0,.9);
  --e2:0 40px 90px -20px rgba(0,0,0,.85);
  --muted:#ABA497;--faint:#8A847A;
  --glass:rgba(16,15,13,.72);
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
}
body{font-size:var(--t-base);line-height:1.6;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.skip{position:absolute;left:var(--s4);top:-60px;z-index:100;background:var(--gold);color:#17140B;padding:var(--s2) var(--s4);border-radius:999px;font-weight:600}
.skip:focus{top:calc(var(--s3) + var(--safe-t))}

/* Header + primary nav */
.top{height:auto;min-height:72px;padding-top:var(--safe-t);gap:var(--s6);background:var(--glass)}
.brand-mark{display:inline-flex;align-items:center;gap:var(--s3);color:var(--fg);text-decoration:none;flex:none}
.brand-mark img{width:30px;height:30px;border-radius:8px}
.brand-mark span{font-family:var(--display);font-size:21px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);padding-left:.1em}
.brand-mark:hover{color:var(--gold2)}
#tabs{height:72px;gap:var(--s1)}
#tabs button{font-size:var(--t-md);padding:0 var(--s4);gap:var(--s2);letter-spacing:.01em}
#tabs button[aria-current] span{color:var(--fg)}
.subtabs{position:sticky;top:var(--top-h,calc(72px + var(--safe-t)));z-index:19;display:flex;gap:var(--s1);height:auto;padding:var(--s2) max(16px,4vw);overflow-x:auto;background:rgba(12,11,10,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.subtabs button{height:auto;border:1px solid transparent;border-radius:999px;padding:6px var(--s4);font-size:var(--t-sm);color:var(--muted)}
.subtabs button.on{color:var(--fg);border-color:rgba(201,168,76,.55);background:rgba(201,168,76,.08)}
main{padding-top:var(--s7)}
.vhead{margin-bottom:var(--s6)}
.vhead h2{font-size:clamp(var(--t-2xl),4vw,var(--t-3xl));outline:none}
.vhead .eyebrow{display:block;margin-bottom:var(--s2)}
.eyebrow{font-size:var(--t-xs);letter-spacing:.16em}
.view:not([hidden]){animation:rise .45s var(--ease) both}

/* Filters: segmented status + scrolling category chips */
.bar{gap:var(--s3);margin-bottom:var(--s6)}
.seg{display:inline-flex;padding:3px;border:1px solid var(--line2);border-radius:999px;background:rgba(0,0,0,.25)}
.seg button{padding:6px 14px;font-size:var(--t-sm);color:var(--muted);border:0}
.seg button small{color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums}
.seg button.on{background:var(--fg);color:var(--bg)}
.seg button.on small{color:#5c564c}
#statusChips{padding-left:3px;border-left:1px solid var(--line2)}
.chips button{text-transform:none}
.chips.scroller{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:1 1 100%;order:3;mask-image:linear-gradient(90deg,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 94%,transparent)}
.chips.scroller::-webkit-scrollbar{display:none}
.chips.scroller button{flex:none}

/* Cards and images */
.card .photo,.photo{border-radius:var(--r)}
.photo{background:linear-gradient(160deg,#1b1a17,#0f0e0c)}
.photo img{position:relative;z-index:1;object-position:center 20%;opacity:0;filter:blur(14px) brightness(.94);transform:scale(1.03);transition:opacity .5s var(--ease),filter .6s var(--ease),transform .8s var(--ease)}
.photo img.in{opacity:1;filter:brightness(.94);transform:none}
.card:hover .photo img.in{transform:scale(1.035)}
.photo .ph-fallback{position:absolute;font-size:36px;color:#4a463f}
.photo.noimg .ph-fallback{color:#6b665d}
.photo.lowres::before{content:"";position:absolute;inset:-20px;background:var(--lowbg) center/cover;filter:blur(18px) brightness(.45) saturate(.8);z-index:0}
.photo.lowres img.in{object-fit:contain;filter:blur(.6px) brightness(.9);width:70%;height:70%;margin:auto}
.photo.lowres{place-items:center}
.lowres-note{position:absolute;left:10px;bottom:10px;z-index:2;font-size:11px;color:var(--muted);background:rgba(12,11,10,.7);padding:2px 8px;border-radius:999px}
.photo .tag{z-index:2;top:10px;bottom:auto;right:10px;font-size:11px;letter-spacing:.04em}
.piece .meta{gap:3px}
.piece .meta .eyebrow{font-size:10.5px;color:var(--gold)}
.piece .meta b{font-size:var(--t-md);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.piece .meta span:last-child{font-size:var(--t-sm);font-variant-numeric:tabular-nums}

/* Editorial look card: image with gradient caption */
.look{border-radius:var(--r);box-shadow:var(--e1)}
.look.editorial .lookpic{border-radius:0;aspect-ratio:4/5}
.look .caption{position:absolute;inset:auto 0 0 0;z-index:2;padding:var(--s7) var(--s5) var(--s5);background:linear-gradient(180deg,transparent,rgba(8,7,6,.55) 35%,rgba(8,7,6,.92));display:grid;gap:var(--s1)}
.look .caption h3{font-size:var(--t-xl);color:#fff}
.look .caption .eyebrow{color:var(--gold2)}
.look.editorial .meta{padding:var(--s4) var(--s5) var(--s5);gap:var(--s3)}
.look.editorial ul{font-size:var(--t-md);padding-left:16px}
.look .cta,.tile .cta{color:var(--gold);font-size:var(--t-sm);font-weight:500;display:inline-flex;gap:6px;align-items:center}
.look .cta i{transition:transform .3s var(--ease)}
.look:hover .cta i{transform:translateX(3px)}

/* Home */
.home-head{margin-bottom:var(--s6)}
.home-head h1{font-size:clamp(34px,5vw,var(--t-4xl));line-height:1.05;margin-top:var(--s2);text-wrap:balance;outline:none}
.home-head h1 em{color:var(--gold);font-style:italic}
.home-head .eyebrow{text-transform:none;letter-spacing:.04em;font-size:var(--t-sm);color:var(--muted)}
.home-head .eyebrow::first-letter{text-transform:uppercase}
.home-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s6);align-items:start}
.home-look .label{display:block;margin-bottom:var(--s3)}
.look.feature .lookpic{aspect-ratio:5/6}
.look.feature .caption h3{font-size:var(--t-2xl)}
.home-side{display:grid;gap:var(--s5)}
.tile{display:grid;gap:var(--s2);text-align:left;white-space:normal;justify-items:start;padding:var(--s5);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--fg);box-shadow:var(--e1);width:100%}
.tile:hover{background:var(--surface2);border-color:rgba(201,168,76,.35)}
.tile .eyebrow{display:inline-flex;gap:6px;align-items:center}
.tile h3{font-size:var(--t-xl);line-height:1.2}
.tile p{margin:0;color:var(--muted);font-size:var(--t-md)}
.tile p b{color:var(--fg);font-weight:500}
.tile.next{background:linear-gradient(135deg,rgba(201,168,76,.12),var(--surface) 60%)}
.prog-num{display:flex;align-items:baseline;gap:var(--s3)}
.prog-num b{font-family:var(--display);font-size:var(--t-3xl);font-weight:500;line-height:1;color:var(--gold)}
.prog-num span{color:var(--muted);font-size:var(--t-md)}
.pbar{width:100%;height:4px;border-radius:999px;background:var(--line2);overflow:hidden;margin:var(--s1) 0 var(--s2)}
.pbar i{display:block;height:100%;background:var(--gold);border-radius:999px}
.row-btns{display:flex;flex-wrap:wrap;gap:var(--s2)}
button.sm{padding:6px 12px;font-size:var(--t-sm)}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);height:auto;overflow:visible}
.quick button{flex-direction:column;height:auto;gap:4px;padding:var(--s4) var(--s2);border:1px solid var(--line);border-radius:var(--r);font-size:var(--t-sm);color:var(--fg)}
.quick button i{font-size:22px;color:var(--gold);opacity:1}
.quick small{color:var(--faint);font-size:11px}

/* Empty states */
.empty-state{grid-column:1/-1;display:grid;justify-items:center;gap:var(--s3);text-align:center;padding:var(--s8) var(--s4);border:1px dashed var(--line2);border-radius:var(--r-lg);color:var(--muted)}
.empty-state>i{font-size:40px;color:var(--gold)}
.empty-state h3{font-size:var(--t-xl);color:var(--fg)}
.empty-state p{margin:0;max-width:44ch}

/* Skeleton loading */
.boot{justify-items:stretch;padding:0;text-align:left}
.skel{display:block;border-radius:var(--r-sm);background:linear-gradient(90deg,#16150f 0%,#22201b 50%,#16150f 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.skel-head{display:grid;gap:var(--s3);margin-bottom:var(--s6)}
.skel.w40{width:min(220px,40%);height:12px}.skel.w70{width:min(520px,70%);height:40px}
.skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:28px 20px}
.skel.card-sk{aspect-ratio:4/5;border-radius:var(--r)}
.sr-status{color:var(--muted);font-size:var(--t-sm);margin-top:var(--s5)!important}
@keyframes shimmer{to{background-position:-200% 0}}
.boot>i{justify-self:center}.boot>h2,.boot>p,.boot>button{justify-self:center;text-align:center}

/* Piece detail sheet */
dialog.sheet{padding:0;width:min(880px,94vw);border-radius:var(--r-lg);overflow:auto;box-shadow:var(--e2);background:#141310}
#pieceBody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);position:relative}
.sheet .hero{border-radius:0;aspect-ratio:4/5;height:100%}
.sheet-close{position:absolute;top:var(--s3);right:var(--s3);z-index:5;width:40px;height:40px;padding:0;justify-content:center;background:rgba(12,11,10,.7);border:1px solid var(--line2)}
.sheet-body{padding:var(--s6) var(--s6) var(--s5);display:grid;gap:var(--s3);align-content:start}
.sheet-body h2{font-size:var(--t-2xl);line-height:1.15;margin:0}
.sheet-price{margin:0;font-family:var(--display);font-size:var(--t-lg);color:var(--gold);font-variant-numeric:tabular-nums}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{font-size:var(--t-xs);padding:3px 10px;border:1px solid var(--line2);border-radius:999px;color:var(--fg)}
.sheet-desc{margin:0;color:var(--muted);font-size:var(--t-md)}
.sheet-sec{border-top:1px solid var(--line);padding-top:var(--s4);display:grid;gap:var(--s2)}
.sheet-sec h3{font-family:var(--body);font-size:var(--t-sm);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg);display:flex;gap:var(--s2);align-items:center}
.sheet-sec h3 i{color:var(--gold);font-size:16px}
.sheet-sec p{margin:0;font-size:var(--t-md);color:var(--muted)}
.pairs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.pair{display:grid;gap:6px;padding:0;border:0;border-radius:var(--r-sm);white-space:normal;text-align:left;font-size:var(--t-xs);color:var(--muted);align-content:start}
.pair .photo{border-radius:var(--r-sm)}
.pair:hover{background:none;color:var(--fg)}
.sheet-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
a.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--line2);color:var(--fg);font-size:14px;font-weight:500}
a.btn:hover{border-color:var(--gold);color:var(--gold2)}

/* Focus */
.card:focus-visible,.tile:focus-visible,.pair:focus-visible,.subtabs button:focus-visible,#tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Phone: bottom tab bar, stacked tables, single column */
@media (max-width:768px){
  .top{min-height:56px;justify-content:center}
  .brand-mark span{font-size:18px}
  #tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;height:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:6px 4px calc(6px + var(--safe-b));background:rgba(12,11,10,.92);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-top:1px solid var(--line);mask-image:none;-webkit-mask-image:none;overflow:visible}
  #tabs button{flex-direction:column;gap:2px;height:52px;padding:0 2px;font-size:10.5px;border-bottom:0;justify-content:center;min-width:0}
  #tabs button i{font-size:22px}
  #tabs button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  #tabs button.on{color:var(--fg)}
  #tabs button.on i{color:var(--gold)}
  .subtabs{top:var(--top-h,calc(56px + var(--safe-t)));padding:var(--s2) var(--s4)}
  main{padding:var(--s5) var(--s4) calc(96px + var(--safe-b))}
  #toast{bottom:calc(84px + var(--safe-b))}
  .home-grid{grid-template-columns:1fr}
  .quick{grid-template-columns:repeat(4,1fr);gap:var(--s2)}
  .quick button{padding:var(--s3) 2px;font-size:12px}
  .bar .gold{margin-left:0;order:0}
  .seg{order:1}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s3)}
  .skel-grid{grid-template-columns:repeat(2,1fr);gap:var(--s3)}
  dialog.sheet{width:100vw;max-width:100vw;max-height:94dvh;margin:auto 0 0;border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0}
  #pieceBody{grid-template-columns:1fr}
  .sheet .hero{aspect-ratio:1/1;height:auto}
  .sheet-body{padding:var(--s5) var(--s4) calc(var(--s5) + var(--safe-b))}
  .pairs{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
  .shop{overflow:visible}
  .shop table:not(.matrix):not(.tiertab){min-width:0}
  .shop table:not(.matrix):not(.tiertab) thead{display:none}
  .shop table:not(.matrix):not(.tiertab) tr{display:grid;grid-template-columns:52px 1fr auto;gap:2px var(--s3);padding:var(--s3) 0;align-items:center}
  .shop table:not(.matrix):not(.tiertab) td{padding:0;border:0}
  .shop table:not(.matrix):not(.tiertab) td:first-child{grid-row:span 3}
  .shop table:not(.matrix):not(.tiertab) td.num{text-align:left}
  .shop table:not(.matrix):not(.tiertab) td[colspan]{grid-column:1/-1}
  .shop table:not(.matrix):not(.tiertab) tfoot tr{display:flex;justify-content:space-between}
  .vhead h2{font-size:var(--t-2xl)}
}
@media (prefers-reduced-motion:reduce){.photo img{filter:none!important;opacity:1!important;transform:none!important}.skel{animation:none}}
@media (prefers-reduced-transparency:reduce){.subtabs,#tabs,.photo .tag,.sheet-close,dialog::backdrop{background:var(--bg)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}.look .caption{background:rgba(8,7,6,.94)}}
.prog-num b,.big,.sheet-price,tfoot td{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum","tnum"}
@media (max-width:768px){
  .top{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(12,11,10,.96)}
  #tabs button{font-size:10px;letter-spacing:0}
  .seg{display:flex;width:100%}
  .seg button{flex:1;justify-content:center;padding:6px 4px;gap:4px;font-size:12px}
}
#tabs .short{display:none}
@media (max-width:768px){
  #tabs button span{overflow:visible;text-overflow:clip}
  #tabs button[data-section=closet] span:not(.short){display:none}
  #tabs .short{display:inline}
  .home-head h1 em{display:block}
  .subtabs{mask-image:linear-gradient(90deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
}
.prog-num b{font-family:var(--body);font-weight:300}
.pair .lowres-note,.pair .tag{display:none}

/* Inspiração (Aprender) */
.inspo-sec{margin-top:var(--s7);display:grid;gap:var(--s4)}
.inspo-head{display:flex;gap:var(--s5);justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.inspo-head h3{font-size:var(--t-xl);margin:var(--s1) 0}
.inspo-head p{margin:0;max-width:62ch}
.inspo-style{position:static;gap:var(--s4);padding:var(--s5)}
.inspo-style h3{font-size:var(--t-xl)}
.inspo-style h4,.inspo-scale h4,.tip h4{margin:0 0 4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:500}
.inspo-style p,.tip p{margin:0;color:var(--muted)}
.inspo-style ul{margin:0;padding-left:18px;color:var(--muted);line-height:1.6;font-size:var(--t-md)}
.inspo-style .formula{color:var(--fg);font-family:var(--display);font-size:var(--t-lg);line-height:1.35}
.inspo-pal{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.sw{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--t-sm);color:var(--fg)}
.sw i{width:16px;height:16px;border-radius:50%;border:1px solid var(--line2);flex:none}
.sw.lg i{width:28px;height:28px}
.inspo-pic{border:0;padding:0;border-radius:0;cursor:zoom-in;aspect-ratio:1/1;white-space:normal}
.inspo-pic:hover{background:var(--bg2)}
.inspo-pic .tag{display:inline-flex;gap:4px;align-items:center}
.inspo-look .meta,.inspo-store .meta{gap:var(--s3)}
.inspo-look .meta p{font-size:var(--t-md)}
.inspo-pieces{list-style:none;padding:0!important;margin:0;display:grid;gap:4px;font-size:var(--t-md)}
.inspo-pieces li{display:flex;gap:var(--s2);align-items:flex-start;color:var(--muted)}
.inspo-pieces li i{margin-top:3px;flex:none}
.inspo-pieces li.have{color:var(--fg)}.inspo-pieces li.have i{color:var(--gold)}
.inspo-look .own{color:var(--fg)}.inspo-look .own i{color:var(--gold)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.inspo-thumb{width:104px;aspect-ratio:3/4;border-radius:var(--r);border:1px solid var(--line2);flex:none}
.inspo-thumb .tag{display:none}
.tie-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.tie-row{display:grid;gap:var(--s3);padding:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.tie-row.mine{border-color:rgba(201,168,76,.6);background:rgba(201,168,76,.08)}
.tie-suit{display:flex;align-items:center;gap:var(--s3)}
.tie-suit i{width:30px;height:30px;border-radius:8px;border:1px solid var(--line2);flex:none}
.tie-suit b{font-weight:500}
.tie-list{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
.tie-suit .pill{padding:2px 10px;border:1px solid rgba(201,168,76,.55);border-radius:999px;font-size:var(--t-xs);color:var(--gold)}
.inspo-tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.tip{position:static;gap:var(--s2)}
.inspo-scale{position:static;gap:var(--s4);margin-bottom:var(--s6)}
.inspo-scale .inspo-head h3{font-size:var(--t-xl)}
.scale-bar{display:flex;align-items:center;gap:var(--s3);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.scale-bar i{flex:1;height:2px;background:linear-gradient(90deg,#1F2A44,#6B4F2E,#CDBA96);border-radius:2px}
.scale-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.scale-list li{display:grid;grid-template-columns:24px 28px 1fr;gap:var(--s3);align-items:start}
.scale-list .num{font-family:var(--display);color:var(--gold);font-size:var(--t-lg);line-height:1.2}
.scale-list .sw-dot{width:28px;height:28px;border-radius:8px;border:1px solid var(--line2)}
.scale-list b{font-weight:500;display:block}
.scale-list small{display:block;color:var(--gold);font-size:var(--t-sm)}
.scale-list p{margin:0;color:var(--muted);font-size:var(--t-md)}
.inspo-store{max-width:760px;display:grid;grid-template-columns:minmax(0,260px) 1fr}
.inspo-store .inspo-pic{aspect-ratio:auto;height:100%;min-height:320px}
dialog.light{padding:var(--s4);width:min(920px,96vw);background:#141310;box-shadow:var(--e2);text-align:center;overflow:auto}
dialog.light img{max-width:100%;max-height:80dvh;border-radius:var(--r);display:block;margin:0 auto}
dialog.light .hint{margin:var(--s3) 0 0}
@media (max-width:768px){
  .tie-grid,.inspo-tips{grid-template-columns:1fr}
  .inspo-store{grid-template-columns:1fr}
  .inspo-store .inspo-pic{aspect-ratio:4/5;min-height:0}
  .inspo-thumb{width:84px}
  .inspo-style{padding:var(--s4)}
}
.tile.start{cursor:default}
.paths{display:grid;gap:var(--s2);width:100%}
.path{display:grid;gap:2px;text-align:left;white-space:normal;border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);width:100%;justify-items:start}
.path b{font-weight:500;font-size:var(--t-md)}.path small{color:var(--muted);font-size:var(--t-sm)}
.path.on{border-color:rgba(201,168,76,.6);background:rgba(201,168,76,.08)}
.start-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);width:100%}
.start-steps li{border:1px solid var(--line);border-radius:var(--r);background:rgba(0,0,0,.18)}
.start-steps li.have{border-color:rgba(201,168,76,.5)}
.start-row{display:grid;grid-template-columns:20px 1fr auto;gap:var(--s3);align-items:start;width:100%;text-align:left;white-space:normal;border-radius:var(--r);padding:var(--s3)}
.start-row i{color:var(--faint);margin-top:3px}.have .start-row i{color:var(--gold)}
.start-row span{display:grid;gap:2px;min-width:0}.start-row b{font-weight:500;font-size:var(--t-md)}
.start-row small{color:var(--muted);font-size:var(--t-sm)}
.start-row em{font-style:normal;font-size:var(--t-xs);color:var(--muted);text-align:right;max-width:9em}
.have .start-row em{color:var(--gold)}
.start-more{display:grid;gap:var(--s2);padding:0 var(--s3) var(--s3);justify-items:start}
.start-more .seasonhits{width:100%}.start-more p{margin:0}
@media (max-width:768px){.start-row{grid-template-columns:20px 1fr}.start-row em{grid-column:2;text-align:left;max-width:none}}
.inspo-look .seasonhits{justify-self:stretch;width:100%}
.inspo-look .meta,.inspo-store .meta{align-items:stretch}
.inspo-look .meta .chips,.inspo-store .meta .chips{flex-wrap:wrap}
.inspo-store .meta{justify-items:start}
.mini:not(:has(.thumb)){grid-template-columns:1fr}

/* Ideias */
.inspo-sec{margin:0 0 var(--s6,32px)}.inspo-sec>h3{margin:4px 0 12px}
.idea{display:grid;gap:10px;align-content:start}.idea h3{margin:0}.idea p{margin:0}
.tag-pill{border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--muted)}
.own-line{font-size:13.5px}.own-line i{color:var(--gold)}
.srcline{font-size:12.5px}a.src{color:var(--gold);text-decoration:none;overflow-wrap:anywhere}a.src:hover{text-decoration:underline}
.pchips{display:flex;flex-wrap:wrap;gap:8px}.pchip{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:13px;color:var(--muted);max-width:100%}
.pchip.own{color:var(--fg);border-color:var(--gold)}.pchip.own i{color:var(--gold)}
.tall-list{margin:0;padding:18px 22px 18px 38px;display:grid;gap:10px}.tall-list li::marker{color:var(--gold)}
.voices{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.voices li{display:grid;gap:4px;align-content:start}.voices p{margin:0}.voices a{color:var(--fg);text-decoration:none;overflow-wrap:anywhere}.voices a:hover b{color:var(--gold)}
.start-tips{margin:8px 0 12px;padding-left:20px;font-size:13.5px;color:var(--muted);display:grid;gap:4px}
.idea .muted,.voices .muted,.srcline .muted{color:var(--muted)}
a.src{display:inline-flex;flex-direction:row;gap:6px;align-items:center}.srcline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.top-group { margin: 28px 0 12px; font-family: "Playfair Display", serif; font-weight: 600; }
.top-group small { color: var(--mute, #9a978f); font: 400 13px Inter, sans-serif; margin-left: 6px; }
.selbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.selbar span { color: var(--mute, #9a978f); margin-right: auto; }
.card.piece.sel { outline: 2px solid var(--gold, #C9A84C); outline-offset: 2px; }
.card.piece.sel .photo::after { content: "✓"; position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--gold, #C9A84C); color: #111; display: grid; place-items: center; font-weight: 700; }
.tile.stage { margin: 0 0 20px; border: 1px solid var(--gold, #C9A84C); }
details.more { margin: 12px 0; }
details.more summary { cursor: pointer; color: var(--gold, #C9A84C); padding: 6px 0; }
.pickown { display: grid; gap: 6px; }
.photo-btns { gap: 8px; margin: 10px 0; }
.photo-btns button { flex: 1; min-height: 44px; }
.hero-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.acc-stores li { margin: 4px 0; } .acc-stores a { color: var(--gold, #C9A84C); }
.sizes-form fieldset { min-width: 0; margin: 0 0 16px; padding: 16px; border: 1px solid var(--line, #2c2c30); }
.sizes-form legend { padding: 0 6px; font-weight: 600; }
.sizes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.size-f { display: flex; flex-direction: column; gap: 4px; }
.size-f input { min-height: 40px; width: 100%; box-sizing: border-box; }
.sizes-form textarea { box-sizing: border-box; }
.sizes-form textarea { width: 100%; }

/* ---------- Login ---------- */
.login{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(6,5,4,.86);backdrop-filter:blur(10px)}
.login[hidden]{display:none}
.login-card{display:grid;gap:6px;width:min(400px,100%);padding:28px;background:#161512;border:1px solid var(--line2);border-radius:var(--r);box-shadow:0 40px 80px -20px rgba(0,0,0,.7);animation:rise .4s var(--ease)}
.login-card h2{font-size:26px;margin-bottom:2px}
.login-card p{color:var(--muted);margin-bottom:10px}
.login-card .err{color:#e0a080;min-height:1.2em;margin:4px 0}
.login-card button{justify-content:center;margin-top:6px}

/* Mobile pass (2026-10-17): touch targets, bottom-sheet forms, no iOS zoom, hover-free touch */
html{-webkit-tap-highlight-color:transparent}
button,.card,.pair,.mini{touch-action:manipulation;-webkit-user-select:none;user-select:none}
dialog{overscroll-behavior:contain}
@media (hover:none){
  .card:hover .photo{box-shadow:none}
  .card:hover .photo img,.card:hover .photo img.in{transform:none}
  .drop:hover{border-color:var(--line2);background:transparent}
}
@media (max-width:768px){
  input,select,textarea{font-size:16px;padding:12px 14px}
  table{min-width:0}
  .panel{position:static}
  .subtabs button{padding:9px var(--s4);min-height:40px}
  .chips button{padding:8px 14px;min-height:38px}
  .seg button{min-height:40px}
  .mini{padding:10px 12px}
  .check{padding:10px 0;min-height:44px}
  .actions button,.row-btns button,.photo-btns button{min-height:44px}
  .drop{min-height:150px}
  .drop img{max-height:46dvh}
  .two{grid-template-columns:1fr 1fr;gap:var(--s2)}
  .row{flex-wrap:wrap}
  .row input{flex:1 1 100%}
  .row button{flex:1 1 auto;justify-content:center}
  .photo-btns button{flex:1 1 45%}
  dialog:not(.sheet):not(.light){width:100vw;max-width:100vw;max-height:92dvh;margin:auto 0 0;border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0;padding:var(--s5) var(--s4) calc(var(--s5) + var(--safe-b));box-shadow:none}
  dialog h2{font-size:22px}
  dialog .actions{position:sticky;bottom:calc(-1*var(--s5) - var(--safe-b));margin:var(--s3) calc(-1*var(--s4)) calc(-1*var(--s5) - var(--safe-b));padding:var(--s3) var(--s4) calc(var(--s3) + var(--safe-b));background:#161512;border-top:1px solid var(--line)}
  dialog.light{width:100vw;max-width:100vw;padding:var(--s3);border-radius:0;border-left:0;border-right:0}
  dialog.light img{max-height:78dvh}
  .sheet-close{width:44px;height:44px}
  .days{grid-auto-columns:min(86vw,340px);gap:var(--s3)}
  .login-card{padding:22px 18px}
  .pairs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:380px){
  .grid{gap:var(--s4) var(--s2)}
  #tabs button{font-size:9.5px}
  .quick button{font-size:11px}
}
.quick .cam{grid-column:1/-1;flex-direction:row;justify-content:center;gap:10px;border-color:rgba(201,168,76,.55);background:rgba(201,168,76,.08);font-size:var(--t-md)}
.quick .cam small{color:var(--muted)}

/* Hide / delete controls on curated cards (2026-10-17) */
.card,.trick{position:relative}
.hide-btn{position:absolute;top:8px;right:8px;z-index:3;width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(12,11,10,.72);color:#fff;display:grid;place-items:center;font-size:16px;opacity:.85;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hide-btn:hover,.hide-btn:focus-visible{opacity:1;border-color:var(--gold)}
.hide-btn.on{color:var(--gold);border-color:rgba(201,168,76,.6)}
.hide-btn.del{color:#F0A0A0}
.hide-btn.armed{width:auto;padding:0 12px;gap:6px;display:inline-flex;align-items:center;font-size:var(--t-sm);background:rgba(160,40,40,.85);border-color:transparent}
.trick .hide-btn{width:30px;height:30px;font-size:14px;background:transparent;border-color:transparent;color:var(--muted)}
.trick:hover .hide-btn,.trick .hide-btn:focus-visible{color:var(--text)}
.hidden-chip{margin-left:auto;white-space:nowrap}
.card.look .hide-btn{top:10px;right:10px}
.selbar .danger{border-color:rgba(240,160,160,.35)}
/* Truques e cuidados */
.tricks-chips{margin:0 0 var(--s4)}
.tricks{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s3)}
.trick{display:grid;gap:6px;align-content:start;padding:var(--s4);border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.trick h3{font-size:18px;line-height:1.3}
.trick p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.trick .why{color:var(--faint);font-size:12.5px;font-style:italic}
.tile.trick-day p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acc-photo { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; aspect-ratio: 4 / 5; max-height: 420px; overflow: hidden; border-radius: 12px 12px 0 0; }
.acc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acc-photo small { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.55); color: #eee; font-size: 11px; }

.dict-shortcut{margin:0 0 18px}
.dictionary-intro{display:block;position:static;margin:0 0 var(--s5);padding:var(--s4)}
.dictionary-intro summary{cursor:pointer;color:var(--gold);font-weight:500}
.dictionary-intro[open] summary{margin-bottom:var(--s3)}
.dictionary-intro summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.dictionary-compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.dictionary-compare article{display:grid;align-content:start;gap:6px;padding:var(--s4);border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.dictionary-compare h3{font-size:20px;line-height:1.25}
.dictionary-compare h3 span{display:block;margin-top:4px;color:var(--gold);font:500 12px var(--body)}
.dictionary-compare p{margin:0;color:var(--muted);font-size:13.5px}
.dictionary-search{max-width:740px;margin:0 0 var(--s4)}
.dictionary-search label{display:block;margin:0 0 6px}
.dictionary-search-row{display:flex;align-items:center;gap:var(--s2)}
.dictionary-search-row input{min-width:0}
.dictionary-search-row button{flex:none}
.dictionary-categories{margin:0 0 var(--s3)}
.dictionary-categories button{min-height:40px}
.dictionary-count{margin:0 0 var(--s3);color:var(--muted);font-size:13px}
.dictionary-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:var(--s3)}
.dictionary-term{display:grid;align-content:start;gap:var(--s2);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.dictionary-term-head{display:grid;gap:3px;padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.dictionary-term h3{font-size:21px;line-height:1.2}
.dictionary-term-head p{margin:0;color:var(--gold);font-size:12.5px}
.dictionary-term>p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.55}
.dictionary-term .dictionary-buy{color:var(--fg)}
.dictionary-buy b,.dictionary-caution b{color:var(--gold);font-weight:500}
.dictionary-avoid{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.7fr);gap:var(--s5);margin-top:var(--s7);padding:var(--s5);border:1px solid rgba(201,168,76,.28);border-radius:var(--r);background:rgba(201,168,76,.045)}
.dictionary-avoid header{align-self:start}
.dictionary-avoid h3{margin:5px 0;font-size:clamp(24px,3vw,32px)}
#dictAvoidTitle{scroll-margin-top:calc(var(--top-h,72px) + 72px)}
.dictionary-avoid header p,.dictionary-note{margin:0;color:var(--muted);font-size:13.5px}
.dictionary-avoid ul,.dictionary-sources ul{display:grid;gap:var(--s2);margin:0;padding-left:20px;color:var(--muted);font-size:13.5px}
.dictionary-avoid li::marker{color:var(--gold)}
.dictionary-avoid li b{color:var(--fg);font-weight:500}
.dictionary-note{align-self:start;padding:var(--s3);border-left:2px solid var(--gold);background:var(--surface)}
.dictionary-sources{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line)}
.dictionary-sources h3{margin:0 0 var(--s2);font-size:19px}
.dictionary-sources ul{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);padding-left:18px}
.dictionary-sources li::marker{color:var(--gold)}
.dictionary-sources a{font-size:12.5px}
@media (max-width:760px){
  .dictionary-compare{grid-template-columns:1fr}
  .dictionary-avoid{grid-template-columns:1fr;padding:var(--s4)}
  .dictionary-search-row{align-items:stretch;flex-direction:column}
  .dictionary-search-row button{align-self:flex-start}
}