.mspm-bar {
    --mspm-bg: #fff;
    --mspm-ground: #f2f2f2;
    --mspm-ground-2: #ebebeb;
    --mspm-ink: #141414;
    --mspm-muted: #707070;
    --mspm-line: #e3e3e3;
    --mspm-tile: #f0e1cd;
    --mspm-tile-hover: #e8d3b8;
    --mspm-tile-active: #e1b98c;
    --mspm-full: #aaf0e1;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* above theme sticky header (895) and tombola bar (900), below sidecart + mobile menu (950) */
    z-index: 940;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 32px calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--mspm-bg);
    border-top: 1px solid var(--mspm-line);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .14);
    color: var(--mspm-ink);
    font-family: inherit;
    box-sizing: border-box;
}
.mspm-bar[hidden] { display: none; }
.mspm-bar * { box-sizing: border-box; }
body.mspm-has-bar { padding-bottom: var(--mspm-bar-h, 190px); }

.mspm-bar .mspm-bartitle {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
}

/* Toast for "can't pick a box smaller than what you've already selected" — stays
   clickable (not native `disabled`) so the click still reaches pickSize() to show
   this, dimming is purely visual. */
.mspm-notice {
    margin: 0 0 4px;
    padding: 6px 10px;
    background: #fff4d6;
    color: var(--mspm-ink);
    font-size: 12px;
    line-height: 1.4;
}
.mspm-notice[hidden] { display: none; }
.mspm-bar .mspm-size[aria-disabled="true"] { opacity: .4; }

.mspm-sizes {
    display: grid;
    /* Set from PHP (--mspm-tile-count = the actual number of price tiers), so a
       step added or removed in wp-admin always fills the row edge-to-edge
       instead of leaving a gap or shrinking below 6 hardcoded slots. */
    grid-template-columns: repeat(var(--mspm-tile-count, 6), minmax(0, 1fr));
    gap: 12px;
}
.mspm-bar .mspm-size,
.mspm-bar .mspm-size:hover,
.mspm-bar .mspm-size:focus {
    position: relative;
    background: var(--mspm-tile);
    padding: 9px 2px 8px;
    min-width: 0;
    height: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    line-height: 1.2;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background .15s;
}
.mspm-bar .mspm-size:hover { background: var(--mspm-tile-hover); }
.mspm-bar .mspm-size[aria-pressed="true"] { background: var(--mspm-tile-active); }
.mspm-bar .mspm-size:focus-visible, .mspm-bar .mspm-cta:focus-visible { outline: 2px solid var(--mspm-ink); outline-offset: 2px; }
.mspm-n { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.mspm-p { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; color: rgba(20, 20, 20, .7); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mspm-bar .mspm-size[aria-pressed="true"] .mspm-p { color: var(--mspm-ink); }
.mspm-tag {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--mspm-ink);
    color: var(--mspm-bg);
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 8.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 2px 6px;
    white-space: nowrap;
    z-index: 1;
}

.mspm-progrow { display: flex; align-items: center; gap: 14px; }
.mspm-big { font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mspm-prog { height: 22px; background: #e4e4e4; display: flex; gap: 2px; flex: 1 1 auto; }
.mspm-prog i { flex: 1; display: block; height: 100%; transition: background .2s; }

.mspm-bar .mspm-cta {
    background: var(--mspm-ink);
    color: var(--mspm-bg);
    padding: 14px 22px;
    border: 0;
    border-radius: 0;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 12px;
    min-width: 200px;
    text-align: center;
    white-space: nowrap;
    flex: 0 0 auto;
    transition: background .15s;
    cursor: pointer;
}
.mspm-bar .mspm-cta[disabled] { opacity: .35; cursor: not-allowed; }
.mspm-bar .mspm-cta.mspm-full { background: var(--mspm-full); color: var(--mspm-ink); }

@media (max-width: 760px) {
    body.mspm-has-bar { padding-bottom: var(--mspm-bar-h, 240px); }
    .mspm-bar { padding: 12px 12px calc(22px + env(safe-area-inset-bottom, 0px)); }
    .mspm-bar .mspm-bartitle { font-size: 12px; }
    /* 6 tiles wrap to 2 rows of 3 here. The tag's desktop position (absolute,
       top:-8px, overflowing above its own tile) then sticks up into the gap
       above it — which is directly under the tile in the ROW ABOVE, not its
       own. Customer feedback (2026-09-17, via Jonas): easy to misread a tag
       on e.g. "24" as belonging to "1" sitting right above it.
       Two earlier attempts here (out-of-flow inset, then in-flow static) both
       changed the tag's own positioning — which is the wrong lever: this is a
       GRID, so any tile that grows taller stretches the whole row to match,
       making all six buttons visibly different sizes ("ser ju helmongo ut",
       Jonas, same day). The tag stays exactly as on desktop; only the GAP
       BETWEEN ROWS grows, giving the overflowing tag room to sit in without
       touching the row above. Column gap (between tiles in the same row)
       stays as it was — only rows needed more air. */
    .mspm-sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
    .mspm-bar .mspm-size { padding: 8px 2px 7px; }
    .mspm-n { font-size: 13px; }
    .mspm-p { font-size: 9px; }
    .mspm-prog { gap: 1px; height: 20px; }
    .mspm-progrow { gap: 10px; }
    .mspm-bar .mspm-cta { min-width: 0; padding: 12px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .mspm-bar * { transition: none; }
}

/* ---------- Product card enhancement (Pick & Mix grid only) ---------- */
.mspm-pm-enhanced form.cart, .mspm-pm-hide-form { display: none !important; }
.mspm-pm-qty {
    position: absolute;
    bottom: 8px;
    right: 8px;
    min-width: 28px;
    height: 28px;
    border-radius: 14px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 13px;
    font-weight: 500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    font-variant-numeric: tabular-nums;
    z-index: 2;
}
.mspm-pm-picked .mspm-pm-qty { display: flex; }
/* .inner-wrapper is a flex column with align-items:center, so a plain block
   child shrinks to its content width instead of filling the card — width:100%
   (+ align-self as a second guard for other flex parents) forces it full-width. */
.mspm-pm-ctrl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    width: 100%;
    align-self: stretch;
    margin-top: 8px;
}
.mspm-pm-ctrl button,
.mspm-pm-quick button {
    font: inherit;
    color: inherit;
    background: var(--mspm-ground-2, #ebebeb);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    /* Without this, two quick taps on the same +/-/quick-add button (exactly what
       a customer adding several packs in a row does) reads as Safari's double-tap-
       to-zoom gesture on iOS instead of two clicks. */
    touch-action: manipulation;
}
/* The theme/Elementor has its own generic `button:focus{ background-color:#c36;
   color:#c36 }` (pink) — found via Jonas's own devtools inspection, 2026-09-11.
   :focus-visible alone (added earlier) only handled the outline, so the pink still
   showed on a clicked button. Reset background/color on plain :focus too so ours
   always wins regardless of which pseudo-class the theme rule happens to match,
   and only show our own outline for the (keyboard) :focus-visible case. */
.mspm-pm-ctrl button:focus,
.mspm-pm-quick button:focus {
    background: var(--mspm-ground-2, #ebebeb);
    color: inherit;
    outline: none;
}
.mspm-pm-ctrl button:focus-visible,
.mspm-pm-quick button:focus-visible {
    outline: 2px solid #141414;
    outline-offset: -2px;
}
.mspm-pm-ctrl button {
    height: 36px;
    font-weight: 600;
    font-size: 16px;
}
.mspm-pm-ctrl button:hover:not(:disabled) { background: #141414; color: #fff; }
/* :disabled must also pin background/color, not just opacity — otherwise the theme's
   un-guarded `button:hover{background-color:#c36}` (same pink as the :focus fix above)
   wins on a disabled button, since :hover:not(:disabled) above intentionally excludes
   it and leaves nothing of ours to outrank it. :disabled outranks :hover in specificity
   here, so this wins in every state (rest/hover/focus) once it sets the property itself. */
.mspm-pm-ctrl button:disabled {
    opacity: .35;
    cursor: not-allowed;
    background: var(--mspm-ground-2, #ebebeb);
    color: inherit;
}
.mspm-pm-quick button:disabled {
    opacity: .35;
    cursor: not-allowed;
    background: #f2f2f2;
    color: #707070;
}
.mspm-pm-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 100%;
    align-self: stretch;
    margin-top: 4px;
}
.mspm-pm-quick button {
    height: 28px;
    background: #f2f2f2;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 12px;
    color: #707070;
}
.mspm-pm-quick button:hover:not(:disabled) { background: #141414; color: #fff; }