/* ── Shared input style for all Bundle Boss number/text inputs ── */

.bundle-boss-qty-label input[type="number"],
.bundle-boss-min-qty,
.bundle-boss-max-qty,
.bundle-boss-tier-qty,
.bundle-boss-tier-pct,
#bundle-boss-stock-cap-wrap input[type="number"],
#bundle-boss-stock-cap-wrap input[type="text"] {
    border: 1.5px solid #c3c4c7 !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    background: #fff !important;
    color: #1e1e1e !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06) !important;
    transition: border-color 0.12s, box-shadow 0.12s !important;
    outline: none !important;
}

.bundle-boss-qty-label input[type="number"]:focus,
.bundle-boss-min-qty:focus,
.bundle-boss-max-qty:focus,
.bundle-boss-tier-qty:focus,
.bundle-boss-tier-pct:focus,
#bundle-boss-stock-cap-wrap input[type="number"]:focus,
#bundle-boss-stock-cap-wrap input[type="text"]:focus {
    border-color: #2271b1 !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04), 0 0 0 2px rgba(34,113,177,0.14) !important;
}

/* ── Item row ─────────────────────────────────────────────────── */

.bundle-boss-item-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.bundle-boss-item-handle {
    cursor: grab;
    color: #aaa;
    flex-shrink: 0;
}

.bundle-boss-item-handle:active {
    cursor: grabbing;
}

.bundle-boss-sort-placeholder {
    background: #e8f0fe;
    border: 2px dashed #2271b1;
    border-radius: 4px;
    visibility: visible !important;
}

.bundle-boss-item-row.ui-sortable-helper {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    opacity: 0.95;
}

.bundle-boss-select-wrap {
    flex: 1 1 220px;
    min-width: 160px;
}

.bundle-boss-select-wrap .select2-container {
    width: 100% !important;
}

/* Hide the original select once Select2 takes over */
.bundle-boss-product-select.select2-hidden-accessible {
    display: none !important;
}

.bundle-boss-qty-label {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 13px;
}

.bundle-boss-qty-label input[type="number"] {
    width: 56px;
}

.bundle-boss-remove-item {
    flex-shrink: 0;
    margin-left: auto;
}

/* ── Allowed-options section ──────────────────────────────────── */

.bundle-boss-allowed-variations-wrap {
    flex-basis: 100%;
    margin-top: 10px;
    padding: 10px 12px 12px;
    background: #f0f6ff;
    border: 1px solid #c5d9f0;
    border-radius: 4px;
}

/* Simple products: nothing to restrict, nothing to display-pick. */
.bundle-boss-allowed-variations-wrap.is-empty,
.bundle-boss-display-label.is-hidden {
    display: none;
}

/* ── Slim item row: product + Qty, the rest behind a per-row fold ── */
.bb-row-qty {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 13px;
}
.bb-row-qty label {
    font-weight: 600;
    color: #50575e;
}
.bb-row-qty input[type="number"] {
    width: 56px;
}
.bb-row-more {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #2271b1;
    font-size: 12px;
    line-height: 1.7;
    white-space: nowrap;
    cursor: pointer;
}
.bb-row-more:hover {
    background: #f0f6ff;
}
.bb-row-more.is-open {
    background: #e8f0fe;
}
/* caret, points down when closed and up when open */
.bb-row-more::after {
    content: "";
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-top: -2px;
    transition: transform 0.15s ease;
}
.bb-row-more.is-open::after {
    transform: rotate(-135deg);
}
/* Set the bin apart from the controls (a gap + divider) and flag it red on
   hover, so it is not mistaken for, or fat-fingered next to, "More options". */
.bundle-boss-item-row .bb-row-trash {
    flex-shrink: 0;
    margin-left: 16px;
    position: relative;
}
.bundle-boss-item-row .bb-row-trash::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 5px;
    bottom: 5px;
    width: 1px;
    background: #dcdcde;
}
.bundle-boss-item-row .bb-row-trash:hover {
    color: #d63638;
}
.bb-row-extra {
    flex-basis: 100%;
    margin: 8px 0 2px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
}
.bb-row-extra[hidden] {
    display: none;
}
.bb-extra-field {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}
.bb-row-extra .bundle-boss-allowed-variations-wrap {
    flex-basis: 100%;
    margin-top: 2px;
}

/* ── "More pricing options" fold on the Pricing tab ─────────────── */
.bundle-boss-pricing-more {
    border-top: 1px solid #f0f0f1;
}
.bundle-boss-pricing-more > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px;
    font-weight: 600;
    color: #2271b1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.bundle-boss-pricing-more > summary::-webkit-details-marker {
    display: none;
}
.bundle-boss-pricing-more > summary::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}
.bundle-boss-pricing-more[open] > summary::before {
    transform: rotate(45deg);
}

.bundle-boss-allowed-label {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    color: #1d4480;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bundle-boss-allowed-hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #3f6da8;
    font-size: 11px;
}

.bundle-boss-attr-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* ── Options offered: one quiet line per attribute, a checklist on
      demand (the approved mockup pattern; no floating dropdowns). ── */

.bb-attr-wrap { margin: 4px 0 8px; width: 100%; }
.bb-attr-line { display: flex; align-items: center; gap: 10px; }
.bb-attr-name { font-weight: 600; min-width: 56px; color: #1d2327; }
.bb-attr-sum { color: #646970; font-size: 12.5px; }
.bb-attr-sum.is-limited { color: #135e96; font-weight: 600; }
.bb-attr-change.button-link { color: #2271b1; text-decoration: none; }

.bb-attr-panel {
    border: 1px solid #dcdcde;
    border-radius: 6px;
    background: #fff;
    padding: 10px 12px;
    margin: 6px 0 4px;
    max-width: 640px;
}
.bb-attr-tools { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.bb-attr-tools .button-link { color: #2271b1; font-size: 12px; text-decoration: none; }
.bb-attr-search {
    padding: 4px 8px !important;
    border: 1px solid #8c8f94 !important;
    border-radius: 3px !important;
    width: 160px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}
.bb-checkgrid {
    display: grid !important;
    grid-template-columns: repeat( auto-fill, minmax( 128px, 1fr ) );
    gap: 4px 14px;
    max-height: 148px;
    overflow: auto;
    width: 100%;
    box-sizing: border-box;
}
.bb-checkgrid label {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    font-size: 12.5px !important;
    color: #1d2327 !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    cursor: pointer;
}
.bb-checkgrid input[type="checkbox"] { margin: 0 !important; }

/* ── Panel header (description + layout selector) ────────────── */

.bundle-boss-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 8px 12px 4px;
}

.bundle-boss-panel-header .description {
    flex: 1 1 340px;
    min-width: 0; /* let it shrink instead of overrunning the layout control */
    margin: 0;
    padding: 0;
}

.bundle-boss-layout-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* WC's .woocommerce_options_panel styles ALL labels as float:left; width:150px,
   which yanks "Layout:" out of this group and onto the description. Pin it back. */
.bundle-boss-layout-wrap label {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bundle-boss-layout-wrap .woocommerce-help-tip {
    float: none;
    margin: 0;
}

/* ── Display options, folded away on the simple path ─────────── */
.bundle-boss-items-intro {
    margin: 10px 12px 6px;
    padding: 0;
}
.bundle-boss-display-options {
    margin: 2px 12px 8px;
}
.bundle-boss-display-options > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    cursor: pointer;
    list-style: none;
    font-size: 12px;
    font-weight: 600;
    color: #2271b1;
    user-select: none;
}
.bundle-boss-display-options > summary::-webkit-details-marker {
    display: none;
}
.bundle-boss-display-options > summary::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}
.bundle-boss-display-options[open] > summary::before {
    transform: rotate(45deg);
}
/* Display options: a tidy settings list, one control per row, labels in a
   fixed column so every dropdown lines up at the same edge and width. */
.bundle-boss-display-options .bundle-boss-panel-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 2px 4px;
}
.bundle-boss-display-options .bundle-boss-layout-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.bundle-boss-display-options .bundle-boss-layout-wrap label {
    flex: 0 0 116px;
    white-space: nowrap;
}
.bundle-boss-display-options .bundle-boss-layout-wrap select {
    flex: 0 1 220px;
    max-width: 220px;
}

/* "Multiple items" and the Pro "Colour tiles" picker only do anything for a
   variable product bought in quantity. js/admin.js toggles bb-has-variable on
   the panel when one is present; keep these controls hidden otherwise, so a
   simple bundle is never shown options that do nothing for it. */
/* No variable product in the bundle: show the "variable only" controls dimmed
   and inert with a reason, rather than hidden, so they stay discoverable. */
#bundle_items_data:not(.bb-has-variable) .bb-needs-variable select,
#bundle_items_data:not(.bb-has-variable) .bb-needs-variable > label {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(0.35);
}
.bb-needs-variable-note {
    display: none;
    margin-left: 6px;
    font-size: 12px;
    font-style: italic;
    color: #8c8f94;
    white-space: nowrap;
}
#bundle_items_data:not(.bb-has-variable) .bb-needs-variable-note {
    display: inline;
}

/* ── Optional checkbox & display mode ────────────────────────── */

.bundle-boss-display-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    color: #50575e;
}

.bundle-boss-var-display {
    font-size: 12px;
    padding: 2px 20px 2px 6px !important;
    height: auto !important;
    min-height: 0 !important;
}

.bundle-boss-optional-label {
    display: flex !important;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}

/* ── Product search (Select2) ────────────────────────────────── */

.bundle-boss-product-select.select2-hidden-accessible {
    display: none !important;
}

/* ── Min / Max qty inputs ─────────────────────────────────────── */

.bundle-boss-qty-label {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 13px;
}

.bundle-boss-min-qty,
.bundle-boss-max-qty {
    width: 52px !important;
}

/* ── Tier rows ────────────────────────────────────────────────── */

.bundle-boss-tiers-heading {
    padding: 6px 12px 2px !important;
}

.bundle-boss-tiers-heading .description {
    display: block;
    margin-top: 2px;
}

.bundle-boss-tier-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 13px;
}

.bundle-boss-tier-qty {
    width: 56px !important;
}

.bundle-boss-tier-pct {
    width: 64px !important;
}

/* ── General tab: stock cap sub-fields ───────────────────────── */

#bundle-boss-stock-cap-wrap {
    border-left: 3px solid #e0e4ea;
    margin-left: 162px;
    padding-left: 10px;
    margin-bottom: 4px;
}

#bundle-boss-stock-cap-wrap .form-field label {
    width: 120px !important;
}

#bundle-boss-stock-cap-wrap input[type="number"] {
    width: 110px !important;
}

/* ── Tab icons ────────────────────────────────────────────────── */

#woocommerce-product-data ul.wc-tabs li.bundle_items_tab a::before {
    font-family: Dashicons;
    content: '\f174';
}
#woocommerce-product-data ul.wc-tabs li.bundle_pricing_tab a::before {
    font-family: Dashicons;
    content: '\f323'; /* price tag */
}
#woocommerce-product-data ul.wc-tabs li.bundle_promotions_tab a::before {
    font-family: Dashicons;
    content: '\f488'; /* megaphone */
}
#woocommerce-product-data ul.wc-tabs li.bundle_display_tab a::before {
    font-family: Dashicons;
    content: '\f472'; /* desktop screen */
}

/* AddOnBoss brand mark: the cauldron, our "this is ours" on the tab strip.
   A background image (not a Dashicon glyph), so content is emptied. */
#woocommerce-product-data ul.wc-tabs li.bundle_boss_options_options a::before {
    content: '';
    background: center / 15px 15px no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22%23fd4730%22%3E%3Ccircle%20cx%3D%229.4%22%20cy%3D%225.7%22%20r%3D%221.15%22%2F%3E%3Ccircle%20cx%3D%2213.1%22%20cy%3D%225.1%22%20r%3D%220.95%22%2F%3E%3Ccircle%20cx%3D%2211.2%22%20cy%3D%223.5%22%20r%3D%220.72%22%2F%3E%3Ccircle%20cx%3D%2214.7%22%20cy%3D%223.4%22%20r%3D%220.58%22%2F%3E%3Ccircle%20cx%3D%2212.5%22%20cy%3D%221.9%22%20r%3D%220.45%22%2F%3E%3Cpath%20d%3D%22M3.4%208.6C3.7%2013.8%205.6%2017.1%207.6%2018.2%209.2%2019.1%2014.8%2019.1%2016.4%2018.2%2018.4%2017.1%2020.3%2013.8%2020.6%208.6Z%22%2F%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%228.5%22%20rx%3D%228.7%22%20ry%3D%222.2%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M4.6%208.4C6.8%209.9%209%209.9%2012%208.4%2015%206.9%2017.2%206.9%2019.4%208.4%22%20fill%3D%22none%22%20stroke%3D%22%23c9351f%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8.2%2018.7%207.3%2020.8M12%2019.1%2012%2021.2M15.8%2018.7%2016.7%2020.8%22%20fill%3D%22none%22%20stroke%3D%22%23fd4730%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: -3px;
}

/* ── Sale Period datetime field (flatpickr) ───────────────────── */

.bb-datetime-field {
    align-items: flex-start !important;
}

.bb-datetime-field > label {
    margin-top: 6px;
}

.bb-datetime-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

.bb-datetime-input {
    border: 1.5px solid #c3c4c7 !important;
    border-radius: 6px !important;
    padding: 5px 9px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    background: #fff !important;
    color: #1e1e1e !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06) !important;
    transition: border-color 0.12s, box-shadow 0.12s !important;
    outline: none !important;
    height: auto !important;
    width: 220px !important;
    cursor: pointer;
}

.bb-datetime-input:focus {
    border-color: #2271b1 !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.04), 0 0 0 2px rgba(34,113,177,0.14) !important;
}

/* Tint flatpickr to the WP admin accent. */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #2271b1;
    border-color: #2271b1;
}

.bb-datetime-wrap .description {
    flex-basis: 100%;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    color: #646970;
}

/* ── Builder: choice slot rows ────────────────────────────────── */

.bundle-boss-choice-row {
    /* Accent as an inset shadow — a 3px border-left + border-radius leaves
       a white sliver at the rounded corners. */
    box-shadow: inset 3px 0 0 #7c3aed;
}

/* Collapsible slots: the caret in the header folds the slot down to its
   summary line (badge, mode, name, qty); the config + personalisation body
   hides, so a bundle with several slots stays scannable. */
.bb-slot-collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    color: #50575e;
    cursor: pointer;
}
.bb-slot-collapse:hover {
    background: #f0f0f1;
    border-color: #dcdcde;
    color: #1d2327;
}
.bb-slot-collapse:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 0;
}
.bb-slot-collapse-caret {
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 20px;
    transition: transform 0.15s ease;
}
.bundle-boss-choice-row.bb-collapsed .bb-slot-collapse-caret {
    transform: rotate(-90deg);
}
.bundle-boss-choice-row.bb-collapsed .bundle-boss-choice-config,
.bundle-boss-choice-row.bb-collapsed .bb-personalisation-admin,
.bundle-boss-choice-row.bb-collapsed .bb-qrow,
.bundle-boss-choice-row.bb-collapsed .bb-qedit,
.bundle-boss-choice-row.bb-collapsed .bb-row-extra {
    display: none !important;
}
/* The list's own toolbar: controls that act on the rows, above the rows. Stays
   invisible when empty (a free build has nothing to put here) so it never
   leaves a gap. */
.bb-items-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    min-height: 0;
}
.bb-items-toolbar:empty {
    display: none;
}
/* A view control, not an action: a link, never the weight of "+ Add Product".
   But a link you can SEE, in WordPress's own link blue. The first attempt made
   it 12px grey and Stefanos could not find it, which is its own kind of broken:
   a control nobody spots may as well not ship.

   It carries the same caret the slot headers use, so it reads as the all-slots
   version of a control you already know rather than a stray link. */
.bb-items-toolbar .bundle-boss-collapse-all {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0 0 8px;
    padding: 2px 2px 2px 4px;
    font-size: 13px;
    line-height: 1.4;
    color: #2271b1;
    text-decoration: none;
    border-radius: 2px;
}
.bb-items-toolbar .bundle-boss-collapse-all:hover,
.bb-items-toolbar .bundle-boss-collapse-all:focus {
    color: #135e96;
    background: #f0f6fc;
}
.bb-items-toolbar .bundle-boss-collapse-all .bb-collapse-all-text {
    text-decoration: underline;
    text-underline-offset: 2px;
}
.bb-collapse-all-caret {
    font-size: 16px;
    width: 16px;
    height: 16px;
    transition: transform 0.15s ease;
}
/* Points DOWN to collapse (fold them away), UP to expand: the same direction
   language as the per-slot carets, which rotate when their slot folds. */
.bundle-boss-collapse-all[data-state="expand"] .bb-collapse-all-caret {
    transform: rotate(180deg);
}
.bundle-boss-collapse-all {
    margin-left: 4px;
}

.bundle-boss-choice-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 2px 9px;
    background: #f3ecfe;
    color: #6d28d9;
    border: 1px solid #ddd0fb;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Build-a-box: the Pick one / Build a box selector + box-only fields, shown
   only when the slot is in box mode. */
.bundle-boss-select-mode-wrap {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 2px;
}

.bundle-boss-select-mode {
    height: 30px;
}

/* Box-only fields hide unless the slot is in build-a-box mode. The :not()
   plus !important is deliberate: the generic ".bundle-boss-choice-extra label"
   rule lower down forces inline-flex !important on every label, which would
   otherwise keep "Max per product" and "Max different products" visible even
   for a pick-one slot. */
.bundle-boss-choice-row:not(.bb-mode-box) .bb-box-only {
    display: none !important;
}

.bundle-boss-choice-row.bb-mode-box .bb-box-only {
    display: inline-flex;
}

/* A box reads as a box: tint the accent green so it's distinct from pick-one. */
.bundle-boss-choice-row.bb-mode-box {
    box-shadow: inset 3px 0 0 #2f855a;
}

/* Quantity-break tiers stack as a labelled list. Without this they inherit the
   generic .bb-box-only inline-flex and run together on one line, which reads as
   a repeated "items … or more … %" fragment for every product. */
.bundle-boss-choice-row.bb-mode-box .bb-box-breaks {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
}

.bundle-boss-box-breaks-label {
    font-size: 12px;
    font-weight: 600;
    color: #50575e;
}

.bb-box-break-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #50575e;
}

.bundle-boss-box-break-min,
.bundle-boss-box-break-pct {
    width: 64px !important;
}

.bundle-boss-box-break-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.bundle-boss-remove-box-break {
    background: none;
    border: 0;
    color: #b32d2e;
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.bundle-boss-remove-box-break:hover {
    color: #d63638;
}

.bundle-boss-add-box-break {
    align-self: flex-start;
    margin-top: 2px;
}

/* Size / pack options repeater (build-a-box): a label + flat price + item
   count per row. Mirrors the quantity-break rows. */
.bundle-boss-choice-row.bb-mode-box .bb-box-sizes-admin {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
}

.bundle-boss-box-sizes-label {
    font-size: 12px;
    font-weight: 600;
    color: #50575e;
}

.bundle-boss-box-size-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.bb-box-size-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #50575e;
}

.bundle-boss-box-size-label {
    width: 150px !important;
}

.bundle-boss-box-size-price,
.bundle-boss-box-size-count {
    width: 72px !important;
}

.bundle-boss-remove-box-size {
    background: none;
    border: 0;
    color: #b32d2e;
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.bundle-boss-remove-box-size:hover {
    color: #d63638;
}

.bundle-boss-add-box-size {
    align-self: flex-start;
    margin-top: 2px;
}

.bundle-boss-slot-label-wrap {
    flex: 1;
    min-width: 160px;
}

.bundle-boss-slot-label {
    width: 100% !important;
}

.bundle-boss-choice-config {
    flex-basis: 100%;
    margin-top: 10px;
    padding: 10px 12px 12px;
    background: #faf7ff;
    border: 1px solid #ddd0fb;
    border-radius: 4px;
}

.bundle-boss-choice-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bundle-boss-choice-extra {
    /* Stacked full-width sections, the mockup's rhythm. Two columns turned
       into swiss cheese whenever box-only sections hid on a pick-one slot. */
    display: block;
    font-size: 12px;
    color: #50575e;
}

/* Declutter the choice-slot config: Categories (products) spans the row up
   top; the wide pricing blocks (Sizes, Quantity breaks) span the row BELOW the
   paired compact fields (Slot discount, Max per product, Max different, Show
   options as). `order` reorders visually without moving the markup, so the
   repeaters and box-only show/hide stay intact. */
.bundle-boss-choice-extra > .bb-choice-full {
    grid-column: 1 / -1;
    order: -1;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.bundle-boss-choice-extra > .bb-choice-full .select2-container {
    flex: 1;
    min-width: 0;
}
.bundle-boss-choice-extra > .bb-box-sizes-admin {
    grid-column: 1 / -1;
    order: 10;
}
.bundle-boss-choice-extra > .bb-box-breaks {
    grid-column: 1 / -1;
    order: 11;
}

/* Constrain the compact number inputs so paired cells line up. */
.bundle-boss-box-product-max,
.bundle-boss-box-variety-max {
    width: 80px !important;
}

@media (max-width: 782px) {
    .bundle-boss-choice-extra {
        grid-template-columns: 1fr;
    }
}

/* Advanced fold: the rarely-touched knobs (per-item limits, option display)
   tucked behind a caret so the default view is just Products + Pricing. */
.bundle-boss-choice-extra > .bb-choice-advanced {
    grid-column: 1 / -1;
    order: 20;
    margin-top: 2px;
}
.bb-choice-advanced > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 12px;
    font-weight: 600;
    color: #2271b1;
    padding: 4px 8px 4px 6px;
    border-radius: 4px;
    transition: background 0.12s ease;
}
.bb-choice-advanced > summary:hover {
    background: #f0f6ff;
}
.bb-choice-advanced > summary::-webkit-details-marker {
    display: none;
}
.bb-choice-advanced > summary::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}
.bb-choice-advanced[open] > summary::before {
    transform: rotate(45deg);
}
/* The slot config flows as stacked full-width sections, the mockup's own
   rhythm. Columns turned into swiss cheese the moment box-only sections
   hid on a pick-one slot (his full-width screenshot, 2026-07-18). */
.bundle-boss-choice-extra > * { margin: 0 0 16px; }
.bundle-boss-choice-extra > *:last-child { margin-bottom: 0; }
.bb-choice-advanced-grid {
    display: block;
    margin: 12px 0 0;
    padding-left: 2px;
}
.bb-choice-advanced-grid > * { margin: 0 0 16px; }
.bb-choice-advanced-grid > *:last-child { margin-bottom: 0; }
/* A label field keeps its control beside its words. */
.bb-choice-advanced-grid > label {
    display: flex;
    align-items: center;
    gap: 6px;
}
.bb-choice-advanced-grid > label:not(.bb-box-only) {
    flex-basis: 100%;
}

.bundle-boss-choice-discount {
    width: 80px !important;
}

/* ── Builder: compatibility rules ─────────────────────────────── */

#bundle-boss-compat {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e5e5e5;
}

/* A saved rule rests as its sentence; the open one is an aligned grid on
   a fixed keyword rail. One rule open at a time, like the Promotions fold. */
.bundle-boss-rule-row {
    padding: 0;
    margin: 0 12px 8px;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    font-size: 13px;
    overflow: hidden;
}

.bb-rule-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
}
.bb-rule-toggle {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    color: #787c82;
    line-height: 1;
}
.bundle-boss-rule-row:not(.bb-rule-collapsed) .bb-rule-toggle .dashicons {
    transform: rotate(180deg);
}
.bb-rule-sentence {
    font-size: 13.5px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bb-rule-modeword {
    color: #646970;
    font-size: 12.5px;
    margin-left: auto;
    flex-shrink: 0;
}

.bundle-boss-rule-row.bb-rule-collapsed .bb-rule-main { display: none; }

.bb-rule-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px 14px;
    border-top: 1px solid #f0f0f1;
}

.bb-rule-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* The rail: a fixed-width keyword column aligns every line's controls. */
.bb-rule-kw {
    flex-shrink: 0;
    width: 92px;
    text-align: right;
    font-size: 10.5px;
    font-weight: 700;
    color: #6d28d9;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.bb-rule-kw-quiet { color: #646970; }

.bb-rule-conn {
    color: #50575e;
}

.bundle-boss-rule-slot,
.bundle-boss-rule-action {
    max-width: 190px;
}

.bb-rule-qty input[type="number"] {
    width: 64px;
}

.bb-rule-hint {
    margin: -4px 0 0 102px;
    color: #646970;
    font-size: 12px;
}

#bundle-boss-compat > p:last-of-type,
#bundle-boss-compat .bundle-boss-compat-empty {
    margin-left: 12px;
}

#bundle-boss-add-rule {
    margin-left: 12px;
}

/* ── Neutralise WC panel label styles inside Bundle Boss boxes ───
   The options panel floats every label into a 150px column, which
   threw our choice-config and rule-row controls out of their boxes. */

.bundle-boss-choice-config label,
.bundle-boss-choice-extra label,
.bundle-boss-rule-row label,
.bundle-boss-item-row label {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

.bundle-boss-choice-config select,
.bundle-boss-choice-extra select {
    width: auto !important;
    float: none !important;
}

/* Help tips: hug their label, never float into the panel column. */
.bundle-boss-item-row .woocommerce-help-tip,
.bundle-boss-choice-config .woocommerce-help-tip,
#bundle-boss-compat .woocommerce-help-tip,
#bundle_items_data .woocommerce-help-tip {
    float: none !important;
    margin: 0 0 0 3px !important;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Row delete: shared trash icon button (items, slots, tiers, rules). */

.bb-row-trash {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #8c8f94;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.bb-row-trash .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.bb-row-trash:hover {
    background: #fcebec;
    color: #d63638;
}

.bb-row-trash:focus-visible {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

/* ── Choice slot image controls: their own breathing room ──────────── */
.bundle-boss-slot-image {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed #e0e0e6;
}
.bundle-boss-slot-image-label {
	font-weight: 600;
	color: #50575e;
}
.bundle-boss-slot-image-preview {
	display: none;
	width: 40px;
	height: 40px;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	overflow: hidden;
	background: #f6f7f7;
}
.bundle-boss-slot-image-preview.has-image {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.bundle-boss-slot-image-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bundle-boss-slot-image-remove {
	color: #b32d2e;
}
.bundle-boss-slot-hero {
	margin-left: auto;
	color: #50575e;
}
.bundle-boss-slot-image-hide {
	color: #50575e;
}

/* the remove control is an x on the thumbnail's corner */
.bundle-boss-slot-image-preview { position: relative; }
.bundle-boss-slot-image-remove {
	position: absolute;
	top: 1px;
	right: 1px;
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 20, 20, 30, 0.72 );
	color: #fff;
	font-size: 13px;
	line-height: 15px;
	text-align: center;
	cursor: pointer;
}
.bundle-boss-slot-image-remove:hover {
	background: #b32d2e;
}

/* ── Personalisation field repeater (item rows) ────────────────────── */
.bb-personalisation-admin {
	flex-basis: 100%;
	margin: 8px 0 2px;
	border-top: 1px dashed #dcdcde;
	padding-top: 8px;
}
.bb-personalisation-summary {
	cursor: pointer;
	font-weight: 600;
	color: #2c3338;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	list-style: none;
	padding: 6px 12px 6px 8px;
	border: 1px solid #dcd3f7;
	border-radius: 5px;
	background: #faf7ff;
	width: fit-content;
	transition: background 0.12s ease, border-color 0.12s ease;
}
.bb-personalisation-summary:hover {
	background: #f1eaff;
	border-color: #c4b3f0;
}
/* Disclosure caret so it reads as an expandable control, not a heading. */
.bb-personalisation-summary::before {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid #7c3aed;
	border-bottom: 2px solid #7c3aed;
	transform: rotate(-45deg);
	margin-right: 2px;
	transition: transform 0.15s ease;
}
.bb-personalisation-admin[open] .bb-personalisation-summary::before {
	transform: rotate(45deg);
}
.bb-personalisation-summary::-webkit-details-marker { display: none; }
.bb-personalisation-summary .dashicons { color: #7c3aed; font-size: 17px; width: 17px; height: 17px; }
.bb-personalisation-count { color: #646970; font-weight: 400; }

.bb-addon-defs { margin: 10px 0; display: grid; gap: 8px; }

/* Whole-order personalisation: the seller's "Section title" field. WooCommerce's
   options-panel base styling floats EVERY <label> into a left gutter with a
   negative margin, which stranded this label's text and help tip out to the side.
   Force it back to a normal stacked field: label (with its inline help tip) above
   a capped-width input. */
.bb-order-addons-title-field { margin: 0 0 14px; overflow: visible; }
.bb-order-addons-title-field > label {
    display: block !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    font-weight: 600;
}
.bb-order-addons-title-field > label .woocommerce-help-tip {
    float: none !important;
    margin: 0 0 0 6px;
    font-weight: 400;
}
.bb-order-addons-title-field > .widefat {
    display: block;
    float: none !important;
    width: 100% !important;
    max-width: 440px;
    margin: 0 !important;
}

/* Each field as a calm card that rests as one line (the ACF pattern):
   type pill, name, a live summary, caret and a faint trash. Opening it
   reveals the editor beneath the same line. */
.bb-addon-row {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	margin-bottom: 6px;
	overflow: hidden;
}
.bb-addon-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	cursor: pointer;
}
.bb-addon-typepill {
	background: #f0f0f1;
	border: 1px solid #dcdcde;
	color: #646970;
	font-size: 11px;
	border-radius: 9px;
	padding: 1px 8px;
	flex-shrink: 0;
}
.bb-addon-headlabel { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-addon-sum { color: #646970; font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-addon-toggle { border: 0; background: none; padding: 0; cursor: pointer; color: #787c82; line-height: 1; margin-left: auto; }
.bb-addon-row:not(.bb-addon-collapsed) .bb-addon-toggle .dashicons { transform: rotate(180deg); }
.bb-addon-collapsed .bb-addon-main { display: none; }
.bb-addon-handle { color: #c3c4c7; cursor: grab; }
.bb-addon-handle:active { cursor: grabbing; }
.bb-addon-row-placeholder { border: 2px dashed #c3a0ff; background: #faf7ff; border-radius: 8px; visibility: visible !important; }
.bb-addon-main { display: grid; gap: 12px; min-width: 0; padding: 12px; border-top: 1px solid #f0f0f1; }
.bb-addon-settings { display: grid; gap: 12px; }
.bb-fee-join { display: inline-flex; align-items: center; border: 1px solid #c3c4c7; border-radius: 6px; overflow: hidden; background: #fff; }
.bb-fee-join .bb-fee-sym { padding: 4px 9px; background: #f6f7f7; color: #646970; border-right: 1px solid #dcdcde; }
.bb-fee-join input.bb-addon-fee-input { border: 0 !important; border-radius: 0 !important; width: 70px; text-align: right; box-shadow: none !important; min-height: 28px !important; }
.bb-fee-join select.bb-addon-fee-mode { border: 0 !important; border-left: 1px solid #dcdcde !important; border-radius: 0 !important; min-height: 28px !important; box-shadow: none !important; }
.bb-addon-opthead {
	display: grid;
	grid-template-columns: 1fr 96px 24px;
	gap: 8px;
	font-size: 10.5px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: #646970;
	padding: 0 2px 2px;
}
.bb-addon-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bb-addon-flabel { flex: 1 1 220px; min-width: 140px; }
.bb-addon-ftype { flex: 0 0 auto; min-width: 120px; }
.bb-addon-settings { font-size: 12px; color: #50575e; }
.bb-addon-settings > * { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.bb-addon-req-wrap { gap: 3px; }
.bb-addon-fee-input { width: 70px; }
.bb-addon-maxlen { width: 60px; }
.bb-addon-maxsize { width: 60px; }

/* Hide the per-unit/once choice unless the item can hold more than one. */
.bb-personalisation-admin:not(.is-multi) .bb-addon-scope-wrap { display: none !important; }

/* Options list — replaces the old pipe-delimited textarea. */
.bb-addon-options-block {
	background: #f6f7f7;
	border: 1px solid #e8e8e8;
	border-radius: 5px;
	padding: 8px 10px;
}
.bb-addon-options-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #646970; margin-bottom: 6px; }
.bb-addon-options-list { display: grid; gap: 5px; margin-bottom: 6px; }
.bb-addon-option { display: flex; align-items: center; gap: 6px; }
.bb-addon-opt-label { flex: 1 1 auto; }
.bb-addon-opt-fee-wrap { font-size: 12px; color: #50575e; display: inline-flex; align-items: center; gap: 3px; }
.bb-addon-opt-fee { width: 70px; }
.bb-addon-option-remove { border: 0; background: none; cursor: pointer; color: #b32d2e; font-size: 18px; line-height: 1; padding: 0 4px; }
.bb-addon-option-add { font-size: 12px; }

.bb-addon-add-wrap { display: inline-block; margin-top: 4px; }
/* The add control reads as the A family's tinted ghost; picking a preset
   from it is the click that adds the field. It stays a select, so the
   native chevron keeps its room on the right. */
.bb-addon-add {
	max-width: 220px;
	border: none !important;
	border-radius: 7px !important;
	background-color: rgba(34, 113, 177, 0.08);
	color: #135e96 !important;
	font-weight: 600;
	padding: 4px 24px 4px 12px !important;
}
.bb-addon-add:hover { background-color: rgba(34, 113, 177, 0.14); }
.bb-addon-row .bb-addon-remove { flex: 0 0 auto; border: 0; background: none; color: #a7aaad; cursor: pointer; }
.bb-addon-row .bb-addon-remove:hover { color: #d63638; }
/* The Required tick as the same pill switch the rest of the editor speaks. */
.bb-addon-req-wrap input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 34px;
	height: 18px;
	border-radius: 999px;
	background: #c3c4c7;
	border: 0 !important;
	position: relative;
	margin: 0 !important;
	cursor: pointer;
	transition: background 0.15s ease;
	flex: none;
	box-shadow: none !important;
}
.bb-addon-req-wrap input[type="checkbox"]::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	transition: left 0.15s ease;
}
.bb-addon-req-wrap input[type="checkbox"]:checked { background: #00a32a; }
.bb-addon-req-wrap input[type="checkbox"]:checked::after { left: 18px; }
.bb-addon-req-wrap input[type="checkbox"]:checked::before { content: none; }

/* ── Help tab: links to the online guides ─────────────────────── */
#woocommerce-product-data ul.wc-tabs li.bundle_help_tab a::before {
    font-family: Dashicons;
    content: '\f223';
}
.bundle-boss-help-links {
    margin: 6px 0 2px;
    padding: 0 12px 0 30px;
    list-style: disc;
    font-size: 13px;
}
.bundle-boss-help-links li { margin: 6px 0; }
.bundle-boss-help-cta { padding: 6px 12px 12px; margin: 0; }

/* Sizes and quantity breaks are mutually exclusive ways to price a box. Once
   the slot uses sizes (JS toggles .bb-hide-breaks), keep the "Quantity breaks"
   label but swap its controls for a short note — so it reads as "not
   applicable" instead of a mysteriously missing button. */
.bundle-boss-box-breaks-na {
    display: none;
    font-size: 12px;
    font-style: italic;
    color: #787c82;
}
/* ...and dim the controls (visible but not interactive) rather than hiding
   them, so the merchant still discovers that quantity breaks exist. */
.bundle-boss-choice-row.bb-hide-breaks .bundle-boss-box-break-rows,
.bundle-boss-choice-row.bb-hide-breaks .bundle-boss-add-box-break {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(0.35);
}
.bundle-boss-choice-row.bb-hide-breaks .bundle-boss-box-breaks-label {
    color: #8c8f94;
}
.bundle-boss-choice-row.bb-hide-breaks .bundle-boss-box-breaks-na {
    display: inline;
}

/* Slot discount is a real lever for pick-one slots and plain boxes, but sizes
   set one flat price — so when sizes are active, dim it (visible, not gone) and
   swap in a short note, the same treatment as quantity breaks above. */
.bb-choice-discount-na {
    display: none;
    font-size: 11px;
    font-style: italic;
    color: #787c82;
}
/* Slot discount now stands alone up top (its 2-up partner moved to Advanced) —
   span the row like Categories so the label + inert note never crowd. */
.bundle-boss-choice-extra > .bb-choice-discount-field {
    grid-column: 1 / -1;
}
.bundle-boss-choice-row.bb-hide-breaks .bb-choice-discount-field {
    color: #8c8f94;
}
.bundle-boss-choice-row.bb-hide-breaks .bb-choice-discount-field .bundle-boss-choice-discount {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(0.35);
}
.bundle-boss-choice-row.bb-hide-breaks .bb-choice-discount-na {
    display: inline;
}
/* Slot image, folded into Advanced: span the row and lay the label + button +
   its two checkboxes out in an even, wrapping row — no far-right float, and a
   subtle full-width rule (not the old dashed sub-divider) to set it apart. */
.bb-choice-advanced-grid > .bundle-boss-slot-image {
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f2;
}
.bb-choice-advanced-grid > .bundle-boss-slot-image .bundle-boss-slot-hero {
    margin-left: 0;
}

.bb-box-size-currency {
    font-size: 12px;
    color: #50575e;
}

/* ── Build-a-box: default size rule, per-product overrides, hide-price toggle ── */
.bundle-boss-choice-row.bb-mode-box .bb-box-sizerule {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
}
.bb-box-varsize { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.bb-box-varsize[hidden] { display: none !important; }
.bb-box-single-rule[hidden], .bb-box-attr-rules[hidden] { display: none !important; }
/* One rule row per option type (multi-attribute pools). */
.bb-box-attr-rows { display: flex; flex-direction: column; gap: 6px; }
.bb-box-attr-rule { display: flex; align-items: center; gap: 8px; }
.bb-box-attr-name { min-width: 90px; font-size: 12px; color: #50575e; }
.bb-box-attr-rule-sel { max-width: 220px; }
.bb-box-field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.bb-box-field-label { font-size: 12px; font-weight: 600; }
.bb-box-sizerule-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bb-box-sizerule-row select { max-width: 220px; }

/* Two-state toggle (Show | Hide) */
.bb-toggle { display: inline-flex; border: 1px solid #c3c4c7; border-radius: 6px; overflow: hidden; background: #fff; width: max-content; }
.bb-toggle-opt { appearance: none; border: 0; border-right: 1px solid #dcdcde; background: #fff; color: #1d2327; font: inherit; font-size: 12.5px; padding: 6px 14px; cursor: pointer; }
.bb-toggle-opt:last-of-type { border-right: 0; }
.bb-toggle-opt.is-on { background: #2271b1; color: #fff; font-weight: 600; }

/* Per-product size overrides */
.bb-box-overrides { margin-top: 2px; }
.bb-box-ovr-rows { display: flex; flex-direction: column; gap: 8px; }
.bb-box-ovr-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bb-box-ovr-uses { color: #646970; font-size: 12px; }
.bb-box-ovr-product { min-width: 210px; }
.bb-box-ovr-value { max-width: 130px; }
.bb-box-ovr-rm { width: 26px; height: 26px; border: 1px solid #dcdcde; border-radius: 5px; background: #fff; color: #8a8f98; cursor: pointer; line-height: 1; }
.bundle-boss-add-box-override { margin-top: 2px; align-self: flex-start; }

/* The size-rule block is one full-width row of the choice-extra GRID (like
   Sizes at order 10 and Quantity breaks at 11), slotted just before them.
   A flex-basis is inert on a grid item: without the column span it sat in one
   ~half-width track, indenting its label and wrapping the override row. */
.bundle-boss-choice-extra > .bb-box-sizerule {
    grid-column: 1 / -1;
    order: 9;
}

/* Option restrictions live on pick-one slots only; boxes have their own
   per-type rules. Full row: the pickers wrap side by side inside it. */
.bundle-boss-choice-row.bb-mode-box .bb-choice-allowed {
    display: none;
}

.bb-choice-allowed {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.bb-choice-allowed .bb-box-field-label {
    flex-basis: 100%;
}

/* =================================================================
   Slot options — the Option sets page + the product Options tab.
   The first screens wearing the BundleBoss admin design language:
   coral (#fd4730) for IDENTITY only; actions stay native WP buttons.
   ================================================================= */

.bb-optsets { max-width: 1320px; }
.bb-optsets .bb-lede { color: #646970; max-width: 78ch; margin: 0 0 16px; }

.bb-optsets-head { display: flex; align-items: center; gap: 12px; padding: 18px 0 14px; }
.bb-brandmark { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: #1c1530; letter-spacing: -0.2px; }
.bb-brand-mark { width: 16px; height: 16px; border-radius: 4px; display: inline-block; flex-shrink: 0; }
.bb-brandmark .bb-brand-mark { width: 18px; height: 18px; border-radius: 5px; }
.bb-crumb { color: #646970; font-size: 14px; }
.bb-head-spacer { flex: 1; }

/* --- set cards --- */
.bb-setgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.bb-setcard { background: #fff; border: 1px solid #dcdcde; border-radius: 10px; padding: 16px 16px 12px; transition: box-shadow 0.15s ease; }
.bb-setcard:hover { box-shadow: 0 3px 14px rgba(28, 21, 48, 0.09); }
.bb-setcard h3 { margin: 0 0 2px; font-size: 15px; }
.bb-setcard h3 a { text-decoration: none; color: #1d2327; }
.bb-setmeta { color: #646970; font-size: 12.5px; margin-bottom: 12px; }
.bb-chiprow { display: flex; flex-wrap: wrap; gap: 7px; }
.bb-opt-chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #d9dce1; border-radius: 16px; padding: 3px 11px; background: #fff; font-size: 12.5px; line-height: 1.4; }
.bb-opt-chip b { font-weight: 600; }
.bb-opt-chip .amount { font-size: inherit; }
.bb-opt-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); flex-shrink: 0; }
.bb-opt-more { border-style: dashed; color: #646970; }
/* The "+N" chip is a button now: it expands the row to show every option. */
button.bb-opt-more { cursor: pointer; font-family: inherit; }
button.bb-opt-more:hover,
button.bb-opt-more:focus { border-color: #fd4730; color: #d4381f; outline: none; }
.bb-chiprow .bb-chip-overflow { display: none; }
.bb-chiprow.is-expanded .bb-chip-overflow { display: inline-flex; }
.bb-setfoot { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #f1f2f4; font-size: 12.5px; }
.bb-setacts { display: flex; gap: 12px; margin-left: auto; }
.bb-setacts a { text-decoration: none; color: #646970; }
.bb-setacts a:hover { color: #1d2327; }
.bb-setacts .bb-del:hover { color: #a02222; }

/* Coral primary button so the money action (Attach, Add) carries the brand,
   not WP blue. A DEEP coral (white text hits ~4.8:1, readable) with rounded
   corners and no WP button chrome (text-shadow/box-shadow), so it reads as a
   clean pill, not a sharp grey-boned rectangle. */
.bb-optsets .button.bb-cta,
.bb-optsets .button.bb-cta:visited {
	background: #d8321f;
	border: 1px solid #b8291a;
	color: #fff;
	font-weight: 600;
	border-radius: 8px;
	padding: 0 16px;
	text-shadow: none;
	box-shadow: none;
}
.bb-optsets .button.bb-cta:hover,
.bb-optsets .button.bb-cta:focus {
	background: #b8291a;
	border-color: #9e2216;
	color: #fff;
	box-shadow: none;
}

/* --- first-run empty state --- */
.bb-optsets-empty { border: 1px dashed #d5d8dd; border-radius: 12px; padding: 26px 22px 22px; margin-bottom: 6px; background: linear-gradient(180deg, #fff5f3, #fff 72%); }
.bb-optsets-empty h2 { margin: 0 0 4px; font-size: 18px; }
.bb-optsets-empty p { margin: 0; color: #646970; max-width: 62ch; }

/* --- starter shelf --- */
.bb-shelf { margin-top: 26px; }
.bb-shelf h2 { font-size: 15px; margin: 0 0 4px; }
.bb-shelfrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.bb-starter { display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, #fff, #fbfbfc); border: 1px solid #e2e4e8; border-radius: 10px; padding: 13px 14px; }
.bb-starter h4 { margin: 0; font-size: 13.5px; }
.bb-starter-purpose { font-size: 11.5px; color: #646970; margin-top: -4px; }
.bb-mini { display: flex; gap: 4px; flex-wrap: wrap; min-height: 16px; }
.bb-mini-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); }
.bb-mini-txt { font-size: 11px; color: #646970; border: 1px solid #dfe2e6; border-radius: 9px; padding: 1px 7px; }
.bb-starter-act { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.bb-added { display: inline-flex; align-items: center; gap: 6px; color: #1a7f37; font-weight: 600; }
.bb-added::before { content: "\2713"; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #edfaef; border: 1px solid #b6e7c2; font-size: 10px; }
.bb-added-edit { color: #646970; text-decoration: none; }
.bb-added-edit:hover { color: #1d2327; }
.bb-shelf-scratch { margin: 14px 0 0; color: #646970; font-size: 13px; }
.bb-shelf-scratch a { color: #d4381f; font-weight: 600; text-decoration: none; }
.bb-shelf-scratch a:hover { text-decoration: underline; }

/* Once the shop has its own sets, the shelf steps back into a disclosure. */
.bb-shelf-disc { border: 1px solid #dcdcde; border-radius: 10px; background: #fff; }
.bb-shelf-sum { cursor: pointer; padding: 12px 15px; font-weight: 600; font-size: 13.5px; list-style: none; }
.bb-shelf-sum::-webkit-details-marker { display: none; }
.bb-shelf-sum::before { content: "\25B8"; color: #646970; margin-right: 8px; display: inline-block; transition: transform 0.15s ease; }
.bb-shelf-disc[open] .bb-shelf-sum::before { transform: rotate(90deg); }
.bb-shelf-body { padding: 0 15px 16px; }

/* Migration tools: a quiet footer, not a section shouting as loud as onboarding. */
.bb-sets-io { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; padding-top: 16px; border-top: 1px solid #f1f2f4; color: #646970; font-size: 12.5px; }
.bb-sets-io-lead { font-weight: 600; }
.bb-sets-import-form { display: inline-flex; align-items: center; gap: 8px; }

/* Visible keyboard focus on the landing controls. */
.bb-optsets a:focus-visible, .bb-optsets button:focus-visible, .bb-optsets summary:focus-visible { outline: 2px solid #fd4730; outline-offset: 2px; }

/* --- the editor --- */
.bb-editor { background: #fff; border: 1px solid #dcdcde; border-radius: 12px; overflow: hidden; max-width: 840px; }
.bb-edhead { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #dcdcde; background: #fcfcfd; }
.bb-editor .bb-edname { font-weight: 650; font-size: 16px; border: 1px solid #dcdcde; border-radius: 8px; background: #fff; width: 300px; padding: 8px 12px; box-shadow: none; }
.bb-editor .bb-edname:focus { border-color: #fd4730; box-shadow: none; outline: none; }
.bb-edname:focus { outline: none; border-bottom-color: #fd4730; box-shadow: none; }
.bb-edlive { margin-left: auto; color: #646970; font-size: 12.5px; }
.bb-edrows { padding: 8px 18px; }
.bb-edrow { display: grid; grid-template-columns: 22px 66px 1fr 150px auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f3f4f6; }
.bb-opt-grip { color: #b6bac0; cursor: grab; font-size: 15px; text-align: center; }
.bb-swpair { display: flex; align-items: center; gap: 5px; }
/* flex:none so the two bubbles never shrink to fit and turn oval; the row column
   above is sized to hold them at full width. */
.bb-swbub { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #d5d8dd; cursor: pointer; overflow: hidden; }
.bb-swbub.is-none { background: repeating-conic-gradient(#eceef0 0 25%, #fff 0 50%) 0 0/8px 8px; }
.bb-swbub .bb-swpick,
.bb-swbub .bb-swpick2 { position: absolute; inset: -6px; opacity: 0; cursor: pointer; }
/* The optional second colour reads as a smaller, secondary bubble; a tiny
   clear control appears only once it holds a colour. */
.bb-swbub2 { width: 19px; height: 19px; overflow: visible; }
.bb-swbub2.is-none { opacity: .6; }
.bb-sw2-clear { display: none; position: absolute; top: -7px; right: -7px; z-index: 2; width: 15px; height: 15px; padding: 0; border: 1px solid #d5d8dd; border-radius: 50%; background: #fff; color: #6b7280; font-size: 12px; line-height: 1; cursor: pointer; align-items: center; justify-content: center; }
.bb-swbub2:not(.is-none) .bb-sw2-clear { display: flex; }
/* The optional per-option note: a quiet full-width line under the row. */
.bb-ednote { grid-column: 1 / -1; width: 100%; font-size: 12.5px; color: #4b5563; }
.bb-ednote::placeholder { color: #a3a9b3; font-style: italic; }
.bb-edrow input[type="text"] { border: 1px solid transparent; border-radius: 6px; padding: 6px 8px; box-shadow: none; }
.bb-edrow input[type="text"]:hover { border-color: #dcdcde; }
.bb-edrow input[type="text"]:focus { border-color: #fd4730; box-shadow: none; outline: none; }
/* The bump column reads as a COLUMN: always-boxed quiet inputs, not
   floating placeholder text (twelve borderless rows looked scattered). */
.bb-edrow .bb-edbump { text-align: right; width: 100%; border: 1px solid #dcdcde; background: #fbfbfc; border-radius: 6px; }
.bb-edrow .bb-edbump:hover { border-color: #c6c9ce; }
.bb-edrow .bb-edbump:focus { border-color: #fd4730; background: #fff; }
.bb-edrow .bb-edbump::placeholder { color: #a7aaad; font-size: 12px; }
.bb-edrow .bb-opt-remove { color: #a02222; text-decoration: none; }
.bb-edadd { padding: 12px 18px 14px; display: flex; gap: 12px; align-items: center; }
.bb-edhint { color: #646970; font-size: 12.5px; }
.bb-edfoot { padding: 12px 18px; border-top: 1px solid #dcdcde; background: #fcfcfd; display: flex; align-items: center; gap: 14px; }

/* --- the product data tab ---
   No dashicon here: the tab icon is the real BundleBoss mark, painted as a
   background with an emptied content in bundle_boss_options_tab_icon_css()
   (a glyph plus a background = two icons stacked). */
.bb-product-options .bb-panelhead { display: flex; align-items: center; gap: 9px; padding: 12px 12px 0; }
.bb-product-options .bb-panelhead b { font-size: 13.5px; }
.bb-by-badge { color: #646970; font-size: 11.5px; border: 1px solid #dcdcde; border-radius: 10px; padding: 1px 8px; }
.bb-panel-sub { color: #646970; padding: 0 12px; margin: 6px 0 12px; }
.bb-po-noprice { margin: 0 12px 12px; padding: 9px 12px; background: #fcf3d8; border: 1px solid #f0d493; border-left: 3px solid #dba617; border-radius: 7px; font-size: 12.5px; color: #674e05; }
.bb-po-noprice[hidden] { display: none; }
.bb-chiprow-mini { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }

/* Attachment CARDS (the approved mockup shape): header row with name,
   chips, Required, Remove; the overrides grid full-width beneath. The
   old 4-column table collided with itself at twelve options. */
.bb-attach-list { margin: 0 12px 12px; }
.bb-attach { border: 1px solid #dcdcde; border-radius: 10px; background: #fff; padding: 12px 14px; margin-bottom: 10px; }
.bb-attach-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bb-attach-top b { font-size: 13.5px; white-space: nowrap; }
.bb-attach-top .bb-chiprow-mini { margin: 6px 0 0; flex-basis: 100%; order: 5; }
/* Woo's options-panel CSS floats every label 150px left; neutralise it. */
.woocommerce_options_panel label.bb-attach-req,
.bb-attach-req { float: none !important; width: auto !important; margin: 0 0 0 auto !important; display: inline-flex; align-items: center; gap: 6px; color: #646970; font-size: 12.5px; white-space: nowrap; }
.bb-attach .bb-po-remove { color: #a02222; }
.bb-attach-note { color: #646970; font-size: 12.5px; font-style: italic; }
.bb-attach-ovr-label { color: #646970; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; margin: 12px 0 6px; }
.bb-attach .bb-ovr-grid { max-width: none; }
.bb-chiprow-mini .bb-opt-chip { padding: 1px 8px; font-size: 11.5px; }
.bb-product-options table.widefat { border-radius: 8px; overflow: hidden; }
.bb-product-options table.widefat th { color: #646970; font-weight: 500; }

/* Overrides as a disciplined grid: name above a small right-aligned box.
   Inline spans wrapped raggedly the moment a set had twelve options. */
.bb-ovr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px 10px; max-width: 720px; }
/* Each cell is a <label>: Woo's options-panel CSS floats every panel label
   at a fixed 150px, which slid the whole grid out of its card on both
   sides. Neutralise it, exactly like .bb-attach-req above. */
.woocommerce_options_panel label.bb-ovr-cell,
.bb-ovr-cell { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bb-ovr-cell .bb-ovr-name { font-size: 11px; color: #646970; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-ovr-cell input { width: 100%; text-align: right; border: 1px solid #dcdcde; background: #fbfbfc; border-radius: 5px; padding: 3px 7px; }
.bb-ovr-cell input:focus { border-color: #fd4730; background: #fff; box-shadow: none; }
.bb-ovr-cell input::placeholder { color: #a7aaad; }
.bb-ovr-cell.is-overridden .bb-ovr-name { color: #d4381f; font-weight: 600; }
.bb-ovr-cell.is-overridden input { border-color: #f1c6c0; background: #fff; }
/* "Not on this one": the choice exists in the shared set but this product does
   not offer it. The tick box is a plain box, not the full-width right-aligned
   money field the cell's own input rule would otherwise make of it. */
/* Picked a set that is already on the product: point at the row that exists
   rather than adding a second one that would eat the first. */
.bb-po-row.bb-po-already { animation: bb-po-already 1.4s ease-out; }
@keyframes bb-po-already {
	0%, 60% { background: #fff1ed; box-shadow: inset 3px 0 0 #fd4730; }
	100% { background: transparent; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
	.bb-po-row.bb-po-already { animation: none; background: #fff1ed; box-shadow: inset 3px 0 0 #fd4730; }
}
/* The tick box is a label NESTED in the cell, and the cell's own neutralising
   rule above does not reach it, so Woo's options-panel CSS floated it left at a
   fixed 150px and it walked out of its column. Same override, same reason, one
   level down. The wording is longer than the column is wide at the smallest
   grid size, so it wraps rather than being clipped. */
.woocommerce_options_panel label.bb-ovr-off,
.bb-ovr-off { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; display: flex; align-items: flex-start; gap: 5px; font-size: 11px; line-height: 1.35; color: #787c82; cursor: pointer; }
.bb-ovr-cell .bb-ovr-off input[type="checkbox"] { width: auto; min-height: 0; padding: 0; margin: 0; flex: 0 0 auto; text-align: left; }
.bb-ovr-cell.is-off .bb-ovr-name { color: #a7aaad; text-decoration: line-through; }
.bb-ovr-cell.is-off .bb-ovr-fields { opacity: 0.45; }
.bb-ovr-cell.is-off .bb-ovr-off { color: #d4381f; font-weight: 600; }
.bb-ovr-fields { position: relative; display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.bb-ovr-fields input[type="text"] { flex: 1 1 auto; min-width: 0; }
.bb-ovr-img { flex: 0 0 44px; width: 44px; min-height: 34px; padding: 0; border: 1px dashed #c3c4c7; border-radius: 7px; background-color: #fff; background-size: cover; background-position: center; cursor: pointer; color: #8c8f94; }
.bb-ovr-img:hover { border-color: #fd4730; color: #d4381f; }
.bb-ovr-img.has-img { border-style: solid; border-color: #dcdcde; }
.bb-ovr-imgico { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.bb-ovr-imgico svg { width: 15px; height: 15px; }
.bb-ovr-imgico em { font-style: normal; font-size: 8.5px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; }
.bb-ovr-imgclear { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; padding: 0; border: 0; border-radius: 4px; background: rgba(29, 35, 39, 0.75); color: #fff; font-size: 8px; line-height: 14px; text-align: center; cursor: pointer; }
.bb-ovr-imgclear:hover { background: #d4381f; }
.bb-po-bodytop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bb-po-bodytop .bb-po-ovlab { margin: 0; }
.bb-po-suggest { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid #fd4730; border-radius: 7px; background: #fff; color: #d4381f; font-size: 12px; font-weight: 600; cursor: pointer; }
.bb-po-suggest svg { width: 13px; height: 13px; }
.bb-po-suggest:hover { background: #fff0ee; }
.bb-po-suggest:disabled { opacity: 0.55; cursor: default; }
.bb-sg { margin-top: 10px; border: 1px solid #dcdcde; border-radius: 7px; overflow: hidden; background: #fff; }
.bb-sg-intro { margin: 0; padding: 9px 12px; background: #f6f7f7; border-bottom: 1px solid #dcdcde; font-size: 12px; color: #646970; }
.bb-sg-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #eef0f1; }
.bb-sg-row:last-of-type { border-bottom: 0; }
.bb-sg-dot { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); }
.bb-sg-name { width: 90px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-sg-thumb { flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid #dcdcde; border-radius: 6px; overflow: hidden; background: #fafafa; }
.bb-sg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-sg-thumb.is-none { display: flex; align-items: center; justify-content: center; border-style: dashed; color: #a7aaad; font-size: 10px; }
.bb-sg-why { flex: 1; min-width: 0; font-size: 12px; color: #646970; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-sg-change { flex: 0 0 auto; }
.bb-sg-foot { display: flex; gap: 8px; padding: 9px 12px; background: #f6f7f7; border-top: 1px solid #dcdcde; }
/* The house buttons, not WP blue: coral primary, quiet bordered secondary,
   both on the panel radius. */
#bundle_boss_options_panel .bb-sg-foot .button.bb-sg-use { background: #fd4730; border-color: #fd4730; color: #fff; border-radius: 7px; font-weight: 600; }
#bundle_boss_options_panel .bb-sg-foot .button.bb-sg-use:hover { background: #d4381f; border-color: #d4381f; }
#bundle_boss_options_panel .bb-sg-foot .button.bb-sg-cancel { background: #fff; border-color: #dcdcde; color: #1d2327; border-radius: 7px; }
#bundle_boss_options_panel .bb-sg-foot .button.bb-sg-cancel:hover { border-color: #c3c4c7; }
.bb-po-when { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; background: #fbfbfc; border: 1px solid #dcdcde; border-left: 3px solid #fd4730; border-radius: 0 10px 10px 0; font-size: 13px; color: #646970; }
/* A builder holds several controls and a preview, so it stacks rather than
   trying to be one line of a sentence that has outgrown the row. */
.bb-po-when.bb-when-builder { display: block; }
.bb-po-when select { border: 1px solid #dcdcde; border-radius: 6px; padding: 2px 6px; font-size: 12px; background: #fff; }
.bb-po-upload { margin: 14px 12px 4px; padding: 12px 14px; border: 1px solid #dcdcde; border-radius: 7px; background: #fff; }
.bb-po-upload .bb-po-ovlab { margin-bottom: 8px; }
.bb-po-uprow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.bb-po-uprow input[type="text"], .bb-po-uprow input[type="url"] { flex: 1 1 180px; min-width: 0; border: 1px solid #dcdcde; border-radius: 7px; padding: 4px 9px; font-size: 12.5px; background: #fbfbfc; }
.bb-po-uprow input:focus { border-color: #fd4730; background: #fff; box-shadow: none; }
.bb-edkind { margin: 10px 0 12px; font-size: 13px; }
.bb-kind-desc { margin: 6px 0 0; font-size: 12.5px; color: #646970; max-width: 66ch; }
.bb-kind-desc:empty { display: none; }
/* --- measured-size editor (redesign): titled sections, an aligned dimension
   grid with real headers, a live worked-example price, and the mode toggles
   folded into Advanced. --- */
.bb-measure { margin-top: 12px; }
.bb-msec { border-top: 1px solid #f1f2f4; padding: 14px 0 4px; }
.bb-msec:first-child { border-top: 0; padding-top: 2px; }
.bb-msec-h { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #3c434a; }
.bb-msec-hint { margin: 0 0 10px; font-size: 12.5px; color: #646970; max-width: 66ch; }
/* Several-of: the bounds row under the One / Several seg. */
.bb-multi-bounds { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; }
.bb-multi-bounds[hidden] { display: none; }
.bb-multi-bound { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #1d2327; }
.bb-multi-bound input { width: 72px; border: 1px solid #dcdcde; border-radius: 7px; padding: 4px 8px; font-size: 12.5px; background: #fff; }
.bb-multi-bound input:focus { border-color: #fd4730; box-shadow: none; }
.bb-multi-boundhint { flex-basis: 100%; margin: 0; }
.bb-mdimgrid { display: flex; flex-direction: column; gap: 6px; max-width: 600px; }
.bb-mdimhead, .bb-mdimrow { display: grid; grid-template-columns: minmax(110px, 1fr) 82px 76px 76px 76px; gap: 8px; align-items: center; margin: 0; }
.bb-mdimhead { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; color: #8a8f98; padding: 0 2px; }
.bb-mdimrow input, .bb-mdimrow select { width: 100%; border: 1px solid #dcdcde; border-radius: 7px; padding: 4px 8px; font-size: 12.5px; background: #fff; }
.bb-mdimrow input:focus, .bb-mdimrow select:focus { border-color: #fd4730; box-shadow: none; }
.bb-mraterow { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 13px; color: #1d2327; }
.bb-mraterow label { display: inline-flex; align-items: center; gap: 6px; }
.bb-mraterow input { width: 92px; border: 1px solid #dcdcde; border-radius: 7px; padding: 4px 8px; font-size: 12.5px; background: #fff; }
.bb-mrate-unit { font-weight: 600; }
/* A small info bubble with a hover/focus tooltip, for a nuance that does not
   deserve a permanent line of text (here, the price-unit rule incl. kg/litre). */
.bb-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border: 1px solid #b0b4bb; border-radius: 50%; color: #646970; font: italic 700 10px/1 Georgia, "Times New Roman", serif; cursor: help; vertical-align: middle; flex: 0 0 auto; }
.bb-info:hover, .bb-info:focus { border-color: #fd4730; color: #d4381f; outline: none; }
.bb-info[data-tip]:hover::after, .bb-info[data-tip]:focus::after { content: attr(data-tip); position: absolute; left: -4px; bottom: calc(100% + 9px); width: 250px; background: #1d2327; color: #fff; font: 400 12px/1.45 -apple-system, "Segoe UI", sans-serif; text-transform: none; letter-spacing: 0; padding: 9px 11px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); z-index: 30; white-space: normal; }
.bb-info[data-tip]:hover::before, .bb-info[data-tip]:focus::before { content: ""; position: absolute; left: 3px; bottom: calc(100% + 4px); border: 5px solid transparent; border-top-color: #1d2327; z-index: 30; }
.bb-mlive { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 11px 14px; background: linear-gradient(180deg, #fff1ee, #fff 90%); border: 1px solid #fd4730; border-left-width: 3px; border-radius: 9px; }
.bb-mlive-lab { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: #d4381f; font-weight: 700; white-space: nowrap; }
.bb-mlive-body { font-size: 14px; color: #1d2327; font-variant-numeric: tabular-nums; }
.bb-madv { margin-top: 14px; border: 1px solid #dcdcde; border-radius: 9px; background: #fff; overflow: hidden; }
.bb-madv > summary { cursor: pointer; padding: 11px 14px; font-weight: 600; font-size: 13px; list-style: none; background: #f6f7f8; color: #1d2327; }
.bb-madv > summary:hover { background: #eef0f2; }
.bb-madv > summary::-webkit-details-marker { display: none; }
.bb-madv > summary::before { content: "\25B8"; color: #646970; margin-right: 8px; display: inline-block; transition: transform 0.15s ease; }
.bb-madv[open] > summary::before { transform: rotate(90deg); }
.bb-madv-body { padding: 2px 14px 14px; display: flex; flex-direction: column; gap: 9px; }
.bb-mcustom { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #1d2327; }
.bb-mcustom input[type="checkbox"] { margin: 3px 0 0; }
.bb-edrow .bb-edlabel { flex: 1 1 140px; min-width: 120px; }
.bb-eddim { display: none; width: 64px; text-align: right; border: 1px solid #dcdcde; border-radius: 7px; padding: 5px 7px; font-size: 12.5px; background: #fbfbfc; }
.bb-eddim:focus { border-color: #fd4730; background: #fff; box-shadow: none; }
.bb-kind-measured .bb-eddim-0 { display: inline-block; }
.bb-kind-measured.bb-dims-2 .bb-eddim-1, .bb-kind-measured.bb-dims-3 .bb-eddim-1 { display: inline-block; }
.bb-kind-measured.bb-dims-3 .bb-eddim-2 { display: inline-block; }
.bb-kind-measured .bb-swpair { display: none; }
/* Measured mode: a row is a preset (Name | its dimensions | Price). The swatch
   is gone, so the row needs an explicit grid per dimension count, or the name
   collapses into the old 34px swatch cell and the controls overflow into
   columns the default grid never declared (the audit's broken-row finding). */
.bb-kind-measured.bb-dims-1 .bb-edrow { grid-template-columns: 22px minmax(120px, 1fr) 78px 130px auto auto; }
.bb-kind-measured.bb-dims-2 .bb-edrow { grid-template-columns: 22px minmax(120px, 1fr) 78px 78px 130px auto auto; }
.bb-kind-measured.bb-dims-3 .bb-edrow { grid-template-columns: 22px minmax(120px, 1fr) 78px 78px 78px 130px auto auto; }
.bb-kind-measured .bb-eddim { width: 100%; text-align: left; }
/* The preset table header (measured only). Its grid mirrors the row exactly,
   including the trailing controls, which stay invisible only to keep the auto
   columns in step so Name / Width / Height / Price sit over their inputs. */
.bb-pshead { display: none; }
.bb-kind-measured .bb-pshead {
	display: grid;
	gap: 12px;
	align-items: center;
	padding: 4px 0 3px;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #8a8f98;
}
.bb-kind-measured.bb-dims-1 .bb-pshead { grid-template-columns: 22px minmax(120px, 1fr) 78px 130px auto auto; }
.bb-kind-measured.bb-dims-2 .bb-pshead { grid-template-columns: 22px minmax(120px, 1fr) 78px 78px 130px auto auto; }
.bb-kind-measured.bb-dims-3 .bb-pshead { grid-template-columns: 22px minmax(120px, 1fr) 78px 78px 78px 130px auto auto; }
.bb-ps-dim { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-kind-measured .bb-ps-dim-0 { display: block; }
.bb-kind-measured.bb-dims-2 .bb-ps-dim-1, .bb-kind-measured.bb-dims-3 .bb-ps-dim-1 { display: block; }
.bb-kind-measured.bb-dims-3 .bb-ps-dim-2 { display: block; }
.bb-ps-ghost { visibility: hidden; }

/* --- look-up table editor (kind: table) --- */
.bb-table { margin-top: 12px; }

/* Template on-ramp: a fresh table opens on a gallery of real starting points,
   never a blank grid. */
.bb-tbl-onramp[hidden], .bb-tbl-build[hidden] { display: none; }
/* The tile grid is shared with the new-set on-ramp (bb-onramp-*): one idiom,
   wherever a blank page would otherwise be. */
.bb-tbl-tiles, .bb-onramp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 14px 0 10px; }
.bb-tbl-tile, .bb-onramp-tile {
	display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
	padding: 14px; background: #fff; border: 1px solid #dcdcde; border-radius: 11px; cursor: pointer;
	transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.bb-tbl-tile:hover, .bb-onramp-tile:hover { border-color: #fd4730; box-shadow: 0 3px 14px rgba(253,71,48,.12); transform: translateY(-1px); }
.bb-tbl-tile:focus-visible, .bb-onramp-tile:focus-visible { outline: 2px solid #fd4730; outline-offset: 2px; }
.bb-tbl-tile-ic {
	display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 6px;
	border-radius: 9px; background: #fff1ee; color: #fd4730;
}
.bb-tbl-tile-ic svg { width: 19px; height: 19px; }
.bb-tbl-tile--blank .bb-tbl-tile-ic { background: #f1f2f4; color: #646970; }
.bb-tbl-tile-tt, .bb-onramp-tt { font-weight: 650; font-size: 13.5px; color: #1d2327; }
.bb-tbl-tile-sub, .bb-onramp-sub { font-size: 12px; color: #646970; line-height: 1.35; }

/* New-set on-ramp specifics: links wear no underline, the mini preview leads
   each tile, and the quiet tiles (scratch, a kind's own page) read calmer. */
.bb-onramp-tile { text-decoration: none; }
.bb-onramp-mini { margin-bottom: 5px; min-height: 14px; }
.bb-onramp-tile--blank { background: #fbfbfc; border-style: dashed; }
.bb-onramp-tile--blank .bb-onramp-tt { color: #646970; }
.bb-onramp-tile--kind { background: linear-gradient(180deg, #fff, #fff7f5); }
.bb-tbl-feedback { font-size: 12.5px; color: #8a8f98; margin: 4px 2px 0; }
.bb-tbl-feedback a { color: #fd4730; }
.bb-tbl-restart { display: inline-block; margin: 0 0 14px; color: #646970 !important; font-size: 12.5px; text-decoration: none; }
.bb-tbl-restart:hover { color: #fd4730 !important; }

/* One/Two options: a real segmented control. The radios drive it but are
   visually hidden; the selected segment fills with the brand coral. */
.bb-tbl-axes { display: inline-flex; border: 1px solid #dcdcde; border-radius: 9px; overflow: hidden; margin: 4px 0 14px; background: #fff; }
.bb-tbl-axes .bb-seg { position: relative; margin: 0; padding: 7px 17px; font-size: 13px; font-weight: 500; cursor: pointer; background: #fff; border-right: 1px solid #dcdcde; color: #50575e; display: inline-flex; align-items: center; gap: 6px; transition: background .12s ease, color .12s ease; user-select: none; }
.bb-tbl-axes .bb-seg:last-child { border-right: 0; }
.bb-tbl-axes .bb-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bb-tbl-axes .bb-seg:hover { background: #f6f7f8; }
.bb-tbl-axes .bb-seg.is-on { background: #fd4730; color: #fff; font-weight: 600; }
.bb-tbl-axes .bb-seg.is-on:hover { background: #ec3f29; }
.bb-tbl-axes .bb-seg:focus-within { outline: 2px solid #fd4730; outline-offset: -2px; }
/* "Your other columns are kept aside": reassurance, not an error, so it reads as
   a held state rather than something gone wrong. */
/* "24 sizes on one option": advice, not a fault, and never an automatic switch. */
.bb-tbl-picknote { margin: 11px 0 0; padding: 8px 12px; border-left: 3px solid #c4c7cc; border-radius: 0 8px 8px 0; background: #f6f7f8; font-size: 12.5px; color: #50575e; max-width: 620px; }
.bb-tbl-picknote[hidden] { display: none; }
.bb-tbl-axnote { margin: -8px 0 13px; padding: 8px 12px; border-left: 3px solid #fd4730; border-radius: 0 8px 8px 0; background: #fff7f5; font-size: 12.5px; color: #7a2d1f; max-width: 620px; }
.bb-tbl-axnote[hidden] { display: none; }
.bb-tbl-names { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: #1d2327; }
.bb-tbl-names label { display: inline-flex; align-items: center; gap: 6px; }
.bb-tbl-names label[hidden] { display: none; }
.bb-tbl-names input { width: 150px; border: 1px solid #dcdcde; border-radius: 7px; padding: 6px 9px; font-size: 12.5px; background: #fff; }
.bb-tbl-names input:focus { border-color: #fd4730; box-shadow: none; outline: none; }
/* How the price applies: two selectable cards, coral when chosen. */
.bb-tbl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; max-width: 620px; margin-top: 2px; }
.bb-tbl-card { position: relative; display: block; padding: 12px 15px 13px 44px; border: 1.5px solid #dcdcde; border-radius: 11px; background: #fff; cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease, background .14s ease; }
.bb-tbl-card:hover { border-color: #b9bcc2; }
/* The native radio is hidden (WP admin paints its own blue dot via ::before);
   a coral ring + dot is drawn instead so the indicator matches the accent. */
.bb-tbl-card input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.bb-tbl-card::before { content: ""; position: absolute; left: 16px; top: 15px; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid #c4c7cc; border-radius: 50%; background: #fff; transition: border-color .14s ease; }
.bb-tbl-card::after { content: ""; position: absolute; left: 21px; top: 20px; width: 6px; height: 6px; border-radius: 50%; background: #fd4730; opacity: 0; transition: opacity .14s ease; }
.bb-tbl-card.is-on::before { border-color: #fd4730; }
.bb-tbl-card.is-on::after { opacity: 1; }
.bb-tbl-card-tt { display: block; font-weight: 650; font-size: 13.5px; color: #1d2327; }
.bb-tbl-card-sub { display: block; font-size: 12.5px; color: #646970; margin-top: 3px; line-height: 1.4; }
.bb-tbl-card.is-on { border-color: #fd4730; background: #fff7f5; box-shadow: 0 0 0 1px #fd4730; }
.bb-tbl-card:focus-within { outline: 2px solid #fd4730; outline-offset: 2px; }

/* Typed sizes: the between-bands rules, revealed under the typed card. Indented
   off a coral rail so they read as belonging to that choice, not as a new
   section of their own. */
.bb-tbl-match { margin: 13px 0 0; padding: 2px 0 2px 14px; border-left: 3px solid #fdd8d1; display: flex; flex-direction: column; gap: 9px; max-width: 620px; }
.bb-tbl-match[hidden] { display: none; }
.bb-tbl-match .bb-msec-hint { margin: 0; }
.bb-tbl-mrow { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #1d2327; }
.bb-tbl-mrow[hidden] { display: none; }
.bb-tbl-mrow-lab { min-width: 108px; font-weight: 600; }
.bb-tbl-mrow select { border: 1px solid #dcdcde; border-radius: 7px; padding: 5px 8px; font-size: 12.5px; background: #fff; max-width: 260px; }
.bb-tbl-mrow select:focus { border-color: #fd4730; box-shadow: none; outline: none; }
.bb-tbl-refuse { color: #8a8f98 !important; }

/* Margin on a supplier cost grid. */
.bb-tbl-mkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 13px; color: #1d2327; }
.bb-tbl-mkrow label { display: inline-flex; align-items: center; gap: 7px; }
.bb-tbl-mkrow label[hidden] { display: none; }
.bb-tbl-mkrow select { border: 1px solid #dcdcde; border-radius: 7px; padding: 5px 8px; font-size: 12.5px; background: #fff; }
.bb-tbl-mkrow input { width: 84px; border: 1px solid #dcdcde; border-radius: 7px; padding: 6px 9px; font-size: 12.5px; background: #fff; }
.bb-tbl-mkrow select:focus, .bb-tbl-mkrow input:focus { border-color: #fd4730; box-shadow: none; outline: none; }
.bb-tbl-mkunit { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #fff1ee; color: #d8321f; font-size: 12px; font-weight: 700; }
.bb-tbl-mkex { margin: 2px 0 0; font-size: 12.5px; color: #d8321f; font-variant-numeric: tabular-nums; }
.bb-tbl-mkex:empty { display: none; }

/* The price grid: one connected matrix (shaded headers, a rounded frame, cells
   with borderless inputs that fill them), not a scatter of boxes. */
.bb-tbl-gridwrap { overflow-x: auto; margin: 8px 0 12px; padding: 1px; }
.bb-tbl-editgrid { border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #d7d9dd; border-radius: 10px; }
.bb-tbl-editgrid th, .bb-tbl-editgrid td { border-right: 1px solid #ededf0; border-bottom: 1px solid #ededf0; padding: 0; vertical-align: middle; }
.bb-tbl-editgrid tr > *:last-child { border-right: 0; }
.bb-tbl-editgrid tbody tr:last-child > * { border-bottom: 0; }
.bb-tbl-corner { background: #f6f7f8; min-width: 30px; border-top-left-radius: 10px; }
.bb-tbl-colh, .bb-tbl-priceh { background: #f6f7f8; }
.bb-tbl-rowh { background: #fbfbfc; }
.bb-tbl-hwrap { display: flex; align-items: center; }
.bb-tbl-editgrid input { border: 0; background: transparent; padding: 9px 10px; font-size: 13px; width: 100%; box-shadow: none; margin: 0; border-radius: 0; min-height: 0; line-height: 1.3; }
.bb-tbl-editgrid input:focus { outline: 2px solid #fd4730; outline-offset: -2px; background: #fff7f5; }
/* Header columns hold BAND labels ("1001-1600mm"), which are much longer than a
   price, so they get their own width and the grid scrolls rather than clipping a
   label a merchant has to read to trust the row. */
.bb-tbl-rowh, .bb-tbl-corner { width: 132px; }
.bb-tbl-colh { width: 122px; }
.bb-tbl-priceh, .bb-tbl-cell-td { width: 86px; }
.bb-tbl-blab, .bb-tbl-alab { font-weight: 600; color: #1d2327; }
.bb-tbl-priceh { padding: 8px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #646970; font-weight: 700; }
.bb-tbl-cell { text-align: right; font-variant-numeric: tabular-nums; color: #1d2327; }
.bb-tbl-cell-td.is-filled { background: rgba(253,71,48,.055); }
.bb-tbl-del { flex: 0 0 auto; border: 0; background: none; color: #c4c7cc; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 7px 0 1px; opacity: 0; transition: opacity .12s ease; }
.bb-tbl-colh:hover .bb-tbl-del, .bb-tbl-rowh:hover .bb-tbl-del, .bb-tbl-del:focus { opacity: 1; }
.bb-tbl-del:hover { color: #d4381f; }
.bb-tbl-gridadd { display: flex; gap: 8px; margin: 8px 0 4px; }
.bb-tbl-gridadd .button { height: auto; min-height: 0; padding: 3px 11px; font-size: 12px; line-height: 1.8; color: #50575e; border-color: #dcdcde; background: #fff; box-shadow: none; }
.bb-tbl-gridadd .button:hover { border-color: #fd4730; color: #fd4730; background: #fff; }
.bb-tbl-colbtn[hidden] { display: none; }
/* The live line stays quiet: a single tinted row, not a loud bordered bar. */
#bb-tbl-live { background: #f6f7f8; border: 0; border-radius: 8px; padding: 8px 12px; margin-top: 12px; }
#bb-tbl-live .bb-mlive-lab { color: #8a8f98; }
#bb-tbl-live[hidden] { display: none !important; }
.bb-tbl-basis { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #1d2327; margin-bottom: 6px; }
.bb-tbl-io-lead { font-size: 12.5px; color: #646970; margin: 0 0 10px; max-width: 560px; }
.bb-tbl-paste { display: block; width: 100%; max-width: 520px; border: 1px solid #dcdcde; border-radius: 8px; padding: 9px 10px; font-family: Menlo, Consolas, monospace; font-size: 12px; color: #1d2327; background: #fff; }
.bb-tbl-paste::placeholder { color: #b5b9bf; }
.bb-tbl-io-actions { display: flex; align-items: center; gap: 12px; margin: 9px 0 4px; }
.bb-tbl-io-msg { font-size: 12px; color: #1a7f37; }
.bb-tbl-io-msg.is-bad { color: #d4381f; }
.bb-tbl-io-links { display: flex; flex-wrap: wrap; gap: 16px; margin: 6px 0 0; }
.bb-tbl-link { border: 0; background: none; padding: 0; margin: 0; font-size: 12.5px; color: #50575e; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: #c4c7cc; }
.bb-tbl-link:hover { color: #fd4730; text-decoration-color: #fd4730; }
.bb-tbl-import { position: relative; cursor: pointer; }
/* The panel's own action is coral-outlined, so the solid coral "Save set" stays
   the one primary button and the WP blue never appears. */
#bb-tbl-paste-apply { background: #fff; border: 1.5px solid #fd4730; color: #fd4730; border-radius: 8px; padding: 4px 15px; font-weight: 600; box-shadow: none; min-height: 30px; }
#bb-tbl-paste-apply:hover { background: #fff1ee; border-color: #ec3f29; color: #d4381f; }
.bb-edkind select { border: 1px solid #dcdcde; border-radius: 8px; padding: 5px 26px 5px 10px; font-size: 13px; box-shadow: none; }
.bb-edkind select:focus { border-color: #fd4730; box-shadow: none; }
.bb-editor input[type="radio"] { accent-color: #fd4730; }

/* --- editor accessibility --- */
/* Move up/down buttons: the keyboard path for reordering (the grip is mouse). */
.bb-edmoves { display: inline-flex; gap: 2px; }
.bb-edmove { color: #646970 !important; font-size: 14px; line-height: 1; padding: 2px 5px; text-decoration: none; cursor: pointer; }
.bb-edmove:hover { color: #1d2327 !important; }
/* Visible keyboard focus wherever it was suppressed. :focus-visible keeps a
   mouse click quiet; the ! wins over the scattered outline:none rules. */
.bb-editor input:focus-visible,
.bb-editor select:focus-visible,
.bb-editor button:focus-visible,
.bb-editor a:focus-visible,
.bb-opt-more:focus-visible,
.bb-editor .bb-swbub:focus-within {
	outline: 2px solid #fd4730 !important;
	outline-offset: 2px;
	border-radius: 5px;
}
/* Narrow screens: the fixed five-column row overflowed. Let it wrap onto two
   lines, label leading, the controls flowing below. */
@media ( max-width: 782px ) {
	.bb-edrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
	.bb-opt-grip { order: 0; }
	.bb-swpair { order: 1; }
	.bb-edrow .bb-edlabel { flex: 1 1 140px; min-width: 120px; order: 2; }
	.bb-edrow .bb-edbump { flex: 0 0 120px; order: 3; }
	.bb-eddim { order: 3; }
	.bb-edmoves { order: 4; }
	.bb-opt-remove { order: 5; }
	.bb-ednote { flex: 1 1 100%; order: 6; }
	.bb-editor { max-width: 100%; }
}
/* The Attach toggle is now a coral .bb-cta button; its old quiet-link colour
   (a #d4381f !important) painted coral text on the coral button — unreadable. */
.bb-bulkrow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 8px; padding: 7px 10px; background: #f6f7f7; border: 1px solid #dcdcde; border-radius: 7px; font-size: 12px; color: #646970; }
.bb-bulkrow select { max-width: 220px; }
.bb-bulkrow[hidden] { display: none; }
/* The single-product signpost: its own full-width line under the category row. */
.bb-bulkrow .bb-bulk-single { flex-basis: 100%; margin-top: 2px; color: #646970; }
/* The item-row note for a simple product whose choices come from option sets. */
.bb-optioned-note { margin: 4px 0 0; color: #646970; font-size: 12px; font-style: italic; }
/* Per-row option restrictions (offer only some options, or a set off). */
.bb-optrx { margin: 10px 0 2px; }
/* On a choice slot the card sits in the Advanced grid: span it fully. */
.bb-choice-advanced-grid > .bb-optrx { grid-column: 1 / -1; }
/* The rethink pulled these out of the Advanced fold; they read best full width. */
.bb-choice-advanced-grid > .bb-lookpick,
.bb-choice-advanced-grid > .bb-choice-allowed { grid-column: 1 / -1; }
/* The header stacks ABOVE the cards, never squeezed beside them. */
.bb-choice-advanced-grid > .bb-lookpick { display: block !important; }
.bb-lookpick .bb-lookpick-label { display: block !important; width: auto !important; float: none !important; margin: 0 0 7px !important; }
.bb-optrx-head { font-size: 11px; font-weight: 700; color: #1d4480; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.bb-optrx-set { padding: 8px 0; border-top: 1px solid #e6edf6; }
.bb-optrx-set:first-of-type { border-top: 0; }
.bb-optrx-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.bb-optrx-opts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0 22px; }
.bb-optrx-set.is-off .bb-optrx-opts { opacity: 0.4; pointer-events: none; }
.bb-optrx-opt { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #3c434a; }
.bb-optrx-opt .bb-opt-dot { width: 12px; height: 12px; }
.bb-optrx-note { margin: 8px 0 0; color: #646970; font-size: 11.5px; font-style: italic; }
/* Export / import the whole sets library between stores. */
.bb-sets-io-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bb-sets-import-form { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding-left: 16px; border-left: 1px solid #dcdcde; }

/* ---- Order Builder: "How shoppers pick" visual card-picker ---- */
.bb-lookpick { display: block; }
.bb-lookpick-label { display: block; font-weight: 600; margin-bottom: 6px; }
.bb-lookpick-opts { display: grid; grid-template-columns: repeat( auto-fit, minmax( 132px, 1fr ) ); gap: 8px; max-width: 640px; }
.bb-look { position: relative; display: flex; flex-direction: column; gap: 5px; border: 1.5px solid #c3c4c7; border-radius: 6px; padding: 8px; background: #fff; cursor: pointer; }
.bb-look:hover { border-color: #2271b1; }
.bb-look:has( input:checked ) { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; }
.bb-look input[type="radio"] { position: absolute; top: 9px; right: 9px; margin: 0; }
.bb-look-wf { display: block; height: 54px; background: #f6f7f7; border: 1px solid #dcdcde; border-radius: 4px; padding: 6px; }
.bb-look-wf svg { display: block; width: 100%; height: 100%; }
.bb-look-wf .wfr { fill: #c3c4c7; }
.bb-look-wf .wfb { fill: #2271b1; }
.bb-look-name { font-weight: 600; font-size: 13px; }
.bb-look-hint { font-size: 11.5px; color: #646970; line-height: 1.35; }

/* ---- Nav summaries (admin rethink): the bundle tabs say what's inside ---- */
#woocommerce-product-data ul.wc-tabs li.bundle_items_options a,
#woocommerce-product-data ul.wc-tabs li.bundle_pricing_options a,
#woocommerce-product-data ul.wc-tabs li.bundle_promotions_options a {
	line-height: 1.3;
	padding-top: 7px;
	padding-bottom: 7px;
}
.bb-tab-sum {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: #646970;
	margin-top: 1px;
	max-width: 150px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bb-tab-sum:empty { display: none; }
/* Group labels in the rail: BUNDLE over ours, PRODUCT over WooCommerce's. */
#woocommerce-product-data ul.wc-tabs li.bb-tab-group {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8c8f94;
	padding: 10px 12px 3px;
	margin: 0;
	pointer-events: none;
	background: none;
	border: 0;
}
/* A switched-off feature's editor: fields stay put but read as parked. */
.bb-qedit.is-off { opacity: 0.55; }

/* Card-pickers driving their select: the mockup's .pick anatomy (a tick
   dot, a wireframe, the name, a one-line hint), the driven select tucked
   away once the cards are wired. */
.bb-selcards { display: grid; grid-template-columns: repeat( auto-fill, minmax( 136px, 1fr ) ); gap: 9px; max-width: 640px; margin: 6px 0 4px; grid-column: 1 / -1; }
/* The card as a button (the label variant above already has the base). */
button.bb-selcard { font: inherit; text-align: left; }
.bb-look.is-on { border-color: #2271b1; box-shadow: 0 0 0 1px #2271b1; }
.bb-look-tick {
	position: absolute;
	top: 7px;
	right: 7px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1.5px solid #8c8f94;
	background: #fff;
}
.bb-look.is-on .bb-look-tick { border-color: #2271b1; background: #2271b1; box-shadow: inset 0 0 0 3px #fff; }
select.bb-select-carded,
select.bb-seg-carried { display: none !important; }

/* The switch: a real checkbox dressed as the mockup's pill (inside a quiet
   row's actions or a .bb-sw-line label), plus the headless button variant
   admin.js drives for features whose on-ness is their data. */
.bb-sw-shell input[type="checkbox"],
.bb-sw-line input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 34px;
	height: 18px;
	border-radius: 999px;
	background: #c3c4c7;
	border: 0 !important;
	position: relative;
	margin: 0 !important;
	cursor: pointer;
	transition: background 0.15s ease;
	flex: none;
	box-shadow: none !important;
	vertical-align: middle;
}
.bb-sw-shell input[type="checkbox"]::after,
.bb-sw-line input[type="checkbox"]::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	transition: left 0.15s ease;
}
.bb-sw-shell input[type="checkbox"]:checked,
.bb-sw-line input[type="checkbox"]:checked { background: #00a32a; }
.bb-sw-shell input[type="checkbox"]:checked::after,
.bb-sw-line input[type="checkbox"]:checked::after { left: 18px; }
.bb-sw-shell input[type="checkbox"]:checked::before { content: none; }
button.bb-sw {
	width: 34px;
	height: 18px;
	border-radius: 999px;
	background: #c3c4c7;
	border: 0;
	position: relative;
	transition: background 0.15s ease;
	flex: none;
	cursor: pointer;
	padding: 0;
}
button.bb-sw::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	transition: left 0.15s ease;
}
button.bb-sw.is-on { background: #00a32a; }
button.bb-sw.is-on::after { left: 18px; }
.bb-sw-lab { font-size: 12px; color: #646970; min-width: 20px; }
/* A switch with its sentence: "Shopper can skip this item" and friends. */
.woocommerce_options_panel .bb-sw-line,
.bb-sw-line {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	float: none !important;
	width: auto !important;
	margin: 7px 0 !important;
	font-size: 13px;
	color: #1d2327;
	cursor: pointer;
}

/* Segmented controls driving a hidden select (Show the options as …). */
.bb-seg { display: inline-flex; border: 1px solid #c3c4c7; border-radius: 8px; overflow: hidden; background: #fff; vertical-align: middle; }
.bb-seg button { border: 0; background: #fff; padding: 5px 13px; color: #50575e; font: inherit; font-weight: 600; cursor: pointer; }
.bb-seg button + button { border-left: 1px solid #dcdcde; }
.bb-seg button.is-on { background: #2271b1; color: #fff; }

/* The pricing-mode hint: one grey line under the pills, teaching the chosen
   mode with a worked example. Spans toggle per mode from applyPricingMode. */
#bundle_pricing_data p.form-field.bb-pm-hint-row { margin-top: -4px; padding-top: 0; padding-bottom: 2px; }
.bb-pm-hint { color: #646970; font-size: 12.5px; }

/* The per-row fold grid: uppercase section headers, two columns, full-width
   rows for the option and personalisation blocks. */
.bb-rex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; width: 100%; }
.bb-rex-full { grid-column: 1 / -1; }
@media (max-width: 782px) { .bb-rex-grid { grid-template-columns: 1fr; } }
.bb-rex-h {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #646970;
	margin: 0 0 7px;
}
.bb-rex-note { margin: 6px 0 0; color: #646970; font-size: 12px; max-width: 640px; }
.bb-rex-line { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; flex-wrap: wrap; }
.woocommerce_options_panel .bb-rex-line label,
.bb-rex-line label { float: none !important; width: auto !important; margin: 0 !important; font-weight: 400; color: #1d2327; }
.bb-rex-line input[type="number"] { width: 64px; }

/* Expand all / Collapse all: a quiet bordered control, not a bare link. */
.bundle-boss-collapse-all {
	border: 1px solid #dcdcde !important;
	border-radius: 999px;
	background: #fff;
	color: #50575e !important;
	padding: 2px 12px !important;
	font-size: 12px;
	text-decoration: none !important;
	cursor: pointer;
	box-shadow: none !important;
}
.bundle-boss-collapse-all:hover { border-color: #2271b1 !important; color: #2271b1 !important; }

/* Every repeater's add button reads as an action: the tinted ghost family
   (A: no border, a soft blue wash, rounded to match the rows). */
#bundle-boss-add-tier.button,
#bundle-boss-add-rule.button,
.bundle-boss-add-box-size.button,
.bundle-boss-add-box-break.button,
.bundle-boss-add-box-override.button,
.bundle-boss-slot-image-set.button,
.bb-edadd .button {
	color: #135e96;
	border: none;
	background: rgba(34, 113, 177, 0.08);
	border-radius: 7px;
	font-weight: 600;
}
#bundle-boss-add-tier.button:hover,
#bundle-boss-add-rule.button:hover,
.bundle-boss-add-box-size.button:hover,
.bundle-boss-add-box-break.button:hover,
.bundle-boss-add-box-override.button:hover,
.bundle-boss-slot-image-set.button:hover,
.bb-edadd .button:hover {
	color: #135e96;
	background: rgba(34, 113, 177, 0.14);
}

/* Slot image: the thumb box always exists, so choosing an image fills
   reserved space instead of reflowing the toggles below. */
.bundle-boss-slot-image-preview {
	display: inline-flex !important;
	width: 44px;
	height: 44px;
	border: 1px dashed #c3c4c7;
	border-radius: 5px;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	margin-right: 8px;
	background: #fff;
	position: relative;
	overflow: visible;
}
.bundle-boss-slot-image-preview.has-image { border-style: solid; }
.bundle-boss-slot-image-preview img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; display: block; }
.bundle-boss-slot-image-preview:not(.has-image) .bundle-boss-slot-image-remove { display: none; }
.bundle-boss-slot-image .bb-sw-line { margin-top: 8px !important; }
/* The toggles hold their ground; nothing floats right or reflows. */
.bundle-boss-slot-image .bundle-boss-slot-hero { margin-left: 0 !important; }

/* On the page: one header over the box-grid toggles; their own labels
   step down to plain lines. The pick-one signpost hides in box mode. */
.bb-onpage { display: block; }
.bb-onpage .bb-rex-h { display: block; width: 100%; margin-bottom: 7px; }
.bb-onpage .bb-box-field { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; margin: 0 28px 0 0; }
.bb-onpage .bb-box-field-label {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400 !important;
	font-size: 13px !important;
	color: #1d2327 !important;
}
.bb-mode-box .bb-pickone-note { display: none; }

/* The category filter only bites in box mode; pick-one shows it disabled
   with a tag instead of hiding it (a hidden control reads as missing). */
.bundle-boss-choice-row:not(.bb-mode-box) .bb-box-hidecats .bb-toggle { opacity: 0.45; pointer-events: none; }
.bb-modetag { font-size: 10.5px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.3px; color: #646970; border: 1px solid #dcdcde; border-radius: 9px; padding: 1px 7px; margin-left: 2px; }
.bb-mode-box .bb-modetag { display: none; }

/* The add row: A's pair — a soft solid primary and a tinted ghost. */
#bundle-boss-add-item.button {
	background: #2271b1;
	border: none;
	border-radius: 8px;
	padding: 0 16px;
	color: #fff;
	font-weight: 600;
}
#bundle-boss-add-item.button:hover,
#bundle-boss-add-item.button:focus {
	background: #135e96;
	color: #fff;
}
#bundle-boss-add-choice-slot.button {
	color: #135e96;
	border: none;
	border-radius: 8px;
	padding: 0 16px;
	background: rgba(34, 113, 177, 0.08);
	font-weight: 600;
}
#bundle-boss-add-choice-slot.button:hover,
#bundle-boss-add-choice-slot.button:focus {
	color: #135e96;
	background: rgba(34, 113, 177, 0.14);
}

/* Every control in the items panel speaks the rounded card language:
   the slot header's mode select and name input, the quantity boxes,
   the personalisation card internals, all one family. */
#bundle_items_data .bundle-boss-select-mode,
#bundle_items_data .bundle-boss-slot-label,
#bundle_items_data input[type="text"],
#bundle_items_data input[type="number"],
#bundle_items_data select,
#bundle_display_data input[type="text"],
#bundle_display_data select,
#bundle_pricing_data input[type="text"],
#bundle_pricing_data input[type="number"],
#bundle_pricing_data select:not(.bb-seg-carried),
#bundle_boss_options_panel input[type="text"],
#bundle_boss_options_panel select,
#bundle_promotions_data .bb-qedit input[type="text"],
#bundle_promotions_data .bb-qedit input[type="number"],
#bundle_promotions_data .bb-qedit select {
	border-radius: 7px;
	border-color: #8c8f94;
	min-height: 30px;
}
/* Money and percent boxes are figures, not sentences: compact, like the
   mockups, instead of WooCommerce's half-panel "short". */
#bundle_pricing_data input[type="number"] { width: 120px; }
#bundle_boss_fbt_data input[type="number"] { width: 120px; border-radius: 7px; border-color: #8c8f94; min-height: 30px; }

/* ── The Product options panel: attached sets as folding family rows ── */
.bb-po-list { margin: 0 12px; }
.bb-po-row { border: 1px solid #dcdcde; border-radius: 8px; background: #fff; margin-bottom: 8px; }
.bb-po-line { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; }
.bb-po-line > b { font-size: 13.5px; white-space: nowrap; }
.bb-po-line .bb-chiprow { flex: 1; min-width: 0; }
.bb-po-caret { color: #646970; flex-shrink: 0; }
.bb-po-note { color: #646970; font-size: 12.5px; flex: 1; }
.bb-po-remove { border: 0; background: none; color: #8a94a6; font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 4px; flex-shrink: 0; }
.bb-po-remove:hover { color: #d63638; }
/* Drag to arrange the unified list (sets + fields reorder together). */
#bb-product-option-rows .bb-po-line { cursor: grab; }
#bb-product-option-rows .bb-po-line:active { cursor: grabbing; }
.bb-po-row.ui-sortable-helper { box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.bb-po-placeholder { border: 1.5px dashed #2271b1; background: #eaf2fb; border-radius: 8px; margin-bottom: 8px; }
/* A group is a real container: a header line, then an indented drop-zone list
   holding the group's children. */
.bb-po-grouprow { background: #f0f6fc; border-color: #c5d9ec; }
.bb-po-grouppill { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: #d7e7f7; color: #1c4d7c; padding: 2px 7px; border-radius: 5px; }
.bb-po-grip { cursor: grab; color: #7a8aa0; }
.bb-po-grouplabel { flex: 1; min-width: 0; font-weight: 600; border: 1px solid #c5d9ec; border-radius: 6px; padding: 4px 8px; background: #fff; }
.bb-po-groupcoll { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #50575e; white-space: nowrap; }
.bb-po-grouplist { margin: 0 10px 10px 30px; min-height: 46px; border: 1.5px dashed #c5d9ec; border-radius: 8px; padding: 6px; background: rgba(255, 255, 255, .55); }
.bb-po-grouplist > .bb-po-row { margin-bottom: 6px; }
.bb-po-grouplist > .bb-po-row:last-child { margin-bottom: 0; }
.bb-po-grouplist:empty { display: flex; align-items: center; justify-content: center; }
.bb-po-grouplist:empty::before { content: attr(data-empty); color: #8a94a6; font-size: 12px; font-style: italic; }
/* Drag feedback: the group you would drop INTO lights up, its drop-zone accents. */
.bb-po-grouprow.bb-po-groupactive { background: #e3eefb; }
.bb-po-grouprow.bb-po-groupactive .bb-po-grouplist { border-color: #2271b1; border-style: solid; background: #f2f8fd; }
/* Group delete dialog: a group with items asks before it takes the work with it. */
.bb-po-modal-ov { position: fixed; inset: 0; background: rgba(20, 22, 30, .45); display: flex; align-items: center; justify-content: center; z-index: 100001; }
.bb-po-modal { background: #fff; border-radius: 12px; padding: 22px 22px 20px; width: 380px; max-width: calc(100vw - 32px); box-shadow: 0 24px 64px rgba(0, 0, 0, .32); }
.bb-po-modal-msg { font-size: 17px; font-weight: 700; margin: 0 0 4px; color: #1d2327; }
.bb-po-modal-sub { color: #50575e; margin: 0 0 18px; font-size: 13.5px; }
.bb-po-modal-acts { display: flex; flex-direction: column; gap: 8px; }
.bb-po-modal-acts .button { justify-content: center; height: 40px; display: inline-flex; align-items: center; border-radius: 8px; font-weight: 600; box-shadow: none; text-shadow: none; }
.bb-po-modal-acts .bb-po-modal-keep { background: #d8321f; border: 1px solid #b8291a; color: #fff; }
.bb-po-modal-acts .bb-po-modal-keep:hover, .bb-po-modal-acts .bb-po-modal-keep:focus { background: #b8291a; border-color: #9e2216; color: #fff; box-shadow: none; }
.bb-po-modal-acts .bb-po-modal-del { border: 1px solid #d9a2a2; background: #fff; color: #b32d2e; }
.bb-po-modal-acts .bb-po-modal-del:hover, .bb-po-modal-acts .bb-po-modal-del:focus { background: #b32d2e; border-color: #b32d2e; color: #fff; box-shadow: none; outline: none; }
.bb-po-modal-acts .bb-po-modal-cancel { border: 1px solid #cdd5e0; background: #fff; color: #50575e; }
.bb-po-modal-acts .bb-po-modal-cancel:hover, .bb-po-modal-acts .bb-po-modal-cancel:focus { border-color: #8c8f94; box-shadow: none; }
/* One row of "add" controls: attach a set (searchable), add a field, add a
   group. Fully-rounded pills with a coral chevron and a coral accent on hover
   and focus (identity only, never a coral fill). */
.bb-po-addbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 2px; }
.bb-po-addbar .bb-po-addctl-wrap { display: inline-flex; align-items: center; gap: 7px; }
/* Add-bar info tips centre over their badge, so the rightmost one (Add sides)
   does not run off the panel edge the way a right-opening tip would. */
.bb-po-addbar .bb-info[data-tip]:hover::after,
.bb-po-addbar .bb-info[data-tip]:focus::after { left: 50%; right: auto; transform: translateX(-50%); }
.bb-po-addbar .bb-info[data-tip]:hover::before,
.bb-po-addbar .bb-info[data-tip]:focus::before { left: 50%; right: auto; transform: translateX(-50%); }
.bb-po-addbar select.bb-po-addctl,
button.bb-po-add-group.bb-po-addctl,
button.bb-view-add.bb-po-addctl,
.bb-po-addbar .select2-container--default .select2-selection--single {
	/* !important beats WooCommerce's own select2 override (a 2px grey box),
	   scoped to the bar so no other admin select2 is affected. */
	height: 40px !important;
	border: 1.5px solid #e3e5ea !important;
	border-radius: 20px !important;
	background: #fff !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1px;
	color: #1d2327;
	box-shadow: 0 1px 2px rgba(28, 21, 48, .06);
	transition: border-color .14s ease, box-shadow .14s ease, color .14s ease, transform .14s ease;
}
.bb-po-addbar select.bb-po-addctl {
	padding: 0 40px 0 18px;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23646970' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
}
button.bb-po-add-group.bb-po-addctl,
button.bb-view-add.bb-po-addctl { padding: 0 20px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
button.bb-po-add-group.bb-po-addctl::before,
button.bb-view-add.bb-po-addctl::before { content: "+"; color: #50575e; font-weight: 800; font-size: 16px; line-height: 0; }
.bb-po-addbar select.bb-po-addctl:hover,
button.bb-po-add-group.bb-po-addctl:hover,
button.bb-view-add.bb-po-addctl:hover,
.bb-po-addbar .select2-container--default .select2-selection--single:hover {
	border-color: #8c8f94;
}
.bb-po-addbar select.bb-po-addctl:focus,
button.bb-po-add-group.bb-po-addctl:focus-visible,
button.bb-view-add.bb-po-addctl:focus-visible,
.bb-po-addbar .select2-container--default.select2-container--open .select2-selection--single {
	border-color: #2271b1 !important;
	outline: none;
	box-shadow: 0 0 0 1px #2271b1 !important;
}
.bb-po-addbar .select2-container { min-width: 150px; }
.bb-po-addbar .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 37px; color: #1d2327; font-weight: 600; padding-left: 18px; padding-right: 36px; }
.bb-po-addbar .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #3c434a; }
.bb-po-addbar .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; right: 14px; width: 14px; }
.bb-po-addbar .select2-container--default .select2-selection--single .select2-selection__arrow b { border: 0; width: 12px; height: 8px; margin: -4px 0 0 -6px; background: center/12px 8px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23646970' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
/* The dropdown panel, scoped via dropdownCssClass so other admin select2s are
   untouched. Kills WP's heavy focus-ring box-shadow so it reads as a clean
   floating panel with native-blue highlights, not a boxy blue rectangle. */
.bb-po-dropdown.select2-dropdown,
.select2-container--open .bb-po-dropdown.select2-dropdown--below,
.select2-container--open .bb-po-dropdown.select2-dropdown--above {
	border: 1.5px solid #e3e5ea !important;
	border-radius: 12px !important;
	box-shadow: 0 14px 34px rgba(28, 21, 48, .18) !important;
	overflow: hidden;
	padding: 5px;
	margin-top: 6px;
}
.select2-container--open .bb-po-dropdown.select2-dropdown--above { margin-top: 0; margin-bottom: 6px; }
.bb-po-dropdown .select2-search--dropdown { padding: 4px 4px 6px; }
.bb-po-dropdown .select2-search__field {
	border: 1.5px solid #e3e5ea !important;
	border-radius: 8px !important;
	padding: 8px 11px;
	outline: none !important;
	box-shadow: none !important;
	font-size: 13px;
}
.bb-po-dropdown .select2-search__field:focus { border-color: #2271b1 !important; box-shadow: 0 0 0 1px #2271b1 !important; }
.bb-po-dropdown .select2-results__option { padding: 9px 13px; margin: 1px 0; font-size: 13px; border-radius: 8px; color: #1d2327; }
.bb-po-dropdown .select2-results__option--highlighted,
.bb-po-dropdown .select2-results__option--highlighted[aria-selected] { background-color: #2271b1 !important; color: #fff !important; }
.bb-po-dropdown .select2-results__option[aria-selected="true"] { background-color: #f0f0f1; color: #1d2327; }
.bb-po-addhint { margin: 4px 0 8px; color: #646970; }
.bb-po-body { border-top: 1px solid #ececed; padding: 12px 14px; }
.bb-po-ovlab { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #646970; margin-bottom: 8px; }
.bb-po-hint { color: #646970; font-size: 12.5px; margin: 8px 0 0; }
p.form-field.bb-po-hint-row { margin-top: -4px; padding-top: 0; padding-bottom: 2px; }
.bb-po-foot { margin: 4px 12px 12px; }
.bb-po-attachrow { margin: 4px 12px 0; padding: 0; }
select.bb-po-attach { background-color: rgba(34, 113, 177, .08); border: none; color: #135e96; border-radius: 7px; padding: 6px 28px 6px 12px; font-weight: 600; min-height: 32px; cursor: pointer; }
select.bb-po-attach:hover { background-color: rgba(34, 113, 177, .14); }
.bb-po-line select.bb-seg-carried { display: none !important; }
.bb-ovr-cell input { border-radius: 7px; }

/* ── The FBT panel: the switch row + dimmable fields ── */
.bb-fbt-toggle { display: flex; align-items: center; gap: 12px; border: 1px solid #dcdcde; border-radius: 8px; padding: 10px 14px; margin: 0 12px 12px; }
.bb-fbt-toggle-copy b { display: block; font-size: 13px; }
.bb-fbt-toggle-copy small { display: block; color: #646970; }
.bb-fbt-sw { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.bb-fbt-fields { transition: opacity .15s ease; }
.bb-fbt-fields.is-off { opacity: .45; pointer-events: none; }
#bundle_items_data .bundle-boss-select-mode,
#bundle_items_data .bundle-boss-slot-label { min-height: 34px; }
/* The field-card internals hold one visual line each, nothing wandering. */
.bb-addon-line select,
.bb-addon-line input[type="text"],
.bb-addon-line input[type="number"] { min-height: 30px; border-radius: 4px; }
.bb-addon-settings {
	display: flex !important;
	flex-wrap: wrap;
	gap: 6px 14px;
	align-items: center;
	font-size: 12.5px;
}
.bb-addon-settings > * { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.bb-addon-options-block { width: 100%; box-sizing: border-box; }

/* The product searches speak the card language too. */
#bundle_items_data .select2-container--default .select2-selection--single {
	height: 34px;
	border: 1px solid #8c8f94;
	border-radius: 5px;
}
#bundle_items_data .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 32px; }
#bundle_items_data .select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; }
#bundle_items_data .select2-container--default .select2-selection--multiple {
	border: 1px solid #8c8f94;
	border-radius: 5px;
}
#bundle_items_data .select2-container--default .select2-selection--multiple .select2-selection__choice {
	border-radius: 999px;
	background: #fff;
	border: 1px solid #dcdcde;
	padding: 1px 8px;
}

/* Per-row module fields (personalisation) always take the full row width,
   whatever container the row uses. */
.bundle-boss-item-row > .bb-row-fields {
	flex: 1 1 100%;
	min-width: 100%;
	order: 99;
}
/* The collapsed slot hides them along with the rest of its body. */
.bundle-boss-choice-row.bb-collapsed .bb-row-fields { display: none !important; }

/* The collapsed row's quantity chip: signage for the fold's real inputs. */
.bb-row-qtychip {
	background: #f0f0f1;
	border: 1px solid #dcdcde;
	border-radius: 999px;
	padding: 1px 10px;
	font-size: 11.5px;
	color: #3c434a;
	white-space: nowrap;
	flex: none;
}

/* Display options: block sections instead of the old inline header spans. */
.bb-display-body { padding: 4px 12px 14px; }
.bb-disp-block { margin: 0 0 18px; }
.bb-disp-block:last-child { margin-bottom: 4px; }
.bb-field-line { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.bb-field-line label { font-weight: 600; margin: 0 !important; float: none !important; width: auto !important; }

/* The product thumb on an item row. */
.bb-row-thumb { flex: none; }
.bb-row-thumb img { width: 34px; height: 34px; border-radius: 5px; object-fit: cover; display: block; background: #e9edf3; }

/* Quiet feature rows: every whole-bundle feature always visible.
   Off is one calm line; on carries the green edge and its summary; the
   actions read Edit, then the switch, then On/Off. */
.bb-promos-lede { color: #646970; max-width: 72ch; margin: 12px 12px 14px !important; padding: 0 !important; }
.bb-qrow { display: flex; align-items: center; gap: 12px; border: 1px solid #dcdcde; border-radius: 6px; background: #fff; padding: 10px 14px; margin: 0 12px 8px; max-width: 720px; cursor: pointer; }
.bb-qrow.is-pointer { cursor: default; }
.bb-qrow-icon { font-size: 17px; width: 24px; text-align: center; flex: none; }
.bb-qrow-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bb-qrow-name { font-weight: 600; color: #1d2327; display: flex; align-items: center; gap: 7px; }
.bb-qrow-desc { color: #646970; font-size: 12px; }
.bb-qrow-sum { color: #1a7f37; font-size: 12px; display: none; }
.bb-qrow-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.bb-qrow-actions .bb-qrow-edit,
.bb-qrow-actions .bb-qrow-open { color: #2271b1; text-decoration: none; }
.bb-qrow.is-on { border-left: 3px solid #00a32a; padding-left: 12px; }
.bb-qrow.is-on .bb-qrow-sum { display: block; }
.bb-qrow.is-on .bb-qrow-desc { display: none; }
.bb-qrow:not(.is-on) .bb-qrow-icon,
.bb-qrow:not(.is-on) .bb-qrow-name { opacity: 0.75; }
.bb-where-tag { font-size: 10.5px; color: #646970; border: 1px solid #dcdcde; border-radius: 3px; padding: 0 5px; vertical-align: 1px; font-weight: 400; }
/* Woo floats every panel label; the toggle label is just a checkbox home. */
.woocommerce_options_panel label.bb-qrow-toggle,
.bb-qrow-toggle { float: none !important; width: auto !important; margin: 0 !important; display: inline-flex; }
.bb-qedit { border: 1px solid #dcdcde; border-radius: 6px; background: #f6f7f7; padding: 12px 14px; margin: -4px 12px 10px; max-width: 720px; }
.bb-qedit .form-field { margin: 8px 0 !important; padding: 0 !important; }

/* Help rows: the guides as quiet rows. */
.bb-help-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.bb-help-links a { text-decoration: none; }

/* The slot fold's group labels read as the same uppercase headers the
   mockup gives every section (Pack sizes, Bulk discounts, How shoppers
   pick, Slot image), so the whole editor speaks one language. */
.bundle-boss-box-sizes-label,
.bundle-boss-box-breaks-label,
.bb-lookpick-label,
.bundle-boss-slot-image-label,
.bb-box-field-label,
.bundle-boss-allowed-label {
	display: block;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #646970 !important;
	margin: 0 0 7px;
}
.bundle-boss-allowed-hint { text-transform: none; letter-spacing: 0; font-weight: 400 !important; }

/* The preview rail (slice 4): the real page, small, in the side column. */
.bb-preview-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.bb-preview-bar .bb-preview-dev.is-on { font-weight: 600; text-decoration: none; color: #1d2327; cursor: default; }
.bb-preview-bar .bb-preview-open { margin-left: auto; }
.bb-preview-stage { border: 1px solid #dcdcde; border-radius: 8px; overflow: hidden; background: #fff; }
.bb-preview-stage iframe { border: 0; display: block; transform-origin: 0 0; }
/* Phone: a 390px viewport scaled to the box width. Desktop: 1200px scaled. */
.bb-preview-stage.is-phone iframe { width: 390px; height: 1600px; transform: scale(0.66); margin-bottom: calc(-1600px * 0.34); }
.bb-preview-stage.is-desktop iframe { width: 1200px; height: 2200px; transform: scale(0.213); margin-bottom: calc(-2200px * 0.787); }
.bb-preview-stage { max-height: 420px; overflow-y: auto; }

/* ---- Tools page: the settings home, carded like Option sets ---- */
.bb-tools { max-width: 1060px; }
.bb-tools .bb-lede { color: #646970; max-width: 78ch; margin: 0 0 18px; }
.bb-ver-pill { color: #646970; font-size: 11.5px; border: 1px solid #dcdcde; border-radius: 10px; padding: 1px 8px; background: #fff; }

.bb-toolcard { background: #fff; border: 1px solid #dcdcde; border-radius: 10px; margin: 0 0 14px; transition: box-shadow 0.15s ease; overflow: hidden; }
.bb-toolcard:hover { box-shadow: 0 3px 14px rgba(28, 21, 48, 0.09); }
.bb-toolcard-body { padding: 16px 18px; }
/* Core styles .wrap h2 with its own padding; the card owns its rhythm. */
.bb-tools .bb-toolcard h2,
.bb-toolcard h2 { margin: 0 0 4px; padding: 0; font-size: 15px; font-weight: 600; color: #1d2327; }
.bb-toolcard .bb-sub { color: #646970; margin: 0 0 12px; max-width: 72ch; }
.bb-toolcard-foot { padding: 11px 18px; border-top: 1px solid #dcdcde; background: #fcfcfd; display: flex; align-items: center; gap: 14px; }
.bb-toolcard-foot .bb-quiet { color: #646970; font-size: 12.5px; }

/* Export + Import as a pair; their foots align whatever the body height. */
.bb-tools-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; margin: 0 0 14px; }
.bb-tools-row .bb-toolcard { margin: 0; display: flex; flex-direction: column; }
.bb-tools-row .bb-toolcard > form { display: flex; flex-direction: column; flex: 1; }
.bb-tools-row .bb-toolcard-body { flex: 1; }
@media (max-width: 1100px) { .bb-tools-row { grid-template-columns: 1fr; } }

.bb-stat { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 8px; }
.bb-stat b { font-size: 26px; font-weight: 700; color: #1c1530; letter-spacing: -0.5px; }
.bb-stat span { color: #646970; }

.bb-filerow { display: flex; align-items: center; gap: 10px; border: 1.5px dashed #cfd3d8; border-radius: 8px; padding: 12px 14px; background: linear-gradient(180deg, #fff, #fbfbfc); margin: 4px 0 10px; }

.bb-fold { margin: 6px 0 0; }
.bb-fold > summary { cursor: pointer; color: #646970; font-size: 12.5px; user-select: none; list-style: none; display: inline-flex; align-items: center; gap: 5px; }
.bb-fold > summary::-webkit-details-marker { display: none; }
.bb-fold > summary::before { content: ""; border: 4px solid transparent; border-left-color: #8c8f94; transition: transform 0.12s ease; }
.bb-fold[open] > summary::before { transform: rotate(90deg); }
.bb-fold p { color: #646970; font-size: 12.5px; margin: 8px 0 0; max-width: 68ch; }

/* Appearance: label column beside its control, stacking on narrow screens. */
.bb-fgroup { padding: 14px 0; border-top: 1px solid #f1f2f4; display: grid; grid-template-columns: 250px 1fr; gap: 6px 26px; }
.bb-fgroup:first-of-type { border-top: 0; padding-top: 4px; }
.bb-flabel > label,
.bb-flabel-title { display: block; font-size: 13.5px; font-weight: 600; margin: 0 0 3px; }
.bb-flabel .bb-fdesc,
.bb-fdesc { color: #646970; font-size: 12.5px; line-height: 1.5; margin: 0; }
.bb-flabel .bb-fdesc { max-width: 34ch; }
@media (max-width: 960px) { .bb-fgroup { grid-template-columns: 1fr; } }

.bb-wordrow { display: flex; gap: 10px; }
.bb-wordrow label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #646970; text-transform: uppercase; letter-spacing: 0.3px; }
.bb-wordrow input { width: 130px; }
.bb-example { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.bb-exlabel { color: #646970; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; margin-right: 2px; }
.bb-expill { border: 1.5px solid #d9dce1; border-radius: 16px; padding: 3px 11px; background: #fff; font-size: 12.5px; color: #1d2327; }

/* Corner style: the card-picker; each card previews its real radius. */
.bb-cornerpick { display: grid; grid-template-columns: repeat(3, minmax(132px, 172px)); gap: 8px; }
@media (max-width: 960px) { .bb-cornerpick { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); } }
.bb-corner { position: relative; display: flex; flex-direction: column; gap: 5px; border: 1.5px solid #c3c4c7; border-radius: 6px; padding: 8px; background: #fff; cursor: pointer; }
.bb-corner:hover { border-color: #fd4730; }
.bb-corner:has( input:checked ) { border-color: #fd4730; box-shadow: 0 0 0 1px #fd4730; }
.bb-corner:has( input:focus-visible ) { outline: 2px solid #fd4730; outline-offset: 1px; }
.bb-corner input[type="radio"] { position: absolute; top: 9px; right: 9px; margin: 0; accent-color: #fd4730; }
.bb-corner-wf { height: 58px; background: #f6f7f7; border: 1px solid #dcdcde; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.bb-wfcard { background: #fff; border: 1.5px solid #b8bcc2; padding: 6px 8px; display: flex; gap: 5px; align-items: center; }
.bb-wfchip { border: 1.5px solid #b8bcc2; padding: 2px 9px; font-size: 9px; color: #646970; }
.bb-wfbtn { width: 26px; height: 13px; }
.bb-wfdot { width: 12px; height: 12px; border-radius: 50%; background: #c0392b; border: 1px solid rgba(0, 0, 0, 0.15); }
.bb-corner--rounded .bb-wfcard { border-radius: 12px; }
.bb-corner--rounded .bb-wfchip { border-radius: 16px; }
.bb-corner--rounded .bb-wfbtn { border-radius: 7px; }
.bb-corner--soft .bb-wfcard { border-radius: 6px; }
.bb-corner--soft .bb-wfchip { border-radius: 6px; }
.bb-corner--soft .bb-wfbtn { border-radius: 4px; }
.bb-corner--square .bb-wfcard { border-radius: 2px; }
.bb-corner--square .bb-wfchip { border-radius: 2px; }
.bb-corner--square .bb-wfbtn { border-radius: 2px; }
.bb-corner-name { font-weight: 600; font-size: 13px; }
.bb-corner-hint { font-size: 11.5px; color: #646970; line-height: 1.35; }

/* Data: the destructive toggle states its consequence while it is on. */
.bb-datarow { display: flex; align-items: flex-start; gap: 9px; }
.bb-datarow input[type="checkbox"] { margin-top: 2px; }
.bb-datarow label { font-size: 13px; }
.bb-datawarn { display: none; margin: 10px 0 0 25px; padding: 8px 12px; border-left: 3px solid #a02222; background: #fcf0f1; color: #a02222; font-size: 12.5px; border-radius: 0 6px 6px 0; max-width: 62ch; }
.bb-datawarn.is-on { display: block; }

/* ---- Option-set organise: search, groups, drag (Pro) ---- */
.bb-optsets-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 8px; }
.bb-setsearch { flex: 1; min-width: 220px; height: 38px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #cdd5e0; border-radius: 8px; padding: 0 12px; }
.bb-setsearch input { border: 0; outline: none; font: inherit; font-size: 14px; width: 100%; background: none; color: #1d2327; }
.bb-setsearch-ico { opacity: 0.5; font-size: 14px; }
/* New set + New group sit together at the toolbar's right, rounded to match the
   search field: New set is the coral primary, New group a neutral secondary. */
.bb-optsets-toolbar .button { white-space: nowrap; height: 38px; display: inline-flex; align-items: center; border-radius: 8px; font-weight: 500; padding: 0 15px; box-shadow: none; }
.bb-newgroup { border: 1px solid #cdd5e0; background: #fff; color: #1d2327; }
.bb-newgroup:hover, .bb-newgroup:focus { border-color: #fd4730; color: #d4381f; background: #fff; box-shadow: none; outline: none; }
.bb-optsets .bb-optsets-toolbar .button.bb-cta { height: 38px; padding: 0 16px; }
.bb-drag-hint { color: #646970; font-size: 12.5px; margin: 0 0 14px; }
.bb-optgroup { border: 1px solid #e2e7ee; border-radius: 12px; margin-bottom: 12px; overflow: hidden; background: #fff; transition: box-shadow 0.12s ease, border-color 0.12s ease; }
.bb-optgroup-h { display: flex; align-items: center; gap: 9px; padding: 9px 13px; background: #f6f7f9; }
.bb-grp-caret { border: 0; background: none; cursor: pointer; color: #646970; font-size: 13px; padding: 2px 4px; line-height: 1; transition: transform 0.15s ease; }
.bb-optgroup.is-collapsed .bb-grp-caret { transform: rotate(-90deg); }
.bb-optgroup.is-collapsed .bb-setgrid { display: none; }
.bb-grp-name { font-weight: 700; font-size: 14px; color: #1d2327; }
.bb-grp-nameedit { font: inherit; font-weight: 700; font-size: 14px; border: 1px solid #2271b1; border-radius: 6px; padding: 2px 8px; width: 180px; }
.bb-grp-count { color: #646970; font-size: 12px; font-weight: 600; background: #eef1f5; border-radius: 99px; padding: 1px 9px; min-width: 22px; text-align: center; }
.bb-grp-del { margin-left: auto; border: 0; background: none; color: #8a94a6; cursor: pointer; font-size: 14px; padding: 4px 7px; border-radius: 6px; transition: color 0.15s ease, background 0.15s ease; }
.bb-grp-del:hover { background: #fff; color: #b32d0f; }
.bb-optgroup .bb-setgrid { padding: 13px; margin: 0; }
.bb-optgroup.bb-drop-hi { border-color: #2271b1; box-shadow: 0 0 0 2px rgba(34,113,177,0.14); }
.bb-optgroup.bb-drop-hi .bb-optgroup-h { background: #eaf1f8; }
.bb-setcard[draggable="true"] { cursor: grab; }
.bb-setcard.is-dragging { opacity: 0.4; outline: 2px dashed #2271b1; }
.bb-grp-empty { display: none; color: #646970; font-size: 12.5px; text-align: center; padding: 16px; border: 1.5px dashed #cdd5e0; border-radius: 9px; margin: 0; }
.bb-optgroup.is-empty .bb-grp-empty { display: block; }
.bb-optgroup.is-empty .bb-setgrid { grid-template-columns: 1fr; }
.bb-setnomatch { color: #646970; padding: 8px 2px; }
/* ---- Product Fields: field rows in the product-options list ---- */
.bb-po-fieldrow .bb-po-line { align-items: center; }
.bb-po-fieldpill { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: #fdeeec; color: #c23015; padding: 2px 7px; border-radius: 5px; margin-right: 2px; }
.bb-pf-headlabel { font-weight: 600; }
/* Push the summary (and the remove x after it) to the right, so the x sits at
   the far end like the option-set rows. */
.bb-po-fieldrow .bb-pf-sum { color: #646970; font-size: 12px; font-weight: 400; margin-left: auto; }
.bb-po-fieldrow .bb-po-remove { margin-left: 10px; }
.bb-pf-editor { padding: 10px 4px 6px; }
.bb-pf-line { display: flex; gap: 8px; margin-bottom: 12px; }
.bb-pf-line .bb-pf-label { flex: 1 1 auto; }
.bb-pf-line .bb-pf-type { flex: 0 0 160px; }
.bb-pf-settings { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.bb-pf-ctl { display: flex; flex-direction: column; gap: 4px; }
.bb-pf-ctl > span { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #646970; }
.bb-pf-charge { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
.bb-pf-charge > span:first-child { flex-basis: 100%; }
.bb-pf-feebox { display: inline-flex; align-items: center; gap: 1px; border: 1px solid #8c8f94; border-radius: 4px; padding: 0 6px; background: #fff; }
.bb-pf-feebox .bb-pf-fee { border: 0; box-shadow: none; width: 56px; padding: 4px 2px; }
/* A percentage is a couple of digits, so the box tightens up and the % sits
   against the number the way the currency symbol does on a flat charge. */
.bb-pf-feebox:has( .bb-pf-feepct:not( [hidden] ) ) .bb-pf-fee { width: 34px; text-align: right; }
.bb-pf-feepct { color: #50575e; }
/* "per square [m]" sits beside the rate as plain running text, not as another
   uppercase control label, so a size charge reads "£12 per square m". */
#bundle_boss_options_panel .bb-pf-ctl > span.bb-pf-perunit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: #50575e;
}
#bundle_boss_options_panel .bb-pf-ctl > span.bb-pf-perunit[hidden] { display: none; }

/* ---- on-photo preview: place the shopper's text on the product image ---- */
.bb-pf-preview { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e6e6ec; }
.bb-pf-preview[hidden] { display: none; }
.bb-pfp-toggle { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; cursor: pointer; }
.bb-pfp-editor { margin-top: 12px; }
.bb-pfp-editor[hidden] { display: none; }
.bb-pfp-hint { margin: 0 0 10px; font-size: 12.5px; color: #646970; }
.bb-pfp-stage {
	position: relative;
	display: inline-block;
	max-width: 340px;
	border: 1px solid #dcdce4;
	border-radius: 8px;
	overflow: hidden;
	background: #f6f7f7;
	user-select: none;
}
.bb-pfp-stage img { display: block; width: 100%; height: auto; pointer-events: none; }
.bb-pfp-zone {
	position: absolute;
	box-sizing: border-box;
	border: 2px dashed rgba(255, 255, 255, .95);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .35);
	background: rgba(0, 0, 0, .12);
	cursor: move;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.bb-pfp-sample {
	font-size: 15px;
	line-height: 1.1;
	width: 100%;
	text-align: center;
	padding: 0 4px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
	pointer-events: none;
	white-space: nowrap;
}
.bb-pfp-grip {
	position: absolute;
	right: -6px;
	bottom: -6px;
	width: 13px;
	height: 13px;
	border-radius: 3px;
	background: #fff;
	border: 1px solid #50575e;
	cursor: nwse-resize;
}
.bb-pfp-controls { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; }
.bb-pfp-ctl { display: flex; flex-direction: column; gap: 6px; }
.bb-pfp-lab { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #646970; }
.bb-pfp-fonts { display: flex; flex-wrap: wrap; gap: 10px; }
.bb-pfp-font { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; cursor: pointer; }
.bb-pfp-cols { display: flex; gap: 6px; }
.bb-pfp-col { width: 84px; }
/* WooCommerce's product metabox floats every label and fixes its width, which
   would drop the toggle and the typeface pickers out of the layout entirely.
   The same reset the other controls in this panel already carry. */
#bundle_boss_options_panel .bb-pfp-toggle,
#bundle_boss_options_panel .bb-pfp-font {
	float: none;
	width: auto;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1.4;
}
#bundle_boss_options_panel .bb-pfp-toggle input,
#bundle_boss_options_panel .bb-pfp-font input { float: none; width: auto; margin: 0; }
#bundle_boss_options_panel .bb-pfp-fonts { display: flex; flex-wrap: wrap; gap: 12px; float: none; width: auto; }
#bundle_boss_options_panel .bb-pfp-cols { float: none; width: auto; }
#bundle_boss_options_panel .bb-pfp-lab { float: none; width: auto; margin: 0; }
/* The side picker sits with the other compact controls rather than stretching
   the width of the panel, which read as a different kind of control entirely. */
#bundle_boss_options_panel .bb-pfp-sidectl { margin-bottom: 10px; }
#bundle_boss_options_panel .bb-pfp-sidectl select.bb-pfp-view { width: auto; min-width: 160px; max-width: 260px; }

/* ---- the condition builder ---- */
/* The rule area, given room. It used to be 12px controls at 3px of inside
   padding, jammed at 7px gaps on a grey strip, which reads as something
   squeezed into a gap rather than something anybody meant. A rule is the
   hardest thing on this panel to understand, so it gets the most air. */
#bundle_boss_options_panel .bb-when-builder { display: block; }
#bundle_boss_options_panel .bb-when-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
#bundle_boss_options_panel .bb-when-lead { float: none; width: auto; margin: 0; font-size: 13.5px; color: #50575e; }
#bundle_boss_options_panel .bb-when-matchsel { width: auto; min-width: 178px; }
#bundle_boss_options_panel .bb-when-rows { display: flex; flex-direction: column; gap: 12px; }
#bundle_boss_options_panel .bb-when-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#bundle_boss_options_panel .bb-when-row select,
#bundle_boss_options_panel .bb-when-head select {
	width: auto; min-width: 128px; max-width: 240px; float: none; margin: 0;
	min-height: 38px; padding: 8px 30px 8px 13px; font-size: 13.5px;
	border-radius: 9px; line-height: 1.3;
}
/* A group gained a set, and products carrying that group are behind. An offer,
   never a done thing: the merchant presses it or nothing on sale moves. */
.bb-grp-offer {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
	margin: 0 0 16px; padding: 14px 18px;
	border: 1px solid #dcdcde; border-left: 3px solid #fd4730;
	border-radius: 0 10px 10px 0; background: #fff5f3;
	font-size: 13.5px; color: #1d2327;
}
.bb-grp-offer span { flex: 1 1 260px; min-width: 0; }

/* The two-state preview. You stop parsing the rule and start checking the
   outcome, which is the mistake people actually make: building it backwards. */
#bundle_boss_options_panel .bb-when-preview { margin-top: 18px; padding-top: 16px; border-top: 1px solid #eceef0; }
#bundle_boss_options_panel .bb-when-previewlab {
	display: block; font: 600 11px/1 -apple-system, "Segoe UI", sans-serif;
	letter-spacing: .08em; text-transform: uppercase; color: #8c9196; margin-bottom: 10px;
}
#bundle_boss_options_panel .bb-when-panes { display: flex; flex-wrap: wrap; gap: 12px; }
#bundle_boss_options_panel .bb-when-pane {
	flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 7px;
	border: 1px solid #dcdcde; border-radius: 10px; background: #fff; padding: 13px 15px;
}
#bundle_boss_options_panel .bb-when-panehead { font-size: 12px; font-weight: 600; color: #646970; }
#bundle_boss_options_panel .bb-when-paneitem {
	padding: 10px 12px; border-radius: 8px; background: #fbfbfc;
	border: 1px solid #eceef0; font-size: 13px; color: #1d2327;
}
#bundle_boss_options_panel .bb-when-paneitem.is-gone {
	background: none; border-style: dashed; color: #a7aaad; text-decoration: line-through;
}
#bundle_boss_options_panel .bb-when-panenote { font-size: 11.5px; color: #8c9196; }
#bundle_boss_options_panel .bb-when-pane--on .bb-when-panehead { color: #d4381f; }
#bundle_boss_options_panel .bb-when-drop {
	border: 0; background: transparent; cursor: pointer; color: #b32d2e;
	font-size: 14px; line-height: 1; padding: 4px 6px; border-radius: 4px;
}
#bundle_boss_options_panel .bb-when-drop:hover { background: #fce9e9; }
#bundle_boss_options_panel .bb-when-add { margin-top: 8px; display: inline-block; }
#bundle_boss_options_panel .bb-when-add[hidden] { display: none; }

/* ---- which variations ---- */
#bundle_boss_options_panel .bb-pf-vars { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e6e6ec; }
#bundle_boss_options_panel .bb-pf-vars[hidden] { display: none; }
#bundle_boss_options_panel .bb-pf-varall,
#bundle_boss_options_panel .bb-pf-var {
	float: none; width: auto; margin: 0; display: inline-flex; align-items: center; gap: 6px; line-height: 1.4;
}
#bundle_boss_options_panel .bb-pf-varall { margin: 6px 0 0; font-weight: 600; font-size: 13px; }
#bundle_boss_options_panel .bb-pf-varall input,
#bundle_boss_options_panel .bb-pf-var input { float: none; width: auto; margin: 0; }
#bundle_boss_options_panel .bb-pf-varlist {
	display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px;
	max-height: 190px; overflow-y: auto; padding: 8px 10px;
	border: 1px solid #e6e6ec; border-radius: 8px; background: #fbfbfc;
}
#bundle_boss_options_panel .bb-pf-varlist[hidden] { display: none; }
#bundle_boss_options_panel .bb-pf-maxfiles select { width: auto; min-width: 120px; }
.bb-pf-max input, .bb-pf-maxsize input { width: 82px; }
/* ---- Field editor groups -------------------------------------------------
   One level of labelled groups, never tabs: this panel already sits inside a
   WooCommerce Product Data tab, and these settings are interdependent, which is
   the documented test for when tabs are the wrong control. A group hides itself
   when the field type makes everything in it irrelevant, and a lone remaining
   group drops its heading so a simple field still reads as one flat row. */
#bundle_boss_options_panel .bb-pf-grp { padding: 13px 0 2px; border-top: 1px solid #f1f2f4; }
#bundle_boss_options_panel .bb-pf-grp:first-of-type { border-top: 0; padding-top: 4px; }
#bundle_boss_options_panel .bb-pf-grp[hidden] { display: none; }
#bundle_boss_options_panel .bb-pf-grph {
	margin: 0 0 9px; font-size: 11px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase; color: #50575e;
}
#bundle_boss_options_panel .bb-pf-grph[hidden] { display: none; }
#bundle_boss_options_panel .bb-pf-grprow { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-start; }
/* The "Shoppers will see" strip under the repeat controls: the house live-example
   look, tucked to the group's rhythm. Flex on the strip beats the [hidden]
   attribute, so the hide is spelled out. */
#bundle_boss_options_panel .bb-pf-repeatlive { margin: 10px 0 2px; }
#bundle_boss_options_panel .bb-pf-repeatlive[hidden] { display: none; }

/* The GROUP's repeat panel: the field panel's own anatomy, moved up to the
   group head when several fields repeat together. It sits between the head
   line and the child list, indented to the group's inner rhythm. */
#bundle_boss_options_panel .bb-pg-repeat { padding: 4px 14px 12px 40px; border-top: 0; }
#bundle_boss_options_panel .bb-pg-repeat[hidden] { display: none; }
#bundle_boss_options_panel .bb-pg-repeat .bb-pf-grph { margin-top: 4px; }
#bundle_boss_options_panel .bb-pg-repeatlive { margin: 10px 0 2px; }
#bundle_boss_options_panel .bb-pg-repeatlive[hidden] { display: none; }
#bundle_boss_options_panel .bb-pg-repeat .description { margin: 8px 0 0; }

/* Image handling: a button, then its own panel. Not four more boxes in the row —
   WordPress core gives image editing its own screen, and this keeps the next
   upload capability to the cost of a button rather than another layout rewrite. */
#bundle_boss_options_panel .bb-pf-imgrow { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; float: none; width: auto; margin: 0; }
#bundle_boss_options_panel .bb-pf-imgrow[hidden] { display: none; }
#bundle_boss_options_panel button.bb-pf-imgopen {
	border: 1.5px solid #fd4730; background: #fff; color: #d4381f;
	font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px;
	border-radius: 8px; cursor: pointer;
}
#bundle_boss_options_panel button.bb-pf-imgopen:hover { background: #fd4730; color: #fff; }
#bundle_boss_options_panel button.bb-pf-imgopen:focus-visible { outline: 2px solid #fd4730; outline-offset: 2px; }
#bundle_boss_options_panel button.bb-pf-imgopen[hidden] { display: none; }
#bundle_boss_options_panel .bb-pf-imgsum { font-style: italic; font-size: 12px; color: #8c8f94; }
#bundle_boss_options_panel .bb-pf-imgpanel {
	margin-top: 12px; padding: 13px 15px 14px;
	border: 1px solid #fd4730; border-left-width: 3px; border-radius: 10px;
	background: linear-gradient(180deg, #fff5f3, #fff 75%);
}
#bundle_boss_options_panel .bb-pf-imgpanel[hidden] { display: none; }
#bundle_boss_options_panel .bb-pf-imgt { display: block; font-size: 13.5px; font-weight: 700; color: #1d2327; }
#bundle_boss_options_panel .bb-pf-imgm { margin: 2px 0 12px; font-size: 12.5px; color: #646970; max-width: 58ch; }
/* A tick box that carries its own always-visible explanation underneath: the
   hint sits on its own line, indented past the box, so the sentence reads as
   part of the choice rather than as loose text beside it. bb-pf-imgsw is the
   upload module's own name for it; bb-pf-cbhint is the same layout for any
   field row that needs it. */
#bundle_boss_options_panel label.bb-pf-imgsw,
#bundle_boss_options_panel label.bb-pf-cbhint {
	float: none; width: auto; margin: 12px 0 0; display: flex; align-items: baseline; gap: 8px;
	font-size: 13px; color: #1d2327; flex-wrap: wrap;
}
#bundle_boss_options_panel label.bb-pf-imgsw input,
#bundle_boss_options_panel label.bb-pf-cbhint input { float: none; width: auto; margin: 0; }
#bundle_boss_options_panel label.bb-pf-imgsw .bb-po-hint,
#bundle_boss_options_panel label.bb-pf-cbhint .bb-po-hint { flex-basis: 100%; margin: 2px 0 0 26px; }
/* Accepted image size: a width x height pair per bound, so it reads as one
   decision ("no smaller than 1000 x 800") rather than four loose numbers. The
   "if it does not fit" choice only appears once a bound exists. */
#bundle_boss_options_panel .bb-pf-dim { float: none; width: auto; margin: 0; display: flex; flex-direction: column; gap: 4px; }
#bundle_boss_options_panel .bb-pf-dimrow { display: inline-flex; align-items: center; gap: 6px; }
#bundle_boss_options_panel .bb-pf-dimrow input { width: 74px; float: none; margin: 0; }
#bundle_boss_options_panel .bb-pf-dimrow em { font-style: normal; font-size: 12px; color: #8c8f94; }
#bundle_boss_options_panel .bb-pf-minpxfail select,
#bundle_boss_options_panel .bb-pf-minfiles select { width: auto; min-width: 150px; }
#bundle_boss_options_panel .bb-pf-dim[hidden],
#bundle_boss_options_panel .bb-pf-minfiles[hidden],
#bundle_boss_options_panel .bb-pf-minpxfail[hidden] { display: none; }
.bb-pf-attachrow { display: flex; align-items: center; gap: 10px; }
.bb-pf-attachrow .bb-po-hint { margin: 0; }
/* Product Fields editor: beat WooCommerce .woocommerce_options_panel label { float:left; width:150px } */
#bundle_boss_options_panel .bb-pf-settings { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
#bundle_boss_options_panel .bb-pf-ctl { float: none; width: auto; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#bundle_boss_options_panel .bb-pf-ctl > span { float: none; width: auto; margin: 0; }
/* A control that explains itself underneath. The column's own gap does the
   spacing, so the hint's standalone margin would double it. */
#bundle_boss_options_panel .bb-pf-ctl .bb-po-hint { margin: 0; max-width: 62ch; }
#bundle_boss_options_panel .bb-pf-template { flex: 1 1 100%; }
#bundle_boss_options_panel .bb-pf-charge { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
#bundle_boss_options_panel .bb-pf-charge > span:first-child { flex-basis: 100%; }
#bundle_boss_options_panel .bb-pf-line { display: flex; gap: 8px; }
#bundle_boss_options_panel .bb-pf-line label { float: none; width: auto; }
/* Respect the hidden attribute on type-specific field controls (the flex rule above out-specificities [hidden]) */
#bundle_boss_options_panel .bb-pf-ctl[hidden],
#bundle_boss_options_panel .bb-pf-settings[hidden] { display: none; }
/* ---- The product's Sides manager ------------------------------------------
   Each side is a photo plus the name the merchant gives it. Lives inside a
   WooCommerce options panel, so every rule is scoped to the panel and resets
   Woo's label floats, which otherwise drop the inputs out of the row. */
#bundle_boss_options_panel .bb-po-views { margin: 14px 12px 4px; padding: 12px 14px; background: #f6f7f7; border: 1px solid #e0e0e0; border-radius: 8px; }
#bundle_boss_options_panel .bb-po-views[hidden] { display: none; }
#bundle_boss_options_panel .bb-po-views-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
#bundle_boss_options_panel .bb-po-views-head b { display: block; color: #1d2327; }
#bundle_boss_options_panel .bb-po-views-sub { font-size: 12px; color: #646970; }
#bundle_boss_options_panel .bb-view-removeall { flex: none; }
#bundle_boss_options_panel .bb-views-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
#bundle_boss_options_panel .bb-view-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; float: none; padding: 0; margin: 0; }
#bundle_boss_options_panel .bb-view-photo { position: relative; flex: none; }
#bundle_boss_options_panel .bb-view-thumb { width: 46px; height: 46px; padding: 0; border: 1.5px dashed #b8bcc4; border-radius: 8px; background: #fff center / cover no-repeat; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #8a94a6; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
#bundle_boss_options_panel .bb-view-thumb.has-img { border-style: solid; border-color: #c9c9cf; }
#bundle_boss_options_panel .bb-view-thumb:hover { border-color: #2271b1; color: #2271b1; }
#bundle_boss_options_panel .bb-view-thumb-hint { pointer-events: none; }
#bundle_boss_options_panel .bb-view-clear { position: absolute; top: -7px; right: -7px; width: 19px; height: 19px; border-radius: 50%; background: #fff; border: 1px solid #dcdcde; color: #b32d2e; cursor: pointer; font-size: 11px; line-height: 17px; padding: 0; text-align: center; box-shadow: 0 1px 3px rgba( 0, 0, 0, .2 ); }
#bundle_boss_options_panel .bb-view-clear[hidden] { display: none; }
#bundle_boss_options_panel .bb-view-clear:hover { background: #b32d2e; color: #fff; border-color: #b32d2e; }
#bundle_boss_options_panel .bb-view-label { flex: 0 1 240px; min-width: 140px; max-width: 280px; float: none; margin: 0; }
#bundle_boss_options_panel .bb-view-add { margin-top: 6px; }
#bundle_boss_options_panel .bb-views-nudge { margin: 12px 0 2px; padding-top: 12px; border-top: 1px solid #f0f0f1; color: #50575e; }
/* The per-field side picker and its stage ship in the DOM and are revealed as
   sides appear, so both must honour the hidden attribute. */
#bundle_boss_options_panel .bb-pfp-sidectl[hidden],
#bundle_boss_options_panel .bb-pfp-stage[hidden],
#bundle_boss_options_panel .bb-pfp-draghint[hidden] { display: none; }
/* ---- The Positions library screen ----------------------------------------
   A reusable set of named areas, each drawn on a real product photo so the
   merchant never types a coordinate. */
.bb-positions .bb-pos-intro { max-width: 70ch; color: #50575e; font-size: 13.5px; }
.bb-positions .bb-pos-group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8c8f94; margin: 24px 0 9px; }
.bb-positions .bb-pos-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) ); gap: 12px; }
.bb-positions .bb-pos-card { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid #dcdcde; border-radius: 8px; padding: 14px 15px; box-shadow: 0 1px 2px rgba(28,21,48,.06); transition: border-color .15s, box-shadow .15s; }
.bb-positions .bb-pos-card:hover { border-color: #c9c9cf; box-shadow: 0 2px 6px rgba(28,21,48,.09); }
.bb-positions .bb-pos-card-t { font-size: 14.5px; font-weight: 700; text-decoration: none; color: #1d2327; }
.bb-positions .bb-pos-card-t:hover, .bb-positions .bb-pos-card-t:focus { color: #d8321f; }
.bb-positions .bb-pos-card-n { font-size: 11.5px; font-weight: 700; color: #646970; }
.bb-positions .bb-pos-card-l { font-size: 12px; color: #646970; line-height: 1.5; }
.bb-positions .bb-pos-card-a { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #f0f0f1; font-size: 12.5px; }
.bb-positions .bb-pos-card-a a, .bb-positions .bb-pos-card-a button { color: #50575e; text-decoration: none; }
.bb-positions .bb-pos-card-a a:hover, .bb-positions .bb-pos-card-a button:hover { color: #d8321f; }
.bb-positions .bb-pos-card-a form { display: inline; }
.bb-positions .bb-pos-del, .bb-positions .bb-pos-card-a .bb-pos-del { color: #b32d2e; }
.bb-positions .bb-pos-card-a .bb-pos-del:hover { color: #8a2424; }
.bb-positions .bb-pos-empty { max-width: 60ch; background: #fff; border: 1px solid #dcdcde; border-radius: 8px; padding: 26px 28px; margin-top: 18px; }
.bb-positions .bb-pos-empty h2 { margin-top: 0; }

.bb-pos-editor .bb-pos-panel { background: #fff; border: 1px solid #dcdcde; border-radius: 8px; padding: 16px 18px; margin: 0 0 14px; display: flex; gap: 22px; flex-wrap: wrap; }
/* The photo rung: a thumbnail of the set's design photo beside the controls
   to change it. Leads the detail column because every canvas draws on it. */
.bb-pos-editor .bb-pos-against { display: flex; align-items: flex-start; gap: 16px; }
.bb-pos-editor .bb-pos-against-thumb { flex: none; width: 76px; height: 76px; border-radius: 8px; overflow: hidden; border: 1px solid #dcdcde; background: #f6f7f7; }
.bb-pos-editor .bb-pos-against-thumb[hidden] { display: none; }
.bb-pos-editor .bb-pos-against-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bb-pos-editor .bb-pos-against-say { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bb-pos-editor .bb-pos-against-say b { font-size: 13px; color: #1d2327; }
.bb-pos-editor .bb-pos-against-sub { font-size: 11.5px; color: #8c8f94; line-height: 1.5; }
.bb-pos-editor .bb-pos-against-ctls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.bb-pos-editor .bb-pos-against.has-photo .bb-pos-against-sub { display: none; }
/* The strip of design photos (Front, Back). Each: a thumbnail, an editable
   label, a remove control. Positions pick which one they sit on. */
.bb-pos-editor .bb-pos-photos { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.bb-pos-editor .bb-pos-photos:empty { display: none; }
.bb-pos-editor .bb-pos-photo { display: flex; flex-direction: column; gap: 4px; width: 92px; }
.bb-pos-editor .bb-pos-photo-thumb { position: relative; width: 92px; height: 92px; border-radius: 8px; overflow: hidden; border: 1px solid #dcdcde; background: #f6f7f7; }
.bb-pos-editor .bb-pos-photo-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bb-pos-editor .bb-pos-photo-label { border: 1px solid #dcdcde; border-radius: 5px; padding: 4px 7px; font-size: 12px; text-align: center; }
.bb-pos-editor .bb-pos-photo-del { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; line-height: 18px; text-align: center; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; font-size: 12px; padding: 0; }
.bb-pos-editor .bb-pos-photo-del:hover { background: #b32d2e; }
/* Which photo a position is drawn on, above its canvas. */
.bb-pos-editor .bb-pos-onwhich { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bb-pos-editor .bb-pos-onwhich[hidden] { display: none; }
.bb-pos-editor .bb-pos-onwhich > span { font-size: 12px; font-weight: 600; color: #646970; }
.bb-pos-editor .bb-pos-onwhich select { border: 1px solid #dcdcde; border-radius: 5px; padding: 4px 24px 4px 8px; font-size: 12.5px; }
.bb-pos-editor .bb-pos-field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 260px; }
.bb-pos-editor .bb-pos-field-s { flex: 0 1 190px; }
.bb-pos-editor .bb-pos-field > span { font-weight: 700; font-size: 13px; color: #1d2327; }
.bb-pos-editor .bb-pos-field em { font-style: normal; font-size: 11.5px; color: #8c8f94; line-height: 1.5; }
.bb-pos-editor .bb-pos-field input[type="text"],
.bb-pos-editor .bb-pos-field input[type="number"],
.bb-pos-editor .bb-pos-field select { border: 1px solid #dcdcde; border-radius: 5px; padding: 6px 9px; font-size: 13px; }
.bb-pos-editor .bb-pos-hint { font-size: 11.5px; color: #8c8f94; line-height: 1.5; margin: 6px 0 0; }
.bb-pos-editor .bb-pos-hint[hidden] { display: none; }
/* Master/detail: a rail lists every area, the detail pane edits the selected
   one. Only the chosen area is in view, so the editor never becomes a wall. */
.bb-pos-editor .bb-pos-md { display: flex; align-items: flex-start; gap: 16px; }
.bb-pos-editor .bb-pos-rail { flex: 0 0 236px; background: #f6f7f7; border: 1px solid #dcdcde; border-radius: 8px; padding: 8px; position: sticky; top: 42px; }
.bb-pos-editor .bb-pos-rail-hd { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8c8f94; padding: 6px 8px 8px; }
.bb-pos-editor .bb-pos-rail-item { display: block; width: 100%; text-align: left; border: 1px solid transparent; background: none; border-radius: 6px; padding: 9px 10px; font: inherit; font-weight: 600; font-size: 13px; color: #2c3338; cursor: pointer; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-pos-editor .bb-pos-rail-item:hover { background: rgba(0,0,0,.04); }
.bb-pos-editor .bb-pos-rail-item.is-sel { background: #fff; border-color: #dcdcde; box-shadow: 0 1px 2px rgba(28,21,48,.08); color: #1d2327; }
.bb-pos-editor .bb-pos-rail-add { width: 100%; border: 1px dashed #dcdcde; background: none; border-radius: 6px; padding: 9px; font: inherit; font-weight: 600; font-size: 13px; color: #2c3338; cursor: pointer; margin-top: 4px; }
.bb-pos-editor .bb-pos-rail-add:hover { border-color: #2271b1; color: #2271b1; }
/* One folded "Advanced" section holds the artwork-quality and print-method
   fields, so the everyday five stay visible and the rest is a click away. */
.bb-pos-editor .bb-pos-adv { border: 1px solid #dcdcde; border-radius: 8px; margin-top: 2px; background: #fff; }
.bb-pos-editor .bb-pos-adv > summary { list-style: none; cursor: pointer; padding: 11px 14px; font-weight: 700; font-size: 13px; color: #2c3338; }
.bb-pos-editor .bb-pos-adv > summary::-webkit-details-marker { display: none; }
.bb-pos-editor .bb-pos-adv > summary::before { content: "\25B8"; color: #8c8f94; margin-right: 8px; display: inline-block; transition: transform .15s; }
.bb-pos-editor .bb-pos-adv[open] > summary::before { transform: rotate(90deg); }
.bb-pos-editor .bb-pos-adv > .bb-pos-art,
.bb-pos-editor .bb-pos-adv > .bb-pos-methods { padding: 0 14px 14px; }
.bb-pos-editor .bb-pos-adv > .bb-pos-art { border-top: 1px solid #f0f0f1; padding-top: 14px; }
.bb-pos-editor .bb-pos-detail { flex: 1 1 auto; min-width: 0; }
.bb-pos-editor .bb-pos-against { margin-bottom: 14px; }
.bb-pos-editor #bb-pos-rows > .bb-pos-row { display: none; margin: 0; }
.bb-pos-editor #bb-pos-rows > .bb-pos-row.is-sel { display: block; }
/* Starting shapes: the trade's own lists, one tap from the blank page. */
.bb-pos-editor .bb-pos-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.bb-pos-editor .bb-pos-presets-lab { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8c8f94; }
.bb-pos-editor .bb-pos-preset { border: 1px solid #dcdcde; background: #fff; border-radius: 20px; padding: 5px 13px; font-size: 12.5px; font-weight: 600; color: #2c3338; text-decoration: none; }
.bb-pos-editor .bb-pos-preset:hover { border-color: #2271b1; color: #2271b1; }
.bb-pos-editor .bb-pos-preset.is-on { border-color: #d4381f; color: #d4381f; background: #fff1ee; }
.bb-pos-editor .bb-pos-presets-hint { flex-basis: 100%; margin: 0; }
@media (max-width: 782px) {
	.bb-pos-editor .bb-pos-md { display: block; }
	.bb-pos-editor .bb-pos-rail { position: static; margin-bottom: 12px; }
}

.bb-pos-editor .bb-pos-row { background: #fff; border: 1px solid #dcdcde; border-radius: 8px; margin: 0 0 12px; overflow: hidden; }
.bb-pos-editor .bb-pos-row-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: #f6f7f7; border-bottom: 1px solid #dcdcde; }
.bb-pos-editor .bb-pos-row-t { font-weight: 700; font-size: 13.5px; }
.bb-pos-editor .bb-pos-row-del { color: #b32d2e; }
.bb-pos-editor .bb-pos-row-b { display: flex; gap: 22px; padding: 16px 14px; flex-wrap: wrap; }
.bb-pos-editor .bb-pos-row-l { flex: 1 1 320px; display: flex; flex-direction: column; gap: 13px; }
.bb-pos-editor .bb-pos-row-r { flex: 0 0 260px; display: flex; flex-direction: column; gap: 6px; }
.bb-pos-editor .bb-pos-canvaslab { font-weight: 700; font-size: 13px; color: #1d2327; }
.bb-pos-editor .bb-pos-money { display: flex; gap: 16px; flex-wrap: wrap; }
.bb-pos-editor .bb-pos-fee-in,
#bundle_boss_options_panel .bb-pos-fee-in { display: inline-flex; align-items: center; border: 1px solid #dcdcde; border-radius: 5px; overflow: hidden; background: #fff; }
.bb-pos-editor .bb-pos-sym,
#bundle_boss_options_panel .bb-pos-sym { padding: 0 7px; color: #646970; font-size: 12.5px; background: #f6f7f7; align-self: stretch; display: flex; align-items: center; }
.bb-pos-editor .bb-pos-fee-in input,
#bundle_boss_options_panel .bb-pos-fee-in input { border: 0 !important; border-radius: 0 !important; width: 78px; padding: 6px 8px !important; }
.bb-pos-editor .bb-pos-accepts { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.bb-pos-editor .bb-pos-accepts legend { font-weight: 700; font-size: 13px; color: #1d2327; padding: 0 0 4px; }
.bb-pos-editor .bb-pos-maxlen[hidden] { display: none; }
.bb-pos-editor .bb-pos-sidewrap[hidden] { display: none; }
.bb-pos-editor .bb-pos-mlab { font-weight: 700; font-size: 13px; color: #1d2327; }
/* Choosing a picture OF the area, as the alternative to marking it on the product. */
.bb-pos-editor .bb-pos-pic { margin: 4px 0 2px; }
.bb-pos-editor .bb-pos-pic-row { display: flex; align-items: flex-start; gap: 12px; margin-top: 7px; }
.bb-pos-editor .bb-pos-pic-thumb { flex: 0 0 auto; width: 74px; height: 74px; padding: 0; border: 1.5px dashed #c3c4c7; border-radius: 7px; background: #f6f7f7; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bb-pos-editor .bb-pos-pic-thumb:hover { border-color: #2271b1; }
.bb-pos-editor .bb-pos-pic-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-pos-editor .bb-pos-pic.has-pic .bb-pos-pic-thumb { border-style: solid; border-color: #2271b1; background: #fff; }
.bb-pos-editor .bb-pos-pic-empty { font-size: 22px; line-height: 1; color: #8c8f94; }
.bb-pos-editor .bb-pos-pic-say { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.bb-pos-editor .bb-pos-pic-clear[hidden] { display: none; }
.bb-pos-editor .bb-pos-pic-note { font-size: 11.5px; color: #646970; font-style: normal; line-height: 1.45; margin-top: 3px; }
.bb-pos-editor .bb-pos-row-r[hidden] { display: none; }
.bb-pos-editor .bb-pos-mlist { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.bb-pos-editor .bb-pos-mrow { display: flex; align-items: center; gap: 7px; }
.bb-pos-editor .bb-pos-mrow > input[type="text"] { border: 1px solid #dcdcde; border-radius: 5px; padding: 6px 9px; font-size: 13px; flex: 1 1 auto; min-width: 0; }
.bb-pos-editor .bb-pos-mdel { color: #b32d2e; flex: none; }

/* The canvas: the merchant's own photo with the area drawn on it. Fractions,
   never pixels, so the same area is right at any size. */
.bb-pos-editor .bb-pos-stage { position: relative; width: 100%; background: #f0f0f1; border: 1px solid #c9c9cf; border-radius: 6px; overflow: hidden; user-select: none; }
.bb-pos-editor .bb-pos-stage[hidden] { display: none; }
.bb-pos-editor .bb-pos-stage img { display: block; width: 100%; height: auto; }
.bb-pos-editor .bb-pos-stage img[hidden] { display: none; }
/* The stand-in shape: the canvas is alive before any product is aimed. */
/* No photo picked yet: a plain empty canvas, no fake box to drag. The
   "pick one above" hint sits below it and says what to do. */
.bb-pos-editor .bb-pos-stage.is-empty { aspect-ratio: 4 / 5; background: repeating-linear-gradient(45deg, #fbfbfc, #fbfbfc 6px, #f3f4f6 6px, #f3f4f6 12px); }
.bb-pos-editor .bb-pos-pickfirst[hidden], .bb-pos-editor .bb-pos-draghint[hidden] { display: none; }
.bb-pos-editor .bb-pos-box { position: absolute; box-sizing: border-box; border: 1px dashed #2271b1; background: rgba( 34, 113, 177, .1 ); cursor: move; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* The box's display:flex beats a bare [hidden] (display:none) on specificity,
   so an empty-canvas row would still show a HERE box. Re-hide it explicitly. */
.bb-pos-editor .bb-pos-box[hidden] { display: none; }
.bb-pos-editor .bb-pos-boxlab { font-size: 10px; font-weight: 700; color: #2271b1; pointer-events: none; letter-spacing: .04em; }
.bb-pos-editor .bb-pos-grip { position: absolute; right: -4px; bottom: -4px; width: 11px; height: 11px; background: #2271b1; border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize; }
.bb-pos-editor .bb-pos-add-wrap { margin: 4px 0 18px; }/* .bb-pos-field carries flex:1 1 260px so it shares a ROW in the panels above.
   The row's left side is a COLUMN, where that same grow makes every field
   stretch to the height of the photo beside it and leaves canyons between the
   labels. Children of a column never grow. */
.bb-pos-editor .bb-pos-row-l > * { flex: 0 0 auto; }
.bb-pos-editor .bb-pos-row-b { align-items: flex-start; }
/* ---- Positions on a product: attach a set, take what applies, price it here --
   Inside a WooCommerce options panel, so every label float is reset or the
   inputs drop out of their rows. */
#bundle_boss_options_panel .bb-posc { margin: 14px 12px 4px; padding: 12px 14px; background: #f6f7f7; border: 1px solid #e0e0e0; border-radius: 8px; }
#bundle_boss_options_panel .bb-posc-head { margin-bottom: 10px; }
#bundle_boss_options_panel .bb-posc-head b { display: block; color: #1d2327; }
#bundle_boss_options_panel .bb-posc-sub { font-size: 12px; color: #646970; }
#bundle_boss_options_panel .bb-posc-none { font-size: 12.5px; color: #646970; margin: 0; }
#bundle_boss_options_panel .bb-posc-sets { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
#bundle_boss_options_panel .bb-posc-set { background: #fff; border: 1px solid #dcdcde; border-radius: 8px; overflow: hidden; }
#bundle_boss_options_panel .bb-posc-set.is-gone { border-color: #f0b849; background: #fcf9e8; }
#bundle_boss_options_panel .bb-posc-set-h { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: #f6f7f7; border-bottom: 1px solid #dcdcde; }
#bundle_boss_options_panel .bb-posc-set.is-gone .bb-posc-set-h { background: transparent; border-bottom: 0; }
#bundle_boss_options_panel .bb-posc-set-h b { font-size: 13px; color: #1d2327; }
#bundle_boss_options_panel .bb-posc-edit { font-size: 11.5px; }
#bundle_boss_options_panel .bb-posc-gone { font-size: 11.5px; color: #8a6d0b; flex: 1; }
#bundle_boss_options_panel .bb-posc-drop { margin-left: auto; flex: none; }
#bundle_boss_options_panel .bb-posc-rows { display: flex; flex-direction: column; }
#bundle_boss_options_panel .bb-posc-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 12px; border-top: 1px solid #f0f0f1; float: none; }
#bundle_boss_options_panel .bb-posc-rows > .bb-posc-row:first-child { border-top: 0; }
#bundle_boss_options_panel label.bb-posc-on { float: none !important; width: auto !important; margin: 0 !important; display: inline-flex; align-items: center; gap: 7px; flex: 0 1 190px; min-width: 150px; }
#bundle_boss_options_panel label.bb-posc-on input { float: none !important; width: auto !important; margin: 0 !important; }
#bundle_boss_options_panel .bb-posc-name { font-weight: 600; font-size: 13px; color: #1d2327; }
#bundle_boss_options_panel .bb-posc-price { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#bundle_boss_options_panel .bb-posc-price select { float: none !important; width: auto !important; margin: 0 !important; border: 1px solid #dcdcde; border-radius: 5px; padding: 4px 26px 4px 7px; font-size: 12px; background-position: right 6px center; }
#bundle_boss_options_panel .bb-posc-movebtn.button { background: #fff; border: 1px solid #dcdcde; border-radius: 5px; color: #2c3338; font-size: 12px; line-height: 1; padding: 6px 11px; min-height: 0; box-shadow: none; }
#bundle_boss_options_panel .bb-posc-movebtn.button:hover { border-color: #8c8f94; color: #1d2327; background: #fff; }
/* Inheritance signal: a row still matching the set reads muted with a quiet
   "From set"; the moment a value differs it goes solid, the row shows "Changed
   for this product", and a reset arrow appears beside the changed field. */
#bundle_boss_options_panel .bb-posc-status { font-size: 10.5px; font-weight: 700; margin-left: 8px; vertical-align: 1px; }
#bundle_boss_options_panel .bb-posc-status .from { color: #8c8f94; font-weight: 500; }
#bundle_boss_options_panel .bb-posc-status .chg { display: none; background: #fff1ee; color: #d4381f; border-radius: 20px; padding: 1px 8px; }
#bundle_boss_options_panel .bb-posc-row.is-changed .bb-posc-status .from { display: none; }
#bundle_boss_options_panel .bb-posc-row.is-changed .bb-posc-status .chg { display: inline-block; }
#bundle_boss_options_panel .bb-posc-price input { color: #8c8f94; }
#bundle_boss_options_panel .bb-posc-price select { color: #8c8f94; }
#bundle_boss_options_panel .bb-posc-row.is-changed .bb-posc-price input,
#bundle_boss_options_panel .bb-posc-row.is-changed .bb-posc-price select { color: #1d2327; font-weight: 600; }
#bundle_boss_options_panel .bb-posc-resetfee,
#bundle_boss_options_panel .bb-posc-resetzone { border: 0; background: none; cursor: pointer; color: #2271b1; font-size: 15px; line-height: 1; padding: 2px 5px; border-radius: 4px; }
#bundle_boss_options_panel .bb-posc-resetfee:hover,
#bundle_boss_options_panel .bb-posc-resetzone:hover { background: rgba(34,113,177,.1); }
#bundle_boss_options_panel .bb-posc-resetfee[hidden],
#bundle_boss_options_panel .bb-posc-resetzone[hidden] { display: none; }
#bundle_boss_options_panel .bb-posc-move { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
#bundle_boss_options_panel .bb-posc-nophoto { font-size: 11.5px; color: #8c8f94; flex-basis: 100%; }
#bundle_boss_options_panel .bb-posc-nophoto[hidden] { display: none; }
#bundle_boss_options_panel .bb-posc-stage { position: relative; flex-basis: 100%; max-width: 240px; margin: 6px 0 2px; background: #f0f0f1; border: 1px solid #c9c9cf; border-radius: 6px; overflow: hidden; user-select: none; }
#bundle_boss_options_panel .bb-posc-stage[hidden] { display: none; }
#bundle_boss_options_panel .bb-posc-stage img { display: block; width: 100%; height: auto; }
/* The HERE box on the product panel shares the library editor's box, but the
   library's positioning rules are scoped to .bb-pos-editor, an ancestor the
   panel does not have. Without this the box falls into normal flow and drops
   to the bottom of the photo. Re-scope the same rules under the panel. */
#bundle_boss_options_panel .bb-posc-stage .bb-pos-box { position: absolute; box-sizing: border-box; border: 1px dashed #2271b1; background: rgba( 34, 113, 177, .1 ); cursor: move; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#bundle_boss_options_panel .bb-posc-stage .bb-pos-boxlab { font-size: 10px; font-weight: 700; color: #2271b1; pointer-events: none; letter-spacing: .04em; }
#bundle_boss_options_panel .bb-posc-stage .bb-pos-grip { position: absolute; right: -4px; bottom: -4px; width: 11px; height: 11px; background: #2271b1; border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize; }
#bundle_boss_options_panel .bb-posc-add { display: flex; align-items: center; gap: 12px; }
#bundle_boss_options_panel .bb-posc-manage { font-size: 11.5px; }
/* The aim-model row dress: the photo the position lands on, and the plain
   sentence saying so, under the name. The thumb is decoration for a row the
   checkbox already owns, so it sits outside the label and never toggles. */
#bundle_boss_options_panel .bb-posc-thumb { flex: none; width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: #f0f0f1; border: 1px solid #dcdcde; }
#bundle_boss_options_panel .bb-posc-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
#bundle_boss_options_panel .bb-posc-thumb.is-empty { background: repeating-linear-gradient(45deg, #f6f7f7, #f6f7f7 4px, #f0f0f1 4px, #f0f0f1 8px); }
#bundle_boss_options_panel .bb-posc-place { display: block; font-weight: 400; font-size: 11.5px; color: #646970; margin-top: 1px; }
#bundle_boss_options_panel label.bb-posc-on { align-items: flex-start; }
#bundle_boss_options_panel label.bb-posc-on input { margin-top: 3px !important; }
/* The storefront heading + how-it-appears controls, side by side. WooCommerce
   floats every label in its panels into a 150px gutter column; unfloat these
   or they wedge beside the set cards with an input the width of a stamp. */
#bundle_boss_options_panel .bb-posc-headctls { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 12px; }
#bundle_boss_options_panel label.bb-posc-label { float: none !important; display: flex; flex-direction: column; gap: 4px; margin: 0 !important; width: auto !important; flex: 1 1 300px; max-width: 420px; }
#bundle_boss_options_panel label.bb-posc-label span { font-size: 12px; color: #646970; margin: 0; }
#bundle_boss_options_panel label.bb-posc-label input,
#bundle_boss_options_panel label.bb-posc-label select { width: 100%; border: 1px solid #dcdcde; border-radius: 5px; padding: 6px 9px; font-size: 13px; }
#bundle_boss_options_panel label.bb-posc-label em { font-style: normal; font-size: 11.5px; color: #8c8f94; line-height: 1.5; }/* The seller's artwork rules, inside a position row. */
.bb-pos-editor .bb-pos-art { display: flex; flex-direction: column; gap: 11px; padding-top: 11px; border-top: 1px solid #f0f0f1; }
.bb-pos-editor .bb-pos-art[hidden] { display: none; }
.bb-pos-editor .bb-pos-helpwrap { display: flex; flex-direction: column; gap: 10px; padding-left: 12px; border-left: 2px solid #dcdcde; }
.bb-pos-editor .bb-pos-helpwrap[hidden] { display: none; }
.bb-pos-editor .bb-pos-mm-in { display: inline-flex; align-items: center; border: 1px solid #dcdcde; border-radius: 5px; overflow: hidden; background: #fff; width: max-content; }
.bb-pos-editor .bb-pos-mm-in input { border: 0 !important; border-radius: 0 !important; width: 72px; padding: 6px 8px !important; }
.bb-pos-editor .bb-pos-artbox { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
/* Fields nested in the artwork/help columns must NOT inherit the horizontal
   flex-basis (260px), or it becomes a HEIGHT and blows the column open with
   huge gaps. The row-l reset only reaches direct children, so reset here too. */
.bb-pos-editor .bb-pos-art .bb-pos-field,
.bb-pos-editor .bb-pos-helpwrap .bb-pos-field { flex: 0 0 auto; }

/* The lettering a position offers: the same powers a text field has. */
.bb-pos-styling { display: flex; flex-direction: column; gap: 9px; padding-top: 11px; border-top: 1px solid #f0f0f1; }
.bb-pos-styling[hidden] { display: none; }
.bb-pos-styling .bb-pos-field { flex: 0 0 auto; }
.bb-pos-fonts { display: flex; flex-wrap: wrap; gap: 7px; }
.bb-pos-font { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #dcdcde; border-radius: 20px; padding: 4px 11px; font-size: 12.5px; background: #fff; cursor: pointer; }
.bb-pos-font input { margin: 0; }
.bb-pos-cols { display: flex; gap: 7px; }
.bb-pos-col { width: 84px; border: 1px solid #dcdcde; border-radius: 5px; padding: 5px 8px; font-size: 12px; font-family: Consolas, Monaco, monospace; }

/* =================================================================
   Customer uploads — the AddOnBoss landing's fulfilment settings.
   Same house language as the option-sets editor: coral identity, a
   single card, custom on/off switches, coral rename chips + live
   preview, a coral primary Save.
   ================================================================= */
.bb-uploads .bb-editor { max-width: 720px; }
.bb-uploads .bb-edhead strong { font-size: 15px; font-weight: 700; color: #1d2327; }
.bb-uploads .bb-edbody { padding: 4px 20px 18px; }
.bb-uploads .bb-msec { border-top: 1px solid #f1f2f4; padding: 16px 0 6px; }
.bb-uploads .bb-msec:first-child { border-top: 0; padding-top: 8px; }

/* A settings row: the copy on the left, the switch pinned right. Shared by
   the uploads screen and the set editor's chip-pin row (which rendered as a
   bare unstyled checkbox while these rules were scoped to uploads only). */
.bb-uploads .bb-set-row, .bb-optsets .bb-set-row { display: flex; align-items: flex-start; gap: 20px; padding: 13px 0; max-width: 720px; }
.bb-uploads .bb-set-copy, .bb-optsets .bb-set-copy { flex: 1 1 auto; }
.bb-uploads .bb-set-t, .bb-optsets .bb-set-t { display: block; font-weight: 650; font-size: 13.5px; color: #1d2327; }
.bb-uploads .bb-set-d, .bb-optsets .bb-set-d { display: block; font-size: 12.5px; color: #646970; margin-top: 3px; line-height: 1.45; max-width: 62ch; }

/* Custom coral on/off switch (replaces the native checkbox). */
.bb-uploads .bb-switch, .bb-optsets .bb-switch { position: relative; flex: 0 0 auto; display: inline-block; width: 42px; height: 24px; margin-top: 1px; }
.bb-uploads .bb-switch input, .bb-optsets .bb-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.bb-uploads .bb-switch-track, .bb-optsets .bb-switch-track { position: absolute; inset: 0; background: #d3d5da; border-radius: 999px; transition: background .16s ease; }
.bb-uploads .bb-switch-track::before, .bb-optsets .bb-switch-track::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .16s ease; }
.bb-uploads .bb-switch input:checked + .bb-switch-track, .bb-optsets .bb-switch input:checked + .bb-switch-track { background: #d8321f; }
.bb-uploads .bb-switch input:checked + .bb-switch-track::before, .bb-optsets .bb-switch input:checked + .bb-switch-track::before { transform: translateX(18px); }
.bb-uploads .bb-switch input:focus-visible + .bb-switch-track, .bb-optsets .bb-switch input:focus-visible + .bb-switch-track { outline: 2px solid #fd4730; outline-offset: 2px; }

/* Rename: coral-outline token chips, an input, a coral live preview strip. */
.bb-uploads .bb-up-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.bb-uploads .bb-up-chip { display: inline-flex; align-items: center; border: 1.5px solid #fd4730; border-radius: 16px; padding: 4px 13px; background: #fff; color: #d4381f; font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.4; cursor: pointer; transition: background .12s ease, color .12s ease; }
.bb-uploads .bb-up-chip:hover { background: #fd4730; color: #fff; }
.bb-uploads .bb-up-chip:focus-visible { outline: 2px solid #fd4730; outline-offset: 2px; }
.bb-uploads .bb-up-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bb-uploads .bb-up-field input[type="text"] { flex: 1 1 auto; min-width: 240px; border: 1px solid #dcdcde; border-radius: 8px; padding: 8px 12px; font-size: 13px; background: #fff; box-shadow: none; }
.bb-uploads .bb-up-field input[type="text"]:focus { border-color: #fd4730; box-shadow: none; outline: none; }
.bb-uploads .bb-up-clear { border: 0; background: none; color: #646970; cursor: pointer; font: inherit; text-decoration: underline; }
.bb-uploads .bb-up-clear:hover { color: #d4381f; }
.bb-uploads .bb-up-preview { display: flex; align-items: center; gap: 11px; margin-top: 13px; padding: 11px 14px; background: linear-gradient(180deg, #fff1ee, #fff 90%); border: 1px solid #fd4730; border-left-width: 3px; border-radius: 9px; }
.bb-uploads .bb-up-pv-l { color: #646970; text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.bb-uploads .bb-up-preview code { background: none; color: #1d2327; font-weight: 600; font-size: 13px; padding: 0; }
.bb-uploads .bb-up-foot { margin-top: 18px; }
.bb-uploads .bb-up-foot .button.bb-cta { height: 38px; display: inline-flex; align-items: center; }

/* The naming scheme dropdown above the builder. */
.bb-uploads .bb-up-schemerow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; font-weight: 600; }
.bb-uploads .bb-up-schemerow select { min-width: 280px; border-radius: 8px; }
.bb-uploads #bb-up-builder { margin-top: 4px; }

/* Storefront colours: a picker, the hex, and a Clear per row. The picker is
   the friendly control; the hex box doubles as the "not set" state, with its
   placeholder saying what empty means. */
.bb-uploads .bb-col-ctl { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.bb-uploads .bb-col-pick { width: 44px; height: 32px; padding: 2px; border: 1px solid #dcdcde; border-radius: 8px; background: #fff; cursor: pointer; }
/* Wide enough for the placeholder it actually carries. At 96px "Follows
   your theme" was cut to "Follows your t", which reads like a bug rather
   than an invitation to leave the field alone. */
.bb-uploads .bb-col-hex { width: 148px; border: 1px solid #dcdcde; border-radius: 8px; padding: 5px 9px; font-size: 12.5px; background: #fff; }
.bb-uploads .bb-col-hex:focus { border-color: #fd4730; box-shadow: none; outline: none; }
.bb-uploads .bb-col-clear { border: 0; background: none; color: #646970; cursor: pointer; font: inherit; font-size: 12.5px; text-decoration: underline; }
.bb-uploads .bb-col-clear:hover { color: #d4381f; }

/* Quality is a two-or-three digit number; the default control width clipped
   "90" to "9(". Also give the panel's own controls room so nothing truncates. */
#bundle_boss_options_panel .bb-pf-imgpanel input[type="number"] { width: 78px; }
#bundle_boss_options_panel .bb-pf-imgpanel .bb-pf-dimrow input { width: 72px; }
/* An "Also accept" hint under a narrow field wrapped the whole row awkwardly;
   let that one control own a line and keep the rest of the row tidy. */
#bundle_boss_options_panel .bb-pf-extratypes { flex: 1 1 320px; }
#bundle_boss_options_panel .bb-pf-extratypes input { width: 100%; }

/* ------------------------------------------------------------------ */
/* First-product checklist (includes/onboarding.php): the landing card
   that ticks itself off real store state, its compact trail on the
   empty library, and the next-action link a notice may carry.        */
/* ------------------------------------------------------------------ */

.bb-firstrun { margin: 14px 0 20px; }
.bb-firstrun-head { display: flex; align-items: center; gap: 12px; }
.bb-firstrun-count { font-size: 12px; color: #646970; font-weight: 600; }
.bb-firstrun-x {
	margin-left: auto; text-decoration: none; color: #8a8f98; font-size: 13px;
	line-height: 1; padding: 6px; border-radius: 7px;
}
.bb-firstrun-x:hover { color: #d4381f; background: #fff1ee; }
.bb-firstrun-steps { list-style: none; margin: 0; padding: 0; counter-reset: bb-frstep; }
.bb-frstep {
	display: flex; align-items: center; gap: 12px; margin: 0;
	padding: 11px 2px; border-bottom: 1px solid #f0f0f1;
}
.bb-frstep:last-child { border-bottom: 0; }
.bb-frtick {
	counter-increment: bb-frstep;
	flex: none; display: grid; place-items: center; width: 26px; height: 26px;
	border: 2px solid #dcdcde; border-radius: 50%;
	font-size: 13px; font-weight: 700; color: #8a8f98;
}
.bb-frstep:not(.is-done) .bb-frtick::before { content: counter(bb-frstep); }
.bb-frstep.is-done .bb-frtick { border-color: #1a8a4e; background: #eaf7ef; color: #1a8a4e; }
.bb-frcopy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bb-frtitle { font-weight: 600; font-size: 13.5px; color: #1d2327; }
.bb-frstep.is-done .bb-frtitle { color: #646970; font-weight: 500; text-decoration: line-through; text-decoration-color: rgba(26, 138, 78, 0.45); }
.bb-frsub { font-size: 12px; color: #646970; }
.bb-frnext { margin-left: auto; flex: none; }
.bb-firstrun-donenote { margin: 10px 2px 2px; font-size: 12.5px; color: #1a8a4e; font-weight: 600; }

/* The compact trail on the empty Option Sets library. */
.bb-firstrun-trail { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.bb-frchip {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 12px; color: #646970; background: #fff;
	border: 1px solid #e2e4e8; border-radius: 999px; padding: 4px 12px 4px 5px;
}
.bb-frchip-n {
	display: grid; place-items: center; width: 18px; height: 18px;
	border-radius: 50%; background: #f1f2f4; color: #8a8f98;
	font-size: 11px; font-weight: 700;
}
.bb-frchip.is-done { border-color: #bfe3cd; }
.bb-frchip.is-done .bb-frchip-n { background: #eaf7ef; color: #1a8a4e; }

/* The one next action a notice may carry, sat beside its sentence. */
.notice .bb-notice-act { margin-left: 8px; vertical-align: baseline; }
/* -----------------------------------------------------------------
   Quantity discount: the product panel section (Pro). Rides the house
   section chrome (bb-msec, bb-seg, bb-datawarn, bb-mlive); only the
   band rows and their small controls are its own.
   ----------------------------------------------------------------- */
.bb-qd-on { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #1d2327; margin: 2px 0 10px; cursor: pointer; }
.bb-qd-on input { margin: 0; }
.bb-qd-body { padding: 2px 0 4px; }
.bb-qd-modes { margin: 2px 0 6px; }
.bb-qd-rows { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 6px; max-width: 460px; }
.bb-qd-row { display: grid; grid-template-columns: minmax(150px, 1fr) auto 110px 28px; gap: 7px; align-items: center; }
/* Woo's options-panel CSS floats every input in the panel and gives it its own
   width, so each field sat at 144px inside a 287px grid cell: the range box
   stopped halfway, the price box stranded itself mid-row, and the whole thing
   read as though it had no columns. The grid was right all along; the inputs
   were never filling it. Same neutralising the override that .bb-ovr-cell
   needed, for the same reason. */
.woocommerce_options_panel .bb-qd-row input,
.bb-qd-row input { float: none !important; width: 100% !important; margin: 0 !important; box-sizing: border-box; }
/* The columns say what they are. Two unlabelled boxes and a currency symbol
   left a merchant guessing which number was the quantity and which the price. */
.bb-qd-head { display: grid; grid-template-columns: minmax(150px, 1fr) auto 110px 28px; gap: 7px; max-width: 460px; margin: 10px 0 0; }
.bb-qd-head span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #787c82; }
.bb-qd-head .bb-qd-head-val { grid-column: 3; }
.bb-qd-sym { color: #646970; font-weight: 600; font-size: 13px; min-width: 14px; text-align: right; }
.bb-qd-remove { border: 0; background: none; color: #b0b4bb; font-size: 17px; line-height: 1; cursor: pointer; padding: 4px; border-radius: 5px; }
.bb-qd-remove:hover { color: #d4381f; background: #fcf0f1; }
.bb-qd-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 8px; }
/* A real button. It was a plain outlined WP button sitting under two outlined
   text boxes, which read as another disabled field rather than the one thing
   on the row you are meant to press. */
#bb-qd-add.button, #bb-qd-add.button:hover, #bb-qd-add.button:focus {
	background: #fd4730; border-color: #fd4730; color: #fff; font-weight: 600;
	box-shadow: none; text-shadow: none; border-radius: 6px; padding: 0 14px; height: 32px; line-height: 30px;
}
#bb-qd-add.button:hover { filter: brightness(0.95); }
#bb-qd-add.button:focus { outline: 2px solid #fd4730; outline-offset: 2px; }
.bb-qd-starts { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.bb-qd-startlab { margin: 0; }
.bb-qd-start { text-decoration: none; font-variant-numeric: tabular-nums; }
.bb-qd-subh { margin-top: 16px; }
.bb-qd-optd { margin-top: 12px; }
#bb-qd-warn { margin-left: 0; }