/*
  Duka storefront.

  Every value here comes from the design canvas token panel (artboard 1j) and is FIXED. The only
  merchant input is --brand, set inline per shop by the layout, from which --on-brand and
  --brand-tint are derived server-side.

  Two rules that look like omissions and are not:
    * No shadows anywhere. Elevation is a 1px line on a white surface. Shadows blur on low-DPI
      panels and wash out in sunlight, which is the daylight-in-Kampala case, not an edge case.
    * Nothing below 12px, and product names never below 14px.
*/

:root {
    --ink: #1B1916;
    --text-2: #5C5750;
    --meta: #7A746B;
    --surface: #F7F5F1;
    --surface-2: #EFECE6;
    --surface-3: #F5F2ED;
    --border: #E6E1D9;
    --border-2: #DCD6CC;
    --muted: #C9C3B9;
    --white: #FFFFFF;

    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 12px;
    --r-xl: 14px;
    --r-pill: 999px;

    --gutter: 16px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }

input, select, textarea { font: inherit; color: inherit; }

/* The phone frame. Above 420px the shop centres rather than stretching: this design is specified
   at 360px and a 1200px-wide product grid would be a different design, not a wider one. */
.shell {
    max-width: 420px;
    margin: 0 auto;
    background: var(--surface);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------- type scale ---------- */

.t-price-xl { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.t-title    { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.t-heading  { font-size: 16px; font-weight: 700; }
.t-price    { font-size: 15px; font-weight: 700; }
.t-body     { font-size: 14px; font-weight: 500; }
.t-chip     { font-size: 13px; font-weight: 600; }
.t-meta     { font-size: 12px; font-weight: 400; color: var(--meta); }

.t-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--meta);
}

/* ---------- header ---------- */

.header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px var(--gutter) 10px;
    background: var(--white);
}

.header__logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--surface-2);
    flex: none;
    object-fit: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--meta);
}

.header__names { flex: 1; min-width: 0; }

.header__shop {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header__sub { font-size: 12px; color: var(--meta); line-height: 1.2; }

/* The 3px brand rule under the header. One of the five places brand is allowed. */
.brand-rule { height: 3px; background: var(--brand); }

.back {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.back__glyph {
    width: 10px;
    height: 10px;
    border-left: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: rotate(45deg);
    margin-left: 4px;
}

/* ---------- cart button ---------- */

.cart-button {
    width: 44px;
    height: 44px;
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: none;
}

.cart-button__glyph {
    width: 20px;
    height: 16px;
    border: 2px solid var(--ink);
    border-top-width: 3px;
    border-radius: 3px 3px 6px 6px;
}

.cart-button__count {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--brand);
    color: var(--on-brand);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- page body ---------- */

.page {
    padding: 14px var(--gutter) 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
}

.section { display: flex; flex-direction: column; gap: 12px; }

.section__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.section__link {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand);
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* ---------- search ---------- */

.search {
    height: 44px;
    border-radius: var(--r-lg);
    background: var(--white);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    color: var(--meta);
    font-size: 14px;
    width: 100%;
}

.search__glyph {
    width: 14px;
    height: 14px;
    border: 2px solid var(--meta);
    border-radius: 50%;
    flex: none;
}

.search input {
    border: none;
    outline: none;
    background: none;
    flex: 1;
    min-width: 0;
    color: var(--ink);
}

/* ---------- category rail ---------- */

.rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
    scrollbar-width: none;
}

.rail::-webkit-scrollbar { display: none; }

.rail__item { flex: none; width: 96px; display: flex; flex-direction: column; gap: 6px; }

.rail__frame {
    aspect-ratio: 1;
    border-radius: var(--r-xl);
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8%;
}

.rail__frame img { width: 100%; height: 100%; object-fit: contain; }

.rail__label { font-size: 13px; font-weight: 600; text-align: center; }

/* ---------- product grid ---------- */

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
}

.card { display: flex; flex-direction: column; gap: 8px; }

/*
  The 4:5 frame with contain and an 8% inset is what turns a merchant's mixed phone photos into a
  catalogue: portrait, landscape and square shots all read as one grid.
*/
.frame {
    aspect-ratio: 4 / 5;
    border-radius: var(--r-lg);
    background: var(--surface-2);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8%;
    position: relative;
}

.frame img { width: 100%; height: 100%; object-fit: contain; }

/* Stands in for a photo the merchant has not uploaded yet, in the canvas's own hatch. */
.frame__placeholder {
    width: 70%;
    height: 85%;
    border-radius: 3px;
    background: repeating-linear-gradient(135deg, var(--border-2) 0 5px, var(--border) 5px 10px);
}

.frame__tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--brand);
    color: var(--on-brand);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: var(--r-sm);
}

.card__meta { display: flex; flex-direction: column; gap: 2px; }
.card__name { font-size: 14px; font-weight: 500; line-height: 1.3; }

/* ---------- chips ---------- */

.chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px var(--gutter);
    margin: 0 calc(var(--gutter) * -1);
    scrollbar-width: none;
}

.chips::-webkit-scrollbar { display: none; }

.chip {
    flex: none;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--border);
    background: var(--white);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    /* 36px tall but a 44px hit area, per the touch rules. */
    position: relative;
}

.chip::after {
    content: "";
    position: absolute;
    inset: -4px 0;
}

.chip--on {
    border-color: var(--brand);
    background: var(--brand-tint);
    color: var(--ink);
}

/* ---------- product detail ---------- */

.hero {
    aspect-ratio: 4 / 5;
    background: var(--surface-2);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6%;
}

.hero img { width: 100%; height: 100%; object-fit: contain; }

.hero__back {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 44px;
    height: 44px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbs { display: flex; gap: 8px; padding: 10px var(--gutter) 0; overflow-x: auto; scrollbar-width: none; }
.thumbs::-webkit-scrollbar { display: none; }

.thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    overflow: hidden;
}

.thumb--on { border-color: var(--brand); }
.thumb img { width: 100%; height: 100%; object-fit: contain; }

.options { display: flex; gap: 8px; flex-wrap: wrap; }

.option {
    flex: 1 0 auto;
    min-width: 56px;
    height: 44px;
    border-radius: var(--r-md);
    border: 1.5px solid var(--border);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

/* A colour, shown as a colour. The ring is a hairline rather than a shadow, so a white swatch
   still reads as a swatch on a white card. */
.swatch {
    width: 18px;
    height: 18px;
    border-radius: 9px;
    border: 1px solid rgba(27, 25, 22, 0.18);
    flex: none;
    display: inline-block;
}

.option { gap: 6px; }

.option--on,
.option:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }

.option:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }

.option--out {
    color: var(--muted);
    border-style: dashed;
    text-decoration: line-through;
}

.accordion { display: flex; flex-direction: column; border-top: 1px solid var(--border); }

.accordion summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 48px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    font-weight: 500;
    list-style: none;
    cursor: pointer;
}

.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; color: var(--meta); font-size: 18px; }
.accordion details[open] summary::after { content: "\2212"; }
.accordion .accordion__body { padding: 0 0 12px; font-size: 14px; color: var(--text-2); }

/* ---------- sticky action bar ---------- */

.sticky {
    position: sticky;
    bottom: 0;
    padding: 12px var(--gutter) 14px;
    background: var(--white);
    /* A line, not a shadow. */
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    /* auto, not a fixed gap: on a short page the bar sits at the bottom of the screen where a
       thumb expects it, and on a long one it still sticks while scrolling. */
    margin-top: auto;
}

.cta {
    flex: 1;
    min-height: 52px;
    border-radius: var(--r-xl);
    background: var(--brand);
    color: var(--on-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    padding: 0 12px;
    width: 100%;
}

.cta--ghost {
    background: var(--white);
    color: var(--ink);
    border: 1.5px solid var(--border);
}

.cta[disabled] { background: var(--muted); color: var(--white); }

.cta__whatsapp {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2.5px solid currentColor;
    position: relative;
    flex: none;
}

.cta__whatsapp::after {
    content: "";
    position: absolute;
    left: -4px;
    bottom: -3px;
    border: 5px solid transparent;
    border-top-color: currentColor;
    transform: rotate(30deg);
}

.icon-button {
    width: 52px;
    height: 52px;
    border-radius: var(--r-xl);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* ---------- cards, rows, lists ---------- */

.panel {
    background: var(--white);
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
    overflow: hidden;
}

.row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    min-height: 52px;
    border-bottom: 1px solid var(--border);
    width: 100%;
    text-align: left;
}

.row:last-child { border-bottom: none; }
.row--on,
.row:has(input:checked) { background: var(--brand-tint); }

.radio {
    width: 22px;
    height: 22px;
    border-radius: 11px;
    border: 2px solid var(--border-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.row--on .radio,
.row:has(input:checked) .radio { border-color: var(--brand); }
.radio__dot { width: 10px; height: 10px; border-radius: 5px; background: transparent; }
.row--on .radio__dot,
.row:has(input:checked) .radio__dot { background: var(--brand); }

.row__label { flex: 1; font-size: 14px; font-weight: 500; }
.row__value { font-size: 14px; font-weight: 600; color: var(--text-2); }

/* ---------- cart lines ---------- */

.line { display: flex; gap: 12px; padding: 12px; border-bottom: 1px solid var(--border); }
.line:last-child { border-bottom: none; }

.line__frame {
    width: 72px;
    height: 90px;
    border-radius: 8px;
    background: var(--surface-2);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 6%;
}

.line__frame img { width: 100%; height: 100%; object-fit: contain; }

.line__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    gap: 8px;
}

.stepper {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    height: 36px;
}

.stepper button {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-2);
}

.stepper__qty { min-width: 24px; text-align: center; font-size: 14px; font-weight: 600; }

/* ---------- editor photo gallery ---------- */

.gallery { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }

.gallery__item { display: flex; flex-direction: column; gap: 4px; }

.gallery__badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--on-brand);
    background: var(--brand);
    border-radius: var(--r-sm);
    padding: 3px 6px;
    text-align: center;
}

.gallery__action {
    font-size: 12px;
    font-weight: 600;
    min-height: 32px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--white);
}

.gallery__action--remove { color: #B3261E; }

/* ---------- editor option rows ---------- */

.optrow {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.optrow:last-child { border-bottom: none; }

.optrow__line { display: flex; gap: 8px; align-items: center; }

.optrow__line select,
.optrow__line input {
    min-height: 44px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    padding: 8px 10px;
    background: var(--white);
    min-width: 0;
}

.optrow__line select { flex: 1.4; }
.optrow__line input { flex: 1; width: 100%; }

/* The colour row scrolls rather than wrapping into four ragged lines on a 360px screen. */
.swatches {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.swatches::-webkit-scrollbar { display: none; }

.swatchpick {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 32px drawn, 44px touchable — the swatches would otherwise be the smallest targets on the page. */
.swatchpick::after { content: ""; position: absolute; inset: -6px; }

.swatchpick--on,
.swatchpick:has(input:checked) { border-color: var(--ink); }

.swatchpick .swatch { width: 22px; height: 22px; border-radius: 11px; }

.swatchpick__none {
    width: 22px;
    height: 22px;
    border-radius: 11px;
    border: 1px solid var(--border-2);
    background:
        linear-gradient(to bottom right, transparent calc(50% - 1px),
        var(--muted) calc(50% - 1px), var(--muted) calc(50% + 1px), transparent calc(50% + 1px)),
        var(--white);
}

.field select {
    min-height: 48px;
    border-radius: var(--r-md);
    border: 1.5px solid var(--border);
    background: var(--white);
    padding: 12px 14px;
    width: 100%;
}

/* ---------- totals ---------- */

.totals { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--text-2); }
.totals__row { display: flex; justify-content: space-between; gap: 12px; }

.totals__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    color: var(--ink);
}

.totals__total b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }

/* ---------- payment note ---------- */

.paynote {
    background: var(--white);
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
    padding: 12px 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-2);
}

.paynote strong { color: var(--ink); }
.paynote__marks { display: flex; gap: 4px; flex: none; margin-top: 2px; }

.paymark {
    width: 22px;
    height: 22px;
    border-radius: var(--r-sm);
    font-size: 7px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.paymark--mtn { background: #FFCC00; color: #1B1916; }
.paymark--airtel { background: #E4002B; color: #FFFFFF; font-size: 6px; }
.paymark--cash { background: var(--surface-2); color: var(--text-2); }

/* ---------- forms ---------- */

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }

.field input, .field textarea {
    min-height: 48px;
    border-radius: var(--r-md);
    border: 1.5px solid var(--border);
    background: var(--white);
    padding: 12px 14px;
    outline: none;
    width: 100%;
}

.field input:focus, .field textarea:focus { border-color: var(--brand); }
.field textarea { min-height: 88px; resize: vertical; }

.field__error { font-size: 12px; color: #B3261E; font-weight: 600; }

/* ---------- empty and loading ---------- */

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 48px 24px;
}

.empty__glyph {
    width: 64px;
    height: 64px;
    border-radius: var(--r-xl);
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: var(--r-lg);
}

@keyframes shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}

/* ---------- footer note ---------- */

.footnote {
    margin-top: 20px;
    padding: 12px var(--gutter);
    background: var(--white);
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.35;
}

.footnote__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }

.legal {
    padding: 16px var(--gutter) 24px;
    display: flex;
    gap: 16px;
    justify-content: center;
    font-size: 12px;
    color: var(--meta);
}

.legal a { min-height: 44px; display: flex; align-items: center; }

/* ---------- WhatsApp message preview (artboard 1e) ---------- */

.wa-preview { background: #E5DDD5; border-radius: var(--r-lg); padding: 16px; }

.wa-bubble {
    background: #DCF8C6;
    border-radius: 10px 0 10px 10px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-line;
    color: #1B1916;
    margin-left: 24px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- product options: pick sizes, pick colours, price the combinations ----------

   The merchant thinks in three steps and the section is now built as three: which sizes, which
   colours, then what each combination costs. The combinations are written by the page as the first
   two are answered, because a shop stocking four sizes in three colours should not be twelve
   separate acts of data entry.

   Everything here reuses the chips and swatches already defined above. What is new is the affixed
   number field and the combination row, both of which exist to answer questions a bare number box
   left open: which currency, and how many of what. */

.picker { display: flex; flex-direction: column; gap: 8px; }

.picker__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.picker__count { font-size: 13px; color: var(--text-2); }

/* An empty size list is a consequence of not having chosen a category, and silence there reads as a
   broken page. */
.picker__empty {
    font-size: 14px;
    color: var(--text-2);
    background: var(--surface-3);
    border: 1px dashed var(--border-2);
    border-radius: var(--r-md);
    padding: 12px;
}

/* A number that means money or quantity, with the unit attached to the field rather than floating
   in a placeholder that vanishes the moment you type. */
.affix {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    background: var(--white);
    overflow: hidden;
    min-width: 0;
    flex: 1;
}

.affix:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }

.affix__unit {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.affix__unit--trail { border-left: 1px solid var(--border); }
.affix__unit:not(.affix__unit--trail) { border-right: 1px solid var(--border); }

/* Wins over .optrow__line input, which would otherwise draw a second border inside the frame. */
.optrow__line .affix input,
.combo__line .affix input,
.affix input {
    border: 0;
    background: transparent;
    min-height: 44px;
    padding: 8px 10px;
    width: 100%;
    min-width: 0;
}

.affix input:focus { outline: none; }

/* One stocked combination. The size and colour are settled by the pickers above, so they are shown
   rather than re-asked; only the price and the count are still open questions. */
.combo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
}

.combo:last-child { border-bottom: none; }

.combo__head { display: flex; align-items: center; gap: 8px; }

.combo__name { font-weight: 600; font-size: 15px; flex: 1; min-width: 0; }

.combo__swatch {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    flex: none;
    border: 1px solid rgba(27, 25, 22, .14);
}

.combo__drop {
    flex: none;
    min-height: 44px;
    min-width: 44px;
    border: 0;
    background: transparent;
    color: var(--text-2);
    font-size: 20px;
    line-height: 1;
    border-radius: var(--r-md);
    cursor: pointer;
}

.combo__drop:hover { color: var(--ink); background: var(--surface-2); }

.combo__line { display: flex; gap: 8px; align-items: stretch; }

/* Applies one price and one count to every row, so a merchant who charges the same for all of them
   answers once. */
.applyall {
    display: flex;
    gap: 8px;
    align-items: stretch;
    padding: 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-3);
    flex-wrap: wrap;
}

.applyall .affix { flex: 1 1 120px; }

.applyall__go {
    flex: none;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--r-md);
    border: 1.5px solid var(--border-2);
    background: var(--white);
    font-weight: 600;
    cursor: pointer;
}

.applyall__go:hover { border-color: var(--ink); }