/* Miska storefront — the original design, in two themes.
 *
 * The editorial rebuild (Bodoni display type, hairline rules, square buttons, asymmetric
 * numbered sections) was rejected: "the previous design was far better, the previous font was
 * also far better". So this is the first design back — Tenor Sans and Plus Jakarta Sans,
 * rounded cards, centred section heads, pill buttons, the trust strip — with the one thing
 * that was worth keeping from the rebuild: a real dark theme.
 *
 * DARK IS THE DEFAULT. Light is a full, maintained theme, not an afterthought; every token
 * below is defined in both, and nothing anywhere should hard-code a colour.
 *
 * The one rule that keeps this honest: EVERY COLOUR MEANS SOMETHING. Gold is the brand and
 * the primary action. Green is settled. Red is "you must do something". Nothing is coloured
 * for decoration.
 */

/* ── dark: the default ─────────────────────────────────────────────────── */
:root,
:root[data-theme="dark"]{
  --bg:#0F0D0C;          /* warm near-black. Never #000 — pure black kills the gold */
  --bg2:#17140F;
  --card:#1A1613;
  --surface:#1A1613;
  --line:#2C2621;
  --line2:#3C342C;
  --ink:#F5EFE6;         /* warm ivory, not white */
  --ink2:#C6BCAF;
  --muted:#8E8477;
  --gold:#C9A24A;        /* lifted from the light value, which goes muddy on black */
  --gold-l:#E8CE93;
  --gold-d:#A98634;
  --gold-t:#DCBB6E;      /* gold as TEXT on dark */
  --gold-s:rgba(201,162,74,.14);
  --green:#3E9A72; --green-t:#6FC79B; --green-s:rgba(111,199,155,.14);
  --red:#C9553F;   --red-t:#E89683;   --red-s:rgba(232,150,131,.14);
  --amber-t:#E0BC7A; --amber-s:rgba(224,188,122,.13);
  --blush:#C9A79B; --blush-s:rgba(201,167,155,.1);
  --img-bg:#211C18;
  --r:16px;
  --sh:0 1px 2px rgba(0,0,0,.4), 0 8px 26px rgba(0,0,0,.35);
  color-scheme:dark;
}

/* ── light: the original ivory scheme ──────────────────────────────────── */
:root[data-theme="light"]{
  --bg:#FBF8F4;
  --bg2:#F5F0E9;
  --card:#FFFFFF;
  --surface:#FFFFFF;
  --line:#EAE2D6;
  --line2:#DCD1C0;
  --ink:#2A2420;
  --ink2:#5A5048;
  --muted:#857A6F;
  --gold:#B8903E;
  --gold-l:#D4B06A;
  --gold-d:#9A7730;
  --gold-t:#8A6B28;
  --gold-s:#F8F1E2;
  --green:#2E7D5B; --green-t:#246349; --green-s:#E7F3EC;
  --red:#B3402F;   --red-t:#953426;   --red-s:#FBEBE7;
  --amber-t:#8A5A14; --amber-s:#FBF0D8;
  --blush:#E8D5CE; --blush-s:#FBF1ED;
  --img-bg:#F0EAE0;
  --r:16px;
  --sh:0 1px 2px rgba(42,36,32,.04), 0 8px 26px rgba(42,36,32,.055);
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0;background:var(--bg);color:var(--ink);
  font:500 15.5px/1.65 'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  overflow-x:hidden;-webkit-tap-highlight-color:transparent;
  transition:background-color .3s ease,color .3s ease}
@media (prefers-reduced-motion:reduce){ body{transition:none} }
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img{max-width:100%}
::selection{background:var(--gold);color:#17120B}

.wrap{max-width:1140px;margin:0 auto;padding:0 18px}
@media (min-width:860px){ .wrap{padding:0 28px} }

/* ── type. Tenor Sans speaks; Plus Jakarta Sans works. ─────────────────── */
.tn{font-family:'Tenor Sans',Georgia,serif;font-weight:400}
.wm{font-family:'Tenor Sans',Georgia,serif;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;line-height:1}
.eyebrow{font-family:'Tenor Sans',Georgia,serif;font-size:10.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-t);margin:0 0 12px;display:block}
h1,h2,h3{font-family:'Tenor Sans',Georgia,serif;font-weight:400;letter-spacing:.005em;
  line-height:1.18;margin:0}
h1{font-size:clamp(32px,6.2vw,56px)}
h2{font-size:clamp(25px,3.6vw,36px)}
h3{font-size:19px}
p{margin:0 0 14px}
.lede{color:var(--ink2);font-size:16px;line-height:1.7;max-width:60ch}
.muted{color:var(--muted)}
.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* ── header ────────────────────────────────────────────────────────────── */
header.top{position:sticky;top:0;z-index:40;background:var(--bg);
  border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:14px;min-height:66px}
.brandlink{display:flex;align-items:center;gap:11px;flex:none}
.brandlink .wm{font-size:21px}
@media (max-width:560px){ .brandlink .wm{font-size:18px;letter-spacing:.18em} }
nav.main{display:none;gap:26px;margin-left:16px}
@media (min-width:900px){ nav.main{display:flex} }
nav.main a{font-family:'Tenor Sans',Georgia,serif;font-size:13px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink2);padding:6px 0;border-bottom:1px solid transparent}
nav.main a:hover,nav.main a.on{color:var(--ink);border-bottom-color:var(--gold)}
.hacts{margin-left:auto;display:flex;align-items:center;gap:6px}
.iconbtn{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;
  border-radius:12px;border:1px solid transparent;background:none;cursor:pointer;color:var(--ink2)}
.iconbtn:hover{background:var(--bg2);color:var(--ink)}
.iconbtn .n{position:absolute;top:3px;right:2px;min-width:18px;height:18px;line-height:18px;
  border-radius:9px;background:var(--gold);color:#17120B;font-size:10.5px;font-weight:800;
  padding:0 5px;border:2px solid var(--bg)}
.iconbtn .n[hidden]{display:none}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;
  padding:13px 26px;border-radius:999px;border:1px solid var(--line2);background:var(--card);
  font-size:14.5px;font-weight:700;cursor:pointer;color:var(--ink);letter-spacing:.01em}
.btn:hover{border-color:var(--muted)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.pri{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.pri:hover{opacity:.88}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#17120B}
.btn.gold:hover{background:var(--gold-d);border-color:var(--gold-d)}
.btn.ghost{background:none;border-color:var(--line2)}
.btn.wide{width:100%}
.btn.sm{min-height:40px;padding:9px 17px;font-size:13.5px}
.btn .i{width:18px;height:18px}

/* ── product card ──────────────────────────────────────────────────────── */
.grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:680px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} }
@media (min-width:980px){ .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px} }
.pc{display:flex;flex-direction:column;background:none;border:0;padding:0;text-align:left;
  cursor:pointer;color:inherit;font:inherit}
.pc .ph{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;
  background:var(--img-bg);display:grid;place-items:center}
.pc .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.pc:hover .ph img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){ .pc .ph img,.pc:hover .ph img{transition:none;transform:none} }
.pc .off{position:absolute;top:10px;left:10px;background:var(--ink);color:var(--bg);font-size:10px;
  font-weight:800;letter-spacing:.05em;padding:4px 9px;border-radius:999px}
.pc .gone{position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 76%,transparent);
  display:grid;place-items:center;font-family:'Tenor Sans',serif;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink2)}
.pc .b{padding:11px 2px 0}
.pc .b b{display:block;font-size:14.5px;font-weight:600;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc .b small{display:block;font-size:12px;color:var(--muted);margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pc .pr{display:flex;align-items:baseline;gap:8px;margin-top:7px;font-variant-numeric:tabular-nums}
.pc .pr b{font-size:15.5px;font-weight:800}
.pc .pr s{font-size:12.5px;color:var(--muted);font-weight:600}

/* ── trust strip ───────────────────────────────────────────────────────── */
.trust{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){ .trust{grid-template-columns:repeat(4,1fr)} }
.trust div{background:var(--bg);padding:22px 18px;text-align:center}
.trust .i{width:23px;height:23px;color:var(--gold);margin:0 auto 9px;display:block;stroke-width:1.4}
.trust b{display:block;font-family:'Tenor Sans',serif;font-size:14px;letter-spacing:.04em;
  margin-bottom:3px}
.trust small{display:block;font-size:11.5px;color:var(--muted);line-height:1.5}

/* ── sections ──────────────────────────────────────────────────────────── */
/* Anchor links (#care, #craft, …) land under the sticky header without this, which clips
   the section heading clean off — exactly what it looks like, a broken page. */
[id]{scroll-margin-top:84px}
section{padding:62px 0}
@media (max-width:700px){ section{padding:46px 0} }
.sechead{text-align:center;max-width:62ch;margin:0 auto 34px}
.sechead p{color:var(--ink2);margin:12px 0 0}
.rule{width:44px;height:1px;background:var(--gold);margin:16px auto 0}

/* Reveal on scroll.
   The state class is `shown`, NOT `in`. It was `in` once, which silently collided with the
   `.in` form-field class above — so every section that scrolled into view picked up a white
   background, a border, a 12px radius and input padding, and headings appeared to sit in
   stray boxes. Do not name a state class after a component class. */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.rv.shown{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} }

/* ── forms ─────────────────────────────────────────────────────────────── */
label.f{display:block;margin:0 0 15px}
label.f > span{display:block;font-size:12.5px;font-weight:700;margin:0 0 7px;color:var(--ink2)}
label.f > span em{font-style:normal;color:var(--muted);font-weight:600}
.in{width:100%;min-height:50px;padding:13px 15px;border:1px solid var(--line2);border-radius:12px;
  background:var(--card);font-size:16px;font-weight:600;outline:0;color:var(--ink)}
.in:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-s)}
.in::placeholder{color:var(--muted)}
textarea.in{resize:vertical;min-height:88px;font-weight:500;line-height:1.55}
label.f.bad .in{border-color:var(--red);background:var(--red-s)}
.bad-note{display:block;color:var(--red-t);font-size:12.5px;font-weight:700;margin-top:6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){ .two{grid-template-columns:1fr} }

/* ── misc ──────────────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:18px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:999px;
  background:var(--bg2);color:var(--muted)}
.pill.placed{background:var(--gold-s);color:var(--gold-t)}
.pill.confirmed,.pill.paid{background:var(--gold-s);color:var(--gold-t)}
.pill.packed,.pill.dispatched{background:var(--blush-s);color:var(--blush)}
.pill.delivered{background:var(--green-s);color:var(--green-t)}
.pill.cancelled,.pill.returned{background:var(--red-s);color:var(--red-t)}
.warn{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:12px;
  background:var(--amber-s);color:var(--amber-t);font-size:13.5px;font-weight:600;
  line-height:1.55;margin:0 0 16px}
.warn .i{width:18px;height:18px;flex:none;margin-top:2px}
.warn.bad{background:var(--red-s);color:var(--red-t)}
.warn.good{background:var(--green-s);color:var(--green-t)}
.state{text-align:center;padding:60px 20px;color:var(--muted)}
.state .i{width:30px;height:30px;color:var(--line2);stroke-width:1.2}
.state b{display:block;font-family:'Tenor Sans',serif;font-size:18px;color:var(--ink);margin:14px 0 6px}
.state small{display:block;font-size:13.5px;line-height:1.6;max-width:36ch;margin:0 auto}
.spin{display:inline-block;width:17px;height:17px;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spin{animation-duration:2s} }

#toast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,16px);z-index:90;background:var(--ink);color:var(--bg);font-size:14px;
  font-weight:600;padding:13px 20px;border-radius:999px;max-width:calc(100vw - 32px);
  text-align:center;opacity:0;transition:opacity .18s,transform .18s;pointer-events:none;
  box-shadow:var(--sh)}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ── footer. Always the dark ground, in both themes — it is the one place the
      brand gets to be itself regardless of what the reader chose. ─────────── */
footer.site{background:#141110;color:#CFC6BA;padding:52px 0 32px;margin-top:20px}
footer.site .cols{display:grid;gap:30px;grid-template-columns:1fr}
@media (min-width:760px){ footer.site .cols{grid-template-columns:2fr 1fr 1fr 1.4fr} }
footer.site h4{font-family:'Tenor Sans',serif;font-weight:400;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:#8C8178;margin:0 0 14px}
footer.site a{display:block;padding:5px 0;font-size:14px;color:#CFC6BA}
footer.site a:hover{color:#F7F2EA}
footer.site .wm{font-size:22px;color:#F7F2EA}
footer.site .muted{color:#8C8178}
footer.site .fine{border-top:1px solid #2A2523;margin-top:34px;padding-top:20px;font-size:12px;
  color:#8C8178;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
footer.site .fine span{margin-left:auto}