:root{
  --ink:#0b0b0b; --ink2:#333; --paper:#fff; --card:#fff; --soft:#faf9f6; --mist:#efeeea; --line:#d9d7d1; --mute:#6f6d68; --gold:#b08a3e;
  --brand:#0b0b0b; --brand-h:#222; --onbrand:#fff; --veil:#faf9f6cc; --sh:#0002;
  --font:'Montserrat','Helvetica Neue',Arial,sans-serif; --gut:clamp(16px,3vw,40px);
  color-scheme:light;
}
/* Dark follows the device unless the viewer picked light; [data-theme] forces either way.
   --ink is the TEXT colour and flips; --brand is the permanent dark brand surface (header,
   buttons, pressed chips) and keeps --onbrand on top, so it must never be swapped for --ink. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --ink:#ecebe7; --ink2:#c7c4be; --paper:#141414; --card:#1b1b1b; --soft:#1f1f1f; --mist:#242424; --line:#333331; --mute:#9c9992; --gold:#c9a24e;
    --brand:#0a0a0a; --brand-h:#262626; --onbrand:#fff; --veil:#1f1f1fcc; --sh:#0007;
    color-scheme:dark;
  }
}
:root[data-theme=dark]{
  --ink:#ecebe7; --ink2:#c7c4be; --paper:#141414; --card:#1b1b1b; --soft:#1f1f1f; --mist:#242424; --line:#333331; --mute:#9c9992; --gold:#c9a24e;
    --brand:#0a0a0a; --brand-h:#262626; --onbrand:#fff; --veil:#1f1f1fcc; --sh:#0007;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-weight:400;color:var(--ink);background:var(--paper);font-size:14px;line-height:1.5;min-height:100vh;
  padding-bottom:env(safe-area-inset-bottom)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.upper,.eyebrow,label.l,.tabs a,.chip,.btn,.tag{text-transform:uppercase;letter-spacing:.14em}

/* header */
.top{background:var(--brand);color:var(--onbrand);display:flex;align-items:center;gap:var(--gut);padding:0 var(--gut);padding-top:env(safe-area-inset-top);
  min-height:64px;position:sticky;top:0;z-index:20;border-bottom:1px solid #222}
.brand{display:flex;align-items:center;gap:18px;text-decoration:none;flex:none}
.logo{height:30px;width:auto;filter:brightness(0) invert(1)}
.rule{width:1px;height:28px;background:var(--gold)}
.product{font-weight:400;letter-spacing:.32em;font-size:12px;text-transform:uppercase;white-space:nowrap}
.tabs{display:flex;gap:6px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{text-decoration:none;font-size:11px;font-weight:500;color:#bdbbb5;padding:22px 14px;position:relative;white-space:nowrap;display:flex;align-items:center;gap:8px}
.tabs a:hover{color:#fff}
.tabs a.on{color:#fff}
.tabs a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--gold)}
.count{background:var(--gold);color:#fff;border-radius:99px;min-width:18px;height:18px;font-size:10px;font-weight:600;display:inline-grid;place-items:center;padding:0 5px;letter-spacing:0}
.offline{background:var(--gold);color:#fff;text-align:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:8px var(--gut)}

/* layout */
main{outline:none}
.layout{display:grid;grid-template-columns:300px 1fr;min-height:calc(100vh - 64px)}
.side{border-inline-end:1px solid var(--line);padding:32px 28px;background:var(--card)}
.content{padding:36px var(--gut) 72px;min-width:0}
.eyebrow{font-size:10px;font-weight:500;color:var(--mute)}
h1,h2{font-weight:300;text-transform:uppercase;letter-spacing:.06em;line-height:1.15}
h1{font-size:clamp(28px,4vw,44px)}
h2{font-size:clamp(20px,2.4vw,28px)}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.head p{color:var(--mute);max-width:56ch;margin-top:10px}

/* filters */
.f-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.f-head h3{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.link{font-size:10px;letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;color:var(--mute)}
.group{padding:18px 0;border-bottom:1px solid var(--line)}
.group>.l{display:block;font-size:10px;font-weight:500;color:var(--mute);margin-bottom:12px;letter-spacing:.18em;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);padding:8px 12px;font-size:10px;font-weight:500;letter-spacing:.1em;background:var(--card);min-height:34px;transition:.15s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed=true]{background:var(--brand);color:var(--onbrand);border-color:var(--brand)}
.chip.sw::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;background:var(--c);border:1px solid #0003;vertical-align:-1px}
input[type=date],input[type=text],select,textarea{width:100%;border:1px solid var(--line);background:var(--card);padding:11px 12px;border-radius:0;font-size:13px}
textarea{min-height:110px;resize:vertical}
.dates{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;font-size:11px;font-weight:500;border:1px solid var(--brand);background:var(--brand);color:var(--onbrand);min-height:46px;position:relative;text-decoration:none}
.btn::after{content:"";position:absolute;left:22px;right:22px;bottom:7px;height:1px;background:var(--gold)}
.btn:hover{background:var(--brand-h);border-color:var(--brand-h)}
.btn.line{background:var(--card);color:var(--ink);border-color:var(--ink)}
.btn.line:hover{background:var(--mist)}
.btn[disabled]{opacity:.4;pointer-events:none}
.mobile-only{display:none}

/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.card{text-align:left;display:block;width:100%}
.card .ph{position:relative;aspect-ratio:16/9;background:var(--mist);overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,opacity .4s;opacity:0}
.card .ph img.ok{opacity:1}
.card:hover .ph img{transform:scale(1.03)}
.card .cap{padding:12px 0 0;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.card .name{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.card .meta{font-size:11px;color:var(--mute);letter-spacing:.06em;white-space:nowrap}
.tag{position:absolute;top:10px;left:10px;background:var(--gold);color:#fff;font-size:9px;font-weight:600;padding:5px 9px;letter-spacing:.18em;z-index:1}
.tag.b{background:var(--ink)}
.save-dot{position:absolute;right:10px;top:10px;width:22px;height:22px;background:var(--ink);color:var(--gold);display:grid;place-items:center;font-size:12px}

/* states */
.state{border:1px solid var(--line);padding:56px 24px;text-align:center;max-width:620px;margin:40px auto}
.state h2{margin:10px 0 12px}
.state p{color:var(--mute);margin:0 auto 24px;max-width:46ch}
.state .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.skel{aspect-ratio:16/9;background:linear-gradient(90deg,var(--mist) 25%,var(--soft) 50%,var(--mist) 75%);background-size:200% 100%;animation:sh 1.4s infinite}
@keyframes sh{to{background-position:-200% 0}}
.loadline{height:2px;background:var(--line);overflow:hidden;margin-bottom:28px}
.loadline i{display:block;height:100%;width:30%;background:var(--gold);animation:ld 1.2s infinite ease-in-out}
@keyframes ld{0%{margin-left:-30%}100%{margin-left:100%}}

/* products */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.pcard{border:1px solid var(--line);background:var(--card);text-align:left;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;height:100%;position:relative;transition:.15s;overflow:hidden}
.pcard .im{flex:none;width:100%;aspect-ratio:1;background:var(--mist);position:relative;overflow:hidden}
.pcard .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.pcard .tx{flex:1;min-height:86px;padding:12px 14px 14px;border-top:1px solid var(--line)}
.pcard .k{font-size:10px;color:var(--mute);letter-spacing:.14em;text-transform:uppercase}
.pcard .n{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.pcard[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pcard .ck{position:absolute;top:10px;right:10px;width:22px;height:22px;background:var(--gold);color:#fff;display:none;place-items:center;font-size:12px}
.pcard[aria-pressed=true] .ck{display:grid}
.pcard .lnk{font-size:10px;letter-spacing:.12em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;color:var(--mute)}
.pickbar{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--line);padding:14px var(--gut);margin:32px calc(var(--gut) * -1) -72px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;z-index:5}
.result{margin-top:36px;border-top:1px solid var(--ink);padding-top:28px}

/* requests */
.req{border:1px solid var(--line);margin-bottom:20px}
.req-h{padding:20px 22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.req-h .t{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.req-h .s{font-size:12px;color:var(--mute);margin-top:4px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0 22px 20px}
.step{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);padding-top:12px;border-top:2px solid var(--line)}
.step.done{color:var(--ink);border-top-color:var(--gold)}
.eta{font-size:11px;letter-spacing:.06em;color:var(--mute)}
.req-imgs{padding:0 22px 22px}
.req-imgs .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}

/* saved storage */
.bar{height:3px;background:var(--line);margin:10px 0 0;max-width:360px}
.bar i{display:block;height:100%;background:var(--gold)}

/* viewer */
.viewer{position:fixed;inset:0;z-index:50;background:#0b0b0b;color:#fff;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
.v-bar{display:flex;align-items:center;gap:12px;padding:10px var(--gut);border-bottom:1px solid #222;min-height:60px}
.v-title{flex:1;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-actions{display:flex;gap:6px}
.ghost{color:#fff;font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:10px 14px;border:1px solid #333;min-height:38px;white-space:nowrap}
.ghost:hover{border-color:var(--gold)}
.ghost.sq{width:38px;padding:0;font-size:16px;letter-spacing:0}
.ghost.on{border-color:var(--gold);color:var(--gold)}
.v-stage{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none;cursor:grab;background:#050505}
.v-stage.drag{cursor:grabbing}
.v-stage img{position:absolute;left:0;top:0;transform-origin:0 0;user-select:none;-webkit-user-drag:none;max-width:none;will-change:transform}
/* the looks either side of the current one, so a drag reads as a strip rather than a snap */
.v-side{pointer-events:none}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:72px;font-size:34px;font-weight:300;color:#fff;background:#0b0b0b99;z-index:2}
.nav:hover{color:var(--gold)}
.nav.prev{left:0}.nav.next{right:0}
.v-foot{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));border-top:1px solid #222;flex-wrap:wrap}
.zoom{display:flex;gap:6px;align-items:center;font-size:11px;letter-spacing:.1em}
.zoom span{min-width:52px;text-align:center}
.v-products{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#bdbbb5}
.v-products a{color:#fff;text-underline-offset:4px}
.v-products span b{color:var(--gold);font-weight:600}

/* modal */
.modal{position:fixed;inset:0;z-index:70;background:#000a;display:grid;place-items:center;padding:16px}
.sheet{background:var(--card);width:min(560px,100%);max-height:92vh;overflow:auto;padding:32px}
.sheet h2{margin:6px 0 20px}
.field{margin-bottom:18px}
.field>.l{display:block;font-size:10px;font-weight:500;color:var(--mute);margin-bottom:8px;letter-spacing:.18em;text-transform:uppercase}
.sheet .row{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.thumbs{display:flex;gap:8px}
.cfg{border:1px solid var(--line);padding:12px 14px;font-size:12px;letter-spacing:.06em;background:var(--mist)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--brand);color:var(--onbrand);padding:14px 22px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;z-index:90;border-bottom:2px solid var(--gold);max-width:92vw;text-align:center}
.scrim{position:fixed;inset:0;background:#0008;z-index:30}

/* iPad portrait and below: filters become a drawer */
@media (max-width:1100px){
  .layout{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:min(340px,88vw);z-index:40;transform:translateX(-102%);transition:transform .25s ease;overflow:auto;padding-top:calc(24px + env(safe-area-inset-top))}
  .side.open{transform:none}
  .mobile-only{display:inline-flex}
  .toolbar{display:flex;gap:10px;align-items:center;margin-bottom:20px}
}
@media (min-width:1101px){.toolbar{display:none}}
@media (max-width:900px){
  .top{flex-wrap:wrap;gap:0;padding-bottom:0}
  .brand{padding:14px 0 6px;gap:12px;width:100%}
  .logo{height:26px}
  .product{font-size:10px;letter-spacing:.24em}
  .tabs{margin:0 calc(var(--gut) * -1);width:calc(100% + var(--gut) * 2);padding:0 var(--gut);gap:0;justify-content:space-between}
  .tabs a{padding:14px 4px;letter-spacing:.09em;font-size:10px;gap:6px}
  .tabs a.on::after{left:4px;right:4px}
}
@media (max-width:720px){
  .grid{grid-template-columns:1fr;gap:20px}
  .pgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:10px;column-gap:10px}
  .v-bar{flex-wrap:wrap}
  .v-title{order:-1;flex-basis:100%;text-align:left}
  .v-actions{margin-left:auto}
  .v-bar{gap:6px}
  .v-actions{gap:4px}
  .v-actions .ghost,.v-bar>.ghost{padding:9px 8px;letter-spacing:.06em;font-size:9px}
  .nav{width:40px;height:56px}
  .sheet{padding:24px 20px}
  .pickbar{margin-bottom:-72px}
}
@media (max-width:350px){
  .tabs a{letter-spacing:.04em;font-size:9px;gap:4px}
  .count{min-width:16px;height:16px;font-size:9px}
  .product{letter-spacing:.16em}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.rec-note{margin:0;padding:14px 16px;text-align:center;font-size:11px;letter-spacing:.04em;color:var(--mute)}
.fams{display:flex;flex-direction:column;gap:6px}
.fam-h{display:flex;gap:6px;align-items:stretch}
.fam-h>.chip:first-child{flex:1;text-align:left;display:flex;justify-content:space-between;gap:8px}
.chip i{font-style:normal;color:var(--mute);letter-spacing:0}
.chip[aria-pressed=true] i{color:#fffa}
.chip.dim{opacity:.45}
.fam-t{border:1px solid var(--line);background:var(--card);width:34px;font-size:16px;line-height:1}
.fam-t:hover{border-color:var(--ink)}
.chips.fin{margin:6px 0 8px 12px;padding-left:10px;border-left:1px solid var(--line)}
.famh{margin:26px 0 10px;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}

/* picture filters, tiles, finish strips (redesign 2026-10-21) */
.l em{font-style:normal;text-transform:none;letter-spacing:.02em;color:var(--mute);float:right;font-size:10px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tiles.t5{grid-template-columns:repeat(5,minmax(0,1fr))}.tiles.t6{grid-template-columns:repeat(6,minmax(0,1fr))}
.tile{text-align:left;display:block;min-width:0}
.tile .tim{display:block;position:relative;aspect-ratio:1;background:var(--mist);overflow:hidden;border:1px solid var(--line)}
.tile .tim img{width:100%;height:100%;object-fit:cover}
.tile .tim b{position:absolute;top:4px;right:4px;min-width:16px;height:16px;border-radius:99px;background:var(--brand);color:var(--onbrand);font-size:9px;font-weight:600;display:grid;place-items:center;padding:0 4px}
.tile .tn{display:block;font-size:9px;letter-spacing:.06em;line-height:1.25;margin-top:5px;color:var(--ink2);height:22px;overflow:hidden}
.tile[aria-pressed=true] .tim{border:2px solid var(--ink)}
.tile:hover .tim{border-color:var(--ink)}
.tile.dim{opacity:.4}
.fin-box{background:var(--soft);border:1px solid var(--line);padding:12px;margin-top:12px}
.fin-box>.l{display:block;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.ftiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ftiles.f5{grid-template-columns:repeat(5,minmax(0,1fr))}
.ftile{text-align:left;min-width:0}
.ftile .fim{display:block;aspect-ratio:1;overflow:hidden;border:1px solid var(--line);position:relative}
.ftile .fim img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ftile .fn{display:block;font-size:9px;letter-spacing:.05em;margin-top:4px;color:var(--ink2);line-height:1.2}
.ftile[aria-pressed=true] .fim{border:2px solid var(--ink)}
.chip i{font-style:normal;opacity:.55;margin-left:4px}
.dots{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.dot{width:24px;height:24px;border-radius:50%;background:var(--c);border:1px solid #0003}
.dot[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:2px}
.dl{display:none}
.dates{margin-top:10px}.dates input{min-width:0;padding:10px 8px;font-size:12px}
.active{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.achip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);padding:4px 10px 4px 4px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:var(--card)}
.achip:not(:has(.ai)):not(:has(.ad)){padding-left:10px}
.achip .ai{width:24px;height:24px;background:var(--mist);overflow:hidden}.achip .ai img{width:100%;height:100%;object-fit:cover}
.achip .ad{width:14px;height:14px;border-radius:50%;margin-left:6px;border:1px solid #0003}
.achip u{text-decoration:none;font-size:14px;color:var(--mute)}
.pcs{display:flex;align-items:center;gap:0;margin-top:8px}
.pcs .av{width:26px;height:26px;border-radius:50%;overflow:hidden;border:2px solid var(--card);background:var(--mist);margin-inline-end:-6px;box-shadow:0 0 0 1px var(--line)}
.pcs .av img{width:100%;height:100%;object-fit:cover}
.pcs .meta{margin-left:14px}
.x{font-size:22px;line-height:1;color:var(--mute);padding:4px 8px}
/* pick products: chooser left, results always in view right */
.pick2{display:grid;grid-template-columns:minmax(0,640px) 1fr;min-height:calc(100vh - 64px)}
.pk-left{padding:32px var(--gut);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.pk-left h1{font-size:clamp(24px,3vw,32px);margin-bottom:10px}
.pk-right{padding:32px var(--gut);background:var(--soft);display:flex;flex-direction:column;gap:6px;min-width:0}
.pk-right h2{font-size:clamp(22px,3vw,32px)}.eyebrow.gold{color:var(--gold)}
.pk-right .sub{color:var(--mute);font-size:12px;margin:6px 0 18px}
.grid.g2{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.tray{margin-top:auto;padding-top:18px}
.tray-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}.tray-h .l{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.tr{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--card);padding:8px 10px 8px 8px;margin-bottom:8px}
.tri{width:44px;height:44px;background:var(--mist);overflow:hidden;flex:none}.tri img{width:100%;height:100%;object-fit:cover}
.trn{flex:1;min-width:0}.trn b{display:block;font-size:11px;letter-spacing:.08em;font-weight:500;text-transform:uppercase}.trn small{font-size:10px;color:var(--mute)}
.askbar{margin-top:auto;border:1px solid var(--ink);background:var(--card);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.askbar b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}.askbar small{font-size:11px;color:var(--mute)}
.pk-right .state{padding:20px 0}
/* request modal */
.sheet.wide{width:min(1120px,100%);padding:0;max-height:94vh}
.m-h{display:flex;justify-content:space-between;align-items:flex-start;padding:24px 32px 16px;border-bottom:1px solid var(--line)}.m-h h2{margin:4px 0 0}
.m-body{display:grid;grid-template-columns:1fr 380px}
.m-left{padding:20px 32px}.m-right{background:var(--soft);border-inline-start:1px solid var(--line);padding:20px 28px;display:flex;flex-direction:column;gap:12px}
.m-right>.l{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.m-right textarea{min-height:88px}
.sumroom{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);padding:8px}.sumroom img{width:76px;height:52px;object-fit:cover}
.sumroom b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}.sumroom small{font-size:10px;color:var(--mute)}
.step2{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:2px 8px;font-size:12px}.step2 button{padding:2px 4px;font-size:14px}.step2 b{font-weight:500}
.m-right .row{margin-top:auto}
@media (max-width:900px){
  .pick2{grid-template-columns:1fr}.pk-left{border-right:0;border-bottom:1px solid var(--line)}
  .m-body{grid-template-columns:1fr}.m-right{border-left:0;border-top:1px solid var(--line)}
  .tiles.t6{grid-template-columns:repeat(4,minmax(0,1fr))}.tiles.t5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ftiles.f5{grid-template-columns:repeat(4,minmax(0,1fr))}.m-left,.m-h{padding-left:18px;padding-right:18px}
}
.sheet.wide{display:flex;flex-direction:column;overflow:hidden;height:min(94vh,860px)}
.m-body{flex:1;min-height:0}.m-left,.m-right{overflow:auto}
@media (max-width:900px){.sheet.wide{overflow:auto;height:auto}.m-left,.m-right{overflow:visible}}
/* bigger picture tiles, more room (2026-10-21) */
.layout{grid-template-columns:400px 1fr}
.side .tiles{gap:14px 12px}
.tile .tn{font-size:10.5px;height:28px;margin-top:6px}
.side .ftiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}
.ftile .fn{font-size:10px;margin-top:5px}
.fin-box{padding:14px}
.tiles.t6{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 12px}
.ftiles.f4{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 10px}
.ftiles.f5{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 10px}
.pick2{grid-template-columns:minmax(0,720px) 1fr}
@media (max-width:1100px){.layout{grid-template-columns:1fr}}
/* sending state */
.m-right{position:relative}
.m-right.busy>*:not(.sending){opacity:.35;pointer-events:none}
.sending{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--veil);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.sending i{width:34px;height:34px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:1000px){.pick2{grid-template-columns:1fr}.pk-left{border-right:0;border-bottom:1px solid var(--line)}.sheet.wide{overflow:auto;height:auto}.m-body{grid-template-columns:1fr}.m-right{border-left:0;border-top:1px solid var(--line)}.m-left,.m-right{overflow:visible}}
@media (max-width:1000px){.pk-left .tiles.t6{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 8px}.pk-left .tile .tn{font-size:9.5px}.pk-left .ftiles.f4{grid-template-columns:repeat(6,minmax(0,1fr))}.m-left .tiles.t6{grid-template-columns:repeat(6,minmax(0,1fr))}.m-left .ftiles.f5{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:1000px){.m-left .tiles.t5{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* tablet and phone redesign (2026-10-21): one filter bar that scrolls sideways, actions pinned to the bottom */
@media (max-width:1100px){
  .layout{grid-template-columns:1fr;min-height:0}
  .toolbar,.mobile-only,.scrim,.side .f-head,.side>.eyebrow{display:none!important}
  .side{position:static;transform:none;width:auto;z-index:auto;overflow:visible;border-right:0;border-bottom:1px solid var(--line);padding:16px var(--gut) 10px}
  .side .group{margin:0 0 12px}
  .side .group>.l{display:block;margin-bottom:6px}
  .side .tiles,.pk-left .tiles{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 4px}
  .side .tiles::-webkit-scrollbar,.pk-left .tiles::-webkit-scrollbar,.ftiles::-webkit-scrollbar,.chips::-webkit-scrollbar,.dots::-webkit-scrollbar{display:none}
  .side .tile,.pk-left .tile,.m-left .tile{flex:none;width:76px}
  .side .tile .tn,.pk-left .tile .tn{font-size:9.5px;height:24px;margin-top:5px}
  .fin-box{padding:10px 12px;margin-top:6px}
  .fin-box>.l{margin-bottom:8px}
  .ftiles,.side .ftiles,.ftiles.f4,.ftiles.f5,.pk-left .ftiles.f4,.m-left .ftiles.f5{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}
  .ftile{flex:none;width:62px}
  .ftile .fn{font-size:9px}
  .side .chips,.side .dots,.m-left .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 2px}
  .side .chip,.side .dot{flex:none}
  .side .dots{gap:10px}
  .dates{display:flex;gap:8px}
  .active{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .achip{flex:none}
  /* pick: the chooser on top, the pieces tray and the ask button pinned to the bottom */
  .pick2{min-height:0}
  .pk-left{padding:16px var(--gut) 12px}
  .pk-right{padding:20px var(--gut) 150px}
  .tray{padding-top:8px}
  .tray-h{margin-bottom:6px}
  .tray .tr{display:inline-flex;margin:0 8px 0 0}
  .tray{display:block;overflow-x:auto;white-space:nowrap}
  .tray-h{display:flex;white-space:normal}
  .askbar{position:fixed;left:0;right:0;bottom:0;z-index:35;margin:0;border:0;border-top:1px solid var(--ink);box-shadow:0 -8px 24px #0002;padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom))}
  .askbar small{display:none}
  .pk-right .btn,.askbar .btn{min-height:44px}
  /* request: a full-screen sheet with the send button pinned */
  .modal{padding:0}
  .sheet.wide{width:100%;height:100dvh;max-height:none;border:0;overflow:auto;display:block}
  .m-h{position:sticky;top:0;background:var(--card);z-index:2;padding:14px var(--gut)}
  .m-left{padding:14px var(--gut)}
  .m-left .tiles{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 4px}
  .m-right{padding:14px var(--gut) 0}
  .m-right .row{position:sticky;bottom:0;background:var(--card);margin:8px calc(var(--gut) * -1) 0;padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--ink);box-shadow:0 -8px 24px #0002}
}
/* phone: the four tabs become a bar at the bottom, where a thumb reaches */
@media (max-width:700px){
  .top{flex-wrap:nowrap;padding-bottom:0;min-height:52px}
  .brand{padding:0;width:auto}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:50;margin:0;width:auto;padding:0 0 env(safe-area-inset-bottom);background:var(--brand);border-top:1px solid #2a2a2a;gap:0;justify-content:stretch;overflow:visible}
  .tabs a{flex:1;justify-content:center;padding:0;min-height:60px;font-size:10px;letter-spacing:.12em}
  .tabs a.on::after{left:0;right:0;bottom:auto;top:-1px}
  main{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .askbar{bottom:calc(60px + env(safe-area-inset-bottom));padding-bottom:12px}
  .pk-right{padding-bottom:170px}
  .rec-note{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(80px + env(safe-area-inset-bottom))}
  .sheet.wide{z-index:60}
}
@media (max-width:1100px){
  .side .group{padding:0;border-bottom:0;margin:0 0 10px}
  .side .group>.l{margin-bottom:5px;font-size:9px}
  .side .chip{padding:8px 12px}
  .side{padding-bottom:6px}
}
@media (max-width:1100px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .pick2{grid-template-columns:minmax(0,1fr)}
  .layout>*,.pick2>*{min-width:0}
  main{overflow-x:hidden}
}
@media (max-width:1100px){
  .modal{grid-template-columns:minmax(0,1fr)}
  .m-body{grid-template-columns:minmax(0,1fr)}
  .m-left,.m-right{min-width:0}
}
@media (max-width:1100px){
  .m-body{min-height:calc(100dvh - 76px)}
  .m-right{flex:1}
  .m-right .row{margin-top:auto}
}

/* ================================================================= homepage
   One editorial first screen: a hero built from the newest room, then three
   rows that each set a filter and hand over to the Looks grid. Sizes are all
   clamp()ed and the rows are auto-fill, so the same markup holds from a 320px
   phone to a 2560px monitor; --wide stops the lines running too long there. */
.home{--wide:1680px}
.hero{position:relative;overflow:hidden;background:var(--mist);min-height:clamp(340px,56vh,620px);display:grid;isolation:isolate}
.hero{animation:heroIn 1.1s ease both}
/* the rooms crossfade, each drifting slowly in, so the first screen is never a flat crop */
.hero .hero-sl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;z-index:-2;opacity:0;transition:opacity 1.5s ease}
.hero .hero-sl.on{opacity:1;animation:kenburns 11s linear both}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,#00000040 0%,#0000 30%,#0000008c 62%,#000000d9 100%),
             linear-gradient(to right,#00000073 0%,#0000 46%)}
[dir=rtl] .hero::after{background:linear-gradient(180deg,#00000040 0%,#0000 30%,#0000008c 62%,#000000d9 100%),
             linear-gradient(to left,#00000073 0%,#0000 46%)}
.hero-dots{position:absolute;z-index:1;bottom:14px;inset-inline-end:var(--gut);display:flex;gap:7px}
.hero-dots i{width:22px;height:2px;background:#ffffff4d;transition:background .4s}
.hero-dots i.on{background:var(--gold)}
.hero-in{position:relative;align-self:end;width:100%;max-width:var(--wide);margin:0 auto;color:#fff;padding:clamp(22px,4.4vw,56px) var(--gut)}
.hero-in .eyebrow{color:#ffffffcc}
.hero-in h1{font-weight:300;letter-spacing:.01em;font-size:clamp(26px,5.2vw,60px);line-height:1.05;margin:10px 0 12px;text-wrap:balance}
.hero-in p{color:#ffffffd8;font-size:clamp(13px,1.3vw,16px);max-width:52ch;margin-bottom:clamp(16px,2.2vw,26px)}
.hero-in .row{display:flex;gap:10px;flex-wrap:wrap}
.hero .btn{background:#fff;color:#0b0b0b;border-color:#fff}
.hero .btn:hover{background:#efeeea;border-color:#efeeea}
.hero .btn.line{background:#ffffff1f;color:#fff;border-color:#ffffff6b;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero .btn.line:hover{background:#ffffff33;border-color:#fff}

.sec{width:100%;max-width:var(--wide);margin:0 auto;padding:clamp(26px,3.6vw,48px) var(--gut) 0}
.sec:last-child{padding-bottom:clamp(40px,6vw,88px)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:11px;margin-bottom:clamp(13px,1.8vw,20px)}
.sec-h h2{font-weight:400;font-size:clamp(10px,1vw,12px);letter-spacing:.2em;text-transform:uppercase}
.sec-h .link{flex:none}
/* a row that scrolls sideways on any width, with the cards snapping */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(224px,28vw,320px);gap:clamp(12px,1.5vw,20px);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:8px}
.rail>*{scroll-snap-align:start;min-width:0}
/* a row that fills the width instead, so a monitor is not mostly empty */
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(124px,15vw,184px),1fr));gap:clamp(11px,1.4vw,20px)}
.htile{display:flex;flex-direction:column;width:100%;text-align:start;border:1px solid var(--line);background:var(--card);overflow:hidden;transition:border-color .2s}
.htile:hover{border-color:var(--ink)}
.htile .him{display:block;flex:none;aspect-ratio:4/3;background:var(--mist);overflow:hidden}
.htile .him img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.25,1)}
.htile:hover .him img{transform:scale(1.055)}
.htile .hn{display:flex;flex:none;align-items:baseline;justify-content:space-between;gap:8px;padding:9px 11px;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;line-height:1.3}
.htile .hn i{font-style:normal;color:var(--mute);flex:none}

@keyframes heroIn{from{opacity:0}to{opacity:1}}
@keyframes kenburns{from{transform:scale(1.015)}to{transform:scale(1.09)}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.home>*{animation:rise .62s cubic-bezier(.2,.7,.25,1) both}
.home>:nth-child(2){animation-delay:.10s}
.home>:nth-child(3){animation-delay:.19s}
.home>:nth-child(4){animation-delay:.27s}
.home>:nth-child(5){animation-delay:.34s}
.hero-in>*{animation:rise .7s cubic-bezier(.2,.7,.25,1) both}
.hero-in>:nth-child(1){animation-delay:.16s}
.hero-in>:nth-child(2){animation-delay:.24s}
.hero-in>:nth-child(3){animation-delay:.32s}
.hero-in>:nth-child(4){animation-delay:.40s}

/* ---------------------------------------------------------- first paint
   In the markup, so it shows before app.js has parsed; app.js adds .gone. */
.boot{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:var(--paper);transition:opacity .4s ease,visibility .4s}
.boot.gone{opacity:0;visibility:hidden}
.boot .bw{display:grid;justify-items:center;gap:16px}
.spinner{width:40px;height:40px;border:2px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
.boot b{font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

/* ------------------------------------------------- header tools (theme, language) */
.tools{display:flex;align-items:center;gap:6px;flex:none;margin-inline-start:14px}
.icobtn{width:34px;height:34px;display:grid;place-items:center;border:1px solid #ffffff30;color:#fff;font-size:14px;line-height:1}
.icobtn:hover{background:#ffffff1a;border-color:#ffffff6b}
.lang{appearance:none;-webkit-appearance:none;background:#0000;border:1px solid #ffffff30;color:#fff;font-size:10px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;padding:0 8px;height:34px}
.lang:hover{border-color:#ffffff6b}
.lang option{color:#0b0b0b;background:#fff}

/* ------------------------------------------------------------------ right to left */
[dir=rtl] .card,[dir=rtl] .pcard,[dir=rtl] .htile{text-align:right}
[dir=rtl] .tag{left:auto;right:10px}
[dir=rtl] .save-dot,[dir=rtl] .pcard .ck{right:auto;left:10px}
[dir=rtl] .tile .tim b{right:auto;left:4px}
[dir=rtl] .nav.prev{left:auto;right:0}
[dir=rtl] .nav.next{right:auto;left:0}
[dir=rtl] .nav{transform:translateY(-50%) scaleX(-1)}
[dir=rtl] .pcs .meta{margin-left:0;margin-right:14px}
[dir=rtl] .toast{transform:translateX(50%)}
[dir=rtl] .loadline i{animation-direction:reverse}

/* -------------------------------------------------- homepage at every width */
@media (max-width:900px){
  .sec-h{flex-wrap:wrap;gap:8px}
}
@media (max-width:700px){
  /* the tab bar is pinned to the bottom below 700px, so leave room under the page */
  .home>:last-child{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .hero{min-height:clamp(300px,64vh,520px)}
  .hero-in .row .btn{flex:1 1 auto;min-width:0}
  .rail{grid-auto-columns:min(76vw,300px);gap:12px;scroll-snap-type:x mandatory}
}
@media (max-width:420px){
  .hgrid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:9px}
  .htile .hn{padding:8px 9px;font-size:9px;letter-spacing:.1em}
  .tools{margin-inline-start:8px;gap:4px}
  .lang{letter-spacing:.06em;padding:0 5px}
}
/* a tall, narrow hero wastes the screen on a landscape phone */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:88vh}
}

/* ---------------------------------------------- the header, at every width
   It has to hold the brand, the tabs and the tools on ONE row from 320px up.
   Below 700px the tabs move to the bottom bar, so the tools take the right end. */
@media (max-width:1100px){
  .top{gap:16px}
  .tabs a{padding:22px 10px}
}
@media (max-width:860px){
  .top{gap:12px}
  .tabs a{padding:20px 8px;font-size:10px;letter-spacing:.1em}
  .product{letter-spacing:.2em;font-size:11px}
  .tools{margin-inline-start:8px}
}
@media (max-width:700px){
  .tools{margin-inline-start:auto}         /* the tabs are out of flow down here */
  .logo{height:26px}
}
@media (max-width:430px){
  .product,.rule{display:none}             /* the logo alone carries the brand on a phone */
  .brand{gap:0;min-width:0}
  .logo{height:24px}
}

/* Between 700 and 900 the header deliberately wraps: brand on one row, tabs on the
   next. The tools belong on the brand's row, not a third one. */
@media (min-width:701px) and (max-width:900px){
  .brand{width:auto;flex:1 1 auto;min-width:0}
  .tools{margin-inline-start:auto;align-self:center}
  .tabs{order:3;flex:1 0 100%}
}