/* ==========================================================================
   TOPTAN THEME — Phase 3: Public marketplace page refinements
   Loads LAST (after toptan-components.css) so these overrides win over the
   inherited b2b.css / fbl-*.css catalog styling. Colours ALWAYS come from the
   Theme-Options tokens (var(--fbl-*)) — never hard-coded hex (golden rule).

   Scope: this file only nudges inherited pages toward the exact toptan design
   values (Product Listing.dc.html etc.) and fixes brand-colour leaks in shared
   plugin components. It never changes markup or removes actions.
   ========================================================================== */

/* ============================================================= RTL (Phase 6) ==
   The mobile off-canvas drawer (.mobile-header-wrapper-style) hides, when closed,
   by translating off the INLINE-END edge. In LTR that is the left edge (negative,
   not counted toward scrollWidth); in RTL it is the RIGHT edge, so the fixed
   drawer extends the document and forces a horizontal scrollbar on every /ar page.
   Clip root horizontal overflow. `clip` is sticky-safe (does NOT create a scroll
   container, unlike overflow:hidden), so the sticky header keeps working; it is
   also harmless in LTR (no right-edge overflow there). */
html { overflow-x: clip; }

/* Prices are LTR islands (guide rule 4): multi-part prices like "$4.20–5.80",
   decimals, and strike-through/original-price order must read left-to-right
   inside RTL lines. Target the price VALUE spans only — not the container — so
   the Arabic "/ unit" suffix and card flow stay RTL. */
[dir="rtl"] .fbl-prod-price [data-bb-value="product-price"],
[dir="rtl"] .fbl-prod-price .product-price,
[dir="rtl"] .b2b-pcard-price .product-price,
[dir="rtl"] [data-bb-value="product-price"] { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* Directional "more / view-all" chevrons point in the reading direction — LEFT
   in RTL (guide rule 6). Symmetric icons (search, cart, heart, bell) are NOT
   flipped. Logistics/truck icons conventionally stay LTR, so they're excluded. */
[dir="rtl"] .fbl-more .material-symbols-outlined,
[dir="rtl"] .fbl-section-head .fbl-more .material-symbols-outlined { transform: scaleX(-1); }

/* ============================================================ BRAND LEAKS ==
   The Comparison component (scale-marketplace) ships its button + tray styling
   as inline <style> blocks with hard-coded legacy-blue (#0058bc / #2563eb).
   Those blue values are the ONLY non-teal leak left on the storefront. Re-point
   them at the brand tokens. Selectors carry an extra `body`/compound-class to
   out-specify the inline single-class rules regardless of source order.
   Applies site-wide (product cards, product detail, /compare). ==============*/
body .wn-cmp-btn { color: var(--fbl-brand); border-color: var(--fbl-border-strong); }
body .wn-cmp-btn:hover { background: var(--fbl-brand-tint); border-color: var(--fbl-brand); color: var(--fbl-brand); }
body .wn-cmp-btn.is-active { background: var(--fbl-brand); border-color: var(--fbl-brand); color: #fff; }
body .wn-cmp-btn.is-active .material-symbols-outlined,
body .wn-cmp-btn.is-active .wn-cmp-btn__label { color: #fff; }
body .wn-cmp-tray { background: var(--fbl-footer-bg); }
body .wn-cmp-tray__go { background: var(--fbl-brand); }
body .wn-cmp-tray__go:hover { background: var(--fbl-brand-deep); }

/* Wholesale-Info block: header icon + "show more" toggle ship hard-coded
   blue (#2563eb). */
body .wn-wi__toggle { color: var(--fbl-brand); }
body .wn-wi__toggle:hover { color: var(--fbl-brand-deep); }
body .wn-wi__head .material-symbols-outlined { color: var(--fbl-brand); }

/* Product Q&A (product detail): sign-in link, question icon, links and CTAs
   ship hard-coded legacy blue (#0058bc / #2563eb). Green "official answer"
   accents (#16a34a) are intentional and left as-is. */
body .wn-qa__signin,
body .wn-qa__link { color: var(--fbl-brand); }
body .wn-qa__q .material-symbols-outlined { color: var(--fbl-brand); }
body .wn-qa__btn--primary { background: var(--fbl-brand); color: #fff; }
body .wn-qa__btn--primary:hover { background: var(--fbl-brand-deep); }
body .wn-qa__btn--ghost { border-color: var(--fbl-border-strong); color: var(--fbl-brand); }
body .wn-qa__btn--ghost:hover { border-color: var(--fbl-brand); }

/* ================================================= PRODUCT LISTING (catalog) =
   Nudge the inherited .b2b-catalog toward the exact Product Listing.dc.html
   geometry: 248px rail, 28px gutter, 10px card radius, 1px hairline borders.
   Everything else (sticky rail, filter groups, full card action set) already
   matches and is kept as-is. ================================================*/
@media (min-width: 992px) {
    .b2b-catalog { grid-template-columns: 248px minmax(0, 1fr); gap: 28px; }
}

/* Card radius/border to match the design (b2b.css uses 12px / .8px). */
.b2b-catalog-main .b2b-pcard,
.b2b-pcard {
    border-radius: var(--fbl-r-card, 10px);
    border-width: 1px;
}
.b2b-catalog-main .b2b-pcard:hover { box-shadow: var(--fbl-shadow-hover); }

/* Keep catalog cards close without letting their legacy bottom margin stack
   on top of the responsive grid gutter. */
.b2b-product-grid .b2b-pcard { margin-bottom: 0 !important; }

@media (max-width: 767.98px) {
    .product-cart-wrap.b2b-pcard.mb-30 { margin-bottom: 0 !important; }
}

/* Compact store-directory cards without affecting store pages or other vendor
   components. The logo is a full-bleed card visual; spacing belongs only to
   the content below it. */
.vendor-grid .vendor-wrap .vendor-img-action-wrap { padding: 0; }
.vendor-grid .vendor-wrap .vendor-img,
.vendor-grid .vendor-wrap .vendor-img > a { display: block; width: 100%; }
.vendor-grid .vendor-wrap .vendor-img img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}
.vendor-grid .vendor-wrap .vendor-content-wrap { padding: 14px 20px 18px; }
.vendor-grid .vendor-wrap .vendor-content-wrap h4 { margin: 0; }
.b2b-store-listing-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.b2b-store-listing-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 27px;
    padding: 3px 8px;
    border-radius: var(--r-badge, 6px);
    background: var(--fbl-success-bg);
    color: var(--fbl-success);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
}
.b2b-store-listing-chip .material-symbols-outlined { font-size: 14px; }
.b2b-store-listing-chip.is-vacation { background: var(--fbl-danger-bg); color: var(--fbl-danger); }
a.b2b-store-listing-chip:hover { color: var(--fbl-success); filter: brightness(.96); }

@media (max-width: 767.98px) {
    .vendor-grid .vendor-wrap .vendor-content-wrap { padding: 12px 16px 16px; }
    .b2b-store-listing-chips { gap: 6px; margin: 8px 0 12px; }
}

/* ============================================ PRODUCT-CARD ACTION STACK ====
   Per design_handoff Product Card.dc.html: one filled primary (Request
   Quotation) full-width, then a 3:1 secondary row (Add to RFQ + icon-only Save),
   in a row, then Compare full-width — all 44px tall, radius 8, weight 600,
   with centered content. b2b.css lays these out as a 2-col grid with the buttons
   interleaved with scripts + the wholesale-info mini, so they land in uneven
   cells. Convert to a flex stack and reorder. Every action is preserved. */
.b2b-pcard .product-card-bottom.b2b-pcard-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}
.b2b-pcard .b2b-pcard-price > .product-price { order: 0; flex: 0 0 100%; margin: 0; }
.b2b-pcard .b2b-pcard-price > .wn-wi-card { order: 1; flex: 0 0 100%; margin: 2px 0 0; }

/* Keep the wishlist control beside the price, on its opposite edge in both LTR and RTL. */
.b2b-pcard .b2b-pcard-price > .b2b-pcard-price-row { order: 0; flex: 0 0 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.b2b-pcard .b2b-pcard-price-row > .product-price { flex: 1 1 auto; width: auto !important; margin: 0; }
.b2b-pcard .b2b-pcard-price-row > .b2b-pcard-fav { flex: 0 0 auto; margin: 0; }

/* Report flag: lift it out of the crowded bottom-right vendor row (where it
   overlapped the "view product" arrow) and sit it beside the favourite (heart)
   on the price row, with a clear gap so buyers don't tap "report" when reaching
   for "favourite". Anchored to the price container (the flag's direct parent). */
.b2b-pcard .b2b-pcard-price { position: relative; }
.b2b-pcard .b2b-pcard-price > .wn-report-btn--card {
    position: absolute;
    top: 0;
    bottom: auto;
    inset-inline-end: 48px; /* 32px heart + 16px gap */
    height: 32px;
    align-items: center;
}

/* Shared geometry for all four action buttons */
.b2b-pcard .b2b-pcard-price > .rfq-entry-btn--card,
.b2b-pcard .b2b-pcard-price > .rfq-basket-btn--card,
.b2b-pcard .b2b-pcard-price > .wn-coll-btn--card,
.b2b-pcard .b2b-pcard-price > .wn-cmp-btn--card {
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 12px;
    border-radius: 8px;
    font-weight: 600;
    line-height: 1.15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    width: auto;
}
.b2b-pcard .b2b-pcard-price .material-symbols-outlined { font-size: 17px; }

/* Primary — the only filled button, full width */
.b2b-pcard .b2b-pcard-price > .rfq-entry-btn--card {
    order: 2;
    flex: 0 0 100%;
    background: var(--fbl-brand);
    color: #fff;
    border: 0;
    font-size: 13.5px;
}
.b2b-pcard .b2b-pcard-price > .rfq-entry-btn--card:hover {
    background: var(--fbl-brand-deep);
    color: #fff;
}

/* RFQ gets three quarters of the secondary row; collection remains a compact icon action. */
.b2b-pcard .b2b-pcard-price > .rfq-basket-btn--card { order: 3; }
.b2b-pcard .b2b-pcard-price > .wn-coll-btn--card { order: 4; }
.b2b-pcard .b2b-pcard-price > .rfq-basket-btn--card,
.b2b-pcard .b2b-pcard-price > .wn-coll-btn--card {
    min-width: 0;
    background: #fff;
    color: var(--fbl-ink);
    border: 1px solid var(--fbl-border-strong);
    font-size: 12.5px;
}
.b2b-pcard .b2b-pcard-price > .rfq-basket-btn--card { flex: 0 0 calc(75% - 6px); }
.b2b-pcard .b2b-pcard-price > .wn-coll-btn--card {
    flex: 0 0 calc(25% - 2px);
    padding-inline: 0;
}
.b2b-pcard .b2b-pcard-price > .wn-coll-btn--card .wn-coll-btn__label { display: none; }

/* Compare — full-width outline; restore its label (b2b hides it on cards) */
.b2b-pcard .b2b-pcard-price > .wn-cmp-btn--card {
    order: 5;
    flex: 0 0 100%;
    background: #fff;
    color: var(--fbl-ink);
    border: 1px solid var(--fbl-border-strong);
    font-size: 12.5px;
}
.b2b-pcard .b2b-pcard-price > .wn-cmp-btn--card .wn-cmp-btn__label { display: inline; }
.b2b-pcard .b2b-pcard-price > .wn-cmp-btn--card.is-active {
    background: var(--fbl-brand);
    border-color: var(--fbl-brand);
    color: #fff;
}

/* Shared outline-secondary hover: border + text turn brand teal */
.b2b-pcard .b2b-pcard-price > .rfq-basket-btn--card:hover,
.b2b-pcard .b2b-pcard-price > .wn-coll-btn--card:hover,
.b2b-pcard .b2b-pcard-price > .wn-cmp-btn--card:not(.is-active):hover {
    border-color: var(--fbl-brand);
    color: var(--fbl-brand);
    background: #fff;
}

/* Product-detail "Bulk pricing" facts (Minimum order / Unit price / Availability):
   keep all three on ONE row at every width. b2b.css drops the grid to 2 columns
   ≤1024px, which wraps the 3rd card to a second line. The values are short, so a
   3-up row stays readable; only tighten the gutter on very small phones. */
.b2b-product-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* b2b.css makes the Availability card span the full row ≤1024px (grid-column:
   1 / -1), which is what pushes it onto its own line. Keep it in its column. */
.b2b-product-fact--availability { grid-column: auto; }

/* ===================================== PRODUCT-DETAIL ACTION LADDER =========
   Per design_handoff Bulk Pricing Panel.dc.html: replace the wall of competing
   heavy buttons with one clear emphasis ladder — ONE filled primary (Add to
   cart), a soft-tinted lead (Request Quotation), consistent outline secondaries,
   and quiet-text utilities (Save / Following). Uniform geometry (radius 8, weight
   600) and a deliberate size ladder (primary 48 / secondaries 44 / utilities 40).
   Restyle only — the injected buttons + their JS hooks are untouched. */

/* Move the qty + Add-to-cart transaction to the top of the panel (right after the
   Bulk Pricing tiles), ahead of the negotiate buttons. Flex order only. */
.b2b-product-order-card .add-to-cart-form { display: flex; flex-direction: column; }
.b2b-product-order-card .add-to-cart-form > .b2b-product-facts { order: 0; }
.b2b-product-order-card .add-to-cart-form > .product-tax-description { order: 1; }
.b2b-product-order-card .add-to-cart-form > .pr_switch_wrap,
.b2b-product-order-card .add-to-cart-form > .b2b-product-config { order: 2; }
.b2b-product-order-card .add-to-cart-form > .bb-product-detail-actions { order: 3; margin-top: 4px; }
.b2b-product-order-card .add-to-cart-form > .b2b-product-contact-actions { order: 4; }
.b2b-product-order-card .add-to-cart-form > .b2b-product-taxonomy { order: 5; }

/* PRIMARY — qty stepper + filled Add to cart, 48px */
.b2b-product-order-card .bb-product-detail-actions { display: flex; gap: 8px; align-items: stretch; }
.b2b-product-order-card .detail-qty { height: 48px; display: flex; align-items: center; flex: none; }
.b2b-product-order-card .product-extra-link2 { flex: 1; display: flex; }
.b2b-product-purchase-panel .button-add-to-cart {
    flex: 1; width: 100%; min-height: 48px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--fbl-brand) !important; color: #fff !important; border: 0 !important; border-radius: 8px;
    font-weight: 600; font-size: 14.5px;
}
.b2b-product-purchase-panel .button-add-to-cart:hover { background: var(--fbl-brand-deep) !important; color: #fff !important; }

/* Group all the negotiate/utility buttons together and push the big content
   sections (wholesale-info, availability, Q&A, inquiry) BELOW them, so the panel
   reads as a tidy action group instead of buttons scattered through 1500px of
   content. Outline secondaries pair into a 2-column grid; lead + utilities span. */
.b2b-product-order-card .b2b-product-contact-actions {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
}
/* Divider between the buy primary and the negotiate group. Plain line (no text)
   so it stays locale-neutral for EN/TR/AR. */
.b2b-product-order-card .b2b-product-contact-actions::before {
    order: 0; flex: 0 0 100%;
    content: "";
    height: 1px; background: var(--fbl-border);
    margin: 8px 0 2px;
}
.b2b-product-order-card .b2b-product-contact-actions > button.rfq-entry-btn--detail { order: 1; flex: 0 0 100%; }
.b2b-product-order-card .b2b-product-contact-actions > .rfq-basket-btn--detail { order: 2; }
.b2b-product-order-card .b2b-product-contact-actions > .qq-btn { order: 3; }
.b2b-product-order-card .b2b-product-contact-actions > a.rfq-entry-btn--detail { order: 4; }
.b2b-product-order-card .b2b-product-contact-actions > .wn-cmp-btn--detail { order: 5; }
.b2b-product-order-card .b2b-product-contact-actions > .pa-btn { order: 6; }
.b2b-product-order-card .b2b-product-contact-actions > .sa-btn { order: 7; }
.b2b-product-order-card .b2b-product-contact-actions > .wn-coll-btn--detail { order: 8; }
.b2b-product-order-card .b2b-product-contact-actions > .follow-btn--detail { order: 9; }
/* the two-up outline secondaries */
.b2b-product-order-card .b2b-product-contact-actions > .rfq-basket-btn--detail,
.b2b-product-order-card .b2b-product-contact-actions > .qq-btn,
.b2b-product-order-card .b2b-product-contact-actions > a.rfq-entry-btn--detail,
.b2b-product-order-card .b2b-product-contact-actions > .wn-cmp-btn--detail,
.b2b-product-order-card .b2b-product-contact-actions > .pa-btn,
.b2b-product-order-card .b2b-product-contact-actions > .sa-btn { flex: 1 1 calc(50% - 4px); min-width: 0; }
/* quiet utilities share a row */
.b2b-product-order-card .b2b-product-contact-actions > .wn-coll-btn--detail,
.b2b-product-order-card .b2b-product-contact-actions > .follow-btn--detail { flex: 1 1 calc(50% - 4px); min-width: 0; }
/* content sections drop below the whole action group, full width */
.b2b-product-order-card .b2b-product-contact-actions > .wn-wi,
.b2b-product-order-card .b2b-product-contact-actions > .wn-av,
.b2b-product-order-card .b2b-product-contact-actions > .wn-product-inquiry,
.b2b-product-order-card .b2b-product-contact-actions > .wn-inquiry-modal,
.b2b-product-order-card .b2b-product-contact-actions > .wn-qa,
.b2b-product-order-card .b2b-product-contact-actions > .b2b-price-tiers {
    order: 20;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* Keep the four-column tier table inside the narrow purchase sidebar. Price
   tiers are injected into the purchase panel (not the information-column order
   card), so scope these constraints to their real DOM parent. */
.b2b-product-purchase-panel .b2b-price-tiers {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
.b2b-product-purchase-panel .b2b-price-tiers__scroll {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}
.b2b-product-purchase-panel .b2b-price-tiers__table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    font-size: 11px;
    line-height: 1.3;
}
.b2b-product-purchase-panel .b2b-price-tiers__table th,
.b2b-product-purchase-panel .b2b-price-tiers__table td {
    min-width: 0;
    padding: 9px 5px;
    overflow-wrap: anywhere;
}
.b2b-product-purchase-panel .b2b-price-tiers__table th {
    font-size: 10px;
    line-height: 1.25;
}

/* Shared geometry for the negotiate/utility buttons */
.b2b-product-order-card .b2b-product-contact-actions > .rfq-entry-btn--detail,
.b2b-product-order-card .b2b-product-contact-actions > .rfq-basket-btn--detail,
.b2b-product-order-card .b2b-product-contact-actions > .qq-btn,
.b2b-product-order-card .b2b-product-contact-actions > .wn-cmp-btn--detail,
.b2b-product-order-card .b2b-product-contact-actions > .pa-btn,
.b2b-product-order-card .b2b-product-contact-actions > .sa-btn,
.b2b-product-order-card .b2b-product-contact-actions > .wn-coll-btn--detail,
.b2b-product-order-card .b2b-product-contact-actions > .follow-btn--detail {
    min-height: 44px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
}

/* LEAD secondary — Request Quotation gets a soft tint (was a heavy filled teal) */
.b2b-product-order-card .b2b-product-contact-actions > .rfq-entry-btn--detail {
    background: var(--fbl-brand-tint) !important;
    color: var(--fbl-brand) !important;
    border: 0 !important;
}
.b2b-product-order-card .b2b-product-contact-actions > .rfq-entry-btn--detail:hover {
    background: var(--fbl-brand-tint-2) !important;
    color: var(--fbl-brand) !important;
}

/* OUTLINE secondaries — Add to RFQ / Ask supplier / Compare / Price + Stock alert */
.b2b-product-order-card .b2b-product-contact-actions > .rfq-basket-btn--detail,
.b2b-product-order-card .b2b-product-contact-actions > .qq-btn,
.b2b-product-order-card .b2b-product-contact-actions > .wn-cmp-btn--detail,
.b2b-product-order-card .b2b-product-contact-actions > .pa-btn,
.b2b-product-order-card .b2b-product-contact-actions > .sa-btn {
    background: #fff !important;
    color: var(--fbl-ink) !important;
    border: 1px solid var(--fbl-border-strong) !important;
}
.b2b-product-order-card .b2b-product-contact-actions > .rfq-basket-btn--detail:hover,
.b2b-product-order-card .b2b-product-contact-actions > .qq-btn:hover,
.b2b-product-order-card .b2b-product-contact-actions > .wn-cmp-btn--detail:not(.is-active):hover,
.b2b-product-order-card .b2b-product-contact-actions > .pa-btn:hover,
.b2b-product-order-card .b2b-product-contact-actions > .sa-btn:hover {
    border-color: var(--fbl-brand) !important;
    color: var(--fbl-brand) !important;
}

/* QUIET utilities — Save (neutral) + Following (red), text buttons, 40px */
.b2b-product-order-card .b2b-product-contact-actions > .wn-coll-btn--detail,
.b2b-product-order-card .b2b-product-contact-actions > .follow-btn--detail {
    min-height: 40px;
    background: transparent !important;
    border: 0 !important;
    font-size: 12.5px;
}
.b2b-product-order-card .b2b-product-contact-actions > .wn-coll-btn--detail { color: var(--fbl-ink-2) !important; }
.b2b-product-order-card .b2b-product-contact-actions > .wn-coll-btn--detail:hover {
    background: var(--fbl-bg) !important; color: var(--fbl-brand) !important;
}
.b2b-product-order-card .b2b-product-contact-actions > .follow-btn--detail { color: var(--fbl-danger) !important; }
.b2b-product-order-card .b2b-product-contact-actions > .follow-btn--detail:hover { background: var(--fbl-danger-bg) !important; }
.b2b-product-order-card .b2b-product-contact-actions .material-symbols-outlined { font-size: 18px; }
@media (max-width: 480px) {
    .b2b-product-facts { gap: 6px; }
    .b2b-product-fact { padding: 12px 10px; }
    .b2b-product-fact > strong { font-size: 15px; }
}

/* Product-detail desktop composition: an independent gallery/content column and
   a natural-flow information/sidebar pair. This avoids grid-row whitespace and
   keeps the purchase, supplier, and shipping cards stacked without overlays. */
@media (min-width: 900px) {
    .b2b-product-overview {
        grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
        gap: 28px;
    }
    .b2b-product-gallery-column { display: flex; min-width: 0; flex-direction: column; }
    .b2b-product-gallery-panel .bb-product-gallery-images .slick-list,
    .b2b-product-gallery-panel .bb-product-gallery-images > a { box-shadow: none; }
    .b2b-product-gallery-panel .bb-product-gallery-images img { object-fit: contain; }

    .b2b-product-summary { display: block; min-width: 0; }
    .b2b-product-order-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
        gap: 28px;
        align-items: start;
    }
    .b2b-product-information-column { display: flex; min-width: 0; flex-direction: column; }
    .b2b-product-order-card { margin-top: 18px; padding: 0; border: 0; background: transparent; box-shadow: none; }
    .b2b-product-section-label { margin: 0 0 10px; }
    .b2b-product-commerce-details { min-width: 0; }
    .b2b-product-commerce-details .b2b-product-facts { margin-bottom: 20px; }

    .b2b-product-sidebar { display: flex; min-width: 0; flex-direction: column; gap: 16px; }

    .b2b-product-purchase-panel {
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 20px;
        border: 1px solid var(--fbl-border);
        border-radius: 10px;
        background: var(--fbl-surface);
        box-shadow: 0 2px 8px rgba(26, 35, 33, .06);
    }
    .b2b-product-purchase-panel .bb-product-detail-actions { order: 1; margin-top: 0; }
    .b2b-product-purchase-panel .b2b-product-contact-actions { order: 2; }
    .b2b-product-purchase-panel .b2b-product-taxonomy { order: 3; }
    .b2b-product-vendor-card { margin-top: 0; }
}

@media (min-width: 1200px) {
    .b2b-product-overview {
        grid-template-columns: 440px minmax(0, 1fr);
        gap: 28px;
    }
}

/* ================================= PRODUCT DETAIL — supplied HTML mirror ===
   Product-only refinements. The shared header/footer stay untouched and every
   existing action remains in the DOM with its original data/JS hooks. */
main:has(.b2b-product-page) > .breadcrumb-wrap {
    padding: 20px 0 0;
    border: 0;
    background: transparent;
    font-family: var(--font-text), sans-serif;
}
main:has(.b2b-product-page) > .breadcrumb-wrap > .container {
    width: 100%;
    max-width: var(--b2b-container);
    padding-inline: var(--gutter-desktop);
}
main:has(.b2b-product-page) > .breadcrumb-wrap .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fbl-ink-3);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
}
main:has(.b2b-product-page) > .breadcrumb-wrap .breadcrumb > span:not(.extra-breadcrumb-name) {
    padding: 0;
    color: var(--fbl-ink-3);
}
main:has(.b2b-product-page) > .breadcrumb-wrap .breadcrumb > span:not(.extra-breadcrumb-name)::before {
    content: "/";
    font-family: inherit !important;
    font-size: 13px;
}
main:has(.b2b-product-page) > .breadcrumb-wrap .breadcrumb a { color: var(--fbl-brand); }
main:has(.b2b-product-page) > .breadcrumb-wrap .breadcrumb .active { color: var(--fbl-ink); font-weight: 500; }

.b2b-product-layout-container { max-width: var(--b2b-container); }
.b2b-product-page { padding-top: 16px; }
.b2b-product-status-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.b2b-product-verified-badge,
.b2b-product-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 27px;
    padding: 3px 8px;
    border-radius: var(--r-badge);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
}
.b2b-product-verified-badge { background: var(--fbl-brand); color: #fff !important; }
.b2b-product-stock-badge { background: var(--fbl-success-bg); color: var(--fbl-success); }
.b2b-product-stock-badge.is-unavailable { background: var(--fbl-danger-bg); color: var(--fbl-danger); }
.b2b-product-stock-badge > div { margin: 0 !important; }
.b2b-product-stock-badge label { display: none; }
.b2b-product-stock-badge .number-items-available,
.b2b-product-stock-badge .number-items-available span { color: inherit !important; font-size: inherit; font-weight: inherit; }
.b2b-product-verified-overlay,
.b2b-product-verified-inline { display: none !important; }

.b2b-product-page .title-detail {
    margin: 0 0 8px;
    color: var(--fbl-ink);
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.3;
    text-wrap: pretty;
}
.b2b-product-title-row > div { display: flex; min-width: 0; flex-direction: column; }
.b2b-product-meta { gap: 16px; margin-top: 0; font-size: 13px; }
.b2b-product-meta .product-detail-rating { gap: 6px; padding: 0 !important; color: var(--fbl-brand); }
.b2b-product-meta .product-detail-rating span:last-child { color: var(--fbl-brand); }
.b2b-product-rating-star { color: var(--fbl-amber); font-size: 18px; }
.b2b-product-meta #product-sku { font-family: var(--font-mono); font-size: 12px; }
.b2b-product-section-label {
    color: var(--fbl-ink-3);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
}

/* The three real commerce facts share the one bordered pricing card used in
   the reference. No availability, price, or MOQ data is replaced. */
.b2b-product-commerce-details .b2b-product-facts {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--fbl-border);
    border-radius: var(--r-card);
    background: var(--fbl-surface);
}
.b2b-product-commerce-details .b2b-product-fact {
    min-height: 120px;
    padding: 33px 22px 31px;
    border: 0;
    border-inline-end: 1px solid var(--fbl-border);
    border-radius: 0;
    background: var(--fbl-surface);
}
.b2b-product-commerce-details .b2b-product-fact:last-child { border-inline-end: 0; }
.b2b-product-commerce-details .b2b-product-fact--price {
    border-color: var(--fbl-border);
    background: var(--fbl-surface);
}
.b2b-product-commerce-details .b2b-product-fact-label,
.b2b-product-commerce-details .b2b-product-fact--price .b2b-product-fact-label {
    margin-bottom: 7px;
    color: var(--fbl-ink-3);
    font-size: 14px;
}
.b2b-product-commerce-details .b2b-product-fact > strong { font-size: 20px; }
.b2b-product-commerce-details .b2b-product-fact > strong,
.b2b-product-commerce-details .b2b-product-fact--price .current-price,
.b2b-product-commerce-details .b2b-product-fact--price .old-price {
    color: var(--fbl-ink) !important;
}
.b2b-product-commerce-details .b2b-product-fact--price .current-price { font-size: 24px !important; }
.b2b-product-commerce-details .b2b-product-fact--price .old-price { color: var(--fbl-ink-3) !important; }
.b2b-product-commerce-details .b2b-product-availability .number-items-available,
.b2b-product-commerce-details .b2b-product-availability .number-items-available span {
    font-size: 18px;
}

/* Variant chips mirror the 6px controls, uppercase labels, and selected tint. */
.b2b-product-commerce-details .product-attributes { display: flex; flex-direction: column; gap: 16px; }
.b2b-product-commerce-details .bb-product-attribute-swatch-title {
    margin-bottom: 9px;
    color: var(--fbl-ink-2);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.b2b-product-commerce-details .bb-product-attribute-swatch-list { display: flex; flex-wrap: wrap; gap: 9px; }
.b2b-product-commerce-details .text-swatches-wrapper .bb-product-attribute-swatch-item { margin: 0; }
.b2b-product-commerce-details .text-swatches-wrapper label { margin: 0; }
.b2b-product-commerce-details .text-swatches-wrapper input { position: absolute; opacity: 0; pointer-events: none; }
.b2b-product-commerce-details .bb-product-attribute-text-display {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid var(--fbl-border-strong);
    border-radius: var(--r-control);
    background: var(--fbl-surface);
    color: var(--fbl-ink);
    font-size: 13px;
    font-weight: 500;
}
.b2b-product-commerce-details input:checked + .bb-product-attribute-text-display {
    padding: 7px 15px;
    border: 2px solid var(--fbl-brand);
    background: var(--fbl-brand-tint);
    color: var(--fbl-brand);
    font-weight: 600;
}

/* Product-option radios use the same reference chip geometry as variation
   swatches while retaining their real input values and change handlers. */
.b2b-product-commerce-details .product-option { margin: 0 !important; }
.b2b-product-commerce-details .product-option-item-label > label {
    margin: 0 0 9px;
    color: var(--fbl-ink-2);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.b2b-product-commerce-details .product-option-item-values {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.b2b-product-commerce-details .product-option-item-values .form-radio { position: relative; margin: 0; }
.b2b-product-commerce-details .product-option-item-values .form-radio > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.b2b-product-commerce-details .product-option-item-values .form-radio > label {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 8px 16px;
    border: 1px solid var(--fbl-border-strong);
    border-radius: var(--r-control);
    background: var(--fbl-surface);
    color: var(--fbl-ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
}
.b2b-product-commerce-details .product-option-item-values .form-radio > input:focus-visible + label {
    outline: 2px solid color-mix(in srgb, var(--fbl-brand) 42%, transparent);
    outline-offset: 2px;
}
.b2b-product-commerce-details .product-option-item-values .form-radio > input:checked + label {
    padding: 7px 15px;
    border: 2px solid var(--fbl-brand);
    background: var(--fbl-brand-tint);
    color: var(--fbl-brand);
    font-weight: 600;
}
.b2b-product-commerce-details .product-option-item-values .extra-price {
    color: inherit;
    font-size: 11.5px;
    font-weight: 500;
}

.b2b-product-key-specs { margin-top: 22px; }
.b2b-product-key-specs .wn-product-specifications table,
.b2b-product-key-specs .wn-product-specifications tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    width: 100%;
}
.b2b-product-key-specs .wn-product-specifications colgroup { display: none; }
.b2b-product-key-specs .wn-product-specifications tr {
    display: grid;
    grid-template-columns: minmax(80px, 120px) minmax(0, 1fr);
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--fbl-border);
    font-size: 13.5px;
}
.b2b-product-key-specs .wn-product-specifications th,
.b2b-product-key-specs .wn-product-specifications td { padding: 0; border: 0; text-align: start; }
.b2b-product-key-specs .wn-product-specifications th { color: var(--fbl-ink-3); font-weight: 400; }
.b2b-product-key-specs .wn-product-specifications td { color: var(--fbl-ink); font-weight: 500; }
.b2b-product-key-specs .wn-product-specifications tr:nth-child(n+7) { display: none; }
.b2b-product-reference-links { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.b2b-product-catalog-link,
.b2b-product-compare-proxy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fbl-brand) !important;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
}
.b2b-product-catalog-link .material-symbols-outlined { font-size: 17px; }
.b2b-product-compare-proxy.is-active { color: var(--fbl-success) !important; }

/* Desktop action card: 42px quantity stepper, 48px primary/soft CTAs, and
   paired 44px outline utilities exactly as in Product Detail.dc.html. */
.b2b-product-request-quote-proxy { display: none; }
.b2b-product-vendor-card {
    margin: 0;
    padding: 20px;
    border: 1px solid var(--fbl-border);
    border-radius: 10px;
    background: var(--fbl-surface);
    box-shadow: none;
}
.b2b-product-vendor-heading { gap: 12px; }
.b2b-product-vendor-logo {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 8px;
    background: var(--fbl-brand-tint);
}
.b2b-product-vendor-copy h2 { margin-bottom: 2px; font-size: 14px; font-weight: 600; line-height: 1.25; }
.b2b-product-vendor-copy h2 a { color: var(--fbl-ink); }
.b2b-product-vendor-copy p { color: var(--fbl-ink-3); font-size: 12px; }
.b2b-product-vendor-copy p span { margin-inline: 3px; }
.b2b-product-vendor-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.b2b-product-vendor-badge {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10.5px;
    line-height: 1.25;
}
.b2b-product-vendor-badge--verified { background: var(--fbl-brand); color: #fff; font-weight: 600; }
.b2b-product-vendor-badge--soft { background: var(--fbl-brand-tint); color: var(--fbl-brand); font-weight: 600; }
.b2b-product-vendor-badge--neutral { border: 1px solid var(--fbl-border); background: var(--fbl-bg); color: var(--fbl-ink-2); font-weight: 500; }
.b2b-product-vendor-stats {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 14px;
}
.b2b-product-vendor-stats > div {
    display: flex;
    min-width: 0;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    border-radius: 0;
    background: transparent;
}
.b2b-product-vendor-stats span { color: var(--fbl-ink-2); font-size: 12.5px; }
.b2b-product-vendor-stats strong { color: var(--fbl-ink); font-size: 12.5px; font-weight: 600; text-align: end; }
.b2b-product-vendor-profile {
    display: flex;
    min-height: 46px;
    margin-top: 14px;
    padding: 9px 12px;
    border: 1.5px solid var(--fbl-brand);
    border-radius: var(--r-control);
    color: var(--fbl-brand) !important;
    font-size: 13px;
    font-weight: 600;
}
.b2b-product-vendor-follow { margin-top: 10px; }
.b2b-product-vendor-follow .follow-btn { width: 100%; min-height: 40px; justify-content: center; }

.b2b-product-sidebar .b2b-product-shipping-card {
    width: 100%;
    padding: 20px;
    border-color: var(--fbl-border);
    border-radius: 10px;
    background: var(--fbl-surface);
}
.b2b-product-sidebar .b2b-product-shipping-card h2 { margin-bottom: 18px; font-size: 18px; }
.b2b-product-sidebar .b2b-product-shipping-list { gap: 16px; }

.b2b-product-page > .b2b-product-information-tabs {
    width: 100%;
    margin: 28px 0 0;
    border-color: var(--fbl-border) !important;
    border-radius: 10px !important;
}
.b2b-product-page > .b2b-product-information-tabs .nav-tabs {
    gap: 4px;
    padding: 0 24px;
    background: var(--fbl-surface);
}
.b2b-product-page > .b2b-product-information-tabs .nav-tabs .nav-item { flex: 1 1 0; }
.b2b-product-page > .b2b-product-information-tabs .nav-tabs .nav-item .nav-link {
    display: flex;
    min-height: 49px;
    align-items: center;
    justify-content: center;
    padding: 14px 10px !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
}
.b2b-product-page > .b2b-product-information-tabs .nav-tabs .nav-item .nav-link.active { font-weight: 600; }
.b2b-product-page > .b2b-product-information-tabs .tab-content {
    min-height: 180px;
    margin-top: 0;
    padding: 28px 32px;
}
.b2b-product-page > .b2b-product-vendor-section {
    width: min(100%, 420px);
    margin-top: 20px;
}
#tab-wholesale-info .wn-wi { margin: 0; border: 0; border-radius: 0; }
.b2b-product-qa-tab-content .wn-qa { margin: 0; padding: 0; border: 0; border-radius: 0; }
.b2b-product-commerce-details .b2b-product-key-specs { display: none; }

.b2b-product-purchase-panel .b2b-product-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}
.b2b-product-purchase-panel .b2b-product-contact-actions > button.rfq-entry-btn--detail { order: 1; flex: 0 0 100%; }
.b2b-product-purchase-panel .b2b-product-contact-actions > .rfq-basket-btn--detail { order: 2; }
.b2b-product-purchase-panel .b2b-product-contact-actions > .qq-btn { order: 3; }
.b2b-product-purchase-panel .b2b-product-contact-actions > a.rfq-entry-btn--detail { order: 4; }
.b2b-product-purchase-panel .b2b-product-contact-actions > .wn-cmp-btn--detail { order: 5; }
.b2b-product-purchase-panel .b2b-product-contact-actions > .pa-btn { order: 6; }
.b2b-product-purchase-panel .b2b-product-contact-actions > .sa-btn { order: 7; }
.b2b-product-purchase-panel .b2b-product-contact-actions > .wn-coll-btn--detail { order: 8; }
.b2b-product-purchase-panel .b2b-product-contact-actions > .follow-btn--detail { order: 9; }
.b2b-product-purchase-panel .b2b-product-contact-actions > .rfq-basket-btn--detail,
.b2b-product-purchase-panel .b2b-product-contact-actions > .qq-btn,
.b2b-product-purchase-panel .b2b-product-contact-actions > .wa-btn,
.b2b-product-purchase-panel .b2b-product-contact-actions > a.rfq-entry-btn--detail,
.b2b-product-purchase-panel .b2b-product-contact-actions > .wn-cmp-btn--detail,
.b2b-product-purchase-panel .b2b-product-contact-actions > .pa-btn,
.b2b-product-purchase-panel .b2b-product-contact-actions > .sa-btn,
.b2b-product-purchase-panel .b2b-product-contact-actions > .wn-coll-btn--detail {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
}
.b2b-product-purchase-panel .b2b-product-contact-actions > .wn-wi,
.b2b-product-purchase-panel .b2b-product-contact-actions > .wn-av,
.b2b-product-purchase-panel .b2b-product-contact-actions > .wn-product-inquiry,
.b2b-product-purchase-panel .b2b-product-contact-actions > .wn-inquiry-modal { order: 20; flex: 0 0 100%; }

/* The sample module ships with a pill treatment. In this product sidebar it is
   a utility action, so keep it visually identical to the neighboring controls. */
.b2b-product-purchase-panel .b2b-product-contact-actions > a.rfq-entry-btn--detail {
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid var(--fbl-border-strong) !important;
    border-radius: var(--r-control) !important;
    background: var(--fbl-surface) !important;
    color: var(--fbl-ink) !important;
    font-size: 13px;
    font-weight: 600;
}
.b2b-product-purchase-panel .b2b-product-contact-actions > a.rfq-entry-btn--detail:hover {
    border-color: var(--fbl-brand) !important;
    color: var(--fbl-brand) !important;
}

@media (min-width: 900px) {
    .b2b-product-purchase-panel .b2b-product-contact-actions > .rfq-basket-btn--detail,
    .b2b-product-purchase-panel .b2b-product-contact-actions > .wa-btn { order: 2; }
    .b2b-product-purchase-panel .b2b-product-contact-actions > a.rfq-entry-btn--detail,
    .b2b-product-purchase-panel .b2b-product-contact-actions > .wn-coll-btn--detail { order: 3; }
    .b2b-product-purchase-panel .b2b-product-contact-actions > .qq-btn,
    .b2b-product-purchase-panel .b2b-product-contact-actions > .wn-product-inquiry { order: 4; }
    .b2b-product-purchase-panel .b2b-product-contact-actions > .pa-btn,
    .b2b-product-purchase-panel .b2b-product-contact-actions > .sa-btn { order: 5; }
    .b2b-product-purchase-panel .b2b-product-contact-actions > .wn-coll-btn--detail { width: auto !important; }
    .b2b-product-purchase-panel .b2b-product-contact-actions > .wn-product-inquiry {
        flex: 1 1 calc(50% - 4px);
        width: auto;
    }
}

@media (min-width: 900px) {
    .b2b-product-gallery-panel .bb-product-gallery-images a { height: 420px; aspect-ratio: auto; }
    .b2b-product-gallery-panel .bb-product-gallery-thumbnails img { height: 72px; aspect-ratio: auto; }
    .b2b-product-purchase-panel { position: static; top: auto; gap: 9px; }
    .b2b-product-purchase-panel .bb-product-detail-actions {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }
    .b2b-product-quantity-control { width: 100%; }
    .b2b-product-quantity-label { display: block; margin-bottom: 10px; color: var(--fbl-ink); font-size: 13px; font-weight: 600; }
    .b2b-product-quantity-row { display: flex; align-items: center; gap: 10px; }
    .b2b-product-quantity-row small { color: var(--fbl-ink-3); font-size: 12px; line-height: 1.4; }
    .b2b-product-order-card .detail-qty,
    .b2b-product-page .detail-qty {
        width: 146px !important;
        min-width: 146px;
        height: 42px;
        grid-template-columns: 38px 70px 38px;
        border-color: var(--fbl-border-strong) !important;
        border-radius: var(--r-control) !important;
    }
    .b2b-product-page .detail-qty .qty-down,
    .b2b-product-page .detail-qty .qty-up { width: 38px; background: var(--fbl-bg); color: var(--fbl-ink-2); }
    .b2b-product-page .detail-qty .qty-val {
        width: 70px;
        height: 40px;
        border-inline: 1px solid var(--fbl-border);
        color: var(--fbl-ink);
        font-family: var(--font-mono);
        font-size: 15px;
        font-weight: 600;
    }
    .b2b-product-request-quote-proxy,
    .b2b-product-purchase-panel .button-add-to-cart {
        display: inline-flex;
        width: 100%;
        height: 48px;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 0;
        padding: 0 12px !important;
        border: 0 !important;
        border-radius: var(--r-control) !important;
        font-size: 14.5px !important;
        font-weight: 600;
    }
    .b2b-product-request-quote-proxy { background: var(--fbl-brand); color: #fff !important; }
    .b2b-product-request-quote-proxy:hover { background: var(--fbl-brand-deep); color: #fff !important; }
    .b2b-product-page .b2b-product-purchase-panel .button.button-add-to-cart {
        background: var(--fbl-brand-tint) !important;
        color: var(--fbl-brand) !important;
        height: 48px !important;
        min-height: 48px !important;
        line-height: 1.2 !important;
    }
    .b2b-product-purchase-panel .button-add-to-cart:hover:not(.btn-disabled) { background: var(--fbl-brand-tint-2) !important; }
    .b2b-product-purchase-panel .b2b-product-contact-actions { margin: 0; padding-top: 0; }
    .b2b-product-purchase-panel .b2b-product-contact-actions::before { display: none; }
    .b2b-product-purchase-panel .b2b-product-contact-actions > [data-rfq-entry] { display: none !important; }
    .b2b-product-purchase-panel .b2b-product-contact-actions > .rfq-basket-btn--detail,
    .b2b-product-purchase-panel .b2b-product-contact-actions > .qq-btn,
    .b2b-product-purchase-panel .b2b-product-contact-actions > .wa-btn,
    .b2b-product-purchase-panel .b2b-product-contact-actions > .wn-cmp-btn--detail,
    .b2b-product-purchase-panel .b2b-product-contact-actions > .pa-btn,
    .b2b-product-purchase-panel .b2b-product-contact-actions > .sa-btn,
    .b2b-product-purchase-panel .b2b-product-contact-actions > .wn-coll-btn--detail,
    .b2b-product-purchase-panel .b2b-product-contact-actions > .follow-btn--detail,
    .b2b-product-purchase-panel .wn-product-inquiry .wn-inquiry-trigger {
        min-height: 44px;
        border: 1px solid var(--fbl-border-strong) !important;
        border-radius: var(--r-control) !important;
        background: var(--fbl-surface) !important;
        color: var(--fbl-ink) !important;
        font-size: 13px;
        font-weight: 600;
    }
    .b2b-product-purchase-panel .wn-product-inquiry { flex: 1 1 calc(50% - 4.5px); width: auto; order: 4; }
    .b2b-product-purchase-panel .wn-product-inquiry .wn-inquiry-trigger { width: 100%; }
}

/* Desktop order + tier panel — mirrors the supplied 360px reference while
   retaining every original control and plugin-provided action. */
@media (min-width: 900px) {
    .b2b-product-order-form {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 360px);
    }
    .b2b-product-purchase-panel {
        padding: 20px 22px;
        border-radius: 14px;
    }
    .b2b-product-purchase-panel .b2b-product-quantity-control { position: relative; }
    .b2b-product-purchase-panel .b2b-product-quantity-label {
        padding-inline-end: 128px;
        font-size: 14px;
    }
    .b2b-product-purchase-panel .b2b-product-quantity-row {
        display: block;
        margin-top: 11px;
    }
    .b2b-product-purchase-panel .b2b-product-quantity-row small {
        position: absolute;
        inset-block-start: 2px;
        inset-inline-end: 0;
        font-size: 10.5px;
        line-height: 1.25;
        text-align: end;
    }
    .b2b-product-page .b2b-product-purchase-panel .detail-qty {
        width: 100% !important;
        min-width: 0;
        height: 54px;
        grid-template-columns: 50px minmax(0, 1fr) 50px;
        overflow: hidden;
        border-width: 1.5px !important;
        border-radius: 10px !important;
    }
    .b2b-product-page .b2b-product-purchase-panel .detail-qty .qty-down,
    .b2b-product-page .b2b-product-purchase-panel .detail-qty .qty-up {
        width: 50px;
        height: 52px;
        font-size: 20px;
    }
    .b2b-product-page .b2b-product-purchase-panel .detail-qty .qty-val {
        width: 100%;
        height: 52px;
        font-size: 18px;
        font-weight: 700;
        text-align: center;
    }

    .b2b-product-purchase-panel > .b2b-price-tiers {
        order: 3;
        width: calc(100% + 44px);
        max-width: none;
        margin: 7px -22px -20px;
        overflow: hidden;
        border-top: 1px solid var(--fbl-border);
        border-radius: 0 0 14px 14px;
        background: var(--fbl-surface);
    }
    .b2b-product-purchase-panel .b2b-price-tiers__head {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 3px 8px;
        padding: 14px 18px 10px;
    }
    .b2b-product-purchase-panel .b2b-price-tiers__title {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.01em;
    }
    .b2b-product-purchase-panel .b2b-price-tiers__tax-note {
        margin-inline-start: auto;
        color: var(--fbl-ink-3);
        font-size: 10.5px;
    }
    .b2b-product-purchase-panel .b2b-price-tiers__scroll {
        overflow: visible;
        border-top: 1px solid var(--fbl-border);
    }
    .b2b-product-purchase-panel .b2b-price-tiers__table,
    .b2b-product-purchase-panel .b2b-price-tiers__table tbody {
        display: block;
        width: 100%;
    }
    .b2b-product-purchase-panel .b2b-price-tiers__table thead { display: none; }
    .b2b-product-purchase-panel .b2b-price-tiers__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 3px 12px;
        padding: 12px 18px;
        border-inline-start: 3px solid transparent;
        border-bottom: 1px solid var(--fbl-border);
        background: var(--fbl-surface);
    }
    .b2b-product-purchase-panel .b2b-price-tiers__row.is-active {
        border-inline-start-color: var(--fbl-brand);
        background: var(--fbl-brand-tint);
    }
    .b2b-product-purchase-panel .b2b-price-tiers__table td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        overflow-wrap: normal;
    }
    .b2b-product-purchase-panel .b2b-price-tiers__range {
        grid-column: 1;
        grid-row: 1;
        color: var(--fbl-ink);
        font-size: 13.5px;
        font-weight: 600;
    }
    .b2b-product-purchase-panel .b2b-price-tiers__price {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: center;
        color: var(--fbl-ink);
        font-family: var(--font-mono);
        font-size: 16px;
        font-weight: 700;
        white-space: nowrap;
    }
    .b2b-product-purchase-panel .b2b-price-tiers__row.is-active .b2b-price-tiers__range,
    .b2b-product-purchase-panel .b2b-price-tiers__row.is-active .b2b-price-tiers__price {
        color: var(--fbl-brand);
    }
    .b2b-product-purchase-panel .b2b-price-tiers__row-savings,
    .b2b-product-purchase-panel .b2b-price-tiers__lead-time {
        grid-column: 1;
        color: var(--fbl-ink-3);
        font-size: 10.5px;
    }
    .b2b-product-purchase-panel .b2b-price-tiers__row-savings::before,
    .b2b-product-purchase-panel .b2b-price-tiers__lead-time::before {
        content: attr(data-label) ": ";
    }
    .b2b-product-purchase-panel .b2b-price-tiers__calc {
        margin: 12px 18px 0;
        padding: 12px 14px;
        border-radius: 10px;
        background: var(--fbl-bg);
    }
    .b2b-product-purchase-panel .b2b-price-tiers__summary {
        display: grid;
        gap: 8px;
        margin: 0;
    }
    .b2b-product-purchase-panel .b2b-price-tiers__summary-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: var(--fbl-ink-2);
        font-size: 12.5px;
    }
    .b2b-product-purchase-panel .b2b-price-tiers__summary-row dd {
        margin: 0;
        color: var(--fbl-ink);
        font-family: var(--font-mono);
        font-weight: 600;
    }
    .b2b-product-purchase-panel .b2b-price-tiers__summary-row--total {
        padding-top: 8px;
        border-top: 1px solid var(--fbl-border);
        font-weight: 600;
    }
    .b2b-product-purchase-panel .b2b-price-tiers__summary-row--total dd {
        color: var(--fbl-brand);
        font-size: 18px;
        font-weight: 700;
    }
    .b2b-product-purchase-panel .b2b-price-tiers__next-tier {
        margin: 10px 18px 0;
        padding: 11px 13px;
        border: 1px solid color-mix(in srgb, var(--fbl-brand) 22%, var(--fbl-border));
        border-radius: 10px;
        background: var(--fbl-brand-tint);
        color: var(--fbl-brand);
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.5;
    }
    .b2b-product-purchase-panel .b2b-price-tiers__next-tier span { display: block; }
    .b2b-product-purchase-panel .b2b-price-tiers__rules {
        display: grid;
        gap: 2px;
        margin: 10px 18px 14px;
        color: var(--fbl-ink-3);
        font-size: 10.5px;
        line-height: 1.45;
    }
}

.b2b-product-gallery-counter { display: none; }

@media (max-width: 767.98px) {
    main:has(.b2b-product-page) > .breadcrumb-wrap { display: none; }
    .b2b-product-layout-container { padding-inline: 0; }
    .b2b-product-page {
        width: 100%;
        max-width: 100%;
        padding-bottom: 104px;
        overflow-x: clip;
        background: var(--fbl-bg);
    }
    .b2b-product-overview,
    .b2b-product-gallery-column,
    .b2b-product-gallery-panel,
    .b2b-product-gallery-panel .detail-gallery,
    .b2b-product-gallery-panel .bb-product-gallery-wrapper,
    .b2b-product-gallery-panel .bb-product-gallery,
    .b2b-product-gallery-panel .bb-product-gallery-images,
    .b2b-product-gallery-panel .bb-product-gallery-images .slick-list {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .b2b-product-overview,
    .b2b-product-gallery-column { overflow: hidden; }
    .b2b-product-gallery-panel { border-bottom: 1px solid var(--fbl-border); background: var(--fbl-surface); }
    .b2b-product-gallery-panel .bb-product-gallery { position: relative; display: block; gap: 0; overflow: hidden; }
    .b2b-product-gallery-panel .bb-product-gallery-images a { height: 300px; aspect-ratio: auto; }
    .b2b-product-gallery-panel .bb-product-gallery-images img { object-fit: contain; }
    .b2b-product-gallery-panel .bb-product-gallery-thumbnails {
        display: block !important;
        padding: 10px 12px 14px;
        overflow: hidden;
    }
    .b2b-product-gallery-panel .bb-product-gallery-thumbnails .slick-list { margin: 0; }
    .b2b-product-gallery-panel .bb-product-gallery-thumbnails .slick-slide { width: 64px !important; padding-inline: 4px; }
    .b2b-product-gallery-panel .bb-product-gallery-thumbnails img { width: 56px; height: 56px; aspect-ratio: auto; border-radius: 8px; }
    .b2b-product-gallery-dots { display: none; }
    .b2b-product-gallery-counter {
        position: absolute;
        z-index: 3;
        inset-block-start: 268px;
        inset-inline-end: 12px;
        display: inline-flex;
        direction: ltr;
        min-height: 22px;
        align-items: center;
        padding: 3px 10px;
        border-radius: 999px;
        background: color-mix(in srgb, var(--fbl-ink) 68%, transparent);
        color: #fff;
        font-family: var(--font-mono);
        font-size: 10.5px;
        font-weight: 500;
        line-height: 1;
    }

    .b2b-product-title-row {
        padding: 14px 16px 16px;
        border-bottom: 1px solid var(--fbl-border);
        background: var(--fbl-surface);
    }
    .b2b-product-status-badges { gap: 6px; margin-bottom: 8px; }
    .b2b-product-verified-badge,
    .b2b-product-stock-badge { min-height: 25px; font-size: 10.5px; }
    .b2b-product-page .title-detail { margin-bottom: 8px; font-size: 17px; font-weight: 600; line-height: 1.35; }
    .b2b-product-meta { gap: 10px; font-size: 12px; }
    .b2b-product-meta #product-sku { display: inline-flex !important; font-size: 11px; }
    .b2b-product-meta-divider { display: inline-block; }
    .b2b-product-rating-star { font-size: 16px; }
    .b2b-product-wishlist { flex-basis: 36px; width: 36px; height: 36px; }

    .b2b-product-order-card {
        margin-top: 8px;
        padding: 14px 16px;
        border-block: 1px solid var(--fbl-border);
        background: var(--fbl-surface);
    }
    .b2b-product-section-label { margin-bottom: 10px; color: var(--fbl-ink); font-size: 12.5px; letter-spacing: 0; text-transform: none; }
    .b2b-product-commerce-details .b2b-product-facts {
        gap: 8px;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .b2b-product-commerce-details .b2b-product-fact,
    .b2b-product-commerce-details .b2b-product-fact--price {
        min-height: 82px;
        padding: 10px 8px;
        align-items: center;
        border: 1px solid var(--fbl-border);
        border-radius: 8px;
        background: var(--fbl-surface);
        text-align: center;
    }
    .b2b-product-commerce-details .b2b-product-fact-label,
    .b2b-product-commerce-details .b2b-product-fact--price .b2b-product-fact-label { font-size: 10.5px; }
    .b2b-product-commerce-details .b2b-product-fact > strong { font-size: 15.5px; }
    .b2b-product-commerce-details .b2b-product-fact--price .current-price { font-size: 15.5px !important; }
    .b2b-product-commerce-details .b2b-product-fact--price .product-price { justify-content: center; }
    .b2b-product-commerce-details .product-attributes { gap: 14px; }
    .b2b-product-commerce-details .bb-product-attribute-swatch-title { margin-bottom: 8px; font-size: 11.5px; }
    .b2b-product-commerce-details .bb-product-attribute-swatch-list { gap: 8px; }
    .b2b-product-commerce-details .bb-product-attribute-text-display { min-height: 42px; padding: 9px 15px; font-size: 13px; }
    .b2b-product-commerce-details input:checked + .bb-product-attribute-text-display { padding: 8px 14px; }
    .b2b-product-commerce-details .product-option-item-label > label { margin-bottom: 8px; font-size: 11.5px; }
    .b2b-product-commerce-details .product-option-item-values { gap: 8px; }
    .b2b-product-commerce-details .product-option-item-values .form-radio > label { min-height: 42px; padding: 9px 15px; font-size: 13px; }
    .b2b-product-commerce-details .product-option-item-values .form-radio > input:checked + label { padding: 8px 14px; }
    .b2b-product-key-specs { display: none; }
    .b2b-product-reference-links { margin-top: 14px; }

    .b2b-product-commerce-details > .b2b-product-quantity-control {
        margin-top: 16px;
        padding-top: 14px;
        border-top: 1px solid var(--fbl-border);
    }

    .b2b-product-purchase-panel { display: flex; flex-direction: column; }
    .b2b-product-purchase-panel .bb-product-detail-actions { order: 1; display: block; }
    .b2b-product-purchase-panel .b2b-product-contact-actions { order: 2; margin-top: 12px; }
    .b2b-product-purchase-panel .b2b-product-taxonomy { order: 3; }
    .b2b-product-quantity-control { padding-top: 14px; border-top: 1px solid var(--fbl-border); }
    .b2b-product-quantity-label { display: none; }
    .b2b-product-quantity-row { display: flex; align-items: center; gap: 12px; }
    .b2b-product-quantity-row small { color: var(--fbl-ink-3); font-size: 11px; line-height: 1.4; }
    .b2b-product-page .detail-qty,
    .b2b-product-order-card .detail-qty {
        width: 152px !important;
        min-width: 152px;
        height: 44px;
        grid-template-columns: 44px 64px 44px;
        border-color: var(--fbl-border-strong) !important;
        border-radius: var(--r-control) !important;
    }
    .b2b-product-page .detail-qty .qty-down,
    .b2b-product-page .detail-qty .qty-up { width: 44px; background: var(--fbl-bg); color: var(--fbl-ink-2); font-size: 17px; }
    .b2b-product-page .detail-qty .qty-val {
        width: 64px;
        height: 42px;
        border-inline: 1px solid var(--fbl-border);
        color: var(--fbl-ink);
        font-family: var(--font-mono);
        font-size: 14px;
        font-weight: 600;
    }
    .b2b-product-purchase-panel .product-extra-link2,
    .b2b-product-request-quote-proxy,
    .b2b-product-purchase-panel .b2b-product-contact-actions > [data-rfq-entry],
    .b2b-product-purchase-panel .b2b-product-contact-actions > .wn-product-inquiry { display: none !important; }
    .b2b-product-sidebar.is-mobile-reflowed { display: none; }

    .b2b-product-mobile-secondary-actions {
        margin-top: 14px;
        border-top: 1px solid var(--fbl-border);
    }
    .b2b-product-mobile-secondary-actions > summary {
        display: flex;
        min-height: 46px;
        align-items: center;
        color: var(--fbl-ink);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        list-style: none;
    }
    .b2b-product-mobile-secondary-actions > summary::-webkit-details-marker { display: none; }
    .b2b-product-mobile-secondary-actions > summary::after {
        margin-inline-start: auto;
        color: var(--fbl-ink-3);
        content: "expand_more";
        font-family: 'Material Symbols Outlined';
        font-size: 19px;
        transition: transform .2s ease;
    }
    .b2b-product-mobile-secondary-actions[open] > summary::after { transform: rotate(180deg); }
    .b2b-product-mobile-secondary-actions-body { padding: 2px 0 10px; }
    .b2b-product-mobile-secondary-actions .b2b-product-contact-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 0;
    }
    .b2b-product-mobile-secondary-actions .b2b-product-contact-actions::before { display: none; }
    .b2b-product-mobile-secondary-actions .b2b-product-contact-actions > * {
        width: 100% !important;
        min-width: 0;
        margin: 0 !important;
    }
    .b2b-product-mobile-secondary-actions .b2b-product-contact-actions > [data-rfq-entry],
    .b2b-product-mobile-secondary-actions .b2b-product-contact-actions > .wn-qa { display: none !important; }
    .b2b-product-mobile-secondary-actions .b2b-product-contact-actions > .wn-wi,
    .b2b-product-mobile-secondary-actions .b2b-product-contact-actions > .wn-av,
    .b2b-product-mobile-secondary-actions .b2b-product-contact-actions > .wn-product-inquiry,
    .b2b-product-mobile-secondary-actions .b2b-product-contact-actions > .wn-inquiry-modal {
        grid-column: 1 / -1;
    }
    .b2b-product-mobile-secondary-actions .b2b-product-taxonomy {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--fbl-border);
    }

    .b2b-product-sidebar .b2b-product-vendor-card--desktop {
        display: block;
        margin-top: 8px;
        padding: 0;
        border-block: 1px solid var(--fbl-border);
        background: var(--fbl-surface);
    }
    .b2b-product-vendor-card { padding: 14px 16px; border: 0; border-radius: 0; background: var(--fbl-surface); box-shadow: none; }
    .b2b-product-vendor-heading { gap: 11px; }
    .b2b-product-vendor-logo { flex-basis: 42px; width: 42px; height: 42px; border-radius: 8px; }
    .b2b-product-vendor-copy h2 { font-size: 13.5px; font-weight: 600; }
    .b2b-product-vendor-copy p { font-size: 11.5px; }
    .b2b-product-vendor-badges { margin-top: 10px; }
    .b2b-product-vendor-stats { gap: 7px; margin-top: 12px; padding: 0; border: 0; text-align: start; }
    .b2b-product-vendor-stats > div { padding: 0; border-radius: 0; background: transparent; }
    .b2b-product-vendor-stats strong { order: initial; color: var(--fbl-ink); font-size: 12px; }
    .b2b-product-vendor-stats span { font-size: 12px; }
    .b2b-product-vendor-profile { min-height: 44px; margin-top: 12px; padding: 10px 0; border-width: 1.5px; border-radius: var(--r-control); font-size: 13px; font-weight: 600; }
    .b2b-product-vendor-follow { margin-top: 8px; }

    .b2b-product-sidebar .b2b-product-shipping-card { margin-top: 8px; padding: 18px 16px; border-block: 1px solid var(--fbl-border); border-inline: 0; border-radius: 0; }

    .b2b-product-page > .b2b-product-information-tabs { margin: 8px 0 0; border-inline: 0 !important; border-radius: 0 !important; }
    .b2b-product-page > .b2b-product-information-tabs .nav-tabs { padding-inline: 8px; border-radius: 0; background: var(--fbl-surface); }
    .b2b-product-page > .b2b-product-information-tabs .nav-tabs .nav-item .nav-link { min-height: 50px; padding: 15px 8px !important; font-size: 12px; }
    .b2b-product-page > .b2b-product-information-tabs .tab-content { padding: 16px; font-size: 13px; line-height: 1.6; }
    .b2b-product-page > .b2b-product-vendor-section { width: 100%; margin: 8px 0 0; }

    .b2b-product-page > .b2b-product-information-tabs.is-mobile-accordion {
        border-block: 1px solid var(--fbl-border) !important;
        background: var(--fbl-surface);
    }
    .b2b-product-information-tabs.is-mobile-accordion > .tab-style3 > .nav-tabs,
    .b2b-product-information-tabs.is-mobile-accordion > .tab-style3 > .tab-content { display: none !important; }
    .b2b-product-mobile-accordion { display: block; }
    .b2b-product-mobile-accordion-item + .b2b-product-mobile-accordion-item { border-top: 1px solid var(--fbl-border); }
    .b2b-product-mobile-accordion-trigger {
        display: flex;
        width: 100%;
        min-height: 50px;
        align-items: center;
        padding: 14px 16px;
        border: 0;
        background: var(--fbl-surface);
        color: var(--fbl-ink);
        font: inherit;
        font-size: 13.5px;
        font-weight: 600;
        text-align: start;
        cursor: pointer;
    }
    .b2b-product-mobile-accordion-trigger::after {
        margin-inline-start: auto;
        color: var(--fbl-ink-3);
        content: "expand_more";
        font-family: 'Material Symbols Outlined';
        font-size: 19px;
        transition: transform .2s ease;
    }
    .b2b-product-mobile-accordion-trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
    .b2b-product-mobile-accordion-panel { padding: 0 16px 16px; color: var(--fbl-ink-2); font-size: 13px; line-height: 1.6; }
    .b2b-product-mobile-accordion-panel[hidden] { display: none !important; }
    .b2b-product-mobile-accordion-panel .tab-pane { display: block !important; opacity: 1 !important; }
    .b2b-product-mobile-accordion-panel .wn-wi,
    .b2b-product-mobile-accordion-panel .wn-qa { margin: 0; border: 0; border-radius: 0; }

    .b2b-product-mobile-actions {
        left: 50%;
        right: auto;
        width: min(100%, 390px);
        min-height: 72px;
        transform: translateX(-50%);
        gap: 10px;
        align-items: center;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-color: var(--fbl-border);
        background: var(--fbl-surface);
        box-shadow: 0 -4px 16px color-mix(in srgb, var(--fbl-ink) 8%, transparent);
    }
    .b2b-product-mobile-chat,
    .b2b-product-mobile-order,
    .b2b-product-mobile-quote {
        display: inline-flex;
        min-width: 0;
        height: 48px;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        padding: 0 8px !important;
        border-radius: var(--r-control) !important;
        font-size: 14px !important;
        font-weight: 600;
        line-height: 1.2;
        box-shadow: none;
    }
    .b2b-product-mobile-chat {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        padding: 0 !important;
        border: 1px solid var(--fbl-border-strong) !important;
        background: var(--fbl-surface);
        color: var(--fbl-ink);
    }
    .b2b-product-mobile-chat .material-symbols-outlined { font-size: 19px; }
    .b2b-product-mobile-order {
        flex: 1 1 0;
        gap: 5px;
        border: 0 !important;
        background: var(--fbl-brand-tint) !important;
        color: var(--fbl-brand) !important;
    }
    .b2b-product-mobile-order .material-symbols-outlined { display: none; }
    .b2b-product-mobile-quote {
        flex: 1 1 0;
        border: 0 !important;
        background: var(--fbl-brand);
        color: #fff !important;
    }
    .b2b-product-mobile-quote:hover { background: var(--fbl-brand-deep); color: #fff !important; }

    /* Mobile order panel — original controls are moved, never cloned. */
    .b2b-product-commerce-details > .b2b-product-purchase-panel.is-mobile-order-panel {
        display: flex;
        width: 100%;
        min-width: 0;
        flex-direction: column;
        gap: 0;
        margin-top: 16px;
        padding: 16px;
        overflow: hidden;
        border: 1px solid var(--fbl-border);
        border-radius: 14px;
        background: var(--fbl-surface);
        box-shadow: none;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel > .bb-product-detail-actions { order: 1; }
    .b2b-product-purchase-panel.is-mobile-order-panel > .b2b-product-mobile-actions { order: 2; }
    .b2b-product-purchase-panel.is-mobile-order-panel > .b2b-price-tiers { order: 3; }
    .b2b-product-purchase-panel.is-mobile-order-panel > .b2b-product-mobile-secondary-actions { order: 4; }

    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-product-quantity-control {
        position: relative;
        padding: 0;
        border: 0;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-product-quantity-label {
        display: block;
        padding-inline-end: 128px;
        color: var(--fbl-ink);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.35;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-product-quantity-row {
        display: block;
        margin-top: 11px;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-product-quantity-row small {
        position: absolute;
        inset-block-start: 2px;
        inset-inline-end: 0;
        color: var(--fbl-ink-3);
        font-size: 10.5px;
        line-height: 1.25;
        text-align: end;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .detail-qty {
        display: grid !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        height: 54px;
        grid-template-columns: 52px minmax(72px, 1fr) 52px;
        overflow: hidden;
        border: 1.5px solid var(--fbl-border-strong) !important;
        border-radius: 10px !important;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .detail-qty .qty-down,
    .b2b-product-purchase-panel.is-mobile-order-panel .detail-qty .qty-up {
        width: 52px;
        height: 52px;
        background: var(--fbl-bg);
        color: var(--fbl-ink-2);
        font-size: 20px;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .detail-qty .qty-val {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 52px;
        margin: 0 !important;
        padding: 0 !important;
        border-inline: 1px solid var(--fbl-border);
        background: var(--fbl-surface) !important;
        color: var(--fbl-ink) !important;
        font-family: var(--font-mono);
        font-size: 18px;
        font-weight: 700;
        line-height: 52px;
        opacity: 1 !important;
        visibility: visible !important;
        text-align: center;
    }

    .b2b-product-purchase-panel.is-mobile-order-panel > .b2b-product-mobile-actions {
        position: static;
        display: grid;
        width: 100%;
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 9px;
        margin-top: 12px;
        padding: 0;
        transform: none;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-product-mobile-quote {
        order: 1;
        width: 100%;
        min-height: 50px;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-product-mobile-order {
        order: 2;
        width: 100%;
        min-height: 48px;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-product-mobile-chat {
        order: 3;
        width: 100%;
        min-height: 44px;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-product-mobile-chat .visually-hidden {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        overflow: visible !important;
        clip: auto !important;
        white-space: normal !important;
    }

    .b2b-product-purchase-panel.is-mobile-order-panel > .b2b-price-tiers {
        width: calc(100% + 32px);
        max-width: none;
        margin: 14px -16px 0;
        overflow: hidden;
        border-top: 1px solid var(--fbl-border);
        background: var(--fbl-surface);
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__head {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 3px 8px;
        padding: 14px 16px 10px;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__title {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.01em;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__tax-note {
        margin-inline-start: auto;
        color: var(--fbl-ink-3);
        font-size: 10.5px;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__scroll {
        width: 100%;
        overflow: visible;
        border-top: 1px solid var(--fbl-border);
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__table,
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__table tbody {
        display: block;
        width: 100%;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__table thead { display: none; }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 3px 12px;
        padding: 12px 16px;
        border-inline-start: 3px solid transparent;
        border-bottom: 1px solid var(--fbl-border);
        background: var(--fbl-surface);
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__row.is-active {
        border-inline-start-color: var(--fbl-brand);
        background: var(--fbl-brand-tint);
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__table td {
        display: block;
        min-width: 0;
        padding: 0;
        border: 0;
        overflow-wrap: normal;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__range {
        grid-column: 1;
        grid-row: 1;
        color: var(--fbl-ink);
        font-size: 13.5px;
        font-weight: 600;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__price {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: center;
        color: var(--fbl-ink);
        font-family: var(--font-mono);
        font-size: 16px;
        font-weight: 700;
        white-space: nowrap;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__row.is-active .b2b-price-tiers__range,
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__row.is-active .b2b-price-tiers__price {
        color: var(--fbl-brand);
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__row-savings,
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__lead-time {
        grid-column: 1;
        color: var(--fbl-ink-3);
        font-size: 10.5px;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__row-savings::before,
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__lead-time::before {
        content: attr(data-label) ": ";
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__calc {
        margin: 12px 16px 0;
        padding: 12px 14px;
        border-radius: 10px;
        background: var(--fbl-bg);
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__summary {
        display: grid;
        gap: 8px;
        margin: 0;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__summary-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: var(--fbl-ink-2);
        font-size: 12.5px;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__summary-row dd {
        margin: 0;
        color: var(--fbl-ink);
        font-family: var(--font-mono);
        font-weight: 600;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__summary-row--total {
        padding-top: 8px;
        border-top: 1px solid var(--fbl-border);
        font-weight: 600;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__summary-row--total dd {
        color: var(--fbl-brand);
        font-size: 18px;
        font-weight: 700;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__next-tier {
        margin: 10px 16px 0;
        padding: 11px 13px;
        border: 1px solid color-mix(in srgb, var(--fbl-brand) 22%, var(--fbl-border));
        border-radius: 10px;
        background: var(--fbl-brand-tint);
        color: var(--fbl-brand);
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.5;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__next-tier span { display: block; }
    .b2b-product-purchase-panel.is-mobile-order-panel .b2b-price-tiers__rules {
        display: grid;
        gap: 2px;
        margin: 10px 16px 14px;
        color: var(--fbl-ink-3);
        font-size: 10.5px;
        line-height: 1.45;
    }
    .b2b-product-purchase-panel.is-mobile-order-panel > .b2b-product-mobile-secondary-actions {
        width: calc(100% + 32px);
        margin: 0 -16px -16px;
        padding: 0 16px;
    }

    [dir="rtl"] .b2b-product-gallery-panel .bb-product-gallery-images a { height: 260px; }
    [dir="rtl"] .b2b-product-gallery-panel .bb-product-gallery-thumbnails { display: none !important; }
    [dir="rtl"] .b2b-product-gallery-counter {
        right: auto;
        left: 12px;
        inset-block-start: 228px;
        border-radius: 4px;
    }
}

/* ================================================= FOOTER (Phase-8 redesign) ==
   design_handoff Footer.dc.html / Footer Mobile.dc.html — dark brand footer with
   real marketplace link columns, brand+contact block, trust strip, styled socials.
   Mobile: columns collapse to <details> accordions. Colours from footer tokens. */
.toptan-footer {
    --tf-accent: color-mix(in srgb, var(--fbl-brand) 58%, #fff);
    --tf-strong: #B7C9C5;
    --tf-muted: var(--fbl-on-footer, #8FA5A1);
    --tf-line: rgba(255, 255, 255, .09);
    background: var(--fbl-footer-bg, #12201E);
    color: var(--tf-muted);
}
.toptan-footer .tf-wrap { max-width: 1240px; margin-inline: auto; padding-inline: 40px; box-sizing: border-box; }

/* ---- top: brand + columns ---- */
.toptan-footer .tf-top {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding-block: 52px 40px;
}
.toptan-footer .tf-brandlogo { display: inline-flex; align-items: center; gap: 9px; }
.toptan-footer .tf-brandlogo-mark {
    width: 34px; height: 34px; border-radius: 8px; background: var(--fbl-brand); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none;
}
.toptan-footer .tf-brandlogo-text { font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.toptan-footer .tf-brandlogo-text span { color: var(--tf-accent); }
.toptan-footer .tf-tagline { font-size: 13px; line-height: 1.6; margin: 14px 0 0; max-width: 320px; color: var(--tf-muted); }
.toptan-footer .tf-contact { display: flex; flex-direction: column; gap: 11px; margin-top: 20px; font-size: 13px; }
.toptan-footer .tf-contact-row { display: flex; gap: 11px; align-items: flex-start; color: var(--tf-strong); }
.toptan-footer .tf-contact-row a { color: var(--tf-strong); }
.toptan-footer .tf-contact-row a:hover { color: #fff; }
.toptan-footer .tf-contact-row .material-symbols-outlined { color: var(--tf-accent); font-size: 18px; flex: none; }

.toptan-footer .tf-col { border: 0; }
.toptan-footer .tf-col-head {
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #fff; margin-bottom: 16px; list-style: none; cursor: default;
}
.toptan-footer .tf-col-head::-webkit-details-marker { display: none; }
.toptan-footer .tf-col-links { display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; }
.toptan-footer .tf-col-links a { color: var(--tf-muted); }
.toptan-footer .tf-col-links a:hover { color: #fff; }

/* ---- trust strip ---- */
.toptan-footer .tf-trust {
    display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center;
    border-top: 1px solid var(--tf-line); padding-block: 18px; font-size: 12px;
}
.toptan-footer .tf-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--tf-muted); }
.toptan-footer .tf-chip .material-symbols-outlined { font-size: 16px; color: var(--tf-accent); }
.toptan-footer .tf-switch { margin-inline-start: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toptan-footer .tf-lang, .toptan-footer .tf-cur {
    display: inline-flex; align-items: center; gap: 2px;
    background: #1E322E; border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px; padding: 3px;
}
.toptan-footer .tf-lang a, .toptan-footer .tf-cur a {
    color: var(--tf-strong); font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 5px;
}
.toptan-footer .tf-lang a:hover, .toptan-footer .tf-cur a:hover { color: #fff; }
.toptan-footer .tf-lang a.is-active, .toptan-footer .tf-cur a.is-active { background: var(--fbl-brand); color: #fff; }

/* ---- bottom bar ---- */
.toptan-footer .tf-bottom {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
    border-top: 1px solid var(--tf-line); padding-block: 18px;
}
.toptan-footer .tf-copy { font-size: 12.5px; color: #7D9591; margin: 0; }
.toptan-footer .tf-social { margin-inline-start: auto; display: flex; gap: 10px; align-items: center; }
.toptan-footer .tf-social-label { font-size: 12px; color: #7D9591; margin-inline-end: 4px; }
.toptan-footer .tf-social a {
    width: 34px; height: 34px; border-radius: 999px; background: rgba(255, 255, 255, .08);
    display: grid; place-items: center; overflow: hidden; transition: background .15s;
}
.toptan-footer .tf-social a:hover { background: var(--fbl-brand); }
.toptan-footer .tf-social a img { width: 16px; height: 16px; object-fit: contain; }

/* ---- mobile: accordion columns ---- */
@media (max-width: 991.98px) {
    .toptan-footer .tf-wrap { padding-inline: 18px; }
    .toptan-footer .tf-top { grid-template-columns: 1fr; gap: 0; padding-block: 28px 8px; }
    .toptan-footer .tf-brand { padding-bottom: 20px; }
    .toptan-footer .tf-col { border-top: 1px solid var(--tf-line); }
    .toptan-footer .tf-col-head {
        cursor: pointer; margin: 0; padding: 15px 0; display: flex; align-items: center;
    }
    .toptan-footer .tf-col-head::after {
        content: "expand_more"; font-family: 'Material Symbols Outlined'; margin-inline-start: auto;
        color: var(--tf-accent); font-size: 20px; transition: transform .2s;
    }
    .toptan-footer .tf-col[open] .tf-col-head::after { transform: rotate(180deg); }
    .toptan-footer .tf-col-links { padding: 0 0 16px; }
    /* base .tf-col-links has display:flex, which would otherwise keep the links
       visible even when the <details> is collapsed — hide them when closed. */
    .toptan-footer .tf-col:not([open]) .tf-col-links { display: none; }
    .toptan-footer .tf-trust, .toptan-footer .tf-bottom { flex-direction: column; align-items: flex-start; }
    .toptan-footer .tf-switch, .toptan-footer .tf-social { margin-inline-start: 0; }
}

/* ============================================ VENDOR STORE / SUPPLIER PAGES ==
   The growth "reputation" pill (b2b-store-reputation) on the vendor store ships
   a hard-coded emerald tint (rgba(16,185,129,.12)) inline in a shared plugin
   partial — the one off-brand leak on the store pages. Retint to brand teal.
   `!important` beats the inline style attribute (which has no !important). */
.b2b-store-reputation [style*="185,129"] {
    background: var(--fbl-brand-tint) !important;
    color: var(--fbl-brand-deep) !important;
}

/* ============================================================ LEGAL / POLICY ==
   Admin-editable CMS pages using the "legal" template (partials/legal-page.blade,
   layouts/legal.blade). Design: design_handoff Legal Pages.dc.html (desktop) +
   Legal Pages Mobile.dc.html. All colours resolve to the editable Theme-Options
   palette via --fbl-* / design aliases — no hard-coded hex. */
.legal-scope { background: var(--fbl-bg); }
.legal-wrap {
    --legal-body: color-mix(in srgb, var(--fbl-ink) 84%, #fff);
    --legal-summary-border: color-mix(in srgb, var(--fbl-brand) 28%, #fff);
    color: var(--fbl-ink);
}

/* ---- Sub-header + cross-page tab strip ---- */
.legal-head {
    background: var(--fbl-surface);
    border-bottom: 1px solid var(--fbl-border);
}
.legal-head-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 16px var(--gutter-desktop);
    display: flex;
    align-items: center;
    gap: 20px;
}
.legal-eyebrow {
    flex: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--fbl-ink-2);
}
.legal-tabs {
    margin-inline-start: auto;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.legal-tabs::-webkit-scrollbar { display: none; }
.legal-tab {
    flex: none;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fbl-ink-2);
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.legal-tab:hover { background: var(--fbl-brand-tint); color: var(--fbl-brand-deep); }
.legal-tab.is-active { background: var(--fbl-brand-tint); color: var(--fbl-brand); }

/* ---- Two-column body ---- */
.legal-grid {
    max-width: 1000px;
    margin: 0 auto;
    padding: 36px var(--gutter-desktop) 72px;
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

/* ---- Sticky table of contents ---- */
.legal-toc { position: sticky; top: 16px; }
.legal-toc-inner {
    background: var(--fbl-surface);
    border: 1px solid var(--fbl-border);
    border-radius: 10px;
    padding: 16px 10px;
}
.legal-toc-inner.is-empty { display: none; }
.legal-toc-title {
    padding: 0 12px 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fbl-ink-3);
}
.legal-toc-list { display: flex; flex-direction: column; }
.legal-toc-link {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--legal-body);
    transition: background .15s, color .15s;
}
.legal-toc-link:hover { background: var(--fbl-bg); color: var(--fbl-brand-deep); }
.legal-toc-link.is-active { background: var(--fbl-brand-tint); color: var(--fbl-brand); }
.legal-toc-foot {
    border-top: 1px solid var(--fbl-divider);
    margin-top: 10px;
    padding: 12px 12px 4px;
    font-size: 11px;
    color: var(--fbl-ink-3);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
.legal-toc-print {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--fbl-brand);
    cursor: pointer;
}
.legal-toc-print:hover { color: var(--fbl-brand-deep); }
.legal-toc-print .material-symbols-outlined { font-size: 16px; }

/* ---- Article ---- */
.legal-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.015em;
    color: var(--fbl-ink);
}
.legal-meta {
    font-size: 12.5px;
    color: var(--fbl-ink-3);
    margin-top: 8px;
}
.legal-meta a { color: var(--fbl-brand); font-weight: 600; }

.legal-summary {
    background: var(--fbl-brand-tint);
    border: 1px solid var(--legal-summary-border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-top: 20px;
}
.legal-summary-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fbl-brand);
    margin-bottom: 6px;
}
.legal-summary-body { font-size: 13px; color: var(--legal-body); line-height: 1.6; }
.legal-summary-note { font-size: 11px; color: var(--fbl-ink-3); margin-top: 8px; }

/* ---- Content: auto-numbered sections from <h2> ---- */
.legal-content {
    counter-reset: legal-section;
    font-size: 14px;
    line-height: 1.75;
    color: var(--legal-body);
    margin-top: 8px;
}
.legal-content h2 {
    counter-increment: legal-section;
    font-size: 18px;
    font-weight: 600;
    margin: 26px 0 10px;
    letter-spacing: -0.01em;
    color: var(--fbl-ink);
    scroll-margin-top: 90px;
}
.legal-content h2::before {
    content: counter(legal-section) ". ";
    color: var(--fbl-brand);
    font-weight: 700;
}
.legal-content h3 { font-size: 15px; font-weight: 600; margin: 20px 0 8px; color: var(--fbl-ink); }
.legal-content p { margin: 0 0 12px; }
.legal-content ul, .legal-content ol { margin: 0 0 12px; padding-inline-start: 22px; }
.legal-content li { margin-bottom: 6px; }
.legal-content a { color: var(--fbl-brand); font-weight: 500; }
.legal-content a:hover { color: var(--fbl-brand-deep); }

/* ---- Contact card ---- */
.legal-contact {
    background: var(--fbl-surface);
    border: 1px solid var(--fbl-border);
    border-radius: 12px;
    padding: 18px 24px;
    margin-top: 30px;
    display: flex;
    gap: 16px;
    align-items: center;
}
.legal-contact-icon {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 9px;
    background: var(--fbl-brand-tint);
    color: var(--fbl-brand);
    display: flex;
    align-items: center;
    justify-content: center;
}
.legal-contact-icon .material-symbols-outlined { font-size: 20px; }
.legal-contact-text { min-width: 0; flex: 1; }
.legal-contact-title { font-size: 13.5px; font-weight: 600; color: var(--fbl-ink); }
.legal-contact-sub { font-size: 12px; color: var(--fbl-ink-3); margin-top: 2px; }
.legal-contact-sub a { color: var(--fbl-brand); font-weight: 500; }
.legal-contact-btn {
    flex: none;
    background: var(--fbl-surface);
    color: var(--fbl-brand);
    border: 1.5px solid var(--fbl-brand);
    border-radius: 6px;
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 600;
    transition: background .15s;
}
.legal-contact-btn:hover { background: var(--fbl-brand-tint); color: var(--fbl-brand-deep); }

/* ---- Mobile ---- */
@media (max-width: 860px) {
    .legal-head-inner { padding: 14px var(--gutter-mobile); gap: 12px; flex-wrap: wrap; }
    .legal-eyebrow { display: none; }
    .legal-tabs { margin-inline-start: 0; width: 100%; }
    .legal-tab {
        padding: 8px 14px;
        border-radius: 999px;
        border: 1px solid var(--fbl-border);
        background: var(--fbl-surface);
    }
    .legal-tabs .legal-tab.is-active { background: var(--fbl-brand); color: #fff; border-color: var(--fbl-brand); }
    .legal-grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 18px var(--gutter-mobile) 40px;
    }
    /* On mobile the tab strip already covers cross-page nav; the in-page TOC is
       secondary, so drop the sticky sidebar to match the mobile design. */
    .legal-toc { display: none; }
    .legal-title { font-size: 22px; }
    .legal-content h2 { font-size: 16px; }
}

/* ---- Print / "Download PDF" ---- */
@media print {
    .b2b-header, .toptan-footer, .legal-head, .legal-toc, .legal-contact,
    .b2b-utilitybar, header.b2b-header { display: none !important; }
    .legal-grid { display: block; padding: 0; max-width: none; }
    .legal-scope, .legal-wrap { background: #fff; }
    .legal-content a::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
}

/* Product quantity is a three-part control. Keep the native input as an
   explicit grid item so inherited form/button rules cannot collapse it. */
.b2b-product-page .detail-qty {
    display: grid !important;
    width: 100% !important;
    min-width: 176px !important;
    max-width: none !important;
    height: 54px;
    grid-template-columns: 52px minmax(72px, 1fr) 52px !important;
    overflow: hidden;
}
.b2b-product-page .detail-qty > .qty-down,
.b2b-product-page .detail-qty > .qty-up {
    position: static !important;
    display: grid !important;
    min-width: 0 !important;
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    place-items: center;
    border: 0;
    border-radius: 0;
}
.b2b-product-page .detail-qty > .qty-down { grid-column: 1; }
.b2b-product-page .detail-qty > .qty-val {
    position: static !important;
    z-index: 1;
    display: block !important;
    grid-column: 2;
    grid-row: 1;
    min-width: 72px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 6px !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.b2b-product-page .detail-qty > .qty-up { grid-column: 3; }

/* ================================================================ 404 / ERROR ==
   Public "page not found" screen (views/404.blade.php). Design:
   design_handoff "Error Pages.dc.html" (desktop) + "Error Pages Mobile.dc.html".
   The 500 and 503 screens are deliberately NOT styled here — they must render
   without the theme asset pipeline, so they carry their own inline CSS.
   All colours resolve to the editable Theme-Options palette via --fbl-*. */
.tt-errorpage {
    background: var(--fbl-bg);
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px var(--gutter-desktop);
}
.tt-error {
    max-width: 520px;
    width: 100%;
    text-align: center;
    color: var(--fbl-ink);
}
.tt-error-code {
    font-family: var(--font-mono);
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--fbl-brand);
}
.tt-error-title {
    margin: 18px 0 0;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fbl-ink);
}
.tt-error-text {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--fbl-ink-3);
}

/* ---- Recovery search (joined input + button) ---- */
.tt-error-search {
    display: flex;
    max-width: 420px;
    margin: 24px auto 0;
}
.tt-error-search-input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--fbl-ink);
    background: var(--fbl-surface);
    border: 1px solid var(--fbl-border-strong);
    border-start-start-radius: var(--r-control);
    border-end-start-radius: var(--r-control);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}
.tt-error-search-input::placeholder { color: var(--fbl-ink-3); }
.tt-error-search-input:focus {
    outline: none;
    border-color: var(--fbl-brand);
    box-shadow: 0 0 0 3px var(--fbl-brand-tint-2);
    position: relative;
    z-index: 1;
}
.tt-error-search-btn {
    flex: none;
    height: 46px;
    padding: 0 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--fbl-brand);
    border: 1px solid var(--fbl-brand);
    border-inline-start: 0;
    border-start-end-radius: var(--r-control);
    border-end-end-radius: var(--r-control);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    cursor: pointer;
    transition: background .15s ease;
}
.tt-error-search-btn:hover { background: var(--fbl-brand-deep); border-color: var(--fbl-brand-deep); }
.tt-error-search-icon { display: none; font-size: 20px; }

/* ---- Actions ---- */
.tt-error-home {
    display: none; /* mobile-only; desktop uses the link row below */
    width: 100%;
    min-height: 48px;
    margin-top: 20px;
    background: var(--fbl-surface);
    color: var(--fbl-brand);
    border: 1.5px solid var(--fbl-brand);
    font-size: 13.5px;
}
.tt-error-home:hover { background: var(--fbl-brand-tint); color: var(--fbl-brand-deep); }
.tt-error-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    margin-top: 20px;
    font-size: 13px;
    font-weight: 600;
}
.tt-error-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--fbl-brand);
}
.tt-error-link:hover { color: var(--fbl-brand-deep); }
/* RTL-GUIDE rule 5: the "back" arrow is directional — mirror it, unlike the icons
   that carry no direction (search). */
.tt-error-back-icon { font-size: 18px; }
[dir="rtl"] .tt-error-back-icon { transform: scaleX(-1); }

@media (max-width: 767px) {
    .tt-errorpage { padding: 40px var(--gutter-mobile); }
    .tt-error-code { font-size: 68px; }
    .tt-error-title { margin-top: 16px; font-size: 19px; }
    .tt-error-text { margin-top: 9px; font-size: 12.5px; }
    .tt-error-search { margin-top: 20px; }
    /* Icon-only submit so the input keeps a usable width on a 390px screen. */
    .tt-error-search-btn { padding: 0 16px; }
    .tt-error-search-text { display: none; }
    .tt-error-search-icon { display: inline-flex; align-items: center; }
    .tt-error-home { display: inline-flex; }
    .tt-error-links { gap: 16px; margin-top: 20px; font-size: 12.5px; }
    /* Homepage now lives in the full-width button above it. */
    .tt-error-link-home { display: none; }
}