/*!
 * Weekly product blocks — front end.
 *
 * Self-contained on purpose. These cards land inside somebody else's theme,
 * so every rule is scoped under .wkp, inherited typography and spacing are
 * reset at the root, and nothing here leaks outward. Two skins, both
 * complete: a theme's own dark mode never gets a say.
 *
 * Values come from Weekly's design tokens (DESIGN_LANGUAGE.md §2): primary
 * #06B6D4, the 135° teal→cyan→blue gradient, danger #EF4444, success #22C55E,
 * slate for everything else.
 */

.wkp {
    --wkp-primary: #06b6d4;
    --wkp-primary-light: #2dd4bf;
    --wkp-primary-dark: #3b82f6;
    --wkp-primary-tint: rgba(6, 182, 212, 0.09);
    /*
     * The CTA gradient is the brand's teal → cyan → blue, walked down until
     * white text clears 4.5:1 at EVERY point along it. The bright brand ramp
     * put its own label at 1.86:1 on the first stop — a button you cannot read
     * is not a brand asset.
     */
    --wkp-cta: linear-gradient(135deg, #0f766e 0%, #0369a1 50%, #1d4ed8 100%);
    --wkp-primary-ink: #0e7490;
    --wkp-sale: #dc2626;
    --wkp-sale-badge: #b91c1c;  /* white at 11px needs 4.5:1 */
    --wkp-stock: #15803d;   /* 5.0:1 at 11px; #16a34a was 3.3:1 */
    --wkp-preorder: #b45309;
    --wkp-pre-ink: #8a3f07;
    --wkp-pre-wash: rgba(180, 83, 9, 0.08);
    --wkp-in-ink: #14622f;
    --wkp-in-wash: rgba(21, 128, 61, 0.08);
    --wkp-star: #b45309;   /* 2.15:1 at #f59e0b was invisible on white */
    --wkp-ink: #0f172a;
    --wkp-muted: #51617a;   /* 5.5:1 on white, 5.0:1 on the chip tint */
    --wkp-faint: #475569;   /* real copy: 7.6:1 on white. Was #94a3b8 at 2.5:1. */
    --wkp-line: #e2e8f0;
    --wkp-ground: #f4f7fa;
    --wkp-surface: rgba(255, 255, 255, 0.85);
    --wkp-surface-solid: #ffffff;
    --wkp-border: #e6ecf3;   /* was rgba(255,255,255,.6) — 1.08:1, invisible */
    --wkp-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    --wkp-media-bg: #ffffff;
    --wkp-chip-bg: #f1f5f9;

    box-sizing: border-box;
    margin: 1.5em 0;
    color: var(--wkp-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    text-align: start;   /* logical: `left` overrode an RTL document */
    -webkit-font-smoothing: antialiased;

    /* The UNFILLED half of a rating. It was hardcoded #cbd5e1, which on the
       dark surface is LIGHTER than the filled stars — so a 3-star rating read
       as 5. Every colour that escaped tokenisation is a dark-mode bug by
       construction, which is why these live here. */
    --wkp-star-track: #cbd5e1;
    --wkp-notice-bg: #fffbeb;
    --wkp-notice-ink: #78350f;
    --wkp-notice-line: #fde68a;
    --wkp-notice-rule: #f59e0b;
}

.wkp--dark {
    --wkp-star-track: #475569;
    --wkp-notice-bg: rgba(120, 53, 15, 0.18);
    --wkp-notice-ink: #fcd34d;
    --wkp-notice-line: rgba(251, 191, 36, 0.35);
    --wkp-notice-rule: #f59e0b;
    --wkp-primary: #22d3ee;
    --wkp-primary-tint: rgba(34, 211, 238, 0.14);
    --wkp-cta: linear-gradient(135deg, #0f766e 0%, #0369a1 50%, #1d4ed8 100%);
    --wkp-primary-ink: #67e8f9;
    --wkp-sale: #fb7185;
    --wkp-sale-badge: #dc2626;
    --wkp-stock: #34d399;
    --wkp-preorder: #fbbf24;
    --wkp-pre-ink: #fcd34d;
    --wkp-pre-wash: rgba(251, 191, 36, 0.16);
    --wkp-in-ink: #6ee7b7;
    --wkp-in-wash: rgba(52, 211, 153, 0.16);
    --wkp-star: #fbbf24;
    --wkp-ink: #f1f5f9;
    --wkp-muted: #a4b3c8;   /* dark skin: clears 4.5:1 on the surface AND the tint */
    --wkp-faint: #8fa0b6;   /* dark skin: 4.7:1 on slate-800 */
    --wkp-line: #253044;
    --wkp-ground: #131c2e;
    --wkp-surface: rgba(30, 41, 59, 0.85);
    --wkp-surface-solid: #1e293b;
    --wkp-border: rgba(51, 65, 85, 0.6);
    --wkp-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --wkp-media-bg: rgba(15, 23, 42, 0.5);
    --wkp-chip-bg: #0f172a;
}

/*
 * Components that carry visible type or colour are written at (0,2,0) — a
 * theme's own `.entry-content a { … }` or `.entry-content h3 { margin: 1em 0 }`
 * is (0,1,1) and would otherwise recolour our links, underline them, and put
 * margins back on headings that a flex `gap` is already spacing.
 *
 * Base resets, wrapped in :where() so they carry ZERO specificity. Written as
 * plain `.wkp img` they scored (0,1,1) and quietly beat every component rule
 * below — which is how the brand logo rendered at its natural size despite a
 * 24px cap, and how the Buy button's white label lost to `color: inherit` and
 * came out near-black on the gradient. Resets must always lose to components.
 */
.wkp *,
.wkp *::before,
.wkp *::after { box-sizing: border-box; }

.wkp :where(p, h2, h3) { margin: 0; padding: 0; }

.wkp :where(img) { max-width: 100%; height: auto; display: block; }

.wkp :where(a) { text-decoration: none; color: inherit; }

.wkp :where(button) {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.wkp-panel {
    border-radius: 20px;
    background: var(--wkp-ground);
    padding: 24px;
}

/* ── section head ───────────────────────────────────────────────────── */

.wkp-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 18px;
}

.wkp-head-text { display: flex; flex-direction: column; gap: 4px; }

/* --wkp-primary is 2.3:1 as text on the light ground: it draws borders, dots
   and focus rings. --wkp-primary-ink is the readable half of the same hue. */
.wkp .wkp-kicker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wkp-primary-ink);
}

.wkp .wkp-heading {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--wkp-ink);
}

.wkp .wkp-aside { font-size: 12px; color: var(--wkp-muted); }

/* ── grid ───────────────────────────────────────────────────────────── */

.wkp-grid { display: grid; gap: 20px; grid-template-columns: repeat(1, minmax(0, 1fr)); }
.wkp-picks { margin-top: 16px; gap: 16px; }

@media (min-width: 560px) {
    .wkp-grid--2,
    .wkp-grid--3,
    .wkp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 860px) {
    .wkp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wkp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── card ───────────────────────────────────────────────────────────── */

.wkp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--wkp-border);
    background: var(--wkp-surface);
    box-shadow: var(--wkp-shadow);
}

.wkp-card--wide { display: block; }

@media (min-width: 720px) {
    /*
     * Not 50/50. The picture is one object and needs a fixed amount of room;
     * the details column grows with the number of variations, and matching it
     * left a tall empty white field beside a small photo. The picture keeps
     * its own share and stops stretching past a comfortable height.
     */
    .wkp-card--wide {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        align-items: start;
    }

    .wkp-card--wide .wkp-media {
        position: sticky;
        top: 16px;
        max-height: 420px;
    }
}

.wkp-badge {
    position: absolute;
    left: 16px;
    top: 16px;
    z-index: 2;
    border-radius: 999px;
    background: var(--wkp-sale-badge);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.wkp a/*
 * `width: 100%` is load-bearing, not decoration. With only `aspect-ratio` and
 * a `min-height`, a block whose inline size is indefinite derives its WIDTH
 * from its height — 260px tall × 4/3 came out 347px wide inside a 310px card,
 * clipped by the card's own `overflow: hidden` so no screenshot ever showed
 * it. A definite inline size makes the ratio derive height, which is the way
 * round it was meant to work.
 */
.wkp-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--wkp-media-bg);
    padding: 24px;
    overflow: hidden;
}

.wkp-card--wide .wkp-media { aspect-ratio: 4 / 3; min-height: 260px; padding: 32px; }
/* "Compact" is a layout the block offers; without this it rendered as a base
   card at full panel width, i.e. a ~1100px-wide product photo. */
.wkp--single .wkp-card--compact { max-width: 420px; }

.wkp-card--pick .wkp-media { aspect-ratio: 16 / 10; border-radius: 16px; margin: 16px 16px 0; padding: 14px; }

.wkp-media img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.wkp-media:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
    .wkp-media img { transition: none; }
    .wkp-media:hover img { transform: none; }
}

.wkp-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

.wkp-card--wide .wkp-body { gap: 18px; padding: 28px 30px 30px; }
.wkp-card--pick .wkp-body { gap: 10px; padding: 16px; }

.wkp .wkp-brand {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wkp-primary-ink);
}

/* A wordmark is there to be recognised, not to compete with the product name. */
.wkp-brand-logo {
    height: 18px;
    width: auto;
    max-width: 104px;
    object-fit: contain;
    object-position: left;
    opacity: 0.85;
}

.wkp-card--wide .wkp-brand-logo { height: 24px; max-width: 132px; }

/* Brand on the left, stars on the right — the arrangement the Weekly app uses. */
.wkp-brandrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    min-height: 20px;
}

.wkp-rating { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

/*
 * Two identical star rows stacked: the grey one underneath, the gold one on
 * top clipped to the score. No half-star assets, no rounding to the nearest
 * half — 4.7 draws as 4.7.
 */
.wkp-stars { position: relative; display: inline-block; line-height: 0; color: var(--wkp-star-track); }
.wkp-stars-base,
.wkp-stars-fill { display: inline-flex; gap: 1px; }
.wkp-stars-fill {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: var(--wkp-star);
}

.wkp-rating-num { font-size: 12px; font-weight: 700; color: var(--wkp-ink); }
.wkp-rating-count { font-size: 11px; color: var(--wkp-muted); }
/* On a narrow card the review count is the first thing to go, rather than
   being clipped by the card's own edge. */
.wkp-card--grid .wkp-rating-count { display: none; }

@container (max-width: 300px) {
    .wkp-rating-count { display: none; }
}

.wkp .wkp-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.375;
    color: var(--wkp-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wkp-card--wide .wkp-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    -webkit-line-clamp: 3;
}

.wkp-card--pick .wkp-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }

.wkp .wkp-category { font-size: 14px; color: var(--wkp-muted); }

/* ── variations ─────────────────────────────────────────────────────── */

/* ── variation picker: one group of pills per attribute ─────────────── */

.wkp-axes { display: flex; flex-direction: column; gap: 12px; }
.wkp-axis { display: flex; flex-direction: column; gap: 6px; }

.wkp .wkp-axis-name {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wkp-muted);
}

/* "Colour: GC" — a swatch cannot label itself, so the header names the pick. */
.wkp-axis-chosen {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--wkp-ink);
}

/* ── colour swatches ─────────────────────────────────────────────────── */

.wkp-axis--swatch .wkp-axis-options { gap: 10px; }

.wkp-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--wkp-line);
    background: var(--wkp-surface-solid);
    padding: 3px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wkp-swatch-dot {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    /* A pale finish needs an edge or it reads as an empty circle. */
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.wkp-swatch:hover { border-color: var(--wkp-primary); }
.wkp-swatch:focus-visible { outline: 2px solid var(--wkp-primary); outline-offset: 2px; }

.wkp-swatch.is-active {
    border-color: var(--wkp-primary);
    box-shadow: 0 0 0 2px var(--wkp-primary);
}

.wkp-swatch[data-wkp-unavailable] { opacity: 0.4; }

.wkp-swatch[data-wkp-unavailable] .wkp-swatch-dot {
    /* Struck through, so "cannot have this one with your other choices" does
       not read as merely a dull colour. */
    background-image: linear-gradient(135deg, transparent 45%, rgba(15,23,42,0.55) 45%, rgba(15,23,42,0.55) 55%, transparent 55%) !important;
}

/* ── value cards (everything that is not a colour) ───────────────────── */

.wkp-opt {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 132px;
    min-height: 62px;
    border-radius: 12px;
    border: 1px solid var(--wkp-line);
    background: var(--wkp-surface-solid);
    padding: 10px 14px;
    text-align: start;   /* logical: `left` overrode an RTL document */
    transition: border-color 0.15s ease, background 0.15s ease;
}

.wkp-opt:hover { border-color: var(--wkp-primary); }
.wkp-opt:focus-visible { outline: 2px solid var(--wkp-primary); outline-offset: 2px; }

.wkp-opt.is-active {
    border-color: var(--wkp-primary);
    background: var(--wkp-primary-tint);
    box-shadow: inset 0 0 0 1px var(--wkp-primary);
}

.wkp-opt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wkp-opt-value { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--wkp-ink); }

.wkp-opt-delta {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--wkp-muted);
}

.wkp-opt-note:empty { display: none; }

.wkp-opt-note {
    align-self: flex-start;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    background: var(--wkp-chip-bg);
    color: var(--wkp-muted);
}

.wkp-opt-note[data-kind="pre"] { background: var(--wkp-pre-wash); color: var(--wkp-pre-ink); }
.wkp-opt-note[data-kind="in"] { background: var(--wkp-in-wash); color: var(--wkp-in-ink); }

.wkp-opt[data-wkp-unavailable] { opacity: 0.55; border-style: dashed; }

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.wkp-axis-options { display: flex; flex-wrap: wrap; gap: 6px; }

/*
 * A pill holds ONE attribute value — "12GB", "Silver" — so it is short by
 * construction and can wrap instead of truncate. This is the whole reason the
 * picker is per-attribute: a joined label ("12GB / 256GB / Silver") has no
 * width at which it reliably fits a card column.
 */
.wkp-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid var(--wkp-line);
    background: var(--wkp-surface-solid);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--wkp-ink);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.wkp-pill:hover { border-color: var(--wkp-primary); }
.wkp-pill:focus-visible { outline: 2px solid var(--wkp-primary); outline-offset: 2px; }

/*
 * The selected pill changes its BACKGROUND and BORDER only. It never restates
 * the colour of the text inside it — that rule is what stopped "Pre-order"
 * from going white on a light tint, and it holds for every state.
 */
.wkp-pill.is-active {
    border-color: var(--wkp-primary);
    background: var(--wkp-primary-tint);
    box-shadow: inset 0 0 0 1px var(--wkp-primary);
    color: var(--wkp-primary-ink);
}

/*
 * "Not with what you have picked" — dimmed, but still a control: clicking it
 * moves you to the nearest combination that does exist rather than doing
 * nothing. Opacity stays above 0.5 so the text itself remains readable.
 */
.wkp-pill[data-wkp-unavailable] {
    opacity: 0.55;
    border-style: dashed;
    color: var(--wkp-muted);
}

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

/* --wkp-faint is 2.5:1 on white — decoration only, never words to read. */
.wkp .wkp-var-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wkp-muted);
}

/*
 * One column by default. Two only when the card is genuinely wide enough for
 * a name AND a price to sit side by side: at half of a half-card the name
 * track collapses under the price and the text wraps one letter per line.
 */
.wkp-var-list { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 8px; }

.wkp-var-more { margin-top: 8px; font-size: 11px; color: var(--wkp-muted); }

/* ── grouped variations: two rows where there were fourteen ──────────── */

.wkp-groups { display: flex; flex-direction: column; gap: 6px; }

.wkp-group-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-height: 52px;
    border-radius: 12px;
    border: 1px solid var(--wkp-line);
    background: var(--wkp-surface-solid);
    padding: 9px 14px;
    text-align: start;   /* logical: `left` overrode an RTL document */
    transition: border-color 0.15s ease, background 0.15s ease;
}

.wkp-group-row:hover { border-color: var(--wkp-primary); }
.wkp-group-row:focus-visible { outline: 2px solid var(--wkp-primary); outline-offset: 2px; }

.wkp-group-row.is-active {
    border-color: var(--wkp-primary);
    background: var(--wkp-primary-tint);
    box-shadow: inset 0 0 0 1px var(--wkp-primary);
}

.wkp-group-main { display: flex; min-width: 0; flex-direction: column; gap: 1px; line-height: 1.3; }
.wkp-group-label { font-size: 14px; font-weight: 700; color: var(--wkp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkp-group-note { font-size: 10.5px; font-weight: 500; color: var(--wkp-muted); }
.wkp-group-note--pre { color: var(--wkp-preorder); }
.wkp-group-note--in { color: var(--wkp-stock); }

.wkp-group-side { display: flex; flex: 0 0 auto; align-items: baseline; gap: 10px; white-space: nowrap; }
.wkp-group-n { font-size: 11px; color: var(--wkp-muted); }
.wkp-group-from { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--wkp-ink); }

.wkp-summary { font-size: 12px; font-weight: 600; color: var(--wkp-muted); }

/* "From £327.95" — the range's floor, not one variation's price. */
.wkp-from { font-size: 12px; font-weight: 600; color: var(--wkp-muted); }

/* ── the sheet's variation list ──────────────────────────────────────── */

/* The full list, scrolling inside the modal — this is the length the card no
   longer has to carry. */
.wkp-sheet-vars {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 32vh;
    overflow-y: auto;
    padding-right: 4px;
    border: 1px solid var(--wkp-line);
    border-radius: 14px;
    padding: 6px;
}

.wkp-sheet-var {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px 12px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid transparent;
    padding: 9px 12px;
    text-align: start;   /* logical: `left` overrode an RTL document */
}

.wkp-sheet-var:hover { background: var(--wkp-chip-bg); }

.wkp-sheet-var.is-active {
    border-color: var(--wkp-primary);
    background: var(--wkp-primary-tint);
}

.wkp-sheet-var-name { font-size: 13px; font-weight: 600; color: var(--wkp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkp-sheet-var-price { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--wkp-ink); }
.wkp-sheet-var-note { grid-column: 1 / -1; font-size: 10.5px; font-weight: 500; color: var(--wkp-muted); }
.wkp-sheet-var-note--pre { color: var(--wkp-preorder); }
.wkp-sheet-var-note--in { color: var(--wkp-stock); }
.wkp-sheet-stores[hidden] { display: none; }

/*
 * Container query, not a viewport one. The wide card is HALF the viewport, so
 * "the window is 1180px" says nothing about whether a variation name fits —
 * which is why they were still truncating on a wide screen. This asks the
 * only question that matters: is this card's body wide enough for two.
 */
.wkp-body { container-type: inline-size; }

@container (min-width: 520px) {
    .wkp-card--wide .wkp-var-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * One row per variation, on a fixed three-column grid — dot, name, price — so
 * prices line up down the column instead of drifting with the name length.
 *
 * The selected row is a tinted panel, not a gradient. There is exactly ONE
 * gradient on a card and it belongs to the Buy button: six glowing chips
 * compete with the thing you actually want clicked, and at six items the glow
 * is what you see instead of the prices.
 */
/*
 * `auto` for the price track sizes it to max-content and lets the name track
 * shrink to nothing — which is exactly what happened. The name gets a floor,
 * the price only ever takes what it needs, and neither may wrap.
 */
.wkp-var {
    display: grid;
    grid-template-columns: 8px minmax(72px, 1fr) min-content;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    border: 1px solid var(--wkp-line);
    background: var(--wkp-surface-solid);
    padding: 9px 14px;
    text-align: start;   /* logical: `left` overrode an RTL document */
    transition: border-color 0.15s ease, background 0.15s ease;
}

.wkp-var:hover { border-color: var(--wkp-primary); }
.wkp-var:focus-visible { outline: 2px solid var(--wkp-primary); outline-offset: 2px; }

.wkp-var.is-active {
    border-color: var(--wkp-primary);
    background: var(--wkp-primary-tint);
    box-shadow: inset 0 0 0 1px var(--wkp-primary);
}

/* The row marker: one per state, always in the grid so the columns hold. */
.wkp-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--wkp-line); }
.wkp-dot--in { background: var(--wkp-stock); }
.wkp-dot--pre { background: var(--wkp-preorder); }
.wkp-dot--out,
.wkp-dot--eol { background: var(--wkp-faint); opacity: 0.5; }
.wkp-dot--none { background: transparent; }
/* Selection recolours the marker only where the marker was not already
   carrying a state. A sold-out row that goes cyan when you pick it has lost
   the one signal it had. */
.wkp-var.is-active .wkp-dot--in,
.wkp-var.is-active .wkp-dot--none { background: var(--wkp-primary); opacity: 1; }

.wkp-var-text { display: flex; min-width: 0; flex-direction: column; gap: 1px; line-height: 1.3; }
/* The fallback list wraps to a second line rather than ellipsising: a name
   cut to "12GB / 256G…" makes six variations look identical. */
.wkp-var-stock { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkp-var-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--wkp-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
 * "In stock" repeated down six rows is noise — the green dot already says it.
 * The line is for the states the dot cannot carry: pre-order, sold out, gone.
 */
.wkp-var-stock { font-size: 10.5px; font-weight: 500; color: var(--wkp-stock); }
.wkp-var-stock--in { display: none; }

.wkp-var-price {
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--wkp-ink);
}

.wkp-var.is-active .wkp-var-price { color: var(--wkp-primary-ink); }

/* ── price ──────────────────────────────────────────────────────────── */

.wkp-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }

.wkp-price {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--wkp-ink);
}

.wkp-price.is-sale { color: var(--wkp-sale); }
.wkp-card--wide .wkp-price { font-size: 30px; }
.wkp-card--pick .wkp-price { font-size: 22px; font-weight: 800; }

.wkp-was { font-size: 14px; color: var(--wkp-faint); text-decoration: line-through; }

.wkp-stock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--wkp-stock);
}

/* Three states, three colours, and only one of them claims stock. */
.wkp-stock--pre { color: var(--wkp-preorder); }
.wkp-stock--out { color: var(--wkp-muted); }
.wkp-stock--eol { color: var(--wkp-faint); }
.wkp-stock--none { display: none; }

.wkp-var-stock--pre { color: var(--wkp-preorder); }
.wkp-var-stock--out,
.wkp-var-stock--eol { color: var(--wkp-faint); }
/* The selected row is a light tint now, not a gradient — white text on it was
   invisible, which is why the chosen variation alone lost its "Pre-order". */

.wkp-row-out { font-weight: 600; color: var(--wkp-faint); }
.wkp-row-pre { font-weight: 600; color: var(--wkp-preorder); }

/* ── stores + buy ───────────────────────────────────────────────────── */

.wkp-stores { display: flex; align-items: center; gap: 6px; }

.wkp-tile {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: var(--wkp-surface-solid);
    object-fit: contain;
    padding: 1px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.wkp-tile--text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wkp-chip-bg);
    color: var(--wkp-muted);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.wkp-stores-note { margin-left: 2px; font-size: 11px; font-weight: 600; color: var(--wkp-muted); }

.wkp-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    border-radius: 16px;
    background: var(--wkp-cta);
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Belt and braces: the label sits on a saturated gradient in both skins, so it
   is white regardless of what the theme, or a reset, has to say about links. */
.wkp .wkp-buy,
.wkp .wkp-buy:link,
.wkp .wkp-buy:visited,
.wkp .wkp-buy:hover,
.wkp .wkp-buy:focus,
.wkp .wkp-buy * { color: #ffffff; }

.wkp-buy:hover { color: #ffffff; box-shadow: 0 6px 20px rgba(6, 182, 212, 0.35); transform: translateY(-1px); }
.wkp-buy:focus-visible { outline: 2px solid var(--wkp-primary); outline-offset: 2px; }
.wkp-card--wide .wkp-buy { min-height: 48px; font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
    .wkp-buy { transition: none; }
    .wkp-buy:hover { transform: none; }
}

/*
 * Titles wrap to different heights, so the price — and everything under it —
 * pins to the bottom of the card. One `auto` margin, on one element: the flex
 * `gap` above handles every other space, and a second auto would fight it.
 */
.wkp-body > .wkp-price-row { margin-top: auto; }

/* ── buy sheet ──────────────────────────────────────────────────────── */

.wkp-sheet {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.wkp-sheet[hidden] { display: none; }

.wkp-sheet-scrim { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); }

.wkp-sheet-panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 86vh;
    overflow-y: auto;
    border-radius: 20px;
    background: var(--wkp-surface-solid);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.wkp-sheet-head { display: flex; align-items: flex-start; gap: 14px; padding: 22px 22px 16px; }

.wkp-sheet-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: var(--wkp-chip-bg);
    padding: 8px;
}

.wkp-sheet-thumb img { max-height: 100%; width: auto; object-fit: contain; }
.wkp-sheet-text { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.wkp-sheet-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--wkp-ink); }
.wkp-sheet-sub { font-size: 13px; color: var(--wkp-muted); }

.wkp-sheet-close {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -6px -6px 0 0;
    border-radius: 10px;
    color: var(--wkp-muted);
}

.wkp-sheet-close:hover { background: var(--wkp-chip-bg); }
.wkp-sheet-body { display: flex; flex-direction: column; gap: 18px; padding: 0 22px 22px; }
.wkp-group { display: flex; flex-direction: column; gap: 6px; }

/* A region heading is the answer to "will this ship to me", so it reads as a
   sentence rather than a category tag — sentence case, and given real weight. */
.wkp-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 0 4px 2px;
    color: var(--wkp-muted);
}

.wkp-group-name { font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--wkp-ink); }

.wkp-group-count {
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--wkp-chip-bg);
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    color: var(--wkp-muted);
}

.wkp-group-rows { overflow: hidden; border-radius: 16px; border: 1px solid var(--wkp-line); }

.wkp a.wkp-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--wkp-line);
    transition: background 0.15s ease;
}

.wkp-row:last-child { border-bottom: 0; }
.wkp-row:hover { background: var(--wkp-chip-bg); }

.wkp-row-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--wkp-surface-solid);
    object-fit: contain;
    padding: 3px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    font-size: 13px;
}

.wkp-row-text { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.wkp-row-name { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--wkp-ink); }
.wkp-row-meta { display: flex; min-width: 0; align-items: center; gap: 8px; font-size: 11px; color: var(--wkp-faint); }
.wkp-row-meta > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkp-row-stock { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: var(--wkp-stock); }
.wkp-row-price { flex: 0 0 auto; text-align: right; }
.wkp-row-now { display: block; font-size: 14px; font-weight: 700; color: var(--wkp-ink); }
.wkp-row-now.is-sale { color: var(--wkp-sale); }
.wkp-row-was { display: block; font-size: 10px; color: var(--wkp-faint); text-decoration: line-through; }
.wkp-row-unpriced { display: block; font-size: 11px; font-weight: 500; color: var(--wkp-muted); }
.wkp-row-arrow { flex: 0 0 auto; color: var(--wkp-faint); }

.wkp-row-icon.wkp-tile--text { background: var(--wkp-chip-bg); color: var(--wkp-muted); }

.wkp-chip {
    border-radius: 4px;
    background: var(--wkp-chip-bg);
    padding: 1px 5px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--wkp-muted);
}

.wkp .wkp-sheet-note { padding: 0 4px; font-size: 11px; line-height: 1.5; color: var(--wkp-faint); }

/* ── offers ─────────────────────────────────────────────────────────── */

.wkp-campaign {
    position: relative;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 28px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--wkp-border);
    background: var(--wkp-surface);
    padding: 28px;
    box-shadow: var(--wkp-shadow);
}

@media (min-width: 860px) {
    .wkp-campaign { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.wkp-campaign-main { display: flex; flex-direction: column; gap: 12px; }

.wkp-live {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    background: var(--wkp-sale-badge);
    padding: 4px 11px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
}

.wkp-live-dot { width: 6px; height: 6px; border-radius: 999px; background: #ffffff; animation: wkp-pulse 1.8s ease-in-out infinite; }

@keyframes wkp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

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

.wkp .wkp-campaign-name { font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: var(--wkp-ink); }
.wkp .wkp-campaign-desc { max-width: 46ch; font-size: 15px; line-height: 1.6; color: var(--wkp-muted); }
.wkp-campaign-figure { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.wkp-campaign-pc { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--wkp-sale); }
.wkp-campaign-sub { font-size: 13px; font-weight: 600; color: var(--wkp-muted); }

.wkp-campaign-side { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 12px; align-content: start; }

@media (min-width: 560px) {
    .wkp-campaign-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wkp-tilebox--wide { grid-column: span 2; }
}

.wkp-tilebox { border-radius: 16px; border: 1px solid var(--wkp-border); background: var(--wkp-surface-solid); padding: 16px; }
.wkp .wkp-tilebox-label { margin-bottom: 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wkp-faint); }
.wkp-tilebox-value { font-size: 14px; font-weight: 600; color: var(--wkp-ink); }

.wkp-countdown { display: flex; flex-wrap: wrap; gap: 6px; }

.wkp-unit {
    display: flex;
    flex: 1 1 40px;
    min-width: 40px;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border-radius: 10px;
    background: var(--wkp-chip-bg);
    padding: 7px 4px;
}

.wkp-unit-value { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--wkp-ink); }
.wkp-unit-label { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wkp-faint); }

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

.wkp-storechip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    background: var(--wkp-chip-bg);
    padding: 4px 12px 4px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--wkp-ink);
}

.wkp-storechip img { width: 22px; height: 22px; border-radius: 6px; background: #ffffff; object-fit: contain; padding: 2px; }
.wkp-storechip .wkp-tile--text { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; }

.wkp .wkp-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    border-radius: 16px;
    border: 1px solid var(--wkp-border);
    background: var(--wkp-surface);
    padding: 15px 20px;
    box-shadow: var(--wkp-shadow);
}

.wkp-strip-text { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.wkp-strip-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--wkp-ink); }
.wkp-strip-meta { font-size: 12px; color: var(--wkp-muted); }
.wkp-strip-cta { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--wkp-primary-ink); }

/* ── credit + notice ────────────────────────────────────────────────── */

.wkp-credit {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--wkp-line);
}

.wkp-credit a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 2px;
    font-size: 11px;
    color: var(--wkp-faint);
}
.wkp-credit img { width: 16px; height: 16px; }
.wkp-credit-name { font-weight: 600; }

.wkp-notice {
    margin: 1.5em 0;
    border-radius: 12px;
    border: 1px solid var(--wkp-notice-line);
    border-inline-start: 4px solid var(--wkp-notice-rule);
    background: var(--wkp-notice-bg);
    padding: 14px 18px;
    color: var(--wkp-notice-ink);
    font-size: 14px;
    line-height: 1.55;
}

/* ── grid card option strip ───────────────────────────────────────────
 *
 * One fixed-height control, whatever the family is. That is the whole
 * design: the picker's own height varied with the number of memory tiers,
 * which made every card in a row as tall as the busiest card in it and left
 * a dead rectangle in the others. Nothing here can vary in height, so
 * nothing can.
 *
 * Named `optstrip`, not `strip`: `.wkp-strip` is the OFFERS campaign strip
 * (see offers_html). Two components under one class fought in both
 * directions — this control inherited the campaign strip's padding, radius
 * and shadow, and the campaign strip inherited this one's 40px height.
 */
.wkp-optstrip {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 40px;
    padding: 0 10px;
    margin: 0 0 12px;
    border: 1px solid var(--wkp-border);
    border-radius: 12px;
    background: var(--wkp-surface-solid);
    font: inherit;
    text-align: start;   /* logical: `left` overrode an RTL document */
    cursor: pointer;
    overflow: hidden;
}
.wkp-optstrip:hover { border-color: var(--wkp-primary); background: var(--wkp-primary-tint); }
/* Its own ring, not just the hover treatment. This is a full-width control
   that opens the modal, and a 1px border tint in a 2.3:1 colour is not a
   visible focus indicator (WCAG 2.4.11 / 1.4.11) — every other control here
   already gets this outline. */
.wkp-optstrip:focus-visible {
    border-color: var(--wkp-primary);
    background: var(--wkp-primary-tint);
    outline: 2px solid var(--wkp-primary);
    outline-offset: 2px;
}

/* Everything on the left may shrink and clip; the count on the right may not. */
.wkp-optstrip-preview {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    flex: 1 1 auto;
    /* Whatever does not fit fades out instead of being cut through the middle,
     * so a clipped chip reads as "there is more" and not as a broken box. */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent 100%);
}

.wkp-optstrip-sw { display: flex; align-items: center; flex: none; }
.wkp-optstrip-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--wkp-surface-solid);
    /* --wkp-line rings at 1.23:1, so a white colourway was a hole. */
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25);
    margin-inline-end: -5px;
    flex: none;
}
.wkp-optstrip-dot:last-child { margin-inline-end: 0; }
.wkp--dark .wkp-optstrip-dot { box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.35); }

.wkp-optstrip-chip {
    flex: none;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--wkp-faint);
    background: var(--wkp-chip-bg);
    border-radius: 5px;
    padding: 3px 5px;
    white-space: nowrap;
}

.wkp-optstrip-more { font-size: 11px; font-weight: 700; color: var(--wkp-muted); flex: none; }

.wkp-optstrip-cta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--wkp-primary-ink);
    white-space: nowrap;
    flex: none;
}
.wkp-optstrip-chev { font-size: 14px; line-height: 1; }

/* A grid card's title takes two lines whether it needs them or not, so the
 * strip below it starts at the same y on every card in the row. */
.wkp-card--grid .wkp-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

@media (max-width: 560px) {
    .wkp-optstrip { height: 44px; }
    .wkp-optstrip-dot { width: 17px; height: 17px; }
}

/* ── sticky buy bar ───────────────────────────────────────────────────
 *
 * Fixed rather than sticky on purpose. `position: sticky` inside post
 * content dies the moment any ancestor sets `overflow: hidden` or a
 * transform, which is most themes — and a buy bar that silently does not
 * appear is worse than one that ignores the reading column.
 */
.wkp--bar {
    /* The wrapper is the bar's spacer and nothing else: no margin, no
     * padding, height driven from JS while the bar is up. */
    margin: 0;
    padding: 0;
}

.wkp-bar-anchor { display: block; height: 0; overflow: hidden; }

.wkp-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Themes routinely put sticky headers and cookie bars at 99999. This has
     * to sit above the page it is selling from, and below a modal — the buy
     * sheet is 100000 in this stylesheet. */
    z-index: 999;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--wkp-surface-solid);
    border-top: 1px solid var(--wkp-border);
    box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.10);
    /* Slides up rather than appearing; translate + opacity only, so it never
     * costs a layout on scroll. */
    transform: translateY(100%);
    opacity: 0;
    transition: transform 220ms ease, opacity 220ms ease;
}

/* Deliberately NOT backdrop-filtered. This bar is fixed, full width, and
 * visible only while the reader is scrolling — which is exactly when a
 * filter that re-samples everything behind it costs the most. The opaque
 * surface plus the border and shadow already read as a bar. */

.wkp-bar.is-open { transform: translateY(0); opacity: 1; }

/* Hidden by the block's own settings, per device. */
@media (max-width: 700px) { .wkp-bar--desktop { display: none; } }
@media (min-width: 701px) { .wkp-bar--mobile { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .wkp-bar { transition: none; }
}

.wkp-bar-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
}

.wkp-bar-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--wkp-media-bg);
    border: 1px solid var(--wkp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: none;
}
.wkp-bar-thumb img { width: 100%; height: 100%; object-fit: contain; }

.wkp-bar-text { min-width: 0; }
.wkp .wkp-bar-name {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--wkp-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wkp .wkp-bar-meta {
    margin: 2px 0 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 7px;
    line-height: 1.3;
}
.wkp-bar-from { font-size: 11px; font-weight: 600; color: var(--wkp-muted); }
.wkp-bar-amt { font-size: 16px; font-weight: 800; color: var(--wkp-ink); letter-spacing: -0.01em; }
.wkp-bar-amt.is-sale { color: var(--wkp-sale); }
.wkp-bar-was { font-size: 12px; color: var(--wkp-muted); text-decoration: line-through; }
.wkp-bar-opts { font-size: 11.5px; color: var(--wkp-muted); }
.wkp-bar .wkp-stock { font-size: 11px; }

.wkp-bar-badge {
    align-self: center;
    background: var(--wkp-sale-badge);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 4px 7px;
    border-radius: 6px;
    white-space: nowrap;
}

.wkp-bar .wkp-buy {
    margin: 0;
    min-height: 44px;
    padding: 0 18px;
    white-space: nowrap;
    flex: none;
}

.wkp-bar-x {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--wkp-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: none;
}
.wkp-bar-x:hover { background: var(--wkp-chip-bg); color: var(--wkp-ink); }

/* Phone: the picture and the dismiss cross go, the CTA shortens, and the
 * price moves onto the name's second line — the layout in the mobile board. */
@media (max-width: 560px) {
    .wkp-bar { padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px)); }
    .wkp-bar-inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
    .wkp-bar-thumb { width: 40px; height: 40px; }
    .wkp-bar-badge { display: none; }
    .wkp-bar-x { display: none; }
    .wkp-bar-opts { display: none; }
    .wkp-bar .wkp-buy { padding: 0 15px; min-width: 92px; }
}

/* Small phones: the button gives width back so "From £393.51" stays on one
 * line. A price that wraps away from its own "From" reads as the price. */
@media (max-width: 420px) {
    .wkp-bar-inner { gap: 8px; }
    .wkp-bar .wkp-buy { padding: 0 11px; min-width: 0; font-size: 13px; }
    .wkp .wkp-bar-meta { gap: 2px 5px; }
    .wkp .wkp-bar-name { font-size: 13px; }
    .wkp-bar-amt { font-size: 14px; }
}

/* The bar covers the last inch of the page; give it back while it is up.
 *
 * On the block's OWN wrapper, not on <body>. Touching body padding either
 * overrode a theme that was relying on its own (ours at (0,1,1) beat a
 * theme's (0,0,1), silently removing whatever it had reserved) or lost to an
 * inline style and reserved nothing at all. A spacer on our own element is
 * additive and cannot be argued with. */
.wkp--bar { height: var(--wkp-bar-height, 0px); transition: height 220ms ease; }

@media (prefers-reduced-motion: reduce) {
    .wkp--bar { transition: none; }
}

/* ── serving stale ────────────────────────────────────────────────────
 *
 * Shown when Weekly could not be reached and the block fell back to the last
 * payload it held. Readers see this, not just editors: the block is quoting
 * money, and money that could not be re-checked has to say so.
 */
.wkp .wkp-stale {
    margin: 12px 0 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--wkp-pre-wash);
    color: var(--wkp-pre-ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.wkp-bar-stale {
    font-size: 11px;
    font-weight: 700;
    color: var(--wkp-pre-ink);
    background: var(--wkp-pre-wash);
    border-radius: 5px;
    padding: 2px 6px;
    white-space: nowrap;
}


/* ── print ─────────────────────────────────────────────────────────────
   The sticky bar and the sheet are position:fixed, so without this they
   print across the first page of any article that carries one. */
@media print {
    .wkp-bar,
    .wkp-bar-anchor,
    .wkp-sheet { display: none !important; }
    .wkp-card { break-inside: avoid; box-shadow: none; }
}

/* ── auto skin ─────────────────────────────────────────────────────────
   Benchmarks has offered "follow the reader's theme" since it shipped;
   products and widgets did not, so a post carrying a benchmark table and a
   product card rendered one dark and one light for a dark-mode reader.
   Redefines the same tokens as .wkp--dark and nothing else. */
@media (prefers-color-scheme: dark) {
    .wkp--auto {
        --wkp-star-track: #475569;
        --wkp-notice-bg: rgba(120, 53, 15, 0.18);
        --wkp-notice-ink: #fcd34d;
        --wkp-notice-line: rgba(251, 191, 36, 0.35);
        --wkp-notice-rule: #f59e0b;
        --wkp-primary: #22d3ee;
        --wkp-primary-tint: rgba(34, 211, 238, 0.14);
        --wkp-cta: linear-gradient(135deg, #0f766e 0%, #0369a1 50%, #1d4ed8 100%);
        --wkp-primary-ink: #67e8f9;
        --wkp-sale: #fb7185;
        --wkp-sale-badge: #dc2626;
        --wkp-stock: #34d399;
        --wkp-preorder: #fbbf24;
        --wkp-pre-ink: #fcd34d;
        --wkp-pre-wash: rgba(251, 191, 36, 0.16);
        --wkp-in-ink: #6ee7b7;
        --wkp-in-wash: rgba(52, 211, 153, 0.16);
        --wkp-star: #fbbf24;
        --wkp-ink: #f1f5f9;
        --wkp-muted: #a4b3c8;
        --wkp-faint: #8fa0b6;
        --wkp-line: #253044;
        --wkp-ground: #131c2e;
        --wkp-surface: rgba(30, 41, 59, 0.85);
        --wkp-surface-solid: #1e293b;
        --wkp-border: rgba(51, 65, 85, 0.6);
        --wkp-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }
}