/* ── B2B Stage 2 — Blank Order UI (card-based, matches A1 reference) ───────── */

:root {
    --b2b-blue:        #0057D9;
    --b2b-blue-dark:   #0046B5;
    --b2b-orange:      #F5622E;
    --b2b-text:        #1A1A2E;
    --b2b-muted:       #6B7280;
    --b2b-border:      #E0E4EA;
    --b2b-panel:       #F5F7FA;
    --b2b-success:     #047857;
}

/* ── Floating compare tray bar ── no existing floating/sticky widget pattern
   in this codebase to match (confirmed via research) — styled consistent
   with the .b2b-card / --b2b-blue tokens already established above.
   Positioned via JS (product-compare.js sets --b2b-compare-bar-offset to the
   live .b2b-pricebar height when it's visible) rather than a hardcoded
   bottom value — both bars are fixed+bottom+z-index:9999, so sharing the
   same edge meant the compare bar (later in the DOM) always visually
   covered the price bar completely, making it look removed when it was only
   hidden behind this one. [hidden] is declared explicitly because
   `display: flex` here otherwise overrides the browser's default `hidden`
   behavior — without it, bar.hidden = true in JS had no visible effect and
   the bar showed unconditionally regardless of tray state. */
.b2b-compare-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--b2b-compare-bar-offset, 0px);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 14px 20px;
    background: #fff;
    border-top: 1px solid var(--b2b-border);
    box-shadow: 0 -4px 16px rgba(20,23,40,.08);
    transition: bottom 0.2s ease;
}
.b2b-compare-bar[hidden] { display: none; }
.b2b-compare-bar__count { font-size: 14px; color: var(--b2b-text); white-space: nowrap; }
.b2b-compare-bar__view { text-decoration: none; white-space: nowrap; }
.b2b-compare-bar__clear { background: none; border: 1px solid var(--b2b-border); border-radius: 8px; padding: 8px 14px; font-size: 13px; color: var(--b2b-muted); cursor: pointer; white-space: nowrap; }
.b2b-compare-bar__clear:hover { color: var(--b2b-text); border-color: var(--b2b-muted); }

/* Mobile: the desktop bar's 20px gap/padding and unconstrained text
   wrapping ("Comparing: 2" / "of 4" splitting across lines, "View" /
   "Comparison" splitting inside the button) made the bar look broken at
   narrow widths -- white-space:nowrap above stops mid-phrase wrapping,
   and this breakpoint tightens spacing/sizing and lets the 3 items wrap
   as whole units (via flex-wrap) rather than overflowing or squeezing. */
@media (max-width: 560px) {
    .b2b-compare-bar {
        gap: 10px 14px;
        padding: 10px 14px;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .b2b-compare-bar__count { font-size: 12.5px; flex: 1 1 auto; }
    .b2b-compare-bar__view {
        font-size: 13px;
        padding: 8px 14px;
        order: 3;
        flex: 1 1 100%;
        text-align: center;
    }
    .b2b-compare-bar__clear { font-size: 12px; padding: 7px 12px; }
}

/* ── Card shell ── */
.b2b-card {
    background: #fff;
    border: 1px solid var(--b2b-border);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.b2b-order { margin-top: 16px; font-size: 14px; color: var(--b2b-text); }

/* Breathing room around the summary column so cards don't bleed to the edge */
.single-product .summary.entry-summary { padding-left: 8px; padding-top: 8px; box-sizing: border-box; }
@media (min-width: 993px) {
    .single-product .summary.entry-summary { padding-left: 20px; padding-top: 12px; }
}

/* ── Tab toggle (glows on load) ── */
.b2b-order__tabs {
    display: flex;
    gap: 6px;
    border: 1px solid var(--b2b-border);
    border-radius: 12px;
    padding: 5px;
    background: var(--b2b-panel);
    margin-bottom: 16px;
}
.b2b-order__tab {
    flex: 1;
    padding: 13px 16px;
    border: none;
    background: transparent;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 700;
    color: var(--b2b-muted);
    cursor: pointer;
    transition: all 0.18s;
}
.b2b-order__tab.is-active {
    background: var(--b2b-blue);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,87,217,0.3);
}
.b2b-order__tab:hover:not(.is-active) { color: var(--b2b-text); background: #fff; }

/* Attention glow on page load */
@keyframes b2bGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,87,217,0); }
    50%      { box-shadow: 0 0 0 4px rgba(0,87,217,0.25); }
}
.b2b-order__tabs.is-glowing { animation: b2bGlow 1.4s ease-in-out 3; }

/* ── Panels ── */
.b2b-order__panel { display: none; }
.b2b-order__panel.is-active { display: block; }

/* ── Customized coming soon ── */
.b2b-order__soon {
    text-align: center;
    padding: 44px 20px;
    background: var(--b2b-panel);
    border: 1px dashed var(--b2b-border);
    border-radius: 12px;
    color: var(--b2b-muted);
}
.b2b-order__soon-title { font-size: 16px; font-weight: 700; color: var(--b2b-text); margin-bottom: 6px; }

/* ── Color swatches ── */
.b2b-colors__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2px;
}
.b2b-colors__title { font-size: 15px; font-weight: 700; }
.b2b-colors__count { font-size: 13px; color: var(--b2b-muted); }
.b2b-colors__hint { font-size: 12.5px; color: #9ca3af; margin: 0 0 14px; }

.b2b-colors__search {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid var(--b2b-border) !important;
    border-radius: 9px !important;
    font-size: 13.5px !important;
    margin: 0 0 16px 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    float: none !important;
    clear: both !important;
}
.b2b-colors__search:focus { outline: none; border-color: var(--b2b-blue); box-shadow: 0 0 0 3px rgba(0,87,217,0.1); }

.b2b-colors__grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 13px !important;
    max-height: 132px;
    overflow: hidden;
    clear: both;
    transition: max-height 0.25s ease;
    margin: 0;
    /* Padding gives the selection ring + check badge room so they aren't clipped. */
    padding: 7px 7px 7px 7px;
}
.b2b-colors__grid.is-expanded { max-height: 2000px; }

.b2b-swatch {
    position: relative;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    border: 2px solid #e5e7eb !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible;
    background: #f3f4f6;
    transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
    flex: 0 0 38px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--b2b-muted);
    box-shadow: none;
    line-height: 1;
}
.b2b-swatch img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.b2b-swatch:hover { transform: scale(1.12); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.b2b-swatch.is-selected {
    border-color: var(--b2b-orange);
    box-shadow: 0 0 0 2px var(--b2b-orange);
}
.b2b-swatch.is-oos { cursor: not-allowed; opacity: 0.4; }
.b2b-swatch.is-oos::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(to top right, transparent 46%, #c0392b 47%, #c0392b 53%, transparent 54%);
    border-radius: 50%;
    pointer-events: none;
}
.b2b-swatch__check {
    position: absolute;
    top: -5px; right: -5px;
    width: 17px; height: 17px;
    background: var(--b2b-orange);
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    font-size: 9px;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 2;
}
.b2b-swatch.is-selected .b2b-swatch__check { display: flex; }

.b2b-colors__more {
    margin-top: 14px;
    background: var(--b2b-panel);
    border: 1px solid var(--b2b-border);
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--b2b-blue);
    cursor: pointer;
}
.b2b-colors__more:hover { background: #eaf1ff; }

/* ── Matrix placeholder ── */
.b2b-matrix__empty {
    text-align: center;
    padding: 20px 20px;
    background: linear-gradient(180deg, #fbfcfe 0%, var(--b2b-panel) 100%);
    border: 1px dashed var(--b2b-border);
    border-radius: 12px;
    color: #6b7280;
}
.b2b-matrix__empty svg { width: 26px; height: 26px; opacity: 0.45; margin-bottom: 8px; color: var(--b2b-blue, #2563eb); }
.b2b-matrix__empty-title { font-weight: 600; color: #374151; font-size: 14px; }
.b2b-matrix__empty-hint { font-size: 12.5px; color: #9ca3af; margin-top: 4px; }

/* ── Quantity matrix ── */
.b2b-matrix__title { font-size: 16px; font-weight: 700; margin: 0 0 14px; }

/* ── Per-color quantity cards (responsive, wraps on mobile) ──────────────── */
.b2b-qtycards { display: flex; flex-direction: column; gap: 14px; }
.b2b-qtycard {
    border: 1px solid var(--b2b-border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.b2b-qtycard__head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px;
    background: #f9fafb;
    border-bottom: 1px solid var(--b2b-border);
    flex-wrap: wrap;
}
.b2b-qtycard__dot {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid #d1d5db; overflow: hidden; flex-shrink: 0;
}
.b2b-qtycard__dot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b2b-qtycard__name { font-weight: 700; font-size: 14px; }
.b2b-qtycard__pieces { font-size: 12.5px; color: #9ca3af; }
.b2b-qtycard__subtotal {
    margin-left: auto; font-weight: 700; font-size: 14px; color: #f5821f;
    font-variant-numeric: tabular-nums;
}
.b2b-qtycard__remove {
    border: none; background: none; color: #cbd5e1; cursor: pointer;
    font-size: 20px; line-height: 1; padding: 0 2px; margin-left: 6px;
}
.b2b-qtycard__remove:hover { color: #ef4444; }

/* One row, tight uniform boxes, horizontal scroll only if many sizes overflow. */
.b2b-qtycard__sizes {
    /* FIXED-width snug columns (not 1fr) so boxes don't stretch to fill the row —
       the number sits tight inside, boxes packed close, label centered over each.
       Wraps to the next row when full; works on desktop and mobile.
       Stays 48px (2026-08-16 decision: keep XS-8XL sizing untouched) --
       a long label like "Adjustable" gets its own wider column via
       .b2b-qtycard__size--wide below instead of widening every column
       globally, since most products only ever show short size codes
       (XS/S/M/L/XL/2XL...8XL) that already fit 48px on one line. */
    display: grid;
    grid-template-columns: repeat(auto-fit, 48px);
    justify-content: start;
    gap: 6px;
    padding: 14px 16px;
}
/* One-off wider column for a size whose label doesn't fit 48px on one line
   (e.g. "Adjustable", "One Size") -- product-order.js flags these via
   isWideSizeLabel() and adds this class only to that specific size cell,
   so a hat with "Adjustable" and a shirt with "XS...8XL" both keep their
   own correct, minimal column width instead of one global tradeoff. */
.b2b-qtycard__size--wide { grid-column: span 2; }
/* #b2b-order .b2b-qtycard__sizelabel below (ID selector) otherwise beats
   this rule's specificity even with !important on both sides -- an ID
   always outranks any number of classes. Matched the ID here too so this
   override actually wins and the "Adjustable"/"One Size" label really
   gets the full doubled-width column instead of staying capped at 48px
   (reported still wrapping to 2 lines, 2026-08-16). */
#b2b-order .b2b-qtycard__size--wide .b2b-qtycard__sizelabel,
.b2b-qtycard__size--wide .b2b-qtycard__sizelabel { max-width: 100% !important; }
.b2b-qtycard__size--wide .b2b-qtycard__inputwrap,
.b2b-qtycard__size--wide .b2b-matrix__input { width: 100%; max-width: 102px !important; }
/* Box + corner flag wrapper */
.b2b-qtycard__inputwrap { position: relative; display: inline-flex; }
.b2b-qtycard__flag {
    position: absolute; top: -6px; right: -6px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #f59e0b; color: #fff;
    font-size: 11px; font-weight: 800; line-height: 16px; text-align: center;
    box-shadow: 0 0 0 2px #fff;
}
/* One consolidated limited-stock line under the row.
   IMPORTANT: [hidden] must win over display:flex, or the empty pill still shows. */
.b2b-qtycard__stockwarn[hidden] { display: none !important; }
.b2b-qtycard__stockwarn {
    display: flex; align-items: center; gap: 6px;
    margin: 2px 16px 14px;
    padding: 8px 10px;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
    color: #b45309; font-size: 12px; font-weight: 600;
}
.b2b-qtycard__stockwarn svg { flex-shrink: 0; }
/* Thin, subtle scrollbar (the default thick one looked intrusive). */
.b2b-qtycard__sizes { scrollbar-width: thin; scrollbar-color: #d1d5db transparent; }
.b2b-qtycard__sizes::-webkit-scrollbar { height: 6px; }
.b2b-qtycard__sizes::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.b2b-qtycard__sizes::-webkit-scrollbar-track { background: transparent; }

.b2b-qtycard__size {
    display: flex; flex-direction: column; align-items: center;
    min-width: 0;                /* fill the equal grid column */
    position: relative;          /* anchor the floating stock note */
}
.b2b-qtycard__inputwrap, .b2b-qtycard__size .b2b-matrix__input { width: 100%; }
/* Bulletproof label visibility — beat any theme rule that hides product labels. */
#b2b-order .b2b-qtycard__sizelabel,
.b2b-qtycard .b2b-qtycard__sizelabel {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    width: auto !important;
    max-width: 48px !important;   /* matches .b2b-qtycard__size's fixed 48px grid column for
                                      normal short size codes (XS...8XL). A size with a longer
                                      label (e.g. "Adjustable") instead gets
                                      .b2b-qtycard__size--wide (see above), which overrides this
                                      to 100% of its own doubled-width column — kept 48px here
                                      as the correct default for the common case rather than
                                      widening every product's size grid. */
    position: static !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-align: center;
    line-height: 1.2 !important;
    white-space: normal !important;
    word-break: break-word;
    clip: auto !important;
    overflow: visible !important;
}
/* OOS cell keeps the same footprint as a normal box (no stretching). */
.b2b-qtycard__size .b2b-matrix__input.is-oos { width: 40px; max-width: 40px; }
/* Horizontal scroll wrapper so many size columns never squish the inputs.
   Boxes stay wide enough for 5-6 digits (swag.com behaviour); the grid scrolls. */
.b2b-matrix__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 2px;
}
.b2b-matrix__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    table-layout: auto;        /* columns size to content, not crammed to 100% */
}
/* Size (number) columns get a comfortable fixed width; the Color column flexes. */
.b2b-matrix__table thead th:not(:first-child),
.b2b-matrix__table tbody td:not(:first-child) { min-width: 70px; white-space: nowrap; }
.b2b-matrix__table thead th {
    background: var(--b2b-blue);
    color: #fff;
    padding: 9px 4px;
    font-weight: 600;
    text-align: center;
    font-size: 12px;
}
.b2b-matrix__table thead th:first-child {
    text-align: left;
    padding-left: 10px;
    min-width: 130px;
    width: 1px;                 /* shrink-to-fit: column only as wide as its content */
    white-space: nowrap;
    border-radius: 8px 0 0 0;
}
.b2b-matrix__table thead th:last-child { border-radius: 0 8px 0 0; }
.b2b-matrix__color {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 6px 8px 10px;
    font-weight: 500;
    font-size: 12.5px;
}
.b2b-matrix__color-dot {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    flex-shrink: 0;
    overflow: hidden;
}
.b2b-matrix__color-dot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b2b-matrix__color-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.b2b-matrix__remove {
    margin-left: 4px;
    border: none;
    background: none;
    color: #cbd5e1;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    padding: 0 2px;
}
.b2b-matrix__remove:hover { color: #c0392b; }
.b2b-matrix__table tbody tr:nth-child(even) { background: #fafbfc; }
.b2b-matrix__table tbody td { padding: 5px 4px; text-align: center; overflow: visible; }
/* Inputs inside the per-color cards FILL their equal grid column (label centers
   over box). Scoped so it doesn't fight the old table layout. */
#b2b-order .b2b-qtycard__size .b2b-matrix__input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
#b2b-order .b2b-matrix__input {
    width: 44px;
    min-width: 44px;
    -webkit-appearance: none !important;
    max-width: 44px;
    padding: 8px 1px !important;   /* near-zero side padding: number sits edge to edge */
    border: 1px solid var(--b2b-border);
    border-radius: 6px;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
    text-indent: 0 !important;
    letter-spacing: 0 !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}
.b2b-matrix__input::-webkit-outer-spin-button,
.b2b-matrix__input::-webkit-inner-spin-button { -webkit-appearance: none !important; appearance: none !important; margin: 0 !important; display: none !important; }
/* Catch theme overrides on number inputs inside the order UI */
#b2b-order input[type="number"]::-webkit-outer-spin-button,
#b2b-order input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none !important; display: none !important; margin: 0 !important; }
#b2b-order input[type="number"] { -moz-appearance: textfield !important; }
.b2b-matrix__input:focus { outline: none; border-color: var(--b2b-blue); box-shadow: 0 0 0 2px rgba(0,87,217,0.12); }
.b2b-matrix__input.is-oos {
    background: var(--b2b-panel);
    color: #cbd5e1;
    cursor: not-allowed;
    border-style: dashed;
}

/* Per-cell stock cap + inline "only X available" note */
.b2b-matrix__cell { position: relative; display: flex; flex-direction: column; align-items: center; }
.b2b-matrix__input.is-capped {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #b45309;
}
.b2b-matrix__input.is-capped:focus { box-shadow: 0 0 0 2px rgba(245,158,11,0.18); }

.b2b-matrix__warning {
    margin-top: 12px;
    font-size: 12.5px;
    color: #c0392b;
    display: none;
    align-items: center;
    gap: 6px;
}
.b2b-matrix__warning.is-visible { display: flex; }

/* ── Upsell nudge ── */
.b2b-upsell {
    margin-top: 12px;
    padding: 11px 14px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 9px;
    font-size: 13px;
    color: var(--b2b-success);
    display: none;
}
.b2b-upsell.is-visible { display: block; }
.b2b-upsell strong { color: #065f46; }

/* ── Price + delivery card ── */
.b2b-pricecard { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.b2b-pricecard__col { flex: 1 1 0; min-width: 160px; max-width: 100%; overflow: hidden; }
.b2b-pricecard__col + .b2b-pricecard__col {
    border-left: 1px solid var(--b2b-border);
    padding-left: 16px;
}
.b2b-pricecard__label { font-size: 12px; color: var(--b2b-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.b2b-pricecard__total {
    font-size: 26px;
    font-weight: 800;
    color: var(--b2b-text);
    margin: 4px 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;          /* large totals wrap instead of overflowing */
    word-break: break-word;
}
.b2b-pricecard__amount { white-space: nowrap; }
.b2b-pricecard__msrp { font-size: 14px; color: #9ca3af; text-decoration: line-through; font-weight: 500; white-space: nowrap; }
.b2b-pricecard__save {
    display: inline-block;
    background: #d1fae5;
    color: var(--b2b-success);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    margin: 4px 0 0 0;
    white-space: nowrap;
    flex-basis: 100%;        /* save badge always on its own line below the price */
    width: fit-content;
}
.b2b-pricecard__per { font-size: 12.5px; color: var(--b2b-muted); margin-top: 2px; }
.b2b-pricecard__delivery { font-size: 18px; font-weight: 700; color: var(--b2b-text); margin: 4px 0; }
.b2b-pricecard__delivery-sub { font-size: 12px; color: var(--b2b-muted); }

/* ── Rush toggle ── */
.b2b-rush { margin-top: 12px; }
.b2b-rush__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--b2b-text);
}
.b2b-rush__options { margin-top: 10px; display: none; flex-direction: column; gap: 8px; }
.b2b-rush__options.is-visible { display: flex; }
.b2b-rush__opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--b2b-border);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}
.b2b-rush__opt.is-selected { border-color: var(--b2b-blue); background: #eaf1ff; }
.b2b-rush__opt-fee { margin-left: auto; font-weight: 600; color: var(--b2b-orange); }

/* ── Inline Add to Cart ── */
.b2b-addcart {
    width: 100%;
    background: var(--b2b-blue);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 15px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 4px;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.b2b-addcart:hover:not(:disabled) { background: var(--b2b-blue-dark); }
.b2b-addcart:disabled { background: #cbd5e1; cursor: not-allowed; }

/* ── Floating price bar ── */
.b2b-pricebar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: #fff;
    border-top: 1px solid var(--b2b-border);
    box-shadow: 0 -2px 16px rgba(0,0,0,0.1);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.b2b-pricebar.is-visible { transform: translateY(0); }
.b2b-pricebar__name { font-weight: 700; font-size: 14px; flex-shrink: 0; }
.b2b-pricebar__meta { font-size: 12.5px; color: var(--b2b-muted); display: flex; gap: 16px; flex-wrap: wrap; flex: 1; }
.b2b-pricebar__meta b { color: var(--b2b-text); font-weight: 600; }
.b2b-pricebar__total { font-size: 20px; font-weight: 800; color: var(--b2b-text); }
.b2b-pricebar__cta {
    background: var(--b2b-blue);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 12px 30px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}
.b2b-pricebar__cta:hover:not(:disabled) { background: var(--b2b-blue-dark); }
.b2b-pricebar__cta:disabled { background: #cbd5e1; cursor: not-allowed; }

body.single-product.b2b-has-pricebar { padding-bottom: 84px; }

/* ── Under-gallery trust block ── */
.b2b-trust { margin-top: 18px; }
.b2b-trust__badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.b2b-trust__badge {
    text-align: center;
    padding: 14px 8px;
    background: var(--b2b-panel);
    border: 1px solid var(--b2b-border);
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--b2b-text);
    line-height: 1.3;
}
.b2b-trust__badge svg { width: 22px; height: 22px; color: var(--b2b-blue); margin-bottom: 6px; }
.b2b-trust__includes {
    background: #fff;
    border: 1px solid var(--b2b-border);
    border-radius: 10px;
    padding: 14px 16px;
}
.b2b-trust__includes-title { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.b2b-trust__list { list-style: none; margin: 0; padding: 0; }
.b2b-trust__list li { font-size: 12.5px; color: var(--b2b-muted); padding: 4px 0 4px 22px; position: relative; }
.b2b-trust__list li::before {
    content: '✓';
    position: absolute; left: 0;
    color: var(--b2b-success);
    font-weight: 700;
}
.b2b-trust__expert {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}
.b2b-trust__expert a {
    flex: 1;
    text-align: center;
    padding: 10px;
    border: 1px solid var(--b2b-border);
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--b2b-blue);
    text-decoration: none;
}
.b2b-trust__expert a:hover { background: #eaf1ff; }

/* ── Star rating ── */
.b2b-rating { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 8px; }
.b2b-rating__stars { color: #f59e0b; font-size: 15px; letter-spacing: 1px; }
.b2b-rating__count { font-size: 12.5px; color: var(--b2b-muted); }

/* ── Product info card ── */
.b2b-info__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.b2b-info__logo { max-height: 30px; width: auto; display: block; mix-blend-mode: multiply; }
.b2b-info__brand-name { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--b2b-orange); }
.b2b-info__actions { display: flex; gap: 6px; flex-shrink: 0; }
.b2b-info__action {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: 1px solid var(--b2b-border); border-radius: 8px;
    padding: 6px 11px; font-size: 12px; font-weight: 600; color: var(--b2b-muted); cursor: pointer;
}
.b2b-info__action:hover { border-color: var(--b2b-blue); color: var(--b2b-blue); }
.b2b-info__title {
    font-size: 22px; font-weight: 700; line-height: 1.25; margin: 8px 0 6px; color: var(--b2b-text);
    overflow-wrap: break-word;   /* wrap between words; only split a word as last resort */
    word-break: normal;
    hyphens: none;
}
.b2b-info__style { font-size: 13px; color: var(--b2b-muted); margin: 0 0 10px; }
.b2b-info__price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.b2b-info__from { font-size: 14px; color: var(--b2b-muted); }
.b2b-info__amount { font-size: 28px; font-weight: 800; color: var(--b2b-text); }
.b2b-info__each { font-size: 14px; color: var(--b2b-muted); }
.b2b-info__msrp { font-size: 15px; color: #9ca3af; text-decoration: line-through; }
.b2b-info__badge { background: #d1fae5; color: var(--b2b-success); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 12px; }

/* ── Wishlist / compare / social row ── */
.b2b-actions-row {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--b2b-border);
}
.b2b-actions-row a, .b2b-actions-row button {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--b2b-muted); text-decoration: none;
}
.b2b-actions-row a:hover, .b2b-actions-row button:hover { color: var(--b2b-blue); }
/* ── Follow us (brand accounts) — sits at the right of the actions row ── */
.b2b-actions-row__social { margin-left: auto; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.b2b-actions-row__social a { color: var(--b2b-muted); display: inline-flex; transition: color 0.15s, transform 0.12s; }
.b2b-actions-row__social a:hover { color: var(--b2b-blue); transform: translateY(-1px); }
.b2b-follow__label { font-size: 12.5px; font-weight: 600; color: var(--b2b-text); margin-right: 2px; }

/* ── Share dropdown (in product-info card) ── */
.b2b-share { position: relative; display: inline-block; }
.b2b-share__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 170px;
    background: #fff;
    border: 1px solid var(--b2b-border);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    padding: 6px;
    z-index: 50;
    display: none;
}
.b2b-share__menu.is-open { display: block; }
.b2b-share__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    background: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--b2b-text);
    text-decoration: none;
    cursor: pointer;
    text-align: left;
}
.b2b-share__item:hover { background: var(--b2b-panel); color: var(--b2b-blue); }
.b2b-share__item svg { flex-shrink: 0; }

/* ── Floating bar centered ── */
.b2b-pricebar { justify-content: center; }
.b2b-pricebar__inner {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    max-width: 1100px; width: 100%; margin: 0 auto;
}

/* ════ Customized: Add Decoration (compact position cards) ════ */
.b2b-deco__title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.b2b-deco__hint { color: var(--b2b-muted, #6b7280); font-size: 13px; margin: 0 0 14px; }
.b2b-deco__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.b2b-deco__card { border: 2px solid var(--b2b-border, #e3e3e3); border-radius: 10px; overflow: hidden; background: #fff; }
/* Even 2px frame on all sides when selected (no inset-shadow + border mismatch). */
.b2b-deco__card.is-on { border-color: var(--b2b-blue, #2563eb); }
.b2b-deco__cardhead { padding: 10px 12px; border-bottom: 1px solid var(--b2b-border, #eee); }
.b2b-deco__enable { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; font-size: 14px; }
.b2b-deco__poslabel { font-weight: 700; }

/* Drop zone — shorter (16:10), product image ghosted behind the upload prompt. */
.b2b-deco__drop {
    position: relative; height: 150px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; cursor: pointer; background: #fafafa; overflow: hidden;
    border-bottom: 1px solid var(--b2b-border, #eee);
}
.b2b-deco__drop.is-drag { background: #eef4ff; outline: 2px dashed var(--b2b-blue, #2563eb); outline-offset: -6px; }
/* Product image shown clearly as the card visual; upload prompt sits in a pill on top. */
.b2b-deco__ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 1; padding: 6px; }
.b2b-deco__ghost--mirror { transform: scaleX(-1); }
.b2b-deco__dropcta {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: #374151; background: rgba(255,255,255,.86); border: 1px solid #e3e3e3; border-radius: 8px;
    padding: 8px 14px; backdrop-filter: blur(1px);
}
.b2b-deco__methodicon { color: var(--b2b-blue, #2563eb); }
.b2b-deco__dropmsg { font-size: 12px; font-weight: 500; }
.b2b-deco__preview { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #fff; }
/* CRITICAL: [hidden] must beat display:flex, else the white preview box covers the
   product image even before any upload (same gotcha as the fields/notes blocks). */
.b2b-deco__preview[hidden] { display: none !important; }
.b2b-deco__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.b2b-deco__remove {
    position: absolute; top: 0; right: 0; width: 26px; height: 26px;
    border: 0; border-bottom-left-radius: 8px; background: rgba(255,255,255,.95); color: #6b7280;
    font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center;
    justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.12); z-index: 2;
}
.b2b-deco__remove:hover { background: #fee2e2; color: #b91c1c; }
.b2b-deco__filebadge {
    background: #eef2ff; color: #3730a3; font-weight: 800; font-size: 16px; letter-spacing: .04em;
    padding: 14px 20px; border-radius: 8px;
}
.b2b-deco__upmsg { padding: 6px 12px; font-size: 12px; min-height: 16px; }
.b2b-deco__ok { color: #1a7f37; font-weight: 600; }
.b2b-deco__err { color: #b32d2e; font-weight: 600; }

/* Non-vector upload warning modal (Swag-style). */
.b2b-vecmodal { position: fixed; inset: 0; z-index: 9999; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.b2b-vecmodal__box { position: relative; background: #fff; border-radius: 12px; max-width: 520px; width: 100%; padding: 32px 36px; box-shadow: 0 20px 60px rgba(0,0,0,.3); text-align: center; }
.b2b-vecmodal__close { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border: none; background: #38bdf8; color: #fff; border-radius: 5px; cursor: pointer; font-size: 13px; }
.b2b-vecmodal__title { font-size: 22px; font-weight: 800; margin: 4px 0 16px; color: #111827; line-height: 1.25; }
.b2b-vecmodal__text { font-size: 14px; color: #4b5563; line-height: 1.55; margin: 0 auto 22px; max-width: 420px; }
.b2b-vecmodal__actions { display: flex; gap: 12px; }
.b2b-vecmodal__actions button { flex: 1; padding: 13px 16px; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer; border: none; }
.b2b-vecmodal__continue { background: #e5e7eb; color: #374151; }
.b2b-vecmodal__continue:hover { background: #d1d5db; }
.b2b-vecmodal__vector { background: #38bdf8; color: #fff; }
.b2b-vecmodal__vector:hover { background: #0ea5e9; }
@media (max-width: 560px) { .b2b-vecmodal__actions { flex-direction: column; } .b2b-vecmodal__box { padding: 26px 22px; } }

/* Fields — Decoration Type on its own full-width row (never clips), then W/H/Colors.
   Notes hidden behind a toggle. */
.b2b-deco__fields { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
/* CRITICAL: [hidden] must beat display:flex, or unchecked cards + collapsed notes
   stay visible and the toggle appears to do nothing. */
.b2b-deco__fields[hidden], .b2b-deco__notes[hidden] { display: none !important; }
.b2b-deco__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.b2b-deco__flabel {
    display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600;
    color: #50575e; min-width: 0;
}
.b2b-deco__flabel--type { font-size: 12px; }
.b2b-deco__fields select, .b2b-deco__fields input, .b2b-deco__fields textarea {
    padding: 8px; border: 1px solid #c8c8c8; border-radius: 6px; font-family: inherit;
    font-weight: 400; width: 100%; min-width: 0; box-sizing: border-box;
}
.b2b-deco__fields select { text-overflow: ellipsis; }
.b2b-deco__notestoggle {
    align-self: flex-start; background: none; border: 0; color: var(--b2b-blue, #2563eb);
    font-weight: 600; font-size: 12.5px; cursor: pointer; padding: 0;
}
.b2b-deco__notes { display: flex; flex-direction: column; gap: 8px; }
.b2b-deco__notes textarea { min-height: 40px; resize: vertical; }

/* ════ Customized: Finishing services (DTLA-style cards) ════ */
.b2b-fin__title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.b2b-fin__opt { font-weight: 400; color: #9ca3af; font-size: 13px; }
.b2b-fin__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.b2b-fin__card {
    display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--b2b-border, #e3e3e3);
    border-radius: 10px; padding: 10px; cursor: pointer; background: #fff;
}
.b2b-fin__card.is-on { border-color: var(--b2b-blue, #2563eb); box-shadow: 0 0 0 1px var(--b2b-blue, #2563eb) inset; }
.b2b-fin__cb { margin-top: 3px; }
.b2b-fin__thumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.b2b-fin__thumb--ph { display: flex; align-items: center; justify-content: center; background: #f3f4f6; color: #9ca3af; }
.b2b-fin__body { flex: 1; min-width: 0; }
.b2b-fin__name { font-weight: 700; font-size: 13.5px; }
.b2b-fin__desc { color: #6b7280; font-size: 12px; margin: 2px 0 4px; }
.b2b-fin__meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.b2b-fin__price { font-weight: 700; color: #111827; }
.b2b-fin__lead { color: #b45309; font-size: 12px; font-weight: 600; }
.b2b-fin__min { color: #9ca3af; font-size: 12px; }

/* Customized price breakdown line */
.b2b-pricecard__breakdown { flex-basis: 100%; margin-top: 10px; font-size: 12.5px; color: #6b7280; }
.b2b-bd { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--b2b-border, #eee); padding-top: 10px; }
.b2b-bd__row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.b2b-bd__label { color: #374151; font-weight: 600; }
.b2b-bd__sub { color: #9ca3af; font-weight: 400; font-style: normal; font-size: 11.5px; }
.b2b-bd__amt { color: #111827; font-weight: 600; white-space: nowrap; }
.b2b-bd__note { color: var(--b2b-blue, #2563eb); font-weight: 600; margin-top: 2px; }

/* ════ Customized: numbered steps (DTLA-style progressive disclosure) ════ */
.b2b-step {
    border: 1px solid var(--b2b-border, #e3e3e3); border-radius: 12px; margin-bottom: 12px;
    background: #fff; overflow: hidden;
}
.b2b-step__head {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 18px;
    background: none; border: 0; cursor: pointer; text-align: left; font: inherit;
}
.b2b-step.is-locked .b2b-step__head { cursor: not-allowed; opacity: .5; }
.b2b-step__num {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #e5e7eb; color: #6b7280;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.b2b-step.is-open .b2b-step__num,
.b2b-step.is-done .b2b-step__num { background: var(--b2b-blue, #2563eb); color: #fff; }
.b2b-step__title { font-weight: 700; font-size: 15px; color: #111827; }
.b2b-step__optional { font-weight: 400; color: #9ca3af; font-size: 13px; }
.b2b-step__summary { margin-left: auto; color: #6b7280; font-size: 13px; }
.b2b-step__chevron { color: #9ca3af; transition: transform .18s ease; margin-left: 10px; }
.b2b-step.is-open .b2b-step__chevron { transform: rotate(180deg); }
.b2b-step__summary + .b2b-step__chevron { margin-left: 10px; }

/* Body collapses unless the step is open. */
.b2b-step__body { display: none; padding: 0 18px 18px; }
.b2b-step.is-open .b2b-step__body { display: block; }

/* Steps reuse the blank cards inside; drop their outer margins to avoid doubling. */
.b2b-step__body .b2b-card { box-shadow: none; border: 0; padding: 0; margin: 0 0 14px; }

.b2b-step__next {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 11px 22px;
    background: var(--b2b-blue, #2563eb); color: #fff; border: 0; border-radius: 8px;
    font-weight: 700; font-size: 14px; cursor: pointer;
}
.b2b-step__next:hover { filter: brightness(.95); }

/* Step validation: inline field error + summary message near Continue. */
.b2b-invalid,
.b2b-deco__fields .b2b-invalid { border-color: #dc2626 !important; box-shadow: 0 0 0 1px #dc2626 !important; }
.b2b-deco__drop.b2b-invalid { outline: 2px solid #dc2626; outline-offset: -2px; }

/* Live "still needs a value" orange glow on Width/Height/Colors -- distinct
   from the red .b2b-invalid state above (which only appears after a failed
   Next-step submit attempt). Applied as soon as a position is enabled and
   toggled off the moment a valid value is entered (product-order.js
   refreshRequiredGlow()), per Victoria's explicit request (2026-08-16). */
.b2b-deco__fields .b2b-deco-required {
    border-color: #F5622E !important;
    box-shadow: 0 0 0 1px #F5622E, 0 0 6px 1px rgba(245,98,46,0.55) !important;
}
.b2b-step__error {
    margin: 0 0 10px; padding: 9px 12px; border-radius: 8px;
    background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
    font-size: 12.5px; font-weight: 600;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .b2b-card { padding: 14px; }
    .b2b-info__title { font-size: 19px; }
    .b2b-pricecard__col + .b2b-pricecard__col { border-left: none; padding-left: 0; border-top: 1px solid var(--b2b-border); padding-top: 12px; }
    .b2b-matrix__table { font-size: 12px; }
    .b2b-matrix__input { width: 52px; padding: 7px 4px; }
    /* Per-color cards: tighter header; size boxes stay one row + scroll on mobile */
    .b2b-qtycard__head { gap: 8px; padding: 12px 14px; }
    .b2b-qtycard__subtotal { margin-left: auto; }
    /* Base rule (auto-fit) already wraps; on small screens cap at ~5 per row. */
    .b2b-qtycard__sizes { grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); padding: 14px; }
    .b2b-qtycard__size { width: 100%; }
    #b2b-order .b2b-qtycard__sizes .b2b-matrix__input,
    .b2b-qtycard__sizes .b2b-matrix__input {
        width: 100% !important; max-width: none !important;
    }
    .b2b-pricebar { gap: 8px; padding: 10px 14px; }
    .b2b-pricebar__name { max-width: 100%; flex: 1 1 100%; }
    .b2b-pricebar__meta { flex: 1 1 100%; order: 3; }
    .b2b-pricebar__total { order: 2; }
    .b2b-pricebar__cta { order: 4; flex: 1 1 100%; }
    .b2b-trust__badges { grid-template-columns: 1fr; }

    /* On mobile, rely on the single always-visible sticky bottom CTA. Hide the
       inline price-card Add/Update button to remove the duplicate CTA. */
    .b2b-addcart { display: none; }

    /* Customized steps + decoration/finishing → single column, compact. */
    .b2b-step__head { padding: 14px 14px; gap: 8px; }
    .b2b-step__title { font-size: 14px; }
    .b2b-step__summary { font-size: 12px; }
    .b2b-step__body { padding: 0 14px 14px; }
    .b2b-deco__cards, .b2b-fin__cards { grid-template-columns: 1fr; }
    /* W/H/Colors stay 3-up (they're short); Decoration Type is already full-width. */
    .b2b-step__next { width: 100%; justify-content: center; }

    /* FOUND 2026-08-02 (user-reported, mobile-only, via screenshot): a
       visible blank gap appeared between the Wishlist/Compare/Follow-us row
       and the Product Details accordion below it. Root cause:
       .b2b-actions-row__social (the "Follow us" social icons) uses
       margin-left:auto to push itself to the right edge of the row on wide
       desktop layouts (see the base rule above) — combined with
       flex-wrap:wrap on the parent .b2b-actions-row, a narrow mobile
       viewport wraps the social icons onto their OWN line, and that
       leftover auto margin then shoves them (or the empty space intended
       for them) to the right of an otherwise-empty line, reading as a tall
       blank gap. Reset the auto margin on mobile so wrapped content flows
       naturally onto its own full-width line instead of leaving phantom
       space for a right-alignment that no longer makes sense once wrapped. */
    .b2b-actions-row__social { margin-left: 0; width: 100%; }
}