/**
 * Pure Mo-JA Bundles — Public Stylesheet (v3 "Native")
 * ------------------------------------------------------------------
 * Re-skinned to match the Pure Mo-JA child theme exactly.
 *   Display : Fraunces (variable, SOFT axis) — the theme's headline face.
 *   UI/body : Inter Tight — the theme's body face.
 *   Palette : theme paper / ink / fruit accents.
 * The plugin consumes the theme's --pmoja-accent variables when present
 * (set per-product by the theme's flavour body class), so deal badges,
 * active tabs and CTAs automatically take the right fruit colour. When the
 * plugin renders standalone (no theme vars), it falls back to mango.
 *
 * All historic .pmb-* class names are preserved.
 * ================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..700,0..100;1,9..144,300..700,0..100&family=Inter+Tight:wght@300;400;500;600;700&display=swap');

/* ================================================================== */
/* 1. Tokens — mirror the theme, with plugin fallbacks                */
/* ================================================================== */
.pmb-bundle-page {
    /* Surfaces */
    --pmb-paper:      var(--pmoja-paper, #FFFBF1);
    --pmb-paper-deep: var(--pmoja-paper-deep, #F5E9CC);
    --pmb-card:       #FFFFFF;
    --pmb-ink:        var(--pmoja-ink, #1F1A12);
    --pmb-ink-soft:   var(--pmoja-ink-soft, #5C4F3D);
    --pmb-ink-mute:   var(--pmoja-ink-mute, #9C8A6E);
    --pmb-line:       var(--pmoja-line, rgba(31,26,18,.14));
    --pmb-line-soft:  var(--pmoja-line-soft, rgba(31,26,18,.07));

    /* ---------------------------------------------------------------
     * Accent strategy
     * The interactive accent uses the RICH DEEP fruit tone (not the
     * bright base), which reads as premium and keeps yellow/gold out of
     * the UI. Templates set --pmb-accent-deep / --pmb-accent-tint via a
     * per-product body/page class; here we default to the guava rose,
     * the most brand-appropriate non-yellow tone, so multi-flavour cases
     * never fall back to mango-gold.
     * --------------------------------------------------------------- */
    --pmb-accent:      var(--pmoja-accent-deep, #A52E5E);   /* primary = deep tone   */
    --pmb-accent-deep: var(--pmoja-accent-deep, #7E2247);   /* darker for text/hover */
    --pmb-accent-tint: var(--pmoja-accent-tint, #FBD9E4);   /* soft fill             */
    --pmb-accent-ink:  #FFFFFF;                              /* text on accent fills  */

    /* Semantic */
    --pmb-leaf:    #2F8F4E;
    --pmb-leaf-dk: #1E6E3A;
    --pmb-good:    #2F8F4E;

    /* Type */
    --pmb-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --pmb-sans:    'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Radii & motion (theme parity) */
    --pmb-r-sm: 12px;
    --pmb-r:    16px;
    --pmb-r-lg: 22px;
    --pmb-r-xl: 28px;
    --pmb-pill: 100px;
    --pmb-ease:      cubic-bezier(.2,.7,.2,1);
    --pmb-ease-soft: cubic-bezier(.4,0,.2,1);

    --pmb-shadow-sm: 0 1px 2px rgba(31,26,18,.05), 0 6px 18px -12px rgba(31,26,18,.18);
    --pmb-shadow:    0 18px 50px -28px rgba(31,26,18,.30);
    --pmb-shadow-lg: 0 30px 70px -30px rgba(31,26,18,.35);

    --pmb-max: 1180px;

    font-family: var(--pmb-sans);
    color: var(--pmb-ink);
    background: var(--pmb-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.55;
    font-size: 16px;
    letter-spacing: -.005em;
}

/* Per-product accent worlds — set on the .pmb-bundle-page element by the
 * template's data-flavour / bundle-type. Each maps to the theme's DEEP +
 * TINT tokens (no bright/gold bases). */
.pmb-bundle-page.pmb-accent-mango      { --pmb-accent:#B0530B; --pmb-accent-deep:#8A3F08; --pmb-accent-tint:#FDE9CC; }
.pmb-bundle-page.pmb-accent-guava      { --pmb-accent:#A52E5E; --pmb-accent-deep:#7E2247; --pmb-accent-tint:#FBD9E4; }
.pmb-bundle-page.pmb-accent-lychee     { --pmb-accent:#8A4C62; --pmb-accent-deep:#6B3A4C; --pmb-accent-tint:#F5E6EC; }
.pmb-bundle-page.pmb-accent-passion    { --pmb-accent:#5C3A8C; --pmb-accent-deep:#2E1A52; --pmb-accent-tint:#E0D4F0; }
.pmb-bundle-page.pmb-accent-watermelon { --pmb-accent:#8A1E2E; --pmb-accent-deep:#661620; --pmb-accent-tint:#F8D6DC; }

.pmb-bundle-page {
    max-width: 100%;
    margin: 0;
    padding: clamp(20px, 4vw, 48px) clamp(16px, 5vw, 56px) 80px;
    position: relative;
}

/* Soft accent-tint wash behind the page — no gold. */
.pmb-bundle-page::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 520px;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(660px 380px at 84% -10%, color-mix(in srgb, var(--pmb-accent) 16%, transparent), transparent 70%),
        radial-gradient(560px 340px at 6% 2%,   color-mix(in srgb, var(--pmb-accent-tint) 70%, transparent), transparent 74%);
    opacity: .85;
}
.pmb-bundle-page > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .pmb-bundle-page *,
    .pmb-bundle-page *::before,
    .pmb-bundle-page *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ================================================================== */
/* 2. Header                                                          */
/* ================================================================== */
.pmb-header {
    max-width: var(--pmb-max);
    margin: 0 auto clamp(28px, 4vw, 44px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pmb-breadcrumb {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 500;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--pmb-ink-mute);
    margin-bottom: 18px;
}
.pmb-breadcrumb a { color: var(--pmb-ink-mute); text-decoration: none; transition: color .3s var(--pmb-ease); }
.pmb-breadcrumb a:hover { color: var(--pmb-accent-deep); }
.pmb-breadcrumb .pmb-sep { opacity: .5; }

.pmb-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 500;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--pmb-ink-soft);
    margin-bottom: 18px;
}
.pmb-eyebrow::before {
    content: "";
    width: 22px; height: 1px;
    background: var(--pmb-accent);
}

.pmb-title {
    font-family: var(--pmb-display);
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 100, "opsz" 144;
    font-weight: 400;
    font-size: clamp(2.6rem, 6.4vw, 5rem);
    line-height: .92;
    letter-spacing: -.03em;
    margin: 0 0 16px;
    color: var(--pmb-ink);
    text-wrap: balance;
}
.pmb-title .pmb-title-accent { font-style: italic; color: var(--pmb-accent); }

.pmb-subtitle {
    max-width: 560px; margin: 0 auto;
    color: var(--pmb-ink-soft);
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.5;
}

/* Featured product image beneath the title (rendered only when set) */
.pmb-featured-image {
    margin: clamp(20px, 3vw, 32px) auto clamp(4px, 1vw, 10px);
    max-width: 320px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.pmb-featured-image .pmb-featured-img,
.pmb-featured-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 340px;
    object-fit: contain;
    border-radius: var(--pmb-r-lg);
}
@media (max-width: 760px) {
    .pmb-featured-image { max-width: 240px; }
}

.pmb-trust-banner {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 22px; padding: 10px 20px;
    border-radius: var(--pmb-pill);
    border: 1px solid var(--pmb-line);
    background: rgba(255,255,255,.55);
    color: var(--pmb-ink-soft);
    font-weight: 500; font-size: 13.5px;
    backdrop-filter: blur(8px);
}
.pmb-trust-banner svg { color: var(--pmb-accent-deep); }

/* ================================================================== */
/* 3. Case quantity tabs + deal badges                               */
/* ================================================================== */
.pmb-case-tabs,
.pmb-cans-tabs {
    max-width: var(--pmb-max);
    margin: clamp(28px, 4vw, 40px) auto 0;
    padding-top: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
    gap: 12px;
}

.pmb-case-tab,
.pmb-cans-tab {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    gap: 1px;
    padding: 18px 14px 15px;
    border: 1.5px solid var(--pmb-line);
    border-radius: var(--pmb-r-lg);
    background: var(--pmb-card);
    cursor: pointer;
    overflow: visible;
    font-family: var(--pmb-sans);
    color: var(--pmb-ink);
    transition: transform .35s var(--pmb-ease), border-color .35s var(--pmb-ease), box-shadow .35s var(--pmb-ease), background .35s var(--pmb-ease);
}
.pmb-case-tab:hover,
.pmb-cans-tab:hover {
    transform: translateY(-3px);
    border-color: var(--pmb-accent);
    box-shadow: var(--pmb-shadow);
}
.pmb-case-tab:focus-visible,
.pmb-cans-tab:focus-visible { outline: 2px solid var(--pmb-accent); outline-offset: 3px; }

/* Selected — a clean, confident accent-tint card with an accent ring.
 * No gradient, no heavy black slab. Text stays fully legible. */
.pmb-case-tab.active,
.pmb-cans-tab.active {
    border-color: var(--pmb-accent);
    background: var(--pmb-accent-tint);
    background-image: none;                 /* hard-kill any inherited gradient */
    box-shadow: 0 0 0 1.5px var(--pmb-accent), var(--pmb-shadow);
    color: var(--pmb-ink);
}
.pmb-case-tab.active .pmb-tab-main,
.pmb-cans-tab.active .pmb-tab-main { color: var(--pmb-ink); }
.pmb-case-tab.active .pmb-tab-cans,
.pmb-cans-tab.active .pmb-tab-cans { color: var(--pmb-accent-deep); }
.pmb-case-tab.active .pmb-tab-percase,
.pmb-cans-tab.active .pmb-tab-percase { color: var(--pmb-accent-deep); }
.pmb-case-tab.active .pmb-tab-save,
.pmb-cans-tab.active .pmb-tab-save { color: var(--pmb-good); }

/* Label hierarchy: line 1 (count) = ink + medium; price = accent + bold;
 * saving = green. Clear three tiers. */
.pmb-tab-main {
    font-family: var(--pmb-display);
    font-weight: 500; font-size: 19px; letter-spacing: -.02em;
    color: var(--pmb-ink); line-height: 1.1;
}
.pmb-tab-cans {
    font-size: 12px; font-weight: 500;
    color: var(--pmb-ink-mute); margin-bottom: 2px;
}
.pmb-tab-percase {
    margin-top: 6px; font-size: 15px; font-weight: 700;
    color: var(--pmb-accent-deep);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.pmb-tab-discount { display: none; }
.pmb-tab-save {
    margin-top: 2px; font-size: 12px; font-weight: 600;
    color: var(--pmb-good);
    font-variant-numeric: tabular-nums;
}

/* Deal badge — a small Fraunces-italic tag, not a cartoon bubble */
.pmb-deal-bubble {
    position: absolute;
    top: -11px; left: 50%;
    transform: translateX(-50%);
    display: inline-flex; align-items: center;
    padding: 4px 12px;
    border-radius: var(--pmb-pill);
    background: var(--pmb-accent);
    color: var(--pmb-accent-ink);
    font-family: var(--pmb-display);
    font-style: italic;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.01em;
    white-space: nowrap;
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--pmb-accent-deep) 80%, transparent);
    z-index: 3;
}

/* ================================================================== */
/* 4. Step guides                                                     */
/* ================================================================== */
.pmb-step-guides {
    max-width: var(--pmb-max);
    margin: clamp(28px, 4vw, 40px) auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    border: 1px solid var(--pmb-line);
    border-radius: var(--pmb-pill);
    padding: 8px;
    background: rgba(255,255,255,.5);
    backdrop-filter: blur(8px);
}
.pmb-step-guide {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 18px;
    border-radius: var(--pmb-pill);
    transition: background .4s var(--pmb-ease);
}
.pmb-step-guide.active   { background: var(--pmb-accent-tint); }
.pmb-step-guide.completed { background: transparent; }
.pmb-step-number {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid var(--pmb-line);
    background: var(--pmb-card);
    color: var(--pmb-ink-soft);
    font-family: var(--pmb-display);
    font-size: 15px; font-weight: 500;
    transition: all .4s var(--pmb-ease);
}
.pmb-step-guide.active .pmb-step-number {
    background: var(--pmb-accent); border-color: var(--pmb-accent); color: var(--pmb-accent-ink);
}
.pmb-step-guide.completed .pmb-step-number {
    background: var(--pmb-ink); border-color: var(--pmb-ink); color: var(--pmb-paper);
    font-size: 0;
}
.pmb-step-guide.completed .pmb-step-number::after { content: "✓"; font-size: 15px; }
.pmb-step-info { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.pmb-step-label { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--pmb-ink-mute); }
.pmb-step-text { font-size: 14px; font-weight: 500; color: var(--pmb-ink); }

/* ================================================================== */
/* 5. Two-column layout                                               */
/* ================================================================== */
.pmb-main {
    max-width: var(--pmb-max);
    margin: clamp(28px, 4vw, 44px) auto 0;
    display: grid;
    grid-template-columns: 1fr 372px;
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
}
@media (max-width: 980px) { .pmb-main { grid-template-columns: 1fr; } }

.pmb-flavors-section { min-width: 0; }

/* Step section header — the "1 Select Number of Cases" line.
 * Generous, consistent vertical rhythm so steps read as distinct blocks. */
.pmb-step-section {
    display: flex; align-items: baseline; gap: 13px;
    margin: 0 0 20px;
}
/* When a step section follows tabs / a grid / builder row, add a clear gap
 * above it so the steps never collide. */
.pmb-cans-tabs + .pmb-step-section,
.pmb-case-tabs + .pmb-step-section,
.pmb-case-builder-tabs + .pmb-step-section,
.pmb-flavor-grid + .pmb-step-section,
.pmb-dual-flavor-grid + .pmb-step-section,
.pmb-mix-flavor-grid + .pmb-step-section {
    margin-top: clamp(36px, 5vw, 56px);
}
.pmb-step-section .pmb-step-number {
    flex: 0 0 auto;
    width: auto; height: auto; min-width: 0;
    border: 0; background: transparent; box-shadow: none;
    color: var(--pmb-accent);
    font-family: var(--pmb-display);
    font-style: italic; font-weight: 500;
    font-size: clamp(1.2rem, 2.2vw, 1.7rem);
    line-height: 1;
}
.pmb-step-title {
    font-family: var(--pmb-display);
    font-weight: 400; font-size: clamp(1.35rem, 2.6vw, 2rem);
    letter-spacing: -.02em; margin: 0; line-height: 1.05;
    color: var(--pmb-ink);
}
.pmb-case-indicator { font-style: italic; color: var(--pmb-accent); }

/* Space the case-quantity tabs when they sit inside the builder column
 * (dual / mix) beneath a step header — tighter on top, room below. */
.pmb-flavors-section > .pmb-cans-tabs,
.pmb-flavors-section > .pmb-case-tabs {
    margin: 0;
    padding-top: 6px;
}

/* ---- Flavour cards ---------------------------------------------- */
.pmb-flavor-grid,
.pmb-mix-flavor-grid,
.pmb-dual-flavor-grid,
.pmb-variety-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 14px;
}

.pmb-flavor-card,
.pmb-mix-flavor-card,
.pmb-dual-flavor-card,
.pmb-variety-card {
    position: relative;
    background: var(--pmb-card);
    border: 1px solid var(--pmb-line);
    border-radius: var(--pmb-r-lg);
    padding: 14px 14px 18px;
    box-shadow: var(--pmb-shadow-sm);
    transition: transform .4s var(--pmb-ease), border-color .4s var(--pmb-ease), box-shadow .4s var(--pmb-ease);
    overflow: hidden;
}
.pmb-flavor-card:hover,
.pmb-mix-flavor-card:hover,
.pmb-dual-flavor-card:hover,
.pmb-variety-card:hover {
    transform: translateY(-4px);
    border-color: var(--pmb-accent);
    box-shadow: var(--pmb-shadow);
}
.pmb-flavor-card.has-quantity,
.pmb-dual-flavor-card.selected,
.pmb-mix-flavor-card.has-quantity {
    border-color: var(--pmb-accent);
    box-shadow: 0 0 0 1px var(--pmb-accent), var(--pmb-shadow);
}

.pmb-flavor-image,
.pmb-mix-flavor-image,
.pmb-dual-flavor-image {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--pmb-r);
    overflow: hidden;
    background: var(--pmb-accent-tint);
    margin-bottom: 14px;
}
.pmb-flavor-image img,
.pmb-mix-flavor-image img,
.pmb-dual-flavor-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s var(--pmb-ease);
}
.pmb-flavor-card:hover .pmb-flavor-image img,
.pmb-mix-flavor-card:hover .pmb-mix-flavor-image img,
.pmb-dual-flavor-card:hover .pmb-dual-flavor-image img { transform: scale(1.05); }
.pmb-flavor-placeholder {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    color: var(--pmb-ink);
    font-family: var(--pmb-display); font-size: 2.4rem; font-weight: 500;
}

.pmb-flavor-details { text-align: center; }
.pmb-flavor-name,
.pmb-mix-flavor-name,
.pmb-dual-flavor-name {
    font-family: var(--pmb-display);
    font-weight: 400; font-size: 1.25rem;
    letter-spacing: -.02em; margin: 0 0 12px;
    line-height: 1.05;
}
.pmb-flavor-tagline { font-size: 12.5px; color: var(--pmb-ink-mute); margin: -8px 0 12px; }

/* Quantity stepper — slim, compact pill. Outlined buttons that fill with
 * the accent on hover (no heavy black blocks). */
.pmb-mix-qty-controls,
.pmb-qty-selector {
    display: inline-flex; align-items: center; gap: 2px;
    margin-top: 4px;
    padding: 3px;
    border-radius: var(--pmb-pill);
    border: 1px solid var(--pmb-line);
    background: var(--pmb-card);
}
.pmb-mix-qty-btn,
.pmb-qty-btn {
    width: 30px; height: 30px;
    flex: 0 0 30px;          /* lock aspect ratio so it can't go oval */
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pmb-ink);
    cursor: pointer;
    line-height: 1;
    transition: background .25s var(--pmb-ease), color .25s var(--pmb-ease), transform .2s var(--pmb-ease), opacity .25s var(--pmb-ease);
}
.pmb-mix-qty-btn:hover,
.pmb-qty-btn:hover { background: var(--pmb-accent); color: var(--pmb-accent-ink); }
.pmb-mix-qty-btn:active,
.pmb-qty-btn:active { transform: scale(.92); }
.pmb-mix-qty-btn:disabled,
.pmb-qty-btn:disabled { opacity: .3; cursor: not-allowed; background: transparent; color: var(--pmb-ink); }
.pmb-mix-qty-btn svg,
.pmb-qty-btn svg { width: 13px; height: 13px; display: block; }

.pmb-mix-qty-input,
.pmb-qty-input,
.pmb-mix-qty-display {
    width: 38px; min-width: 38px;
    text-align: center;
    border: 0; background: transparent;
    color: var(--pmb-ink);
    font-family: var(--pmb-sans);
    font-weight: 600; font-size: 15px;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    line-height: 30px;
}
.pmb-mix-qty-input::-webkit-outer-spin-button,
.pmb-mix-qty-input::-webkit-inner-spin-button,
.pmb-qty-input::-webkit-outer-spin-button,
.pmb-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pmb-flavor-canbadge {
    position: absolute; top: 12px; left: 12px;
    padding: 4px 10px; border-radius: var(--pmb-pill);
    background: rgba(31,26,18,.82); color: var(--pmb-paper);
    font-size: 11px; font-weight: 600;
    backdrop-filter: blur(4px);
}
.pmb-flavor-tick {
    position: absolute; top: 12px; right: 12px;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--pmb-accent); color: var(--pmb-accent-ink);
    transform: scale(0); opacity: 0;
    transition: transform .35s var(--pmb-ease), opacity .25s var(--pmb-ease);
}
.pmb-flavor-card.has-quantity .pmb-flavor-tick,
.pmb-dual-flavor-card.selected .pmb-flavor-tick,
.pmb-mix-flavor-card.has-quantity .pmb-flavor-tick { transform: scale(1); opacity: 1; }

.pmb-no-flavors {
    grid-column: 1 / -1;
    padding: 44px 20px; text-align: center;
    color: var(--pmb-ink-mute);
    border: 1px dashed var(--pmb-line);
    border-radius: var(--pmb-r-lg);
    background: var(--pmb-card);
}

/* ================================================================== */
/* 6. Sidebar — "Build your case"                                    */
/* ================================================================== */
.pmb-sidebar, .pmb-mix-sidebar, .pmb-dual-sidebar, .pmb-variety-summary { min-width: 0; }

.pmb-sidebar-box, .pmb-sidebar-inner {
    position: sticky; top: 96px;
    background: var(--pmb-card);
    border: 1px solid var(--pmb-line);
    border-radius: var(--pmb-r-xl);
    padding: 26px;
    box-shadow: var(--pmb-shadow);
}

.pmb-sidebar-title {
    font-family: var(--pmb-display);
    font-weight: 400; font-size: 1.5rem;
    letter-spacing: -.02em; line-height: 1;
    margin: 0 0 20px;
}

.pmb-case-summary { margin-bottom: 18px; }
.pmb-case-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px;
    border-radius: var(--pmb-r);
    background: var(--pmb-accent-tint);
    border: 1px solid color-mix(in srgb, var(--pmb-accent) 22%, transparent);
}
.pmb-case-label { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pmb-accent-deep); }
.pmb-case-count {
    font-family: var(--pmb-display); font-weight: 400;
    font-size: 2rem; line-height: 1; color: var(--pmb-accent-deep);
    font-variant-numeric: tabular-nums;
}

.pmb-progress { margin: 18px 0; }
.pmb-progress-text {
    display: flex; justify-content: space-between;
    font-size: 12.5px; font-weight: 500; color: var(--pmb-ink-mute);
    margin-bottom: 9px; letter-spacing: .01em;
}
.pmb-progress-text span { color: var(--pmb-ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.pmb-progress-bar, .pmb-progress-bar-wrap {
    height: 8px; border-radius: var(--pmb-pill);
    background: var(--pmb-line-soft); overflow: hidden;
}
.pmb-progress-fill {
    height: 100%; width: 0;
    border-radius: var(--pmb-pill);
    background: var(--pmb-accent);
    transition: width .5s var(--pmb-ease), background .4s var(--pmb-ease);
}
.pmb-progress-fill.complete { background: var(--pmb-leaf); }

.pmb-selected-list { margin: 16px 0; display: flex; flex-direction: column; gap: 8px; }
.pmb-empty-state, .pmb-empty-msg {
    text-align: center; padding: 20px 14px;
    color: var(--pmb-ink-mute); font-size: 13.5px;
    border: 1px dashed var(--pmb-line);
    border-radius: var(--pmb-r);
}
.pmb-empty-msg p { margin: 0; }
.pmb-empty-case { font-size: 12.5px; color: var(--pmb-ink-mute); padding: 6px 0; }
.pmb-case-selection { margin-bottom: 10px; }

.pmb-selected-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    border-radius: var(--pmb-r);
    background: var(--pmb-paper);
    border: 1px solid var(--pmb-line-soft);
    animation: pmb-item-in .35s var(--pmb-ease);
}
@keyframes pmb-item-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.pmb-selected-color { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.pmb-selected-name { flex: 1; font-weight: 500; font-size: 14px; }
.pmb-selected-qty { font-size: 12.5px; color: var(--pmb-ink-mute); font-weight: 600; font-variant-numeric: tabular-nums; }
.pmb-selected-remove {
    width: 24px; height: 24px; flex: 0 0 auto;
    /* v2.10.3 — padding/min-height inherited from theme button styles
       stretched this circle into an oval; pin the box. */
    padding: 0;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: transparent; color: var(--pmb-ink-mute);
    cursor: pointer; transition: background .3s var(--pmb-ease), color .3s var(--pmb-ease);
}
.pmb-selected-remove:hover { background: var(--pmb-accent-tint); color: var(--pmb-accent-deep); }

/* Mix & Match "build your case" list — same visual language, using the
 * .pmb-sf-* class names the mix script emits. The remove button is a small,
 * neat circular icon button (not a huge default browser button). */
.pmb-selected-flavors { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; }
.pmb-sf-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px 9px 13px;
    border-radius: var(--pmb-r);
    background: var(--pmb-paper);
    border: 1px solid var(--pmb-line-soft);
    animation: pmb-item-in .35s var(--pmb-ease);
}
.pmb-sf-color { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.pmb-sf-name { flex: 1; font-weight: 500; font-size: 14px; color: var(--pmb-ink); }
.pmb-sf-qty {
    font-size: 12.5px; font-weight: 600; color: var(--pmb-ink-soft);
    font-variant-numeric: tabular-nums;
    padding: 2px 9px; border-radius: var(--pmb-pill);
    background: var(--pmb-accent-tint);
}
.pmb-sf-remove {
    width: 26px; height: 26px; flex: 0 0 26px;
    padding: 0;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: transparent; color: var(--pmb-ink-mute);
    cursor: pointer; line-height: 1;
    transition: background .25s var(--pmb-ease), color .25s var(--pmb-ease);
}
.pmb-sf-remove:hover { background: var(--pmb-accent-tint); color: var(--pmb-accent-deep); }
.pmb-sf-remove svg { width: 12px; height: 12px; display: block; }

/* Deal breakdown */
.pmb-deal-breakdown {
    margin: 16px 0;
    border-radius: var(--pmb-r);
    border: 1px solid var(--pmb-line);
    background: var(--pmb-accent-tint);
    padding: 15px 17px;
    animation: pmb-item-in .35s var(--pmb-ease);
}
.pmb-deal-breakdown-head {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--pmb-display); font-style: italic; font-weight: 500;
    font-size: 15px; color: var(--pmb-accent-deep);
    margin-bottom: 12px;
}
.pmb-deal-breakdown-head svg { color: var(--pmb-accent-deep); }
.pmb-deal-line {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13.5px; padding: 5px 0; color: var(--pmb-ink-soft);
}
.pmb-deal-line .pmb-deal-line-amt { font-weight: 600; color: var(--pmb-ink); font-variant-numeric: tabular-nums; }
.pmb-deal-line.is-deal .pmb-deal-line-label { color: var(--pmb-accent-deep); font-weight: 600; }
.pmb-deal-saving {
    margin-top: 10px; padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--pmb-accent-deep) 30%, transparent);
    display: flex; justify-content: space-between; align-items: center;
    font-weight: 600; color: var(--pmb-leaf-dk);
}
.pmb-deal-saving .pmb-deal-saving-amt { font-variant-numeric: tabular-nums; }

/* Badges row */
.pmb-badges-row { display: flex; gap: 10px; margin: 16px 0; }
.pmb-badge-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 14px 8px; border-radius: var(--pmb-r);
    background: var(--pmb-paper);
    border: 1px solid var(--pmb-line-soft);
    text-align: center;
}
.pmb-badge-item svg { color: var(--pmb-accent-deep); }
.pmb-badge-item span { font-size: 11.5px; font-weight: 500; color: var(--pmb-ink-soft); }

/* Discount info */
.pmb-discount-info, #pmb-discount-info { margin-bottom: 14px; }
.pmb-discount-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pmb-original-price {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--pmb-accent);
    color: var(--pmb-ink-mute); font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.pmb-savings {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px; border-radius: var(--pmb-pill);
    background: color-mix(in srgb, var(--pmb-leaf) 14%, transparent);
    color: var(--pmb-leaf-dk);
    font-size: 12.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Price row */
.pmb-price-row, .pmb-total-price-row {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 18px 0 16px; padding-top: 18px;
    border-top: 1px solid var(--pmb-line);
}
.pmb-price-label, .pmb-tp-label {
    font-size: 11px; font-weight: 500; letter-spacing: .14em;
    text-transform: uppercase; color: var(--pmb-ink-mute);
}
.pmb-price-value, .pmb-tp-value {
    font-family: var(--pmb-display); font-weight: 400;
    font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1;
    color: var(--pmb-ink);
    font-variant-numeric: tabular-nums; text-align: right;
}
.pmb-price-placeholder { font-family: var(--pmb-sans); font-size: 13.5px; font-weight: 500; color: var(--pmb-ink-mute); }

/* Add-to-basket — theme pill button with slide-up accent fill */
.pmb-add-to-cart {
    width: 100%;
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    padding: 18px 28px;
    border: 0; border-radius: var(--pmb-pill);
    background: var(--pmb-ink);
    color: var(--pmb-paper);
    font-family: var(--pmb-sans);
    font-weight: 500; font-size: 15.5px; letter-spacing: .01em;
    cursor: pointer;
    overflow: hidden;
    transition: transform .5s var(--pmb-ease), box-shadow .5s var(--pmb-ease), color .5s var(--pmb-ease);
}
.pmb-add-to-cart::before {
    content: ""; position: absolute; inset: 0;
    background: var(--pmb-accent);
    transform: translateY(101%);
    transition: transform .5s var(--pmb-ease);
    z-index: 0;
}
.pmb-add-to-cart > * { position: relative; z-index: 1; }
.pmb-add-to-cart:not(:disabled):hover { color: var(--pmb-accent-ink); transform: translateY(-2px); box-shadow: 0 18px 36px -16px rgba(31,26,18,.4); }
.pmb-add-to-cart:not(:disabled):hover::before { transform: translateY(0); }
.pmb-add-to-cart:not(:disabled):active { transform: translateY(0); }
.pmb-add-to-cart:disabled { background: var(--pmb-line); color: var(--pmb-ink-mute); cursor: not-allowed; }
.pmb-add-to-cart .pmb-btn-loading { display: none; }
.pmb-add-to-cart.loading .pmb-btn-text { visibility: hidden; }
.pmb-add-to-cart.loading .pmb-btn-loading {
    display: inline-flex; position: absolute; inset: 0; z-index: 2;
    align-items: center; justify-content: center;
}
.pmb-add-to-cart.loading .pmb-btn-loading svg { animation: pmb-spin .8s linear infinite; }
@keyframes pmb-spin { to { transform: rotate(360deg); } }

.pmb-cta-note { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--pmb-ink-mute); }

/* ================================================================== */
/* 7. Notices                                                         */
/* ================================================================== */
.pmb-notice {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 14px 0; padding: 13px 15px;
    border-radius: var(--pmb-r);
    font-size: 13.5px; font-weight: 500;
    border: 1px solid transparent;
    animation: pmb-item-in .3s var(--pmb-ease);
}
.pmb-notice svg { flex: 0 0 auto; margin-top: 1px; }
.pmb-notice-info    { background: var(--pmb-accent-tint); border-color: color-mix(in srgb, var(--pmb-accent) 30%, transparent); color: var(--pmb-accent-deep); }
.pmb-notice-warn    { background: #FBE9D8; border-color: #F0C39A; color: #9A4A12; }
.pmb-notice-success { background: color-mix(in srgb, var(--pmb-leaf) 12%, transparent); border-color: color-mix(in srgb, var(--pmb-leaf) 35%, transparent); color: var(--pmb-leaf-dk); }

/* ================================================================== */
/* 8. Toast                                                           */
/* ================================================================== */
.pmb-toast {
    position: fixed; top: 100px; left: 50%;
    transform: translateX(-50%) translateY(-20px);
    z-index: 99999;
    max-width: min(92vw, 420px);
    display: flex; align-items: center; gap: 10px;
    padding: 14px 22px;
    border-radius: var(--pmb-pill);
    background: var(--pmb-ink); color: var(--pmb-paper);
    font-weight: 500; font-size: 14px;
    box-shadow: var(--pmb-shadow-lg);
    opacity: 0;
    transition: opacity .35s var(--pmb-ease), transform .4s var(--pmb-ease);
}
.pmb-toast.pmb-toast-in { opacity: 1; transform: translateX(-50%) translateY(0); }
.pmb-toast::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--pmb-accent); }
.pmb-toast.success::before { background: #8FE0A6; }
.pmb-toast.error::before { background: #F2A0A0; }

/* ================================================================== */
/* 9. Ingredients accordion + certifications                         */
/* ================================================================== */
.pmb-ingredients-section, .pmb-certifications {
    max-width: var(--pmb-max);
    margin: clamp(64px, 9vw, 120px) auto 0;
    text-align: center;
}
.pmb-section-heading {
    font-family: var(--pmb-display); font-weight: 400;
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    letter-spacing: -.03em; margin: 0 0 10px; line-height: 1;
}
.pmb-section-subheading { max-width: 540px; margin: 0 auto 32px; color: var(--pmb-ink-soft); font-size: 15.5px; }

.pmb-accordion { max-width: 760px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.pmb-accordion-item {
    background: var(--pmb-card);
    border: 1px solid var(--pmb-line);
    border-radius: var(--pmb-r);
    overflow: hidden;
    transition: border-color .4s var(--pmb-ease), box-shadow .4s var(--pmb-ease);
}
.pmb-accordion-item.open { border-color: var(--pmb-accent); box-shadow: var(--pmb-shadow-sm); }
.pmb-accordion-header {
    width: 100%; display: flex; align-items: center; gap: 14px;
    padding: 18px 20px; background: transparent; border: 0; cursor: pointer;
    font-family: var(--pmb-sans); text-align: left;
}
.pmb-acc-thumbnail { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.pmb-acc-color { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; }
.pmb-acc-name { flex: 1; font-weight: 500; font-size: 15px; letter-spacing: .01em; }
.pmb-acc-arrow { color: var(--pmb-ink-mute); transition: transform .4s var(--pmb-ease); }
.pmb-accordion-item.open .pmb-acc-arrow { transform: rotate(180deg); color: var(--pmb-accent-deep); }
.pmb-accordion-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--pmb-ease); }
.pmb-accordion-item.open .pmb-accordion-body { grid-template-rows: 1fr; }
.pmb-accordion-content { overflow: hidden; padding: 0 20px; }
.pmb-accordion-item.open .pmb-accordion-content { padding: 0 20px 20px; }
.pmb-accordion-content h4 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--pmb-ink-mute); margin: 14px 0 6px; }
.pmb-accordion-content p { color: var(--pmb-ink-soft); font-size: 14px; margin: 0; }
.pmb-nutritional-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pmb-nutritional-table td, .pmb-nutritional-table th { padding: 8px 10px; border-bottom: 1px solid var(--pmb-line-soft); text-align: left; }

.pmb-cert-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pmb-cert-badge {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 22px; border-radius: var(--pmb-pill);
    background: var(--pmb-card); border: 1px solid var(--pmb-line);
    font-weight: 500; font-size: 14px; color: var(--pmb-ink);
    transition: transform .3s var(--pmb-ease), border-color .3s var(--pmb-ease);
}
.pmb-cert-badge:hover { transform: translateY(-2px); border-color: var(--pmb-accent); }
.pmb-cert-icon { width: 22px; height: 22px; object-fit: contain; }

/* ================================================================== */
/* 10. Builder tabs (mix / dual)                                     */
/* ================================================================== */
/* Case builder tabs — hidden until the JS marks the container visible.
 * Using a class (not inline display) keeps the flex row + gap intact. */
.pmb-case-builder-tabs {
    display: none;
    margin: clamp(16px, 2.4vw, 24px) 0 0;
}
.pmb-case-builder-tabs.is-visible {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.pmb-case-builder-tab {
    position: relative;
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px;
    min-width: 112px;
    padding: 12px 18px;
    border: 1.5px solid var(--pmb-line); border-radius: var(--pmb-r);
    background: var(--pmb-card); cursor: pointer;
    transition: transform .3s var(--pmb-ease), border-color .3s var(--pmb-ease), background .3s var(--pmb-ease), box-shadow .3s var(--pmb-ease);
    font-family: var(--pmb-sans);
    line-height: 1.2;
    color: var(--pmb-ink);
}
.pmb-case-builder-tab:hover { border-color: var(--pmb-accent); transform: translateY(-2px); box-shadow: var(--pmb-shadow-sm); }
/* Selected — clean accent-tint + ring, matching the quantity tabs. */
.pmb-case-builder-tab.active {
    border-color: var(--pmb-accent);
    background: var(--pmb-accent-tint);
    background-image: none;
    box-shadow: 0 0 0 1.5px var(--pmb-accent);
    color: var(--pmb-ink);
}
.pmb-case-builder-tab.complete { border-color: color-mix(in srgb, var(--pmb-accent) 45%, var(--pmb-line)); }
.pmb-case-builder-tab.complete::before {
    content: "✓"; position: absolute; top: -8px; right: -8px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--pmb-accent); color: var(--pmb-accent-ink);
    font-size: 12px; font-weight: 700; display: grid; place-items: center;
    box-shadow: 0 2px 8px -2px rgba(31,26,18,.4);
}
.pmb-cbt-label { font-family: var(--pmb-display); font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--pmb-ink); }
.pmb-cbt-count { font-size: 11px; color: var(--pmb-ink-mute); font-weight: 500; letter-spacing: .01em; }
.pmb-case-builder-tab.active .pmb-cbt-count { color: var(--pmb-accent-deep); }
.pmb-case-builder-tab.complete:not(.active) .pmb-cbt-count { color: var(--pmb-accent-deep); }

.pmb-dual-instruction, .pmb-mix-instruction {
    margin: 0 0 18px; padding: 13px 17px;
    border-radius: var(--pmb-r);
    background: var(--pmb-accent-tint);
    color: var(--pmb-accent-deep);
    font-weight: 500; font-size: 14px;
}

.pmb-dual-check-mark {
    position: absolute; top: 12px; right: 12px;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--pmb-accent); color: var(--pmb-accent-ink);
    display: grid; place-items: center;
    transform: scale(0); transition: transform .35s var(--pmb-ease);
}
.pmb-dual-flavor-card.selected .pmb-dual-check-mark { transform: scale(1); }

.pmb-variety-intro { max-width: 620px; margin: 0 auto 26px; color: var(--pmb-ink-soft); text-align: center; }
.pmb-variety-summary-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--pmb-line-soft); }
.pmb-variety-summary-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.pmb-variety-summary-name { flex: 1; font-weight: 500; font-size: 14px; }
.pmb-variety-summary-qty { font-weight: 600; color: var(--pmb-accent-deep); font-variant-numeric: tabular-nums; }
.pmb-variety-qty-badge {
    position: absolute; top: 12px; right: 12px;
    z-index: 3;
    display: inline-flex; align-items: center;
    padding: 5px 12px; border-radius: var(--pmb-pill);
    background: var(--pmb-accent); color: var(--pmb-accent-ink);
    font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--pmb-accent-deep) 70%, transparent);
    pointer-events: none;
}

/* Total selections / subtotal rows (dual/mix sidebars) */
.pmb-total-selections, .pmb-summary-row, .pmb-subtotal-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0; font-size: 14px; color: var(--pmb-ink-soft);
}
.pmb-ts-label, .pmb-st-label { font-weight: 500; }
.pmb-ts-count, .pmb-st-value { font-weight: 600; color: var(--pmb-ink); font-variant-numeric: tabular-nums; }
.pmb-summary-section { margin: 6px 0 4px; border-top: 1px solid var(--pmb-line-soft); padding-top: 6px; }

/* Delivery options */
.pmb-delivery-options { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.pmb-delivery-option {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 15px; border: 1px solid var(--pmb-line);
    border-radius: var(--pmb-r); cursor: pointer;
    transition: border-color .3s var(--pmb-ease), background .3s var(--pmb-ease);
}
.pmb-delivery-option:hover { border-color: var(--pmb-accent); }
.pmb-delivery-option.selected { border-color: var(--pmb-accent); background: var(--pmb-accent-tint); }
.pmb-do-text { flex: 1; font-size: 14px; font-weight: 500; }

/* ================================================================== */
/* 11. Mobile                                                         */
/* ================================================================== */
@media (max-width: 980px) {
    .pmb-sidebar-box, .pmb-sidebar-inner { position: static; }
    .pmb-step-guides { grid-template-columns: 1fr; gap: 6px; border-radius: var(--pmb-r-lg); }
}
@media (max-width: 760px) {
    .pmb-bundle-page { padding-bottom: 120px; }
    .pmb-case-tabs, .pmb-cans-tabs { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .pmb-flavor-grid, .pmb-mix-flavor-grid, .pmb-dual-flavor-grid, .pmb-variety-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .pmb-flavor-card, .pmb-mix-flavor-card, .pmb-dual-flavor-card, .pmb-variety-card { padding: 10px 10px 14px; }
    .pmb-flavor-name, .pmb-mix-flavor-name, .pmb-dual-flavor-name { font-size: 1.1rem; }
    .pmb-mobile-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
        display: flex; align-items: center; gap: 12px;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: rgba(255,251,241,.92);
        backdrop-filter: blur(16px);
        border-top: 1px solid var(--pmb-line);
        box-shadow: 0 -10px 40px -20px rgba(31,26,18,.3);
    }
    .pmb-mobile-bar-info { flex: 1; min-width: 0; }
    .pmb-mobile-bar-price { font-family: var(--pmb-display); font-weight: 400; font-size: 1.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
    .pmb-mobile-bar-meta { font-size: 12px; color: var(--pmb-ink-mute); font-weight: 500; margin-top: 2px; }
    /* v2.10.5 — two-row purchase bar. The single-row layout rendered
       the add button tiny and truncated next to the price meta
       (client screenshot: "Ad..."). Info row on top, FULL-WIDTH
       add-to-basket beneath: nothing can clip it. */
    .pmb-mobile-bar { flex-wrap: wrap; row-gap: 10px; }
    .pmb-mobile-bar-info {
        flex: 1 1 100%;
        display: flex;
        align-items: baseline;
        gap: 10px;
        min-width: 0;
    }
    .pmb-mobile-bar-meta {
        margin-top: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .pmb-mobile-bar .pmb-add-to-cart {
        flex: 1 1 100%;
        width: 100%;
        min-height: 54px;
        padding: 15px 20px;
        font-size: 16px;
    }
}
@media (min-width: 761px) { .pmb-mobile-bar { display: none !important; } }
@media (max-width: 420px) { .pmb-case-tabs, .pmb-cans-tabs { grid-template-columns: 1fr 1fr; } }

/* ================================================================== */
/* 12. a11y                                                           */
/* ================================================================== */
.pmb-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.pmb-bundle-page :focus-visible { outline: 2px solid var(--pmb-accent); outline-offset: 3px; }

/* ================================================================== */
/* v2.3.0 — Hardening & fixes                                          */
/* ================================================================== */

/* Accordion legibility insurance.
 * The theme (and Astra's dynamic customizer CSS, which can print after
 * this sheet) style bare <button> elements with dark fills + white
 * text; if any of those rules reach the accordion header the flavour
 * names become white-on-brown and unreadable. Pin the intended look
 * explicitly. */
.pmb-bundle-page .pmb-accordion-item {
    background: var(--pmb-card, #FFFFFF) !important;
}
.pmb-bundle-page .pmb-accordion-header,
.pmb-bundle-page .pmb-accordion-header:hover,
.pmb-bundle-page .pmb-accordion-header:focus {
    background: transparent !important;
    color: var(--pmb-ink, #1F1A12) !important;
    text-transform: none;
    box-shadow: none !important;
}
.pmb-bundle-page .pmb-acc-name {
    color: var(--pmb-ink, #1F1A12) !important;
}
.pmb-bundle-page .pmb-accordion-content,
.pmb-bundle-page .pmb-accordion-content p,
.pmb-bundle-page .pmb-nutritional-table td,
.pmb-bundle-page .pmb-nutritional-table th {
    color: var(--pmb-ink-soft, #5C4F3D);
}

/* Instant-close hook used by pmb-accordion.js: items other than the
 * clicked one collapse with no animation so the page never drifts. */
.pmb-accordion-item.pmb-no-anim .pmb-accordion-body {
    transition: none !important;
}

/* Quantity steppers must always sit ABOVE flavour imagery — stacking
 * insurance so the count can never render behind an image. */
.pmb-flavor-image,
.pmb-mix-flavor-image,
.pmb-dual-flavor-image {
    position: relative;
    z-index: 1;
}
.pmb-flavor-details,
.pmb-mix-qty-controls,
.pmb-qty-selector {
    position: relative;
    z-index: 2;
}
.pmb-mix-qty-input,
.pmb-qty-input,
.pmb-mix-qty-display {
    position: relative;
    z-index: 3;
    background: var(--pmb-card, #FFFFFF);
    border-radius: 6px;
}

/* ------------------------------------------------------------------ */
/* Ingredients trust-icon strip (v2.4.0) — 4 icon+text items under     */
/* the "Our Ingredients" heading. CMS-editable in PMB Settings.        */
/* ------------------------------------------------------------------ */
.pmb-trust-icons {
    --pmb-trust-gold: #A8874F;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    max-width: 1180px;
    margin: 8px auto clamp(28px, 4vw, 44px);
    text-align: left;
}
.pmb-trust-icon {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px clamp(14px, 2vw, 28px);
    border-left: 1px solid var(--pmb-line);
    min-width: 0;
}
.pmb-trust-icon:first-child { border-left: 0; }
.pmb-trust-icon__ring {
    flex: 0 0 56px;
    width: 56px; height: 56px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--pmb-trust-gold);
    border-radius: 50%;
    color: var(--pmb-trust-gold);
    background: transparent;
    overflow: hidden;
}
.pmb-trust-icon__ring svg { width: 26px; height: 26px; display: block; }
.pmb-trust-icon__ring img {
    width: 100%; height: 100%;
    object-fit: contain;
    border-radius: 50%;
    padding: 10px;
    box-sizing: border-box;
}
.pmb-trust-icon__copy { min-width: 0; }
.pmb-trust-icon__title {
    font-family: var(--pmb-sans);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pmb-trust-gold);
    margin: 4px 0 4px;
    line-height: 1.3;
}
.pmb-trust-icon__text {
    font-size: 14px;
    line-height: 1.45;
    color: var(--pmb-ink-soft);
    margin: 0;
}
@media (max-width: 960px) {
    .pmb-trust-icons { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
    .pmb-trust-icon:nth-child(odd) { border-left: 0; }
}
@media (max-width: 540px) {
    .pmb-trust-icons { grid-template-columns: 1fr; }
    .pmb-trust-icon { border-left: 0; padding-left: 0; padding-right: 0; }
}

/* ------------------------------------------------------------------ */
/* v2.5.0 — Fixes & features                                           */
/* ------------------------------------------------------------------ */

/* Selected-count "×N" badge and tick must paint ABOVE the flavour
 * imagery. v2.4.0 gave the image z-index:1 for the qty-stepper fix,
 * which dropped these statically-stacked overlays underneath it on
 * every product — this pins them for all card types. */
.pmb-flavor-canbadge,
.pmb-flavor-tick,
.pmb-variety-qty-badge,
.pmb-dual-check-mark {
    z-index: 3;
}

/* Mix & Match: breathing room between the Case 1/2/3 builder tabs and
 * the flavour cards below (tabs previously had zero bottom margin). */
.pmb-case-builder-tabs.is-visible {
    margin-bottom: clamp(18px, 2.6vw, 28px);
}

/* Certification badges: real logo artwork renders large and chrome-free
 * ("the icons are very small" fix); text-only badges keep the pill. */
.pmb-cert-badges { align-items: center; gap: clamp(20px, 4vw, 48px); }
.pmb-cert-badge--logo {
    background: none;
    border: 0;
    padding: 0;
    border-radius: 0;
}
.pmb-cert-badge--logo:hover { border-color: transparent; transform: translateY(-3px); }
.pmb-cert-badge--logo .pmb-cert-icon {
    width: auto;
    height: clamp(64px, 8vw, 96px);
    max-width: 180px;
    object-fit: contain;
}

/* Out-of-stock flavours: visible on every product, greyed out and
 * unselectable, with a clear label. */
.pmb-oos {
    pointer-events: none;
    cursor: default;
}
.pmb-oos .pmb-flavor-image,
.pmb-oos .pmb-mix-flavor-image,
.pmb-oos .pmb-dual-flavor-image,
.pmb-oos .pmb-flavor-placeholder {
    filter: grayscale(1);
    opacity: .55;
}
.pmb-oos .pmb-flavor-details,
.pmb-oos .pmb-flavor-name,
.pmb-oos .pmb-mix-qty-controls,
.pmb-oos .pmb-qty-selector,
.pmb-oos .pmb-variety-qty-badge {
    opacity: .45;
}
.pmb-oos:hover { transform: none; box-shadow: none; border-color: var(--pmb-line); }
.pmb-oos-label {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    padding: 5px 12px;
    border-radius: var(--pmb-pill);
    background: rgba(31,26,18,.85);
    color: var(--pmb-paper, #FFFBF1);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}
/* Cards need a positioning context for the label. */
.pmb-flavor-card, .pmb-mix-flavor-card, .pmb-dual-flavor-card { position: relative; }

/* =============================================================
 *  24 Can BBQ Pack (v2.10.0)
 * ============================================================= */
.pmb-bbq-intro { margin-top: 6px; }
.pmb-bbq-body {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--pmb-line, #E3DCCB);
    max-width: 640px;
}
.pmb-bbq-body p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--pmb-ink-soft, #5C4F3D);
}
.pmb-bbq-promise {
    font-style: italic;
    font-weight: 600;
    color: var(--pmb-ink, #1F1A12) !important;
}