/* =============================================================
   Bundle Boss — Frontend Styles
   ============================================================= */

/* Theme tokens. Override these (e.g. in Customizer → Additional CSS)
   to brand the whole configurator — no need to touch rules below.
   The five that matter most for branding: --bb-accent, --bb-ink,
   --bb-surface, --bb-border, --bb-muted. :root, not the form, because
   a few pieces (cart links, price tweaks) render outside the form. */
:root {
    --bb-ink: #111827;            /* headline text + the summary bar */
    --bb-ink-soft: #1f2937;
    --bb-text: #374151;
    --bb-muted: #6b7280;
    --bb-muted-light: #9ca3af;
    --bb-surface: #fff;           /* cards */
    --bb-surface-faint: #f9fafb;
    --bb-surface-alt: #f3f4f6;
    --bb-summary-bg: #f3f4f6;     /* sticky summary bar — light; rebrandable */
    --bb-border: #e5e7eb;
    --bb-border-strong: #d1d5db;
    --bb-accent: #7c3aed;         /* stepper pills, active highlights */
    --bb-accent-bg: #f5f3ff;
    --bb-accent-deep: #4c1d95;
    --bb-link: #2271b1;           /* inline links + focus outlines */
    --bb-success: #166534;        /* "chosen" confirmations */
    --bb-success-bg: #f0fdf4;
    --bb-success-border: #bbf7d0;
    --bb-success-bright: #00a32a; /* completed-step markers */
    --bb-warn: #b45309;           /* low-stock badges */
    --bb-warn-bg: #fffbeb;
    --bb-warn-bg-strong: #fef3c7;
    --bb-warn-border: #fde68a;
    --bb-warn-accent: #fcd34d;
    --bb-warn-deep: #92400e;
    --bb-error: #b91c1c;
}

.bundle-boss-form {
    margin-top: 2em;
    font-family: inherit;
    color: var(--bb-ink);
}

/* The hidden attribute must always win inside the configurator. Our
   own display rules (flex/grid) outrank the browser's [hidden] default,
   and only some themes (e.g. Storefront) re-assert it with !important —
   on Astra/Blocksy/TT25 the pager and chooser grid leaked through. */
.bundle-boss-form [hidden] {
    display: none !important;
}

/* ── Discount tier pills ─────────────────────────────────────── */

.bb-tiers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 1.75em;
}

.bb-tier-pill {
    display: inline-block;
    padding: 5px 14px;
    background: var(--bb-success-bg);
    color: #15803d;
    border: 1px solid var(--bb-success-border);
    border-radius: 100px;
    font-size: 0.8em;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

/* ── Item list / grid container ──────────────────────────────── */

.bundle-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Clearance for the sticky summary bar: the last item rests above the
       bar's docked position instead of flush against it. */
    margin-bottom: 16px;
    padding-bottom: 18px;
}

/* So keyboard / anchored scrolling parks an item above the pinned summary
   bar rather than tucked behind it. */
.bundle-item {
    scroll-margin-bottom: 92px;
}

/* Grid must size against its CONTAINER, not the viewport — themes put
   product content in columns of wildly different widths. The form is
   the query container; the rules below adapt the grid to it. */
.bundle-boss-form {
    container-type: inline-size;
}

.bundle-items.bundle-layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    /* Each card sizes to its own content; without this, grid's default
       align-items:stretch pads a short card (e.g. an optional simple item) to
       match the tallest card in its row, leaving a large empty area below it. */
    align-items: start;
}

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

.bundle-item {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 16px;
    /* No overflow:hidden — it would disable the sticky card header.
       Corner rounding is applied to the children instead. */
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.bundle-item > :first-child {
    border-radius: 15px 15px 0 0;
}

.bundle-item > :last-child {
    border-radius: 0 0 15px 15px;
}

.bundle-item--collapsed > .bb-card-header {
    border-radius: 15px;
}

.bundle-item:hover {
    border-color: var(--bb-border-strong);
    box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}

.bundle-item.bundle-item--done {
    border-color: #a7f3d0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(16,185,129,0.08);
}

/* ── Card header ─────────────────────────────────────────────── */

.bb-card-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 6px;
    gap: 12px;
    padding: 14px 18px;
    /* Sticky: the collapse control stays in reach while scrolling a tall
       open card — no scrolling back up to fold it. */
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bb-surface);
    border-bottom: 1px solid var(--bb-surface-alt);
    cursor: pointer;
    user-select: none;
}

/* Sticky needs an unclipped ancestor chain. Themes commonly clearfix the
   product container with overflow:hidden, and wrap the page in an
   overflow-x:hidden element (which silently becomes a scroll container and
   swallows position:sticky). Unclip both, scoped to bundle product pages,
   and replace the clearfix the safe way. */
.single-product div.product.product-type-bundle {
    overflow: visible !important;
}

.single-product div.product.product-type-bundle::after {
    content: '';
    display: block;
    clear: both;
}

.single-product .site,
.single-product #page {
    overflow: visible !important;
}

/* Clear the WP admin bar for logged-in users. */
body.admin-bar .bb-card-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .bb-card-header {
        top: 46px;
    }
}

.bb-card-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Keep a sensible width so, in a narrow card (Grid page layout), the
       Optional toggle wraps to its own line below the name instead of crushing
       it. In a normal-width card everything stays on one line. */
    flex: 1 1 11rem;
    min-width: 11rem;
}

/* The title/meta column must be allowed to shrink, so a long item name
   truncates (ellipsis) instead of overflowing onto the Optional toggle in a
   narrow card (the Grid page layout puts items in half-width columns). */
.bb-card-header-left > div {
    min-width: 0;
}

/* Chevron arrow */
.bb-card-chevron {
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-top: 5.5px solid var(--bb-border-strong);
    transition: transform 0.18s, border-color 0.15s;
}

.bb-card-header:hover .bb-card-chevron {
    border-top-color: var(--bb-muted-light);
}

.bundle-item:not(.bundle-item--collapsed) .bb-card-chevron {
    transform: rotate(180deg);
}

.bb-step {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--bb-ink);
    color: var(--bb-surface);
    border-radius: 50%;
    font-size: 0.75em;
    font-weight: 800;
    letter-spacing: -0.01em;
    transition: background 0.2s;
}

.bundle-item--done .bb-step {
    background: #10b981;
}

.bb-item-name {
    font-size: 0.95em;
    font-weight: 700;
    color: var(--bb-ink);
    overflow-wrap: break-word;
    max-width: 280px;
    line-height: 1.3;
}

.bb-item-meta {
    font-size: 0.75em;
    color: var(--bb-muted-light);
    font-weight: 400;
    margin-top: 2px;
}

/* ── Optional toggle ─────────────────────────────────────────── */

.bb-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

.bb-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.bb-toggle-track {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--bb-border-strong);
    border-radius: 10px;
    flex-shrink: 0;
    transition: background 0.2s;
}

.bb-toggle input:checked ~ .bb-toggle-track {
    background: #10b981;
}

.bb-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    background: var(--bb-surface);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.18s;
}

.bb-toggle input:checked ~ .bb-toggle-track .bb-toggle-thumb {
    transform: translateX(16px);
}

.bb-toggle-text {
    font-size: 0.75em;
    font-weight: 600;
    color: var(--bb-muted-light);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* ── Card body ───────────────────────────────────────────────── */

.bb-card-body.bundle-item-inner {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
}

.bundle-layout-grid .bb-card-body.bundle-item-inner {
    flex-direction: column;
}

/* ── Product image ───────────────────────────────────────────── */

.bb-product-image.bundle-item-image {
    flex-shrink: 0;
    width: 116px;
    align-self: stretch;      /* container fills card height for the border */
    border-right: 1px solid var(--bb-surface-alt);
    background: var(--bb-surface-faint);      /* fills the gap below the fixed-height image */
    overflow: hidden;
}

.bb-product-image.bundle-item-image img {
    display: block;
    width: 116px;
    height: 116px;            /* fixed — no longer stretches with card */
    object-fit: cover;
    object-position: center top;
    border-radius: 0;
}

.bundle-layout-grid .bb-product-image.bundle-item-image {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--bb-surface-alt);
    /* The PANEL owns the shape; the image just fills it. One source of
       truth means every card in a row shares one image height. */
    aspect-ratio: 5 / 3;
    height: auto;
    max-height: 200px;
}

.bundle-layout-grid .bb-product-image.bundle-item-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    max-height: none;
    object-fit: cover;
    border-radius: 0;
}

/* Narrow container (theme sweep finding: Storefront/Astra product
   columns): a one-column "grid" of tall cards looks broken — degrade
   each card to the list presentation instead. Container queries are
   2023-baseline; older browsers just keep the capped-image cards. */
@container (max-width: 499px) {
    .bundle-items.bundle-layout-grid {
        grid-template-columns: 1fr;
    }
    .bundle-layout-grid .bb-card-body.bundle-item-inner {
        flex-direction: row;
    }
    .bundle-layout-grid .bb-product-image.bundle-item-image {
        width: 116px;
        border-right: 1px solid var(--bb-surface-alt);
        border-bottom: none;
    }
    .bundle-layout-grid .bb-product-image.bundle-item-image img {
        width: 116px;
        height: 116px;
        aspect-ratio: auto;
        max-height: none;
    }
}

/* A quantity grid needs the full card width to lay its colour tiles out as a
   wrapping block. In the list layout the image sits in a fixed 116px left
   column, which squeezes the tile grid to ~1 per row on a phone. When the form
   is narrow, stack the image on top so the grid gets the whole width (2–3
   tiles per row instead of one). Scoped with :has() so simple list items keep
   their compact thumbnail-beside-controls layout. */
@container (max-width: 499px) {
    .bb-card-body.bundle-item-inner:has( .bb-quantity-grid ) {
        flex-direction: column;
    }
    .bb-card-body.bundle-item-inner:has( .bb-quantity-grid ) .bb-product-image.bundle-item-image {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--bb-surface-alt);
    }
    .bb-card-body.bundle-item-inner:has( .bb-quantity-grid ) .bb-product-image.bundle-item-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 5 / 3;
        max-height: 180px;
    }
}

/* ── Controls area ───────────────────────────────────────────── */

.bb-controls.bundle-item-details {
    flex: 1;
    min-width: 0;
    padding: 16px 18px;
}

/* ── Qty stepper ─────────────────────────────────────────────── */

.bb-qty-row.bundle-item-qty-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.bb-qty-label {
    font-size: 0.75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bb-muted-light);
}

.bb-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--bb-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bb-surface);
}

.bb-qty-btn {
    width: 30px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    color: var(--bb-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.1s, color 0.1s;
    line-height: 1;
}

.bb-qty-btn:hover {
    background: var(--bb-surface-alt);
    color: var(--bb-ink);
}

.bundle-item-qty-spinner {
    width: 36px !important;
    text-align: center !important;
    border: none !important;
    border-left: 1px solid var(--bb-border) !important;
    border-right: 1px solid var(--bb-border) !important;
    border-radius: 0 !important;
    padding: 5px 2px !important;
    font-size: 0.88em !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
    outline: none !important;
    background: var(--bb-surface) !important;
    color: var(--bb-ink) !important;
}

.bundle-item-qty-spinner::-webkit-inner-spin-button,
.bundle-item-qty-spinner::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Blanket guard: every BundleBoss stepper ships its own +/- buttons, so the
   browser's native number-input arrows must never appear alongside them, on
   any layout (per-unit, build-a-box, quantity grid, configurator). */
.bundle-boss-form input[type="number"]::-webkit-inner-spin-button,
.bundle-boss-form input[type="number"]::-webkit-outer-spin-button,
.bb-box input[type="number"]::-webkit-inner-spin-button,
.bb-box input[type="number"]::-webkit-outer-spin-button,
.bb-quantity-grid input[type="number"]::-webkit-inner-spin-button,
.bb-quantity-grid input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.bundle-boss-form input[type="number"],
.bb-box input[type="number"],
.bb-quantity-grid input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ── "All the same" toggle row ───────────────────────────────── */

.bb-same-all-row {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

.bb-same-all-toggle {
    gap: 8px !important;
}

.bb-same-all-text {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--bb-muted);
}

.bb-same-all-toggle input:checked ~ .bb-toggle-track {
    background: var(--bb-ink);
}

.bb-same-all-toggle input:checked ~ * ~ .bb-same-all-text {
    color: var(--bb-ink);
}

/* Synced units — collapsed visually but present in DOM for form submission */
.bundle-item-unit.bb-unit-synced {
    height: 0 !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: none !important;
    pointer-events: none;
}

/* ── Unit rows (variable products) ──────────────────────────── */

.bundle-item-units {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bundle-item-unit {
    padding: 0;
    background: transparent;
    border: none;
    border-top: 1px solid var(--bb-surface-alt);
    padding-top: 14px;
    margin-top: 14px;
}

.bundle-item-unit:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.bb-unit-label {
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #c4c9d4;
    margin-bottom: 10px;
}

/* ── Attribute group ─────────────────────────────────────────── */

.bb-attr-group.bundle-item-attribute {
    margin-bottom: 12px;
}

.bb-attr-group.bundle-item-attribute:last-of-type {
    margin-bottom: 0;
}

.bb-attr-name {
    display: block;
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bb-muted-light);
    margin-bottom: 7px;
}

/* Hidden native selects (pills mode) */
.bundle-attr-select {
    display: none !important;
}

/* Visible dropdown (dropdown mode) */
.bb-select-wrap {
    position: relative;
    display: inline-block;
}

.bb-select-wrap::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--bb-muted-light);
    pointer-events: none;
}

.bb-select-wrap .bundle-attr-select.bb-dropdown {
    display: block !important;
    appearance: none;
    -webkit-appearance: none;
    padding: 7px 30px 7px 11px !important;
    background: var(--bb-surface) !important;
    border: 1px solid var(--bb-border) !important;
    border-radius: 8px !important;
    font-size: 0.88em !important;
    font-weight: 500 !important;
    color: var(--bb-ink) !important;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-width: 140px;
    box-shadow: none !important;
    outline: none;
}

.bb-select-wrap .bundle-attr-select.bb-dropdown:focus {
    border-color: var(--bb-ink) !important;
    box-shadow: 0 0 0 3px rgba(17,24,39,0.08) !important;
}

/* ── Chip buttons ────────────────────────────────────────────── */

.bb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bb-chip {
    display: inline-block;
    padding: 5px 14px;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 100px;
    font-size: 0.82em;
    font-weight: 500;
    color: var(--bb-text);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
    white-space: nowrap;
    line-height: 1.5;
    outline: none;
}

.bb-chip:hover {
    border-color: var(--bb-muted-light);
    color: var(--bb-ink);
    background: var(--bb-surface-faint);
}

.bb-chip.is-selected {
    background: var(--bb-ink);
    border-color: var(--bb-ink);
    color: var(--bb-surface);
    font-weight: 600;
}

.bb-chip.is-selected:hover {
    background: var(--bb-ink-soft);
    border-color: var(--bb-ink-soft);
}

/* ── Colour swatch chips ──────────────────────────────────────── */

.bb-chip--swatch {
    position: relative;
    width: 32px;
    height: 32px;
    padding: 3px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bb-surface);
    flex-shrink: 0;
}

.bb-swatch-dot {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* subtle inner edge so white/very light swatches stay visible */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

.bb-chip--swatch:hover {
    background: var(--bb-surface);
    border-color: var(--bb-muted-light);
}

.bb-chip--swatch.is-selected,
.bb-chip--swatch.is-selected:hover {
    background: var(--bb-surface);
    border: 2px solid var(--bb-ink);
    padding: 2px;
}

/* checkmark badge on the selected swatch */
.bb-chip--swatch.is-selected::after {
    content: '';
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 13px;
    height: 13px;
    background: var(--bb-ink) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M3.5 8.5l3 3 6-7"/></svg>') center / 9px no-repeat;
    border: 2px solid var(--bb-surface);
    border-radius: 50%;
}

/* hover tooltip with the term name */
.bb-chip--swatch:hover::before {
    content: attr(data-label);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bb-ink);
    color: var(--bb-surface);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 30;
}

/* ── Unit footer (variation image + price + stock) ───────────── */

.bb-unit-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    min-height: 20px;
}

/* "Apply to the rest" per-unit shortcut (copies this unit onto the others). */
.bb-unit-actions { margin-top: 10px; }

.bb-apply-rest,
.bb-apply-rest:hover,
.bb-apply-rest:focus,
.bb-apply-rest:active {
    background: none !important; /* themes fill button backgrounds; keep it a link */
    border: none;
    box-shadow: none;
    padding: 2px 0;
    color: var(--bb-accent);
    font-size: 0.82em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bb-apply-rest:hover,
.bb-apply-rest:focus { color: var(--bb-accent-deep); }

/* In the cards layout the actions row spans the card width. */
.bb-units-cards .bb-unit-actions { flex: 0 0 100%; margin-top: 6px; }

.bb-var-thumb.bundle-unit-thumb img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--bb-border);
}

.bb-unit-price.bundle-item-price {
    font-size: 0.92em;
    font-weight: 700;
    color: var(--bb-ink);
    margin-left: auto;
}

/* ── Variant Quantity Grid (per-unit table layout) ───────────────
   Opt-in via the bundle's "Multiple items: Table" setting. Purely a
   re-layout of the same per-unit controls: the inputs, the classes the
   JS hooks onto, and the POSTed payload are identical to the stacked
   layout above, so the configurator JS and the cart/order flow are
   unaffected. */

.bundle-item-units.bb-units-table {
    display: table;
    /* Size columns to their content and only fill the column when there is
       room (min-width). With a plain width:100% the table compressed to the
       column and clipped the rightmost cells (Price/personalisation) once the
       attributes + columns got wide; now it overflows into the scroll wrap
       instead. Mobile reflows this to blocks, where min-width:100% is inert. */
    width: auto;
    min-width: 100%;
    border-collapse: collapse;
    margin: 4px 0 0;
}

.bb-units-table thead th {
    text-align: left;
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bb-muted);
    padding: 0 12px 8px;
    border-bottom: 2px solid var(--bb-border);
    white-space: nowrap;
}

.bb-units-table thead .bb-col-num { width: 1%; text-align: center; }
.bb-units-table thead .bb-col-thumb { width: 44px; }
.bb-units-table thead .bb-col-price { text-align: right; }

/* Neutralise the stacked-stack spacing; rows separate via cell borders. */
.bundle-item-units.bb-units-table .bundle-item-unit {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.bb-units-table tbody td {
    padding: 12px;
    vertical-align: middle;
    border-top: 1px solid var(--bb-surface-alt);
}

.bb-units-table tbody tr:first-child td { border-top: none; }

.bb-units-table .bb-col-num {
    color: var(--bb-muted);
    font-weight: 700;
    font-size: 0.85em;
    text-align: center;
    white-space: nowrap;
}

.bb-units-table .bb-cell-attr .bb-chips { margin: 0; }
.bb-units-table .bb-cell-attr .bb-attr-name { display: none; } /* the label lives in the header */

.bb-units-table .bb-col-thumb { text-align: center; }
.bb-units-table .bb-col-thumb .bb-var-thumb.bundle-unit-thumb img { margin: 0 auto; }

.bb-units-table .bb-col-price { text-align: right; white-space: nowrap; }
.bb-units-table .bb-col-price .bb-unit-price.bundle-item-price { margin-left: 0; }
.bb-units-table .bb-col-price .bb-stock-badge { margin-top: 4px; }

/* "All the same" collapses the duplicate rows (they still submit). */
.bundle-item-units.bb-units-table .bundle-item-unit.bb-unit-synced {
    display: none !important;
}

/* Many-column (personalisation) tables: scroll sideways rather than crush cells. */
.bb-units-table-wrap { overflow-x: auto; }

/* Personalisation columns: label in the header, bare input in each cell. */
.bb-units-table .bb-col-addon { min-width: 7.5rem; }
.bb-units-table .bb-col-fee { font-weight: 600; color: var(--bb-muted); white-space: nowrap; }
.bb-units-table .bb-cell-addon { vertical-align: middle; }
.bb-units-table .bb-cell-addon .bb-addon-input { width: 100%; min-width: 6.5rem; box-sizing: border-box; }
.bb-units-table .bb-cell-addon .bb-addon-upload { display: flex; align-items: center; gap: 6px; min-width: 9rem; }
.bb-units-table .bb-cell-attr .bb-select-wrap { min-width: 7rem; }

/* Mobile: reflow the table back to the stacked cards used everywhere else,
   so small screens keep the proven layout. */
@media (max-width: 640px) {
    .bundle-item-units.bb-units-table,
    .bb-units-table tbody,
    .bb-units-table tr,
    .bb-units-table td {
        display: block;
        width: auto;
    }
    .bb-units-table thead { display: none; }
    .bb-units-table tbody tr.bundle-item-unit {
        border: 1px solid var(--bb-border);
        border-radius: 10px;
        padding: 12px 14px;
        margin-top: 12px;
    }
    .bb-units-table tbody tr.bundle-item-unit:first-child { margin-top: 0; }
    .bb-units-table tbody td {
        border-top: none;
        padding: 6px 0;
        text-align: left;
    }
    .bb-units-table td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7em;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--bb-muted);
        margin-bottom: 4px;
    }
    .bb-units-table .bb-col-num {
        text-align: left;
        color: var(--bb-ink);
        border-bottom: 1px solid var(--bb-surface-alt);
        padding-bottom: 8px !important;
    }
    .bb-units-table .bb-col-num::before { content: "Item "; }
    .bb-units-table .bb-col-thumb,
    .bb-units-table .bb-col-price { text-align: left; }
}

/* Same reflow, keyed to the CONTAINER width instead of the viewport. A narrow
   theme product column on desktop (Storefront, ColorMag, boxed/block themes)
   would otherwise overflow the per-unit table into a horizontal scroll and
   clip the Size/Price columns. Below ~510px of form width, stack each unit
   into a labelled card (same markup, same data-label ::before headers). The
   form is the query container (container-type above); wide columns keep the
   table. Breakpoint sits above the table's intrinsic min-width (~470px) and
   below typical wide columns (measured: Storefront 416 / OceanWP 367 reflow;
   Astra 552 / Kadence 595 keep the table). */
@container (max-width: 510px) {
    .bundle-item-units.bb-units-table,
    .bb-units-table tbody,
    .bb-units-table tr,
    .bb-units-table td {
        display: block;
        width: auto;
    }
    .bb-units-table thead { display: none; }
    .bb-units-table tbody tr.bundle-item-unit {
        border: 1px solid var(--bb-border);
        border-radius: 10px;
        padding: 12px 14px;
        margin-top: 12px;
    }
    .bb-units-table tbody tr.bundle-item-unit:first-child { margin-top: 0; }
    .bb-units-table tbody td {
        border-top: none;
        padding: 6px 0;
        text-align: left;
    }
    .bb-units-table td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        display: block;
        font-size: 0.7em;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--bb-muted);
        margin-bottom: 4px;
    }
    .bb-units-table .bb-col-num {
        text-align: left;
        color: var(--bb-ink);
        border-bottom: 1px solid var(--bb-surface-alt);
        padding-bottom: 8px !important;
    }
    .bb-units-table .bb-col-num::before { content: "Item "; }
    .bb-units-table .bb-col-thumb,
    .bb-units-table .bb-col-price { text-align: left; }
}

/* ── Compact cards (per-unit) ─────────────────────────────────────
   One card per unit; the attributes and per-unit personalisation fields flow
   side by side and wrap to the next line, so there is never a horizontal
   scroll and each card stays short. Swatches are kept. Same inputs/payload as
   every other layout. */

.bundle-item-units.bb-units-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bb-units-cards .bundle-item-unit {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 18px;
    border: 1px solid var(--bb-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0;
}

.bb-units-cards .bb-unit-label {
    flex: 0 0 100%;
    margin: 0;
}

.bb-units-cards .bundle-item-attribute.bb-attr-group {
    flex: 1 1 8rem;
    min-width: 7rem;
    margin: 0;
}

/* The personalisation collapsible sits on its own full-width row and stays an
   optional, collapsed-by-default "Personalise this item" toggle (not forced
   open on every card). */
.bb-units-cards .bb-personalise { flex: 0 0 100%; margin: 4px 0 0; }

.bb-units-cards .bb-unit-footer {
    flex: 0 0 100%;
    margin: 2px 0 0;
}

/* "All the same" collapses the duplicate cards (they still submit). */
.bundle-item-units.bb-units-cards .bundle-item-unit.bb-unit-synced {
    display: none !important;
}

@media (max-width: 560px) {
    .bb-units-cards .bundle-item-attribute.bb-attr-group { flex-basis: 100%; }
}

.bb-stock-badge.bundle-unit-stock {
    display: inline-block;
    padding: 2px 9px;
    background: var(--bb-warn-bg);
    color: var(--bb-warn);
    border: 1px solid var(--bb-warn-border);
    border-radius: 100px;
    font-size: 0.7em;
    font-weight: 700;
    white-space: nowrap;
}

/* ── Variant Quantity Grid ─────────────────────────────── */

/* padding-bottom clears the ~80px sticky summary bar, so an open colour's size
   panel (and the bottom tile rows) sit above it instead of tucking behind. */
.bb-quantity-grid { margin: 6px 0 2px; padding-bottom: 80px; }

/* The grid replaces the per-unit stepper and the "all the same" toggle. */
.bundle-item:has( .bb-quantity-grid ) .bb-qty-row,
.bundle-item:has( .bb-quantity-grid ) .bb-same-all-row { display: none; }

.bb-grid-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.bb-grid-instruction { font-weight: 700; color: var(--bb-ink); }

.bb-grid-progress {
    font-size: 0.85em;
    font-weight: 700;
    color: var(--bb-ink-soft, #6b6256);
    padding: 2px 10px;
    border: 1px solid var(--bb-border);
    border-radius: 100px;
    white-space: nowrap;
}

.bb-quantity-grid.bb-grid-ok .bb-grid-progress {
    color: var(--bb-success, #2e7d32);
    border-color: var(--bb-success, #2e7d32);
}

.bb-quantity-grid.bb-grid-over .bb-grid-progress {
    color: var(--bb-warn, #b45309);
    border-color: var(--bb-warn-border, #e7cba0);
}

/* Colour tiles: a compact, wrapping grid; tap one to reveal its sizes inline,
   so 15 colours stay a tidy block with everything in front of you. */
.bb-grid-tiles {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 92px, 1fr ) );
    gap: 8px;
}

.bb-grid-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 9px 6px;
    border: 1px solid var(--bb-border);
    border-radius: 10px;
    background: var(--bb-surface, #fff);
    color: var(--bb-ink);
    font: inherit;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

.bb-grid-tile:hover { border-color: var(--bb-accent); }

/* Theme-proof: themes fill <button> backgrounds on hover/focus/active; hold the
   tile's own surface + ink so the colour name stays readable (the candidate-hover
   lesson). The accent shows via the border / open ring, not a fill. */
.bb-grid-tile,
.bb-grid-tile:hover,
.bb-grid-tile:focus,
.bb-grid-tile:focus-visible,
.bb-grid-tile:active {
    background: var(--bb-surface, #fff) !important;
    color: var(--bb-ink) !important;
}

.bb-grid-tile.is-open {
    border-color: var(--bb-accent);
    box-shadow: inset 0 0 0 1px var(--bb-accent);
}

.bb-grid-tile-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba( 0, 0, 0, 0.15 );
}

.bb-grid-tile-img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 7px;
    border: 1px solid rgba( 0, 0, 0, 0.1 );
}

.bb-grid-tile-name { font-size: 0.8em; font-weight: 600; }

.bb-grid-tile-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 100px;
    background: var(--bb-accent);
    color: #fff;
    font-size: 0.72em;
    font-weight: 700;
    line-height: 20px;
}

.bb-grid-tile:not(.bb-grid-tile-filled) .bb-grid-tile-count { display: none; }

.bb-grid-panels {
    margin-top: 6px;
}

.bb-grid-panel {
    margin: 2px 0 4px;
    padding: 10px 12px;
    border: 1px solid var(--bb-border);
    border-radius: 10px;
    background: var(--bb-summary-bg);
}

.bb-grid-panel[hidden] { display: none; }

/* Wrapping cell grid: fills the width and wraps to the next line, so every
   option stays visible at any column width or count. Never scrolls sideways. */
.bb-grid-cells {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 100px, 1fr ) );
    gap: 8px;
}

.bb-grid-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 4px;
    border: 1px solid var(--bb-border);
    border-radius: 9px;
    background: var(--bb-surface, #fff);
}

.bb-grid-cell:focus-within { border-color: var(--bb-accent); }

.bb-grid-cell-label {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--bb-ink-soft, #6b6256);
    white-space: nowrap;
}

.bb-grid-qty {
    width: 100%;
    max-width: 3.6em;
    text-align: center;
    padding: 5px 4px;
    border: 1px solid var(--bb-border);
    border-radius: 7px;
    background: var(--bb-surface, #fff);
    color: var(--bb-ink);
    font-size: 0.95em;
    -moz-appearance: textfield;
}

.bb-grid-qty:focus {
    outline: 2px solid var(--bb-accent);
    outline-offset: 0;
    border-color: var(--bb-accent);
}

/* Clickable − / + steppers on each grid cell (so it isn't type-only). */
.bb-grid-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
}
.bb-quantity-grid .bb-grid-step {
    flex: 0 0 auto;
    width: 24px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--bb-border, #e0e0e0);
    border-radius: 7px;
    background-color: #fff !important;
    color: var(--bb-ink, #1d2025) !important;
    font-size: 1.15em;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    box-shadow: none !important;
}
.bb-quantity-grid .bb-grid-step:hover {
    border-color: var(--bb-accent) !important;
    color: var(--bb-accent) !important;
    background-color: #fff !important;
}
.bb-quantity-grid .bb-grid-step:active {
    background-color: var(--bb-soft, #f3f4f6) !important;
}
.bb-grid-stepper .bb-grid-qty { width: 2em; max-width: 2em; flex: 0 1 auto; }

/* Subtle cue when switching colours: the opened size panel fades up, and the
   selected tile's border eases in. Kept gentle ("nothing too much"). */
@keyframes bbGridFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}
.bb-grid-panel.is-open { animation: bbGridFadeIn 0.22s ease both; }
.bb-grid-tile { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
@media (prefers-reduced-motion: reduce) {
    .bb-grid-panel.is-open { animation: none; }
}

.bb-grid-cell-oos { opacity: 0.55; justify-content: center; }
.bb-grid-oos-note { font-size: 0.72em; color: var(--bb-ink-soft, #6b6256); }

/* ── Simple product price ────────────────────────────────────── */

.bb-simple-price.bundle-item-price {
    font-size: 0.92em;
    font-weight: 700;
    color: var(--bb-ink);
    margin: 4px 0 0;
}

/* ── Optional excluded state ─────────────────────────────────── */

.bundle-item-excluded .bb-card-body {
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* ── Out-of-stock item ───────────────────────────────────────── */

.bundle-item-oos .bb-card-body {
    opacity: 0.35;
    pointer-events: none;
}

.bundle-item-oos .bb-item-name {
    opacity: 0.6;
}

.bb-oos-badge {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--bb-danger, #b32d2e);
    background: rgba(179, 45, 46, 0.08);
    border-radius: 999px;
    padding: 3px 11px;
    white-space: nowrap;
}

/* ── Summary bar ─────────────────────────────────────────────── */

.bundle-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    padding: 13px 22px;
    background: var(--bb-summary-bg);
    border: 1px solid var(--bb-border);
    border-radius: 14px;
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-top: 8px;
    /* Pinned to the viewport bottom on tall configurators, so the elevation
       has to cast UPWARD onto the content it floats over. A downward shadow
       here read as a stray card dropped into the middle of the item list. */
    box-shadow: 0 -6px 20px rgba(15,23,42,0.14);
}

.bb-summary-totals {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── Build recap (full-width line above the totals) ─────────────── */

.bb-build-recap {
    flex-basis: 100%;
    margin: 0;
}

.bb-build-recap > summary {
    cursor: pointer;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bb-ink-soft);
}

.bb-build-recap > summary:hover,
.bb-build-recap[open] > summary {
    color: var(--bb-accent-deep);
}

.bb-recap-list {
    list-style: none;
    margin: 10px 0 4px;
    padding: 0;
    max-height: 180px;
    overflow-y: auto;
}

.bb-recap-list li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 3px 0;
    font-size: 0.82em;
}

.bb-recap-name {
    color: var(--bb-text);
}

.bb-recap-price {
    color: var(--bb-ink);
    white-space: nowrap;
}

.bb-total-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.bundle-total-label {
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bb-muted);
}

.bundle-total-amount {
    font-size: 1.8em;
    font-weight: 800;
    color: var(--bb-ink);
    line-height: 1;
    letter-spacing: -0.02em;
}

.bundle-original-total {
    font-size: 0.85em;
    color: #4b5563;
    text-decoration: line-through;
    font-weight: 400;
}

.bundle-savings {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--bb-success);
    background: var(--bb-success-bg);
    border: 1px solid var(--bb-success-border);
    display: inline-block;
    padding: 2px 10px;
    border-radius: 100px;
}

.bundle-add-to-cart {
    flex-shrink: 0;
    padding: 13px 32px !important;
    font-size: 0.97em !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    border-radius: 10px !important;
    transition: opacity 0.15s, transform 0.12s, box-shadow 0.15s !important;
    min-width: 180px;
    text-align: center;
    background: var(--bb-accent) !important;
    color: #fff !important;
    border-color: var(--bb-accent) !important;
    box-shadow: none !important;
}

.bundle-add-to-cart:not(:disabled):hover {
    background: var(--bb-accent-deep) !important;
    border-color: var(--bb-accent-deep) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(60,40,20,0.22) !important;
}

.bundle-add-to-cart:disabled {
    background: var(--bb-border-strong) !important;
    color: var(--bb-muted) !important;
    border-color: var(--bb-border-strong) !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ── Notices ─────────────────────────────────────────────────── */

.bundle-stock-notice,
.bundle-boss-notices,
.bundle-boss-success-notice {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.88em;
    font-weight: 500;
    line-height: 1.5;
}

.bundle-stock-notice {
    background: var(--bb-warn-bg);
    border: 1px solid var(--bb-warn-border);
    color: var(--bb-warn-deep);
}

/* Builder-failed-to-load notice (revealed by init-guard.js, or shown inside
   <noscript> when JavaScript is off). No `display` rule here on purpose, so the
   `hidden` attribute keeps it hidden until the guard removes it. */
.bundle-boss-init-error {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.88em;
    line-height: 1.5;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.bundle-boss-notices {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--bb-error);
}

.bundle-boss-success-notice {
    background: var(--bb-success-bg);
    border: 1px solid var(--bb-success-border);
    color: #15803d;
}

.bundle-boss-success-notice a {
    font-weight: 700;
    text-decoration: underline;
    color: inherit;
}

/* ── Sale Ending countdown ───────────────────────────────────── */

.bb-sale-ending {
    margin-bottom: 1.5em;
    padding: 14px 18px;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.bb-sale-label {
    font-size: 0.72em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bb-muted);
    margin-bottom: 8px;
}

.bb-sale-bar {
    height: 5px;
    background: var(--bb-surface-alt);
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 12px;
}

.bb-sale-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ef4444 0%, #f97316 100%);
    border-radius: 100px;
    transition: width 1s linear;
}

.bb-countdown {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bb-cd-seg {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
}

.bb-cd-val {
    font-size: 1.6em;
    font-weight: 800;
    color: var(--bb-ink);
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.bb-cd-unit {
    font-size: 0.62em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bb-muted-light);
    margin-top: 3px;
}

.bb-cd-sep {
    font-size: 1.4em;
    font-weight: 800;
    color: var(--bb-border-strong);
    line-height: 1;
    margin-bottom: 12px;
    align-self: flex-start;
    margin-top: 4px;
}

/* ── Related bundles carousel ────────────────────────────────── */

.bb-related {
    margin-top: 2em;
    border-top: 1px solid var(--bb-surface-alt);
    padding-top: 1.5em;
}

.bb-related-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.bb-related-title {
    font-size: 1em !important;
    font-weight: 700 !important;
    color: var(--bb-ink) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.bb-related-nav {
    display: flex;
    gap: 6px;
}

.bb-related-prev,
.bb-related-next {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--bb-border);
    background: var(--bb-surface);
    cursor: pointer;
    font-size: 1em;
    color: var(--bb-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    line-height: 1;
}

.bb-related-prev:hover,
.bb-related-next:hover {
    background: var(--bb-ink);
    border-color: var(--bb-ink);
    color: var(--bb-surface);
}

.bb-related-prev:disabled,
.bb-related-next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.bb-related-viewport {
    overflow: hidden;
}

.bb-related-track {
    display: flex;
    gap: 14px;
    transition: transform 0.3s ease;
}

.bb-related-card {
    flex: 0 0 200px;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.18s, border-color 0.18s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.bb-related-card:hover {
    border-color: var(--bb-border-strong);
    box-shadow: 0 4px 16px rgba(0,0,0,0.09);
}

.bb-related-img img {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-bottom: 1px solid var(--bb-surface-alt);
}

.bb-related-info {
    padding: 10px 12px 6px;
    flex: 1;
}

.bb-related-name {
    font-size: 0.82em;
    font-weight: 700;
    color: var(--bb-ink);
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bb-related-price {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--bb-text);
}

.bb-related-cta {
    display: block;
    padding: 8px 12px;
    font-size: 0.75em;
    font-weight: 700;
    color: var(--bb-ink);
    text-align: right;
    border-top: 1px solid var(--bb-surface-alt);
    letter-spacing: 0.02em;
    transition: color 0.12s;
}

.bb-related-card:hover .bb-related-cta {
    color: var(--bb-text);
}

/* ── Shop / archive badge ────────────────────────────────────── */

.bundle-boss-type-badge {
    display: inline-block;
    padding: 3px 9px;
    background: var(--bb-ink);
    color: var(--bb-surface);
    font-size: 0.7em;
    font-weight: 700;
    border-radius: 4px;
    margin-bottom: 6px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}

.bundle-boss-from-price {
    font-weight: 700;
}

/* ── Cart / order group header ───────────────────────────────── */

.bundle-boss-cart-group-header {
    display: block;
    margin-bottom: 0.4em;
    padding-bottom: 0.4em;
    border-bottom: 1px solid var(--bb-border);
    font-size: 0.88em;
    color: var(--bb-muted);
}

a.bundle-boss-edit-bundle   { color: var(--bb-link); font-size: 0.8em; font-weight: 600; white-space: nowrap; }
a.bundle-boss-remove-bundle { color: #b32d2e; font-size: 0.8em; font-weight: 600; white-space: nowrap; }

/* ── Accordion collapsed state ───────────────────────────── */

.bundle-item--collapsed .bb-card-header {
    border-bottom: none;
}

.bundle-item--collapsed .bb-card-body {
    display: none;
}

.bb-card-summary {
    display: none;
    padding: 0 18px 14px calc(18px + 26px + 10px);
    font-size: 0.82em;
    color: var(--bb-muted);
    font-weight: 500;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    line-height: 1.4;
}

.bundle-item--collapsed .bb-card-summary {
    display: flex;
}

.bundle-item--done.bundle-item--collapsed .bb-card-summary {
    color: #059669;
    font-weight: 600;
}

/* ── Bundle product page: badge, title, price ────────────── */

.bundle-boss-product-badge {
    display: inline-block;
    background: var(--bb-ink);
    color: var(--bb-surface);
    font-size: 0.68em;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 13px;
    border-radius: 100px;
    margin-bottom: 10px;
    line-height: 1.5;
}

.product-type-bundle h1.product_title {
    font-size: 2.3em !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.15 !important;
    color: var(--bb-ink) !important;
    margin-bottom: 6px !important;
}

.product-type-bundle .summary .price,
.product-type-bundle .entry-summary .price {
    font-size: 1.45em !important;
    font-weight: 700 !important;
    color: var(--bb-ink) !important;
    display: block;
    margin-bottom: 0.5em !important;
}

/* ── Keyboard focus visibility ─────────────────────────────────── */

.bb-card-header:focus-visible,
.bb-chip:focus-visible,
.bb-qty-btn:focus-visible,
.bundle-add-to-cart:focus-visible,
.bb-toggle input:focus-visible + .bb-toggle-track,
.bb-upsell-add:focus-visible {
    outline: 2px solid var(--bb-link);
    outline-offset: 2px;
}

/* Swatch chips: the outline alone can vanish against the dot colour —
   add a ring as well. */
.bb-chip--swatch:focus-visible {
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.35);
}

/* Scroll-back target after collapsing a card: keep clear of the admin bar. */
.bundle-item {
    scroll-margin-top: 12px;
}

body.admin-bar .bundle-item {
    scroll-margin-top: 44px;
}

/* ── Builder: choice slot chooser ─────────────────────────────── */

.bb-chooser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.bb-chooser-loading,
.bb-chooser-empty {
    color: var(--bb-muted-light);
    font-size: 0.85em;
    padding: 12px 0;
}

.bb-candidate {
    position: relative; /* badge anchor */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 10px;
    background: var(--bb-surface);
    border: 1.5px solid var(--bb-border);
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}

.bb-candidate:hover:not(:disabled) {
    background: var(--bb-surface);
    border-color: var(--bb-ink);
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}

/* Candidates are <button>s. Some themes (Kadence, etc.) give buttons a
   coloured background on hover/focus/active that is more specific than our
   base rule, which buries the name/price. Hold our own surface + ink. */
.bb-candidate:focus,
.bb-candidate:active {
    background: var(--bb-surface);
    color: var(--bb-ink);
    border-color: var(--bb-ink);
}

.bb-candidate:focus-visible {
    outline: 2px solid var(--bb-link);
    outline-offset: 2px;
}

.bb-candidate.is-oos {
    opacity: 0.5;
    cursor: not-allowed;
}

.bb-candidate-img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
}

.bb-candidate-name {
    font-size: 0.82em;
    font-weight: 600;
    color: var(--bb-ink);
    line-height: 1.3;
}

.bb-candidate-price {
    font-size: 0.8em;
    color: var(--bb-text);
}

.bb-candidate-oos {
    font-size: 0.7em;
    font-weight: 700;
    color: var(--bb-error);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Deal surfacing on candidate cards: sale badge top-left, featured
   ("Popular") ribbon top-right. WC's price_html already renders the
   strikethrough; the rules below just keep it tidy at card size. */

.bb-candidate-sale,
.bb-candidate-featured {
    position: absolute;
    top: 8px;
    padding: 2px 8px;
    border-radius: 9px;
    font-size: 0.62em;
    font-weight: 700;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bb-candidate-sale {
    left: 8px;
    background: var(--bb-error);
    color: #fff;
}

.bb-candidate-featured {
    right: 8px;
    background: var(--bb-accent-bg);
    color: var(--bb-accent-deep);
    border: 1px solid var(--bb-accent);
}

.bb-candidate-price del {
    color: var(--bb-muted-light);
    margin-right: 4px;
}

.bb-candidate-price ins {
    text-decoration: none;
    font-weight: 600;
}

/* Search + pager */

.bb-chooser-search {
    margin-bottom: 10px;
}

.bb-chooser-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid var(--bb-border);
    border-radius: 8px;
    font-size: 0.85em;
}

.bb-chooser-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
    font-size: 0.8em;
    color: var(--bb-muted);
}

.bb-chooser-pager button {
    border: 1px solid var(--bb-border);
    background: var(--bb-surface);
    border-radius: 6px;
    padding: 3px 10px;
    cursor: pointer;
}

.bb-chooser-pager button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Chosen bar */

.bb-chosen-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;      /* price + Change drop to their own line when tight */
    gap: 8px 12px;
    padding: 10px 14px;
    background: var(--bb-success-bg);
    border: 1px solid var(--bb-success-border);
    border-radius: 10px;
    margin-bottom: 12px;
}

.bb-chosen-bar[hidden] {
    display: none;
}

/* The card's main image already swaps to the chosen product —
   a second thumbnail inside the bar just steals width. */
.bb-chosen-thumb {
    display: none;
}

.bb-chosen-name {
    font-weight: 700;
    font-size: 0.88em;
    color: #14532d;
    flex: 0 1 auto;
    min-width: 0;
    line-height: 1.35;
    /* Never split words — wrap whole words only. */
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.bb-chosen-price {
    font-size: 0.85em;
    color: var(--bb-success);
    white-space: nowrap;
}

/* A chosen simple product's config block is only its price —
   redundant right under the bar's price. (Data attributes stay
   in the DOM for the total calculation.) */
.bb-chosen-config .bundle-simple-item {
    display: none;
}

.bb-chooser-change {
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bb-surface) !important;
    color: var(--bb-success) !important;
    border: 1.5px solid #86efac !important;
    border-radius: 100px !important;
    padding: 5px 16px !important;
    font-size: 0.78em !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
}

.bb-chooser-change:hover {
    background: var(--bb-success) !important;
    color: var(--bb-surface) !important;
    border-color: var(--bb-success) !important;
    transform: translateY(-1px);
}

.bb-chooser-change:active {
    transform: translateY(0);
}

/* ── Builder: compatibility warnings ──────────────────────────── */

.bb-candidate.has-warning {
    border-color: var(--bb-warn-accent);
}

.bb-candidate-warn {
    font-size: 0.7em;
    font-weight: 700;
    color: var(--bb-warn);
}

.bb-compat-warn {
    font-size: 0.75em;
    font-weight: 700;
    color: var(--bb-warn);
    background: var(--bb-warn-bg-strong);
    border: 1px solid var(--bb-warn-accent);
    border-radius: 100px;
    padding: 2px 10px;
    white-space: nowrap;
}

.bb-compat-warn[hidden] {
    display: none;
}

.bb-chooser-notice {
    margin-bottom: 10px;
    padding: 9px 12px;
    background: var(--bb-warn-bg-strong);
    border: 1px solid var(--bb-warn-accent);
    border-radius: 8px;
    font-size: 0.82em;
    color: var(--bb-warn-deep);
}

.bb-chooser-notice[hidden] {
    display: none;
}

/* Quantity-rule cap on a slot's stepper, e.g. "Limited to 2 by your
   Motherboard choice". */
.bb-qty-cap-note {
    margin: -4px 0 10px;
    font-size: 0.78em;
    color: var(--bb-warn-deep);
}

.bb-qty-cap-note::before {
    content: "\26A0\FE0E\00A0"; /* warning sign */
}

/* ── Step-by-step layout ──────────────────────────────────────── */

.bb-stepper-nav[hidden],
.bb-stepper-controls[hidden] {
    display: none;
}

.bb-stepper-active .bundle-item.bb-step-hidden {
    display: none;
}

.bb-step-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.bb-step-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    border: 1px solid #d4d6dd;
    border-radius: 100px;
    background: var(--bb-surface);
    color: #3c4257;
    font-size: 0.85em;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.bb-step-pill .bb-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #eef0f4;
    font-weight: 700;
    font-size: 0.85em;
}

.bb-step-pill:hover {
    border-color: var(--bb-accent);
}

.bb-step-pill.is-active {
    border-color: var(--bb-accent);
    background: var(--bb-accent-bg);
    color: var(--bb-accent-deep);
}

.bb-step-pill.is-active .bb-step-num {
    background: var(--bb-accent);
    color: var(--bb-surface);
}

.bb-step-pill.is-done .bb-step-num {
    background: var(--bb-success-bright);
    color: var(--bb-surface);
    font-size: 0;
}

.bb-step-pill.is-done .bb-step-num::after {
    content: "\2713";
    font-size: 13px;
}

.bb-step-pill.has-notice {
    border-color: var(--bb-warn-accent);
    background: var(--bb-warn-bg);
}

.bb-step-pill.has-notice::after {
    content: "\26A0\FE0E";
    color: var(--bb-warn);
    font-size: 0.95em;
}

.bb-stepper-controls {
    display: flex;
    justify-content: space-between;
    margin: 16px 0;
}

.bb-stepper-controls .button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Step nav buttons follow the configurator's design system (and the
   merchant's --bb-accent), not the theme's default button styling. */
.bb-step-prev,
.bb-step-next {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    padding: 11px 24px !important;
    font-size: 0.9em !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.3 !important;
    border-radius: 10px !important;
    text-transform: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s !important;
}

/* Back: quiet, secondary. */
.bb-step-prev {
    background: var(--bb-surface) !important;
    color: var(--bb-ink-soft) !important;
    border: 1.5px solid var(--bb-border-strong) !important;
}

.bb-step-prev:not(:disabled):hover {
    border-color: var(--bb-ink-soft) !important;
    color: var(--bb-ink) !important;
    transform: translateY(-1px);
}

/* Next: primary, carries the accent. */
.bb-step-next {
    background: var(--bb-accent) !important;
    color: #fff !important;
    border: 1.5px solid var(--bb-accent) !important;
    font-weight: 700 !important;
}

.bb-step-next:not(:disabled):hover {
    background: var(--bb-accent-deep) !important;
    border-color: var(--bb-accent-deep) !important;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .bb-step-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .bb-step-pill {
        flex-shrink: 0;
    }
}

/* ── Share this build ─────────────────────────────────────────── */

.bb-share-row {
    margin-top: 10px;
    text-align: center;
}

.bb-share-row[hidden] {
    display: none;
}

.bb-share-build {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid #c3c4c7;
    border-radius: 100px;
    background: transparent;
    color: #50575e;
    font-size: 0.85em;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.bb-share-build::before {
    content: "\1F517"; /* link symbol */
    font-size: 0.95em;
}

.bb-share-build:hover {
    border-color: #50575e;
    color: #1d2327;
}

.bb-share-build.is-copied {
    border-color: var(--bb-success-bright);
    color: var(--bb-success-bright);
    background: #edfaef;
}

/* ── Choice slot with no chosen product and no slot image: hide the preview
      entirely. If there is no picture, show nothing rather than an empty "+"
      tile, and let the chooser take the space. ────────────────────────── */
.bb-product-image:has(.bb-thumb-empty) {
	display: none;
}
/* The empty-state placeholder image must never render as a grey "no image"
   box, in ANY layout. The Configurator restructures this thumbnail into its
   own container, so the old `.bb-product-image.bundle-item-image` scoping let
   the placeholder leak there. Target the image itself and force it down so it
   is hidden whatever container it ends up in; the dashed "+" tile above still
   shows because `:has(.bb-thumb-empty)` matches the (hidden) image in the DOM. */
img.bb-thumb-empty { display: none !important; }

/* ── Personalisation add-on fields ─────────────────────────────────── */
.bb-personalise {
	margin: 10px 0 2px;
	background: var(--bb-surface-faint);
	border: 1px solid var(--bb-border);
	border-radius: 10px;
	overflow: hidden;
}
.bb-personalise-item { background: var(--bb-accent-bg); }
.bb-personalise-toggle {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 9px;
	padding: 11px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--bb-accent-deep);
}
.bb-personalise-toggle::-webkit-details-marker { display: none; }
.bb-personalise-toggle::marker { content: ''; }
.bb-personalise-toggle:hover { color: var(--bb-accent); }
/* Chevron: the most recognised expand/collapse signifier. Points down when
   collapsed, rotates up when open — never reads as a close (×). */
.bb-personalise-caret {
	flex: none;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	margin-bottom: 3px;
}
.bb-personalise[open] .bb-personalise-caret { transform: rotate(-135deg); }
.bb-personalise-fields {
	display: grid;
	gap: 10px;
	padding: 2px 12px 12px;
}
/* Personalisation tabbed in under the line it belongs to, in the recap. */
.bb-recap-addon-row .bb-recap-name {
	padding-left: 22px;
	font-size: 12px;
	font-style: italic;
	color: var(--bb-muted);
	position: relative;
}
.bb-recap-addon-row .bb-recap-name::before {
	content: '\21B3'; /* ↳ sub-item marker */
	position: absolute;
	left: 8px;
	font-style: normal;
	color: var(--bb-muted-light);
}
.bb-recap-addon-row .bb-recap-price {
	font-size: 12px;
	color: var(--bb-success);
}
.bb-addon-field { display: grid; gap: 4px; align-items: start; }
.bb-addon-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--bb-text);
}
.bb-addon-req { color: var(--bb-error); }
.bb-addon-input {
	width: 100%;
	padding: 7px 10px;
	border: 1px solid var(--bb-border-strong);
	border-radius: 8px;
	font-size: 14px;
	background: var(--bb-surface);
	color: var(--bb-ink);
	box-sizing: border-box;
}
.bb-addon-input:focus {
	outline: none;
	border-color: var(--bb-accent);
	box-shadow: 0 0 0 2px var(--bb-accent-bg);
}
textarea.bb-addon-input { min-height: 56px; resize: vertical; }
.bb-addon-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--bb-text);
	cursor: pointer;
}
.bb-addon-note {
	font-size: 13px;
	font-weight: 600;
	color: var(--bb-ink-soft);
	border-bottom: 1px solid var(--bb-border);
	padding-bottom: 4px;
}
.bb-addon-fee {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: var(--bb-success);
	background: var(--bb-success-bg);
	border: 1px solid var(--bb-success-border);
	border-radius: 6px;
	padding: 1px 7px;
	white-space: nowrap;
}
.bb-addon-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bb-addon-file-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border: 1px dashed var(--bb-border-strong);
	border-radius: 8px;
	background: var(--bb-surface);
	color: var(--bb-text);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.bb-addon-file-btn:hover { border-color: var(--bb-accent); color: var(--bb-accent); }
.bb-addon-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.bb-addon-file-status { font-size: 13px; color: var(--bb-muted); display: inline-flex; align-items: center; gap: 6px; }
.bb-addon-file-name { color: var(--bb-text); font-weight: 600; }
.bb-addon-file-remove { border: 0; background: none; cursor: pointer; color: var(--bb-error); font-size: 16px; line-height: 1; padding: 0 2px; }
.bb-addon-upload.is-uploading .bb-addon-file-status { color: var(--bb-accent); }

/* ── Main image: hide mode ─────────────────────────────────────────
   The merchant chose to drop the big gallery image on this bundle's page (the
   configurator items carry their own photos). Hide the gallery and let the
   summary, which holds the configurator, take the full width. Targets the
   common WooCommerce theme structure; harmless where a theme differs. */
body.bb-hide-main-image div.product .woocommerce-product-gallery {
	display: none !important;
}
body.bb-hide-main-image div.product .summary,
body.bb-hide-main-image div.product .entry-summary {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin-left: 0 !important;
}

/* BOGO / Buy X Get Y offer pill (Pro) — at the top of the configurator, by the
   pricing pills, so the deal is seen before the customer configures. */
.bb-bogo-badge {
	display: inline-block;
	margin: 0 0 14px;
	padding: 6px 15px;
	border-radius: 999px;
	background: var(--bb-success-bg, #e7f6ec);
	color: var(--bb-success, #1a7f37);
	font-size: 13.5px;
	font-weight: 700;
}

/* ============================================================
   Layout consistency pass (2026-07)
   Cards align, long names clamp, imageless products get a quiet
   tile, and secondary sections read as sections.
   ============================================================ */

/* Option/candidate cards: clamp long names to two lines, reserve the
   space either way, and pin the price row to the bottom so a row of
   cards keeps one baseline no matter how names wrap. */
.bb-candidate-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc( 1.3em * 2 );
}

.bb-candidate-price { margin-top: auto; }

/* Candidates keep one card width everywhere (the configurator's
   sections otherwise stretch them to different sizes per row). */
.bb-candidate { max-width: 210px; }

/* Box cards: the same discipline. */
.bb-box-card { display: flex; flex-direction: column; }

.bb-box-card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc( 1.35em * 2 );
}

.bb-box-card-price { margin-top: auto; }

/* Grid layout: cards in a row stretch to one height, prices sit on one
   baseline, and long names clamp instead of pushing the photo around. */
.bundle-items.bundle-layout-grid {
    align-items: stretch;
}

.bundle-layout-grid .bundle-item {
    display: flex;
    flex-direction: column;
}

.bundle-layout-grid .bb-card-body.bundle-item-inner {
    flex: 1 1 auto;
}

.bundle-layout-grid .bundle-item-price {
    margin-top: auto;
}

/* In a grid card the no-photo tile fills the image panel edge to edge. */
.bundle-layout-grid .bb-noimg {
    max-width: none;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
}

.bundle-layout-grid .bb-item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* A product with no photo gets a quiet initial tile, never the broken
   placeholder frame. */
.bb-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 96px;
    aspect-ratio: 1 / 1;
    background: color-mix( in srgb, var(--bb-border) 30%, var(--bb-surface) );
    color: var(--bb-text);
    opacity: 0.8;
    font-weight: 700;
    font-size: 1.3em;
    border-radius: 10px;
}

/* The box's quantity-break ladder, advertised before the first pick. */
.bb-box-tiers {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--bb-success, #1a7f37);
    margin: 8px 0 2px;
}

/* Gift options read as a section, not a stray checkbox. */
.bb-gift {
    border: 1.5px solid var(--bb-border);
    border-radius: 14px;
    padding: 14px 16px;
    margin-top: 14px;
    background: var(--bb-surface);
}

/* "Apply to the rest" acts like the small button it is. */
.bb-apply-rest,
.bb-apply-rest:hover,
.bb-apply-rest:focus,
.bb-apply-rest:active {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid var(--bb-border);
    border-radius: 999px;
    background: var(--bb-surface);
    text-decoration: none;
    font-size: 0.85em;
}

/* A units-table price cell waiting on a choice shows a quiet pending
   mark instead of sitting empty under its header. */
.bb-unit-price:empty::before {
    content: "...";
    color: var(--bb-text);
    opacity: 0.45;
}

/* The opt-in "view product" arrow: a small, deliberate target beside the
   name. Muted until hovered so it never competes with choosing. */
.bb-view-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 4px;
    vertical-align: -3px;
    border: 1px solid var(--bb-border);
    border-radius: 50%;
    color: var(--bb-text);
    opacity: 0.65;
    text-decoration: none;
    transition: opacity 0.12s, border-color 0.12s, color 0.12s;
}

.bb-view-link:hover,
.bb-view-link:focus {
    opacity: 1;
    color: var(--bb-accent-deep, var(--bb-ink));
    border-color: currentColor;
    text-decoration: none;
}