.page-head .h1 .sub {
    display: block;
    font-size: 0.42em;
    font-style: italic;
    color: var(--gold-hi);
    margin-top: 10px;
}
.drop-status {
    display: flex; flex-direction: column; gap: 14px;
    padding: 24px 26px;
    border: 1px solid rgba(233,201,106,0.25);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(233,201,106,0.08), transparent 70%);
}
.drop-status .badge {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--sans);
    font-size: 0.56rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--gold-hi);
}
.drop-status .badge::before {
    content: '';
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--gold-hi);
    box-shadow: 0 0 10px var(--gold-hi);
    animation: dropPulse 1.8s ease-in-out infinite;
}
@keyframes dropPulse { 50% { opacity: 0.3; } }
.drop-status p { font-family: var(--sans); font-size: 0.9rem; line-height: 1.6; color: var(--silver-hi); }
.drop-status b { color: var(--white); font-weight: 600; }

/* ── Studio ── */
.studio {
    margin-top: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    border: 1px solid rgba(233,201,106,0.2);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}
.studio .p-stage {
    border: 0;
    border-radius: 0;
    /* .p-stage is square everywhere else, which is right for a card in a
       grid. Here it is one half of a two-column panel, and the controls
       beside it are taller than the square — so the bottom of the column
       was 111px of studio background with no stage in it, reading as a
       dead strip under the mockup. Dropping the ratio lets the grid's
       default stretch fill the row, and the caption sits on the real
       bottom edge. The single-column phone layout puts the square back. */
    aspect-ratio: auto;
    min-height: 460px;
    background:
        radial-gradient(ellipse 55% 50% at 50% 40%, rgba(255,220,170,0.16), transparent 70%),
        linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.45));
}
/* One factor for all four, not a per-format correction: it keeps the
   relative sizing the mockups were drawn with (the pin reads largest, the
   patch smallest) while filling the taller stage. At 1.65 the product sat
   at 37-50% of the stage height and the panel looked half empty. */
.studio .p-stage .mock { zoom: 2.15; }
.studio-caption {
    position: absolute; left: 0; right: 0; bottom: 18px;
    text-align: center;
    font-family: var(--sans);
    font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--silver-dim);
    z-index: 2;
}
.controls {
    padding: 30px 30px 28px;
    border-left: 1px solid rgba(228,228,228,0.08);
    display: flex; flex-direction: column; gap: 22px;
    background: rgba(0,0,0,0.18);
}
.ctl-label {
    font-family: var(--sans);
    font-size: 0.58rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
    display: flex; justify-content: space-between; align-items: center;
}
.ctl-label button {
    font: inherit; letter-spacing: 0.2em;
    color: var(--silver-mid);
    background: none; border: 0;
    cursor: var(--cur-hand, pointer);
}
.ctl-label button:hover { color: var(--white); }

.nation-search {
    width: 100%;
    font-family: var(--sans);
    font-size: 0.86rem;
    color: var(--white);
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(228,228,228,0.16);
    border-radius: 8px 8px 0 0;
    padding: 10px 12px;
    outline: none;
}
.nation-search:focus { border-color: var(--gold-hi); }
.nation-list {
    height: 188px;
    overflow-y: auto;
    border: 1px solid rgba(228,228,228,0.16);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-content: start;
    gap: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(233,201,106,0.4) transparent;
}
.nation-list button {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px;
    border: 0; border-radius: 6px;
    background: none;
    color: var(--silver-hi);
    font-family: var(--sans);
    font-size: 0.8rem;
    text-align: left;
    cursor: var(--cur-hand, pointer);
    min-width: 0;
}
.nation-list button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nation-list button img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.nation-list button:hover { background: rgba(255,255,255,0.05); }
.nation-list button.on { background: rgba(233,201,106,0.16); color: var(--gold-hi); }
.nation-list .none { grid-column: 1 / -1; padding: 16px; color: var(--silver-dim); font-family: var(--sans); font-size: 0.8rem; }

.fmt-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

/* ── Version strip ──
   Only appears for a nation drawn more than once. Thumbnails rather
   than labels: the whole point is to choose by looking. The art sits on
   a pale tile because these drawings are made to read on cream stock,
   and several of them are near-white on their own. */
.var-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.var-option {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid rgba(228,228,228,0.14);
    background: rgba(0,0,0,0.22);
    color: var(--silver-mid);
    font-family: var(--sans); font-size: 0.72rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    cursor: var(--cur-hand, pointer);
    transition: border-color 0.22s, background 0.22s, color 0.22s;
}
.var-option:hover { border-color: rgba(233,201,106,0.5); color: var(--white); }
.var-option.on { border-color: var(--gold-hi); background: rgba(233,201,106,0.12); color: var(--gold-hi); }
.var-thumb {
    flex: none;
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 6px;
    background: radial-gradient(ellipse at 50% 40%, #f7efdd, #e2d3b2 85%);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
.var-thumb img { width: 78%; height: 78%; object-fit: contain; }

.fmt-option {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px;
    border: 1px solid rgba(228,228,228,0.14);
    border-radius: 8px;
    background: none;
    color: var(--silver-hi);
    text-align: left;
    cursor: var(--cur-hand, pointer);
    transition: border-color 0.2s, background 0.2s;
}
.fmt-option:hover { border-color: rgba(233,201,106,0.45); }
.fmt-option.on { border-color: var(--gold-hi); background: rgba(233,201,106,0.1); }
.fmt-option b { display: block; font-family: var(--serif); font-weight: 500; font-size: 0.95rem; color: var(--white); }
.fmt-option small { display: block; font-family: var(--sans); font-size: 0.66rem; color: var(--silver-dim); margin-top: 2px; }
/* The manufacturing size, set apart from the descriptive note so the
   number reads as a spec rather than as more prose. */
.fmt-size {
    display: block;
    margin-top: 5px;
    font-family: var(--sans);
    font-size: 0.58rem; font-weight: 600; letter-spacing: 0.18em;
    color: var(--gold-hi);
    font-variant-numeric: tabular-nums;
}
.fmt-icon { width: 26px; height: 26px; flex-shrink: 0; position: relative; }
.fmt-icon.pin { background: #e9dcc0; border-radius: 3px; width: 20px; height: 26px; }
.fmt-icon.pin::after { content: ''; position: absolute; inset: 7px 4px 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1px #9c7426; }
.fmt-icon.sticker { border-radius: 40% 60% 55% 45%; background: var(--silver-hi); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 8px var(--red-warm); }
.fmt-icon.patch { border-radius: 50%; background: #e2d3b2; box-shadow: 0 0 0 3px #a8843a; }
.fmt-icon.tag { width: 18px; border-radius: 4px 4px 6px 6px; background: linear-gradient(160deg, #6e1c16, #3a0d0a); }
.fmt-icon.tag::after { content: ''; position: absolute; top: 4px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--gold); }

.pick-summary {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(228,228,228,0.08);
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.pick-summary p { font-family: var(--serif); font-size: 1.25rem; color: var(--white); }
.pick-summary small { display: block; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver-dim); margin-top: 3px; }
.pick-actions { display: flex; gap: 8px; }
.pick-actions .btn { padding: 11px 16px; }
.btn-gold.on { background: linear-gradient(135deg, #7a5215, #c9a84c); }
.fine-print { font-family: var(--sans); font-size: 0.7rem; color: var(--silver-dim); line-height: 1.5; }

/* ── Format guide ── */
.formats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 40px;
}
.format-card { text-align: center; }
.format-card .p-stage { aspect-ratio: 1; }
.format-card .p-stage .mock { zoom: 0.78; }
.format-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; color: var(--white); margin-top: 14px; }
/* On a catalogue card the text column is only ~100px wide, so the size
   gets its own line rather than trailing the format name and wrapping
   into an orphan. Same treatment as the format guide's spec line. */
.p-size {
    font-family: var(--sans);
    font-size: 0.56rem; font-weight: 600; letter-spacing: 0.2em;
    color: var(--gold-hi);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}
.format-card .fmt-spec {
    font-family: var(--sans);
    font-size: 0.6rem; font-weight: 600; letter-spacing: 0.2em;
    color: var(--gold-hi);
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}
.format-card p { font-family: var(--sans); font-size: 0.82rem; line-height: 1.55; color: var(--silver-mid); margin-top: 6px; }

/* ── Catalogue ── */
.cat-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 14px;
    margin-top: 34px;
}
.cat-bar .search { position: relative; flex: 0 1 320px; }
.cat-bar .search input {
    width: 100%;
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--white);
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(228,228,228,0.16);
    border-radius: 999px;
    padding: 10px 16px 10px 38px;
    outline: none;
}
.cat-bar .search input:focus { border-color: var(--gold-hi); }
.cat-bar .search svg { position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); stroke: var(--silver-dim); }
.cat-count { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--silver-dim); margin: 0; }

/* ── Suggestions ──
   Sits inside .cat-bar .search, which is the positioned ancestor. */
.cat-suggest {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px);
    z-index: 40;
    max-height: 296px; overflow-y: auto; overscroll-behavior: contain;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid rgba(233,201,106,0.28);
    background: rgba(18,6,5,0.97);
    box-shadow: 0 26px 54px rgba(0,0,0,0.6);
}
.cat-suggest[hidden] { display: none; }
.cat-suggest button {
    display: flex; align-items: center; gap: 11px;
    width: 100%;
    padding: 8px 10px;
    border: 0; border-radius: 9px;
    background: none;
    color: var(--silver-hi);
    font-family: var(--sans); font-size: 0.88rem; text-align: left;
    cursor: var(--cur-hand, pointer);
}
.cat-suggest button img { flex: none; width: 26px; height: 26px; object-fit: contain; }
/* .on is the keyboard cursor; it has to look identical to :hover or the
   arrow keys and the mouse appear to disagree about what is selected. */
.cat-suggest button:hover,
.cat-suggest button.on { background: rgba(233,201,106,0.14); color: var(--white); }
.cat-suggest .none {
    padding: 12px 10px;
    font-family: var(--sans); font-size: 0.82rem; color: var(--silver-dim);
}

/* ── The rail ──
   Arrows sit BESIDE the track, not over it: an arrow floating on top of
   the first and last card hides exactly the thing you are trying to
   look at. minmax(0, 1fr) on the middle column is load-bearing — a bare
   1fr floors at the track's min-content, which is what burst the old
   grid out past the page and gave the clipped right-hand card. */
.cat-rail {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}
.rail-nav {
    display: grid; place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(233,201,106,0.3);
    background: rgba(0,0,0,0.3);
    cursor: var(--cur-hand, pointer);
    transition: border-color 0.25s, background 0.25s, opacity 0.25s;
}
.rail-nav:hover { border-color: var(--gold-hi); background: rgba(233,201,106,0.1); }
.rail-nav:disabled { opacity: 0.25; pointer-events: none; }
.rail-nav .arr { font-size: 1rem; }

/* The track is a real scroll container, so touch and trackpad swipe it
   natively and the arrows are only the mouse affordance on top. Cards
   are sized off the track's OWN width, so a page is always exactly a
   screenful and no card is ever left half-cut at an edge. */
.catalog {
    display: grid;
    grid-auto-flow: column;
    --cat-per: 4;
    --cat-gap: 18px;
    grid-auto-columns: calc((100% - (var(--cat-per) - 1) * var(--cat-gap)) / var(--cat-per));
    gap: var(--cat-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.catalog::-webkit-scrollbar { display: none; }
.catalog > .product { scroll-snap-align: start; }
.catalog:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 6px; border-radius: 8px; }
.catalog .p-stage { cursor: var(--cur-hand, pointer); }
.catalog .p-stage .mock { zoom: 0.86; }
/* ── Two of the four mockups are portrait ──
   .m-sticker and .m-patch are square, .m-pin is 3/4 and .m-tag is 3/5,
   so one zoom for all four left the tall pair looming over the short
   pair (78% and 85% of the stage against 61% and 57%) and the row
   changed weight every time you switched tab. These bring all four to
   about 60% of the stage, so the set reads as one.

   The tag also needs the margin. Its cord is an ::after drawn at
   top: -34px, and an absolutely positioned pseudo-element adds nothing
   to the border box — so the box the stage centres is 34px shorter
   than what actually paints, and the cord was being sliced off by the
   stage's overflow: hidden.

   What the margin centres is the tag BODY, not the cord-plus-body
   envelope. Centring the envelope is the obvious move and it is wrong:
   the cord is a thin overhang and the body is the whole visual mass, so
   balancing the two together leaves the body sitting 19px low and the
   card reads as having slipped down its box. At 46px the body comes out
   55 top / 58 bottom with the cord still clearing the edge by 34px.
   Tuned by measurement — rotate(4deg) about a 50% 0 origin makes the
   arithmetic untrustworthy. */
.catalog .p-stage .m-pin { zoom: 0.70; }
.catalog .p-stage .m-tag { zoom: 0.62; margin-top: 46px; }
.catalog .p-name { font-size: 0.98rem; }
.cat-empty {
    grid-column: 1 / -1;
    padding: 40px 0;
    font-family: var(--sans); font-size: 0.9rem; color: var(--silver-dim);
}

/* ── Page indicator ──
   Dots while they stay countable at a glance; past that a plain
   counter, because 22 identical dots tell you nothing. */
.rail-foot { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 20px; min-height: 10px; }
.rail-foot button {
    width: 7px; height: 7px; padding: 0;
    border: 0; border-radius: 50%;
    background: rgba(228,228,228,0.24);
    cursor: var(--cur-hand, pointer);
    transition: background 0.25s, transform 0.25s;
}
.rail-foot button:hover { background: rgba(233,201,106,0.6); }
.rail-foot button.on { background: var(--gold-hi); transform: scale(1.5); }
.rail-foot .count {
    font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.16em;
    color: var(--silver-dim); font-variant-numeric: tabular-nums;
}
.rail-foot .count b { color: var(--gold-hi); font-weight: 600; }

/* ── Wishlist drawer ── */
.wish-fab {
    position: fixed; right: 22px; bottom: 22px;
    z-index: 60;
    display: flex; align-items: center; gap: 10px;
    font-family: var(--sans);
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    color: #2a0907;
    background: linear-gradient(135deg, #a57c2a, var(--gold-hi) 45%, #f5e090 55%, var(--gold));
    border: 0;
    border-radius: 999px;
    padding: 12px 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    cursor: var(--cur-hand, pointer);
    transform: translateY(calc(100% + 40px));
    transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.wish-fab.show { transform: none; }
.wish-fab .n {
    min-width: 22px; height: 22px;
    border-radius: 999px;
    background: #2a0907; color: var(--gold-hi);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem; letter-spacing: 0;
}
.wish-fab.bump { animation: bump 0.4s ease; }
@keyframes bump { 40% { transform: scale(1.12); } }

.drawer-scrim {
    position: fixed; inset: 0;
    z-index: 80;
    background: rgba(8,2,1,0.6);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
}
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    z-index: 81;
    width: min(400px, 100%);
    background: #1c0806;
    border-left: 1px solid rgba(233,201,106,0.2);
    box-shadow: -20px 0 60px rgba(0,0,0,0.5);
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.drawer-open .drawer-scrim { opacity: 1; pointer-events: auto; }
.drawer-open .drawer { transform: none; }
.drawer-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 22px 24px;
    border-bottom: 1px solid rgba(228,228,228,0.08);
}
.drawer-head h2 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; color: var(--white); }
.drawer-head button { background: none; border: 0; color: var(--silver-mid); font-size: 1.1rem; cursor: var(--cur-hand, pointer); }
.drawer-list { flex: 1; overflow-y: auto; padding: 10px 16px; list-style: none; }
.drawer-list li {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 8px;
    border-bottom: 1px solid rgba(228,228,228,0.06);
}
.drawer-list img { width: 48px; height: 48px; object-fit: contain; }
.drawer-list .meta { flex: 1; min-width: 0; }
.drawer-list .meta b { display: block; font-family: var(--serif); font-weight: 500; color: var(--white); }
.drawer-list .meta small { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--silver-dim); }
.drawer-list .rm { background: none; border: 0; color: var(--silver-dim); cursor: var(--cur-hand, pointer); font-size: 0.9rem; }
.drawer-list .rm:hover { color: var(--gold-hi); }
.drawer-empty { padding: 40px 10px; text-align: center; font-family: var(--sans); color: var(--silver-dim); font-size: 0.9rem; line-height: 1.6; }
.drawer-foot {
    padding: 18px 24px 24px;
    border-top: 1px solid rgba(228,228,228,0.08);
    font-family: var(--sans);
    font-size: 0.78rem; line-height: 1.6;
    color: var(--silver-mid);
}
.vh {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.wf-lead { font-family: var(--serif); font-size: 1.05rem; color: var(--white); line-height: 1.3; }
.wf-sub { margin-top: 5px; font-size: 0.76rem; color: var(--silver-dim); }
.wf-row { display: flex; gap: 8px; margin-top: 12px; }
.wf-field { flex: 1; min-width: 0; }
.wf-field input {
    width: 100%;
    font-family: var(--sans); font-size: 0.85rem;
    color: var(--white);
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(228,228,228,0.16);
    border-radius: 8px;
    padding: 11px 12px;
    transition: border-color 0.2s;
}
.wf-field input::placeholder { color: var(--silver-dim); }
.wf-field input:focus { outline: 0; border-color: var(--gold-hi); }
.wf-send { flex: none; padding: 11px 16px; }
.wf-send[disabled] { opacity: 0.6; pointer-events: none; }
/* The status line only takes space once it has something to say, so the
   drawer does not sit with a gap under the field. */
.wf-msg { margin-top: 10px; font-size: 0.76rem; line-height: 1.5; color: var(--gold-hi); }
.wf-msg:empty { display: none; }
.wf-fine { margin-top: 10px; font-size: 0.68rem; color: var(--silver-dim); }
.drawer-foot.bad .wf-field input { border-color: rgba(255,120,100,0.7); }
.drawer-foot.bad .wf-msg { color: #ff9b8c; }
.drawer-foot.done .wf-field input { border-color: rgba(42,157,143,0.6); }

@media (max-width: 1000px) {
    .catalog { --cat-per: 3; }
    .formats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .studio { grid-template-columns: 1fr; }
    /* Stacked, the stage is alone in its row with nothing to stretch to,
       so it goes back to being square. */
    .studio .p-stage { aspect-ratio: 1; min-height: 360px; }
    .studio .p-stage .mock { zoom: 1.3; }
    .controls { border-left: 0; border-top: 1px solid rgba(228,228,228,0.08); padding: 22px 18px; }
    .catalog { --cat-per: 2; }
}
/* The drawer is min(400px, 100%), so on a narrow phone it is the whole
   screen. Field + button fit side by side at 400 with almost nothing to
   spare, so below that they stack rather than squeezing the input. */
@media (max-width: 390px) {
    .wf-row { flex-direction: column; }
    .wf-send { width: 100%; }
}
@media (max-width: 520px) {
    .fmt-options { grid-template-columns: 1fr; }
    /* One card a page, and the arrows shrink so the track keeps the width. */
    .catalog { --cat-per: 1; --cat-gap: 12px; }
    .catalog .p-stage .mock { zoom: 0.7; }
    .catalog .p-stage .m-pin { zoom: 0.57; }
    .catalog .p-stage .m-tag { zoom: 0.50; margin-top: 46px; }
    .cat-rail { gap: 8px; }
    .rail-nav { width: 38px; height: 38px; }
    .cat-bar .search { flex: 1 1 100%; }
    .formats { grid-template-columns: 1fr 1fr; gap: 12px; }
}