/* Olivaceous vendor watch — editorial light.
   Deliberately not the ibuiltthis.ai dark/gold house style: this is a buying
   tool for a fashion client, and clothing photography reads best on paper.

   Font sizes are whole pixels throughout. Fractional sizes (13.5px etc.) land
   on half device pixels at fractional DPR and render soft. */
:root{
  --paper:#FAF8F5;
  --surface:#FFFFFF;
  --ink:#14120F;
  --muted:#6B655C;
  --line:#E6E1D8;
  --accent:#8C5A3C;
  --radius:3px;
  --topbar:92px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.55;
}
button{font-family:inherit;cursor:pointer}
h1,h2,h3{margin:0}

.eyebrow{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px;font-weight:500;
}
.hero{
  font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:34px;line-height:1.15;letter-spacing:-.01em;
}

/* ---------- top bar: centred icon nav ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:var(--paper);border-bottom:1px solid var(--line);
  padding:14px 20px 0;text-align:center;
}
.vendor{
  font-family:'Instrument Serif',Georgia,serif;font-size:19px;
  letter-spacing:.02em;margin-bottom:10px;
}
.nav{display:flex;justify-content:center;gap:34px}
.nav-item{
  background:none;border:0;padding:0 0 12px;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:12px;font-weight:500;position:relative;
}
.nav-item svg{
  width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.nav-item.active{color:var(--ink)}
.nav-item.active::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  bottom:-1px;width:22px;height:2px;background:var(--ink);
}
.nav-item.active svg{stroke-width:1.9}

main{padding-top:var(--topbar)}
.view{display:none;padding:32px 20px 80px;max-width:660px;margin:0 auto}
.view.active{display:block}

/* ---------- feed: one post per change ---------- */
.feed{display:flex;flex-direction:column;gap:64px}
.post-head{margin-bottom:20px}
.post time{display:block;color:var(--muted);font-size:13px;margin-top:8px}
.post .sub{color:var(--muted);font-size:15px;margin:8px 0 0}

/* Headline left, price delta right. Wraps under on narrow screens. */
.head-row{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap}
.head-row .hero{flex:1;min-width:220px}
.delta{text-align:right;margin-left:auto;line-height:1.15}
.delta .now{font-size:30px;font-weight:600;letter-spacing:-.01em;display:block}
.delta .was{font-size:15px;color:var(--muted);text-decoration:line-through;display:block;margin-top:2px}
.delta .move{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;display:block;margin-top:4px}
.delta.up .now,.delta.up .move{color:#B3402A}
.delta.down .now,.delta.down .move{color:#2F7D4F}

/* Carousel: one full-width image per product, snapping. */
.shots{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;margin:0 -20px;padding:0 20px;
}
.shots::-webkit-scrollbar{display:none;width:0;height:0}
/* Three across, with the next one peeking so the row reads as scrollable.
   Single-product posts get .shots.one below and stay full width. */
.shot{flex:0 0 31.5%;scroll-snap-align:start;cursor:pointer}
.shots.one .shot{flex:0 0 100%}
.shot img{
  width:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  background:var(--line);border-radius:var(--radius);
}
.shot .caption{display:flex;flex-direction:column;gap:2px;padding-top:12px}
.shot .caption b{font-weight:500;font-size:16px}
.shot .caption span{color:var(--muted);font-size:14px}

.dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--muted)}

/* Action row */
.actions{display:flex;gap:10px;margin-top:16px}
.action{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:1px solid var(--line);border-radius:22px;
  padding:8px 16px;font-size:14px;color:var(--ink);
}
.action svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.action:hover{border-color:var(--ink)}
.action.saved{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.action.saved svg{fill:currentColor}

/* ---------- ask ---------- */
#chat.view{display:none;flex-direction:column;height:calc(100vh - var(--topbar));padding-bottom:0}
#chat.view.active{display:flex}
.messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding-bottom:16px}
.msg{max-width:88%;font-size:15px}
.msg.user{
  align-self:flex-end;background:var(--ink);color:var(--paper);
  padding:10px 15px;border-radius:16px 16px 3px 16px;
}
.msg.bot{align-self:flex-start;color:var(--ink)}
.msg.bot p{margin:0 0 10px}
.msg.bot p:last-child{margin-bottom:0}
.msg.bot strong{font-weight:600}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{
  background:var(--surface);border:1px solid var(--line);color:var(--muted);
  padding:7px 13px;border-radius:20px;font-size:13px;
}
.chip:hover{border-color:var(--ink);color:var(--ink)}

.typing{display:flex;gap:4px;padding:4px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1.4s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

.composer{
  display:flex;gap:9px;align-items:center;padding:12px 0 18px;
  border-top:1px solid var(--line);background:var(--paper);
}
.composer input{
  flex:1;background:var(--surface);border:1px solid var(--line);color:var(--ink);
  padding:12px 16px;border-radius:24px;font-size:15px;outline:none;
}
.composer input:focus{border-color:var(--ink)}
.mic,.send{
  flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);display:grid;place-items:center;
}
.mic svg,.send svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.send{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.send svg{fill:currentColor;stroke:none}
.mic.recording{background:var(--accent);color:#fff;border-color:var(--accent);animation:pulse 1.3s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

.voice-hint{
  position:fixed;left:50%;transform:translateX(-50%);bottom:88px;
  background:var(--ink);color:var(--paper);border-radius:20px;
  padding:9px 16px;font-size:14px;display:flex;align-items:center;gap:8px;z-index:60;
}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1s infinite}

/* ---------- catalog ---------- */
.filters{display:flex;gap:10px;margin-bottom:24px}
.filters input,.filters select{
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  padding:10px 14px;border-radius:var(--radius);font-size:15px;outline:none;font-family:inherit;
}
.filters input{flex:1}
.filters select{flex:none}
.filters input:focus,.filters select:focus{border-color:var(--ink)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:28px}
.card{cursor:pointer}
.card .ph{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--line)}
.card img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform .5s}
.card:hover img{transform:scale(1.03)}
.card h4{font-size:15px;font-weight:500;margin:10px 0 2px;font-family:Inter,sans-serif}
.card .price{font-size:15px;color:var(--ink)}
.card .sub{font-size:13px;color:var(--muted)}
.flag{
  position:absolute;top:10px;left:10px;font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:2px;
  background:var(--surface);color:var(--ink);
}
.flag.oos{background:rgba(20,18,15,.72);color:#fff}

/* ---------- saved ---------- */
#savedHead{margin-bottom:28px}
.collections{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:26px}
.collection{cursor:pointer}
.collection .ph{
  aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--line);
  display:grid;place-items:center;
}
.collection img{width:100%;height:100%;object-fit:cover;display:block}
.collection h4{font-size:16px;font-weight:500;margin:10px 0 2px;font-family:Inter,sans-serif}
.collection .sub{font-size:13px;color:var(--muted)}
.back{
  background:none;border:0;color:var(--muted);font-size:14px;padding:0;
  margin-bottom:18px;display:inline-flex;align-items:center;gap:6px;
}
.back:hover{color:var(--ink)}

/* ---------- save panel ---------- */
.panel{position:fixed;inset:0;z-index:110;background:rgba(20,18,15,.4);
  display:grid;place-items:end center;padding:0}
.panel[hidden]{display:none !important}
.panel-inner{
  background:var(--surface);width:100%;max-width:520px;
  border-radius:14px 14px 0 0;padding:26px 24px 30px;position:relative;
  max-height:80vh;overflow-y:auto;
}
.panel-close{
  position:absolute;top:16px;right:18px;background:none;border:0;
  font-size:24px;line-height:1;color:var(--muted);
}
.panel-title{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:24px;margin-bottom:20px}
.options{display:flex;flex-direction:column;gap:2px;margin-bottom:18px}
.option{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:none;border:0;padding:12px 4px;font-size:16px;color:var(--ink);
  border-bottom:1px solid var(--line);
}
.option:hover{color:var(--accent)}
.option .count{margin-left:auto;color:var(--muted);font-size:14px}
.option.in{color:var(--accent)}
.new-collection{display:flex;gap:8px}
.new-collection input{
  flex:1;border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 14px;font-size:15px;font-family:inherit;outline:none;color:var(--ink);
}
.new-collection input:focus{border-color:var(--ink)}
.new-collection button{
  background:var(--ink);color:var(--paper);border:0;border-radius:var(--radius);
  padding:11px 20px;font-size:15px;font-weight:500;
}

/* ---------- product sheet ---------- */
.sheet{
  position:fixed;inset:0;z-index:100;background:rgba(20,18,15,.55);
  display:grid;place-items:center;padding:20px;
}
/* AFTER .sheet so source order wins, and !important so nothing resurrects it.
   `display:grid` above silently beat the browser's [hidden]{display:none},
   which left this overlay mounted over every page and blurred the whole app. */
.sheet[hidden]{display:none !important}
.sheet-inner{
  background:var(--surface);border-radius:6px;
  max-width:820px;width:100%;max-height:88vh;overflow-y:auto;position:relative;
}
.close{
  position:absolute;top:14px;right:16px;z-index:2;width:34px;height:34px;
  border-radius:50%;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);font-size:22px;line-height:1;
}
.sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:26px}
.sheet-shots{display:flex;flex-direction:column;gap:10px}
.sheet-shots img{width:100%;border-radius:var(--radius);display:block}
.sheet h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:26px;margin-bottom:6px}
.sheet .price-lg{font-size:20px;margin:10px 0 2px}
.sheet .basis{font-size:13px;color:var(--muted);margin-bottom:18px}
.spec{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:15px}
.spec b{color:var(--muted);font-weight:400;min-width:84px;flex:none}
.buy{
  display:block;text-align:center;background:var(--ink);color:var(--paper);
  padding:13px;border-radius:var(--radius);font-weight:500;text-decoration:none;margin-top:20px;
}

/* ---------- misc ---------- */
.empty{text-align:center;color:var(--muted);padding:70px 20px;font-size:15px}
.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:32px;z-index:200;
  background:var(--ink);color:var(--paper);padding:12px 20px;border-radius:24px;
  font-size:14px;box-shadow:0 4px 20px rgba(20,18,15,.18);
}
.toast[hidden]{display:none !important}

@media(max-width:620px){
  .hero{font-size:27px}
  .sheet-grid{grid-template-columns:1fr}
  .nav{gap:24px}
  .view{padding:26px 18px 70px}
  .shots{margin:0 -18px;padding:0 18px}
  .shot{flex:0 0 46%}
  .delta{text-align:left;margin-left:0}
  .delta .now{font-size:25px}
  .filters{flex-wrap:wrap}
  .grid,.collections{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px}
}