/* Halden. Editorial, quiet, a lot of white — the way an independent clothing
   label actually looks. Deliberately a third world again: not the hotel's warm
   green, not the pizzeria's char, and not the agent panel's bone-and-ink. */

:root {
  --paper:  #FBFAF8;
  --paper-2:#F2EFE9;
  --card:   #FFFFFF;
  --ink:    #141311;
  --body:   #46433E;
  --muted:  #6E6A63;
  --faint:  #9A958C;
  --line:   #E4DFD6;
  --line-2: #D3CCC0;
  --accent: #7A2E1E;
  --sale:   #A3341C;
  --good:   #3D6B4A;

  --disp: "Instrument Serif", Georgia, "Times New Roman", serif;
  --site-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--body);
  font-family: var(--site-sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
h1,h2,h3,p,dl,dd,ol,ul,figure { margin: 0; }
ol,ul { padding: 0; list-style: none; }
img,svg { display: block; max-width: 100%; }
a { color: var(--accent); }
button,input,select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 28px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.eyebrow {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint);
}
:where(a,button,input,select,summary):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.linkbtn {
  background:none; border:0; padding:0; cursor:pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.linkbtn:hover { color: var(--ink); }

/* --- demo banner --- */
.demo-banner {
  margin:0; padding: 8px 20px; text-align:center;
  background: var(--ink); color: #E9E5DE; font-size: 12.5px;
}
.demo-banner strong { color: #E5B9A6; }
.demo-banner a { color: #E9E5DE; text-underline-offset: 3px; }

/* --- header --- */
.head { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: 1px solid var(--line); }
.head__row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  max-width: 1220px; margin: 0 auto; padding: 16px 28px;
}
.brand {
  font-family: var(--disp); font-size: 27px; letter-spacing: 0.22em;
  color: var(--ink); text-decoration: none; line-height: 1;
}
.gender { display: flex; gap: 4px; justify-self: center; }
.gender button {
  border: 0; background: none; cursor: pointer; padding: 7px 15px; border-radius: 20px;
  font-size: 14px; color: var(--muted);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.gender button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.head__acts { display: flex; align-items: center; gap: 10px; justify-self: end; }
.searchbox input {
  width: 168px; background: var(--paper-2); border: 1px solid transparent; border-radius: 20px;
  padding: 8px 14px; font-size: 14px; color: var(--ink);
  transition: width 0.3s var(--ease), border-color 0.18s var(--ease);
}
.searchbox input:focus { width: 220px; border-color: var(--line-2); outline: none; background: var(--card); }
.iconbtn {
  border: 1px solid var(--line-2); background: none; cursor: pointer;
  padding: 8px 15px; border-radius: 20px; font-size: 14px; color: var(--ink);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.iconbtn:hover { background: var(--paper-2); }
.iconbtn--bag { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.iconbtn--bag:hover { background: #2A2723; }
.count {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px;
  margin-left: 5px; border-radius: 20px; background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
}
.cats {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  max-width: 1220px; margin: 0 auto; padding: 0 28px 12px;
}
.cats::-webkit-scrollbar { display: none; }
.cats button {
  flex: none; border: 0; background: none; cursor: pointer; padding: 6px 12px;
  font-size: 13.5px; color: var(--muted); white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.cats button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }

/* --- hero --- */
.hero { max-width: 1220px; margin: 56px auto 44px; padding: 0 28px; }
.hero h1 {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(40px, 6.2vw, 76px); line-height: 1.02; letter-spacing: -0.015em;
  color: var(--ink); margin: 14px 0 18px; max-width: 16ch;
}
.hero h1 em { font-style: italic; }
.lede { font-size: 17px; max-width: 50ch; color: var(--muted); text-wrap: pretty; }

/* --- filters --- */
.filters {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 0 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.filters__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.filters__row--end { justify-content: flex-end; gap: 22px; }
.filters__label {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); flex: none;
}
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chk { display: inline-flex; cursor: pointer; }
.chk input { position: absolute; opacity: 0; pointer-events: none; }
.chk span {
  display: inline-block; min-width: 42px; text-align: center;
  padding: 6px 11px; border: 1px solid var(--line-2); border-radius: 3px;
  font-family: var(--mono); font-size: 11.5px; color: var(--body); background: var(--card);
  transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.chk input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chk input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.sortby { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.sortby select { border: 1px solid var(--line-2); background: var(--card); border-radius: 3px; padding: 6px 9px; font-size: 13.5px; }

.grid-summary {
  margin: 22px 0 20px; font-size: 14px; color: var(--muted);
  font-family: var(--mono); letter-spacing: 0.01em;
}
.grid-summary strong { color: var(--ink); }
.grid-summary[data-tone="bad"] { color: var(--sale); }

/* --- product grid --- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 30px 22px; }
.prod { display: flex; flex-direction: column; }
.prod--gone { opacity: 0.55; }
.plate { background: var(--paper-2); border-radius: 3px; overflow: hidden; aspect-ratio: 10 / 9; }
.plate svg { width: 100%; height: 100%; }
.prod__b { padding: 12px 2px 0; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.prod__tags { display: flex; gap: 5px; min-height: 0; }
.tag {
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 7px; border-radius: 2px;
}
.tag--new  { background: var(--ink); color: var(--paper); }
.tag--sale { background: var(--sale); color: #FFF; }
.prod h3 { font-family: var(--disp); font-weight: 400; font-size: 20px; color: var(--ink); line-height: 1.2; }
.prod__meta { font-size: 12.5px; color: var(--faint); }
.prod__price { font-size: 14.5px; color: var(--ink); }
.prod__price s { color: var(--faint); margin-right: 5px; }
.is-sale { color: var(--sale); }
.prod__sizes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.sz {
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 2px; padding: 2px 5px;
}
.sz--last { border-color: var(--sale); color: var(--sale); }
.gone { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--sale); letter-spacing: 0.08em; text-transform: uppercase; }
.prod__low { font-family: var(--mono); font-size: 10px; color: var(--sale); letter-spacing: 0.06em; }
.prod .linkbtn { align-self: flex-start; margin-top: auto; padding-top: 8px; }
.empty { grid-column: 1 / -1; padding: 60px 20px; text-align: center; color: var(--faint); border: 1px dashed var(--line-2); border-radius: 4px; }

/* --- product panel --- */
.product {
  position: relative; margin: 34px 0 8px; background: var(--card);
  border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden;
}
.product__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.product__inner .plate { aspect-ratio: auto; height: 100%; min-height: 420px; border-radius: 0; }
.pd { padding: 34px 38px 38px; display: flex; flex-direction: column; gap: 11px; }
.pd h2 { font-family: var(--disp); font-weight: 400; font-size: 34px; line-height: 1.1; color: var(--ink); }
.pd__price { font-size: 19px; color: var(--ink); }
.pd__price s { color: var(--faint); margin-right: 7px; }
.pd__colour { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.dot { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line-2); }
.pd__desc { font-size: 15.5px; max-width: 52ch; }
.pd__label {
  margin-top: 8px; font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.pd__fit { text-transform: none; letter-spacing: 0; font-family: var(--site-sans); font-size: 12.5px; color: var(--muted); }
.szrow { display: flex; flex-wrap: wrap; gap: 6px; }
.szbtn {
  min-width: 50px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--card); border-radius: 3px;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink);
  transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.szbtn:hover:not([disabled]) { border-color: var(--ink); }
.szbtn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.szbtn.is-gone { color: var(--faint); cursor: not-allowed; text-decoration: line-through; background: var(--paper-2); }
.pd__stock { font-size: 13px; color: var(--muted); min-height: 1.4em; }

.btn {
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  border-radius: 3px; padding: 14px 30px; font-size: 15px; font-weight: 500; cursor: pointer;
  transition: background 0.18s var(--ease);
}
.btn:hover:not([disabled]) { background: #2E2A25; }
.btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.btn--ghost { background: none; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--paper-2); }
.btn--block { width: 100%; }
.pd__actions { margin-top: 6px; }

.pd__facts { margin-top: 12px; border-top: 1px solid var(--line); }
.pd__facts > div { display: grid; grid-template-columns: 108px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pd__facts dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding-top: 3px; }
.pd__facts dd { font-size: 13.5px; }
.pd__guide { margin-top: 14px; }
.pd__guide > summary { cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }
.pd__guide table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12.5px; }
.pd__guide th, .pd__guide td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--line); }
.pd__guide th { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }

.detail__close {
  position: absolute; top: 14px; right: 16px; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; line-height: 1;
  background: var(--card); border: 1px solid var(--line-2); color: var(--muted);
}
.detail__close:hover { color: var(--ink); }

/* --- bag --- */
.cart { position: fixed; inset: 0; z-index: 800; display: grid; place-items: center; }
.cart__backdrop { position: absolute; inset: 0; background: rgb(20 19 17 / 0.42); backdrop-filter: blur(2px); }
.cart__panel {
  position: relative; width: min(560px, calc(100vw - 40px)); max-height: min(86vh, 820px);
  display: flex; flex-direction: column;
  background: var(--card); border-radius: 5px; box-shadow: 0 40px 90px -40px rgb(20 19 17 / 0.5);
  animation: cart-in 0.32s var(--ease);
}
@keyframes cart-in { from { opacity: 0; transform: translateY(14px); } }
.cart__h { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px 16px; border-bottom: 1px solid var(--line); }
.cart__h h2 { font-family: var(--disp); font-weight: 400; font-size: 25px; color: var(--ink); }
.cart__h .detail__close { position: static; }
.cart__body { flex: 1; overflow-y: auto; padding: 8px 26px; }
.cl { display: grid; grid-template-columns: 66px 1fr auto; gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cl .plate { aspect-ratio: 1; border-radius: 3px; }
.cl__n { font-family: var(--disp); font-size: 17px; color: var(--ink); line-height: 1.25; }
.cl__m { font-size: 12.5px; color: var(--faint); margin-bottom: 7px; }
.cl__q { display: flex; align-items: center; gap: 4px; }
.cl__q button {
  width: 26px; height: 26px; border: 1px solid var(--line-2); background: var(--card);
  border-radius: 3px; cursor: pointer; font-size: 14px; line-height: 1; color: var(--ink);
}
.cl__q button:hover { border-color: var(--ink); }
.cl__q span { min-width: 26px; text-align: center; font-family: var(--mono); font-size: 13px; }
.cl__x { width: auto !important; padding: 0 9px; font-size: 11px !important; color: var(--muted) !important; margin-left: 6px; }
.cl__p { font-family: var(--mono); font-size: 13.5px; color: var(--ink); }

.cart__delivery { padding: 14px 26px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.dopt {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 4px 11px; align-items: baseline;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 3px; cursor: pointer;
}
.dopt:has(input:checked) { border-color: var(--ink); background: var(--paper-2); }
.dopt input { grid-row: span 2; align-self: center; }
.dopt__n { font-size: 14px; color: var(--ink); }
.dopt__p { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.dopt__b { grid-column: 2 / 3; font-size: 12px; color: var(--faint); }

.cart__totals { padding: 14px 26px; border-top: 1px solid var(--line); }
.tot { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; color: var(--muted); }
.tot--big { font-size: 19px; color: var(--ink); border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
.tot--big span:last-child { font-family: var(--mono); }
.tot__note { font-size: 12px; color: var(--faint); margin-top: 5px; }
.cart__foot { padding: 16px 26px 24px; border-top: 1px solid var(--line); }
.cart__as { font-size: 12.5px; color: var(--faint); margin-bottom: 10px; }

/* --- order placed --- */
.placed {
  margin: 34px 0; padding: 34px 38px; border-radius: 4px;
  background: var(--ink); color: #E9E5DE;
}
.placed h2 { font-family: var(--mono); font-size: 26px; letter-spacing: 0.08em; color: #FFF; margin: 6px 0 14px; }
.placed .eyebrow { color: #A79E92; }
.placed__l { font-size: 15px; line-height: 1.8; color: #C9C2B8; }
.placed__t { font-family: var(--mono); font-size: 19px; color: #FFF; margin: 12px 0 4px; }
.placed__e { font-size: 13.5px; color: #A79E92; margin-bottom: 16px; }
.placed .btn--ghost { color: #E9E5DE; border-color: rgb(255 255 255 / 0.28); }
.placed .btn--ghost:hover { background: rgb(255 255 255 / 0.08); }
.demo-note { font-family: var(--mono); font-size: 11.5px; color: #E5B9A6; margin-bottom: 16px; }

/* Says out loud that nobody in the room pressed the button. A shop that lets an
   agent spend money should record that it was an agent. */
.by-agent {
  display: inline-block; margin-bottom: 14px;
  padding: 8px 13px; border-radius: 3px;
  background: rgb(229 185 166 / 0.15); border: 1px solid #E5B9A6;
  font-family: var(--mono); font-size: 11.5px; color: #F0D3C6;
}

/* --- account --- */
.acct__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 46px 0 30px; border-bottom: 1px solid var(--line); }
.acct__n { font-family: var(--disp); font-weight: 400; font-size: 44px; color: var(--ink); line-height: 1.05; margin-top: 8px; }
.acct__m { font-size: 14px; color: var(--faint); margin-top: 4px; }
.acct__acts { display: flex; gap: 18px; }
.acct__h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin: 34px 0 16px; }
.orders { display: flex; flex-direction: column; gap: 14px; }
.order { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.order__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.order__id { font-family: var(--mono); font-size: 15px; color: var(--ink); letter-spacing: 0.04em; }
.order__d { font-size: 13px; color: var(--faint); }
.pill {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 20px; white-space: nowrap;
}
.pill--processing        { background: #EFEAE0; color: #6B5B3E; }
.pill--dispatched        { background: #E4EDF2; color: #2F5A70; }
.pill--out-for-delivery  { background: #E6F0E8; color: var(--good); }
.pill--delivered         { background: var(--ink); color: var(--paper); }
.pill--returned          { background: #F3E5E1; color: var(--sale); }
.order__items { display: flex; flex-wrap: wrap; gap: 6px; }
.order__item { font-size: 13px; color: var(--body); background: var(--paper-2); border-radius: 3px; padding: 4px 9px; }
.order__item em { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.order__when { font-size: 13px; color: var(--muted); }
.order .linkbtn { align-self: flex-start; }

.od { position: relative; margin-top: 22px; background: var(--card); border: 1px solid var(--ink); border-radius: 4px; padding: 26px 28px; }
.od h3 { font-family: var(--disp); font-weight: 400; font-size: 28px; color: var(--ink); margin: 6px 0 6px; }
.od__meta { font-size: 13px; color: var(--faint); margin-bottom: 18px; }
.timeline { border-left: 2px solid var(--line-2); margin-left: 6px; }
.timeline li { position: relative; padding: 0 0 18px 24px; }
.timeline li::before {
  content: ""; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--paper); border: 2px solid var(--line-2);
}
.timeline li.is-now::before { background: var(--good); border-color: var(--good); }
.timeline__d { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.timeline__e { display: block; font-size: 14.5px; color: var(--ink); margin-top: 2px; }
.od__return { margin-top: 8px; padding: 16px 18px; background: var(--paper-2); border-radius: 3px; }
.od__return p { font-size: 14px; margin-bottom: 12px; }
.od__closed { font-size: 13.5px; color: var(--sale); }

/* --- info --- */
.info { padding: 66px 28px 10px; }
.info h2 { font-family: var(--disp); font-weight: 400; font-size: 32px; color: var(--ink); margin-bottom: 24px; }
.info__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px 34px; }
.info__grid dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.info__grid dd { font-size: 14.5px; }

/* --- footer --- */
.foot { margin-top: 72px; padding: 34px 28px; border-top: 1px solid var(--line); max-width: 1220px; margin-inline: auto; font-size: 13.5px; }
.foot strong { font-family: var(--disp); letter-spacing: 0.2em; color: var(--ink); }
.foot__demo { margin-top: 8px; font-size: 12.5px; color: var(--faint); max-width: 64ch; }

/* --- the agent moved something --- */
.just-changed { animation: nudge 1.5s var(--ease); }
@keyframes nudge {
  0%   { box-shadow: 0 0 0 3px rgb(122 46 30 / 0.55); }
  100% { box-shadow: 0 0 0 3px rgb(122 46 30 / 0); }
}

@media (max-width: 980px) {
  .product__inner { grid-template-columns: 1fr; }
  .product__inner .plate { min-height: 0; aspect-ratio: 16 / 10; }
  .pd { padding: 26px 24px 30px; }
}
@media (max-width: 720px) {
  .head__row { grid-template-columns: 1fr auto; row-gap: 12px; }
  .gender { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .searchbox { display: none; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 24px 14px; }
  .filters__row--end { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .just-changed, .cart__panel, .gender button, .chk span, .szbtn { animation: none; transition: none; }
}