/* FreshKit — two marketplaces, one layout language.
   New is red, Used is gold, everything else is near-black on white.
   House rules: no gradients, no rounded corners, no drop shadows, no card
   chrome. The product photograph is the design. */

:root {
  --red:   #E8112D;   /* New */
  --gold:  #F5C518;   /* Used */
  --violet:#6B2FA8;   /* Carnival */
  --ink:   #0D0D0D;
  --paper: #FFFFFF;
  --grey-1:#6B6B6B;
  --grey-2:#B5B5B5;
  --grey-3:#E6E6E6;
  --grey-4:#F4F4F4;

  /* The active marketplace paints this, and every accent follows. */
  --accent: var(--red);
  --accent-ink: #FFFFFF;

  --display: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --nav-h: 52px;
  --gutter: 0px;
}

[data-market='used'] { --accent: var(--gold); --accent-ink: #0D0D0D; }
[data-market='carnival'] { --accent: var(--violet); --accent-ink: #FFFFFF; }

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper); color: var(--ink);
  font-family: var(--body);
  font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

h1, h2, h3, .display, .price {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 0;
}
h1 { font-size: 44px; line-height: 0.95; }
h2 { font-size: 28px; line-height: 1.0; }
h3 { font-size: 20px; line-height: 1.05; }

/* ---------------------------------------------------------------- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 40;
  height: var(--nav-h);
  display: flex; align-items: stretch;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}
.nav__brand {
  font-family: var(--display); font-weight: 700; font-size: 26px;
  letter-spacing: -0.02em;
  display: flex; align-items: center; padding: 0 18px;
  background: var(--ink); color: var(--paper);
}
.nav__tabs { display: flex; flex: 1; min-width: 0; }
.nav__tab {
  font-family: var(--display); font-weight: 700; font-size: 19px;
  display: flex; align-items: center; padding: 0 16px;
  border-right: 1px solid var(--grey-3);
  color: var(--ink); white-space: nowrap;
}
.nav__tab:first-child { border-left: 1px solid var(--grey-3); }
.nav__tab--on-new { background: var(--red); color: #fff; border-right-color: var(--red); }
.nav__tab--on-used { background: var(--gold); color: var(--ink); border-right-color: var(--gold); }
.nav__tab--on-carnival { background: var(--violet); color: #fff; border-right-color: var(--violet); }
.nav__tab--on-plain { background: var(--ink); color: #fff; border-right-color: var(--ink); }
/* A marketplace tab that carries a hover panel needs a positioned parent for
   the panel to hang from, without changing how the tab itself sits. */
.nav__tabitem { position: relative; display: flex; }
.nav__tabitem .nav__tab { width: 100%; }
.nav__right { display: flex; align-items: stretch; margin-left: auto; }
.nav__icon {
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px; border-left: 1px solid var(--grey-3);
  font-size: 13px; font-weight: 600;
}
.nav__count {
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav__search { border: 0; border-left: 1px solid var(--grey-3); padding: 0 12px; width: 180px; outline: none; }
.nav__search:focus { background: var(--grey-4); }

/* ------------------------------------------------------------- layout ---- */
.wrap { max-width: 1500px; margin: 0 auto; }
.pad { padding: 0 16px; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--grey-1); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.center { text-align: center; }
.hidden { display: none !important; }

/* --------------------------------------------------------------- hero ---- */
.hero {
  background: var(--accent); color: var(--accent-ink);
  padding: 34px 16px 30px;
  border-bottom: 1px solid var(--ink);
}
.hero h1 { font-size: clamp(40px, 8vw, 96px); line-height: 0.88; }
.hero p { max-width: 46ch; margin: 10px 0 0; font-size: 15px; }
.hero__actions { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------ buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 17px;
  padding: 10px 20px; border: 1px solid var(--ink); background: var(--ink); color: #fff;
  cursor: pointer;
}
.btn:hover { background: #262626; }
.btn--accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--accent:hover { filter: brightness(0.92); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--grey-4); }
.btn--onhero { background: var(--accent-ink); color: var(--accent); border-color: var(--accent-ink); }
.btn--sm { font-size: 14px; padding: 6px 12px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ------------------------------------------------------------ filters ---- */
.filters {
  display: flex; gap: 0; overflow-x: auto; align-items: stretch;
  border-bottom: 1px solid var(--grey-3);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.filters::-webkit-scrollbar { display: none; }
.chip {
  font-family: var(--display); font-weight: 700; font-size: 16px;
  padding: 9px 14px; white-space: nowrap; cursor: pointer;
  background: transparent; border: 0; border-right: 1px solid var(--grey-3);
}
.chip--on { background: var(--ink); color: #fff; }
.filters__sort { margin-left: auto; border: 0; border-left: 1px solid var(--grey-3); padding: 0 10px; background: transparent; }

/* --------------------------------------------------------------- grid ---- */
/* Edge to edge. 3-up on a phone, 5-up on a desktop, hairlines instead of
   cards — the product photograph does the work. */
.grid {
  display: grid;
  /* minmax(0, 1fr) — a long product title must not widen its column and
     throw the whole grid out of true. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Real gutters, and air around the whole grid. Products need room to be
     looked at one at a time; packed hard against each other they read as a
     texture rather than as things you can buy. */
  gap: 34px 20px;
  padding: 22px 20px 40px;
}
@media (min-width: 560px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Four across on a laptop and four across on a large screen, with tight
   gutters — measured off Tillys, where a 1564px window puts four ~304px tiles
   in a row with about 14px between them. FreshKit was running five columns at
   26px gutters, which made every photograph roughly a fifth smaller than the
   shop it is being compared to. The garment is the thing being sold; giving it
   the width back is the whole point. */
@media (min-width: 900px)  { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 16px; padding: 26px 24px 52px; } }
@media (min-width: 1240px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 38px 16px; padding: 26px 28px 56px; } }

.tile { background: var(--paper); position: relative; display: block; }
.tile__img { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--grey-4); }
.tile__img img { width: 100%; height: 100%; object-fit: cover; }
/* The second photograph, stacked over the first and revealed on hover. A cross
   fade rather than a cut: a hard swap at grid scale reads as a glitch, and the
   quarter second is long enough to register as a deliberate second view.
   Only a tile that HAS a second shot gets the class, so nothing flickers. */
.tile__alt {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.tile__img--swaps:hover .tile__alt { opacity: 1; }
/* A touch screen has no hover, so the alternate must never be left showing. */
@media (hover: none) { .tile__img--swaps:hover .tile__alt { opacity: 0; } }
.tile:hover .tile__img > img:first-child { opacity: 0.9; }
.tile__img--swaps:hover > img:first-child { opacity: 1; }
.tile__meta { padding: 12px 0 0; }
.tile__seller { font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; }
/* Who you are buying from, set to be read at a glance down a grid. A tile
   gives the supplier one line above the product, and at 600 in the same tone
   as everything else that line was the first thing the eye skipped. The name
   is the reason a shopper picks one of two near-identical pieces, so it is
   weighted and toned to be found rather than merely present. When the line is
   standing in for a department label inside a storefront, it is not a name and
   keeps the lighter treatment. */
.tile__seller--name {
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.015em;
}
.tile__title { font-size: 12.5px; color: var(--grey-1); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Condition is said in words under the price now that nothing sits over the
   photograph. */
.tile__cond { font-size: 11px; color: var(--grey-1); margin-top: 3px; text-transform: capitalize; }
.tile__price { font-family: var(--display); font-weight: 700; font-size: 20px; margin-top: 6px; }
.tile__price s { color: var(--grey-2); font-size: 15px; margin-left: 6px; text-decoration: line-through; }
.tile__price .on-sale { color: var(--red); }

/* The corner tag. A folded diagonal across the top-left of the photo —
   not a pill, not a chip. Sale is red, Used is gold. */
.corner {
  position: absolute; top: 0; left: 0; width: 96px; height: 96px;
  overflow: hidden; pointer-events: none;
}
.corner span {
  position: absolute; top: 18px; left: -28px; width: 130px;
  transform: rotate(-45deg);
  font-family: var(--display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.04em; text-align: center; padding: 3px 0;
  background: var(--ink); color: #fff;
}
.corner--sale span { background: var(--red); color: #fff; }

/* ------------------------------------------------------------ section ---- */
.section { border-top: 1px solid var(--ink); }
.section__head {
  display: flex; align-items: baseline; gap: 14px;
  padding: 30px 20px 6px;
}
@media (min-width: 900px) { .section__head { padding: 38px 28px 6px; } }
.section__head h2 { font-size: 30px; }
.section__head .rule { flex: 1; height: 1px; background: var(--grey-3); }
.section__head a { font-size: 13px; font-weight: 600; border-bottom: 2px solid var(--accent); }

/* ---------------------------------------------------------- storefront --- */
.storefront__banner { height: 220px; background: var(--grey-4); position: relative; overflow: hidden; }
.storefront__banner img { width: 100%; height: 100%; object-fit: cover; }
.storefront__bar { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--ink); }
.storefront__logo { width: 64px; height: 64px; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 26px; object-fit: cover; }
.verified { font-size: 12px; font-weight: 700; color: var(--red); }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 11px; font-weight: 600; padding: 2px 7px; border: 1px solid var(--grey-2); color: var(--grey-1); }

/* --------------------------------------------------------------- detail -- */
/* The product page is sized for a laptop, not a studio display. A 13-inch
   screen is about 720px of usable height, so the image is capped well under
   that: the price, the size picker and the Add-to-bag button all have to be
   visible without scrolling, and an image that fills the viewport buries them.
   The proportions hold at every width — the image never outgrows its column. */
.detail { display: grid; grid-template-columns: 1fr; max-width: 1420px; margin: 0 auto; }
@media (min-width: 900px) {
  .detail { grid-template-columns: minmax(0, 1fr) minmax(380px, 0.66fr); align-items: start; }
}
/* The height is what is capped — 62vh leaves the fold for the price and the
   button, 560px stops the image growing past its own resolution — and the
   width follows from the aspect ratio rather than stretching to the column.
   Setting the width instead would letterbox the photograph inside a box far
   wider than itself, which is how a "smaller" image ends up looking bigger. */
.detail__img {
  /* 3:4 rather than 4:5 — taller, which is the shape Tillys runs and the shape
     a garment photograph wants: a person is longer than they are wide. */
  background: var(--grey-4); aspect-ratio: 3/4;
  /* Tillys runs its product shot at roughly 745x790 in a 1564 window — the
     photograph takes about half the page. Capping by height alone kept ours
     narrower than its column on a wide screen, so the width is what leads now
     and the height follows the aspect ratio, up to a ceiling that stops it
     outgrowing its own resolution. */
  /* No max-height. The cap was fighting the aspect ratio: at this column width
     3:4 wants ~1140px tall, the 940px ceiling clipped it back, and the box
     rendered 855x836 — square, and shorter than the 4:5 it replaced. A tall
     photograph is the point, so the ratio decides the height and the page
     scrolls, exactly as Tillys does. */
  width: 100%; height: auto;
  margin: 0 auto; position: relative; overflow: hidden;
}
/* cover, not contain. The box is now the width of its column and a fixed 4:5,
   so `contain` left a photograph of a different ratio floating in grey with
   bars down both sides — which is exactly the "smaller image in a bigger box"
   the wider layout was meant to fix. Tillys crops too; a garment shot survives
   it because the garment is centred. */
.detail__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The photograph column is a size container so the image can be its 3:4
   height less three-quarters of an inch (72px): tall, but the price and size
   buttons come up the page with it. The crop is object-fit: cover. */
.detail__media { container-type: inline-size; min-width: 0; }
@media (min-width: 900px) {
  .detail__img { aspect-ratio: auto; height: calc(100cqi * 4 / 3 - 72px); }
  /* The rail's first thumbnail sat hard against the sticky menu bar. */
  .detail__media .gallery__thumbs { padding-top: 16px; }
}
.gallery__main img { width: 100%; height: 100%; }
/* The buying column. It carries the name, price, colour, size, the button and
   now the details as well, and at 20px of padding with tight stacking it ran
   out well above the bottom of the photograph — leaving a tall strip of white
   beside a very tall image. More padding, more space between blocks, and no
   max-width cap: it fills its column and runs down the page. */
.detail__side {
  padding: 22px 28px 56px;
  border-left: 1px solid var(--grey-3);
  max-width: none;
}
/* .stack is the generic spacer; on this column it is deliberately looser. */
.detail__side.stack > * + * { margin-top: 18px; }
/* On a phone there is no second column, so the image takes the full width and
   its height follows — never taller than the screen it is on. */
@media (max-width: 899px) {
  .detail__img { width: 100%; height: auto; max-height: min(80vh, 760px); }
  .detail__side { border-left: 0; max-width: none; padding: 20px 16px 44px; }
}
.detail__price { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1; }
.sizes { display: flex; gap: 6px; flex-wrap: wrap; }
.size {
  min-width: 44px; padding: 8px 10px; text-align: center; cursor: pointer;
  border: 1px solid var(--grey-2); background: #fff; font-weight: 600; font-size: 13px;
}
.size--on { border-color: var(--ink); background: var(--ink); color: #fff; }

/* ---------------------------------------------------------------- chat --- */
/* A question box, not a conversation window. It sits closed under the buying
   controls and opens to about a third of what it used to take, because a
   product page that gives half its column to a chat log has buried the
   product. The full thread is in Messages. */
.detail__chat { margin-top: 16px; max-width: 400px; padding-top: 4px; }
.detail__chat > summary {
  cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 17px;
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.detail__chat > summary::-webkit-details-marker { display: none; }
.detail__chat > summary::after { content: '+'; color: var(--grey-1); font-size: 18px; }
.detail__chat[open] > summary::after { content: '−'; }
.chat { border: 1px solid var(--grey-3); display: flex; flex-direction: column; height: 190px; margin-top: 10px; }
.chat__log { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.chat__compose { border-top: 1px solid var(--grey-3); }
.chat__form { display: flex; align-items: center; }
.chat__form input[type='text'], .chat__form input:not([type]) { flex: 1; }
.chat__form input { flex: 1; border: 0; padding: 10px 10px; outline: none; min-width: 0; }
/* The file input itself is never shown — the paperclip label opens it, so the
   control matches the rest of the type instead of showing a browser button. */
.chat__file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chat__clip {
  flex: none; cursor: pointer; padding: 0 8px 0 10px; font-size: 15px;
  line-height: 1; color: var(--grey-1); user-select: none;
}
.chat__clip:hover { color: var(--ink); }
.chat__chip {
  display: flex; gap: 8px; align-items: center; font-size: 12px;
  padding: 0 10px; color: var(--grey-1);
}
.chat__chip:not(:empty) { padding: 8px 10px; border-bottom: 1px solid var(--grey-3); background: var(--grey-4); }

/* Thumbnails run DOWN the left, beside the photograph, the way Tillys does it
   — and every clothing site that expects you to look at four shots before
   deciding. A rail underneath pushes the price and the size buttons further
   down the page for no gain; a rail beside costs a strip of margin that was
   empty anyway. */
.gallery {
  height: 100%; min-height: 0;
  display: grid;
  /* A wider rail and a real gap, so the thumbnails read as their own column
     beside the photograph rather than as something crowding its edge. */
  grid-template-columns: 104px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.gallery__main {
  /* No aspect-ratio here. The .detail__img box already sets 4:5 and a height
     cap; giving the inner pane its own ratio made it compute a height from its
     width and overflow the box it sits in — the photograph spilled past the
     bottom edge. It fills what it is given instead. */
  min-height: 0; height: 100%; background: var(--grey-4); order: 2; overflow: hidden;
}
.gallery__main img { object-fit: cover; }
.gallery__thumbs {
  order: 1;
  display: flex; flex-direction: column; gap: 8px;
  height: 100%; min-height: 0; overflow-y: auto; padding: 0;
  background: transparent;
  scrollbar-width: none;
}
.gallery__thumbs::-webkit-scrollbar { display: none; }
/* Square, like Tillys. A 4:5 thumbnail of a 4:5 photograph is a small copy of
   the same picture; a square crops to the middle, which is where the garment
   is, so four of them down the rail are four distinguishable shots rather than
   four identical slivers. */
.gallery__thumb {
  width: 104px; height: 104px; flex: 0 0 auto; padding: 0;
  border: 1px solid var(--grey-3); background: #fff; cursor: pointer;
  transition: border-color .15s ease;
}
.gallery__thumb:hover { border-color: var(--grey-1); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__thumb.is-on { border: 2px solid var(--ink); }
.gallery__thumb img { object-fit: cover; }
.gallery__caption {
  grid-column: 2; order: 3;
  padding: 6px 0 0; background: transparent; color: var(--grey-1);
  font-size: 11px; font-weight: 600;
}
/* On a phone there is no room for a column beside the photograph, so the rail
   goes back under it and scrolls sideways. */
@media (max-width: 899px) {
  .gallery { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .gallery__main { order: 1; }
  .gallery__thumbs { order: 2; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .gallery__thumb { width: 70px; height: 70px; }
  .gallery__caption { grid-column: 1; }
}

/* --------------------------------------------------------------- forms --- */
.field { display: block; margin-bottom: 12px; }
.field > span { display: block; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 11px; border: 1px solid var(--grey-2); background: #fff; outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.field textarea { min-height: 84px; resize: vertical; }
.form-grid { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.panel { border: 1px solid var(--grey-3); padding: 18px; }
.panel + .panel { margin-top: 14px; }
.panel h3 { margin-bottom: 10px; }
.note { border-left: 3px solid var(--accent); padding: 10px 12px; background: var(--grey-4); font-size: 13px; }
.error { border-left: 3px solid var(--red); padding: 10px 12px; background: #FDECEE; font-size: 13px; }

/* ---------------------------------------------------------- dashboards --- */
.dash { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .dash { grid-template-columns: 200px 1fr; } }
.dash__side { border-right: 1px solid var(--grey-3); padding: 16px 0; }
.dash__link {
  display: block; padding: 9px 16px; font-family: var(--display); font-weight: 700; font-size: 18px;
  cursor: pointer; border-left: 3px solid transparent;
}
.dash__link--on { border-left-color: var(--accent); background: var(--grey-4); }
.dash__body { padding: 20px 18px 60px; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11px; font-weight: 700; color: var(--grey-1);
  border-bottom: 1px solid var(--ink); padding: 6px 8px; }
.table td { border-bottom: 1px solid var(--grey-3); padding: 9px 8px; vertical-align: top; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--grey-3); border: 1px solid var(--grey-3); }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: #fff; padding: 14px; }
.stat__n { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; }
.stat__k { font-size: 11px; font-weight: 700; color: var(--grey-1); margin-top: 4px; }

.state { font-size: 11px; font-weight: 700; padding: 2px 7px; border: 1px solid currentColor; }
.state--held { color: var(--grey-1); }
.state--eligible { color: #1F7A3D; }
.state--batched { color: #8A6D00; }
.state--paid { color: var(--ink); }
.state--failed { color: var(--red); }

/* ---------------------------------------------------------------- bag ---- */
.bagline { display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--grey-3); }
.bagline__img img, .bagline__img .ph { width: 96px; aspect-ratio: 4/5; object-fit: cover; background: var(--grey-4); display: block; }
.bagline__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bagline__title { font-weight: 700; font-size: 16px; }
.bagline__desc { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--grey-1);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bagline__specs { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 6px 0 0; font-size: 12px; }
.bagline__specs dt { color: var(--grey-1); }
.bagline__specs dd { margin: 0; font-weight: 600; }
.bagline__foot { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.bagline__price { text-align: right; }
.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--ink); height: 34px; }
.qty button { width: 34px; background: #fff; border: 0; font-size: 18px; cursor: pointer; }
.qty button:disabled { color: var(--grey-2); cursor: default; }
.qty span { min-width: 34px; display: flex; align-items: center; justify-content: center; font-weight: 700; border-left: 1px solid var(--grey-3); border-right: 1px solid var(--grey-3); }
@media (max-width: 560px) {
  .bagline { grid-template-columns: 84px 1fr; }
  .bagline__img img, .bagline__img .ph { width: 84px; }
  .bagline__price { grid-column: 2; text-align: left; }
}

/* -------------------------------------------------------------- footer --- */
.foot { border-top: 1px solid var(--ink); padding: 30px 16px 50px; font-size: 13px; color: var(--grey-1); }
.foot strong { color: var(--ink); }

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 11px 18px; font-size: 14px; z-index: 90;
}

/* On a phone the nav is the four marketplaces and the bag. Search moves into
   the page rather than fighting the tabs for room. */
@media (max-width: 720px) {
  .nav__brand { font-size: 20px; padding: 0 10px; }
  .nav__tabs { overflow-x: auto; scrollbar-width: none; }
  .nav__tabs::-webkit-scrollbar { display: none; }
  .nav__tab { font-size: 15px; padding: 0 9px; }
  .nav__right { flex: none; }
  /* The corner tag scales with the tile — on a three-up phone grid the
     desktop size would swallow the photo. */
  .corner { width: 68px; height: 68px; }
  .corner span { top: 13px; left: -22px; width: 96px; font-size: 10px; padding: 2px 0; }
  .nav__search { display: none; }
  .nav__icon { padding: 0 10px; font-size: 12px; }
  .nav__icon--messages { display: none; }
  /* The product page's own sizes are set once, in the 899px block beside the
     rest of the detail rules — a second cap here would silently win and undo
     it. Only the divider changes on a phone, where there is no second column
     for it to divide. */
  .detail__side { border-top: 1px solid var(--grey-3); }
  .hero { padding: 26px 16px 24px; }
}
.searchbar { display: none; border-bottom: 1px solid var(--grey-3); }
.searchbar input { width: 100%; border: 0; padding: 12px 16px; outline: none; font-size: 15px; }
@media (max-width: 720px) { .searchbar { display: block; } }

/* A drawn placeholder has to occupy exactly the same box a photo would, or
   the grid rows stop lining up. */
.tile__img > .ph, .detail__img > .ph, .tile__img > .ph > svg, .detail__img > .ph > svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

/* ===========================================================================
   The three layers: landing page, brand directory, filtered category pages.
   Everything below keeps the same rules as the rest of the site — flat, no
   shadows, no rounded corners, hairlines instead of card chrome.
   ========================================================================= */

.topbar { position: sticky; top: 0; z-index: 40; background: var(--paper); }
.topbar .nav { position: static; }

/* ---- the shop tree, row two -------------------------------------------- */

/* ---- dropdown panels (menu + sign in) ---------------------------------- */
.panel-pop {
  position: absolute; top: 100%; left: 0; z-index: 60;
  background: var(--paper); border: 1px solid var(--ink);
  min-width: 220px;
}
.nav__icon--signin .panel-pop, .nav__icon--signin ~ .panel-pop { left: auto; right: 0; }
.menupanel { padding: 12px 0; }
.menupanel__all {
  display: block; padding: 6px 18px 10px;
  font-family: var(--display); font-weight: 700; font-size: 18px;
  border-bottom: 1px solid var(--grey-3); margin-bottom: 6px;
}
.menupanel__cats { display: flex; flex-direction: column; }
.menupanel__cats a { padding: 7px 18px; font-size: 14px; }
.menupanel__cats a:hover { background: var(--grey-4); }

.nav__icon--signin { position: relative; }
.nav__icon--bag { padding: 0 12px; }
.linkish {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: inherit;
}
.linkish:hover { text-decoration: underline; }
.signin { width: 280px; padding: 16px; }
.signin .field { margin-bottom: 10px; }
.signin__links { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; }
.signin__links a { border-bottom: 1px solid var(--grey-2); }

/* ---- the bag ----------------------------------------------------------- */
.bagicon { position: relative; display: inline-flex; align-items: center; }
.bagicon svg { display: block; }
.bagicon__count {
  position: absolute; top: -5px; right: -8px;
  min-width: 16px; height: 16px; padding: 0 3px;
  background: var(--ink); color: #fff;
  font-size: 10px; font-weight: 700; font-style: normal; line-height: 16px;
  text-align: center;
}

/* ---- landing page ------------------------------------------------------ */
.hero--home { background: var(--ink); color: #fff; }
.hero--home .btn--onhero { background: #fff; color: var(--ink); border-color: #fff; }

/* Paid placement, said out loud. Quiet enough not to shout, plain enough
   that nobody could mistake it for an organic result. */
.tile__paid {
  margin-top: 5px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.05em; color: var(--grey-1);
  border-top: 1px solid var(--grey-3); padding-top: 4px; display: inline-block;
}



/* ---- filtered category pages ------------------------------------------ */
.shop { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .shop { grid-template-columns: 232px 1fr; } }
.shop__filters { border-top: 1px solid var(--ink); padding: 16px; }
.shop__filtertoggle {
  display: none; background: none; border: 1px solid var(--ink); cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 17px; padding: 6px 14px;
}
@media (min-width: 900px) {
  .shop__filters { border-right: 1px solid var(--grey-3); border-top: 0; }
}
@media (max-width: 899px) {
  .shop__filtertoggle { display: inline-flex; }
  .shop__filterhead { display: none; }
  .shop__filters .filtergroup { display: none; }
  .shop__filters.is-open .filtergroup { display: block; }
}
.shop__results { min-width: 0; padding-top: 6px; }
.filtergroup { border-top: 1px solid var(--grey-3); padding: 12px 0; }
.filtergroup h3 { font-size: 16px; margin-bottom: 6px; }
.filtercheck { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; cursor: pointer; }
.filtercheck input { accent-color: var(--ink); }
.filtercheck i { margin-left: auto; font-style: normal; font-size: 11px; color: var(--grey-2); }
.filtercheck--empty { opacity: 0.4; }

/* ---- storefront: same skeleton, different character -------------------- */
.storefront { --brand: var(--red); }
.storefront__hero { height: 260px; background: var(--grey-4); overflow: hidden; }
.storefront__hero img, .storefront__art { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 720px) { .storefront__hero { height: 170px; } }

/* The logo laps over the bottom edge of the hero. It is the only place on
   FreshKit where anything overlaps anything — and what creates the depth is the
   brand's own mark, not a platform flourish. */
.storefront__id {
  display: flex; align-items: flex-end; gap: 18px;
  padding: 0 16px 16px; margin-top: -46px; position: relative; z-index: 2;
}
.storefront__logo {
  width: 116px; height: 116px; flex: none;
  background: var(--paper); border: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.storefront__logo img { width: 100%; height: 100%; object-fit: contain; }
.storefront__logo span {
  font-family: var(--display); font-weight: 700; font-size: 40px; color: var(--brand);
}
.storefront__name { padding-bottom: 6px; }
.storefront__name h1 { font-size: 40px; }
.storefront__tagline { margin: 2px 0 0; font-size: 15px; color: var(--grey-1); max-width: 56ch; }
@media (max-width: 720px) {
  .storefront__id { gap: 12px; margin-top: -34px; }
  .storefront__logo { width: 84px; height: 84px; }
  .storefront__name h1 { font-size: 28px; }
}

/* The grid is the same edge-to-edge grid as everywhere else, ruled top and
   bottom in the brand's colour — structure shared, character not. */
.storefront__ruled { border-top: 4px solid var(--brand); border-bottom: 4px solid var(--brand); }
.storefront__ruled .section__head a { border-bottom: 2px solid var(--brand); }
.storefront__about { padding: 24px 16px 50px; max-width: 74ch; }
.storefront__about h3 { margin-bottom: 8px; }
.storefront__about p { margin: 0; font-family: var(--body); font-size: 15px; color: var(--grey-1); }
.storefront .verified { color: var(--brand); }

/* ===========================================================================
   FreshKit — the shop window, the rails, and the brand list.
   ========================================================================= */

/* ---- marketing panes ---------------------------------------------------- */
.window__wrap { position: relative; border-bottom: 1px solid var(--ink); }
.window {
  display: grid; grid-template-columns: 1fr; align-items: stretch;
  background: var(--ink); color: #fff; min-height: 300px;
}
@media (min-width: 860px) { .window { grid-template-columns: 1.05fr 1fr; min-height: 380px; } }
.window--red  { background: var(--red);  color: #fff; }
.window--gold { background: var(--gold); color: var(--ink); }
.window--photo{ background: var(--grey-4); color: var(--ink); }
.window__art { overflow: hidden; order: 2; }
.window__art img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 200px; }
@media (min-width: 860px) { .window__art { order: 2; } }
.window__say { order: 1; padding: 40px 28px 44px; display: flex; flex-direction: column; justify-content: center; }
.window__say h1 { font-size: clamp(36px, 5.4vw, 66px); line-height: 0.94; max-width: 16ch; }
.window__say p { margin: 14px 0 0; font-size: 16px; max-width: 44ch; opacity: 0.92; }
.btn--onwindow {
  align-self: flex-start; margin-top: 22px;
  background: currentColor; border-color: currentColor;
}
.window--ink  .btn--onwindow, .window--red .btn--onwindow { color: #fff; }
.window--gold .btn--onwindow, .window--photo .btn--onwindow { color: var(--ink); }
.btn--onwindow::after { content: ''; }
/* The button paints itself in the pane's own colour, with the text knocked out. */
.window--ink  .btn--onwindow { background: #fff; color: var(--ink); border-color: #fff; }
.window--red  .btn--onwindow { background: #fff; color: var(--red); border-color: #fff; }
.window--gold .btn--onwindow { background: var(--ink); color: var(--gold); border-color: var(--ink); }
.window--photo .btn--onwindow { background: var(--ink); color: #fff; border-color: var(--ink); }

.window__dots {
  position: absolute; left: 20px; bottom: 16px; display: flex; gap: 7px; z-index: 3;
}
.window__dot {
  width: 26px; height: 4px; padding: 0; border: 0; cursor: pointer;
  background: currentColor; opacity: 0.35;
}
.window__dot.is-on { opacity: 1; }
.window--ink .window__dots, .window--red .window__dots { color: #fff; }

/* ---- horizontal rails --------------------------------------------------- */
.rail { position: relative; }
.rail__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(154px, 1fr);
  gap: 20px; padding: 22px 20px 34px;
  overflow-x: auto; scroll-snap-type: x proximity;
  /* Snapping ignores padding unless told about it, and without this the rail
     silently scrolls its own left gutter away on load. */
  scroll-padding-left: 20px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; }
/* Sized for a laptop, not a studio display: a scrolling row has to leave room
   for the row beneath it, so the tiles are deliberately smaller than the ones
   in a full grid. Roughly six across on a 1440-wide screen. */
@media (min-width: 900px) {
  .rail__track { grid-auto-columns: minmax(232px, 1fr); gap: 16px; padding: 20px 24px 34px;
                 scroll-padding-left: 24px; }
}
@media (min-width: 1500px) {
  .rail__track { grid-auto-columns: minmax(288px, 1fr); gap: 16px; }
}
/* A tile inside a rail reads at a glance, so its type steps down with it. */
.rail__track .tile__meta { padding: 9px 0 0; }
.rail__track .tile__seller { font-size: 12.5px; }
.rail__track .tile__title { font-size: 12.5px; }
.rail__track .tile__price { font-size: 19px; margin-top: 4px; }
.rail__track .tile__cond { font-size: 11px; }
.rail__arrow {
  position: absolute; top: 34%; z-index: 5;
  width: 38px; height: 52px; padding: 0; cursor: pointer;
  background: var(--paper); border: 1px solid var(--ink); color: var(--ink);
  font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.15s;
}
.rail__arrow--back { left: 0; }
.rail__arrow--fwd { right: 0; }
.rail__arrow:hover { background: var(--ink); color: #fff; }
.rail__arrow.is-off { opacity: 0; pointer-events: none; }
@media (max-width: 720px) { .rail__arrow { display: none; } }

/* ---- brand list --------------------------------------------------------- */
.brandlist { border-top: 1px solid var(--ink); }
.brandrow {
  --brand: var(--red);
  display: grid; grid-template-columns: 1fr; gap: 6px;
  padding: 26px 20px 30px; border-bottom: 1px solid var(--grey-3);
}
@media (min-width: 980px) { .brandrow { grid-template-columns: 300px 1fr; gap: 34px; padding: 30px 28px 34px; } }
.brandrow__id { display: block; }
.brandrow__id h2 { font-size: 28px; line-height: 1.02; }
.brandrow__mark {
  width: 100%; max-width: 260px; aspect-ratio: 16 / 7; background: var(--grey-4);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-bottom: 4px solid var(--brand); margin-bottom: 12px;
}
.brandrow__mark img { width: 100%; height: 100%; object-fit: contain; }
.brandrow__mark span { font-family: var(--display); font-weight: 700; font-size: 38px; color: var(--brand); }
.brandrow__tagline { margin: 4px 0 0; font-size: 14px; color: var(--grey-1); max-width: 46ch; }
.brandrow__pieces { min-width: 0; }
.brandrow__strip {
  /* Fixed-width tiles: with 1fr a store with one piece stretched it across the
     whole row and the photo came out enormous. */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 190px); justify-content: start;
  gap: 18px; overflow-x: auto; scrollbar-width: none; padding-bottom: 14px;
}
.brandrow__strip::-webkit-scrollbar { display: none; }

/* ---- account type picker ------------------------------------------------ */
.kinds { display: grid; gap: 8px; margin: 12px 0 16px; }
.kind {
  text-align: left; cursor: pointer; padding: 12px 14px;
  border: 1px solid var(--grey-2); background: #fff;
  display: flex; flex-direction: column; gap: 3px;
}
.kind strong { font-family: var(--display); font-weight: 700; font-size: 18px; }
.kind span { font-size: 12.5px; color: var(--grey-1); }
.kind--on { border-color: var(--ink); border-left-width: 4px; background: var(--grey-4); }

/* ---- marketing studio --------------------------------------------------- */
.studio__thumb { width: 100%; max-width: 420px; margin-bottom: 12px; border: 1px solid var(--grey-3); }
.studio__shelf {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px; margin-top: 14px;
}
.studio__img { border: 1px solid var(--grey-3); padding: 8px; }
.studio__img img { width: 100%; aspect-ratio: 3/2; object-fit: cover; margin-bottom: 6px; }

/* Storefronts and search results share the roomier grid, so nothing on the
   site is packed tighter than anything else. */
.storefront__ruled .grid, .shop__results .grid { padding-bottom: 46px; }

/* ===========================================================================
   Two marketplaces, told apart at every touchpoint.
   ========================================================================= */

/* Each shop gets its own banded block on the landing page, so which one you
   are looking at is answered before you read a word. */
.marketblock { border-top: 1px solid var(--ink); }
.marketblock--new  { --accent: var(--red);  --accent-ink: #fff; }
.marketblock--used { --accent: var(--gold); --accent-ink: var(--ink); }
.marketblock__bar {
  background: var(--accent); color: var(--accent-ink);
  padding: 22px 20px 24px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
@media (min-width: 860px) {
  .marketblock__bar { flex-direction: row; align-items: baseline; gap: 20px; padding: 20px 28px 22px; }
}
.marketblock__bar h2 { font-size: 40px; line-height: 0.95; }
.marketblock__bar p { margin: 0; font-size: 14px; max-width: 52ch; opacity: 0.92; }
.btn--onband {
  margin-left: auto; background: var(--accent-ink); color: var(--accent);
  border-color: var(--accent-ink);
}
.marketblock--new .btn--onband  { background: #fff; color: var(--red); border-color: #fff; }
.marketblock--used .btn--onband { background: var(--ink); color: var(--gold); border-color: var(--ink); }

/* The same mark wherever a single listing or order needs naming. */
.marketmark {
  display: inline-block; font-family: var(--display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.04em; padding: 2px 9px;
}
.marketmark--new  { background: var(--red);  color: #fff; }
.marketmark--used { background: var(--gold); color: var(--ink); }

/* ---- order history ------------------------------------------------------ */
.trail { list-style: none; margin: 10px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--grey-3); }
.trail__step { position: relative; padding: 0 0 14px 14px; font-size: 13px; }
.trail__step::before {
  content: ''; position: absolute; left: -21px; top: 4px;
  width: 8px; height: 8px; background: var(--grey-2);
}
.trail__step--payment::before  { background: var(--ink); }
.trail__step--shipped::before  { background: var(--accent); }
.trail__step--confirmed::before{ background: #1F7A3D; }
.trail__step--payout::before   { background: var(--gold); }
.trail__when { font-size: 11px; color: var(--grey-2); }

/* ---- receipts ----------------------------------------------------------- */
.receipt { border: 1px solid var(--ink); padding: 20px; margin-bottom: 20px; }
.receipt__foot { border-top: 2px solid var(--ink); margin-top: 16px; padding-top: 14px; }
.receipt details summary { cursor: pointer; }

/* A printed receipt is a document, not a web page: the chrome goes. */
@media print {
  .topbar, .foot, .dash__side, .btn, .rail__arrow, .searchbar { display: none !important; }
  .dash { grid-template-columns: 1fr; }
  .dash__body { padding: 0; }
  .receipt { border: 0; padding: 0; page-break-after: always; }
  body { font-size: 12px; }
}

/* A measurement is dragged. Two handles on one track, with the live figure
   above them, because a number between two others is the common case. */
.rangefilter__read {
  display: block; font-size: 13px; font-weight: 600; margin: 2px 0 8px;
}
.rangefilter__track { position: relative; height: 30px; }
.rangefilter__in {
  position: absolute; left: 0; right: 0; top: 6px; width: 100%;
  margin: 0; padding: 0; background: none; pointer-events: none;
  -webkit-appearance: none; appearance: none;
}
.rangefilter__in::-webkit-slider-runnable-track {
  height: 3px; background: var(--grey-3);
}
.rangefilter__in::-moz-range-track { height: 3px; background: var(--grey-3); }
.rangefilter__in::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 16px; height: 16px; margin-top: -7px;
  background: var(--ink); border: 0; cursor: grab;
}
.rangefilter__in::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px;
  background: var(--ink); border: 0; cursor: grab;
}
.rangefilter__in:active::-webkit-slider-thumb { cursor: grabbing; }

/* ===========================================================================
   Carnival, the third shop.
   ========================================================================= */
.marketblock--carnival { --accent: var(--violet); --accent-ink: #fff; }
.marketblock--carnival .btn--onband { background: #fff; color: var(--violet); border-color: #fff; }
.marketmark--carnival { background: var(--violet); color: #fff; }
.window--violet { background: var(--violet); color: #fff; }
.window--violet .btn--onwindow { background: #fff; color: var(--violet); border-color: #fff; }

/* ===========================================================================
   The shop window carousel.
   ========================================================================= */
/* Every pane is built once and shown by toggling `hidden`, so the images are
   not refetched on each turn. The deck holds them stacked in the flow; only
   one is ever visible, so the wrap takes its height from whichever that is. */
.window__deck { position: relative; }
/* `.window` sets `display: grid`, and a class selector beats the user agent's
   `[hidden] { display: none }` — so without this every pane in the deck paints
   at once and the carousel is five panes tall. */
.window[hidden] { display: none !important; }
.window--slide { animation: windowfade 0.32s ease-out; }
@keyframes windowfade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .window--slide { animation: none; } }

.window__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 40px; height: 56px; padding: 0; cursor: pointer;
  background: var(--paper); border: 1px solid var(--ink); color: var(--ink);
  font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.window__arrow:hover { background: var(--ink); color: #fff; }
.window__arrow--back { left: 0; }
.window__arrow--fwd { right: 0; }
/* The arrows sit over the pane, so the pane's words have to start clear of
   them — otherwise the headline runs under the control that is on top of it. */
@media (min-width: 721px) {
  .window__say { padding-left: 62px; }
  .window__dots { left: 62px; }
}
/* On a phone the pane is swiped, not clicked, and the arrows would sit on top
   of the headline. The dots still say how many there are. */
@media (max-width: 720px) { .window__arrow { display: none; } }
.window__dots { left: 20px; bottom: 14px; }
@media (max-width: 720px) {
  .window__say { padding: 30px 20px 40px; }
  .window__dots { left: 20px; bottom: 12px; }
  .window__dot { width: 22px; }
}
/* A tablet gets the two-column pane earlier than the arrows, so the pane is
   readable at 700px without the controls crowding it. */
@media (min-width: 721px) and (max-width: 1023px) {
  .window__arrow { width: 34px; height: 46px; font-size: 22px; }
  .window__say { padding: 32px 46px 38px; }
}

/* ===========================================================================
   Filters across the top: what kind of thing, and whose.
   ========================================================================= */
/* The first question a shopper answers is what they are looking for, so it is
   asked across the top of the page where it is seen — not in the left column
   with the measurements and the price. It scrolls sideways on a phone rather
   than wrapping into four rows of chips. */
.typebar {
  display: flex; gap: 0; align-items: stretch;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--grey-3);
  background: var(--paper);
}
.typebar::-webkit-scrollbar { display: none; }
.typebar--labels { border-top: 0; }
.typebar__lead {
  display: flex; align-items: center; padding: 0 12px 0 20px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--grey-1);
  white-space: nowrap;
}
.typebar__key {
  font-family: var(--display); font-weight: 700; font-size: 16px;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 15px; white-space: nowrap; cursor: pointer;
  background: transparent; border: 0; border-right: 1px solid var(--grey-3);
  color: var(--ink);
}
.typebar__key:first-of-type { border-left: 1px solid var(--grey-3); }
.typebar__key:hover { background: var(--grey-4); }
.typebar__key i { font-style: normal; font-size: 11px; color: var(--grey-2); font-family: var(--body); }
.typebar__key--on { background: var(--ink); color: #fff; border-right-color: var(--ink); }
.typebar__key--on i { color: rgba(255, 255, 255, 0.6); }
.typebar__key--empty { opacity: 0.4; }
@media (min-width: 900px) { .typebar__key:first-of-type { border-left: 0; margin-left: 20px; } }

/* ---- the A–Z index ------------------------------------------------------ */
/* A directory read by name is read A to Z, and once it is longer than a screen
   the letters are the fast way in. A letter with nothing behind it stays in
   place, greyed, so the row does not reflow as stores come and go. */
.azbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 0 10px; }
.azbar__key {
  min-width: 27px; padding: 4px 6px; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  background: transparent; border: 1px solid var(--grey-3); color: var(--ink);
}
.azbar__key:hover:not([disabled]) { background: var(--grey-4); }
.azbar__key--on { background: var(--ink); color: #fff; border-color: var(--ink); }
.azbar__key--empty { color: var(--grey-2); cursor: default; }

/* ===========================================================================
   The store directory and the store page.
   ========================================================================= */
/* A store is found by its mark, so the mark is given room to be one. */
.brandrow__mark {
  max-width: 340px; aspect-ratio: 16 / 6;
  border-bottom-width: 5px;
}
.brandrow__mark span { font-size: 46px; }
@media (min-width: 980px) {
  .brandrow { grid-template-columns: 360px 1fr; }
  .brandrow__mark { max-width: 340px; }
}
.tag--multi { border-color: var(--ink); color: var(--ink); }
.tag--waiting { border-color: var(--red); color: var(--red); }

/* The store's NAME sits wholly on white at every width. Only the logo laps
   over the banner — a name printed across a photograph somebody else chose is
   a name that cannot be read, and it changes with the picture behind it. */
.storefront__id {
  display: grid; grid-template-columns: auto 1fr; align-items: end;
  gap: 18px; padding: 0 16px 16px; margin-top: 0; position: relative; z-index: 2;
}
.storefront__logo { margin-top: -46px; }
.storefront__name { padding-bottom: 2px; padding-top: 12px; }
/* Below the width where the logo and the name fit side by side, they stack:
   the logo still laps the banner, the name sits under it, on white. */
@media (max-width: 640px) {
  .storefront__id { grid-template-columns: 1fr; gap: 10px; }
  .storefront__logo { margin-top: -34px; }
  .storefront__name { padding-top: 0; }
}

/* ===========================================================================
   Messages.
   ========================================================================= */
.messages { padding-bottom: 60px; }
.messages__search {
  border: 1px solid var(--grey-3); padding: 7px 10px; outline: none; min-width: 200px;
}
.messages__search:focus { border-color: var(--ink); }
.messages__grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--ink); }
@media (min-width: 900px) {
  .messages__grid { grid-template-columns: 320px 1fr; align-items: start; }
  .messages__list { border-right: 1px solid var(--grey-3); max-height: 74vh; overflow-y: auto; }
}
.messages__row {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; width: 100%;
  padding: 12px 16px; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-bottom: 1px solid var(--grey-3);
}
.messages__row:hover { background: var(--grey-4); }
.messages__row.is-on { background: var(--grey-4); box-shadow: inset 3px 0 0 var(--accent); }
.messages__row img, .messages__row .ph { width: 46px; aspect-ratio: 3/4; object-fit: cover; background: var(--grey-4); }
.messages__rowtext { min-width: 0; }
.messages__who { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.messages__title, .messages__last {
  font-size: 12.5px; color: var(--grey-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.messages__row--waiting .messages__who { color: var(--ink); }
.messages__dot { width: 7px; height: 7px; background: var(--red); flex: none; }
.messages__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--grey-3);
}
.messages__log {
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
  min-height: 220px; max-height: 56vh; overflow-y: auto;
}
.messages__pane { min-width: 0; }
.messages__pane .chat__compose { border-top: 1px solid var(--grey-3); }

/* iMessage-shaped bubbles, all on the same edge. Left-aligned throughout:
   a supplier scanning fifty conversations reads down one edge instead of
   zig-zagging across the column. Whose bubble it is, is said by tone. */
.bubbleline { display: flex; justify-content: flex-start; }
.bubble {
  max-width: min(78%, 460px);
  padding: 8px 13px; border-radius: 16px;
  background: var(--grey-4); color: var(--ink);
  font-size: 14px; line-height: 1.4;
}
.bubble--mine { background: var(--ink); color: #fff; }
.bubble__who { font-size: 11px; font-weight: 700; opacity: 0.6; margin-bottom: 2px; }
.bubble__body { white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble__file {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
  padding: 6px 10px; border-radius: 11px; font-size: 12.5px; font-weight: 600;
  background: rgba(13, 13, 13, 0.07);
  overflow-wrap: anywhere;
}
.bubble--mine .bubble__file { background: rgba(255, 255, 255, 0.16); }
.bubble__file:hover { text-decoration: underline; }
.bubble__clip { font-weight: 700; }
.bubble__when { font-size: 10.5px; opacity: 0.5; margin-top: 3px; }

/* ===========================================================================
   Dashboards: grouped menus, review controls, the guide.
   ========================================================================= */
.dash__group {
  padding: 16px 16px 4px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--grey-2);
}
.dash__group:first-child { padding-top: 4px; }
.dash__link { display: flex; align-items: center; gap: 8px; }
.dash__badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 899px) {
  /* On a phone the grouped menu is a scrolling strip rather than a column
     that pushes the work itself off the screen. */
  .dash__side { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ink); padding: 0; scrollbar-width: none; }
  .dash__side::-webkit-scrollbar { display: none; }
  .dash__group { display: none; }
  .dash__link { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; padding: 12px 14px; }
  .dash__link--on { border-left: 0; border-bottom-color: var(--accent); }
}

.reviewbox { min-width: 250px; }
.reviewnote { width: 100%; margin-top: 8px; border: 1px solid var(--grey-3); padding: 6px 8px; outline: none; }
.reviewnote:focus { border-color: var(--ink); }
.reviewthumb { width: 54px; height: 68px; object-fit: cover; border: 1px solid var(--grey-3); }

.guidelines { border: 1px solid var(--grey-3); padding: 12px 14px; margin: 12px 0; }
.guidelines > summary { cursor: pointer; font-weight: 700; font-size: 13px; }
.guidelines ul { margin: 10px 0 6px; padding-left: 18px; font-size: 13px; }
.guidelines li { margin-bottom: 5px; }

.guide h2 { font-size: 24px; }
.guide ul { padding-left: 18px; margin: 8px 0 0; }
.guide li { margin-bottom: 7px; font-size: 14px; }

.studio__picker { border: 1px solid var(--grey-3); padding: 7px 10px; min-width: 260px; background: #fff; }
.studio__pickerlabel { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--grey-1); }

/* ---- the account menu --------------------------------------------------- */
/* Opens on click and on hover, leads with what this kind of account came for,
   and always ends in Sign out. */
.accountmenu { width: 250px; padding: 6px 0; }
.accountmenu__who {
  padding: 10px 16px 12px; border-bottom: 1px solid var(--grey-3);
  display: flex; flex-direction: column; gap: 2px;
}
.accountmenu__who strong { font-family: var(--display); font-size: 18px; }
.accountmenu__who span { font-size: 11.5px; color: var(--grey-1); }
.accountmenu__link {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 16px; font-size: 13.5px; font-weight: 500;
  background: transparent; border: 0; color: var(--ink);
}
.accountmenu__link:hover { background: var(--grey-4); }
.accountmenu__link--out {
  border-top: 1px solid var(--grey-3); margin-top: 6px; color: var(--grey-1); font-weight: 600;
}

/* The review thumbnail is the thing being judged, so it gets a column wide
   enough to be one rather than being squeezed by the text beside it. */
.reviewthumb { width: 54px; min-width: 54px; }
.table td:has(> a > .reviewthumb), .table td:has(> .reviewthumb) { width: 70px; }
/* The preset reasons are a wrapping row of short links, not a two-column grid
   of truncated sentences. */
.reviewbox .row.tiny { gap: 6px 14px; }

/* The reply row belongs to the conversation column, not to the whole width of
   the screen — a Send button a foot away from the words is not the same
   control as the one beside them. */
.messages__pane .chat__compose { padding: 10px 18px 16px; }
.messages__pane .chat__form {
  max-width: 640px; border: 1px solid var(--grey-3); align-items: stretch;
}
.messages__pane .chat__form:focus-within { border-color: var(--ink); }
.messages__pane .chat__clip { display: flex; align-items: center; }
.messages__pane .chat__chip:not(:empty) { max-width: 640px; border: 1px solid var(--grey-3); border-bottom: 0; }


/* ---------------------------------------------------------------- shop panel
   The shop tree, hung off its market's tab in the header rather than laid out
   in a second bar underneath it. Departments across, categories beneath each,
   and the whole-market links (All, Stores, Sale) on one row at the foot so
   they read as the panel's own footer rather than as another department.
   Wide enough to hold three or four columns, but never wider than the window. */
.shoppanel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px 16px;
  min-width: 420px;
  max-width: min(760px, calc(100vw - 32px));
}
.shoppanel__cols {
  display: grid;
  /* auto-fit with a 150px floor let three departments wrap to two columns in a
     panel wide enough for all three, which left Kids hanging under Guys with a
     column of white beside it. Columns are counted instead: as many as there
     are departments, up to four. */
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 8px 26px;
}
.shoppanel__cols:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(130px, 1fr)); }
.shoppanel__cols:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
.shoppanel__cols:has(> :only-child) { grid-template-columns: minmax(180px, 1fr); }
.shoppanel__dept {
  display: block;
  font-family: 'Barlow Condensed', Inter, sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 0 0 7px;
  margin-bottom: 6px;
  border-bottom: 2px solid var(--grey-3);
}
.shoppanel__dept:hover { border-bottom-color: var(--accent); }
.shoppanel__cats { display: flex; flex-direction: column; }
.shoppanel__cats a {
  padding: 5px 0;
  font-size: 14px;
  color: var(--grey-1);
}
.shoppanel__cats a:hover { color: var(--ink); text-decoration: underline; }
.shoppanel__extras {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding-top: 13px;
  border-top: 1px solid var(--grey-3);
  font-size: 14px;
  font-weight: 600;
}
.shoppanel__extras a:hover { text-decoration: underline; }
.shoppanel__all { color: var(--ink); }
.shoppanel__sale { color: var(--red); }
.shoppanel--used .shoppanel__dept:hover { border-bottom-color: var(--gold); }
.shoppanel--carnival .shoppanel__dept:hover { border-bottom-color: var(--violet); }

/* On a phone the panel is the width of the screen and the columns stack into
   two, which is as many as 360px holds without the categories wrapping. */
@media (max-width: 720px) {
  .shoppanel { min-width: 0; width: calc(100vw - 24px); padding: 16px; }
  .shoppanel__cols { grid-template-columns: repeat(2, 1fr); gap: 6px 16px; }
  .shoppanel__dept { font-size: 15px; }
}


/* -------------------------------------------------------- supplier names
   One class, everywhere a supplier is named outside a tile: the listing page,
   order headings, and the admin tables where a name is scanned down a column.
   Deliberately weight-and-colour only — no size change — so it reads as
   emphasis rather than as a heading in the middle of a paragraph. */
.sellername { font-weight: 700; color: var(--ink); }
.sellername--link { border-bottom: 2px solid var(--accent); }
.sellername--link:hover { border-bottom-color: var(--ink); }
.detail__side .sellername { font-size: 15px; letter-spacing: .01em; }
/* The store's name on a product page. It was set at body size and read as a
   caption; it is who the shopper is actually buying from, so it is sized to be
   the second thing they read after the photograph. */
.sellername--big {
  font-size: 19px;
  letter-spacing: .015em;
}
.detail__side .sellername--big { font-size: 19px; }
/* In a table the name still has to sit inside the row's own size. */
td.sellername { color: var(--ink); }


/* --------------------------------------------------------- listing details
   The reading half of a product page: the seller's own description, and the
   facts a shopper checks before committing. Full width and under the buying
   column, because these are read after the decision to look closer — not
   competing with the price for the same 400px. */
.detailmore {
  max-width: 1420px;
  margin: 0 auto;
  padding: 8px 20px 60px;
  border-top: 1px solid var(--grey-3);
}
.detailmore__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  padding-top: 28px;
}
@media (min-width: 900px) {
  .detailmore__grid { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 60px; }
}
.detailmore h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding-bottom: 9px;
  margin-bottom: 15px;
  border-bottom: 2px solid var(--ink);
}
/* 16px and a 1.65 measure — the size body copy is set at everywhere else that
   expects to be read rather than scanned. */
.detailmore__desc p {
  font-size: 16px;
  line-height: 1.65;
  max-width: 68ch;
}
.detailmore__desc p + p { margin-top: 13px; }
.detailmore__spec dl { display: flex; flex-direction: column; }
.detailmore__row {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--grey-3);
  font-size: 14.5px;
}
.detailmore__row dt { color: var(--grey-1); font-weight: 600; }
.detailmore__row dd { text-transform: capitalize; }

/* ============================================================================
   Colour, rating, fit — the things a shopper checks before committing.
   ========================================================================== */

/* ---- swatches ---------------------------------------------------------- */
.pickblock { display: flex; flex-direction: column; gap: 8px; }
.pickblock__label {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.swatches__name { font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 6px; color: var(--grey-1); }
.swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.swatch {
  width: 38px; height: 38px; padding: 3px; cursor: pointer;
  background: none; border: 2px solid transparent; border-radius: 50%;
}
.swatch:hover { border-color: var(--grey-2); }
.swatch--on { border-color: var(--ink); }
.swatch__dot { display: block; width: 100%; height: 100%; border-radius: 50%; }
/* A white or cream swatch has to be given an edge or it is a hole in the page. */
.swatch__dot--light { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22); }

/* ---- stars ------------------------------------------------------------- */
/* Each star is a grey character with a filled one clipped over it, so a 4.6
   average shows six tenths of the fifth star rather than rounding. */
.stars { display: inline-flex; gap: 2px; line-height: 1; color: var(--grey-3); font-size: 16px; }
.stars--sm { font-size: 13px; }
.stars__s { position: relative; display: inline-block; }
.stars__fill {
  position: absolute; left: 0; top: 0; overflow: hidden;
  color: var(--ink); white-space: nowrap;
}
.ratingline { display: inline-flex; align-items: center; gap: 9px; margin: -4px 0 2px; }
.ratingline:hover .ratingline__n { text-decoration: underline; }
.ratingline__n { font-size: 13px; font-weight: 600; }
.ratingline__n--none { color: var(--grey-1); font-weight: 500; }

/* ---- the fit bar ------------------------------------------------------- */
/* One line, one marker, three labels. It answers "will my usual size work",
   which is the question that drives most clothing returns. */
.fitbar { min-width: 190px; max-width: 380px; }
.fitbar__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 9px; }
.fitbar__title { font-weight: 700; font-size: 14px; }
.fitbar__basis { font-size: 11.5px; color: var(--grey-1); }
.fitbar__track { position: relative; height: 6px; background: var(--grey-3); border-radius: 3px; }
.fitbar__pin {
  position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink); transform: translate(-50%, -50%);
}
.fitbar__scale {
  display: flex; justify-content: space-between; margin-top: 7px;
  font-size: 11px; color: var(--grey-1);
}

/* ---- the reviews block ------------------------------------------------- */
.reviews { max-width: 1420px; margin: 0 auto; padding: 30px 20px 70px; border-top: 1px solid var(--grey-3); }
.reviews__h {
  font-family: var(--display); font-weight: 700; font-size: 24px;
  text-transform: uppercase; letter-spacing: .02em;
  padding-bottom: 10px; margin-bottom: 20px; border-bottom: 2px solid var(--ink);
}
.reviews__top {
  display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start;
  padding-bottom: 24px;
}
@media (min-width: 780px) {
  .reviews__top { grid-template-columns: 150px minmax(220px, 340px) 1fr; gap: 44px; }
}
.reviews__avg { font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1; margin-bottom: 6px; }
.reviews__spread { display: flex; flex-direction: column; gap: 5px; }
.spreadrow { display: grid; grid-template-columns: 26px 1fr 38px; gap: 9px; align-items: center; font-size: 12px; }
.spreadrow__k { color: var(--grey-1); }
.spreadrow__track { height: 9px; background: var(--grey-4); border: 1px solid var(--grey-3); }
.spreadrow__fill { display: block; height: 100%; background: var(--ink); }
.spreadrow__pct { color: var(--grey-1); text-align: right; }

/* ---- writing one ------------------------------------------------------- */
.reviewform { border-top: 1px solid var(--grey-3); padding-top: 14px; margin-bottom: 26px; }
.reviewform > summary {
  cursor: pointer; font-weight: 700; font-size: 14px; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.reviewform > summary::-webkit-details-marker { display: none; }
.reviewform > summary::after { content: '+'; color: var(--grey-1); font-size: 18px; }
.reviewform[open] > summary::after { content: '\2212'; }
.reviewform__body { display: flex; flex-direction: column; gap: 14px; max-width: 520px; padding: 18px 0 6px; }
.reviewform__body label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.starpick { display: flex; gap: 4px; }
.starpick__s {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 30px; line-height: 1; color: var(--grey-3);
}
.starpick__s.is-on { color: var(--ink); }
.starpick__s:hover { color: var(--grey-1); }

/* ---- what people wrote ------------------------------------------------- */
.reviews__list { display: flex; flex-direction: column; }
.review { padding: 20px 0; border-top: 1px solid var(--grey-3); max-width: 74ch; }
.review__head { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; }
.review__title { font-size: 15px; }
.review__by { font-size: 12px; color: var(--grey-1); margin-bottom: 9px; }
/* The one thing that makes a review worth the space it takes. */
.review__verified { font-weight: 700; color: var(--ink); }
.review__body { font-size: 15px; line-height: 1.6; }

/* ---- specifics list ---------------------------------------------------- */
.detailmore__specs { margin-top: 15px; padding-left: 19px; }
.detailmore__specs li { font-size: 15px; line-height: 1.6; margin-bottom: 4px; }

/* ---- the colourway editor (supplier side) ------------------------------- */
.ways { display: flex; flex-direction: column; gap: 14px; }
.way { border: 1px solid var(--grey-3); padding: 14px; }
.way__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.way__n { font-weight: 700; font-size: 13px; margin-right: auto; }
.way__strip { display: flex; flex-wrap: wrap; gap: 7px; margin: 9px 0; }
.way__strip img { width: 62px; height: 78px; object-fit: cover; border: 1px solid var(--grey-3); }

/* ============================================================================
   The stock portal.
   ========================================================================== */
.stockflag {
  display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.stockflag--ok  { background: var(--grey-4); color: var(--grey-1); }
.stockflag--low { background: var(--gold); color: var(--ink); }
.stockflag--out { background: var(--red); color: #fff; }

.stocktable td { vertical-align: middle; }
/* A row you can see the state of without reading the numbers. The tint is
   deliberately faint — a table where every other row shouts is a table nobody
   scans. */
.stockrow--low td { background: rgba(243, 198, 35, .10); }
.stockrow--out td { background: rgba(200, 16, 46, .07); }
.stockin { width: 84px; padding: 5px 7px; font-size: 13px; }
.stockin--sku { width: 130px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.stockacts { white-space: nowrap; }
.stockacts .btn { margin-right: 5px; }

.lowlist { display: flex; flex-direction: column; }
.lowlist__row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--grey-3);
}
.stalelist { padding-left: 18px; margin-top: 8px; }
.stalelist li { font-size: 13px; color: var(--grey-1); margin-bottom: 3px; }

.moves { margin-top: 22px; border-top: 2px solid var(--ink); padding-top: 14px; }
.moves__down { color: var(--red); font-weight: 700; }
.moves__up { color: var(--green, #2E7D48); font-weight: 700; }

/* The key is shown once, so it is set apart and made obviously copyable. */
.keybox { border: 2px solid var(--ink); }
.keybox__key {
  display: block; margin-top: 10px; padding: 12px; background: var(--grey-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  word-break: break-all; user-select: all;
}
.apidoc {
  background: var(--ink); color: #EDEDED; padding: 14px; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  line-height: 1.6; margin: 10px 0;
}

/* ---------------------------------------------------- the summary panel ----
   Under the price and size selector: how it fits, what people made of it, and
   the few facts that otherwise send a shopper off to ask a question instead of
   ordering. Everything in it is a shortened view of a full section further
   down — it is a glance, not a second copy. */
.psum {
  padding: 18px 0 20px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* The fit bar is the reason this panel exists, so it sits at the top and is
   allowed the full width of the column here, unlike in the reviews block. */
.psum .fitbar { max-width: none; }
.psum__rating { display: inline-flex; align-items: center; gap: 8px; }
.psum__rating:hover .psum__n { text-decoration: underline; }
.psum__n { font-size: 13px; font-weight: 600; }
.psum__rating--none .psum__n { color: var(--grey-1); font-weight: 500; }
.psum__quote {
  font-size: 13px; line-height: 1.5; color: var(--grey-1);
  margin-top: -4px;
}
.psum__by { font-weight: 600; color: var(--ink); }
.psum__facts { margin: 0; padding-left: 17px; }
.psum__facts li { font-size: 13px; line-height: 1.55; color: var(--grey-1); }
.psum__more {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; border-bottom: 2px solid var(--accent); align-self: flex-start;
}
.psum__more:hover { border-bottom-color: var(--ink); }

/* --------------------------------------------- rows under the product ----
   More from this seller / You may also like. Same rail and same tiles as the
   landing page, because a recommendation that looks different from a product
   reads as an advert. */
.alsorow {
  max-width: 1420px; margin: 0 auto;
  padding: 6px 0 0;
  border-top: 1px solid var(--grey-3);
}
.alsorow .section__head { padding-left: 24px; padding-right: 24px; }
/* Fixed-width tiles, not minmax(...,1fr).
   The landing rails use 1fr because they always carry more tiles than fit, so
   the track overflows and every column lands on its minimum. These rows carry
   four or five, which does not overflow — 1fr then divided the whole width
   between them and produced 678px tiles, more than twice the landing page's.
   A recommendation that renders bigger than the products it is recommending
   reads as an advert. Same width as the landing rail, always. */
.alsorow .rail__track {
  padding-top: 4px;
  grid-auto-columns: 232px;
  justify-content: start;
}
@media (min-width: 1500px) { .alsorow .rail__track { grid-auto-columns: 288px; } }
@media (max-width: 899px)  { .alsorow .rail__track { grid-auto-columns: 60vw; } }

/* ---------------------------------------------------------------- Q & A ---
   Deliberately plain. It is the last thing on the page and the least-read, so
   it gets width and quiet rather than a panel competing with the reviews. */
.qanda { max-width: 1420px; margin: 0 auto; padding: 26px 24px 70px; border-top: 1px solid var(--grey-3); }
.qanda__ask { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin-top: 16px; }
.qanda__ask textarea { width: 100%; }
.qanda__ask .btn { align-self: flex-start; }


/* ------------------------------------------------- details, right column ----
   Description, product details and specifics, collapsed into the buying column
   instead of a band under the photograph. Plain disclosure rows — no panels,
   no shadows: they sit under a price and a button and must not compete. */
.dpanels { margin-top: 8px; }
/* The seller's own words, open, at reading size — not behind a triangle. */
.dpanels__copy { padding: 18px 0; }
.dpanels__copy p { font-size: 15px; line-height: 1.65; max-width: 62ch; }
.dpanels__copy p + p { margin-top: 12px; }
.dpanel { border-bottom: 1px solid var(--grey-3); }
.dpanel > summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  padding: 17px 0; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.dpanel > summary::-webkit-details-marker { display: none; }
.dpanel > summary::after { content: '+'; font-size: 19px; font-weight: 400; color: var(--grey-1); }
.dpanel[open] > summary::after { content: '\2212'; }
.dpanel__body { padding: 2px 0 20px; }
.dpanel__body p { font-size: 14.5px; line-height: 1.6; }
.dpanel__body p + p { margin-top: 10px; }
.dpanel__specs { padding-left: 18px; }
.dpanel__specs li { font-size: 14.5px; line-height: 1.6; margin-bottom: 4px; }
.dpanel__dl { display: flex; flex-direction: column; }
.dpanel__row {
  display: grid; grid-template-columns: 124px 1fr; gap: 14px;
  padding: 9px 0; font-size: 14px;
  border-bottom: 1px solid var(--grey-4);
}
.dpanel__row:last-child { border-bottom: 0; }
.dpanel__row dt { color: var(--grey-1); font-weight: 600; }
.dpanel__row dd { text-transform: capitalize; }

/* ------------------------------------------------- the photograph brief ----
   What a supplier is asked to produce, before how to produce it. Numbered,
   because the order matters: image 1 is the catalogue tile and image 2 is what
   a shopper sees on hover, and a seller who does not know that shoots two
   near-identical front views. */
.photohelp { border: 1px solid var(--ink); padding: 16px 18px; margin: 10px 0 18px; }
.photohelp__head {
  font-family: var(--display); font-weight: 700; font-size: 18px;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px;
}
.shots { list-style: none; padding: 0; margin: 14px 0 4px; counter-reset: shot; }
.shots__item {
  counter-increment: shot;
  position: relative; padding: 0 0 14px 34px; margin-bottom: 12px;
  border-bottom: 1px solid var(--grey-3);
}
.shots__item:last-child { border-bottom: 0; margin-bottom: 0; }
.shots__item::before {
  content: counter(shot);
  position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.shots__title { font-weight: 700; font-size: 14.5px; margin-bottom: 3px; }
.shots__what { font-size: 14px; margin-bottom: 4px; }
.shots__why { font-size: 13px; color: var(--grey-1); line-height: 1.55; }

/* A proposal store: shown to a designer before they sign up. */
.previewband { background: var(--brand, #6B2FA8); color: #fff; padding: 10px 20px; font-size: 14px; line-height: 1.45; }
.note--preview { border-left: 3px solid var(--brand, #6B2FA8); }

/* ------------------------------------------------------- phone nav --- */
/* Tillys' phone header: menu, logo, then search / account / bag. Hidden on
   anything wider than a phone, where the full nav bar stays as it is. */
.mnav__burger, .mnav__icons { display: none; }
@media (max-width: 720px) {
  :root { --nav-h: 60px; }
  .nav { align-items: center; border-bottom: 1px solid var(--grey-3); }
  .nav__tabs, .nav__right { display: none !important; }
  .mnav__burger {
    display: flex; flex-direction: column; justify-content: center; gap: 7px;
    width: 56px; height: 100%; padding: 0 14px; background: none; border: 0; cursor: pointer;
  }
  .mnav__burger span { display: block; height: 2px; background: var(--ink); }
  .nav__brand {
    background: none; color: var(--ink); padding: 0 4px; height: 100%;
    font-size: 30px; font-style: italic; letter-spacing: -0.03em; text-transform: uppercase;
  }
  .mnav__icons { display: flex; align-items: center; margin-left: auto; padding-right: 8px; height: 100%; }
  .mnav__icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; background: none; border: 0; color: var(--ink); cursor: pointer; position: relative;
  }
  .mnav__icon--bag .bagicon svg { width: 28px; height: 28px; }
  .searchbar { display: none; }
  body.has-msearch .searchbar { display: block; }
  body.has-mdrawer { overflow: hidden; }
}
.mdrawer {
  position: fixed; inset: 0; z-index: 100; background: var(--paper);
  display: flex; flex-direction: column;
}
.mdrawer__head {
  display: flex; align-items: stretch; justify-content: space-between;
  height: 64px; border-bottom: 2px solid var(--grey-3); flex: none;
}
.mdrawer__title { display: flex; align-items: center; padding: 0 20px; font-size: 22px; font-weight: 700; }
.mdrawer__back {
  display: flex; align-items: center; gap: 6px; padding: 0 14px; background: none; border: 0;
  font-size: 20px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.mdrawer__close {
  width: 64px; background: none; border: 2px solid var(--ink); font-size: 24px; line-height: 1; cursor: pointer;
}
.mdrawer__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 40px; }
.mdrawer__account { padding: 8px 0; border-bottom: 2px solid var(--grey-3); }
.mdrawer__list { padding: 4px 0; }
.mdrawer__list + .mdrawer__list { border-top: 2px solid var(--grey-3); }
.mdrawer__row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 0 24px 0 44px; min-height: 60px; background: none; border: 0; text-align: left;
  font-size: 18px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); cursor: pointer;
}
.mdrawer__row--acct { padding-left: 20px; min-height: 48px; font-size: 17px; }
.mdrawer__row--sub { min-height: 48px; font-size: 15px; font-weight: 500; color: var(--grey-1); }
.mdrawer__row--all { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.mdrawer__row--new .mdrawer__label { color: var(--red); }
.mdrawer__row--used .mdrawer__label { color: #9A7A00; }
.mdrawer__row--carnival .mdrawer__label { color: var(--violet); }
.mdrawer__ico { display: flex; width: 26px; justify-content: center; }
.mdrawer__label { flex: 1; }
.mdrawer__chev { display: flex; }
.mdrawer__pad { padding: 20px; }

/* ------------------------------------------------ product page, phone --- */
.detail__crumbs, .mbuybar { display: none; }
.detail__head.stack > * + * { margin-top: 18px; }
@media (max-width: 720px) {
  .detail { display: flex; flex-direction: column; }
  .detail__side { display: contents; }
  .detail__side > * { margin-left: 16px; margin-right: 16px; }
  .detail__head { order: 1; }
  .detail__media { order: 2; padding: 0 16px; margin-top: 14px; }
  .detail__side > :not(.detail__head) { order: 3; }
  .detail__side > .detail__head + * { margin-top: 18px; }
  .detail__crumbs {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    margin: 0 -16px; padding: 18px 16px; background: var(--grey-4);
    font-size: 14px; letter-spacing: .04em;
  }
  .detail__head .marketmark { display: none; }
  .detail__head h1 { font-size: 24px !important; line-height: 1.2; margin-top: 16px !important; }
  .detail__head > .small { font-size: 14px; }
  .detail__img { aspect-ratio: auto; height: auto; max-height: none; overflow: visible; }
  .detail__img > img { aspect-ratio: 4 / 5; height: auto; }
  .gallery { gap: 12px; }
  .gallery__main { height: auto; aspect-ratio: 4 / 5; }
  .gallery__thumbs { gap: 10px; }
  .detail__media .gallery__thumbs { padding-top: 0; }
  .gallery__thumb { width: calc((100vw - 32px - 30px) / 4.25); height: auto; aspect-ratio: 4 / 5; }
  .detail__price { font-family: inherit; font-weight: 500; font-size: 26px; margin-top: 14px; }
  .pickblock__label { font-size: 16px; }
  .sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .size { padding: 0; height: 52px; font-size: 16px; font-weight: 500; border: 1.5px solid var(--ink); }
  .detail__side .btn--block { min-height: 54px; font-size: 17px; }
  .detail__chat { max-width: none; }
  body:has(.mbuybar) .foot { padding-bottom: 110px; }
  .mbuybar {
    display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); background: var(--paper);
    border-top: 1px solid var(--grey-3);
  }
  .mbuybar img, .mbuybar .ph { width: 52px; height: 52px; object-fit: cover; background: var(--grey-4); }
  .mbuybar__name { font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .mbuybar__price { font-size: 17px; }
  .mbuybar__btn {
    display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px;
    background: var(--ink); color: #fff; border: 0; font-size: 16px; font-weight: 600; cursor: pointer;
  }
}

/* Margins on the phone column; width:100% would push buttons past the edge. */
@media (max-width: 720px) { .detail__side > * { width: auto; max-width: none; } }

/* ------------------------------------------------------------ bag page --- */
/* Full width and left-aligned on a laptop, not a narrow centred column. */
.bagpage { padding: 26px 32px 60px; width: 100%; }
@media (max-width: 720px) { .bagpage { padding: 22px 16px 60px; } }

/* ---------------------------------------------------------- bag drawer --- */
.bagdrawer { position: fixed; inset: 0; z-index: 110; pointer-events: none; }
.bagdrawer__scrim { position: absolute; inset: 0; background: rgba(13,13,13,.45); opacity: 0; transition: opacity .25s ease; }
.bagdrawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  background: var(--paper); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s ease;
  border-left: 1px solid var(--ink);
}
.bagdrawer.is-open { pointer-events: auto; }
.bagdrawer.is-open .bagdrawer__scrim { opacity: 1; }
.bagdrawer.is-open .bagdrawer__panel { transform: none; }
body.has-bagdrawer { overflow: hidden; }
.bagdrawer__head { display: flex; align-items: center; justify-content: space-between; height: 64px; padding-left: 20px; border-bottom: 1px solid var(--grey-3); flex: none; }
.bagdrawer__head h2 { font-size: 26px; }
.bagdrawer__close { width: 64px; height: 64px; background: none; border: 0; border-left: 1px solid var(--grey-3); font-size: 22px; cursor: pointer; }
.bagdrawer__list { flex: 1; overflow-y: auto; padding: 0 20px; }
.bagdrawer__empty { padding: 40px 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.bagdrawer__line { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--grey-3); }
.bagdrawer__line img, .bagdrawer__line .ph { width: 80px; aspect-ratio: 4 / 5; object-fit: cover; background: var(--grey-4); display: block; }
.bagdrawer__info { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bagdrawer__title { font-weight: 700; }
.bagdrawer__row { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.bagdrawer__price { font-weight: 700; white-space: nowrap; }
.bagdrawer__foot { padding: 16px 20px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ink); display: flex; flex-direction: column; gap: 10px; flex: none; }
.qty--sm { height: 30px; }
.qty--sm button { width: 30px; font-size: 16px; }
.qty--sm span { min-width: 30px; }
@media (max-width: 720px) {
  .bagdrawer__panel { width: 100%; border-left: 0; }
  .bagdrawer__head { height: 64px; }
  .bagdrawer__close { border: 2px solid var(--ink); }
}