/* KunozDrop — COD fulfilment platform
   Palette: ink navy, brass, bone, signal green, flag red
   Type: Bricolage Grotesque (display) / Public Sans (body) / JetBrains Mono (codes) */

:root {
  --ink: #101010;
  --ink-2: #1D1D1F;
  --brass: #EE6B07;
  --brass-soft: #FDE3CC;
  --bone: #FFFFFF;
  --signal: #157F5C;
  --alert: #C0392B;
  --muted: #51515A;
  --line: rgba(16, 16, 16, .10);

  --f-display: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
  --f-body: "Public Sans", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --w: min(1180px, 92vw);
  --r: 4px;
}

* { box-sizing: border-box; }
html {
  /* The header is sticky and 78px tall. Without this, jumping to an anchor
     parks the target underneath it — the page moves, the heading is hidden,
     and it reads as a link that went to the wrong place. */
  scroll-padding-top: 92px;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { width: var(--w); margin-inline: auto; }

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.05;
                 letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; }

.eyebrow {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass); margin-bottom: 1rem;
}
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.6rem; border-radius: var(--r); border: 1px solid transparent;
  font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
/* White on the accent measures 3.11, which is fine for large or heavy text and
   thin for small. Rather than darken the orange away from the brand, the label
   is set heavier — that is the condition the guideline actually asks for, and
   the hover state goes darker still. */
.btn-brass { background: var(--brass); color: #fff; font-weight: 700; }
.btn-brass:hover { background: #C85007; }
/* Visible before the mouse arrives. This was drawn against a dark hero and
   is used on white almost everywhere, where it read as nothing at all. */
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--brass); color: var(--brass); }
.btn-ink { background: var(--ink); color: var(--bone); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: #fff; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 2rem; height: 78px; }
.brand { font-family: var(--f-display); font-weight: 800; font-size: 1.3rem;
         letter-spacing: -.03em; }
.brand span { color: var(--brass); }
.nav { display: flex; gap: 1.6rem; margin-inline-start: auto; font-size: .92rem;
       align-items: center; }
/* Scoped to links that are not buttons. Without :not(.btn) this rule is more
   specific than .btn-brass and quietly repaints every button in the header —
   which is exactly what it was doing. */
.nav a:not(.btn) { color: var(--ink); }
.nav a:not(.btn):hover { color: var(--brass); }
/* The current page is marked with a rule under it, the way the reference does. */
.nav a.on { color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 3px; }

/* ---------- announcement ticker ----------
   Short claims sliding past the top of the page. It repeats twice and slides
   half its width, so the loop hands over without a gap. */
.ticker { background: var(--ink); color: var(--bone); overflow: hidden;
          padding: .62rem 0; font-size: .82rem; }
.ticker-track { display: flex; width: max-content;
                animation: kd-ticker 42s linear infinite; }
.ticker-set { display: flex; align-items: center; gap: 1.4rem; padding-inline-end: 1.4rem;
              white-space: nowrap; }
.ticker-set i { color: var(--brass); font-style: normal; font-size: .7rem; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes kd-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker-set:nth-child(2) { display: none; }
}

/* ---------- hero ----------
   Words left, photograph right, matching the layout in the reference: a dash
   before the eyebrow, the brand name coloured inside the headline, three
   features under it, and a filled pill beside an outlined one.
   ------------------------------------------- */
.hero { background: #fff; padding: 3.5rem 0 4.5rem; overflow: hidden; }
.hero-split { display: grid; grid-template-columns: 1fr minmax(0, 560px);
              gap: 3.5rem; align-items: center; }

.hero .eyebrow { display: flex; align-items: center; gap: .7rem;
                 color: var(--brass); font-weight: 700; }
.hero .eyebrow i { width: 26px; height: 2px; background: var(--brass);
                   display: inline-block; }

.hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: -.035em;
           line-height: 1.12; margin-top: .9rem; }
.hero h1 em { font-style: normal; color: var(--brass); }
.hero .lede { font-size: 1rem; color: var(--muted); max-width: 44ch;
              margin-top: 1rem; line-height: 1.6; }

.hero-points { display: grid; grid-template-columns: repeat(3, 1fr);
               gap: 1.6rem; margin-top: 2.2rem; }
.hpoint { display: flex; gap: .7rem; align-items: flex-start; }
.hpoint-icon { flex: none; width: 40px; height: 40px; border-radius: 12px;
               background: #FDF0E6; color: var(--brass);
               display: grid; place-items: center; }
.hpoint-icon svg { width: 20px; height: 20px; }
/* A thin diagonal reads smaller than a solid outline at the same measured
   size, so it is drawn a little larger. This is the same correction a type
   designer makes to a round letter beside a square one — matching the numbers
   is not the same as matching what the eye sees. */
.hpoint-icon.wide svg { width: 22px; height: 22px; }
.hpoint strong { display: block; font-size: .9rem; line-height: 1.25;
                 letter-spacing: -.01em; }
/* Scoped to the caption. Without :not(), ".hpoint span" outranks
   ".hpoint-icon" — a class plus an element beats a class alone — and the icon
   quietly takes the grey meant for the text below it. */
.hpoint div span { display: block; font-size: .82rem; color: var(--muted);
                   margin-top: .3rem; line-height: 1.5; }

.hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2.4rem; }
.btn-pill { border-radius: 100px; padding: .9rem 1.7rem; font-size: .92rem; }
.btn-outline { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.btn-outline:hover { border-color: var(--brass); color: var(--brass); }

/* The poster is shown whole. It has its own frame and composition, so it gets
   no card around it and nothing laid over the top. */
.hero-art { position: relative; }
.hero-art img { width: 100%; height: auto; display: block; border-radius: 18px; }

@media (max-width: 980px) {
  .hero { padding: 2.2rem 0 3.5rem; }
  .hero-split { grid-template-columns: 1fr; gap: 2.4rem; }
  .hero-art { max-width: 480px; margin-inline: auto; }
  .hero-points { grid-template-columns: 1fr; gap: 1.1rem; }
}
@media (max-width: 560px) {
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; justify-content: center; }
}

/* ---------- the catalogue panel ----------
   The goods sit on one card that overlaps the hero, rather than bleeding off
   both edges of the window. A contained panel reads as a shelf somebody
   arranged; full-bleed reads as an accident.

   One row. It was two travelling opposite ways for a while, which was busier
   than it was useful — the eye cannot follow both, and neither is easy to
   click. The list is rendered twice and the track slides exactly half its
   width, so the second copy is in place the instant the first leaves and the
   seam never shows.

   Everything about motion fights clicking, so a lane stops on hover and on
   keyboard focus, and does not move at all for anyone who has asked their
   system to reduce motion.
   ------------------------------------------- */
/* The panel used to climb into a dark hero. On a light page it sits below
   instead — overlapping only reads as deliberate against a contrasting band. */
.panel-band { position: relative; z-index: 2; padding: 0 0 4.5rem; }

.panel {
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(16,16,16,.08);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(16,16,16,.22);
  padding: 0 0 1.2rem;
  overflow: hidden;
  backdrop-filter: blur(6px);
}

.panel-tabs { display: flex; gap: 0; padding: 0 1.4rem; }
.panel-tab {
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  padding: .85rem 1.2rem; position: relative;
}
.panel-tab.on {
  color: var(--ink); font-weight: 700;
  background: #fff; border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 8px rgba(16,16,16,.06);
}

.panel-search {
  display: flex; align-items: center; gap: .6rem;
  margin: .6rem 1.4rem 1.3rem; padding: .45rem .5rem .45rem 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: 100px;
}
.panel-search-tag {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em;
  color: var(--muted); padding-inline-end: .8rem;
  border-inline-end: 1px solid var(--line); white-space: nowrap;
}
.panel-search input {
  flex: 1; min-width: 0; border: 0; padding: .65rem .3rem;
  font-family: inherit; font-size: .95rem; background: transparent; color: var(--ink);
}
.panel-search input:focus { outline: none; }
.panel-search:focus-within { border-color: var(--brass); }
.panel-search .btn { border-radius: 100px; padding: .6rem 1.6rem; }

/* The row steps a screenful at a time rather than crawling. A crawl never lets
   a product sit still long enough to read, which defeats the point of putting
   it on the front page at all. */
.lane-wrap { position: relative; display: flex; align-items: center; gap: .4rem;
             padding: 0 .6rem; }
.lane { overflow: hidden; padding: .3rem 0; flex: 1; min-width: 0; }
.lane-track { display: flex; width: max-content; will-change: transform; }
/* One row on a wide screen, two on a phone. Tile width comes from JavaScript
   rather than a guess, because the page has to be exactly as wide as the row —
   anything else leaves a sliver of the next product showing, which is the one
   thing a stepped carousel must not do. */
.lane-set {
  display: grid;
  grid-template-rows: auto;
  grid-auto-flow: column;
  grid-auto-columns: var(--tile-w, 190px);
  gap: .9rem;
  padding-inline-end: .9rem;
}
/* A phone held upright gets two columns stacked two deep — four products a
   page. Landscape is wider and much shorter, so it takes four across in one
   row instead; two rows would not fit on the screen. */
@media (max-width: 560px) {
  .lane-set { grid-template-rows: repeat(2, auto); gap: .7rem; padding-inline-end: .7rem; }
}

.lane-arrow {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 1.35rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; padding-bottom: 3px;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.lane-arrow:hover { border-color: var(--brass); background: var(--brass); color: #fff; }
.lane-arrow:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.ptile {
  /* No width here. The grid column decides it, and the column is measured
     from the row so a page divides evenly. A fixed width was overriding the
     measurement further up this file and making tiles wider than their
     column, which is what pushed them over each other on a phone. */
  min-width: 0;
  display: flex; flex-direction: column; gap: .4rem;
  text-decoration: none; color: inherit;
}
.ptile-img {
  position: relative; display: block; aspect-ratio: 1; border-radius: 8px;
  overflow: hidden; background: #fff; border: 1px solid var(--line);
  transition: border-color .18s ease, transform .18s ease;
}
.ptile:hover .ptile-img { border-color: var(--brass); transform: translateY(-3px); }
.ptile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ptile-img .noimg { position: absolute; inset: 0; display: grid; place-items: center;
                    font-family: var(--f-display); font-size: 2.2rem; font-weight: 800;
                    color: var(--line); }
.ptile-tag {
  position: absolute; top: .4rem; inset-inline-start: .4rem;
  background: var(--brass); color: #fff; font-family: var(--f-mono);
  font-size: .54rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .16rem .4rem; border-radius: 2px; font-weight: 700;
}
.ptile-play {
  position: absolute; bottom: .4rem; inset-inline-start: .4rem;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(16,16,16,.72); color: #fff; font-size: .5rem;
  display: grid; place-items: center; padding-inline-start: 2px;
}
.ptile-name {
  font-size: .8rem; line-height: 1.3; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ptile-price { font-family: var(--f-mono); font-size: .84rem; font-weight: 700; }

.panel-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin: 1.2rem 1.4rem 0;
  padding-top: 1rem; border-top: 1px solid var(--line);
}
.panel-hint { font-size: .78rem; color: var(--muted); max-width: 60ch; }
.panel-more { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .1em;
              text-transform: uppercase; color: var(--brass); white-space: nowrap; }
.panel-more:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  /* No stepping, no transition — just a row somebody can push with a finger. */
  .lane { overflow-x: auto; scroll-snap-type: x mandatory; }
  .lane-track { transform: none !important; transition: none !important; }
  .lane-set:nth-child(2) { display: none; }
  /* Nothing is stepping here, so the columns need a size of their own rather
     than the one JavaScript measures for a page. */
  .lane-set { grid-auto-columns: 165px; }
  .ptile { scroll-snap-align: start; }
  .lane-arrow { display: none; }
}

@media (max-width: 720px) {
  .panel-search { flex-wrap: wrap; border-radius: 14px; padding: .8rem; }
  .panel-search-tag { border: 0; padding: 0; }
  .panel-search input { width: 100%; flex-basis: 100%; }
  .panel-search .btn { width: 100%; justify-content: center; }
  .lane-wrap { padding: 0 .2rem; gap: .2rem; }
  .lane-arrow { width: 28px; height: 28px; font-size: 1.15rem; }
  .ptile-name { -webkit-line-clamp: 2; font-size: .76rem; }
  .ptile-price { font-size: .8rem; }
}

/* ---------- product shelves ---------- */
.shelf { padding: 4rem 0; }
/* The first shelf climbs into the hero, so what is on the shelves is visible
   without scrolling — that is the question a visitor actually arrives with. */
.shelf-lift { margin-top: -4.5rem; padding-top: 0; position: relative; z-index: 2; }

.shelf-head { display: flex; align-items: flex-end; justify-content: space-between;
              gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.shelf-lift .shelf-head, .marquee-band.shelf-lift .shelf-head { color: var(--bone); }
.marquee-band.shelf-lift { margin-top: -4.5rem; position: relative; z-index: 2; }
.shelf-lift .shelf-head .eyebrow { color: var(--brass); }
.shelf-head h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0; }
.shelf-more { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .1em;
              text-transform: uppercase; color: var(--brass); white-space: nowrap; }
.shelf-more:hover { text-decoration: underline; }

.shelf-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.tile {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile:hover { transform: translateY(-4px); border-color: var(--brass);
              box-shadow: 0 12px 32px rgba(16,16,16,.14); }
.tile-img { position: relative; aspect-ratio: 1; background: var(--bone);
            display: grid; place-items: center; overflow: hidden; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; }
.tile-img .noimg { font-family: var(--f-display); font-size: 2.6rem; font-weight: 800;
                   color: var(--line); }
.tile-badge {
  position: absolute; top: .55rem; inset-inline-start: .55rem;
  background: var(--brass); color: #fff; font-family: var(--f-mono);
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .48rem; border-radius: 2px; font-weight: 700;
}
.tile-badge.vid { inset-inline-start: auto; inset-inline-end: .55rem;
                  background: rgba(16,16,16,.88); color: var(--brass); }
.tile-body { padding: .85rem .95rem 1rem; display: flex; flex-direction: column;
             gap: .2rem; flex: 1; }
.tile-body h3 { font-size: .9rem; line-height: 1.28; margin: 0; }
.tile-cat { font-size: .72rem; color: var(--muted); margin: 0; }
.tile-price { font-family: var(--f-mono); font-size: .95rem; font-weight: 700;
              margin: auto 0 0; padding-top: .5rem; }
.tile-price .from { display: block; font-family: var(--f-body); font-size: .68rem;
                    font-weight: 400; color: var(--muted); letter-spacing: 0; }

.shelf-note { margin-top: 1.6rem; font-size: .88rem; color: var(--muted); }
.shelf-note a { color: var(--brass); text-decoration: underline; }

@media (max-width: 1100px) { .shelf-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
  .hero { padding: 3.5rem 0 5rem; }
  .hero-facts { gap: 1.6rem 2rem; }
  .shelf-row { grid-template-columns: repeat(2, 1fr); }
  .shelf-lift { margin-top: -3rem; }
}

.section { padding: 5.5rem 0; }
.section-dark { background: var(--ink); color: var(--bone); }
.section-dark h2 { color: var(--bone); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.8rem; transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--brass); transform: translateY(-2px); }
.card .tag { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em;
             text-transform: uppercase; color: var(--brass); }
.card p { color: var(--muted); font-size: .95rem; margin-bottom: 0; }

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px;
           background: var(--line); border: 1px solid var(--line); }
.figure { background: var(--bone); padding: 1.8rem; }
.figure .n { font-family: var(--f-display); font-size: 2.4rem; font-weight: 800;
             letter-spacing: -.03em; }
.figure .k { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em;
             text-transform: uppercase; color: var(--muted); }

.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .35rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .75rem .9rem; border: 1px solid var(--line);
  border-radius: var(--r); font-family: inherit; font-size: .95rem; background: #fff;
}
.field input:focus, .field select:focus { border-color: var(--brass); outline: none; }
.help, .errorlist { font-size: .8rem; color: var(--muted); list-style: none; padding: 0; }
.errorlist { color: var(--alert); }

.portal { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.side { background: var(--ink); color: var(--bone); padding: 1.6rem 1.2rem; }
.side .brand { display: block; margin-bottom: 2rem; }
.side nav a { display: block; padding: .6rem .75rem; border-radius: var(--r);
              font-size: .92rem; color: rgba(255,255,255,.75); }
.side nav a:hover, .side nav a.active { background: rgba(238,107,7,.16); color: var(--brass); }
.main { padding: 2.2rem 2.4rem; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem;
         margin-bottom: 2rem; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.3rem; }
.stat .k { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em;
           text-transform: uppercase; color: var(--muted); }
.stat .v { font-family: var(--f-display); font-size: 1.9rem; font-weight: 700;
           letter-spacing: -.02em; margin-top: .3rem; }

table { width: 100%; border-collapse: collapse; background: #fff;
        border: 1px solid var(--line); font-size: .9rem; }
th { text-align: start; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em;
     text-transform: uppercase; color: var(--muted); padding: .8rem 1rem;
     border-bottom: 1px solid var(--line); }
td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }

.pill { display: inline-block; padding: .18rem .6rem; border-radius: 100px;
        font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em;
        text-transform: uppercase; background: rgba(16,16,16,.08); }
.pill.delivered { background: rgba(21,127,92,.14); color: var(--signal); }
.pill.returned, .pill.cancelled { background: rgba(192,57,43,.12); color: var(--alert); }
.pill.new, .pill.confirming { background: rgba(238,107,7,.18); color: #8A6413; }

.messages { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.messages li { padding: .8rem 1rem; border-inline-start: 3px solid var(--signal);
               background: rgba(21,127,92,.08); border-radius: var(--r); }

.site-foot { background: var(--ink); color: rgba(255,255,255,.7); padding: 3.5rem 0 2rem;
             font-size: .9rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.site-foot h4 { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em;
                text-transform: uppercase; color: var(--brass); }
.site-foot a:hover { color: var(--brass); }
.foot-bar { margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.12);
            display: flex; justify-content: space-between; font-family: var(--f-mono);
            font-size: .75rem; flex-wrap: wrap; gap: .6rem; }

@media (max-width: 900px) {
  .hero-grid, .foot-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 3rem; }
  .portal { grid-template-columns: 1fr; }
  .side { display: flex; align-items: center; gap: 1rem; overflow-x: auto; padding: 1rem; }
  .side .brand { margin: 0; }
  .side nav { display: flex; gap: .4rem; }
  .main { padding: 1.4rem; }
  .nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ===========================================================================
   Public product catalog
   =========================================================================== */

.catalog-head { background: #fff; border-bottom: 1px solid var(--line); padding: 3rem 0 2rem; }

.filters {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1.8rem;
}
.filters input[type="search"], .filters select {
  padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--r);
  font-family: inherit; font-size: .9rem; background: var(--bone);
}
.filters input[type="search"] { min-width: 230px; flex: 1 1 230px; }
.filters input:focus, .filters select:focus { border-color: var(--brass); outline: none; }
.filters .check { display: flex; align-items: center; gap: .4rem; font-size: .88rem;
                  white-space: nowrap; }
.filters .clear { font-size: .85rem; color: var(--muted); text-decoration: underline; }

.gate {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--ink); color: var(--bone); padding: 1.1rem 1.4rem;
  border-radius: var(--r); margin-bottom: 2rem;
}
.gate .muted { color: rgba(255,255,255,.65); }
.gate strong { display: block; }
.gate > div { flex: 1 1 320px; }
.gate .btn { margin-inline-start: auto; }
.gate.solo { display: block; margin: 1.6rem 0; }
.gate.solo .btn { margin: 1rem 0 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.2rem; }

.pcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pcard:hover { border-color: var(--brass); transform: translateY(-3px);
               box-shadow: 0 8px 24px rgba(16,16,16,.08); }
.pcard-img { position: relative; aspect-ratio: 4 / 3; background: var(--bone);
             display: grid; place-items: center; overflow: hidden; }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; }
.pcard-img .noimg { font-family: var(--f-display); font-size: 2.6rem; font-weight: 800;
                    color: var(--line); }
.badge {
  position: absolute; top: .6rem; inset-inline-start: .6rem;
  background: var(--brass); color: #fff; font-family: var(--f-mono);
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .22rem .5rem; border-radius: 2px; font-weight: 700;
}
.badge.inline { position: static; display: inline-block; margin-inline-start: .6rem; }
.pcard-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; }
.sku { font-size: .68rem; letter-spacing: .06em; color: var(--muted); }
.pcard-body h3 { font-size: .98rem; margin: 0; line-height: 1.25; }
.prices { display: flex; align-items: baseline; gap: .45rem; margin-top: .3rem; }
.prices .cost { color: var(--muted); font-size: .85rem; }
.prices .arrow { color: var(--line); }
.prices .sell { font-weight: 700; font-size: 1.05rem; }
.prices.locked { font-size: .85rem; }
.margin { font-size: .78rem; color: var(--signal); font-weight: 600; }

.empty { grid-column: 1 / -1; text-align: center; padding: 4rem 1rem; }

.pager { display: flex; align-items: center; justify-content: center; gap: 1.4rem;
         margin-top: 3rem; font-size: .9rem; }
.pager a { color: var(--brass); font-weight: 600; }
.pager .mono { color: var(--muted); font-size: .82rem; }

/* --- detail --- */
.crumbs { font-size: .84rem; color: var(--muted); margin-bottom: 1.6rem; }
.crumbs a:hover { color: var(--brass); }

.detail { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.gallery .main { width: 100%; aspect-ratio: 1; object-fit: cover;
                 border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.noimg-lg { display: grid; place-items: center; background: var(--bone); }
.noimg-lg span { font-family: var(--f-display); font-size: 5rem; font-weight: 800; color: var(--line); }
.thumbs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.thumb { width: 62px; height: 62px; padding: 0; border: 1px solid var(--line);
         border-radius: 3px; background: #fff; cursor: pointer; overflow: hidden; }
.thumb.on { border-color: var(--brass); border-width: 2px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.info .ar { font-size: 1.05rem; color: var(--muted); margin: 0; }

.pricebox { border: 1px solid var(--line); border-radius: var(--r); background: #fff;
            padding: 1.2rem 1.4rem; margin-top: 1.6rem; }
.pricebox .row { display: flex; justify-content: space-between; align-items: baseline;
                 padding: .45rem 0; font-size: .92rem; }
.pricebox .row span:first-child { color: var(--muted); }
.pricebox .total { border-top: 1px solid var(--line); margin-top: .4rem; padding-top: .8rem; }
.pricebox .total strong { color: var(--signal); font-size: 1.1rem; }
.pricebox .pct { font-size: .8rem; font-weight: 400; }

.addform { margin-top: 1.4rem; }
.addrow { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: .9rem; }
.addrow label { flex: 1 1 150px; }
.addrow span { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .3rem; }
.addrow input, .addrow select {
  width: 100%; padding: .65rem .8rem; border: 1px solid var(--line);
  border-radius: var(--r); font-family: inherit; font-size: .95rem; background: #fff;
}

.specs { margin-top: 2rem; border-top: 1px solid var(--line); }
.specs > div { display: flex; justify-content: space-between; padding: .7rem 0;
               border-bottom: 1px solid var(--line); font-size: .9rem; }
.specs dt { color: var(--muted); margin: 0; }
.specs dd { margin: 0; font-weight: 600; }

.desc { margin-top: 1.8rem; font-size: .95rem; color: var(--ink); }

@media (max-width: 820px) {
  .detail { grid-template-columns: 1fr; gap: 2rem; }
  .filters input[type="search"] { min-width: 100%; }
  .gate .btn { margin-inline-start: 0; }
}

/* ===========================================================================
   Order intake — portal forms, CSV import, API keys, docs
   =========================================================================== */

.orderform { max-width: 780px; }
.orderform fieldset { border: 1px solid var(--line); border-radius: var(--r);
                      padding: 1.2rem 1.4rem 1.4rem; margin-bottom: 1.4rem; background: #fff; }
.orderform legend { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em;
                    text-transform: uppercase; color: var(--brass); padding: 0 .5rem; }
.fieldrow { display: flex; gap: 1rem; flex-wrap: wrap; }
.fieldrow .field { flex: 1 1 180px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start; }

.codeblock {
  background: var(--ink); color: var(--brass-soft); padding: 1rem 1.2rem;
  border-radius: var(--r); font-family: var(--f-mono); font-size: .8rem;
  line-height: 1.6; overflow-x: auto; white-space: pre; margin: .8rem 0 1.2rem;
}
.codeblock.resp { color: #9FE1CB; }

.newkey { background: var(--ink); color: var(--bone); padding: 1.2rem 1.4rem;
          border-radius: var(--r); margin-bottom: 1.4rem; }
.newkey strong { display: block; margin-bottom: .7rem; color: var(--brass); }
.keyvalue { display: block; font-family: var(--f-mono); font-size: .82rem;
            word-break: break-all; background: rgba(255,255,255,.08);
            padding: .7rem .9rem; border-radius: 3px; margin-bottom: .8rem; }

.keyform { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; }
.keyform input { flex: 1 1 280px; padding: .7rem .9rem; border: 1px solid var(--line);
                 border-radius: var(--r); font-family: inherit; font-size: .92rem; }
.linkbtn { background: none; border: 0; color: var(--alert); cursor: pointer;
           font: inherit; font-size: .85rem; text-decoration: underline; padding: 0; }

table.failed td { color: var(--alert); }
table.failed td.mono { color: var(--muted); }

.docs { max-width: 780px; }
.docs h3 { margin-top: 2.4rem; }
.docs hr { border: 0; border-top: 1px solid var(--line); margin: 2.8rem 0; }
.docs code { font-family: var(--f-mono); font-size: .85em; background: rgba(16,16,16,.06);
             padding: .12em .4em; border-radius: 3px; }
.docs .method { background: var(--brass); color: #fff; font-weight: 700; }
.paramtable { font-size: .88rem; margin: 1rem 0 1.4rem; }
.paramtable td:first-child { white-space: nowrap; }

@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }

/* order source badges + filter rows */
.filterline { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
              margin-bottom: .8rem; }
.filterlabel { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em;
               text-transform: uppercase; color: var(--muted); margin-inline-end: .3rem; }
.pill.on { outline: 1px solid var(--brass); outline-offset: 1px; }

.src { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .06em;
       text-transform: uppercase; padding: .16rem .5rem; border-radius: 100px;
       background: rgba(16,16,16,.07); color: var(--muted); white-space: nowrap; }
.src-shopify, .src-woocommerce, .src-website, .src-api {
  background: rgba(238,107,7,.16); color: #8A6413; }

.connectgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.connectgrid .card { padding: 1.6rem; }
.connectgrid h3 { margin-bottom: .3rem; }
.steps { margin: 1rem 0 .6rem; padding-inline-start: 1.2rem; font-size: .9rem;
         color: var(--ink); }
.steps li { margin-bottom: .35rem; }
.connectgrid .codeblock { font-size: .74rem; }
@media (max-width: 900px) { .connectgrid { grid-template-columns: 1fr; } }

/* ===========================================================================
   Call centre — built for speed. An agent works this screen all day, so
   phone numbers are huge, outcomes are one click, and nothing needs scrolling.
   =========================================================================== */

.cc { min-height: 100vh; background: var(--bone); }
.cc-head { background: var(--ink); color: var(--bone); padding: .9rem 0;
           position: sticky; top: 0; z-index: 40; }
.cc-headinner { display: flex; align-items: center; justify-content: space-between; }
.cc-tag { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .14em;
          text-transform: uppercase; color: var(--brass); margin-inline-start: .6rem;
          border: 1px solid rgba(238,107,7,.4); padding: .16rem .5rem; border-radius: 2px; }
.cc-user { display: flex; align-items: center; gap: 1rem; font-size: .9rem; }
.cc-user .muted { color: rgba(255,255,255,.7); }
.linkbtn.light { color: rgba(255,255,255,.7); }
.linkbtn.light:hover { color: var(--brass); }
.cc-main { padding: 2rem 0 4rem; }

.cc-top { display: flex; align-items: center; justify-content: space-between;
          gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }
.btn-sm { padding: .45rem 1rem; font-size: .85rem; }

.stat.urgent { border-color: var(--brass); background: rgba(238,107,7,.08); }

.cc-table th { font-size: .66rem; }
.cc-table td { vertical-align: top; }
.rowdue { background: rgba(238,107,7,.07); }
.duetag { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .1em;
          text-transform: uppercase; color: #8A6413; }
.empty-queue { text-align: center; padding: 3.5rem 1rem; }

/* --- the call screen --- */
.calllayout { display: grid; grid-template-columns: 1fr 340px; gap: 1.6rem;
              align-items: start; }
.callmain { display: flex; flex-direction: column; gap: 1.2rem; }
.callcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r);
            padding: 1.6rem; }
.callcard h3 { font-size: 1rem; margin-bottom: .8rem; }

.phonebig { display: block; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700;
            letter-spacing: -.02em; color: var(--ink); margin: .6rem 0 1rem; }
.phonebig:hover { color: var(--brass); }
.calllinks { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-ghost.dark { border-color: var(--line); color: var(--ink); }
.btn-ghost.dark:hover { border-color: var(--brass); color: var(--brass); }
.btn-ghost.light { border-color: var(--line); color: var(--muted); }

.attemptwarn { margin: 1rem 0 0; padding: .7rem .9rem; font-size: .88rem;
               background: rgba(238,107,7,.12); color: #8A6413;
               border-radius: var(--r); }

table.plain { border: 0; background: transparent; }
table.plain td { padding: .5rem .6rem .5rem 0; border-bottom: 1px solid var(--line); }
table.plain tr:last-child td { border-bottom: 0; }
.totalrow td { border-top: 2px solid var(--line); padding-top: .8rem; }
.notebox { margin-top: 1rem; padding: .8rem 1rem; background: var(--bone);
           border-inline-start: 3px solid var(--brass); border-radius: var(--r);
           font-size: .9rem; }

.outcomepanel { background: #fff; border: 1px solid var(--line);
                border-radius: var(--r); padding: 1.6rem; position: sticky; top: 90px; }
.outcomes { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.2rem; }
.outcome { display: block; padding: .8rem 1rem; border: 1px solid var(--line);
           border-radius: var(--r); cursor: pointer; transition: border-color .15s ease,
           background .15s ease; }
.outcome:hover { border-color: var(--brass); }
.outcome input { margin-inline-end: .5rem; }
.outcome .title { font-weight: 600; font-size: .95rem; }
.outcome .sub { display: block; font-size: .78rem; color: var(--muted);
                margin-top: .15rem; margin-inline-start: 1.4rem; }
.outcome:has(input:checked) { border-color: var(--brass); border-width: 2px;
                              background: rgba(238,107,7,.06); }
.outcome.ok:has(input:checked) { border-color: var(--signal);
                                 background: rgba(21,127,92,.06); }
.outcome.bad:has(input:checked) { border-color: var(--alert);
                                  background: rgba(192,57,43,.05); }
.outcomepanel .btn { width: 100%; justify-content: center; margin-bottom: .5rem; }
.outcomepanel textarea { width: 100%; padding: .7rem .9rem; border: 1px solid var(--line);
                         border-radius: var(--r); font-family: inherit; font-size: .92rem;
                         resize: vertical; }

@media (max-width: 900px) {
  .calllayout { grid-template-columns: 1fr; }
  .outcomepanel { position: static; }
  .cc-table { font-size: .82rem; }
}

/* --- richer product detail --- */
.stage { position: relative; }
.videoframe { border: 1px solid var(--line); border-radius: var(--r);
              overflow: hidden; background: #000; aspect-ratio: 1; }
.videoframe iframe, .videoframe video { width: 100%; height: 100%; border: 0;
                                        display: block; object-fit: cover; }
.videothumb { position: relative; }
.playbadge { position: absolute; inset: 0; display: grid; place-items: center;
             background: rgba(16,16,16,.55); color: #fff; font-size: .9rem; }
.badge.vid { inset-inline-start: auto; inset-inline-end: .6rem;
             background: rgba(16,16,16,.85); color: var(--brass); }

.highlights { margin: 1.2rem 0 0; padding: 0; list-style: none; }
.highlights li { position: relative; padding-inline-start: 1.4rem; margin-bottom: .45rem;
                 font-size: .95rem; }
.highlights li::before { content: "—"; position: absolute; inset-inline-start: 0;
                         color: var(--brass); font-weight: 700; }

.marketprices { margin-top: 1rem; font-size: .85rem; }
.marketprices th { font-size: .62rem; padding: .5rem .7rem; }
.marketprices td { padding: .5rem .7rem; }

.longform { margin-top: 3.5rem; display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem;
            border-top: 1px solid var(--line); padding-top: 2.5rem; }
.longform h3 { font-size: 1.05rem; margin-bottom: .8rem; }
.longform .desc { font-size: .93rem; color: var(--ink); }
.longform .ar { font-size: 1rem; }

.spectable { font-size: .88rem; }
.spectable th { text-align: start; width: 42%; font-family: var(--f-body);
                font-size: .88rem; font-weight: 400; color: var(--muted);
                text-transform: none; letter-spacing: 0; padding: .55rem .8rem; }
.spectable td { padding: .55rem .8rem; font-weight: 600; }

.videofallback { margin-top: .6rem; font-size: .85rem; }

/* ---------------------------------------------------------------------------
   Video lightbox — the video opens over the page instead of replacing the
   gallery, so the visitor never loses their place in the photos.
   --------------------------------------------------------------------------- */

/* The video control sits in a corner of the gallery rather than across it.
   A play button centred over the picture says "this picture is a video", which
   was wrong for every photo except the first — and stayed wrong after somebody
   clicked through to another one. */
.playpill {
  position: absolute; bottom: .9rem; inset-inline-start: .9rem;
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(16,16,16,.86); color: #fff;
  border: 0; border-radius: 100px; padding: .5rem .95rem .5rem .5rem;
  font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .15s ease;
}
.playpill:hover { background: var(--brass); }
.playpill:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.playpill-dot {
  width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--ink);
  display: grid; place-items: center; font-size: .58rem; padding-inline-start: 2px;
}
.playpill:hover .playpill-dot { color: var(--brass); }

/* A second way in, for anyone reading the copy rather than looking at photos. */
.watchline { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem;
             padding: .5rem .95rem; border: 1px solid var(--line); border-radius: 100px;
             background: #fff; font-size: .85rem; font-weight: 600; cursor: pointer;
             font-family: inherit; color: var(--ink); transition: border-color .15s ease; }
.watchline:hover { border-color: var(--brass); color: var(--brass); }
.watchline .dotplay { width: 20px; height: 20px; border-radius: 50%; background: var(--brass);
                      color: #fff; display: grid; place-items: center; font-size: .6rem;
                      padding-inline-start: 2px; }

body.modal-open { overflow: hidden; }

.lightbox { position: fixed; inset: 0; z-index: 200; display: grid;
            place-items: center; padding: 1.5rem; }
.lightbox[hidden] { display: none; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(8,16,27,.88);
                     backdrop-filter: blur(3px); cursor: pointer; }
.lightbox-panel { position: relative; width: min(1000px, 100%); }
.lightbox-media { position: relative; aspect-ratio: 16 / 9; background: #000;
                  border-radius: var(--r); overflow: hidden;
                  box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox-media iframe, .lightbox-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.lightbox-close {
  position: absolute; top: -2.6rem; inset-inline-end: 0;
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.14); color: var(--bone);
  font-size: 1.4rem; line-height: 1; display: grid; place-items: center;
  transition: background .15s ease;
}
.lightbox-close:hover { background: var(--brass); color: #fff; }
.lightbox-foot { margin: .9rem 0 0; font-size: .84rem; color: rgba(255,255,255,.6);
                 text-align: center; }
.lightbox-foot a { color: var(--brass); }

@media (max-width: 640px) {
  .lightbox { padding: 1rem; }
  .lightbox-close { top: -2.4rem; }
}

/* One pricing table per product — the base price and the per-market rows used
   to sit in two separate blocks, which read as the same numbers twice. */
.pricetable { margin-top: 1.6rem; font-size: .92rem; }
.pricetable th { font-size: .64rem; padding: .6rem .8rem; }
.pricetable td { padding: .7rem .8rem; }
.pricetable td:first-child { font-weight: 600; }
.pricetable .keep { color: var(--signal); font-weight: 700; white-space: nowrap; }
.pricetable .pct { font-size: .74rem; font-weight: 400; opacity: .75; }

/* ---------------------------------------------------------------------------
   Seller catalogue — this page exists so a seller can put a product into their
   store, so the photo, the margin, the stock and the button are all on the card.
   --------------------------------------------------------------------------- */

.cat-head { display: flex; justify-content: space-between; align-items: flex-end;
            flex-wrap: wrap; gap: 1rem; margin-bottom: 1.4rem; }

.cat-filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
               margin-bottom: 1.8rem; }
.cat-filters input[type="search"], .cat-filters select {
  padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--r);
  font-family: inherit; font-size: .9rem; background: #fff; }
.cat-filters input[type="search"] { min-width: 260px; flex: 1 1 260px; }
.cat-filters .check { display: flex; align-items: center; gap: .4rem;
                      font-size: .88rem; white-space: nowrap; }
.cat-filters .clear { font-size: .85rem; color: var(--muted); text-decoration: underline; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 1.2rem; }
.cat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r);
            overflow: hidden; display: flex; flex-direction: column;
            transition: border-color .18s ease, box-shadow .18s ease; }
.cat-card:hover { box-shadow: 0 6px 20px rgba(16,16,16,.07); }
.cat-card.listed { border-color: var(--signal); }

.cat-img { position: relative; aspect-ratio: 4 / 3; background: var(--bone);
           display: grid; place-items: center; overflow: hidden; }
.cat-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-img .noimg { font-family: var(--f-display); font-size: 2.4rem; font-weight: 800;
                  color: var(--line); }

.cat-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .4rem;
            flex: 1; }
.cat-body h3 { font-size: .95rem; margin: 0 0 .3rem; line-height: 1.25; }
.cat-body h3 a:hover { color: var(--brass); }

.cat-money { display: flex; justify-content: space-between; align-items: baseline;
             font-size: .85rem; }
.cat-money .keep { color: var(--signal); font-weight: 700; }
.cat-money .pct { font-size: .72rem; font-weight: 400; opacity: .75; }

.cat-stock { margin: .3rem 0 .1rem; font-size: .78rem; color: var(--muted);
             display: flex; align-items: center; gap: .4rem; }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot.ok { background: var(--signal); }
.dot.out { background: var(--alert); }

.cat-add { display: flex; gap: .4rem; margin-top: auto; padding-top: .7rem; }
.cat-add input { flex: 1; min-width: 0; padding: .5rem .6rem; border: 1px solid var(--line);
                 border-radius: var(--r); font-family: var(--f-mono); font-size: .85rem; }
.cat-add .btn { padding: .5rem .9rem; font-size: .85rem; }
.cat-listed { margin: .5rem 0 0; font-size: .74rem; color: var(--signal); }

.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; }

@media (max-width: 640px) {
  .cat-filters input[type="search"] { min-width: 100%; }
}

/* Multi-line order entry — a customer on WhatsApp rarely wants one thing. */
.lines { display: flex; flex-direction: column; gap: .5rem; }
.line-head, .line {
  display: grid; grid-template-columns: 1fr 80px 130px 110px 32px;
  gap: .6rem; align-items: center;
}
.line-head { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em;
             text-transform: uppercase; color: var(--muted); padding-bottom: .2rem; }
.line input { padding: .6rem .7rem; border: 1px solid var(--line);
              border-radius: var(--r); font-family: inherit; font-size: .92rem; }
.line .l-qty, .line .l-price { font-family: var(--f-mono); }
.line .l-total { text-align: end; font-size: .9rem; color: var(--muted); }
.l-remove { width: 28px; height: 28px; border: 0; border-radius: 50%;
            background: transparent; color: var(--muted); cursor: pointer;
            font-size: 1.2rem; line-height: 1; }
.l-remove:hover { background: rgba(192,57,43,.1); color: var(--alert); }

.line-actions { display: flex; justify-content: space-between; align-items: center;
                flex-wrap: wrap; gap: 1rem; margin-top: 1rem;
                padding-top: 1rem; border-top: 1px dashed var(--line); }
.running { display: flex; align-items: baseline; gap: .7rem; }
.running strong { font-size: 1.25rem; color: var(--ink); }

@media (max-width: 720px) {
  .line-head { display: none; }
  .line { grid-template-columns: 1fr 60px 100px; grid-template-areas:
          "sku sku sku" "qty price total"; }
  .line .l-sku { grid-area: sku; }
  .line .l-qty { grid-area: qty; }
  .line .l-price { grid-area: price; }
  .line .l-total { grid-area: total; }
  .l-remove { display: none; }
}

/* The order being built, following the seller down the catalogue. */
.draftbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  background: var(--ink); color: var(--bone);
  padding: .9rem 1.2rem; border-radius: var(--r); margin-bottom: 1.4rem;
}
.draftbar .muted { color: rgba(255,255,255,.65); }
.draftbar-actions { display: flex; align-items: center; gap: 1rem; }
.draftbar .linkbtn { color: rgba(255,255,255,.6); }
.draftbar .linkbtn:hover { color: var(--brass); }

.cat-order { margin-top: auto; padding-top: .7rem; }
.cat-order .btn { width: 100%; justify-content: center; padding: .55rem; font-size: .88rem; }

/* Listing a product is the rarer action, so it folds away. */
.cat-sell { margin-top: .5rem; font-size: .78rem; }
.cat-sell summary { cursor: pointer; color: var(--muted); list-style: none; }
.cat-sell summary::-webkit-details-marker { display: none; }
.cat-sell summary::before { content: "+ "; color: var(--brass); font-weight: 700; }
.cat-sell[open] summary::before { content: "− "; }
.cat-sell summary:hover { color: var(--brass); }
.cat-sell .cat-add { margin-top: .5rem; }
.cat-sell .help { margin-top: .4rem; font-size: .72rem; line-height: 1.4; }

/* Something has to be visible while a video buffers, or an unbuffered one is
   indistinguishable from a broken one. */
.videostate { position: absolute; inset: 0; display: grid; place-items: center;
              gap: .8rem; background: rgba(8,16,27,.86); color: var(--bone);
              font-size: .9rem; text-align: center; padding: 1.5rem; }
.videostate[hidden] { display: none; }
.vs-spin { width: 34px; height: 34px; border-radius: 50%;
           border: 3px solid rgba(255,255,255,.22); border-top-color: var(--brass);
           animation: kdspin .9s linear infinite; }
@keyframes kdspin { to { transform: rotate(360deg); } }
.videostate .vs-load, .videostate .vs-fail { display: none; }
.videostate[data-state="loading"] .vs-load { display: block; }
.videostate[data-state="failed"] .vs-fail { display: block; }
.videostate[data-state="failed"] .vs-spin { display: none; }
.videostate .vs-fail a { color: var(--brass); }
@media (prefers-reduced-motion: reduce) { .vs-spin { animation: none; } }

/* A return is money out of the seller's pocket, so the reason has to be
   visible on the order rather than buried in a ledger line. */
.returnbox { margin-top: 2rem; padding: 1.2rem 1.4rem; background: #fff;
             border: 1px solid var(--line); border-inline-start: 3px solid var(--alert);
             border-radius: var(--r); }
.returnbox h3 { color: var(--alert); font-size: 1rem; margin-bottom: .7rem; }
.returnbox td { padding: .4rem .6rem .4rem 0; }

/* Where the money on an order actually goes. A seller should never have to
   work out why a payout is smaller than the price they set. */
.breakdown { margin-top: 1.4rem; max-width: 460px; font-size: .9rem; }
.breakdown td { padding: .5rem .8rem; }
.breakdown td:last-child { text-align: end; white-space: nowrap; }
.breakdown .sum td { border-top: 1px solid var(--line); }
.breakdown .keep td { border-top: 2px solid var(--line); color: var(--signal); }

/* ===========================================================================
   Brand mark
   The wordmark's whole idea is the contrast between a wide, light KUNOZ and a
   tight, gold DROP. Set them at the same size with the same tracking and the
   name stops being a name.
   =========================================================================== */
.kd-logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.kd-mark { display: block; flex: none; }
.kd-word { display: flex; flex-direction: column; line-height: 1; }
.kd-kunoz, .kd-drop {
  font-family: var(--f-display);
  font-size: 1.34rem;
  font-weight: 700;
}
/* Explicit, not inherited. A wordmark that borrows its colour is a wordmark
   that turns white on a white header the day somebody changes the header. */
/* Explicit, not inherited. A wordmark that borrows its colour is a wordmark
   that turns white on a white header the day somebody changes the header —
   which is exactly what happened before. */
.kd-kunoz { letter-spacing: .17em; color: var(--ink); }
.kd-drop  { letter-spacing: .02em; color: var(--brass); }
.kd-tag {
  font-family: var(--f-mono); font-size: .55rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--brass); margin-top: .3rem; opacity: .8;
}
/* On a dark surface — the footer, the portal sidebar, the call queue — it
   flips the other way. */
.site-foot .kd-kunoz, .side .kd-kunoz, .cc-head .kd-kunoz { color: #fff; }



/* The call queue puts a role label beside the logo. */
.kd-logo-wrap { display: inline-flex; align-items: center; gap: .6rem;
                text-decoration: none; }
.cc-head .kd-kunoz { font-size: 1.05rem; }

/* A clip sits over its poster and only appears once it is playing, so a tile
   never shows an empty black rectangle while a file is still arriving. */
.ptile-clip {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.ptile.clip-on .ptile-clip { opacity: 1; }
.ptile.clip-on .ptile-play { opacity: 0; }
.ptile-play { transition: opacity .2s ease; }
.ptile.has-clip .ptile-img { cursor: pointer; }

/* A search in the header, so somebody who arrives knowing what they want does
   not have to scroll to the catalogue to type it. */
.head-search { display: flex; align-items: center; gap: .45rem;
               background: #F5F5F6; border: 1px solid transparent;
               border-radius: 100px; padding: .4rem 1rem; max-width: 250px; }
.head-search button { border: 0; background: transparent; color: var(--muted);
                      cursor: pointer; padding: 0; display: grid;
                      place-items: center; }
.head-search button svg { width: 16px; height: 16px; }
.head-search button:hover { color: var(--brass); }
.head-search input { border: 0; background: transparent; color: var(--ink);
                     font-family: inherit; font-size: .85rem; width: 100%; min-width: 0;
                     padding: .2rem 0; }
.head-search input::placeholder { color: #8B8B93; }
.head-search input:focus { outline: none; }
.head-search:focus-within { border-color: var(--brass); }
@media (max-width: 900px) { .head-search { display: none; } }

/* ---------------------------------------------------------------------------
   Pages that used to be sections on the home page. A top-level menu item that
   throws you back to the home page reads as broken even when the link works —
   you were on the catalogue, you clicked Services, and now you are elsewhere.
   --------------------------------------------------------------------------- */
.pagehead { padding: 3.2rem 0 2rem; }
.pagehead .eyebrow { display: flex; align-items: center; gap: .7rem;
                     color: var(--brass); font-weight: 700; }
.pagehead .eyebrow i { width: 26px; height: 2px; background: var(--brass); }
.pagehead h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-top: .8rem;
               max-width: 20ch; }
.pagehead .lede { color: var(--muted); max-width: 52ch; margin-top: 1rem;
                  font-size: 1.02rem; }

.section.alt { background: #FAFAFA; }

/* the five steps */
.steps { padding-top: 1rem; }
.step { display: grid; grid-template-columns: 76px 1fr; gap: 1.6rem;
        padding: 1.8rem 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; }
.step-n { font-family: var(--f-display); font-size: 2.1rem; font-weight: 800;
          color: var(--brass); line-height: 1; letter-spacing: -.04em; }
.step-body h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.step-body p { margin: 0 0 .6rem; max-width: 62ch; }
.step-body p:last-child { margin-bottom: 0; }

/* the questions */
.qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.6rem; margin-top: 2rem; }
.qa-item h3 { font-size: 1rem; margin-bottom: .45rem; }
.qa-item p { margin: 0; font-size: .92rem; color: var(--muted); }

/* the four services */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.6rem; }
.svc { background: #fff; border: 1px solid var(--line); border-radius: 12px;
       padding: 1.8rem; display: flex; flex-direction: column; }
.svc-icon { width: 44px; height: 44px; border-radius: 12px; background: #FDF0E6;
            color: var(--brass); display: grid; place-items: center;
            margin-bottom: 1.1rem; }
.svc-icon svg { width: 22px; height: 22px; }
.svc h2 { font-size: 1.2rem; margin-bottom: .3rem; }
.svc-line { font-weight: 600; color: var(--brass); font-size: .9rem;
            margin: 0 0 .7rem; }
.svc p:not(.svc-line) { font-size: .93rem; margin: 0 0 .9rem; }
.svc ul { margin: 0 0 1.2rem; padding-inline-start: 1.1rem; font-size: .88rem;
          color: var(--muted); }
.svc ul li { margin-bottom: .3rem; }
.svc-more { margin-top: auto; font-family: var(--f-mono); font-size: .74rem;
            letter-spacing: .09em; text-transform: uppercase; color: var(--brass); }
.svc-more:hover { text-decoration: underline; }

.closer { text-align: center; }
.closer .lede { margin-inline: auto; }
.closer .hero-cta { justify-content: center; margin-top: 1.6rem; }

@media (max-width: 640px) {
  .step { grid-template-columns: 1fr; gap: .5rem; }
  .step-n { font-size: 1.5rem; }
}

/* ---------------------------------------------------------------------------
   The category row runs on its own, right to left. The list is rendered twice
   and the track slides exactly half its width, so the second copy is in place
   the moment the first leaves and there is no seam.

   It stops on hover, on touch, and on keyboard focus. A strip that cannot be
   caught is decoration; these are meant to be tapped.
   --------------------------------------------------------------------------- */
.catrow-band { padding: 2rem 0 .5rem; }
.catrow {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.catrow-track { display: flex; width: max-content;
                animation: kd-catrow 46s linear infinite; }
.catrow-set { display: flex; gap: 1.4rem; padding-inline-end: 1.4rem; }
@keyframes kd-catrow { to { transform: translateX(-50%); } }

.catrow:hover .catrow-track,
.catrow:focus-within .catrow-track,
.catrow.held .catrow-track { animation-play-state: paused; }

.cattile { flex: none; width: 108px; display: flex; flex-direction: column;
           align-items: center; gap: .55rem; text-decoration: none;
           color: var(--ink); }
.cattile-img {
  width: 92px; height: 92px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--line); background: var(--bone);
  display: grid; place-items: center;
  transition: border-color .16s ease, transform .16s ease;
}
.cattile:hover .cattile-img { border-color: var(--brass); transform: translateY(-2px); }
.cattile.on .cattile-img { border-color: var(--brass); border-width: 3px; }
.cattile-img img { width: 100%; height: 100%; object-fit: cover; }
.cattile-letter { font-family: var(--f-display); font-size: 2rem; font-weight: 800;
                  color: var(--line); }
.cattile-name { font-size: .78rem; line-height: 1.25; text-align: center; }
.cattile.on .cattile-name { font-weight: 700; color: var(--brass); }

.catrow-clear { margin: .6rem 0 0; font-size: .84rem; }
.catrow-clear a { color: var(--brass); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  /* No movement at all — just a row somebody can push with a finger. */
  .catrow-track { animation: none; }
  .catrow { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .catrow-set:nth-child(2) { display: none; }
}

/* A clip over the photo on a catalogue card, same as the front page. It is
   not fetched until the pointer arrives — a page of twenty-four products has
   no business pulling twenty-four videos nobody asked for. */
.pcard-img { position: relative; }
.pcard-clip { position: absolute; inset: 0; width: 100%; height: 100%;
              object-fit: cover; opacity: 0; transition: opacity .25s ease;
              pointer-events: none; }
.pcard.clip-on .pcard-clip { opacity: 1; }
.pcard.clip-on .badge.vid { opacity: 0; }
.badge.vid { transition: opacity .2s ease; }

/* ---------------------------------------------------------------------------
   Downloads on a product page. A seller cannot advertise a product without its
   pictures, and the video had no way out of the lightbox at all.
   --------------------------------------------------------------------------- */
.grabkit { margin-top: 1.4rem; padding: 1.2rem; border: 1px solid var(--line);
           border-radius: 12px; background: #FDFCFB; }
.grabkit-head strong { display: block; font-size: .95rem; }
.grabkit-head span { display: block; font-size: .82rem; color: var(--muted);
                     margin-top: .15rem; }
.grabkit-buttons { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.btn-sm { padding: .55rem 1.1rem; font-size: .85rem; }

.grabkit-imgs { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
                margin-top: 1rem; }
.grabkit-label { font-size: .78rem; color: var(--muted); width: 100%; }
.grabkit-one { position: relative; width: 52px; height: 52px; border-radius: 8px;
               overflow: hidden; border: 1px solid var(--line); display: block; }
.grabkit-one img { width: 100%; height: 100%; object-fit: cover; }
.grabkit-one span {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(16,16,16,.6); color: #fff; font-size: 1rem;
  opacity: 0; transition: opacity .15s ease;
}
.grabkit-one:hover span, .grabkit-one:focus-visible span { opacity: 1; }
.grabkit-note { margin: .9rem 0 0; font-size: .76rem; color: var(--muted); }

.grabkit-locked { margin-top: 1.2rem; font-size: .88rem; color: var(--muted); }
.grabkit-locked a { color: var(--brass); text-decoration: underline; }

@media (max-width: 640px) {
  .cattile { width: 84px; }
  .cattile-img { width: 72px; height: 72px; }
  .cattile-name { font-size: .72rem; }
  .catrow-set { gap: 1rem; padding-inline-end: 1rem; }
  /* Fewer tiles fit, so the same speed feels faster. Slow it down. */
  .catrow-track { animation-duration: 34s; }
}

/* ---------------------------------------------------------------------------
   Sharing a product. WhatsApp first, because that is where this market sells.
   --------------------------------------------------------------------------- */
.shareline { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
             margin-top: 1.4rem; }
.shareline-label { font-family: var(--f-mono); font-size: .68rem;
                   letter-spacing: .13em; text-transform: uppercase;
                   color: var(--muted); margin-inline-end: .2rem; }

.sharebtn {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; border: 0; cursor: pointer;
  color: #fff; transition: transform .14s ease, filter .14s ease;
}
.sharebtn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.sharebtn:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.sharebtn svg { width: 20px; height: 20px; }

.sharebtn.wa { background: #25D366; }
.sharebtn.fb { background: #1877F2; }
.sharebtn.tg { background: #229ED9; }
.sharebtn.copy { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.sharebtn.copy:hover { border-color: var(--brass); color: var(--brass); }

/* Confirmation, because a copy that gives no sign leaves you pressing it
   again to be sure. */
.sharebtn .copied {
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%); background: var(--ink); color: #fff;
  font-size: .68rem; padding: .2rem .5rem; border-radius: 4px;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
}
.sharebtn.done .copied { opacity: 1; }

@media (max-width: 560px) {
  .sharebtn { width: 44px; height: 44px; }
}

/* ---------------------------------------------------------------------------
   The seller's own details page.
   --------------------------------------------------------------------------- */
.pagehead-row { display: flex; align-items: flex-start; justify-content: space-between;
                gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.completeness { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em;
                background: #FDF0E6; color: var(--brass); padding: .35rem .7rem;
                border-radius: 100px; white-space: nowrap; font-weight: 700; }

/* Said before the money is waiting, not after. */
.needbox { border: 1px solid #F3C9A8; background: #FFF8F2; border-radius: 10px;
           padding: 1rem 1.1rem; margin-bottom: 1.6rem; }
.needbox strong { display: block; margin-bottom: .35rem; }
.needbox ul { margin: .3rem 0 .6rem 1.1rem; font-size: .9rem; }
.needbox p { margin: 0; font-size: .86rem; color: var(--muted); }
.needbox a { color: var(--brass); font-weight: 600; text-decoration: underline; }

.formerrors { border: 1px solid #E9B0A8; background: #FEF6F5; border-radius: 10px;
              padding: 1rem 1.1rem; margin-bottom: 1.4rem; }
.formerrors ul { margin: .4rem 0 0 1.1rem; font-size: .9rem; }

.fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 1.3rem;
            margin-bottom: 1.2rem; background: #fff; }
.fieldset h2 { font-size: 1.05rem; margin: 0 0 .2rem; }
.fieldset-why { font-size: .85rem; color: var(--muted); margin: 0 0 1.1rem;
                max-width: 60ch; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid2 .span2 { grid-column: 1 / -1; }
.profileform .field label { display: block; font-size: .82rem; font-weight: 600;
                            margin-bottom: .3rem; }
.profileform input, .profileform select, .profileform textarea {
  width: 100%; padding: .6rem .75rem; border: 1px solid var(--line);
  border-radius: 8px; font-family: inherit; font-size: .92rem; background: #fff;
}
.profileform input:focus, .profileform select:focus {
  outline: 2px solid var(--brass); outline-offset: -1px; border-color: var(--brass);
}
.profileform .hint { display: block; font-size: .76rem; color: var(--muted);
                     margin-top: .3rem; }
.formfoot { display: flex; gap: .7rem; margin-top: 1.4rem; }

@media (max-width: 720px) {
  .grid2 { grid-template-columns: 1fr; }
  .grid2 .span2 { grid-column: auto; }
}

/* ---------------------------------------------------------------------------
   The policy pages, and the wallet's two numbers.
   --------------------------------------------------------------------------- */
.plainlist { list-style: none; padding: 0; margin: 1rem 0; }
.plainlist li { padding: .5rem 0 .5rem 1.4rem; position: relative;
                border-bottom: 1px solid var(--line); }
.plainlist li:last-child { border-bottom: 0; }
.plainlist li::before { content: "·"; position: absolute; left: .4rem;
                        color: var(--brass); font-weight: 700; }

.policytable { width: 100%; border-collapse: collapse; margin-top: 1.2rem; }
.policytable td { padding: .7rem 0; border-bottom: 1px solid var(--line); }
.policytable td:last-child { text-align: right; color: var(--muted);
                             font-size: .88rem; }
.policytable tr.total td { font-weight: 700; border-bottom: 0;
                           border-top: 2px solid var(--ink); }
.policytable tr.total td:last-child { color: var(--ink); }

/* Money that is earned but not yet withdrawable. Saying so where the number
   is, rather than leaving somebody to wonder why the two do not match. */
.clearing { font-size: .78rem; color: var(--muted); margin-top: .5rem;
            line-height: 1.5; }
.clearing .mono { color: var(--ink); font-weight: 600; }
.clearing a { color: var(--brass); text-decoration: underline; }
td.held { font-size: .74rem; color: var(--muted); white-space: nowrap; }

/* What a failure costs, next to what a success pays. */
.costwarn { border-inline-start: 3px solid var(--brass); padding-inline-start: .8rem;
            margin-top: .8rem; }
.costwarn strong { color: var(--ink); }
.costwarn a { color: var(--brass); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   The contact page.
   --------------------------------------------------------------------------- */
.contact-split { display: grid; grid-template-columns: 1fr minmax(0, 340px);
                 gap: 3rem; align-items: start; }
.contactform { max-width: 44ch; }
.contactform .field { margin-bottom: 1.1rem; }
.contactform label { display: block; font-size: .85rem; font-weight: 600;
                     margin-bottom: .35rem; }
.contactform .optional { font-weight: 400; color: var(--muted);
                         font-size: .78rem; }
.contactform input, .contactform select, .contactform textarea {
  width: 100%; padding: .7rem .8rem; border: 1px solid var(--line);
  border-radius: 8px; font-family: inherit; font-size: .93rem; background: #fff;
}
.contactform input:focus, .contactform select:focus, .contactform textarea:focus {
  outline: 2px solid var(--brass); outline-offset: -1px; border-color: var(--brass);
}
.contactform textarea { resize: vertical; }
.contactform .hint { display: block; font-size: .78rem; color: var(--muted);
                     margin-top: .35rem; line-height: 1.5; }

.contact-side h2 { font-size: 1.05rem; margin-bottom: 1.2rem; }
.contact-way { display: flex; gap: .8rem; align-items: flex-start;
               margin-bottom: 1.3rem; }
.contact-icon { flex: none; width: 38px; height: 38px; border-radius: 11px;
                background: #FDF0E6; color: var(--brass);
                display: grid; place-items: center; }
.contact-icon svg { width: 19px; height: 19px; }
.contact-way strong { display: block; font-size: .9rem; }
.contact-way strong a { color: var(--ink); }
.contact-way strong a:hover { color: var(--brass); }
.contact-way span { display: block; font-size: .8rem; color: var(--muted);
                    margin-top: .2rem; line-height: 1.5; }

.contact-note { border: 1px solid var(--line); border-radius: 10px;
                padding: 1rem; background: #FAFAFA; margin-top: 1.8rem; }
.contact-note strong { display: block; font-size: .88rem; }
.contact-note p { font-size: .82rem; color: var(--muted); margin: .4rem 0 .6rem; }
.contact-note a { color: var(--brass); font-size: .84rem; font-weight: 600;
                  text-decoration: underline; }

@media (max-width: 860px) {
  .contact-split { grid-template-columns: 1fr; gap: 2.4rem; }
  .contactform { max-width: none; }
}

/* ---------------------------------------------------------------------------
   The ledger. A seller reading this is usually asking one question — where did
   that money go — so every line answers it in words rather than leaving three
   numbers to be reconciled.
   --------------------------------------------------------------------------- */
.ledger { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.ledger th { text-align: left; font-family: var(--f-mono); font-size: .66rem;
             letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
             padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.ledger th.num, .ledger td.num { text-align: right; }
.ledger td { padding: .9rem .8rem; border-bottom: 1px solid var(--line);
             vertical-align: top; }

.ledger .when { white-space: nowrap; font-size: .8rem; line-height: 1.4; }
.ledger .when .time { opacity: .6; font-size: .74rem; }

.ledger .what strong { display: block; font-size: .92rem; }
.ledger .what .ref { display: inline-block; font-size: .74rem; color: var(--brass);
                     margin-top: .2rem; text-decoration: underline; }
.ledger .what .why { display: block; font-size: .8rem; color: var(--muted);
                     margin-top: .3rem; line-height: 1.5; max-width: 62ch; }
.ledger .what .heldnote { display: inline-block; font-size: .74rem;
                          background: #FDF0E6; color: #8A4A00; padding: .15rem .5rem;
                          border-radius: 4px; margin-top: .4rem; }
.ledger .what .heldnote a { color: #8A4A00; text-decoration: underline; }

.ledger .amount { font-weight: 700; white-space: nowrap; }
.ledger tr.in .amount { color: var(--signal); }
.ledger tr.out .amount { color: var(--alert); }
.ledger .cur { font-weight: 400; opacity: .6; font-size: .78rem; }

@media (max-width: 640px) {
  .ledger th:nth-child(4), .ledger td:nth-child(4) { display: none; }
  .ledger td { padding: .7rem .5rem; }
}

/* The one number that actually left the wallet, marked out from the ones that
   only moved through it. */
.returnbox tr.outofpocket td { border-top: 2px solid var(--line); padding-top: .7rem; }
.returnbox tr.outofpocket strong { font-size: 1.05rem; }

/* An order that came back still shows the arithmetic, because it explains
   what was at stake — but it is greyed and captioned so nobody reads a number
   about a sale that did not happen as money they have. */
.wouldhave { font-size: .84rem; color: var(--muted); margin: 1.2rem 0 .4rem;
             max-width: 60ch; }
.wouldhave em { font-style: normal; font-weight: 700; }
.breakdown.didnthappen { opacity: .58; }
.breakdown.didnthappen .keep td { color: var(--muted); }
.stat .v.negative { color: var(--alert); }

/* Profit calculator on the product page -------------------------------- */
.pcalc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  margin:1.8rem 0}
.pcalc-head{width:100%;display:flex;align-items:center;gap:.6rem;
  background:var(--ink);color:#fff;border:0;padding:.85rem 1.1rem;cursor:pointer;
  font:inherit;text-align:left}
.pcalc-title{font-weight:650;font-size:15px;font-family:var(--f-display,inherit)}
.pcalc-hint{font-size:12px;opacity:.55;flex:1}
.pcalc-chev{transition:transform .2s ease;font-size:13px}
.pcalc[data-closed] .pcalc-chev{transform:rotate(-90deg)}
.pcalc[data-closed] .pcalc-body{display:none}

.pcalc-body{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;
  padding:1.4rem;background:var(--brass-soft)}
.pcalc-left{display:flex;flex-direction:column;gap:1.1rem}
.pcalc-field label{display:block;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  margin-bottom:.35rem}
.pcalc-readonly{background:rgba(255,255,255,.55);border:1px solid var(--line);
  border-radius:var(--r);padding:.6rem .75rem;font-family:var(--f-mono);
  font-size:16px;font-weight:600}
.pcalc-money{display:flex;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pcalc-money span{padding:.6rem .6rem;font-size:13px;color:var(--muted);
  font-family:var(--f-mono)}
.pcalc-money input{flex:1;border:0;padding:.6rem .5rem .6rem 0;font:inherit;
  font-family:var(--f-mono);font-size:16px;background:transparent;min-width:0}
.pcalc-money input:focus{outline:none}
.pcalc-field select{width:100%;padding:.6rem .7rem;border:1px solid var(--line);
  border-radius:var(--r);font:inherit;font-size:14px;background:#fff}
.pcalc-srow{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:.4rem}
.pcalc-srow label{margin:0}
.pcalc-pill{background:var(--brass);color:#fff;padding:.15rem .6rem;
  border-radius:999px;font-family:var(--f-mono);font-size:13px;font-weight:700}
.pcalc input[type=range]{width:100%;accent-color:var(--brass);margin:0}
.pcalc-ends{display:flex;justify-content:space-between;font-size:11px;
  color:var(--muted);margin-top:.2rem}
.pcalc-note{font-size:12px;color:var(--muted);line-height:1.5;margin:.5rem 0 0}

.pcalc-right{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.2rem;display:flex;flex-direction:column;justify-content:center}
.pcalc-empty{text-align:center;color:var(--muted)}
.pcalc-icon{display:inline-grid;place-items:center;width:38px;height:38px;
  border-radius:50%;background:var(--brass-soft);color:var(--brass);
  font-size:18px;margin-bottom:.6rem}
.pcalc-empty p{font-size:13px;margin:0;line-height:1.5}
.pcalc-row{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;
  font-size:14px;align-items:baseline}
.pcalc-row span{color:var(--muted)}
.pcalc-row b{font-family:var(--f-mono);font-weight:600;white-space:nowrap}
.pcalc-row.sep{border-top:1px solid var(--line);margin-top:.5rem;padding-top:.7rem}
.pcalc-row.total{border-top:2px solid var(--ink);margin-top:.6rem;padding-top:.7rem}
.pcalc-row.total span{color:var(--ink);font-weight:650}
.pcalc-row.total b{font-size:22px}
.pcalc-good b{color:var(--signal)}
.pcalc-bad b{color:var(--alert)}
.pcalc-warn{font-size:12.5px;line-height:1.55;margin-top:.9rem;padding:.65rem .8rem;
  border-left:3px solid var(--alert);background:rgba(192,57,43,.06)}
@media (max-width:720px){.pcalc-body{grid-template-columns:1fr}}

/* Product page tabs ----------------------------------------------------- */
.ptabs{margin:1.8rem 0}
.ptabs-bar{display:inline-flex;gap:.25rem;background:var(--brass-soft);
  padding:.3rem;border-radius:999px;margin-bottom:1.1rem;flex-wrap:wrap}
.ptab{border:0;background:transparent;padding:.5rem 1.1rem;border-radius:999px;
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;color:var(--muted)}
.ptab.on{background:var(--ink);color:#fff}
.ptab-panel{display:none}
.ptab-panel.on{display:block}
.ptip{border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.25rem;
  margin-bottom:.8rem;background:#fff}
.ptip.numbered{display:flex;gap:1rem;align-items:flex-start}
.ptip-n{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--brass-soft);color:var(--brass);font-family:var(--f-mono);
  font-size:13px;font-weight:700;margin-top:2px}
.ptip-body{flex:1;min-width:0}
.ptip-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ptip-head b{font-size:15px}
.ptip-badge{background:var(--brass);color:#fff;padding:.1rem .5rem;border-radius:999px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.ptip p{font-size:14px;line-height:1.65;color:var(--muted);margin:.35rem 0 0}
.ptip .btn{margin-top:.8rem}