/**
 * Storelly Product Builder — Storefront pricing-options style: "WP / Cloodo" (WooCommerce).
 *
 * A self-contained, theme-proof buyer-options style. Activated by the
 * `nbo-style-cloodo` class on `.nbo-wrapper`; every rule is scoped under
 * `.nbo-wrapper.nbo-style-cloodo` so it never leaks into the host theme and
 * other option styles are unaffected. Values come from _tokens.css
 * (--st-*, --nbd-*) so the look is identical on any WordPress theme.
 * Philosophy: "Configure with Confidence" — live price, clear fields,
 * guided progress, strong CTAs.
 */

/* ════════════════════════════════════════════════════════════
   Theme-proof base — neutralize host-theme styles (structure only;
   body font still inherits so it sits naturally in the page).
   ════════════════════════════════════════════════════════════ */
.nbo-wrapper.nbo-style-cloodo,
.nbo-wrapper.nbo-style-cloodo *,
.nbo-wrapper.nbo-style-cloodo *::before,
.nbo-wrapper.nbo-style-cloodo *::after { box-sizing: border-box; }
.nbo-wrapper.nbo-style-cloodo button,
.nbo-wrapper.nbo-style-cloodo input,
.nbo-wrapper.nbo-style-cloodo select,
.nbo-wrapper.nbo-style-cloodo textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    letter-spacing: normal;
    text-transform: none;
}
.nbo-wrapper.nbo-style-cloodo button { -webkit-appearance: none; appearance: none; }
.nbo-wrapper.nbo-style-cloodo a { box-shadow: none; text-decoration: none; }
.nbo-wrapper.nbo-style-cloodo label { margin: 0; font-weight: inherit; text-transform: none; }
.nbo-wrapper.nbo-style-cloodo p { margin: 0; }

/* ════════════════════════════════════════════════════════════
   Storefront token set — overrides the admin-tuned _tokens.css values
   WITHIN this style only. Bigger, refined type + warm hairline borders +
   soft shadows give a premium buyer feel (brand stays Storelly blue).
   Because these are CSS custom properties, every component rule below
   inherits the upgrade automatically.
   ════════════════════════════════════════════════════════════ */
.nbo-wrapper.nbo-style-cloodo {
    /* brand — NEUTRAL ink/charcoal so this template suits ANY store's branding.
       The only "colour" is the green price (value) — everything else is neutral. */
    --st-brand: #292524;          /* stone-800 ink (selected border, CTA, progress) */
    --st-brand-pressed: #1c1917;  /* stone-900 (hover/pressed, hero total) */
    --st-brand-deep: #1c1917;
    --st-brand-soft: #e7e5e4;     /* stone-200 — focus rings / soft tint */
    --st-brand-tint: #fafaf9;     /* stone-50 — selected card bg */
    --st-accent: #292524;         /* badges (Popular/Best value) in ink */
    /* warm neutral surfaces + hairline borders (stone — cozier, buy-ready feel) */
    --nbd-st-bg: #ffffff;
    --nbd-st-bg-soft: #faf7f2;
    --nbd-st-bg-input: #ffffff;
    --nbd-st-text: #1c1917;
    --nbd-st-text-soft: #57534e;
    --nbd-st-text-mute: #a8a29e;
    --nbd-st-border: #e7e2da;
    --nbd-st-border-strong: #d6cfc4;
    --nbd-st-border-light: #efeae2;
    --nbd-st-border-subtle: #f5f1ea;
    --nbd-st-border-brand: #bfdbfe;
    --nbd-color-success: #059669;
    --nbd-color-success-soft: #d1fae5;
    --nbd-color-warning: #f59e0b;
    --nbd-color-warning-soft: #fef3c7;
    --nbd-color-danger: #dc2626;
    /* accent + a distinct price color — green reads as "good value" and stays
       clearly separate from both the dark name text and the warm brand. */
    --st-accent-soft: #f5f5f4;       /* neutral soft (hover tint) */
    --cld-price: #047857;            /* emerald — paid add-ons (the one accent colour) */
    --cld-price-free: #059669;        /* green — "Free" */
    /* selection accent — a calm, universal blue that makes the CHOSEN option pop
       a little (everything else stays neutral ink, so it still suits any store). */
    --cld-select: #2563eb;            /* blue-600 — selected border / ✓ badge */
    --cld-select-strong: #1d4ed8;     /* blue-700 */
    --cld-select-soft: #dbeafe;       /* blue-100 — selected ring */
    --cld-select-tint: #eff6ff;       /* blue-50 — selected card background */
    /* storefront type scale (larger than admin) */
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 13px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 24px;
    --text-4xl: 30px;
    --text-5xl: 38px;
    /* softer radii + shadows */
    --nbd-radius-sm: 6px;
    --nbd-radius-md: 10px;
    --nbd-radius-lg: 14px;
    --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .05);
    --shadow-card-hover: 0 2px 6px rgba(16, 24, 40, .06), 0 14px 30px rgba(16, 24, 40, .10);

    color: var(--nbd-st-text);
    font-family: inherit;
    line-height: 1.5;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}

/* ── Container & field blocks ─────────────────────────────── */
.nbo-wrapper.nbo-style-cloodo .nbo-fields-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--nbd-space-3);
}
/* Each option field is a soft card — clear visual grouping per choice. */
.nbo-wrapper.nbo-style-cloodo .nbd-option-field {
    background: var(--nbd-st-bg);
    border: 1px solid var(--nbd-st-border-subtle);
    border-radius: var(--nbd-radius-lg);
    padding: 14px 16px 16px;
    transition: var(--transition-fast);
}
.nbo-wrapper.nbo-style-cloodo .nbd-option-field:hover {
    border-color: var(--nbd-st-border-light);
}
.nbo-wrapper.nbo-style-cloodo .nbd-option-field:focus-within {
    border-color: var(--st-brand);
    box-shadow: 0 0 0 3px var(--st-brand-tint);
}

/* ── Field header (title + count + chosen, then description) ── */
.nbo-wrapper.nbo-style-cloodo .pcpb-field-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    /* Override legacy app-product-builder.css gray bar header */
    background: transparent;
    padding: 0;
    color: var(--nbd-st-text);
}
.nbo-wrapper.nbo-style-cloodo .pcpb-field-header__row {
    display: flex;
    align-items: baseline;
    gap: var(--nbd-space-2);
    flex-wrap: wrap;
    min-height: 1.6em;
}
.nbo-wrapper.nbo-style-cloodo .pcpb-field-header label {
    margin: 0 !important; /* beat legacy app-product-builder.css label margin-left */
    padding: 0 !important;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    letter-spacing: -0.01em;
    /* Title is the *name* of the choice — make it the strongest text in the row. */
    color: var(--nbd-st-text);
    line-height: 1.4;
    overflow: visible;
}
.nbo-wrapper.nbo-style-cloodo .pcpb-field-desc {
    margin: 4px 0 0;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--nbd-st-text-soft);
    max-width: 62ch;
}
.nbo-wrapper.nbo-style-cloodo .nbd-required {
    color: var(--nbd-color-danger);
    margin-left: 2px;
    font-weight: var(--font-bold);
}
.nbo-wrapper.nbo-style-cloodo .nbd-help-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 16px;
    height: 16px;
    border-radius: var(--nbd-radius-pill);
    background: var(--nbd-st-bg-soft);
    border: 1px solid var(--nbd-st-border-light);
    color: var(--nbd-st-text-soft);
    font-size: 10px;
    font-weight: var(--font-bold);
    line-height: 1;
    cursor: help;
    transition: var(--transition-fast);
}
.nbo-wrapper.nbo-style-cloodo .nbd-help-tip:hover { background: var(--st-brand-soft); border-color: var(--st-brand-soft); color: var(--st-brand-pressed); }
.nbo-wrapper.nbo-style-cloodo .nbd-help-tip::before { content: "?"; }

/* ── Swatches → rich option cards (visual + name + price) ── */
.nbo-wrapper.nbo-style-cloodo .nbd-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: var(--nbd-space-3);
}
.nbo-wrapper.nbo-style-cloodo .nbd-swatch-wrap input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.nbo-wrapper.nbo-style-cloodo .nbd-swatch-card {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    border: 1.5px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    background: var(--nbd-st-bg);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-card);
}
.nbo-wrapper.nbo-style-cloodo .nbd-swatch-card:hover {
    border-color: var(--st-brand-soft);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}
.nbo-wrapper.nbo-style-cloodo input[type="radio"]:checked + .nbd-swatch-card {
    /* display:flex MUST be re-asserted here: legacy app-product-builder.css
       (`.nbd-swatch-wrap input:checked+label { display:inline-block }`) otherwise
       un-flexes the card, which makes the image <span> revert to inline and its
       height collapse — i.e. the picture vanishes on the selected card. */
    display: flex;
    flex-direction: column;
    border-color: var(--cld-select);
    background: var(--cld-select-tint);
    box-shadow: 0 0 0 3px var(--cld-select-soft);
}
.nbo-wrapper.nbo-style-cloodo input[type="radio"]:focus-visible + .nbd-swatch-card {
    box-shadow: 0 0 0 3px var(--cld-select-soft);
}
.nbo-wrapper.nbo-style-cloodo .nbd-swatch__visual {
    position: relative;
    height: 92px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--nbd-st-bg-soft);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
/* Real product photos (e.g. bike frames): fill the whole tile (cover) so the image
   always reaches the frame edges and never floats with empty gaps around it, no matter
   what dimensions the merchant uploaded. White backdrop reads cleaner than the cream
   tile behind any transparent-PNG edges. */
.nbo-wrapper.nbo-style-cloodo .nbd-swatch__visual--photo {
    background-size: cover;
    background-position: center;
    background-color: #ffffff;
}
.nbo-wrapper.nbo-style-cloodo .nbd-swatch__check {
    position: absolute;
    top: var(--nbd-space-1);
    right: var(--nbd-space-1);
    width: 18px;
    height: 18px;
    border-radius: var(--nbd-radius-pill);
    background: var(--cld-select);
    color: #fff;
    font-size: 11px;
    font-weight: var(--font-bold);
    display: none;
    align-items: center;
    justify-content: center;
}
.nbo-wrapper.nbo-style-cloodo input[type="radio"]:checked + .nbd-swatch-card .nbd-swatch__check { display: flex; }
/* --- Sub-attribute swatch row (design components: Leather -> Black/Grey...) --- */
.nbo-wrapper.nbo-style-cloodo .nbd-subswatch {
    margin-top: var(--nbd-space-3);
    padding: var(--nbd-space-3);
    border: 1px dashed var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    background: var(--nbd-st-bg-soft);
}
.nbo-wrapper.nbo-style-cloodo .nbd-subswatch__label {
    font-size: 13px;
    font-weight: var(--font-bold);
    color: var(--nbd-st-text-soft, #555);
    margin-bottom: var(--nbd-space-2);
}
.nbo-wrapper.nbo-style-cloodo .nbd-subswatch__grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}
/* Keep the form <select> out of view regardless of theme support for
   .screen-reader-text (the visible tiles drive selection via ng-click). */
.nbo-wrapper.nbo-style-cloodo .nbd-subswatch__select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* Sub tiles select via ng-class .is-active (not a radio), so mirror the
   checked-card visual for the active state. */
.nbo-wrapper.nbo-style-cloodo .nbd-swatch-card.is-active {
    display: flex;
    flex-direction: column;
    border-color: var(--cld-select);
    background: var(--cld-select-tint);
    box-shadow: 0 0 0 3px var(--cld-select-soft);
}
.nbo-wrapper.nbo-style-cloodo .nbd-swatch-card.is-active .nbd-swatch__check { display: flex; }
.nbo-wrapper.nbo-style-cloodo .nbd-swatch__body {
    padding: var(--nbd-space-3);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.nbo-wrapper.nbo-style-cloodo .nbd-swatch__name {
    font-size: var(--text-md);
    font-weight: var(--font-bold);
    color: var(--nbd-st-text);
    line-height: 1.2;
}
.nbo-wrapper.nbo-style-cloodo .nbd-swatch__sub {
    font-size: var(--text-sm);
    color: var(--nbd-st-text-mute);
    line-height: 1.35;
}
.nbo-wrapper.nbo-style-cloodo .nbd-swatch__price {
    font-size: var(--text-md);
    font-weight: var(--font-extrabold);
    color: var(--cld-price);
}
.nbo-wrapper.nbo-style-cloodo .nbd-swatch__price--free { color: var(--cld-price-free); }
.nbo-wrapper.nbo-style-cloodo .nbd-swatch__price .woocommerce-Price-amount { font-size: inherit; color: inherit; }
.nbo-wrapper.nbo-style-cloodo .nbd-swatch__badge {
    position: absolute;
    top: var(--nbd-space-1);
    left: var(--nbd-space-1);
    padding: 1px var(--nbd-space-2);
    border-radius: var(--nbd-radius-pill);
    background: var(--st-accent);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ── Radio & Label options → pill chips ──────────────────── */
.nbo-wrapper.nbo-style-cloodo .__nbd-radio-wrap,
.nbo-wrapper.nbo-style-cloodo .nbd-label-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nbd-space-2);
}
.nbo-wrapper.nbo-style-cloodo .__nbd-radio-wrap input[type="radio"],
.nbo-wrapper.nbo-style-cloodo .nbd-label-wrap input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.nbo-wrapper.nbo-style-cloodo .__nbd-radio-wrap label,
.nbo-wrapper.nbo-style-cloodo .nbd-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-2);
    min-width: 104px;
    margin: 0;
    padding: var(--nbd-space-3) var(--nbd-space-5);
    border: 2px solid var(--nbd-st-border-strong);
    border-radius: var(--nbd-radius-lg);
    background: var(--nbd-st-bg);
    color: var(--nbd-st-text);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    line-height: 1.25;
    cursor: pointer;
    transition: var(--transition-card);
}
.nbo-wrapper.nbo-style-cloodo .__nbd-radio-wrap label:hover,
.nbo-wrapper.nbo-style-cloodo .nbd-label:hover {
    border-color: var(--st-brand);
    background: var(--st-brand-tint);
    color: var(--nbd-st-text);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}
/* Selected = soft blue tint + blue border + ring + corner check (pops, still calm) */
.nbo-wrapper.nbo-style-cloodo .__nbd-radio-wrap input[type="radio"]:checked + label,
.nbo-wrapper.nbo-style-cloodo .nbd-label-wrap input[type="radio"]:checked + .nbd-label {
    border-color: var(--cld-select);
    background: var(--cld-select-tint);
    color: var(--nbd-st-text);
    font-weight: var(--font-bold);
    box-shadow: 0 0 0 3px var(--cld-select-soft);
}
/* Chip inline price — distinct green ("good value"), bigger & bolder (price = what buyers scan) */
.nbo-wrapper.nbo-style-cloodo .chip__price {
    font-size: var(--text-lg);
    font-weight: var(--font-extrabold);
    color: var(--cld-price);
    white-space: nowrap;
}
.nbo-wrapper.nbo-style-cloodo .chip__price .woocommerce-Price-amount { font-size: inherit; color: inherit; }
/* Selected price keeps the distinct green on the light tint */
.nbo-wrapper.nbo-style-cloodo input[type="radio"]:checked + label .chip__price,
.nbo-wrapper.nbo-style-cloodo input[type="radio"]:checked + .nbd-label .chip__price { color: var(--cld-price); }

/* Name + price head wrapper (price sits beside the name) */
.nbo-wrapper.nbo-style-cloodo .nbd-label__head { display: inline-flex; align-items: baseline; gap: var(--nbd-space-2); }

/* Button-card variant — options that carry a description (upload / design / services).
   Flow as a compact responsive grid rather than full-width stacks. */
.nbo-wrapper.nbo-style-cloodo .nbd-label-wrap--cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--nbd-space-3);
}
.nbo-wrapper.nbo-style-cloodo .nbd-label-wrap--cards .nbd-label {
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: var(--nbd-space-1);
    padding: var(--nbd-space-4) var(--nbd-space-5);
}
.nbo-wrapper.nbo-style-cloodo .nbd-label-wrap--cards .nbd-label { padding: var(--nbd-space-4); }
.nbo-wrapper.nbo-style-cloodo .nbd-label-wrap--cards .nbd-label__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px var(--nbd-space-2); width: 100%; }
.nbo-wrapper.nbo-style-cloodo .nbd-label-wrap--cards .nbd-label__name { min-width: 0; }
.nbo-wrapper.nbo-style-cloodo .nbd-label-wrap--cards .nbd-label__name { font-size: var(--text-lg); font-weight: var(--font-bold); }
.nbo-wrapper.nbo-style-cloodo .nbd-label__desc { font-size: var(--text-sm); font-weight: var(--font-normal); color: var(--nbd-st-text-mute); line-height: 1.45; }
.nbo-wrapper.nbo-style-cloodo input[type="radio"]:checked + .nbd-label .nbd-label__desc { color: var(--nbd-st-text-soft); }
/* Delight: a check + a quick "pop" when a chip is selected */
.nbo-wrapper.nbo-style-cloodo .__nbd-radio-wrap input[type="radio"]:checked + label::before,
.nbo-wrapper.nbo-style-cloodo .nbd-label-wrap input[type="radio"]:checked + .nbd-label::before {
    content: "\2713";
    position: absolute;
    top: -9px;
    right: -9px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cld-select);
    color: #fff;
    font-size: 12px;
    font-weight: var(--font-bold);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
    margin: 0;
    animation: spbwcCloodoCheck .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nbo-wrapper.nbo-style-cloodo .__nbd-radio-wrap input[type="radio"]:checked + label,
.nbo-wrapper.nbo-style-cloodo .nbd-label-wrap input[type="radio"]:checked + .nbd-label {
    animation: spbwcCloodoPop .26s ease;
}
@keyframes spbwcCloodoCheck { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.3); } 100% { transform: scale(1); opacity: 1; } }
@keyframes spbwcCloodoPop { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .nbo-wrapper.nbo-style-cloodo .__nbd-radio-wrap input[type="radio"]:checked + label,
    .nbo-wrapper.nbo-style-cloodo .nbd-label-wrap input[type="radio"]:checked + .nbd-label,
    .nbo-wrapper.nbo-style-cloodo .__nbd-radio-wrap input[type="radio"]:checked + label::before,
    .nbo-wrapper.nbo-style-cloodo .nbd-label-wrap input[type="radio"]:checked + .nbd-label::before { animation: none; }
}

/* ── Dropdown (native select) ───────────────────────────────────
   Polished card-style select: 1.5px border (matches trust badges / qty tiers),
   radius-md, comfortable padding, blue selection accent on focus so it shares the
   same affordance language as the rest of the buyer UI. */
.nbo-wrapper.nbo-style-cloodo select.nbo-dropdown {
    width: 100%;
    max-width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1.5px solid var(--nbd-st-border);
    border-radius: var(--nbd-radius-md);
    background-color: var(--nbd-st-bg);
    color: var(--nbd-st-text);
    font-size: var(--text-md);
    font-weight: var(--font-bold);
    line-height: 1.4;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231c1917' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1.5 1.5l4.5 4.5 4.5-4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.nbo-wrapper.nbo-style-cloodo select.nbo-dropdown:hover {
    border-color: var(--nbd-st-border-strong);
}
.nbo-wrapper.nbo-style-cloodo select.nbo-dropdown:focus {
    outline: none;
    border-color: var(--cld-select);
    box-shadow: 0 0 0 3px var(--cld-select-soft);
}

/* ── Advanced dropdown (custom pseudo-list) ───────────────────────
   The advanced-dropdown wraps a hidden native select + a visible "result" card +
   a JS-toggled pseudo-list of rich option rows (thumb + name + description). The
   legacy CSS leaves these unstyled under Cloodo, so they fall back to default
   browser look. Apply the same card aesthetic as the native dropdown above. */
.nbo-wrapper.nbo-style-cloodo .pcpb-field-ad-dropdown-wrap { position: relative; }
.nbo-wrapper.nbo-style-cloodo .pcpb-field-ad-dropdown-wrap > .pcpb-field-content > div { position: relative; }
/* The advanced dropdown's native <select> is only a hidden value carrier — the
   .nbo-ad-result card + pseudo-list are the visible control. The display:none
   that hides it lives in app-product-builder.css, which the inline storefront
   builder (and the template/option preview) do NOT enqueue — only this
   stylesheet. Without this rule the carrier renders as a duplicate dropdown
   stacked under the styled one. Scoped to the ad-dropdown wrap so the simple
   native dropdown (which IS the visible control) is unaffected. */
.nbo-wrapper.nbo-style-cloodo .pcpb-field-ad-dropdown-wrap select.nbo-dropdown { display: none; }
.nbo-wrapper.nbo-style-cloodo .nbo-ad-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nbd-space-2);
    width: 100%;
    padding: 12px 16px;
    /* Active-badge look (matches a chosen swatch / chip card): blue selection
       accent border + soft tint bg + blue text — because a dropdown ALWAYS has a
       selected value, so it reads as "this is what you've picked" rather than a
       neutral input waiting for input. */
    border: 2px solid var(--cld-select);
    border-radius: var(--nbd-radius-md);
    background: var(--cld-select-tint);
    color: var(--nbd-st-text);
    font-size: var(--text-md);
    font-weight: var(--font-bold);
    line-height: 1.4;
    cursor: pointer;
    box-shadow: 0 0 0 3px var(--cld-select-soft);
    transition: box-shadow .15s ease, background .15s ease;
}
.nbo-wrapper.nbo-style-cloodo .nbo-ad-result:hover { background: #fff; }
.nbo-wrapper.nbo-style-cloodo .nbo-ad-result svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--cld-select);
    transition: transform .15s ease;
}
/* When the dropdown is OPEN (its parent gets `.active`), drop the soft ring +
   subtle bg so it visually un-pins to "I'm being edited" mode. */
.nbo-wrapper.nbo-style-cloodo .pcpb-field-ad-dropdown-wrap.active .nbo-ad-result {
    background: #ffffff;
    box-shadow: 0 0 0 3px var(--cld-select-soft);
}
.nbo-wrapper.nbo-style-cloodo .pcpb-field-ad-dropdown-wrap.active .nbo-ad-result svg { transform: rotate(180deg); }
.nbo-wrapper.nbo-style-cloodo .nbo-ad-result-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbo-wrapper.nbo-style-cloodo .nbo-ad-pseudo-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 320px;
    overflow-y: auto;
    padding: var(--nbd-space-2);
    border: 1.5px solid var(--nbd-st-border);
    border-radius: var(--nbd-radius-md);
    background: var(--nbd-st-bg);
    box-shadow: var(--shadow-card);
    display: none;
}
.nbo-wrapper.nbo-style-cloodo .nbo-ad-pseudo-list.active,
.nbo-wrapper.nbo-style-cloodo .pcpb-field-ad-dropdown-wrap.active .nbo-ad-pseudo-list { display: block; }
.nbo-wrapper.nbo-style-cloodo .nbo-ad-list-item {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-3);
    padding: var(--nbd-space-2) var(--nbd-space-3);
    border-radius: var(--nbd-radius-sm);
    cursor: pointer;
    transition: background-color .12s ease;
}
.nbo-wrapper.nbo-style-cloodo .nbo-ad-list-item:hover { background: var(--nbd-st-bg-soft); }
.nbo-wrapper.nbo-style-cloodo .nbo-ad-list-item.active {
    background: var(--cld-select-tint);
    box-shadow: inset 3px 0 0 var(--cld-select);
}
.nbo-wrapper.nbo-style-cloodo .nbo-ad-item-thumb {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--nbd-radius-sm);
    background-size: cover;
    background-position: center;
    background-color: #fff;
    object-fit: cover;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.nbo-wrapper.nbo-style-cloodo .nbo-ad-item-main { flex: 1 1 auto; min-width: 0; }
.nbo-wrapper.nbo-style-cloodo .nbo-ad-item-title { font-size: var(--text-md); font-weight: var(--font-bold); color: var(--nbd-st-text); line-height: 1.3; }
.nbo-wrapper.nbo-style-cloodo .nbo-ad-item-description { font-size: var(--text-sm); color: var(--nbd-st-text-soft); line-height: 1.35; margin-top: 1px; }
.nbo-wrapper.nbo-style-cloodo .nbo-ad-pseudo-sublist-toggle svg { width: 16px; height: 16px; color: var(--nbd-st-text-mute); }

/* Blue accent focus across other inputs for consistency with selection language. */
.nbo-wrapper.nbo-style-cloodo .pcpb-field-content input[type="text"]:focus,
.nbo-wrapper.nbo-style-cloodo .pcpb-field-content input[type="number"]:focus,
.nbo-wrapper.nbo-style-cloodo .nbd-field-textarea:focus {
    outline: none;
    border-color: var(--cld-select);
    box-shadow: 0 0 0 3px var(--cld-select-soft);
}

/* ── Text / number / textarea inputs ─────────────────────── */
.nbo-wrapper.nbo-style-cloodo .pcpb-field-content input[type="text"],
.nbo-wrapper.nbo-style-cloodo .pcpb-field-content input[type="number"],
.nbo-wrapper.nbo-style-cloodo .nbd-field-textarea {
    width: 100%;
    max-width: 360px;
    padding: var(--nbd-space-2) var(--nbd-space-3);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-md);
    background: var(--nbd-st-bg-input);
    color: var(--nbd-st-text);
    font-size: var(--text-md);
    font-family: inherit;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-input-inset);
}
.nbo-wrapper.nbo-style-cloodo .nbd-field-textarea { min-height: 88px; resize: vertical; }

/* Upload (file) field → dropzone-style button + accepted-types notes */
.nbo-wrapper.nbo-style-cloodo .pcpb-field-content input[type="file"] {
    width: 100%;
    max-width: 420px;
    padding: var(--nbd-space-4);
    border: 2px dashed var(--nbd-st-border-strong);
    border-radius: var(--nbd-radius-lg);
    background: var(--nbd-st-bg-soft);
    color: var(--nbd-st-text-soft);
    font-size: var(--text-md);
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition-fast);
}
.nbo-wrapper.nbo-style-cloodo .pcpb-field-content input[type="file"]:hover {
    border-color: var(--st-brand);
    background: var(--st-brand-tint);
}
.nbo-wrapper.nbo-style-cloodo .pcpb-field-content input[type="file"]::file-selector-button {
    margin-right: var(--nbd-space-3);
    padding: var(--nbd-space-2) var(--nbd-space-4);
    border: 0;
    border-radius: var(--nbd-radius-md);
    background: var(--st-brand);
    color: var(--nbd-st-text-inverse);
    font-size: var(--text-md);
    font-weight: var(--font-bold);
    font-family: inherit;
    cursor: pointer;
}
.nbo-wrapper.nbo-style-cloodo .pcpb-field-content input[type="file"]::-webkit-file-upload-button {
    margin-right: var(--nbd-space-3);
    padding: var(--nbd-space-2) var(--nbd-space-4);
    border: 0;
    border-radius: var(--nbd-radius-md);
    background: var(--st-brand);
    color: var(--nbd-st-text-inverse);
    font-weight: var(--font-bold);
    cursor: pointer;
}
.nbo-wrapper.nbo-style-cloodo .nbd-upload-notes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nbd-space-2);
    margin-top: var(--nbd-space-2);
}
.nbo-wrapper.nbo-style-cloodo .nbd-upload-note {
    padding: 1px var(--nbd-space-2);
    border-radius: var(--nbd-radius-pill);
    background: var(--nbd-st-bg-soft);
    border: 1px solid var(--nbd-st-border-light);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text-mute);
    white-space: nowrap;
}
.nbo-wrapper.nbo-style-cloodo .pcpb-field-content input[type="text"]:focus,
.nbo-wrapper.nbo-style-cloodo .pcpb-field-content input[type="number"]:focus,
.nbo-wrapper.nbo-style-cloodo .nbd-field-textarea:focus {
    outline: none;
    border-color: var(--st-brand);
    box-shadow: var(--shadow-input-focus);
}
.nbo-wrapper.nbo-style-cloodo .pcpb-field-content input[type="range"] {
    width: 100%;
    max-width: 360px;
    accent-color: var(--st-brand);
    cursor: pointer;
}
.nbo-wrapper.nbo-style-cloodo .nbd-input-range {
    display: inline-block;
    margin-left: var(--nbd-space-2);
    padding: 2px var(--nbd-space-2);
    border-radius: var(--nbd-radius-sm);
    background: var(--st-brand-soft);
    color: var(--st-brand-pressed);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

/* ── Validation messages ─────────────────────────────────── */
.nbo-wrapper.nbo-style-cloodo .nbo-invalid-option,
.nbo-wrapper.nbo-style-cloodo .nbd-invalid-notice {
    color: var(--nbd-color-danger);
    font-size: var(--text-sm);
    margin-top: var(--nbd-space-1);
}
.nbo-wrapper.nbo-style-cloodo .nbd-invalid-min,
.nbo-wrapper.nbo-style-cloodo .nbd-invalid-max { display: none; }

/* ── Summary panel ───────────────────────────────────────── */
.nbo-wrapper.nbo-style-cloodo .nbo-summary-wrapper { margin-top: var(--nbd-space-6); }
.nbo-wrapper.nbo-style-cloodo .nbo-table-summary-wrap {
    background: var(--nbd-st-bg);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-lg);
    padding: var(--nbd-space-5);
    box-shadow: var(--shadow-card);
}
.nbo-wrapper.nbo-style-cloodo .nbo-summary-title {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-2);
    margin: 0 0 var(--nbd-space-3);
    padding: 0 0 var(--nbd-space-3);
    background: transparent; /* drop the legacy warm-gray title fill bar */
    border-bottom: 1px solid var(--nbd-st-border-subtle);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--nbd-st-text);
}
.nbo-wrapper.nbo-style-cloodo .nbo-summary-title b { margin-right: auto; }
.nbo-wrapper.nbo-style-cloodo .nbo-summary-title .nbo-toggle,
.nbo-wrapper.nbo-style-cloodo .nbo-summary-title .nbo-float-summary-toggle { cursor: pointer; color: var(--nbd-st-text-mute); }
.nbo-wrapper.nbo-style-cloodo .nbo-summary-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.nbo-wrapper.nbo-style-cloodo .nbo-summary-table td { padding: var(--nbd-space-2) 0; vertical-align: top; color: var(--nbd-st-text-soft); }
.nbo-wrapper.nbo-style-cloodo .nbo-summary-table td b { color: var(--nbd-st-text); font-weight: var(--font-semibold); }
.nbo-wrapper.nbo-style-cloodo .nbo-summary-table td:last-child { text-align: right; white-space: nowrap; }
/* tbody → tfoot transition: no separator above "Options price" — keep the only
   strong divider above "Final price" so the row flow stays clean and consistent. */
.nbo-wrapper.nbo-style-cloodo .nbo-summary-table tfoot { border-top: 0; }
.nbo-wrapper.nbo-style-cloodo .nbo-summary-qty td { color: var(--nbd-st-text); }
/* Grand-total row — drop the legacy gray fill bar; use a clean rule + a big number.
   (legacy app-product-builder.css sets `.nbo-final-price { background:<gray> }`.) */
.nbo-wrapper.nbo-style-cloodo .nbo-final-price { background: transparent; }
.nbo-wrapper.nbo-style-cloodo .nbo-final-price td {
    border-top: 2px solid var(--nbd-st-border);
    padding-top: var(--nbd-space-4);
    color: var(--nbd-st-text);
    font-size: var(--text-md);
    font-weight: var(--font-bold);
    vertical-align: baseline;
}
/* The total number itself — large, confident; the "/ 1 item" suffix stays small. */
.nbo-wrapper.nbo-style-cloodo .nbo-final-price td:last-child .ng-binding {
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold);
    letter-spacing: -.02em;
    color: var(--nbd-st-text);
}
.nbo-wrapper.nbo-style-cloodo .nbo-final-price td:last-child .woocommerce-Price-amount { font-size: inherit; color: inherit; }
.nbo-wrapper.nbo-style-cloodo .nbo-total-price td { color: var(--nbd-st-text); font-size: var(--text-xl); font-weight: var(--font-extrabold); }

/* ── Buttons (Customize / Clear) ─────────────────────────── */
.nbo-wrapper.nbo-style-cloodo .nbd-button,
.nbo-wrapper.nbo-style-cloodo #pcpb-start-design {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nbd-space-2);
    padding: var(--nbd-space-3) var(--nbd-space-5);
    border: 1px solid transparent;
    border-radius: var(--nbd-radius-md);
    background: var(--st-brand);
    color: var(--nbd-st-text-inverse);
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
}
.nbo-wrapper.nbo-style-cloodo .nbd-button:hover,
.nbo-wrapper.nbo-style-cloodo #pcpb-start-design:hover {
    background: var(--st-brand-pressed);
    color: var(--nbd-st-text-inverse);
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}
/* Designer "Customize" = secondary (outline) so the real Add-to-cart stays the primary CTA.
   The extra .nbd-option-wrapper ancestor raises specificity to (1,3,0) so this beats the
   legacy app-product-builder.css rule `.wp-block-woocommerce-add-to-cart-form form.cart
   #pcpb-start-design` (1,2,1) which also uses !important and would otherwise win. */
.nbo-wrapper.nbo-style-cloodo .nbd-option-wrapper #pcpb-start-design {
    width: 100%;
    padding-block: var(--nbd-space-4);
    font-size: var(--text-lg);
    background: var(--nbd-st-bg) !important;
    color: var(--nbd-st-text) !important;
    border: 2px solid var(--nbd-st-border-strong) !important;
}
.nbo-wrapper.nbo-style-cloodo .nbd-option-wrapper #pcpb-start-design:hover {
    background: var(--nbd-st-bg-soft) !important;
    color: var(--nbd-st-text) !important;
    border-color: var(--st-brand) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}

/* ── Sticky product gallery + Customize gateway (desktop) ────────
   The pricing-option list on the right column can get long; pin the gallery (which
   contains both the product image AND the Preview & customize button) to the
   viewport so the buyer can always see the product + open the design editor while
   they scroll through options. Mobile (single-column stack) keeps natural flow. */
@media (min-width: 783px) {
    /* Target the COLUMN-LEVEL wrapper (block theme) — its parent is the flex column
       which stretches to full row height, giving sticky enough room to scroll within.
       Stickying `.woocommerce-product-gallery` directly fails because ITS parent is
       a flow-block whose height equals the gallery's natural height (no room). */
    .wp-block-woocommerce-product-image-gallery,
    .product > .woocommerce-product-gallery {
        position: sticky !important;
        top: var(--spbwc-c-sticky-top, 80px);
        align-self: flex-start;
        z-index: 1;
    }
}

/* ── Designer "Preview & customize" gateway ─────────────────────
   Self-contained (NOT scoped to .nbo-wrapper.nbo-style-cloodo) because the button
   now renders BELOW the product image (`woocommerce_product_thumbnails` hook), i.e.
   outside the cloodo options wrapper. Defines its own tokens so it looks right on
   any WP theme without inheriting from a parent wrapper. The button still opens the
   visual design preview; pricing options live separately in the summary column. */
.spbwc-customize-cta {
    /* self-contained token defaults */
    --spbwc-c-accent: #2563eb;
    --spbwc-c-accent-strong: #1d4ed8;
    --spbwc-c-accent-soft: #dbeafe;

    margin: 0 0 16px;
    /* Reorder so the Customize button renders ABOVE the product image inside the
       gallery wrapper — this way it pins at the TOP of the sticky area as soon as
       the user starts scrolling, instead of sitting hidden below the image. */
    order: -1;
}
.woocommerce-product-gallery__wrapper { display: flex; flex-direction: column; }
.spbwc-customize-btn,
a#pcpb-start-design.spbwc-customize-btn {
    position: relative;
    display: flex;
    float: none;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border: 1.5px solid var(--spbwc-c-accent-soft);
    border-radius: 14px;
    /* White card with an accent-coloured icon chip — the chip + soft drop shadow
       carry the "this is an important action" signal without the loud solid-blue. */
    background: #ffffff;
    color: #1c1917;
    text-align: left;
    text-decoration: none;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(37,99,235,.10), 0 1px 3px rgba(16,24,40,.06);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
    animation: spbwcCustomizePulse 2.6s ease-in-out infinite;
}
.spbwc-customize-btn__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--spbwc-c-accent);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(37,99,235,.22);
}
.spbwc-customize-btn__icon svg { width: 20px; height: 20px; display: block; }
.spbwc-customize-btn__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.spbwc-customize-btn__label { font-size: 16px; font-weight: 700; line-height: 1.2; color: #1c1917; }
.spbwc-customize-btn__hint  { font-size: 12px; font-weight: 400; line-height: 1.3; color: #6b6864; white-space: normal; }
.spbwc-customize-btn__arrow {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--spbwc-c-accent);
    transition: transform .15s ease;
}
.spbwc-customize-btn__arrow svg { width: 20px; height: 20px; display: block; }
.spbwc-customize-btn:hover,
a#pcpb-start-design.spbwc-customize-btn:hover {
    background: #f8faff;
    border-color: var(--spbwc-c-accent);
    color: #1c1917;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(37,99,235,.16), 0 2px 6px rgba(16,24,40,.08);
    animation: none; /* let the static hover shadow take over */
}
.spbwc-customize-btn:hover .spbwc-customize-btn__arrow { transform: translateX(3px); }
@keyframes spbwcCustomizePulse {
    /* Keep the base drop-shadow constant; pulse a soft outer ring so the white
       CTA still draws the eye without being loud. */
    0%, 100% { box-shadow: 0 4px 12px rgba(37,99,235,.10), 0 1px 3px rgba(16,24,40,.06), 0 0 0 0 rgba(37,99,235,0); }
    50%      { box-shadow: 0 4px 12px rgba(37,99,235,.10), 0 1px 3px rgba(16,24,40,.06), 0 0 0 5px rgba(37,99,235,.12); }
}
@media (prefers-reduced-motion: reduce) {
    .spbwc-customize-btn { animation: none; }
    .spbwc-customize-btn:hover .spbwc-customize-btn__arrow { transition: none; }
}
/* "Clear selection" → secondary/ghost */
.nbo-wrapper.nbo-style-cloodo .nbo-clear-option-wrap { margin-top: var(--nbd-space-3); }
.nbo-wrapper.nbo-style-cloodo .nbo-clear-option-wrap .nbd-button {
    background: transparent;
    color: var(--nbd-st-text-soft);
    border-color: var(--nbd-st-border);
    padding: var(--nbd-space-2) var(--nbd-space-4);
    font-weight: var(--font-medium);
}
.nbo-wrapper.nbo-style-cloodo .nbo-clear-option-wrap .nbd-button:hover {
    background: var(--nbd-st-bg-soft);
    color: var(--nbd-st-text);
    border-color: var(--nbd-st-border-strong);
    box-shadow: none;
}
/* Friendly, non-alarming guidance (not a harsh red error) so buyers feel
   guided rather than blocked. */
.nbo-wrapper.nbo-style-cloodo .nbd-invalid-form {
    display: flex;
    align-items: flex-start;
    gap: var(--nbd-space-2);
    margin-top: var(--nbd-space-3);
    padding: var(--nbd-space-2) var(--nbd-space-3);
    border-radius: var(--nbd-radius-md);
    background: var(--nbd-color-warning-soft, #fef3c7);
    border: 1px solid var(--nbd-color-warning, #f59e0b);
    color: var(--nbd-st-text);
    font-size: var(--text-sm);
    line-height: 1.4;
}
.nbo-wrapper.nbo-style-cloodo .nbd-invalid-form::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border-radius: var(--nbd-radius-pill);
    background: var(--nbd-color-warning, #f59e0b);
    color: #fff;
    font-weight: var(--font-bold);
    text-align: center;
    line-height: 16px;
}

/* ════════════════════════════════════════════════════════════
   Override legacy app-product-builder.css buyer styles
   (that file loads on designer products and otherwise wins on
   the same elements — these resets let the token design show).
   ════════════════════════════════════════════════════════════ */
/* Re-assert the card design so it wins over the legacy app-product-builder.css
   buyer block (.nbd-option-field there has gray bg + border-bottom + padding 0). */
.nbo-wrapper.nbo-style-cloodo .nbd-option-field {
    background: var(--nbd-st-bg);
    border: 1px solid var(--nbd-st-border-subtle);
    margin: 0;
    padding: 14px 16px 16px;
    border-radius: var(--nbd-radius-lg);
}
.nbo-wrapper.nbo-style-cloodo .pcpb-field-content { padding: 0; }
.nbo-wrapper.nbo-style-cloodo .nbd-swatch-wrap .pcpb-field-content { font-size: var(--text-base); }

/* Swatch label was a 36px circle in legacy CSS — restore card shape. */
.nbo-wrapper.nbo-style-cloodo .nbd-swatch-card {
    width: auto !important;
    height: auto !important;
    border-radius: var(--nbd-radius-md) !important;
    margin: 0 !important;
}
/* Kill the legacy ::before / ::after circle-checkmark on selected swatch. */
.nbo-wrapper.nbo-style-cloodo .nbd-swatch-wrap input[type="radio"]:checked + .nbd-swatch-card::before,
.nbo-wrapper.nbo-style-cloodo .nbd-swatch-wrap input[type="radio"]:checked + .nbd-swatch-card::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
}

/* xLabel (image radio) → token option cards (override legacy app-product-builder.css). */
.nbo-wrapper.nbo-style-cloodo .nbd-xlabel-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: var(--nbd-space-3);
}
.nbo-wrapper.nbo-style-cloodo .nbd-xlabel-wrap {
    width: auto !important;
    margin: 0 !important;
    text-align: center;
}
.nbo-wrapper.nbo-style-cloodo .nbd-xlabel-wrap input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.nbo-wrapper.nbo-style-cloodo .nbd-xlabel {
    border: 1.5px solid var(--nbd-st-border-light) !important;
    border-radius: var(--nbd-radius-md) !important;
    box-shadow: none !important;
    transition: var(--transition-card);
}
.nbo-wrapper.nbo-style-cloodo .nbd-xlabel:hover {
    border-color: var(--st-brand-soft) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover) !important;
}
.nbo-wrapper.nbo-style-cloodo input[type="radio"]:checked + .nbd-xlabel {
    border-color: var(--st-brand) !important;
    box-shadow: 0 0 0 3px var(--st-brand-soft) !important;
}
/* Kill the legacy rotated-checkmark overlay; the brand ring is the selected cue. */
.nbo-wrapper.nbo-style-cloodo .nbd-xlabel-wrap input:checked + label:after {
    display: none !important;
    content: none !important;
}
.nbo-wrapper.nbo-style-cloodo .nbd-xlabel .nbo-recomand svg path { fill: var(--st-accent); }
.nbo-wrapper.nbo-style-cloodo .nbd-xlabel-wrap > label {
    margin: var(--nbd-space-2) 0 0;
    font-size: var(--text-base);
    line-height: 1.25;
}
.nbo-wrapper.nbo-style-cloodo .nbd-xlabel-wrap > label b {
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text);
}

/* Chip (radio / label) — neutralize legacy pill (uppercase, fixed 36px, shadow). */
.nbo-wrapper.nbo-style-cloodo .nbd-label,
.nbo-wrapper.nbo-style-cloodo .__nbd-radio-wrap label {
    height: auto;
    line-height: 1.3;
    text-transform: none;
    box-shadow: none !important;
    margin: 0 !important;
    max-width: none;
    overflow: visible;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 480px) {
    .nbo-wrapper.nbo-style-cloodo select.nbo-dropdown,
    .nbo-wrapper.nbo-style-cloodo .pcpb-field-content input[type="text"],
    .nbo-wrapper.nbo-style-cloodo .pcpb-field-content input[type="number"],
    .nbo-wrapper.nbo-style-cloodo .nbd-field-textarea { max-width: 100%; }
    .nbo-wrapper.nbo-style-cloodo .nbd-swatch-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* ════════════════════════════════════════════════════════════
   Storefront flow components — price showcase, progress, chosen,
   sticky bar, smart-recommend, save-build (token-based).
   ════════════════════════════════════════════════════════════ */
.nbo-wrapper.nbo-style-cloodo .nbo-price-showcase {
    background: linear-gradient(135deg, var(--nbd-st-bg) 0%, var(--st-brand-tint) 100%);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-lg);
    padding: var(--nbd-space-4);
    margin-bottom: var(--nbd-space-5);
    box-shadow: var(--shadow-card);
}
.nbo-wrapper.nbo-style-cloodo .nbo-price-showcase__label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--nbd-st-text-soft);
}
.nbo-wrapper.nbo-style-cloodo .nbo-price-showcase__total {
    font-size: var(--text-5xl);
    font-weight: var(--font-extrabold);
    line-height: 1.05;
    color: var(--nbd-st-text);
    margin-top: 2px;
}
.nbo-wrapper.nbo-style-cloodo .nbo-price-showcase__total .woocommerce-Price-amount { color: var(--st-brand-pressed); font-size: inherit; }
.nbo-wrapper.nbo-style-cloodo .nbo-price-showcase__sub {
    margin-top: var(--nbd-space-2);
    font-size: var(--text-md);
    color: var(--nbd-st-text-soft);
}

.nbo-wrapper.nbo-style-cloodo .nbo-progress {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-3);
    margin-top: var(--nbd-space-3);
    padding-top: var(--nbd-space-3);
    border-top: 1px solid var(--nbd-st-border-light);
}
.nbo-wrapper.nbo-style-cloodo .nbo-progress__bar {
    display: flex;
    flex: 1;
    gap: 4px;
    height: 6px;
}
/* JS injects N segment spans; filled ones get .is-filled */
.nbo-wrapper.nbo-style-cloodo .nbo-progress__seg {
    flex: 1;
    height: 100%;
    border-radius: var(--nbd-radius-pill);
    background: var(--nbd-st-border-light);
    transition: background .25s ease;
}
.nbo-wrapper.nbo-style-cloodo .nbo-progress__seg.is-filled { background: var(--st-brand); }
/* Legacy single-fill fallback (kept harmless if segments not injected) */
.nbo-wrapper.nbo-style-cloodo .nbo-progress__fill { display: none; }
.nbo-wrapper.nbo-style-cloodo .nbo-progress__text {
    flex: none;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--nbd-st-text-soft);
    white-space: nowrap;
}

/* Per-field option-count badge — quiet, but a clear at-a-glance signal. */
.nbo-wrapper.nbo-style-cloodo .pcpb-field-count {
    display: inline-flex;
    align-items: center;
    /* baseline (not center) so the chip text sits on the same baseline as the
       field title — otherwise the chip floats higher than the label. */
    align-self: baseline;
    padding: 2px 10px;
    border-radius: var(--nbd-radius-pill);
    background: var(--nbd-st-bg-soft);
    color: var(--nbd-st-text-soft);
    font-size: 11px;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    line-height: 1.4;
}

/* Chosen value — this is the *answer*, so it gets the strong-dark treatment;
   the price delta lives in a tinted pill so it reads as "what this costs you". */
.nbo-wrapper.nbo-style-cloodo .pcpb-field-chosen {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: var(--text-md);
    line-height: 1.45;
    color: var(--nbd-st-text);
    text-align: right;
}
.nbo-wrapper.nbo-style-cloodo .pcpb-field-chosen b {
    color: var(--nbd-st-text);
    font-weight: var(--font-semibold);
}
.nbo-wrapper.nbo-style-cloodo .pcpb-field-chosen__price {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: var(--nbd-radius-pill);
    background: var(--st-brand-tint);
    color: var(--cld-price);
    font-weight: var(--font-bold);
    font-size: var(--text-md);
    line-height: 1.4;
}
.nbo-wrapper.nbo-style-cloodo .pcpb-field-chosen__price .woocommerce-Price-amount { color: inherit; font-size: inherit; }

/* Sticky price + CTA bar — slides up when the real Add-to-cart scrolls off-screen
   (toggled by storefront-enhance.js via IntersectionObserver). All viewports. */
/* Compact floating card pinned to the bottom-right corner (not a full-width bar) */
.nbo-wrapper.nbo-style-cloodo .nbo-sticky-mobile {
    position: fixed;
    right: var(--nbd-space-5);
    bottom: var(--nbd-space-5);
    left: auto;
    z-index: 99990;
    display: flex;
    align-items: center;
    gap: var(--nbd-space-4);
    padding: var(--nbd-space-3) var(--nbd-space-4);
    background: var(--nbd-st-bg);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-lg);
    box-shadow: 0 12px 32px rgba(16, 24, 40, .18), 0 4px 10px rgba(16, 24, 40, .08);
    transform: translateY(160%);
    opacity: 0;
    transition: transform .28s ease, opacity .28s ease;
    pointer-events: none;
}
.nbo-wrapper.nbo-style-cloodo .nbo-sticky-mobile.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
@media (max-width: 480px) {
    .nbo-wrapper.nbo-style-cloodo .nbo-sticky-mobile {
        left: var(--nbd-space-3);
        right: var(--nbd-space-3);
        bottom: var(--nbd-space-3);
        justify-content: space-between;
    }
}
.nbo-wrapper.nbo-style-cloodo .nbo-sticky-mobile__price { display: flex; flex-direction: column; line-height: 1.15; }
.nbo-wrapper.nbo-style-cloodo .nbo-sticky-mobile__label { font-size: var(--text-xs); color: var(--nbd-st-text-mute); text-transform: uppercase; letter-spacing: .04em; }
.nbo-wrapper.nbo-style-cloodo .nbo-sticky-mobile__amount { font-size: var(--text-2xl); font-weight: var(--font-extrabold); color: var(--st-brand-pressed); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.nbo-wrapper.nbo-style-cloodo .nbo-sticky-mobile__amount .woocommerce-Price-amount { color: inherit; font-size: inherit; }
.nbo-wrapper.nbo-style-cloodo .nbo-sticky-mobile__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-2);
    padding: var(--nbd-space-3) var(--nbd-space-5);
    border: 0;
    border-radius: var(--nbd-radius-md);
    background: var(--st-brand);
    color: var(--nbd-st-text-inverse);
    font-size: var(--text-md);
    font-weight: var(--font-bold);
    cursor: pointer;
    transition: var(--transition-fast);
}
.nbo-wrapper.nbo-style-cloodo .nbo-sticky-mobile__cta:hover { background: var(--st-brand-pressed); }
@media (prefers-reduced-motion: reduce) { .nbo-wrapper.nbo-style-cloodo .nbo-sticky-mobile { transition: none; } }

.nbo-wrapper.nbo-style-cloodo .nbo-recommend {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-3);
    padding: var(--nbd-space-3) var(--nbd-space-4);
    margin-bottom: var(--nbd-space-4);
    background: var(--st-brand-tint);
    border: 1px solid var(--nbd-st-border-brand);
    border-radius: var(--nbd-radius-md);
}
.nbo-wrapper.nbo-style-cloodo .nbo-recommend__icon { font-size: var(--text-2xl); }
.nbo-wrapper.nbo-style-cloodo .nbo-recommend__body { flex: 1; min-width: 0; }
.nbo-wrapper.nbo-style-cloodo .nbo-recommend__title { font-weight: var(--font-bold); color: var(--nbd-st-text); font-size: var(--text-md); display: inline-flex; align-items: center; gap: var(--nbd-space-2); }
.nbo-wrapper.nbo-style-cloodo .nbo-recommend__tag {
    padding: 1px var(--nbd-space-2);
    border-radius: var(--nbd-radius-pill);
    background: var(--st-accent);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.nbo-wrapper.nbo-style-cloodo .nbo-recommend__desc { font-size: var(--text-sm); color: var(--nbd-st-text-soft); }
.nbo-wrapper.nbo-style-cloodo .nbo-recommend__apply {
    padding: var(--nbd-space-1) var(--nbd-space-4);
    border: 1px solid var(--st-brand);
    border-radius: var(--nbd-radius-md);
    background: var(--nbd-st-bg);
    color: var(--st-brand);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    white-space: nowrap;
}
.nbo-wrapper.nbo-style-cloodo .nbo-recommend__apply:hover { background: var(--st-brand); color: var(--nbd-st-text-inverse); }

.nbo-wrapper.nbo-style-cloodo .nbo-savebuild {
    display: flex;
    align-items: center;
    gap: var(--nbd-space-3);
    padding: var(--nbd-space-3) var(--nbd-space-4);
    margin-top: var(--nbd-space-4);
    background: var(--nbd-st-bg-soft);
    border: 1px dashed var(--nbd-st-border);
    border-radius: var(--nbd-radius-md);
}
.nbo-wrapper.nbo-style-cloodo .nbo-savebuild__body { flex: 1; min-width: 0; }
.nbo-wrapper.nbo-style-cloodo .nbo-savebuild__title { font-weight: var(--font-semibold); font-size: var(--text-md); color: var(--nbd-st-text); }
.nbo-wrapper.nbo-style-cloodo .nbo-savebuild__sub { font-size: var(--text-sm); color: var(--nbd-st-text-soft); }
.nbo-wrapper.nbo-style-cloodo .nbo-savebuild__btns { display: flex; gap: var(--nbd-space-2); }
.nbo-wrapper.nbo-style-cloodo .nbo-savebuild__btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--nbd-st-border);
    border-radius: var(--nbd-radius-md);
    background: var(--nbd-st-bg);
    cursor: pointer;
    font-size: var(--text-lg);
}
.nbo-wrapper.nbo-style-cloodo .nbo-savebuild__btn:hover { border-color: var(--st-brand); }
.nbo-wrapper.nbo-style-cloodo .nbo-savebuild__save {
    flex: none;
    align-self: center;
    padding: var(--nbd-space-2) var(--nbd-space-4);
    border: 1px solid var(--st-brand);
    border-radius: var(--nbd-radius-md);
    background: var(--nbd-st-bg);
    color: var(--st-brand);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-fast);
}
.nbo-wrapper.nbo-style-cloodo .nbo-savebuild__save:hover { background: var(--st-brand); color: var(--nbd-st-text-inverse); }
.nbo-wrapper.nbo-style-cloodo .nbo-savebuild__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nbd-space-2);
    margin-top: var(--nbd-space-2);
}
.nbo-wrapper.nbo-style-cloodo .nbo-savebuild__list:empty { display: none; }
.nbo-wrapper.nbo-style-cloodo .nbo-savebuild__chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-pill);
    background: var(--nbd-st-bg);
    overflow: hidden;
}
.nbo-wrapper.nbo-style-cloodo .nbo-savebuild__chip-load {
    border: 0;
    background: transparent;
    padding: 2px var(--nbd-space-3);
    color: var(--nbd-st-text);
    font-size: var(--text-sm);
    cursor: pointer;
}
.nbo-wrapper.nbo-style-cloodo .nbo-savebuild__chip-load:hover { color: var(--st-brand); }
.nbo-wrapper.nbo-style-cloodo .nbo-savebuild__chip-del {
    border: 0;
    border-left: 1px solid var(--nbd-st-border-light);
    background: transparent;
    padding: 2px var(--nbd-space-2);
    color: var(--nbd-st-text-mute);
    font-size: var(--text-sm);
    line-height: 1;
    cursor: pointer;
}
.nbo-wrapper.nbo-style-cloodo .nbo-savebuild__chip-del:hover { color: var(--nbd-color-danger); }

/* ════════════════════════════════════════════════════════════
   P0 — Price hero: count-up total, per-unit, saved badge
   ════════════════════════════════════════════════════════════ */
.nbo-wrapper.nbo-style-cloodo .nbo-price-showcase__total {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--nbd-space-2);
    margin-top: 2px;
}
.nbo-wrapper.nbo-style-cloodo .nbo-price-showcase__amount {
    font-size: var(--text-5xl);
    font-weight: var(--font-extrabold);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--st-brand-pressed);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    transition: transform .14s ease;
    transform-origin: left center;
}
.nbo-wrapper.nbo-style-cloodo .nbo-price-showcase__amount.is-bumping { transform: scale(1.045); }
.nbo-wrapper.nbo-style-cloodo .nbo-price-showcase__amount .woocommerce-Price-amount { font-size: inherit; color: inherit; }
.nbo-wrapper.nbo-style-cloodo .nbo-price-showcase__saved {
    padding: 3px var(--nbd-space-2);
    border-radius: var(--nbd-radius-pill);
    background: var(--nbd-color-success-soft, #d1fae5);
    color: var(--nbd-color-success, #059669);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
    .nbo-wrapper.nbo-style-cloodo .nbo-price-showcase__amount { transition: none; }
    .nbo-wrapper.nbo-style-cloodo .nbo-price-showcase__amount.is-bumping { transform: none; }
}

/* CTA live-price chip — lives on the theme's add-to-cart button (OUTSIDE
   .nbo-wrapper), so this single rule is intentionally unscoped but prefixed. */
.spbwc-cloodo-cta-price { font-weight: 700; opacity: .92; margin-left: .35em; }

/* ════════════════════════════════════════════════════════════
   P1 — Emotional cues: completion + CTA "ready to order" glow
   ════════════════════════════════════════════════════════════ */
.nbo-wrapper.nbo-style-cloodo .nbo-progress.is-complete .nbo-progress__text { color: var(--nbd-color-success); font-weight: var(--font-bold); }
.nbo-wrapper.nbo-style-cloodo .nbo-progress.is-complete .nbo-progress__seg.is-filled { background: var(--nbd-color-success); }
/* CTA glow lives on the theme's add-to-cart button (OUTSIDE .nbo-wrapper) — unscoped, prefixed. */
.spbwc-cloodo-cta--ready {
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.16);
    animation: spbwcCloodoCtaPulse 0.9s ease 2;
}
@keyframes spbwcCloodoCtaPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.16); }
    50% { box-shadow: 0 0 0 9px rgba(29, 78, 216, 0.10); }
}
@media (prefers-reduced-motion: reduce) { .spbwc-cloodo-cta--ready { animation: none; } }

/* Trust bar — reassurance row of pill-cards with per-badge accent icons */
.nbo-wrapper.nbo-style-cloodo .nbo-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--nbd-space-3);
    margin: var(--nbd-space-3) 0 var(--nbd-space-4);
    padding: 0;
}
.nbo-wrapper.nbo-style-cloodo .nbo-trust__item {
    display: inline-flex;
    align-items: center;
    gap: var(--nbd-space-3);
    padding: var(--nbd-space-3) var(--nbd-space-4);
    border: 1.5px solid var(--nbd-st-border);
    border-radius: var(--nbd-radius-lg);
    background: var(--nbd-st-bg);
    color: var(--nbd-st-text);
    font-size: var(--text-md);
    font-weight: var(--font-bold);
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.nbo-wrapper.nbo-style-cloodo .nbo-trust__item:hover {
    transform: translateY(-1px);
    border-color: var(--nbd-st-border-strong);
    box-shadow: var(--shadow-card);
}
.nbo-wrapper.nbo-style-cloodo .nbo-trust__text {
    font-size: var(--text-md);
    font-weight: var(--font-bold);
    color: var(--nbd-st-text);
    letter-spacing: -.01em;
}
.nbo-wrapper.nbo-style-cloodo .nbo-trust__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: #fff;
    box-shadow: 0 2px 4px rgba(16, 24, 40, .08);
}
.nbo-wrapper.nbo-style-cloodo .nbo-trust__icon svg { width: 18px; height: 18px; display: block; }
/* Per-badge accent color — keeps the trust row visually rich while the rest of the UI stays neutral. */
.nbo-wrapper.nbo-style-cloodo .nbo-trust__icon--shield { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }   /* emerald — security */
.nbo-wrapper.nbo-style-cloodo .nbo-trust__icon--hammer { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }   /* amber — craft */
.nbo-wrapper.nbo-style-cloodo .nbo-trust__icon--eye    { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }   /* blue — transparency / live */
.nbo-wrapper.nbo-style-cloodo .nbo-trust__icon--check  { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
@media (prefers-reduced-motion: reduce) {
    .nbo-wrapper.nbo-style-cloodo .nbo-trust__item { transition: none; }
    .nbo-wrapper.nbo-style-cloodo .nbo-trust__item:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════
   Quantity volume-discount tiers ("buy more, save more")
   ════════════════════════════════════════════════════════════ */
/* Quantity Quick Pick block — wrap in a bordered card so it reads as its own
   discrete section (matches the recommend-combo and summary cards). */
.nbo-wrapper.nbo-style-cloodo .nbo-qty-tiers {
    padding: var(--nbd-space-5);
    border: 1px solid var(--nbd-st-border-light);
    border-radius: var(--nbd-radius-lg);
    background: var(--nbd-st-bg);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.nbo-wrapper.nbo-style-cloodo .nbo-qty-tiers .pcpb-field-header { margin-bottom: var(--nbd-space-4); }
.nbo-wrapper.nbo-style-cloodo .nbo-qty-tiers__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--nbd-space-3);
}
.nbo-wrapper.nbo-style-cloodo .nbo-qty-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--nbd-space-4) var(--nbd-space-3);
    border: 2px solid var(--nbd-st-border-strong);
    border-radius: var(--nbd-radius-lg);
    background: var(--nbd-st-bg);
    cursor: pointer;
    transition: var(--transition-card);
}
.nbo-wrapper.nbo-style-cloodo .nbo-qty-tier:hover {
    border-color: var(--cld-select);
    background: var(--cld-select-tint);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}
.nbo-wrapper.nbo-style-cloodo .nbo-qty-tier.is-active {
    border-color: var(--cld-select);
    background: var(--cld-select-tint);
    box-shadow: 0 0 0 3px var(--cld-select-soft);
}
.nbo-wrapper.nbo-style-cloodo .nbo-qty-tier__qty {
    font-size: var(--text-2xl);
    font-weight: var(--font-extrabold);
    color: var(--nbd-st-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.nbo-wrapper.nbo-style-cloodo .nbo-qty-tier__unit { font-size: var(--text-sm); color: var(--nbd-st-text-mute); }
/* Per-tier discount badge inside the quantity card — red number on soft red tint
   so the discount is impossible to miss. "—" rendered muted for the no-discount tier. */
.nbo-wrapper.nbo-style-cloodo .nbo-qty-tier__discount {
    margin-top: var(--nbd-space-2);
    padding: 3px var(--nbd-space-3);
    border-radius: var(--nbd-radius-pill);
    background: rgba(220, 38, 38, .10);
    color: var(--nbd-color-danger);
    font-size: var(--text-md);
    font-weight: var(--font-extrabold);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    letter-spacing: -.01em;
}
.nbo-wrapper.nbo-style-cloodo .nbo-qty-tier__discount .woocommerce-Price-amount { color: inherit; font-size: inherit; }
.nbo-wrapper.nbo-style-cloodo .nbo-qty-tier__discount--none { background: transparent; color: var(--nbd-st-text-mute); font-weight: var(--font-normal); }
.nbo-wrapper.nbo-style-cloodo .nbo-qty-tier__save {
    margin-top: var(--nbd-space-1);
    padding: 1px var(--nbd-space-2);
    border-radius: var(--nbd-radius-pill);
    background: var(--nbd-color-success-soft);
    color: var(--cld-price);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
}
.nbo-wrapper.nbo-style-cloodo .nbo-qty-tier__save--base { background: transparent; color: var(--nbd-st-text-mute); }
.nbo-wrapper.nbo-style-cloodo .nbo-qty-tier.is-best { border-color: var(--st-accent); }
.nbo-wrapper.nbo-style-cloodo .nbo-qty-tier__badge {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px var(--nbd-space-2);
    border-radius: var(--nbd-radius-pill);
    background: var(--st-accent);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   Mobile polish (<=600px) — defensive tightening so the storefront
   reads cleanly on narrow viewports where the gallery is stacked
   above the options instead of sticky-pinned to the left column.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    /* Trust badges: tighter pills, two-per-row instead of one wrapping row */
    .nbo-wrapper.nbo-style-cloodo .nbo-trust { gap: 8px; margin: 12px 0 16px; }
    .nbo-wrapper.nbo-style-cloodo .nbo-trust__item {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        padding: 8px 10px;
        gap: 8px;
        white-space: normal;
    }
    .nbo-wrapper.nbo-style-cloodo .nbo-trust__text { font-size: var(--text-sm); }
    .nbo-wrapper.nbo-style-cloodo .nbo-trust__icon { width: 28px; height: 28px; }
    .nbo-wrapper.nbo-style-cloodo .nbo-trust__icon svg { width: 16px; height: 16px; }

    /* Hero total: a little tighter so it doesn't dominate the small viewport */
    .nbo-wrapper.nbo-style-cloodo .nbo-price-showcase__amount { font-size: 30px; }

    /* Swatch + chip grids: reduce inter-cell gaps */
    .nbo-wrapper.nbo-style-cloodo .nbd-swatch-grid { gap: 8px; }
    .nbo-wrapper.nbo-style-cloodo .nbd-label-wrap { gap: 6px; }

    /* Qty tiers: compact cards */
    .nbo-wrapper.nbo-style-cloodo .nbo-qty-tiers { padding: 14px; }
    .nbo-wrapper.nbo-style-cloodo .nbo-qty-tier { padding: 12px 8px; }
    .nbo-wrapper.nbo-style-cloodo .nbo-qty-tier__qty { font-size: 20px; }

    /* Summary card: tighter padding */
    .nbo-wrapper.nbo-style-cloodo .nbo-table-summary-wrap { padding: 16px; }
    .nbo-wrapper.nbo-style-cloodo .nbo-final-price td:last-child .ng-binding { font-size: 22px; }

    /* Customize button: keep prominent but fit smaller screens */
    .spbwc-customize-btn,
    a#pcpb-start-design.spbwc-customize-btn { padding: 12px 14px; }
    .spbwc-customize-btn__label { font-size: 15px; }
    .spbwc-customize-btn__hint  { font-size: 11px; }

    /* Field-header: stack chosen-value below the row instead of pushing it
       off-screen via margin-left:auto. */
    .nbo-wrapper.nbo-style-cloodo .pcpb-field-chosen { margin-left: 0; width: 100%; }

    /* Sticky corner card: take full-width strip at bottom, easier to tap. */
    .nbo-wrapper.nbo-style-cloodo .nbo-sticky-mobile {
        left: var(--nbd-space-3);
        right: var(--nbd-space-3);
        bottom: var(--nbd-space-3);
        max-width: none;
    }
}