/* ============================================================================
   B2B Cart — Swag-style collapsible cards + sticky order summary.
   Mobile-first, accessible, scoped to .b2b-* so the theme can't bleed in.
   ============================================================================ */

/* ── Widen ONLY the cart content area (never shared layout containers like
   .col-full or the header, which would clip them). We let the inner content
   region go full-width and our own .b2b-cart-wrap re-centers at 1240px. ──────── */
.b2b-cart-page .site-content #primary,
.b2b-cart-page .site-content .content-area,
.b2b-cart-page .site-content .entry-content,
.b2b-cart-page .site-content .woocommerce,
.b2b-cart-page .shoptimizer-cart-wrapper {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    overflow: visible !important;
}
/* Release overflow clipping on the column so tooltips/shadows aren't cut. */
.b2b-cart-page .site-content,
.b2b-cart-page #content,
.b2b-cart-page #main { overflow: visible !important; }

.b2b-cart-wrap {
    --b2b-blue: #2f6bff;
    --b2b-blue-dark: #1d4ed8;
    --b2b-accent: #e11d74;        /* signature pink for prices/totals */
    --b2b-ink: #1a1f36;
    --b2b-muted: #8a93a6;
    --b2b-line: #e8eaf0;
    --b2b-bg: #f4f6fa;
    --b2b-green: #0aa06e;
    --b2b-card-radius: 14px;
    --b2b-shadow: 0 1px 3px rgba(20,23,40,.04), 0 6px 20px rgba(20,23,40,.05);
    --b2b-gap: 22px;

    display: block !important;   /* never inherit theme flex/grid */
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 16px 40px;
    color: var(--b2b-ink);
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    float: none !important;
    clear: both;
    background: var(--b2b-bg);
}
/* Each top-level region is its own full-width block row. */
.b2b-cart-wrap > .b2b-steps,
.b2b-cart-wrap > .b2b-cart-layout,
.b2b-cart-wrap > .b2b-trust { display: block; width: 100%; clear: both; }
.b2b-cart-wrap > .b2b-trust { display: block; }
.b2b-cart-wrap *, .b2b-cart-wrap *::before, .b2b-cart-wrap *::after { box-sizing: border-box; }

/* Cards ------------------------------------------------------------------- */
.b2b-card {
    background: #fff;
    border: 1px solid var(--b2b-line);
    border-radius: var(--b2b-card-radius);
    padding: 20px 22px;
    margin-bottom: var(--b2b-gap);
    box-shadow: var(--b2b-shadow);
}

/* Buttons + links --------------------------------------------------------- */
.b2b-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, transform .05s ease;
    min-height: 48px;
}
.b2b-btn--primary { background: var(--b2b-blue); color: #fff; }
.b2b-btn--primary:hover { background: var(--b2b-blue-dark); color: #fff; }
.b2b-btn--primary:active { transform: translateY(1px); }
.b2b-btn--paypal { background: #ffc439; color: #003087; margin-top: 10px; }
.b2b-paypal-text { font-style: italic; font-weight: 800; font-size: 17px; }
.b2b-paypal-text span { color: #0070ba; }

.b2b-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--b2b-blue);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.b2b-link:hover { text-decoration: underline; }
.b2b-link--add { color: var(--b2b-blue); }
.b2b-link--disabled { color: #9ca3af; cursor: not-allowed; }
.b2b-link--disabled:hover { text-decoration: none; }

/* Focus visibility (a11y) ------------------------------------------------- */
.b2b-cart-wrap a:focus-visible,
.b2b-cart-wrap button:focus-visible,
.b2b-cart-wrap [tabindex]:focus-visible,
.b2b-cart-wrap textarea:focus-visible,
.b2b-cart-wrap input:focus-visible {
    outline: 2px solid var(--b2b-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Steps header ────────────────────────────────────────────────────────── */
.b2b-steps { margin: 4px 0 22px; }
.b2b-steps__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.b2b-step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--b2b-muted);
    font-weight: 600;
    font-size: 13px;
    position: relative;
    padding: 0 8px;
}
.b2b-step:not(:last-child)::after {
    content: "";
    width: 48px; height: 2px;
    background: var(--b2b-line);
    margin-left: 8px;
}
.b2b-step__dot {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--b2b-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.b2b-step--active { color: var(--b2b-ink); }
.b2b-step--active .b2b-step__dot { background: var(--b2b-ink); border-color: var(--b2b-ink); color: #fff; }
.b2b-step--done .b2b-step__dot { background: var(--b2b-green); border-color: var(--b2b-green); color: #fff; }
.b2b-step--active:not(:last-child)::after { background: var(--b2b-green); }

/* ── Layout (2-col on desktop) ───────────────────────────────────────────── */
.b2b-cart-wrap .b2b-cart-layout {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: var(--b2b-gap);
    align-items: start;
    width: 100%;
    margin: 0;
    border: 0;
    background: none;
}
.b2b-cart-wrap .b2b-cart-main { min-width: 0; }
.b2b-cart-wrap .b2b-cart-aside { min-width: 0; }

/* ── Item card ───────────────────────────────────────────────────────────── */
.b2b-item {
    background: #fff;
    border: 1px solid var(--b2b-line);
    border-radius: var(--b2b-card-radius);
    margin-bottom: var(--b2b-gap);
    box-shadow: var(--b2b-shadow);
    /* NOTE: no overflow:hidden — it would clip the size/delivery tooltips that
       extend past the card. The action row rounds its own bottom corners. */
    position: relative;
    z-index: 1;
}
/* While a tooltip inside this card is open, lift the whole card above siblings
   so the bubble is never covered by the next card. */
.b2b-item:hover,
.b2b-item:focus-within { z-index: 5; }
.b2b-item__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    padding: 22px 24px;
    align-items: start;
}
/* Bigger product thumbnail */
.b2b-item__thumb img {
    width: 120px; height: 120px;
    object-fit: contain;
    border-radius: 10px;
    background: #f9fafb;
    border: 1px solid var(--b2b-line);
    display: block;
}

/* Expand "Details" control — first item in the action row, blue with arrow */
.b2b-item__expand {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--b2b-blue); font-size: 13px; font-weight: 600;
}
.b2b-item__expand:hover { text-decoration: underline; }
.b2b-item__expand-icon { transition: transform .25s ease; }
.b2b-item[data-expanded="true"] .b2b-item__expand-icon { transform: rotate(180deg); }
.b2b-item[data-expanded="true"] .b2b-item__expand-label::after { content: ""; }

/* Attention bounce on the down-arrow: a few bounces on load, then stop. */
@keyframes b2bArrowBounce {
    0%, 100% { transform: translateY(0); }
    25%      { transform: translateY(2.5px); }
    50%      { transform: translateY(0); }
    75%      { transform: translateY(2.5px); }
}
.b2b-item:not([data-expanded="true"]) .b2b-item__expand-arrow {
    animation: b2bArrowBounce 1.1s ease-in-out 0s 3;   /* runs 3 times, then stops */
    transform-origin: center;
    transform-box: fill-box;
}
@media (prefers-reduced-motion: reduce) {
    .b2b-item__expand-arrow { animation: none !important; }
}

.b2b-item__titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.b2b-item__title { font-size: 18px; font-weight: 700; margin: 0; line-height: 1.3; }
.b2b-item__title a { color: var(--b2b-ink); text-decoration: none; }
.b2b-item__title a:hover { color: var(--b2b-blue); }

.b2b-badge {
    display: inline-block;
    font-size: 11px; font-weight: 700;
    padding: 3px 9px; border-radius: 5px;
    letter-spacing: .02em;
}
.b2b-badge--blank { background: #eef2ff; color: #3730a3; }
.b2b-badge--custom { background: #ecfdf5; color: #065f46; }

.b2b-item__facts {
    list-style: none; margin: 12px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 7px;
    font-size: 13.5px; color: #374151;
}
.b2b-item__facts li { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.b2b-item__fact-label { color: var(--b2b-muted); }
.b2b-item__facts strong { font-weight: 700; }

.b2b-item__pricing {
    text-align: right;
    min-width: 170px;
    display: flex; flex-direction: column; gap: 7px;
    font-size: 13.5px;
}
.b2b-item__price-line { display: flex; justify-content: space-between; gap: 18px; color: #4b5563; }
.b2b-item__price-line span em { color: var(--b2b-muted); font-style: normal; font-size: 12px; }
.b2b-item__price-line strong { color: #374151; font-weight: 700; white-space: nowrap; }
.b2b-item__price-line--total {
    margin-top: 6px; padding-top: 10px;
    border-top: 1px solid var(--b2b-line);
    font-size: 15px; align-items: baseline;
}
.b2b-item__price-line--total > span { color: var(--b2b-ink); font-weight: 600; }
.b2b-item__price-line--total strong { color: var(--b2b-accent); font-size: 19px; font-weight: 800; }
.b2b-item__price-line--total strong .amount,
.b2b-item__price-line--total strong bdi { color: var(--b2b-accent); }

/* "After proof approval" note under the customized delivery estimate. */
.b2b-item__deliv-note { display: block; color: var(--b2b-muted, #6b7280); font-size: 11.5px; font-style: italic; margin-top: 1px; }

/* Action row -------------------------------------------------------------- */
.b2b-item__actions {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 24px;
    border-top: 1px solid var(--b2b-line);
    background: #fafbfc;
    border-radius: 0 0 var(--b2b-card-radius) var(--b2b-card-radius);
}
.b2b-item__sep { color: #d1d5db; }
.b2b-item__remove {
    margin-left: auto; color: var(--b2b-muted); display: inline-flex;
    padding: 4px; border-radius: 6px;
}
.b2b-item__remove:hover { color: #b91c1c; background: #fef2f2; }

/* ── Tooltips (open BELOW the trigger so the header never clips them) ─────── */
.b2b-tip { position: relative; display: inline-flex; align-items: center; }
.b2b-tip__trigger { color: var(--b2b-blue); text-decoration: underline; cursor: help; font-size: 12px; }
.b2b-tip__icon { color: var(--b2b-muted); cursor: help; }
/* Larger, blue delivery info icon */
.b2b-tip--delivery .b2b-tip__icon { color: var(--b2b-blue); }
.b2b-tip--delivery { vertical-align: middle; }
.b2b-tip__bubble {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    background: #fff; color: #4b5563;
    padding: 14px 16px; border-radius: 12px;
    font-size: 13px; line-height: 1.65;
    width: max-content; max-width: 320px;
    display: flex; flex-direction: column; gap: 7px;
    opacity: 0; visibility: hidden;
    transition: opacity .15s ease;
    z-index: 60;
    border: 1px solid var(--b2b-line);
    box-shadow: 0 12px 32px rgba(20,23,40,.14);
    text-align: left;
}
.b2b-tip__bubble--wide { max-width: 340px; }
/* Arrow — same clean white for every tooltip */
.b2b-tip__bubble::before {
    content: ""; position: absolute; bottom: 100%; left: 20px;
    border: 8px solid transparent; border-bottom-color: #fff;
    filter: drop-shadow(0 -1px 0 var(--b2b-line));
}
.b2b-tip:hover .b2b-tip__bubble,
.b2b-tip:focus .b2b-tip__bubble,
.b2b-tip:focus-within .b2b-tip__bubble,
.b2b-tip.is-open .b2b-tip__bubble { opacity: 1; visibility: visible; }
.b2b-tip__row { display: block; }
.b2b-tip__row strong { color: var(--b2b-ink); font-weight: 700; }

/* Size-breakdown tooltip: color head + size/qty chips (swag.com style) */
.b2b-tip__bubble--breakdown { gap: 12px; min-width: 240px; }
.b2b-tip__color { display: flex; flex-direction: column; gap: 5px; }
.b2b-tip__color:not(:last-child) { padding-bottom: 10px; border-bottom: 1px solid var(--b2b-line); }
.b2b-tip__colorhead { display: flex; align-items: center; gap: 7px; }
.b2b-tip__colorhead strong { color: var(--b2b-ink); font-weight: 700; font-size: 12.5px; }
.b2b-tip__dot { width: 12px; height: 12px; border-radius: 50%; object-fit: cover; border: 1px solid var(--b2b-line); }
.b2b-tip__sizes { display: flex; flex-wrap: wrap; gap: 5px 8px; }
.b2b-tip__pair {
    font-size: 12px; color: var(--b2b-muted);
    background: #f4f6fa; border-radius: 5px; padding: 2px 7px;
    white-space: nowrap;
}
.b2b-tip__pair em { color: var(--b2b-ink); font-style: normal; font-weight: 700; }

/* ── Expanded body: per-color cards + size grid ──────────────────────────── */
.b2b-item__body { padding: 4px 24px 16px; border-top: 1px solid var(--b2b-line); }
.b2b-colors { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; }
.b2b-color { border: 1px solid var(--b2b-line); border-radius: 12px; overflow: hidden; }

.b2b-color__main { display: flex; gap: 20px; padding: 20px 22px; align-items: flex-start; }
.b2b-color__thumbwrap { flex-shrink: 0; }
.b2b-color__thumb {
    width: 110px; height: 110px; object-fit: contain;
    border-radius: 10px; background: #fff; border: 1px solid var(--b2b-line);
    display: block;
}
.b2b-color__thumb--blank { background: #f3f4f6; }
.b2b-color__content { flex: 1; min-width: 0; }

.b2b-color__head { display: flex; align-items: center; gap: 28px; margin-bottom: 16px; }
.b2b-color__namerow { display: flex; align-items: center; gap: 9px; }
.b2b-color__swatch { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; border: 1px solid var(--b2b-line); }
.b2b-color__swatch--blank { background: #e5e7eb; display: inline-block; }
.b2b-color__name { font-weight: 700; font-size: 16px; }
.b2b-color__qty { font-size: 13.5px; color: var(--b2b-muted); }
.b2b-color__qty strong { color: var(--b2b-ink); font-weight: 700; margin-left: 2px; }
.b2b-color__price { margin-left: auto; text-align: right; white-space: nowrap; font-size: 16px; }
.b2b-color__msrp { color: var(--b2b-muted); text-decoration: line-through; font-size: 13px; margin-right: 8px; }
.b2b-color__amount { font-weight: 700; }
.b2b-color__oos-note { color: #b45309; font-size: 12px; margin: 0 0 10px; }

/* Per-color action row */
.b2b-color__actions {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 13px 22px;
    border-top: 1px solid var(--b2b-line);
    background: #fafbfc;
}
.b2b-color__actions .b2b-link { font-size: 13.5px; }
.b2b-link--remove { color: var(--b2b-blue); }

/* Rainbow "Add Another Color" dot (matches the reference) */
.b2b-link--rainbow { color: var(--b2b-blue); }
.b2b-rainbow {
    width: 15px; height: 15px; border-radius: 50%;
    background: conic-gradient(#ef4444, #f59e0b, #eab308, #22c55e, #3b82f6, #8b5cf6, #ef4444);
    display: inline-block; flex-shrink: 0;
    box-shadow: inset 0 0 0 3px #fff;
}

/* Size grid (horizontal scroll on small screens) */
.b2b-sizegrid { position: relative; }
.b2b-sizegrid__scroll {
    display: flex; gap: 18px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.b2b-sizegroup { flex-shrink: 0; }
.b2b-sizegroup:not(:last-child) { padding-right: 20px; border-right: 1px solid #f0f1f3; }
.b2b-sizegroup__label { font-size: 11px; font-weight: 700; color: var(--b2b-muted); letter-spacing: .06em; margin-bottom: 10px; }
.b2b-sizegroup__cells { display: flex; gap: 3px; }
.b2b-sizecell {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    min-width: 44px;
}
.b2b-sizecell__label { font-size: 12px; color: var(--b2b-muted); font-weight: 700; text-transform: uppercase; }
.b2b-sizecell__qty {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 1.5px solid var(--b2b-line); border-radius: 8px;
    font-weight: 700; font-size: 15px; background: #fff; color: var(--b2b-ink);
}
.b2b-sizecell.is-oos .b2b-sizecell__qty { background: #f9fafb; color: #d1d5db; border-style: dashed; }
.b2b-sizegrid__fade {
    position: absolute; right: 0; top: 0; bottom: 8px; width: 28px;
    background: linear-gradient(to right, transparent, #fff);
    pointer-events: none; opacity: 0; transition: opacity .15s ease;
}
.b2b-sizegrid.is-scrollable .b2b-sizegrid__fade { opacity: 1; }

/* ── Notes / approval / brand-it ─────────────────────────────────────────── */
.b2b-notes__head { display: flex; gap: 12px; margin-bottom: 12px; color: var(--b2b-blue); }
.b2b-notes__title { font-size: 15px; font-weight: 700; margin: 0; color: var(--b2b-blue); }
.b2b-notes__sub { font-size: 12.5px; color: var(--b2b-muted); margin: 2px 0 0; }
.b2b-notes__field {
    width: 100%; border: 1px solid var(--b2b-line); border-radius: 8px;
    padding: 12px; font-size: 14px; font-family: inherit; resize: vertical; min-height: 84px;
}

.b2b-approval__title { font-size: 18px; font-weight: 700; margin: 0 0 14px; }
.b2b-approval__opt {
    display: flex; gap: 12px; align-items: flex-start;
    border: 1px solid var(--b2b-line); border-radius: 10px;
    padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
}
.b2b-approval__opt.is-selected { border-color: var(--b2b-blue); box-shadow: 0 0 0 1px var(--b2b-blue); }
.b2b-approval__opt input { margin-top: 3px; accent-color: var(--b2b-blue); }
.b2b-approval__name { font-weight: 600; display: block; }
.b2b-approval__desc { font-size: 12.5px; color: var(--b2b-muted); display: block; margin-top: 2px; }

/* "Add Your Logo" upsell — soft blue gradient card with a Customize button */
.b2b-brandit {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: var(--b2b-gap);
    padding: 20px 24px;
    border: 1px solid #d6e4ff;
    border-radius: var(--b2b-card-radius);
    background: linear-gradient(110deg, #eef4ff 0%, #f6f9ff 55%, #fff 100%);
    box-shadow: var(--b2b-shadow);
}
.b2b-brandit__visual {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
/* Hat photo feature visual — tile matches the image aspect ratio so the padding
   is even on all sides (a square box would leave big top/bottom gaps). */
.b2b-brandit__hat {
    width: 116px; height: auto;
    object-fit: contain;
    padding: 2px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #d6e4ff;
    display: block;
}
/* Fallback drawn-cap icon */
.b2b-brandit__icon {
    width: 52px; height: 52px; border-radius: 12px;
    background: #fff; border: 1px solid #d6e4ff;
    display: flex; align-items: center; justify-content: center;
    color: var(--b2b-blue);
}
.b2b-brandit__text { flex: 1; min-width: 0; }
.b2b-brandit__title { font-weight: 800; font-size: 16px; color: var(--b2b-ink); display: block; }
.b2b-brandit__sub { font-size: 13px; color: #5b6472; display: block; margin-top: 4px; line-height: 1.45; }
.b2b-brandit__cta {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--b2b-blue); color: #fff;
    border: 0; border-radius: 10px;
    padding: 12px 22px; font-size: 14px; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    transition: background .15s ease, transform .05s ease;
}
.b2b-brandit__cta:not(:disabled):hover { background: var(--b2b-blue-dark); }
.b2b-brandit__cta:not(:disabled):active { transform: translateY(1px); }
.b2b-brandit__cta.b2b-link--disabled { opacity: .6; cursor: not-allowed; }

@media (max-width: 600px) {
    .b2b-brandit { flex-wrap: wrap; }
    .b2b-brandit__cta { width: 100%; justify-content: center; }
}

.b2b-cart-additions { margin: -6px 0 var(--b2b-gap); padding-left: 4px; }

/* ── Order summary ───────────────────────────────────────────────────────── */
.b2b-summary { padding: 24px; }
.b2b-summary__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.b2b-summary__title { font-size: 21px; font-weight: 800; margin: 0; }
.b2b-summary__share { font-size: 12px; }
.b2b-summary__lines { margin: 0; }
.b2b-summary__row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14px; align-items: flex-start; }
.b2b-summary__row dt { color: #374151; margin: 0; }
.b2b-summary__row dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.b2b-summary__muted { color: var(--b2b-muted); font-size: 12.5px; display: block; font-weight: 400; }
.b2b-summary__row--save dt { color: var(--b2b-green); }
.b2b-summary__row--save dd { color: var(--b2b-green); font-weight: 700; }
.b2b-summary__free { color: var(--b2b-green); font-weight: 700; }
/* Free-shipping nudge (under $500): encourages reaching the free-ship threshold */
.b2b-summary__freeship-nudge {
    display: flex; align-items: center; gap: 8px;
    margin: 8px 0 4px; padding: 9px 12px;
    background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 8px;
    color: #065f46; font-size: 12.5px; line-height: 1.35;
}
.b2b-summary__freeship-nudge svg { flex-shrink: 0; color: #059669; }
.b2b-summary__freeship-nudge strong { font-weight: 800; }
.b2b-summary__delivery-est dd { font-weight: 600; }
.b2b-summary__ziprow { margin: 4px 0 8px; }
.b2b-summary__ziplabel { display: block; font-size: 12px; color: var(--b2b-muted); margin-bottom: 4px; }
.b2b-summary__zip {
    width: 110px; padding: 8px 10px; font-size: 14px;
    border: 1px solid var(--b2b-line); border-radius: 8px;
    box-sizing: border-box; -moz-appearance: textfield;
}
.b2b-summary__zip:focus { outline: none; border-color: var(--b2b-blue); box-shadow: 0 0 0 2px rgba(47,107,255,.15); }
.b2b-summary__discount-toggle { margin: 12px 0; }
.b2b-summary__total {
    display: flex; justify-content: space-between; align-items: baseline;
    border-top: 2px solid var(--b2b-line); margin-top: 14px; padding-top: 16px;
    font-size: 18px; font-weight: 700;
}
.b2b-summary__total strong { font-size: 25px; color: var(--b2b-accent); font-weight: 800; }
.b2b-summary__total strong .amount, .b2b-summary__total strong bdi { color: var(--b2b-accent); }
.b2b-summary__checkout { margin-top: 16px; }
.b2b-summary__secure {
    margin-top: 16px; padding: 14px; border: 1px solid var(--b2b-line); border-radius: 10px;
    text-align: center;
}
.b2b-summary__secure-title { font-size: 12px; font-weight: 700; color: var(--b2b-muted); letter-spacing: .04em; }
.b2b-summary__secure-list {
    list-style: none; margin: 10px 0 0; padding: 0;
    display: flex; justify-content: space-around; gap: 8px;
}
.b2b-summary__secure-list li {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    font-size: 10.5px; color: var(--b2b-muted); text-align: center; flex: 1;
}
.b2b-summary__secure-list svg { color: #9ca3af; }

/* ── Contact / support bar ───────────────────────────────────────────────── */
.b2b-contact {
    margin-top: 8px;
    background: #fff;
    border: 1px solid var(--b2b-line);
    border-radius: var(--b2b-card-radius);
    box-shadow: var(--b2b-shadow);
    padding: 22px 26px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}
.b2b-contact__title { margin: 0; font-size: 15px; font-weight: 700; }
.b2b-contact__line { margin: 2px 0 0; font-size: 13px; color: var(--b2b-muted); }
.b2b-contact__actions { display: flex; gap: 28px; flex-wrap: wrap; }
.b2b-contact__action { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--b2b-ink); }
.b2b-contact__action:hover strong { color: var(--b2b-blue); }
.b2b-contact__action svg { color: var(--b2b-blue); flex-shrink: 0; }
.b2b-contact__action strong { display: block; font-size: 14px; color: var(--b2b-blue); }
.b2b-contact__action em { display: block; font-style: normal; font-size: 11.5px; color: var(--b2b-muted); }

/* ── Trust footer — official-style seal badges ───────────────────────────── */
.b2b-trust { margin-top: var(--b2b-gap); padding: 28px 20px 12px; text-align: center; }
.b2b-trust__headline {
    font-size: 14px; font-weight: 600; color: var(--b2b-muted);
    margin: 0 0 22px;
}
.b2b-seals {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: flex-start;
    justify-content: center; gap: 36px;
}
.b2b-seal {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: 120px;
}
.b2b-seal__emblem { width: 60px; height: 60px; }
.b2b-seal__emblem svg { width: 100%; height: 100%; display: block; }
.b2b-seal__label {
    font-size: 12px; font-weight: 700; color: #4b5563;
    text-transform: uppercase; letter-spacing: .03em; line-height: 1.3;
}
/* Seal accent colors */
.b2b-seal.is-green { color: #0f9d58; }
.b2b-seal.is-blue  { color: #1a73e8; }
.b2b-seal.is-amber { color: #f5a623; }

/* ── Empty cart ──────────────────────────────────────────────────────────── */
.b2b-cart-empty { text-align: center; padding: 48px 20px; }
.b2b-cart-empty p { color: var(--b2b-muted); margin-bottom: 18px; }
.b2b-cart-empty .b2b-btn { width: auto; display: inline-flex; }

/* ── Badges for the mini-cart (header) ───────────────────────────────────── */
.b2b-cart-badge {
    display: inline-block; font-size: 11px; font-weight: 600; line-height: 1;
    padding: 3px 7px; margin-left: 6px; border-radius: 4px;
    background: #eef2ff; color: #3730a3; vertical-align: middle;
}
.b2b-cart-mini-pieces { display: block; font-size: 12px; color: var(--b2b-muted); margin-top: 2px; }

/* ============================================================================
   Responsive
   ============================================================================ */
@media (min-width: 1024px) {
    .b2b-cart-wrap .b2b-cart-layout { grid-template-columns: minmax(0, 1fr) 380px; }
    .b2b-cart-wrap .b2b-cart-aside { position: sticky; top: 20px; }
}

@media (max-width: 820px) {
    .b2b-contact { flex-direction: column; align-items: flex-start; gap: 16px; }
    .b2b-contact__actions { gap: 18px; }
}

@media (max-width: 700px) {
    .b2b-cart-wrap { padding: 10px; }

    /* Tooltips: constrain to the viewport so they never clip off the screen edge.
       Pinned to both screen edges (12px margin), viewport-capped width; JS sets
       the vertical position just below (or above) the trigger. */
    .b2b-tip__bubble {
        position: fixed;
        left: 12px; right: 12px; top: auto;
        width: auto; max-width: none; min-width: 0;
        margin: 0;
        z-index: 9999;
        max-height: 70vh; overflow-y: auto;
    }
    .b2b-tip__bubble::before { display: none; }   /* arrow can't align when full-width */

    .b2b-item__head { grid-template-columns: auto 1fr; gap: 12px; padding: 14px; }
    .b2b-item__pricing {
        grid-column: 1 / -1; text-align: left; min-width: 0;
        border-top: 1px solid var(--b2b-line); padding-top: 10px; margin-top: 4px;
    }
    .b2b-item__thumb img { width: 64px; height: 64px; }
    .b2b-item__actions { padding: 12px 14px; }
    .b2b-trust__list { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    /* Steps header → compact: show only the active label */
    .b2b-step__label { display: none; }
    .b2b-step--active .b2b-step__label { display: inline; }
    .b2b-step:not(:last-child)::after { width: 24px; }

    /* ── Expanded per-color cards: stop overflow, stack for mobile ─────────── */
    .b2b-item__body { padding: 4px 12px 12px; }
    /* Thumbnail goes on top, content full-width below — no side-by-side squeeze */
    .b2b-color__main { flex-direction: column; gap: 12px; padding: 14px; }
    .b2b-color__thumb { width: 72px; height: 72px; }
    /* Head wraps: name row on top, price drops below (no more clipped price) */
    .b2b-color__head { gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
    .b2b-color__name { font-size: 15px; }
    .b2b-color__price { margin-left: 0; width: 100%; text-align: left; }
    /* Swag-style: size cells WRAP to fit the screen instead of scrolling off. */
    .b2b-sizegrid__scroll { flex-wrap: wrap; gap: 14px; overflow-x: visible; }
    .b2b-sizegroup { flex: 1 1 100%; }
    .b2b-sizegroup:not(:last-child) { padding-right: 0; border-right: none; padding-bottom: 12px; border-bottom: 1px solid #f0f1f3; }
    .b2b-sizegroup__cells { flex-wrap: wrap; gap: 8px; }
    .b2b-sizecell { flex: 0 0 auto; }
    .b2b-sizegrid__fade { display: none; }   /* no scroll = no fade hint needed */
    /* Per-color action row wraps cleanly */
    .b2b-color__actions { gap: 10px 12px; padding: 12px 14px; }
}

@media (max-width: 420px) {
    .b2b-item__actions { gap: 8px; }
    .b2b-item__sep { display: none; }
    .b2b-summary__secure-list { flex-direction: column; align-items: center; gap: 10px; }
    .b2b-summary__secure-list li { flex-direction: row; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .b2b-cart-wrap * { transition: none !important; animation: none !important; }
}

/* ============================================================================
   Edit Size slide-out panel (the editing surface)
   ============================================================================ */
.b2b-cart-panel-overlay {
    position: fixed; inset: 0; background: rgba(17,24,39,.45);
    z-index: 99998; opacity: 0; transition: opacity .2s ease;
}
.b2b-cart-panel-overlay.is-open { opacity: 1; }
.b2b-cart-panel {
    position: fixed; top: 0; right: 0; height: 100%;
    /* Use viewport width (vw), not %, so an overflowing page can't make the
       fixed panel wider than the actual screen (was 587px on a 393px phone). */
    width: min(480px, 100vw); background: #fff; z-index: 99999;
    box-shadow: -8px 0 32px rgba(0,0,0,.15);
    transform: translateX(100%); transition: transform .25s ease;
    display: flex; flex-direction: column; overflow: hidden;
    --b2b-blue: #2563eb; --b2b-ink: #111827; --b2b-muted: #6b7280; --b2b-line: #e5e7eb;
    box-sizing: border-box; font-size: 14px; color: var(--b2b-ink);
}
.b2b-cart-panel *, .b2b-cart-panel *::before { box-sizing: border-box; }
.b2b-cart-panel.is-open { transform: translateX(0); }
.b2b-cart-panel__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--b2b-line);
}
.b2b-cart-panel__head h3 { margin: 0; font-size: 16px; }
.b2b-cart-panel__close { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--b2b-muted); padding: 0 4px; }
.b2b-cart-panel__body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.b2b-cart-panel__foot {
    border-top: 1px solid var(--b2b-line); padding: 14px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.b2b-cart-panel__total { font-size: 14px; color: #374151; }
.b2b-cart-panel__total strong { font-size: 18px; color: var(--b2b-ink); }
.b2b-cart-panel__save {
    background: var(--b2b-ink); color: #fff; border: 0; border-radius: 8px;
    padding: 12px 22px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.b2b-cart-panel__save:disabled { opacity: .5; cursor: default; }
.b2b-cart-panel__save:not(:disabled):hover { background: #000; }

.b2b-cart-panel__color { margin-bottom: 18px; }
.b2b-cart-panel__color-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.b2b-cart-panel__color-name img { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; border: 1px solid var(--b2b-line); }
.b2b-cart-panel__group-label { font-size: 11px; font-weight: 700; color: var(--b2b-muted); letter-spacing: .04em; margin: 8px 0 6px; }
/* Responsive grid (Swag-style): boxes resize + wrap to fit the available width
   on every screen, so the panel never overflows. minmax(0,1fr) lets columns
   shrink below content size so they ALWAYS fit; box-sizing keeps inputs in bounds. */
.b2b-cart-panel__body { overflow-x: hidden !important; max-width: 100%; }
/* Size boxes laid out in a flex grid. The INPUT is the usual culprit: a
   type=number input has a wide intrinsic min-width that pushes flex items wider
   than their basis. We force the input to shrink (min-width:0, width:100%) and
   give each cell a fixed flex-basis so 5 fit per row and the rest wrap. */
.b2b-cart-panel .b2b-cart-panel__sizes {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.b2b-cart-panel .b2b-cart-panel__size {
    display: flex !important;
    flex-direction: column !important;
    /* NO flex-grow — boxes stay at the 1/5 basis so exactly 5 fit, rest wrap.
       (flex-grow:1 made them stretch to fill the row, giving only ~3 wide.) */
    flex: 0 0 calc((100% - 32px) / 5) !important;
    width: calc((100% - 32px) / 5) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
.b2b-cart-panel .b2b-cart-panel__size > * { max-width: 100%; box-sizing: border-box; }
/* Number inputs claim a large intrinsic width - force them to shrink. */
.b2b-cart-panel .b2b-cart-panel__size input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex: 0 1 auto !important;
}
.b2b-cart-panel__size label { display: block; font-size: 11px; color: var(--b2b-muted); text-align: center; margin-bottom: 3px; font-weight: 600; }
.b2b-cart-panel__size input {
    width: 100%; text-align: center; padding: 8px 5px;
    border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; -moz-appearance: textfield;
    box-sizing: border-box; min-width: 0;
}
.b2b-cart-panel__size input.is-capped {
    border-color: #f59e0b; background: #fffbeb; color: #b45309;
}
.b2b-cart-panel__stockwarn {
    margin: 6px 0 2px; padding: 7px 10px;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
    color: #b45309; font-size: 12px; font-weight: 600;
}
.b2b-cart-panel__stockwarn[hidden] { display: none !important; }
.b2b-cart-panel__size input::-webkit-outer-spin-button,
.b2b-cart-panel__size input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.b2b-cart-panel__size.is-oos input { background: #f9fafb; }
.b2b-cart-panel__loading, .b2b-cart-panel__error { padding: 40px 0; text-align: center; color: var(--b2b-muted); }
.b2b-cart-panel__error { color: #b91c1c; }

/* Edit Size panel on mobile → full-screen sheet, size inputs wrap cleanly */
@media (max-width: 600px) {
    .b2b-cart-panel {
        width: 100vw !important;            /* viewport width, not % of overflowing doc */
        height: 100% !important;
        height: 100dvh !important;          /* true viewport height on mobile */
    }
    .b2b-cart-panel__body { padding: 16px; overflow-x: hidden; }
    /* Base flex rule (5-per-row, wraps) already handles sizing; keep gap aligned. */
    .b2b-cart-panel .b2b-cart-panel__size input { width: 100% !important; min-width: 0 !important; }
    /* Sticky footer so Update cart is always reachable on small screens */
    .b2b-cart-panel__foot { position: sticky; bottom: 0; background: #fff; }
}

/* ════ Cart: decoration summary for customized lines ════ */
.b2b-deco-summary { margin-top: 16px; padding-top: 14px; border-top: 1px solid #ececec; }
.b2b-deco-summary__title { font-size: 14px; font-weight: 700; margin: 0 0 10px; }
.b2b-deco-summary__positions { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.b2b-deco-summary__pos { display: flex; gap: 10px; border: 1px solid #ececec; border-radius: 8px; padding: 8px; }
.b2b-deco-summary__art {
    flex-shrink: 0; width: 56px; height: 56px; border-radius: 6px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; background: #f6f7f7;
    font-size: 10px; color: #9ca3af; text-align: center;
}
.b2b-deco-summary__art img { width: 100%; height: 100%; object-fit: contain; }
.b2b-deco-summary__art--none { padding: 4px; }
/* Composed mockup (garment + logo) — show bigger than a bare logo thumbnail so the
   customer clearly sees their design on the garment. */
.b2b-deco-summary__art.is-mockup { width: 120px; height: 120px; background: #fff; border: 1px solid #ececec; }
.b2b-deco-summary__body { min-width: 0; flex: 1; }
.b2b-deco-summary__head { display: flex; gap: 8px; align-items: baseline; }
.b2b-deco-summary__method { color: #2563eb; font-size: 12.5px; font-weight: 600; }
.b2b-deco-summary__meta { color: #6b7280; font-size: 12px; margin-top: 2px; }
.b2b-deco-summary__notes { color: #6b7280; font-size: 11.5px; margin-top: 3px; font-style: italic; }
.b2b-deco-summary__finishing { margin-top: 10px; font-size: 12.5px; color: #374151; }
.b2b-deco-summary__fin-label { font-weight: 700; }

@media (max-width: 600px) {
    .b2b-deco-summary__positions { grid-template-columns: 1fr; }
}