/* =============================================================
   Supply Solution — Product Detail Page
   Plain CSS: no LESS compilation, linked via catalog_product_view.xml
   CSS custom properties (--ss-*) are defined in :root via styles-l.css
   ============================================================= */

/* =============================================================
   TWO-COLUMN + FULL-WIDTH DETAILS LAYOUT (Grainger-style)
   Row 1: gallery LEFT (sticky) + buy pane + accordions + recs RIGHT
   Row 2: specs / details / compliance / reviews full-width
   Gallery sticks during row 1 scroll so the buyer keeps visual context
   while reading through the tall right-column info stack.
   Mobile (<960px): everything stacks; sticky disabled.
   ============================================================= */
.catalog-product-view .column.main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px;
    row-gap: 48px;
    align-items: start;
}
.catalog-product-view .product.media {
    grid-column: 1;
    grid-row: 1;
    float: none !important;
    width: auto !important;
    max-width: 100%;
    /* stretch to row 1 height so sticky child has room to slide and hard-releases at row 1 bottom */
    align-self: stretch;
}
.catalog-product-view .product-info-main {
    grid-column: 2;
    grid-row: 1;
    float: none !important;
    width: auto !important;

    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;

    position: static;
    max-height: none;
    overflow: visible;
}

/* Full-width row 2 — long-form product info sits below both columns.
   Wrapped as a "content page" — pure white block on warm page bg, with
   soft shadow and padding. Creates visible rhythm between the row 1 hero
   section, this info stack, and row 3 recs. Works on any display (unlike
   subtle hue shifts). */
.catalog-product-view .product.info.detailed {
    grid-column: 1 / -1;
    grid-row: 3;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 32px 0 0 !important;
    padding: 40px !important;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: var(--shadow-page);
    align-self: start;
}
@media (max-width: 959px) {
    .catalog-product-view .product.info.detailed {
        padding: 24px !important;
        margin-top: 24px !important;
    }
}

/* Row 3 — Full-width recommendation strips (Upsell + Related) at bottom of PDP.
   Parent theme renders these as <section class="rwc-rcs rwc-rcs--upsell/--related">.
   Grid auto-flow places them after row 2 in DOM order (upsell first, related after).
   Wider .rwc-rcs styling (4 cards per row) applies automatically since they're
   outside product.info.main. */
.catalog-product-view .rwc-rcs--upsell,
.catalog-product-view .rwc-rcs--related {
    grid-column: 1 / -1;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: start;
}

/* Mobile: stack everything, disable sticky (fixed-position UI on narrow
   viewports covers content and hurts scroll performance) */
@media (max-width: 959px) {
    .catalog-product-view .column.main {
        display: block !important;
    }
    .catalog-product-view .product.media {
        align-self: auto;
    }
    .catalog-product-view .gallery-placeholder {
        position: static;
    }
    .catalog-product-view .product-info-main {
        margin-top: 24px;
    }
}

/* Image gallery — sticky within .product.media (which spans row 1 height).
   Card treatment moved from .gallery-placeholder to the fotorama STAGE only,
   so the thumbs sit OUTSIDE the image card as a plain strip below.
   !important on position:sticky ensures parent-theme styles-l.css (which
   loads AFTER v2 on desktop, per feedback memory) can't override. */
.catalog-product-view .gallery-placeholder {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible !important;
    position: sticky !important;
    top: 100px !important;
    box-shadow: none;
    align-self: start;
}
/* .product.media parent — MUST be align-self:stretch AND have no overflow
   restriction, or sticky child has no scroll-context to stick within. */
.catalog-product-view .product.media {
    overflow: visible !important;
}
/* html/body scrolling context — some Magento themes apply `overflow-x: hidden`
   on body which SILENTLY BREAKS position:sticky descendants. Force visible. */
html, body { overflow-x: clip; }

/* Fotorama sets stage dimensions via inline styles — !important required to override.
   Reduced from 460px → 380px so the image reads as product photo, not hero. */
.catalog-product-view .fotorama__stage {
    max-height: 380px !important;
    height: 380px !important;
    background: #fff;
    border: 1px solid var(--border-card);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
.catalog-product-view .fotorama__stage__frame {
    width: 100% !important;
    height: 100% !important;
}
.catalog-product-view .fotorama__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}
.catalog-product-view .gallery-placeholder__image {
    width: 100% !important;
    height: 380px !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Thumbs strip — sits OUTSIDE the image card, no border or shadow.
   Only the individual thumb tiles are bordered. */
.catalog-product-view .fotorama__nav-wrap {
    margin-top: 12px;
    background: transparent;
    border: none;
    box-shadow: none;
}
.catalog-product-view .fotorama__thumb {
    border: 1px solid var(--ss-border);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.catalog-product-view .fotorama__active .fotorama__thumb { border-color: var(--ss-blue); }

/* Product title */
.catalog-product-view .page-title-wrapper.product { margin-bottom: 8px; }
.catalog-product-view .page-title { margin: 0; }
.catalog-product-view .page-title .base {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ss-ink);
}

/* SKU + stock row */
.catalog-product-view .product-info-stock-sku {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 6px 0 14px;
}
.catalog-product-view .product-info-stock-sku .product.sku {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.25rem;
    color: var(--ss-ink-3);
}
.catalog-product-view .product-info-stock-sku .product.sku .type { font-weight: 600; }
.catalog-product-view .product-info-stock-sku .product.sku .value {
    font-family: var(--ss-mono);
    letter-spacing: .02em;
}
/* Stock indicator — semantic-colored PILL (green in-stock, red unavailable).
   Semantic colors stay consistent across all 4 store subdomains regardless
   of per-store accent, so "in stock" always reads green. */
.catalog-product-view .product-info-stock-sku .stock {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1.4;
}
.catalog-product-view .product-info-stock-sku .stock::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}
.catalog-product-view .product-info-stock-sku .stock.available {
    color: #047857;
    background: rgba(16, 185, 129, 0.12);
}
.catalog-product-view .product-info-stock-sku .stock.unavailable {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.12);
}

/* Price block */
.catalog-product-view .product-info-price {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ss-border);
}
.catalog-product-view .product-info-price .price-box {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.catalog-product-view .product-info-price .price-box .price {
    font-family: var(--ss-mono);
    font-size: 3.6rem;
    font-weight: 700;
    color: var(--ss-ink);
    line-height: 1;
    letter-spacing: -0.02em; /* tighten kerning at large size — makes number feel purposeful */
}
.catalog-product-view .product-info-price .old-price .price {
    font-size: 1.6rem;
    color: var(--ss-ink-3);
    text-decoration: line-through;
}
.catalog-product-view .product-info-price .special-price .price { color: var(--ss-blue); }
.catalog-product-view .product-info-price .price-label {
    font-size: 1.2rem;
    color: var(--ss-ink-3);
    font-weight: 500;
}
.catalog-product-view .product-info-price .price-including-tax,
.catalog-product-view .product-info-price .price-excluding-tax {
    font-size: 1.2rem;
    color: var(--ss-ink-3);
}

/* Product options */
.catalog-product-view .product-options-wrapper { margin-bottom: 20px; }
.catalog-product-view .product-options-wrapper .fieldset > .field { margin-bottom: 16px; }
.catalog-product-view .product-options-wrapper .fieldset > .field > .label {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ss-ink);
    margin-bottom: 8px;
    display: block;
}
.catalog-product-view .swatch-attribute-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}
.catalog-product-view .swatch-option {
    border: 1px solid var(--ss-border) !important;
    border-radius: 0 !important;
    padding: 6px 14px;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--ss-ink);
    cursor: pointer;
    transition: all .12s;
    min-width: 44px;
    text-align: center;
}
.catalog-product-view .swatch-option:hover   { border-color: var(--ss-blue); color: var(--ss-blue); background: var(--accent-soft); }
.catalog-product-view .swatch-option.selected { border-color: var(--ss-blue); background: var(--ss-blue); color: var(--bg-card); }
.catalog-product-view .swatch-option.disabled { opacity: .35; cursor: not-allowed; }
.catalog-product-view select.super-attribute-select {
    height: 42px;
    padding: 0 36px 0 12px;
    font-size: 1.4rem;
    min-width: 180px;
    width: auto;
    max-width: 100%;
    cursor: pointer;
}

/* Add to cart box */
.catalog-product-view .box-tocart {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 20px;
}

/* Fieldset (qty + actions row) — flex row, CENTER-aligned. */
.catalog-product-view .box-tocart .fieldset {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
}

/* Quantity — Grainger "notched-border label" pattern.
   .field.qty widthis constrained to .control's width so the label centers
   on the visible box, not the wider padded field. */
.catalog-product-view .box-tocart .field.qty {
    flex-shrink: 0;
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible;
    width: max-content;    /* shrink to fit .control */
}
.catalog-product-view .box-tocart .field.qty .label {
    position: absolute;
    top: 0;                       /* top edge of .control */
    left: 50%;
    z-index: 2;
    display: inline-block;
    padding: 0 6px;
    margin: 0 !important;
    background: var(--bg-card, #fff);
    font-family: var(--font-sans, sans-serif);
    font-size: 10px !important;
    font-weight: 700;
    color: var(--text-muted, #64748b) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}
.catalog-product-view .box-tocart .field.qty .label > span {
    font-weight: 700;
}
.catalog-product-view .box-tocart .field.qty .control {
    display: flex;
    align-items: center;
    border: 1px solid #000;
    border-radius: 0;
    overflow: hidden;
    height: 44px;
    width: auto;
    background: var(--bg-card, #fff);
}
/* Legacy qty input block removed 2026-07-22 — was setting width 60px !important
   + height 42px !important + border: none !important, making input shorter
   than the 52px stepper buttons and killing internal border dividers.
   Qty input now sized via pdp-buy-pane.css v5 rule at 52px matching stepper. */
.catalog-product-view .box-tocart .actions {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0;
}
/* NOTE — original v3 ATC styles removed. Buy-pane v5 uses
   `#product-addtocart-button` ID selector for sizing/color (defined later
   in file). Older `!important` here was blocking the ID rule. */

/* Secondary actions */
.catalog-product-view .product-addto-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 20px;
}
.catalog-product-view .product-addto-links .action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--ss-ink-2);
    padding: 7px 14px;
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-r);
    text-decoration: none;
    transition: all .12s;
    background: var(--bg-card);
}
.catalog-product-view .product-addto-links .action:hover {
    border-color: var(--ss-blue);
    color: var(--ss-blue);
    background: var(--accent-soft);
}

/* Short description */
.catalog-product-view .product.attribute.overview {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ss-border);
}
.catalog-product-view .product.attribute.overview .value {
    font-size: 1.4rem;
    line-height: 1.7;
    color: var(--ss-ink-2);
}

/* Product tabs
   DOM alternates: title, content, title, content...
   Fix: flexbox + order pulls all titles to row 1, all content to row 2.
   Visibility controlled by .active class (set by Magento's tabs JS widget).
*/
.catalog-product-view .product.info.detailed {
    margin-top: 40px;
    width: 100%;
    flex: 0 0 100%;
}
/* Blank theme uses float-based tab layout — display:flex needs !important to override */
.catalog-product-view .product.data.items {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0;
    padding: 0;
}
/* Remove Blank's float-based clearfix — not needed with flex */
.catalog-product-view .product.data.items::before,
.catalog-product-view .product.data.items::after { display: none !important; }

/* All tab titles → row 1 */
.catalog-product-view .product.data.items > .item.title {
    order: 1;
    float: none !important;
    flex: 0 0 auto;
    margin: 0 4px 0 0;
    display: block;
}
.catalog-product-view .product.data.items > .item.title > .switch {
    display: block;
    height: auto;
    line-height: 1.5;
    padding: 8px 18px;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ss-ink-2);
    border: 1px solid var(--ss-border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    text-decoration: none;
    background: var(--ss-surface);
    cursor: pointer;
    transition: color .12s, background .12s;
}
.catalog-product-view .product.data.items > .item.title > .switch:hover {
    color: var(--ss-blue);
    background: var(--accent-soft);
    text-decoration: none;
}
.catalog-product-view .product.data.items > .item.title.active > .switch {
    background: var(--bg-card);
    color: var(--ss-blue);
    border-bottom-color: var(--bg-card);
}

/* All content panels → row 2. JS widget handles display show/hide via inline styles. */
.catalog-product-view .product.data.items > .item.content {
    order: 2;
    margin: 0;
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ss-border);
    border-radius: 0 6px 6px 6px;
    padding: 28px 32px;
    background: var(--bg-card);
}
.catalog-product-view .product.data.items > .item.content .value,
.catalog-product-view .product.data.items > .item.content p {
    font-size: 1.4rem;
    line-height: 1.75;
    color: var(--ss-ink-2);
    max-width: 760px;
}

/* ── Configurable options & swatches ─────────────────────────────────────── */

/* Wrapper */
.catalog-product-view .rwc-swatch-wrapper {
    margin-bottom: 20px;
}

/* Each attribute group (e.g. "Size") */
.catalog-product-view .swatch-attribute {
    margin-bottom: 18px;
}

/* Attribute label row */
.catalog-product-view .swatch-attribute-label {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ss-ink);
    display: inline-block;
    margin-bottom: 4px;
}
.catalog-product-view .swatch-attribute-selected-option {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--ss-ink-2);
    margin-left: 6px;
}
.catalog-product-view .swatch-attribute-selected-option::before {
    content: ': ';
}

/* Options row */
.catalog-product-view .swatch-attribute-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}

/* Individual text swatch (size label like XL, 10", etc.) */
.catalog-product-view .swatch-option.text {
    min-width: 48px;
    height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ss-ink);
    background: var(--bg-card);
    border: 1.5px solid var(--ss-border);
    border-radius: var(--ss-r);
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
    user-select: none;
    line-height: 1;
    box-shadow: none;
}
.catalog-product-view .swatch-option.text:hover {
    border-color: var(--ss-blue);
    color: var(--ss-blue);
    background: var(--accent-soft);
}
.catalog-product-view .swatch-option.text.selected {
    border-color: var(--ss-blue);
    background: var(--ss-blue);
    color: var(--bg-card);
}
.catalog-product-view .swatch-option.text.disabled {
    opacity: .4;
    cursor: not-allowed;
    border-style: dashed;
}

/* Color swatch */
.catalog-product-view .swatch-option.color {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--ss-border);
    cursor: pointer;
    transition: transform .12s, border-color .12s, box-shadow .12s;
    box-shadow: none;
}
.catalog-product-view .swatch-option.color:hover {
    transform: scale(1.12);
    border-color: var(--ss-blue);
}
.catalog-product-view .swatch-option.color.selected {
    border-color: var(--ss-blue);
    box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--ss-blue);
}
.catalog-product-view .swatch-option.color.disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* Select dropdown fallback (non-swatch attributes) */
.catalog-product-view .field.configurable {
    margin-bottom: 18px;
}
.catalog-product-view .field.configurable > .label {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ss-ink);
    margin-bottom: 8px;
}
/* Select element — Blank sets height/padding on selects globally */
.catalog-product-view select.super-attribute-select {
    height: 42px !important;
    padding: 0 36px 0 12px !important;
    font-size: 1.4rem;
    min-width: 200px;
    width: auto;
    max-width: 100%;
    cursor: pointer;
    background-color: var(--bg-card);
    border: 1.5px solid var(--ss-border);
    border-radius: var(--ss-r);
}
.catalog-product-view select.super-attribute-select:focus {
    border-color: var(--ss-blue);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}

/* Swatch tooltip */
.catalog-product-view .swatch-option-tooltip {
    background: var(--ss-ink);
    color: var(--bg-card);
    border-radius: 6px;
    font-size: 1.2rem;
    padding: 6px 10px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.catalog-product-view .swatch-option-tooltip .title {
    color: var(--bg-card);
}

/* ── Layered nav sidebar swatches — compact to fit inside overflow:hidden ── */
.sidebar .swatch-option.text {
    min-width: 28px;
    height: 26px;
    padding: 0 6px;
    font-size: 1.1rem;
    line-height: 1;
    border-radius: 4px;
}
.sidebar .swatch-attribute-options {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-bottom: 8px;
}

/* ── Listing page swatches ───────────────────────────────────────────────── */
.products-grid .swatch-option.text,
.products-list .swatch-option.text {
    min-width: 32px;
    height: 28px;
    padding: 0 8px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 4px;
    border: 1.5px solid var(--ss-border);
    color: var(--ss-ink-2);
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color .12s, color .12s;
}
.products-grid .swatch-option.text:hover,
.products-list .swatch-option.text:hover {
    border-color: var(--ss-blue);
    color: var(--ss-blue);
}
.products-grid .swatch-option.text.selected,
.products-list .swatch-option.text.selected {
    border-color: var(--ss-blue);
    background: var(--ss-blue);
    color: var(--bg-card);
}
.products-grid .swatch-attribute-options,
.products-list .swatch-attribute-options {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

/* Additional attributes table */
.catalog-product-view .additional-attributes { width: 100%; border-collapse: collapse; font-size: 1.35rem; }
.catalog-product-view .additional-attributes th,
.catalog-product-view .additional-attributes td { padding: 10px 14px; border-bottom: 1px solid var(--ss-border); text-align: left; }
.catalog-product-view .additional-attributes th { font-weight: 600; color: var(--ss-ink-2); width: 220px; background: var(--ss-surface); }
.catalog-product-view .additional-attributes td { color: var(--ss-ink); }
.catalog-product-view .additional-attributes tr:last-child th,
.catalog-product-view .additional-attributes tr:last-child td { border-bottom: none; }

/* Mobile */
@media (max-width: 767px) {
    /* Fotorama inline styles require !important to override in mobile */
    .catalog-product-view .column.main {
        flex-direction: column !important;
        flex-wrap:      nowrap;
        gap:            12px;
        align-items:    stretch;
    }
    .catalog-product-view .product.media      { flex: 0 0 auto; width: 100%; }
    .catalog-product-view .product-info-main  { flex: 1 1 auto; width: 100%; }

    /* Compact gallery — fotorama inline styles need !important */
    .catalog-product-view .fotorama__stage { max-height: 200px !important; height: 200px !important; }
    .catalog-product-view .gallery-placeholder { border-radius: 8px; }
    .catalog-product-view .gallery-placeholder__image { max-height: 200px !important; }
    .catalog-product-view .fotorama__img { max-height: 200px !important; }

    /* ── Typography ─────────────────────────────────────────────── */
    .catalog-product-view .page-title .base     { font-size: 1.8rem; }
    .catalog-product-view .product-info-price .price-box .price { font-size: 2.2rem; }
    .catalog-product-view .product-info-price .old-price .price  { font-size: 1.4rem; }

    /* ── Spacing: price section ──────────────────────────────────── */
    .catalog-product-view .product-info-price {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }
    .catalog-product-view .product-info-stock-sku { gap: 10px; margin: 4px 0 10px; }
    .catalog-product-view .product-reviews-summary { margin-bottom: 4px; }

    /* ── Swatch options ──────────────────────────────────────────── */
    .catalog-product-view .swatch-attribute-options { gap: 6px; }
    .catalog-product-view .swatch-option {
        padding:   5px 10px;
        font-size: 1.2rem;
        min-width: 38px;
    }
    .catalog-product-view .product-options-wrapper { margin-bottom: 12px; }
    .catalog-product-view .product-options-wrapper .fieldset > .field { margin-bottom: 10px; }

    /* ── Add to cart ─────────────────────────────────────────────── */
    .catalog-product-view .box-tocart {
        flex-direction: column;
        align-items:    stretch;
        gap:            8px;
        margin-bottom:  12px;
    }
    .catalog-product-view .box-tocart .actions { padding-top: 0; }
    .catalog-product-view .box-tocart .action.tocart {
        height:    42px !important;
        font-size: 1.4rem;
    }
    .catalog-product-view .box-tocart .field.qty { display: inline-block; }
    .catalog-product-view .box-tocart .field.qty .label { margin-bottom: 4px; }
    .catalog-product-view .box-tocart .field.qty .control { display: inline-flex; height: 40px; width: auto; }
    .catalog-product-view .box-tocart .input-text.qty {
        height: 38px !important;
        font-size: 1.4rem;
    }

    /* ── Short description ───────────────────────────────────────── */
    .catalog-product-view .product.attribute.overview {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }
    .catalog-product-view .product.attribute.overview .value { font-size: 1.3rem; }

    /* ── Secondary actions ───────────────────────────────────────── */
    .catalog-product-view .product-addto-links { margin-bottom: 12px; }
    .catalog-product-view .product-addto-links .action { font-size: 1.1rem; padding: 6px 12px; }

    /* ── Tabs ────────────────────────────────────────────────────── */
    .catalog-product-view .product.info.detailed {
        margin-top: 20px;
        /* Override desktop flex:0 0 100% — on mobile column.main is
           flex-direction:column so that basis would consume the entire
           column height and push the next sibling (related products)
           to the bottom of the page. */
        flex: 0 0 auto;
    }
}

/* ── Fotorama fullscreen overrides ──────────────────────────────────────────
   body.catalog-product-view persists in fullscreen, so the 460px/200px stage
   rules above apply via inheritance. These rules undo them for fullscreen mode.
   Fotorama inline styles always require !important to override. */
.fotorama--fullscreen .fotorama__stage {
    max-height: 100vh !important;
    height: 100vh !important;
}
.fotorama--fullscreen .fotorama__img {
    max-height: 100vh !important;
}
/* No !important on full image — magnify.js must control width/height via inline styles for zoom to work */
.fotorama--fullscreen .fotorama__img--full {
    max-width: 100%;
    max-height: 100vh;
}
@media (max-width: 767px) {
    .fotorama--fullscreen .fotorama__stage {
        max-height: 100vh !important;
        height: 100vh !important;
    }
    .fotorama--fullscreen .fotorama__img {
        max-height: 100vh !important;
    }
    .fotorama--fullscreen .fotorama__img--full {
        max-width: 100%;
        max-height: 100vh;
    }
}

/* =============================================================
   Tier prices (solo seller PDP) — rwc-tier-prices
   Blue border + blue header bar; monospace cells.
   Originally lived only in pub/static (manual edit, never in source);
   re-added to source so static-content:deploy -f never strips it again.
   ============================================================= */
.product-info-main .rwc-tier-prices {
    margin: 16px 0;
    border: 1px solid var(--ss-blue);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-card);
}
.product-info-main .rwc-tier-prices__label {
    background: var(--ss-blue);
    color: var(--bg-card);
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .02em;
    padding: 8px 12px;
}
.product-info-main .rwc-tier-prices__table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ss-mono);
    font-size: 13px;
}
.product-info-main .rwc-tier-prices__table th {
    text-align: left;
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    color: var(--ss-ink-3);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .04em;
    padding: 6px 12px;
    background: var(--bg-card-dim);
    border-bottom: 1px solid var(--border-card);
}
.product-info-main .rwc-tier-prices__table td {
    padding: 6px 12px;
    color: var(--ss-ink);
    border-bottom: 1px solid var(--border-divider);
}
.product-info-main .rwc-tier-prices__table tr:last-child td {
    border-bottom: none;
}
.product-info-main .rwc-tier-prices__save {
    color: var(--ss-green, var(--success));
    font-weight: 700;
    font-size: 12px;
}

/* =============================================================
   AMAZON-STYLE SELLER BADGE + BRAND ROW
   Renders inside .product-info-main .price-box (from sold_by.phtml)
   Structure:
     <div style="...brand..."> (inline-styled — override with specificity)
     <div class="rwc-mp-sold-by">
        <span class="rwc-mp-sold-by__label">Sold by:</span>
        <a   class="rwc-mp-sold-by__name">Vendor Name</a>
        <span class="rwc-mp-sold-by__badge">Direct | ✓ Verified Seller</span>
        <span class="rwc-mp-sold-by__more">N sellers — best price shown</span>
     </div>
   ============================================================= */

/* Brand row — sits BELOW the sold-by card, subtle one-line with clickable name */
.product-info-main .rwc-mp-brand {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 8px 0 12px;
    padding: 0 4px;
    font-size: 13px;
    line-height: 1.4;
}
.product-info-main .rwc-mp-brand__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #64748b);
}
.product-info-main .rwc-mp-brand__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: color .15s ease;
}
.product-info-main .rwc-mp-brand__name:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}
/* Placeholder — greyed em-dash when no manufacturer set */
.product-info-main .rwc-mp-brand__name--placeholder {
    color: var(--text-faint, #94a3b8);
    font-weight: 500;
}

/* =============================================================
   SOLD-BY — compact one-liner ABOVE the product title
   "Sold by [Vendor Name]" — small caps label + accent-colored name
   JS relocates to be first child of product-info-main.
   ============================================================= */
.product-info-main .rwc-mp-sold-by {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 6px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: static;
    line-height: 1.4;
}
.product-info-main .rwc-mp-sold-by::before {
    display: none !important;
    content: none !important;
}
.product-info-main .rwc-mp-sold-by__label {
    font-family: var(--font-sans, sans-serif);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.3;
}
.product-info-main .rwc-mp-sold-by__name {
    font-family: var(--font-sans, sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent) !important;
    text-decoration: none !important;
    letter-spacing: -0.005em;
    line-height: 1.3;
    transition: color .15s ease;
}
.product-info-main .rwc-mp-sold-by__name--store {
    color: var(--text-primary, #0f172a) !important;
}
.product-info-main a.rwc-mp-sold-by__name:hover {
    color: var(--accent-hover) !important;
    text-decoration: underline !important;
}
/* Hide the avatar element in case old CSS/JS somehow renders it */
.product-info-main .rwc-mp-sold-by__avatar,
.product-info-main .rwc-mp-sold-by__meta {
    display: contents;
}

/* "N sellers — best shown" — small outlined chip below the row */
.product-info-main .rwc-mp-sold-by__more {
    grid-column: 1 / -1;
    justify-self: start;
    font-family: var(--font-sans, sans-serif);
    font-size: 11px;
    font-weight: 500;
    color: var(--accent);
    text-decoration: none;
    padding: 4px 8px;
    border: 1px solid var(--accent-border, rgba(59, 130, 246, .30));
    border-radius: 6px;
    background: transparent;
    transition: background .15s ease, border-color .15s ease;
}
.product-info-main .rwc-mp-sold-by__more:hover {
    background: var(--accent-soft, rgba(59, 130, 246, .06));
    border-color: var(--accent);
    color: var(--accent-hover);
    text-decoration: none;
}

/* Hide legacy verified/direct pill wherever it still renders */
.product-info-main .rwc-mp-sold-by__badge {
    display: none !important;
}
/* =============================================================
   BUY CARD META STRIP — B2B monospace spec-strip
   All meta (brand, stock, MPN, reviews) render inline with mono font,
   small caps labels, middle-dot separators. No pills, no color noise.
   Single line where possible; wraps when narrow.
   ============================================================= */

/* BRAND + STOCK/MPN grouped into ONE bordered container.
   Brand = top half (rounded top), stock+MPN = bottom half (rounded bottom).
   No borders between them so they read as one card. */

/* BRAND — top of the group */
.product-info-main .rwc-mp-brand {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
    background: var(--bg-card, #ffffff) !important;
    border: 1px solid var(--border-card, #e2e8f0) !important;
    border-bottom: none !important;
    border-radius: 6px 6px 0 0 !important;
    font-family: var(--font-mono, 'JetBrains Mono', 'SF Mono', Menlo, monospace) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    white-space: nowrap;
}

/* MPN + SSID row — bottom of the meta card. Stock is hidden here (moved
   elsewhere per Tony's request; placement TBD). SSID is JS-injected as a
   sibling of MPN inside .product-info-stock-sku by the procurement block. */
.product-info-main .product-info-stock-sku {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline !important;
    gap: 0 !important;
    margin: 0 0 12px !important;
    padding: 8px 12px !important;
    background: var(--bg-card, #ffffff) !important;
    border: 1px solid var(--border-card, #e2e8f0) !important;
    border-top: 1px dashed var(--border-divider, rgba(15, 23, 42, .08)) !important;
    border-radius: 0 0 6px 6px !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
}

/* HIDE .stock ONLY while it's still inside .product-info-stock-sku (before
   the procurement.phtml JS relocates it into .price-box). Once relocated
   (adds .ss-stock-relocated class), the badge shows in its new home. */
body.catalog-product-view .product-info-main .product-info-stock-sku > .stock:not(.ss-stock-relocated) {
    display: none !important;
}

/* SSID inline (JS-injected) — style matches .product.attribute.sku (MPN) */
.product-info-main .product-info-stock-sku .product.attribute.ssid {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    font-family: var(--font-mono, monospace) !important;
    line-height: 1.5 !important;
    white-space: nowrap;
}
.product-info-main .product-info-stock-sku .product.attribute.ssid > .type {
    font-family: var(--font-sans, sans-serif) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--text-muted, #64748b) !important;
    margin: 0 !important;
}
.product-info-main .product-info-stock-sku .product.attribute.ssid > .value {
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-primary, #0f172a) !important;
    letter-spacing: 0.01em;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Middle-dot separator BEFORE SSID (when it follows MPN) */
.product-info-main .product-info-stock-sku .product.attribute.sku + .product.attribute.ssid::before {
    content: "\00B7" !important;
    color: var(--text-faint, #cbd5e1) !important;
    margin: 0 8px !important;
    font-weight: 700 !important;
    display: inline !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Legacy .rwc-ssid-row block from procurement — now hidden, template no longer emits it */
.product-info-main .rwc-ssid-row {
    display: none !important;
}
.product-info-main .product-info-stock-sku .stock,
.product-info-main .product-info-stock-sku .product.attribute.sku {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--font-mono, monospace) !important;
    line-height: 1.5 !important;
    white-space: nowrap;
}

/* Hide the redundant "Only X left" element that Magento injects between
   .stock and .sku on configurable PDPs — it's a JS template placeholder
   that duplicates stock info and breaks our layout. */
.product-info-main .product-info-stock-sku .availability.only.configurable-variation-qty {
    display: none !important;
}

/* Middle-dot separator BEFORE SSID only (MPN is always visible first,
   SSID is JS-injected as its sibling). Explicit target so hidden .stock
   in the DOM doesn't cause a leading dot. */
.product-info-main .product-info-stock-sku .product.attribute.ssid::before {
    content: "\00B7" !important;
    color: var(--text-faint, #cbd5e1) !important;
    margin: 0 8px !important;
    font-weight: 700 !important;
    display: inline !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Labels (BRAND / MPN / etc.) — small caps, muted */
.product-info-main .rwc-mp-brand__label,
.product-info-main .product-info-stock-sku .stock > .label,
.product-info-main .product-info-stock-sku .product.attribute.sku > .type {
    font-family: var(--font-sans, sans-serif) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--text-muted, #64748b) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    overflow: visible !important;
}

/* Values — monospace, bold, primary text color */
.product-info-main .rwc-mp-brand__name,
.product-info-main .product-info-stock-sku .product.attribute.sku > .value {
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--text-primary, #0f172a) !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    word-break: normal;
    white-space: nowrap;
}
/* Brand link — accent color to signal clickable */
.product-info-main .rwc-mp-brand__name:not(.rwc-mp-brand__name--placeholder) {
    color: var(--accent) !important;
}
.product-info-main .rwc-mp-brand__name:hover {
    color: var(--accent-hover) !important;
    text-decoration: underline !important;
}
.product-info-main .rwc-mp-brand__name--placeholder {
    color: var(--text-faint, #94a3b8) !important;
    font-weight: 500 !important;
}

/* Stock value — coloured text only (no bg), tight */
.product-info-main .product-info-stock-sku .stock.available > span,
.product-info-main .product-info-stock-sku .stock.available > .availability {
    font-family: var(--font-mono, monospace) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #059669 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    text-indent: 0 !important;
    display: inline !important;
    width: auto !important;
    white-space: nowrap;
}
.product-info-main .product-info-stock-sku .stock.available::before {
    content: "\2713";  /* ✓ */
    color: #059669;
    font-weight: 700;
    margin-right: 3px;
    font-family: var(--font-sans, sans-serif);
}
.product-info-main .product-info-stock-sku .stock.unavailable > span,
.product-info-main .product-info-stock-sku .stock.unavailable > .availability {
    font-family: var(--font-mono, monospace) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #dc2626 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    display: inline !important;
    white-space: nowrap;
}
.product-info-main .product-info-stock-sku .stock.unavailable::before {
    content: "\2715";  /* ✕ */
    color: #dc2626;
    font-weight: 700;
    margin-right: 3px;
    font-family: var(--font-sans, sans-serif);
}
/* Hide the redundant "Availability:" label chunk that Blank inserts */
.product-info-main .product-info-stock-sku .stock > .label {
    display: none !important;
}

/* Reviews strip — small, mono-ish */
.product-info-main .product-reviews-summary {
    display: block !important;
    margin: 4px 0 10px !important;
    padding-top: 4px !important;
    border-top: 1px dashed var(--border-divider, rgba(15, 23, 42, .08)) !important;
    font-size: 11px !important;
}
.product-info-main .product-reviews-summary::before {
    content: "";
    display: none;
}
.product-info-main .product-reviews-summary .rating-summary,
.product-info-main .product-reviews-summary .reviews-actions,
.product-info-main .product-reviews-summary .reviews-actions > .action.view,
.product-info-main .product-reviews-summary .reviews-actions > .action.add {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1.4;
}
.product-info-main .product-reviews-summary .reviews-actions > .action.add,
.product-info-main .product-reviews-summary .reviews-actions > .action.view {
    color: var(--accent) !important;
    text-decoration: none !important;
    font-weight: 500;
    font-family: var(--font-sans, sans-serif);
}
.product-info-main .product-reviews-summary .reviews-actions > .action.add:hover,
.product-info-main .product-reviews-summary .reviews-actions > .action.view:hover {
    color: var(--accent-hover) !important;
    text-decoration: underline !important;
}
.product-info-main .product-reviews-summary.empty .reviews-actions > .action.add {
    font-style: italic;
    font-weight: 400;
    color: var(--text-muted, #64748b) !important;
}

/* =============================================================
   HIDE VENDOR OFFER PANEL — LEGACY suppression (v2 build 2026-07)
   Original intent: hide vendor offer list until compact "N other
   sellers" pattern was built. Now REPLACED by the Amazon-style
   always-visible slider (2026-07-27) — panels marked with the
   .rwc-op--always class opt out of this hide.
   ============================================================= */
.rwc-op:not(.rwc-op--always):not(.rwc-op--modal),
#rwc-offer-panel:not(.rwc-op--always):not(.rwc-op--modal),
.product-info-main .rwc-op:not(.rwc-op--always):not(.rwc-op--modal) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =============================================================
   BUY PANE ACCORDION (MOCKUP)
   Amazon/Grainger-style collapsible sections at the bottom of the
   buy pane. Uses native <details>/<summary> — no JS needed.
   ============================================================= */
/* Container — vertical stack with small gap between items so each
   reads as an independently clickable card */
.ss-buy-accordion {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 16px 0 0;
}

/* Accordion item — flat, transparent, no border, no lines between items.
   Was originally styled as a discrete rounded white card; v5 buy-pane
   flattened this — the grey buy-card bg now shows through. */
.ss-buy-accordion__item {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: hidden;
    transition: background-color .15s ease;
}
.ss-buy-accordion__item:hover {
    background: transparent;
    box-shadow: none;
}
.ss-buy-accordion__item[open] {
    background: transparent;
    box-shadow: none;
}

/* Summary row — 4px accent left-stripe grows on hover/open, "+" badge on right */
.ss-buy-accordion__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 12px 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-family: var(--font-sans, sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    background: transparent;
    border-left: 3px solid transparent;
    transition: background .15s ease, border-left-color .15s ease;
}
.ss-buy-accordion__summary::-webkit-details-marker { display: none; }
.ss-buy-accordion__summary::marker              { display: none; }
.ss-buy-accordion__summary:hover {
    background: var(--accent-soft, rgba(59, 130, 246, .04));
    border-left-color: var(--accent-border, rgba(59, 130, 246, .38));
}
.ss-buy-accordion__item[open] .ss-buy-accordion__summary {
    background: var(--accent-soft, rgba(59, 130, 246, .06));
    border-left-color: var(--accent);
    color: var(--accent);
}
.ss-buy-accordion__item[open] .ss-buy-accordion__icon {
    background-color: var(--accent);
}

/* Icon slot — leading, colored by accent, small SVG mask */
.ss-buy-accordion__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: var(--accent);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.ss-buy-accordion__icon--tag {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1H2zm4 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1H2zm4 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/></svg>");
}
.ss-buy-accordion__icon--truck {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M0 3.5A1.5 1.5 0 0 1 1.5 2h9A1.5 1.5 0 0 1 12 3.5V5h1.02a1.5 1.5 0 0 1 1.17.563l1.481 1.85a1.5 1.5 0 0 1 .329.938V10.5a1.5 1.5 0 0 1-1.5 1.5H14a2 2 0 1 1-4 0H5a2 2 0 1 1-3.998-.085A1.5 1.5 0 0 1 0 10.5v-7zm1.294 7.456A1.999 1.999 0 0 1 4.732 11h5.536a2.01 2.01 0 0 1 .732-.732V3.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .294.456zM12 10a2 2 0 0 1 1.732 1h.768a.5.5 0 0 0 .5-.5V8.35a.5.5 0 0 0-.11-.312l-1.48-1.85A.5.5 0 0 0 13.02 6H12v4zm-9 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm9 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M0 3.5A1.5 1.5 0 0 1 1.5 2h9A1.5 1.5 0 0 1 12 3.5V5h1.02a1.5 1.5 0 0 1 1.17.563l1.481 1.85a1.5 1.5 0 0 1 .329.938V10.5a1.5 1.5 0 0 1-1.5 1.5H14a2 2 0 1 1-4 0H5a2 2 0 1 1-3.998-.085A1.5 1.5 0 0 1 0 10.5v-7zm1.294 7.456A1.999 1.999 0 0 1 4.732 11h5.536a2.01 2.01 0 0 1 .732-.732V3.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .294.456zM12 10a2 2 0 0 1 1.732 1h.768a.5.5 0 0 0 .5-.5V8.35a.5.5 0 0 0-.11-.312l-1.48-1.85A.5.5 0 0 0 13.02 6H12v4zm-9 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm9 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/></svg>");
}
.ss-buy-accordion__icon--return {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z'/><path d='M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z'/><path d='M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z'/></svg>");
}
.ss-buy-accordion__icon--document {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z'/></svg>");
}

/* Title — takes all remaining space */
.ss-buy-accordion__title {
    flex: 1 1 auto;
    min-width: 0;
}

/* Toggle button on the right — "+" that becomes "−" when open.
   Circular badge with accent border so it clearly reads as clickable. */
.ss-buy-accordion__chevron {
    position: relative;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    background: transparent !important;
    border: 1.5px solid var(--accent-border, rgba(59, 130, 246, .40));
    border-radius: 50%;
    transition: background-color .18s ease, border-color .18s ease, transform .2s ease;
    -webkit-mask: none !important;
            mask: none !important;
}
/* Horizontal line of "+" */
.ss-buy-accordion__chevron::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 4px;
    right: 4px;
    height: 1.5px;
    background: var(--accent);
    transform: translateY(-50%);
    transition: background .18s ease;
}
/* Vertical line of "+" (hidden when open → becomes "−") */
.ss-buy-accordion__chevron::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 4px;
    bottom: 4px;
    width: 1.5px;
    background: var(--accent);
    transform: translateX(-50%);
    transition: transform .2s ease, opacity .2s ease;
}
.ss-buy-accordion__item[open] .ss-buy-accordion__chevron {
    background-color: var(--accent) !important;
    border-color: var(--accent);
}
.ss-buy-accordion__item[open] .ss-buy-accordion__chevron::before {
    background: #fff;
}
.ss-buy-accordion__item[open] .ss-buy-accordion__chevron::after {
    opacity: 0;
    transform: translateX(-50%) rotate(90deg);
}
/* Hover state on chevron alone */
.ss-buy-accordion__summary:hover .ss-buy-accordion__chevron {
    border-color: var(--accent);
}

/* Body — opened content area */
.ss-buy-accordion__body {
    padding: 4px 8px 14px 36px;
    font-family: var(--font-sans, sans-serif);
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-primary, #0f172a);
}
.ss-buy-accordion__body p {
    margin: 0 0 8px;
}
.ss-buy-accordion__body p:last-child {
    margin-bottom: 0;
}
.ss-buy-accordion__body strong {
    font-family: var(--font-mono, monospace);
    font-weight: 600;
    letter-spacing: 0;
}

/* "Note" — small italic hint text */
.ss-accordion__note {
    font-size: 11px !important;
    color: var(--text-muted, #64748b);
    font-style: italic;
    margin-top: 8px !important;
}

/* Inline link inside accordion body — accent, no underline until hover */
.ss-accordion__link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}
.ss-accordion__link:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* =============================================================
   BUY ZONE — visually unify price + Add to Cart
   Everything meta (sold-by/brand/stock/MPN/reviews) sits INSIDE
   .product-info-price ABOVE the actual .price-box. So the price
   was reading as part of the meta group. Fix: strong divider
   above the price + tight coupling to the Add to Cart form.
   ============================================================= */

/* Strong divider ABOVE the price display — announces new section */
.product-info-main .product-info-price .price-box.price-final_price {
    margin-top: 16px !important;
    padding-top: 20px !important;
    border-top: 2px solid var(--border, #cbd5e1) !important;
}

/* HERO price — unified to mono/3.6rem to match the simple-product rule
   at line 250 above AND the mono-for-numbers design system used across
   cart / RFQ / PLP. Was previously font-sans/32px which only hit
   configurable products (they wrap the price in a .normal-price div),
   causing an inconsistent size + font mismatch vs simple products. */
.product-info-main .product-info-price .price-box > .normal-price .price,
.product-info-main .product-info-price .price-box > .special-price .price {
    font-family: var(--ss-mono, 'JetBrains Mono', Menlo, monospace) !important;
    font-size: 3.6rem !important;
    font-weight: 700 !important;
    color: var(--text-primary, #0f172a) !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
}

/* When on sale, the special price gets a red accent (deal price) */
.product-info-main .product-info-price .price-box .special-price .price {
    color: #dc2626 !important;
}

/* OLD price — struck through, small, muted */
.product-info-main .product-info-price .price-box .old-price .price {
    font-family: var(--font-sans, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-muted, #64748b) !important;
    text-decoration: line-through !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    margin-left: 6px;
}

/* Neutralize Luma inheritance: `.price-container > span { display: block; }`
   from vendor Magento CSS forces block layout on price-wrapper spans, which
   adds vertical space + causes the row to grow taller when old-price toggles
   into view. Force ONLY the outer wrappers + .price-wrapper (which holds the
   number) to inline-block — do NOT catch-all `> span` since that would fight
   the `.price-label { display:none }` rule via equal-specificity ordering
   and cause "As low as" / "Regular Price" labels to appear. */
.product-info-main .product-info-price .price-box .normal-price,
.product-info-main .product-info-price .price-box .old-price,
.product-info-main .product-info-price .price-box .normal-price .price-container,
.product-info-main .product-info-price .price-box .old-price .price-container,
.product-info-main .product-info-price .price-box .normal-price .price-wrapper,
.product-info-main .product-info-price .price-box .old-price .price-wrapper {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: baseline !important;
}
/* Keep price labels hidden (re-asserted after the inline-block rule above so
   nothing overrides it via specificity/order). */
.product-info-main .product-info-price .price-box .price-label {
    display: none !important;
}
/* Hide the "Regular Price:" label — the strike-through says it all */
.product-info-main .product-info-price .price-box .old-price .price-label,
.product-info-main .product-info-price .price-box .normal-price .price-label {
    display: none !important;
}

/* "Special Price:" label (rare, usually only for BC/screen-reader) — keep hidden */
.product-info-main .product-info-price .price-label {
    display: none !important;
}

/* Close the gap between price container and Add to Cart form */
.product-info-main .product-info-price {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* PRICE + ADD-TO-CART = ONE unified card. Top half is .price-box (rounded top),
   bottom half is .product-add-form (rounded bottom). Both share bg + left/right
   borders + horizontal padding. No seam visible between them because price has
   no border-bottom and form has no border-top — they meet flush. */
.product-info-main .product-info-price .price-box.price-final_price,
.product-info-main .product-add-form {
    background: var(--bg-card, #ffffff);
    padding-left: 14px !important;
    padding-right: 14px !important;
    border-left: 1px solid var(--border-card, #e2e8f0);
    border-right: 1px solid var(--border-card, #e2e8f0);
    margin: 0 !important;
}
.product-info-main .product-info-price .price-box.price-final_price {
    padding-top: 14px !important;
    padding-bottom: 10px !important;
    border-top: 1px solid var(--border-card, #e5e7eb) !important;  /* gray HR, was 2px accent green */
    border-radius: 0;                                              /* sharp, matches v5 aesthetic */
}
.product-info-main .product-add-form {
    padding-top: 10px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--border-card, #e2e8f0);
    border-radius: 0 0 8px 8px;
    margin-bottom: 16px !important;
}
/* .box-tocart is a CHILD of .product-add-form — do NOT give it its own frame */
.product-info-main .box-tocart {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/* Legacy .action.tocart block removed 2026-07-22 — was setting padding + font
   with !important, blocking the v5 buy-pane ID rule from styling ATC.
   ATC now fully handled by #product-addtocart-button in pdp-buy-pane.css. */

/* =============================================================
   SUBSCRIPTION WIDGET (Redwoodcore_Subscription)
   Module ships inline <style> in the phtml with dark-navy gradient +
   rounded corners. Overriding with !important to match v2 aesthetic:
   flat, white/tinted bg, accent color, matching the buy-pane look.
   ============================================================= */

.rwc-sub-widget {
    margin: 12px 0 !important;
    font-family: var(--font-sans, sans-serif) !important;
}

/* TOGGLE — flat rectangles, no rounded corners */
.rwc-sub-toggle {
    border: 1px solid var(--border-card, #e2e8f0) !important;
    border-radius: 0 !important;
    overflow: hidden;
    background: transparent !important;
}
.rwc-sub-toggle label {
    background: var(--bg-card, #fff) !important;
    color: var(--text-muted, #64748b) !important;
    border-right: 1px solid var(--border-card, #e2e8f0) !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: background .15s ease, color .15s ease !important;
}
.rwc-sub-toggle input[type=radio]:checked + label {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}
.rwc-sub-toggle label .rwc-sub-option-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}
.rwc-sub-toggle label .rwc-sub-option-sub {
    font-size: 11px !important;
    margin-top: 2px !important;
    opacity: .85 !important;
}
/* Kill the "Save 10%" pill inside the toggle — redundant with the one below */
.rwc-sub-toggle .rwc-sub-savings-badge {
    display: none !important;
}

/* DETAILS PANEL — was dark navy gradient; now white with accent border */
.rwc-sub-details {
    background: var(--bg-card, #fff) !important;
    border: 1px solid var(--accent-border, rgba(59, 130, 246, .30)) !important;
    border-top: 2px solid var(--accent) !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    color: var(--text-primary, #0f172a) !important;
    margin-top: -1px !important;   /* butts against the toggle border */
}
.rwc-sub-details-top {
    margin-bottom: 10px !important;
    align-items: center !important;
}

/* Price line — dark text, monospace price, subtle strikethrough */
.rwc-sub-details .rwc-sub-price-new {
    font-family: var(--font-sans, sans-serif) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--text-primary, #0f172a) !important;
    letter-spacing: -0.01em !important;
}
.rwc-sub-details .rwc-sub-price-was {
    color: var(--text-muted, #64748b) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}
.rwc-sub-details .rwc-sub-price-save {
    color: #059669 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* Savings badge in details panel — flat, matches other badges */
.rwc-sub-details .rwc-sub-savings-badge {
    background: rgba(5, 150, 105, 0.10) !important;
    color: #059669 !important;
    border: 1px solid rgba(5, 150, 105, .30) !important;
    border-radius: 0 !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

/* Frequency label — matches meta strip labels */
.rwc-sub-details .rwc-freq-label {
    font-family: var(--font-sans, sans-serif) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--text-muted, #64748b) !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    margin: 10px 0 6px !important;
}

/* Frequency chips — flat rectangles matching swatches */
.rwc-sub-details .rwc-freq-options {
    gap: 4px !important;
}
.rwc-sub-details .rwc-freq-btn {
    background: transparent !important;
    border: 1px solid var(--border-card, #e2e8f0) !important;
    color: var(--text-primary, #0f172a) !important;
    border-radius: 0 !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    transition: border-color .15s ease, background .15s ease, color .15s ease !important;
}
.rwc-sub-details .rwc-freq-btn:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: transparent !important;
}
.rwc-sub-details .rwc-freq-btn.selected {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

/* Perks (Cancel anytime / Skip / Free to manage) — muted, tighter */
.rwc-sub-details .rwc-sub-perks {
    margin-top: 10px !important;
    gap: 12px !important;
}
.rwc-sub-details .rwc-sub-perk {
    color: var(--text-muted, #64748b) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
}
.rwc-sub-details .rwc-sub-perk::before {
    color: #059669 !important;
}

/* Footer note — tiny italic */
.rwc-sub-details .rwc-sub-fulfillment-note {
    color: var(--text-muted, #64748b) !important;
    font-size: 11px !important;
    font-style: italic !important;
    margin-top: 8px !important;
}

/* =============================================================
   SECURE LINE — single-line trust cue directly under Add to Cart.
   Small muted text + accent lock icon. No borders, no bg.
   Icon technique matches accordion: mask-image + var(--accent).
   ============================================================= */
.ss-secure-line {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 8px 0 0 !important;
    padding: 0;
    font-family: var(--font-sans, sans-serif);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
}
.ss-secure-line__icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background-color: var(--accent);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}
.ss-secure-line__icon--lock {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/></svg>");
}
.ss-secure-line__sep {
    color: var(--text-faint, #cbd5e1);
    margin: 0 2px;
}

/* =============================================================
   STOCK BADGE — JS relocated into .price-box, right-aligned FLAT chip
   Price + `/ Each` stay glued together on left; stock pushed to right via
   margin-left:auto on the .stock element itself (no space-between so
   nothing gets scattered in the middle).
   ============================================================= */
.product-info-main .price-box.price-final_price {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
}
.product-info-main .price-box .stock.ss-stock-relocated {
    display: inline-flex !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    margin: 0 0 0 auto !important;   /* push to right */
    background: rgba(5, 150, 105, 0.10) !important;
    border: 1px solid rgba(5, 150, 105, 0.35) !important;
    border-radius: 0 !important;      /* flat corners */
    font-family: var(--font-sans, sans-serif) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #059669 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1.4 !important;
    white-space: nowrap;
    align-self: center;
}
/* Preserve out-of-stock red */
.product-info-main .price-box .stock.ss-stock-relocated.unavailable {
    background: rgba(220, 38, 38, 0.10) !important;
    border-color: rgba(220, 38, 38, 0.35) !important;
    color: #dc2626 !important;
}
/* Kill inner label */
.product-info-main .price-box .stock.ss-stock-relocated > .label {
    display: none !important;
}
/* ✓ / ✕ icon before the stock text */
.product-info-main .price-box .stock.ss-stock-relocated.available::before {
    content: "\2713";
    color: #059669;
    font-weight: 700;
    margin-right: 2px;
}
.product-info-main .price-box .stock.ss-stock-relocated.unavailable::before {
    content: "\2715";
    color: #dc2626;
    font-weight: 700;
    margin-right: 2px;
}
/* Kill the availability variation-qty placeholder (already handled elsewhere but scope-safety) */
.product-info-main .price-box .availability.only.configurable-variation-qty {
    display: none !important;
}

/* =============================================================
   REPORT LINK — JS relocated into .product-reviews-summary
   Renders inline with "Be the first to review". Muted, small,
   separated by a middle dot.
   ============================================================= */
.product-info-main .product-reviews-summary .rwc-report-trigger.ss-report-relocated {
    display: inline !important;
    font-family: var(--font-sans, sans-serif) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--text-muted, #64748b) !important;
    text-decoration: underline dotted !important;
    text-underline-offset: 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}
.product-info-main .product-reviews-summary .rwc-report-trigger.ss-report-relocated:hover {
    color: var(--accent) !important;
    text-decoration: underline !important;
}
/* Middle-dot separator BEFORE the report link.
   pointer-events: none makes the dot un-clickable so it doesn't feel
   like part of the link. */
.product-info-main .product-reviews-summary .reviews-actions .rwc-report-trigger.ss-report-relocated::before {
    content: "\00B7";
    color: var(--text-faint, #cbd5e1);
    margin: 0 6px;
    font-weight: 700;
    pointer-events: none;
    display: inline-block;
}

/* =============================================================
   SHORT DESCRIPTION (product.info.overview) — subtitle summary
   Rendered directly under the product title in the buy pane.
   ============================================================= */
.product-info-main .product.attribute.overview {
    margin: 0 0 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
.product-info-main .product.attribute.overview .type {
    display: none !important;   /* hide the "Overview" label */
}
.product-info-main .product.attribute.overview .value {
    font-family: var(--font-sans, sans-serif) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--text-muted, #64748b) !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.product-info-main .product.attribute.overview .value p {
    margin: 0 0 6px !important;
}
.product-info-main .product.attribute.overview .value p:last-child {
    margin-bottom: 0 !important;
}
.product-info-main .product.attribute.overview .value strong {
    color: var(--text-primary, #0f172a);
    font-weight: 600;
}
.product-info-main .product.attribute.overview .value a {
    color: var(--accent);
    text-decoration: none;
}
.product-info-main .product.attribute.overview .value a:hover {
    text-decoration: underline;
}

/* =============================================================
   RFQ (Request a Quote) — secondary CTA under Add to Cart.
   Flat outlined button in accent color. Vendor picker hidden when
   only 1 vendor available (template handles the conditional).
   ============================================================= */
.product-info-main .rwc-rfq {
    margin: 8px 0 16px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Vendor picker (only rendered when 2+ vendors) */
.product-info-main .rwc-rfq__vendors {
    padding: 8px 0;
    margin: 0 0 8px;
    border-top: 1px solid var(--border-divider, rgba(15, 23, 42, .08));
}
.product-info-main .rwc-rfq__vendors-label {
    font-family: var(--font-sans, sans-serif);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}
.product-info-main .rwc-rfq__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.product-info-main .rwc-rfq__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 4px 10px;
    border: 1px solid var(--border-card, #e2e8f0);
    border-radius: 0;
    background: #fff;
    font-family: var(--font-sans, sans-serif);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary, #0f172a);
    transition: border-color .15s ease, background .15s ease;
}
.product-info-main .rwc-rfq__chip:hover {
    border-color: var(--accent);
}
.product-info-main .rwc-rfq__chip:has(input:checked) {
    background: var(--accent-soft, rgba(59, 130, 246, .10));
    border-color: var(--accent);
    color: var(--accent);
}
.product-info-main .rwc-rfq__chip input {
    accent-color: var(--accent);
    width: 12px;
    height: 12px;
    margin: 0;
}

/* Request-a-Quote button — flat outlined secondary CTA */
.product-info-main .rwc-rfq__btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 9px 14px !important;
    min-height: 36px !important;
    background: #fff !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    border-radius: 0 !important;
    font-family: var(--font-sans, sans-serif) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background .15s ease, color .15s ease !important;
}
.product-info-main .rwc-rfq__btn:hover:not(:disabled) {
    background: var(--accent) !important;
    color: #fff !important;
}
.product-info-main .rwc-rfq__btn--busy,
.product-info-main .rwc-rfq__btn:disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
}
.product-info-main .rwc-rfq__btn svg {
    flex-shrink: 0;
}

/* Message (Added ✓ / error) */
.product-info-main .rwc-rfq__msg {
    display: none;
    margin-top: 6px;
    font-family: var(--font-sans, sans-serif);
    font-size: 12px;
    font-weight: 600;
}
.product-info-main .rwc-rfq__msg--visible {
    display: block;
}
.product-info-main .rwc-rfq__msg--success {
    color: #059669;
}
.product-info-main .rwc-rfq__msg--error {
    color: #dc2626;
}
.product-info-main .rwc-rfq__link {
    color: var(--accent) !important;
    text-decoration: underline;
    font-weight: 700;
}
.product-info-main .rwc-rfq__link:hover {
    color: var(--accent-hover) !important;
}

/* =============================================================
   PRODUCT DETAILS — LONG-DOC STACK (replaces horizontal tabs).
   All sections visible always. Each title becomes a big bold H2-style
   section header with a thin accent underline. Content flows below.
   No cards, no borders, no click needed — Stripe/Apple docs pattern.
   ============================================================= */
.product.info.detailed {
    padding: 0 !important;
    margin: 0 !important;
}
.product.info.detailed .product.data.items {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    counter-reset: section; /* powers the "01." "02." prefixes on section headers */
}
/* Kill the horizontal tab strip appearance */
.product.info.detailed .product.data.items::before,
.product.info.detailed .product.data.items::after {
    display: none !important;
}

/* Section header — editorial chapter-heading treatment.
   Syne display font + numbered prefix + segment underline in accent color.
   Non-clickable (behaves as heading, not tab). */
.product.info.detailed .product.data.items > .item.title {
    display: block !important;
    float: none !important;
    margin: 56px 0 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative;
}
.product.info.detailed .product.data.items > .item.title:first-of-type {
    margin-top: 0 !important;
}
/* Segment underline — 60px, thicker, accent color; replaces the old full-width 2px border */
.product.info.detailed .product.data.items > .item.title::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: var(--accent);
    margin-top: 14px;
    border-radius: 2px;
}
.product.info.detailed .product.data.items > .item.title:hover {
    box-shadow: none !important;
}
.product.info.detailed .product.data.items > .item.title > .switch {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-primary, #0f172a) !important;
    font-family: 'Syne', var(--font-sans, sans-serif) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    width: 100% !important;
    height: auto !important;
    box-shadow: none !important;
    cursor: default !important;
    pointer-events: none;   /* headers are non-clickable in long-doc mode */
}
/* Numbered chapter prefix — small monospace in accent color, sits inline before the title */
.product.info.detailed .product.data.items > .item.title > .switch::before {
    counter-increment: section;
    content: counter(section, decimal-leading-zero) ".";
    display: inline-block;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 15px;
    font-weight: 500;
    color: var(--accent);
    margin-right: 14px;
    letter-spacing: 0.03em;
    vertical-align: baseline;
    opacity: 0.85;
}

/* Content panel — always visible below the header */
.product.info.detailed .product.data.items > .item.content {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: none !important;
    float: none !important;
    box-shadow: none !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
}
.product.info.detailed .product.data.items > .item.content .value,
.product.info.detailed .product.data.items > .item.content .description,
.product.info.detailed .product.data.items > .item.content .product.attribute.description {
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--font-sans, sans-serif) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: var(--text-primary, #0f172a) !important;
}
.product.info.detailed .product.data.items > .item.content .value p,
.product.info.detailed .product.data.items > .item.content .description p {
    margin: 0 0 12px;
}
.product.info.detailed .product.data.items > .item.content .value ul,
.product.info.detailed .product.data.items > .item.content .description ul {
    margin: 0 0 12px;
    padding-left: 22px;
}
.product.info.detailed .product.data.items > .item.content .value h3,
.product.info.detailed .product.data.items > .item.content .description h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 20px 0 8px;
    color: var(--text-primary, #0f172a);
}

/* Neutralize Blank's mobile @media that stacks tabs already */
@media (max-width: 767px) {
    .product.info.detailed .product.data.items > .item.title,
    .product.info.detailed .product.data.items > .item.content {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .product.info.detailed .product.data.items > .item.title > .switch {
        font-size: 18px !important;
    }
}

/* ============================================================
   REVIEWS — modern card layout (v2 theme)
   Applies inside the "Reviews" tab (#reviews) and to the
   AJAX-loaded #customer-reviews block + #review-form block.
   ============================================================ */

/* --- Star size tuning — inherits gold/gray render from blank theme's
       icons-blank-theme font (base rule: .rating-summary .rating-result). --- */
.catalog-product-view #reviews .review-item .rating-result {
    width: 80px;
}
.catalog-product-view #reviews .review-item .rating-result::before,
.catalog-product-view #reviews .review-item .rating-result > span::before {
    font-size: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    letter-spacing: -6px !important;
}

/* --- List section wrapper --- */
.catalog-product-view #reviews {
    padding: 0;
}
.catalog-product-view #reviews .block.review-list {
    margin: 0 0 32px;
}

/* Section header: "Customer Reviews" title */
.catalog-product-view #reviews .block.review-list > .block-title {
    border: 0;
    padding: 0 0 12px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--ss-line, #e2e8f0);
}
.catalog-product-view #reviews .block.review-list > .block-title > strong {
    font-size: 20px;
    font-weight: 600;
    color: var(--ss-ink, #0f172a);
    letter-spacing: -0.01em;
}

/* --- Toolbar (pager + limiter) — hide when only 1 page fits --- */
.catalog-product-view #reviews .toolbar.review-toolbar {
    display: none;
}
.catalog-product-view #reviews .review-list .items.review-items + .toolbar.review-toolbar:not(:has(.pages)),
.catalog-product-view #reviews .review-list .items.review-items:only-of-type + .toolbar.review-toolbar {
    display: none;
}

/* --- Review card --- */
.catalog-product-view #reviews ol.items.review-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}
.catalog-product-view #reviews li.review-item {
    background: var(--ss-white, #ffffff);
    border: 1px solid var(--ss-border, #e2e8f0);
    border-radius: 12px;
    padding: 20px 22px;
    margin: 0;
    display: grid;
    gap: 10px;
}

/* Star row (overall) — position AT TOP, before title */
.catalog-product-view #reviews .review-item .review-ratings {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin: 0;
    max-width: 100%;
}
.catalog-product-view #reviews .review-item .review-ratings .rating-summary.item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}
.catalog-product-view #reviews .review-item .review-ratings .rating-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ss-ink-3, #94a3b8);
    padding: 0;
    margin: 0;
}
.catalog-product-view #reviews .review-item .review-ratings .rating-label > span:first-child {
    display: inline;
}

/* Title — bold, after ratings */
.catalog-product-view #reviews .review-item .review-title {
    order: 2;
    font-size: 15px;
    font-weight: 700;
    color: var(--ss-ink, #0f172a);
    margin: 0;
    letter-spacing: -0.005em;
}

/* Body + details wrapper */
.catalog-product-view #reviews .review-item .review-content-container {
    order: 3;
    display: grid;
    gap: 12px;
}
.catalog-product-view #reviews .review-item .review-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ss-ink, #334155);
    margin: 0;
}

/* Author + date row — inline chip pair, muted */
.catalog-product-view #reviews .review-item .review-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ss-line, #f1f5f9);
    margin: 0;
    font-size: 12px;
    color: var(--ss-ink-2, #64748b);
}
.catalog-product-view #reviews .review-item .review-details p {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.catalog-product-view #reviews .review-item .review-details .review-details-label {
    color: var(--ss-ink-3, #94a3b8);
}
.catalog-product-view #reviews .review-item .review-details .review-details-value {
    font-weight: 600;
    color: var(--ss-ink, #0f172a);
    font-family: inherit;
}
.catalog-product-view #reviews .review-item .review-details .review-date .review-details-value {
    font-family: var(--ss-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-weight: 500;
    color: var(--ss-ink-2, #64748b);
}
.catalog-product-view #reviews .review-item .review-details .review-author::after {
    content: '\00B7';
    color: var(--ss-ink-3, #cbd5e1);
    margin-left: 10px;
}

/* Avatar circle — CSS-only, first char of author name via ::before pseudo
   Renders BEFORE the author label via flex + order. */
.catalog-product-view #reviews .review-item .review-details .review-author {
    position: relative;
    padding-left: 32px;
}
.catalog-product-view #reviews .review-item .review-details .review-author::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ss-blue, #3b82f6), var(--ss-blue-dk, #1e40af));
    opacity: 0.9;
}

/* ============================================================
   WRITE YOUR OWN REVIEW — form card
   ============================================================ */

.catalog-product-view #reviews .block.review-add {
    background: var(--ss-white, #ffffff);
    border: 1px solid var(--ss-border, #e2e8f0);
    border-radius: 12px;
    padding: 24px;
    margin: 0;
}
.catalog-product-view #reviews .block.review-add > .block-title {
    border: 0;
    padding: 0 0 16px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--ss-line, #f1f5f9);
}
.catalog-product-view #reviews .block.review-add > .block-title > strong {
    font-size: 18px;
    font-weight: 600;
    color: var(--ss-ink, #0f172a);
    letter-spacing: -0.01em;
}

/* Legend */
.catalog-product-view #reviews .review-form .review-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}
.catalog-product-view #reviews .review-form .review-legend {
    display: block;
    padding: 0;
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--ss-ink-2, #64748b);
    letter-spacing: 0;
}
.catalog-product-view #reviews .review-form .review-legend span {
    display: inline;
    margin-right: 6px;
}
.catalog-product-view #reviews .review-form .review-legend strong {
    color: var(--ss-ink, #0f172a);
    font-weight: 600;
}

/* Ratings block — override blank's table layout + 4.8rem margin on .control */
.catalog-product-view #reviews .review-form .review-field-ratings {
    border: 0;
    padding: 0;
    margin: 0 0 20px;
}
/* Hide the native <legend> — browsers position it INSIDE the fieldset border,
   which lets it steal horizontal space from our flex row. Replace with a
   ::before pseudo-element on the fieldset for the "YOUR RATING" heading. */
.catalog-product-view #reviews .review-form .review-field-ratings > legend.label {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    clip: rect(0, 0, 0, 0);
}
.catalog-product-view #reviews .review-form .review-field-ratings {
    position: relative;
}
.catalog-product-view #reviews .review-form .review-field-ratings::before {
    content: 'YOUR RATING';
    display: block;
    padding: 0 0 10px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ss-ink-3, #94a3b8);
}
.catalog-product-view #reviews .review-form .review-field-ratings.required::before,
.catalog-product-view #reviews .review-form .review-field-ratings._required::before {
    content: 'YOUR RATING *';
}
[lang="fr"] .catalog-product-view #reviews .review-form .review-field-ratings::before {
    content: 'VOTRE NOTE';
}
[lang="fr"] .catalog-product-view #reviews .review-form .review-field-ratings.required::before,
[lang="fr"] .catalog-product-view #reviews .review-form .review-field-ratings._required::before {
    content: 'VOTRE NOTE *';
}

/* Outer .control wrapper between legend and .nested — force full-width block */
.catalog-product-view #reviews .review-form .review-field-ratings > .control {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    clear: both;
}
.catalog-product-view #reviews .review-form .review-field-ratings .nested,
.catalog-product-view #reviews .review-form #product-review-table {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px 28px;
    align-items: center;
}
.catalog-product-view #reviews .review-form .review-field-ratings .review-field-rating {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    width: auto !important;
}
.catalog-product-view #reviews .review-form .review-field-ratings .review-field-rating > .label {
    display: inline-block !important;
    font-size: 12px;
    font-weight: 500;
    color: var(--ss-ink-2, #64748b);
    padding: 0 !important;
    margin: 0;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.catalog-product-view #reviews .review-form .review-field-ratings .review-field-rating .control {
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle;
}

/* Kill Magento's stray <br> tags inside the fieldset — they add vertical air */
.catalog-product-view #reviews .review-form .review-fieldset > br,
.catalog-product-view #reviews .review-form .review-field-ratings > br {
    display: none;
}

/* Star inputs — inherit stacked-overlay mechanism from blank theme
   (.review-control-vote::before base + .rating-N labels with opacity toggle).
   Just tune size + spacing to match card scale. */
.catalog-product-view #reviews .review-form .review-control-vote {
    position: relative;
    height: 20px;
    width: 90px;
}
.catalog-product-view #reviews .review-form .review-control-vote::before,
.catalog-product-view #reviews .review-form .review-control-vote label::before {
    font-size: 18px !important;
    height: 20px !important;
    line-height: 20px !important;
    letter-spacing: -7px !important;
}

/* Force ratings fieldset to full width — sits ABOVE the text field row */
.catalog-product-view #reviews .review-form .review-field-ratings {
    display: block !important;
    width: 100% !important;
    clear: both;
}

/* Text fields */
.catalog-product-view #reviews .review-form .review-field-nickname,
.catalog-product-view #reviews .review-form .review-field-summary,
.catalog-product-view #reviews .review-form .review-field-text {
    margin: 0 0 14px;
    padding: 0;
}
.catalog-product-view #reviews .review-form .review-field-nickname > .label,
.catalog-product-view #reviews .review-form .review-field-summary > .label,
.catalog-product-view #reviews .review-form .review-field-text > .label {
    display: block !important;
    padding: 0 0 6px !important;
    margin: 0 !important;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ss-ink-2, #64748b);
    text-align: left;
    width: auto;
    float: none;
}
.catalog-product-view #reviews .review-form .review-field-nickname > .control,
.catalog-product-view #reviews .review-form .review-field-summary > .control,
.catalog-product-view #reviews .review-form .review-field-text > .control {
    display: block !important;
    width: 100%;
    padding: 0 !important;
    margin: 0;
    float: none;
}
.catalog-product-view #reviews .review-form input[type="text"],
.catalog-product-view #reviews .review-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ss-border, #cbd5e1);
    border-radius: 8px;
    background: var(--ss-white, #ffffff);
    font-size: 14px;
    color: var(--ss-ink, #0f172a);
    font-family: inherit;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    box-shadow: none;
}
.catalog-product-view #reviews .review-form input[type="text"]:focus,
.catalog-product-view #reviews .review-form textarea:focus {
    outline: none;
    border-color: var(--ss-blue, #3b82f6);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-blue, #3b82f6) 15%, transparent);
}
.catalog-product-view #reviews .review-form textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

/* Nickname + Summary on the same row (desktop) */
@media (min-width: 640px) {
    .catalog-product-view #reviews .review-form .review-field-nickname,
    .catalog-product-view #reviews .review-form .review-field-summary {
        display: inline-block;
        width: calc(50% - 8px);
        vertical-align: top;
    }
    .catalog-product-view #reviews .review-form .review-field-nickname {
        margin-right: 12px;
    }
}

/* Submit button + actions */
.catalog-product-view #reviews .review-form .actions-toolbar {
    margin-top: 8px;
    padding: 0;
}
.catalog-product-view #reviews .review-form .actions-toolbar .action.submit.primary {
    background: var(--ss-blue, #3b82f6);
    border-color: var(--ss-blue, #3b82f6);
    color: #fff;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
    box-shadow: none;
    text-shadow: none;
}
.catalog-product-view #reviews .review-form .actions-toolbar .action.submit.primary:hover {
    background: var(--ss-blue-dk, #1e40af);
    border-color: var(--ss-blue-dk, #1e40af);
}

/* Mobile tightening */
@media (max-width: 639px) {
    .catalog-product-view #reviews li.review-item {
        padding: 16px;
    }
    .catalog-product-view #reviews .review-form .review-field-rating {
        grid-template-columns: 70px 1fr;
    }
}

/* =============================================================
   RIGHT COLUMN TIER STRUCTURE (v2)
   Tier 1 → .ss-buy-card       primary decision surface
   Tier 2 → .ss-buy-accordion  info-panel card (dividers, not stacked cards)
   Tier 3 → .rwc-rcs           recommendations (see related-upsell.css)
   ============================================================= */

/* --- TIER 1: Buy pane card --- */
.product-info-main > .ss-buy-card {
    background: var(--ss-white, #fff);
    border: 1px solid var(--ss-border, #e2e8f0);
    border-top: 4px solid var(--accent);  /* accent-color signal that this is the primary decision surface */
    border-radius: 12px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
    margin: 0;
}
/* Reading order via flex `order` — override Magento core layout's after= hints
   that keep flipping form ahead of price in the DOM. */
.product-info-main > .ss-buy-card > .ss-cat-tag          { order: 0; }
.product-info-main > .ss-buy-card > .rwc-mp-sold-by      { order: 1; }
.product-info-main > .ss-buy-card > .page-title-wrapper  { order: 2; }
.product-info-main > .ss-buy-card > .overview            { order: 3; }  /* descriptor under title */
.product-info-main > .ss-buy-card > .product.attribute.overview { order: 3; }
.product-info-main > .ss-buy-card > .product-info-price  { order: 4; }
.product-info-main > .ss-buy-card > .price-tier          { order: 5; }
.product-info-main > .ss-buy-card > .product-add-form    { order: 6; }
.product-info-main > .ss-buy-card > .rwc-rfq             { order: 7; }
.product-info-main > .ss-buy-card > .rwc-savedlist       { order: 8; }
.product-info-main > .ss-buy-card > .ss-buy-footer       { order: 9; }
.product-info-main > .ss-buy-card > .product-social-links{ order: 10; }

/* Overview — SHOWN inside buy card as descriptor line under title.
   Styling handled by later v5 rule that gives it small gray descriptor look. */
.product-info-main > .ss-buy-card > .overview {
    display: block !important;
}
/* Reset stray margins on the first/last children so card padding is honest */
.product-info-main > .ss-buy-card > *:first-child { margin-top: 0 !important; }
.product-info-main > .ss-buy-card > *:last-child  { margin-bottom: 0 !important; }

/* --- TIER 2: Info-panel card (single card, dividers between items) --- */
.product-info-main > .ss-buy-accordion {
    background: var(--ss-white, #fff);
    border: 1px solid var(--ss-border, #e2e8f0);
    border-radius: 12px;
    margin: 16px 0 0;
    padding: 0;
    display: block;
    overflow: hidden;
    gap: 0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
/* Legacy accordion divider block removed 2026-07-22 — was drawing thin
   #dde4ec lines between items with higher specificity than the v5 rule.
   No lines between accordion items now (per user request). */
.product-info-main > .ss-buy-accordion .ss-buy-accordion__item:first-child:hover,
.product-info-main > .ss-buy-accordion .ss-buy-accordion__item:first-child[open] {
    border-top: none;
}
.product-info-main > .ss-buy-accordion .ss-buy-accordion__summary {
    background: transparent;
    border-left: 3px solid transparent;
    padding: 14px 16px;
}
.product-info-main > .ss-buy-accordion .ss-buy-accordion__item:hover .ss-buy-accordion__summary {
    background: var(--ss-surface, #f8fafc);
}
.product-info-main > .ss-buy-accordion .ss-buy-accordion__item[open] .ss-buy-accordion__summary {
    background: var(--ss-surface, #f8fafc);
    border-left-color: var(--accent);
}
.product-info-main > .ss-buy-accordion .ss-buy-accordion__body {
    padding: 4px 16px 16px 40px;
}

/* --- Bulk pricing tier table --- */
.ss-bulk-tiers {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 10px;
    font-size: 12px;
}
.ss-bulk-tiers thead th {
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ss-ink-3, #94a3b8);
    border-bottom: 1px solid var(--ss-line, #e2e8f0);
}
.ss-bulk-tiers tbody th,
.ss-bulk-tiers tbody td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid var(--ss-line, #f1f5f9);
    font-family: var(--ss-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 13px;
    color: var(--ss-ink, #0f172a);
}
.ss-bulk-tiers tbody th {
    font-weight: 700;
    letter-spacing: 0;
}
.ss-bulk-tiers tbody tr:last-child th,
.ss-bulk-tiers tbody tr:last-child td {
    border-bottom: none;
}
.ss-bulk-tiers__save {
    color: var(--ss-green, #10b981);
    font-weight: 600;
}

/* Accordion CTA — small outline button inside an accordion body (e.g. RFQ) */
.ss-accordion__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    margin-top: 10px;
    border: 1px solid var(--ss-border, #cbd5e1);
    border-radius: 0;
    background: transparent;
    color: var(--ss-ink, #0f172a);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    cursor: pointer;
    line-height: 1;
}
.ss-accordion__cta::after {
    content: "→";
    font-size: 13px;
    line-height: 1;
    transition: transform 0.12s ease;
}
.ss-accordion__cta:hover {
    background: var(--ss-blue, #3b82f6);
    border-color: var(--ss-blue, #3b82f6);
    color: #fff;
}
.ss-accordion__cta:hover::after {
    transform: translateX(3px);
}
.ss-accordion__cta:focus-visible {
    outline: 2px solid var(--ss-blue, #3b82f6);
    outline-offset: 2px;
}
/* RFQ variant — for future contextual coloring; identical for now */
.ss-accordion__cta--rfq { }

/* --- Shipping / delivery ETA list --- */
.ss-eta-list {
    display: grid;
    gap: 10px;
    margin: 0;
}
.ss-eta-list__row {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: baseline;
    gap: 12px;
    margin: 0;
}
.ss-eta-list__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ss-ink-3, #94a3b8);
    margin: 0;
}
.ss-eta-list__value {
    font-size: 13px;
    color: var(--ss-ink, #0f172a);
    line-height: 1.35;
    margin: 0;
    font-weight: 500;
}
.ss-eta-list__meta {
    display: block;
    font-size: 11px;
    color: var(--ss-ink-3, #94a3b8);
    margin-top: 2px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* ============================================================
   LEFT COLUMN — Section cards (long-doc stack)
   All tab title+content pairs become one visual card, matching
   the right column's Tier 1/2 card language (12px radius, 1px
   border, subtle shadow). Since our tabs JS force-opens every
   section, no interaction affordance is needed on titles.
   ============================================================ */

/* Tabs container: vertical stack of cards, tight gap between pairs */
.product.info.detailed .product.data.items {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

/* --- Title row = card top (heading + underline) --- */
.product.info.detailed .product.data.items > .item.title {
    background: var(--ss-white, #fff) !important;
    border: 1px solid var(--ss-border, #e2e8f0) !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 16px 22px 12px !important;
    margin: 20px 0 0 !important;
    position: relative;
    box-shadow: none;
}
.product.info.detailed .product.data.items > .item.title:first-of-type {
    margin-top: 0 !important;
}
.product.info.detailed .product.data.items > .item.title > .switch {
    display: block !important;
    padding: 0 !important;
    height: auto !important;
    background: transparent !important;
    color: var(--ss-ink, #0f172a) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: none !important;
    line-height: 1.2 !important;
    letter-spacing: -0.005em;
    text-transform: none;
    pointer-events: none;
}
.product.info.detailed .product.data.items > .item.title > .switch:hover,
.product.info.detailed .product.data.items > .item.title > .switch:focus,
.product.info.detailed .product.data.items > .item.title > .switch:visited {
    color: var(--ss-ink, #0f172a) !important;
    background: transparent !important;
}
/* Divider between heading and body (inside the card, respects padding) */
.product.info.detailed .product.data.items > .item.title::after {
    content: '';
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 0;
    height: 1px;
    background: var(--ss-line, #e2e8f0);
}

/* --- Content row = card bottom (body) --- */
.product.info.detailed .product.data.items > .item.content {
    background: var(--ss-white, #fff) !important;
    border: 1px solid var(--ss-border, #e2e8f0) !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    padding: 16px 22px 20px !important;
    margin: 0 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    display: block !important;
}

/* --- Reviews tab exception ---
   The block.review-add has its own card border from the reviews
   styling above. Since the outer .item.content now provides a
   card, drop the review-add's border and turn it into a
   flush subsection with a top divider. */
.catalog-product-view #reviews.data.item.content .block.review-add {
    border: none !important;
    padding: 20px 0 0 !important;
    margin: 20px 0 0 !important;
    border-top: 1px solid var(--ss-line, #e2e8f0) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* --- Compliance document list --- */
.ss-doc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0;
}
.ss-doc-list__item {
    border-bottom: 1px dashed var(--ss-line, #e2e8f0);
}
.ss-doc-list__item:last-child {
    border-bottom: none;
}
.ss-doc-list__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    text-decoration: none;
    color: var(--ss-ink, #0f172a);
    font-size: 13px;
    transition: color 0.12s ease;
}
.ss-doc-list__link:hover {
    color: var(--ss-blue, #3b82f6);
}
.ss-doc-list__title {
    font-weight: 500;
    flex: 1 1 auto;
}
.ss-doc-list__meta {
    font-family: var(--ss-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 11px;
    color: var(--ss-ink-3, #94a3b8);
    white-space: nowrap;
    letter-spacing: 0;
}

/* =============================================================
   STICKY COMPACT BUY BAR
   Appears at top of viewport (below the sticky header stack)
   when the main .product-info-main scrolls above the fold.
   JS: web/js/sticky-buy.js — uses IntersectionObserver.
   Hidden on mobile — mobile PDP gets a bottom-sticky bar.
   ============================================================= */
.ss-sticky-buy {
    position: fixed;
    top: 0; /* JS overrides at runtime to sit flush against the sticky header */
    left: 0;
    right: 0;
    z-index: 800; /* below header (900) so header always covers this */
    background: #1e293b; /* deep charcoal — pops off the warm/light page palette */
    color: #f8fafc;
    border-bottom: 3px solid var(--accent); /* thick accent bar reinforces "primary action zone" */
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18),
                0 2px 6px rgba(15, 23, 42, 0.10);
    transform: translateY(calc(-100% - 20px));
    opacity: 0;
    pointer-events: none;
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 200ms ease-out;
}
.ss-sticky-buy.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.ss-sticky-buy__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 24px;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 24px;
}
.ss-sticky-buy__thumb {
    width: 72px;
    height: 72px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.ss-sticky-buy__thumb:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.20);
}
.ss-sticky-buy__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.ss-sticky-buy__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ss-sticky-buy__name {
    font-family: 'Syne', var(--font-sans, sans-serif);
    font-size: 17px;
    font-weight: 700;
    color: #f8fafc;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ss-sticky-buy__submeta {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: #94a3b8;
    align-items: center;
    line-height: 1;
    margin-top: 2px;
}
.ss-sticky-buy__mpn {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
}
.ss-sticky-buy__mpn code {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12px;
    font-weight: 600;
    color: #f8fafc;
    background: none;
    padding: 0;
    letter-spacing: 0;
    text-transform: none;
}
.ss-sticky-buy__stock {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #34d399; /* brighter green — reads on dark bg */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
}
.ss-sticky-buy__stock::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}
.ss-sticky-buy__price {
    text-align: right;
    line-height: 1;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.ss-sticky-buy__price-current {
    font-family: var(--font-sans, sans-serif);
    font-size: 22px;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: -0.02em;
    line-height: 1;
}
.ss-sticky-buy__price-current--sale {
    color: #f87171; /* soft red — legible on dark bg */
}
.ss-sticky-buy__price-old {
    font-family: var(--font-sans, sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: line-through;
    line-height: 1;
}
.ss-sticky-buy__actions {
    display: flex;
    align-items: center;
}
.ss-sticky-buy__cta {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0 24px;
    height: 44px;
    min-width: 140px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: var(--shadow-card);
    transition: background-color 150ms ease,
                transform 150ms ease,
                box-shadow 150ms ease;
}
.ss-sticky-buy__cta:hover {
    background: var(--accent-hover, var(--accent));
    transform: translateY(-1px);
    box-shadow: var(--shadow-card-lift);
}
.ss-sticky-buy__cta:active {
    transform: translateY(0);
    box-shadow: var(--shadow-card);
}

/* Mobile — hidden. Mobile PDP will get a bottom-sticky bar instead
   (see project_mobile_app_like_architecture.md) */
@media (max-width: 768px) {
    .ss-sticky-buy { display: none !important; }
}

/* TEST rule per user request 2026-07-22 */
.ss-buy-accordion__item {
  border-bottom: 1px solid;
    border-bottom-color: currentcolor;
  border-color: #dfdfdf;
}

/* ═══════════════════════════════════════════════════════════════
   PDP Vendor Offer Slider (Amazon buy-box style)
   Slice 1: convert vertical row list into horizontal scroll-snap
   strip. Cards keep current interior layout — only wrapper changes.
   Template edit: rwc-op-strip wraps rwc-op-row + divider + store row
   inside #rwc-bb-full-panel (offer_panel.phtml override in v2).
   ─────────────────────────────────────────────────────────────── */

.rwc-op-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 2px 10px;
    margin: 0 -2px;
    /* Firefox thin scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
/* WebKit scrollbar */
.rwc-op-strip::-webkit-scrollbar { height: 8px; }
.rwc-op-strip::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.rwc-op-strip::-webkit-scrollbar-track { background: transparent; }

/* Cards: 3 visible on desktop with 2 * 12px gaps. Fixed flex-basis
   so cards keep their width regardless of parent grid. Override the
   inherited margin-bottom from the base .rwc-op-row rule. */
.rwc-op-strip .rwc-op-row {
    flex: 0 0 calc((100% - 24px) / 3);
    scroll-snap-align: start;
    margin: 0 !important;
}
@media (max-width: 900px) {
    /* 2 visible on tablet */
    .rwc-op-strip .rwc-op-row {
        flex: 0 0 calc((100% - 12px) / 2);
    }
}
@media (max-width: 600px) {
    /* 1.15 visible on phone — the peek shows there's more to scroll */
    .rwc-op-strip .rwc-op-row {
        flex: 0 0 85%;
    }
}

/* Backorder divider — becomes a compact vertical separator between
   the last in-stock card and the first backorder card. Rotate the
   label text 90° so it reads bottom-to-top. */
.rwc-op-strip .rwc-op-divider {
    flex: 0 0 32px;
    scroll-snap-align: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    position: relative;
}
.rwc-op-strip .rwc-op-divider-line {
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #e2e8f0 20%, #e2e8f0 80%, transparent);
    flex: 1;
}
.rwc-op-strip .rwc-op-divider-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #f59e0b;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

/* ═══════════════════════════════════════════════════════════════
   PDP Vendor Offer Slider — Slice 2 (Amazon-style, always visible)
   Kills compact "Sold by" winner card + toggle button. Panel moves
   to full-width position below buy-box (via layout XML move).
   ─────────────────────────────────────────────────────────────── */

/* 2026-07-27 update: modal trigger moved to the "N sellers — best shown"
   link in the sold_by row (above product title). Compact winner card
   and its inner toggle button are BOTH suppressed here — they're
   redundant now that the sold-by row shows the seller + trigger. */
#rwc-buybox-winner {
    display: none !important;
}
#rwc-bb-others-btn {
    display: none !important;
}
/* Make the "N sellers — best shown" link visually look like a toggle */
.rwc-mp-sold-by__more {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .15s;
}
.rwc-mp-sold-by__more:hover {
    color: #1a2543;
}

/* Always-visible full-width panel container. Give it a distinct
   section identity with padding + subtle background. */
.rwc-op.rwc-op--always {
    display: block !important;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px 20px;
    margin: 24px 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.rwc-op.rwc-op--always .rwc-op-head {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}
.rwc-op.rwc-op--always .rwc-op-head-title {
    font-size: 12px;
    letter-spacing: .08em;
    color: #0f172a;
}
.rwc-op.rwc-op--always .rwc-op-head-count {
    color: #475569;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}

/* Wider container → more cards visible. 4 on desktop, 3 on tablet,
   2 on smaller tablet, 1.15 (with peek) on phone. */
.rwc-op.rwc-op--always .rwc-op-strip .rwc-op-row {
    flex: 0 0 calc((100% - 36px) / 4);
}
@media (max-width: 1200px) {
    .rwc-op.rwc-op--always .rwc-op-strip .rwc-op-row {
        flex: 0 0 calc((100% - 24px) / 3);
    }
}
@media (max-width: 900px) {
    .rwc-op.rwc-op--always .rwc-op-strip .rwc-op-row {
        flex: 0 0 calc((100% - 12px) / 2);
    }
}
@media (max-width: 600px) {
    .rwc-op.rwc-op--always .rwc-op-strip .rwc-op-row {
        flex: 0 0 85%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PDP Vendor Offer MODAL (Amazon-style "See all sellers" popup)
   Opens when clicking "N other sellers from $Y" toggle.
   Panel is display:none until JS adds .is-open, at which point it
   becomes a fixed centered card with a full-viewport backdrop.
   ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   SIDE DRAWER — Amazon-style (2026-07-28)
   Drawer slides in from the RIGHT, 500px wide, full viewport height.
   Backdrop is on body::before (dark overlay). Cards stack vertically.
   JS portals the panel to <body> on open so any ancestor
   transform/filter/contain doesn't break position:fixed.
   ─────────────────────────────────────────────────────────────── */
body.rwc-op-modal-lock { overflow: hidden; }
body.rwc-op-modal-lock::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 9999;
}

.rwc-op.rwc-op--modal { display: none !important; }

.rwc-op.rwc-op--modal.is-open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(500px, 95vw) !important;
    max-width: none !important;
    height: 100vh !important;
    max-height: 100vh !important;
    background: #ffffff !important;
    z-index: 10000 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15) !important;
    transform: none !important;
    animation: rwcDrawerSlideIn .25s ease-out !important;
}
@keyframes rwcDrawerSlideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* Reset direct-child styling to plain in-drawer blocks */
.rwc-op.rwc-op--modal.is-open > .rwc-op-head,
.rwc-op.rwc-op--modal.is-open > .rwc-op-strip,
.rwc-op.rwc-op--modal.is-open > .rwc-op-foot,
.rwc-op.rwc-op--modal.is-open > #rwc-qty-hint,
.rwc-op.rwc-op--modal.is-open > #rwc-variant-placeholder,
.rwc-op.rwc-op--modal.is-open > #rwc-variant-no-offers,
.rwc-op.rwc-op--modal.is-open > [id^="rwc-child-offers-"],
.rwc-op.rwc-op--modal.is-open > [id^="rwc-store-info-"] {
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    background: #ffffff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.rwc-op.rwc-op--modal.is-open > .rwc-op-head {
    padding: 20px 24px 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5;
}
.rwc-op.rwc-op--modal.is-open > .rwc-op-foot {
    padding: 14px 24px 24px !important;
    border-top: 1px solid #f1f5f9 !important;
    color: #64748b;
    font-size: 12px;
}
.rwc-op.rwc-op--modal.is-open > #rwc-variant-placeholder,
.rwc-op.rwc-op--modal.is-open > #rwc-variant-no-offers {
    padding: 40px 24px !important;
    text-align: center;
    color: #64748b !important;
    font-size: 14px;
}
.rwc-op.rwc-op--modal.is-open > [id^="rwc-child-offers-"] {
    padding: 0 !important;
}

/* Vendor strip → vertical stack, cards full width */
.rwc-op.rwc-op--modal.is-open .rwc-op-strip {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 14px 20px 20px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    background: transparent !important;
}
.rwc-op.rwc-op--modal.is-open .rwc-op-strip .rwc-op-row {
    flex: 0 0 auto !important;
    width: 100% !important;
    scroll-snap-align: none !important;
    margin: 0 !important;
}

/* Close X — sits absolutely in top-right of drawer */
.rwc-op.rwc-op--modal.is-open > .rwc-op-modal-close,
.rwc-op-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #64748b;
    font-size: 20px;
    line-height: 1;
    border-radius: 6px;
    cursor: pointer;
    z-index: 20;
    transition: background .15s, color .15s;
}
.rwc-op-modal-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

/* ═══════════════════════════════════════════════════════════════
   Modal vendor card redesign (2026-07-27)
   Vertical stack. No avatar, no badge/pill chrome. Multi-line
   with related info grouped inline. Select button pinned to bottom.
   All rules scoped under .rwc-op--modal.is-open so we only affect
   modal-rendered cards — the compact/inline versions elsewhere
   (RFQ, admin, etc.) keep their existing appearance.
   ─────────────────────────────────────────────────────────────── */

.rwc-op.rwc-op--modal.is-open .rwc-op-row {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 16px 14px;
    gap: 10px;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid transparent !important;
    background: #ffffff !important;
    border-radius: 10px !important;
}
.rwc-op.rwc-op--modal.is-open .rwc-op-row.selected {
    border-color: #1a2543 !important;
    border-left-color: #1a2543 !important;
    background: #fbfbfd !important;
}

/* Kill chrome: avatar, badges, grade, seller-icon */
.rwc-op.rwc-op--modal.is-open .rwc-vc-av,
.rwc-op.rwc-op--modal.is-open .rwc-op-av,
.rwc-op.rwc-op--modal.is-open .rwc-op-av-init,
.rwc-op.rwc-op--modal.is-open .rwc-op-badge,
.rwc-op.rwc-op--modal.is-open .rwc-op-grade,
.rwc-op.rwc-op--modal.is-open .rwc-op-seller-icon {
    display: none !important;
}

/* Body row — vendor name + availability + tier prices */
.rwc-op.rwc-op--modal.is-open .rwc-vc-body {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.rwc-op.rwc-op--modal.is-open .rwc-vc-toprow {
    margin: 0;
    display: block;
}
.rwc-op.rwc-op--modal.is-open .rwc-vc-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Strip pill chrome from availability rows — plain inline text w/ color */
.rwc-op.rwc-op--modal.is-open .rwc-vc-inforow {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: center;
    margin: 0;
}
.rwc-op.rwc-op--modal.is-open .rwc-vc-inforow .rwc-avail-pill {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
}
.rwc-op.rwc-op--modal.is-open .rwc-vc-inforow .rwc-avail-pill svg { flex-shrink: 0; }
.rwc-op.rwc-op--modal.is-open .rwc-vc-inforow .rwc-avail-instock  { color: #15803d !important; }
.rwc-op.rwc-op--modal.is-open .rwc-vc-inforow .rwc-avail-lowstock { color: #b45309 !important; }
.rwc-op.rwc-op--modal.is-open .rwc-vc-inforow .rwc-avail-outofstock { color: #991b1b !important; }
.rwc-op.rwc-op--modal.is-open .rwc-vc-inforow .rwc-avail-backorder { color: #b45309 !important; }
/* Same treatment for chip-style meta (Min. N units, ×N multiples) */
.rwc-op.rwc-op--modal.is-open .rwc-vc-inforow .rwc-vc-chip {
    background: transparent !important;
    padding: 0 !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* Aside — becomes full-width row below body: price left, button below full width */
.rwc-op.rwc-op--modal.is-open .rwc-vc-aside {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    text-align: left;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
}
.rwc-op.rwc-op--modal.is-open .rwc-vc-price {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.5px;
    line-height: 1;
    text-align: left;
}
.rwc-op.rwc-op--modal.is-open .rwc-vc-price sup {
    font-size: 12px;
    font-weight: 600;
    top: -0.5em;
}
.rwc-op.rwc-op--modal.is-open .rwc-vc-price-orig {
    font-size: 12px;
    color: #94a3b8;
    text-decoration: line-through;
    margin-bottom: 2px;
    text-align: left;
}
.rwc-op.rwc-op--modal.is-open .rwc-vc-price-b2b,
.rwc-op.rwc-op--modal.is-open .rwc-vc-price-note {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
}

/* Select button — full width, sits at the bottom */
.rwc-op.rwc-op--modal.is-open .rwc-vc-btn {
    width: 100%;
    padding: 10px 16px;
    background: #ffffff;
    color: #1a2543;
    border: 1.5px solid #1a2543;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.rwc-op.rwc-op--modal.is-open .rwc-vc-btn:hover {
    background: #f8fafc;
}
.rwc-op.rwc-op--modal.is-open .rwc-op-row.selected .rwc-vc-btn {
    background: #1a2543;
    color: #ffffff;
}
.rwc-op.rwc-op--modal.is-open .rwc-vc-btn-active { display: none; }
.rwc-op.rwc-op--modal.is-open .rwc-op-row.selected .rwc-vc-btn-default { display: none; }
.rwc-op.rwc-op--modal.is-open .rwc-op-row.selected .rwc-vc-btn-active { display: inline; }

/* Tier price panel toggle: keep functional but strip button chrome */
.rwc-op.rwc-op--modal.is-open .rwc-op-tier-btn {
    color: #475569 !important;
    font-weight: 600 !important;
}
.rwc-op.rwc-op--modal.is-open .rwc-op-tier-btn:hover { color: #1a2543 !important; }

/* ═══════════════════════════════════════════════════════════════
   Modal support for CONFIGURABLE products (2026-07-28)
   #rwc-offer-panel structure differs from #rwc-bb-full-panel —
   offer rows are nested inside per-child divs (#rwc-child-offers-N),
   plus there's a #rwc-variant-placeholder helper text div.
   Style those extra containers the same way as direct-child head/strip.
   ─────────────────────────────────────────────────────────────── */
.rwc-op.rwc-op--modal.is-open > [id^="rwc-child-offers-"],
.rwc-op.rwc-op--modal.is-open > #rwc-variant-placeholder,
.rwc-op.rwc-op--modal.is-open > #rwc-variant-no-offers,
.rwc-op.rwc-op--modal.is-open > [id^="rwc-store-info-"] {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    background: #ffffff;
    position: relative;
    padding: 12px 24px;
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
}
.rwc-op.rwc-op--modal.is-open > #rwc-variant-placeholder,
.rwc-op.rwc-op--modal.is-open > #rwc-variant-no-offers {
    padding: 40px 24px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}
/* Strip inside child-offers div — same card sizing as top-level strip */
.rwc-op.rwc-op--modal.is-open [id^="rwc-child-offers-"] .rwc-op-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 0 10px;
    margin: 0;
}
.rwc-op.rwc-op--modal.is-open [id^="rwc-child-offers-"] .rwc-op-strip .rwc-op-row {
    flex: 0 0 calc((100% - 36px) / 4);
    margin: 0 !important;
    scroll-snap-align: start;
}
@media (max-width: 900px) {
    .rwc-op.rwc-op--modal.is-open [id^="rwc-child-offers-"] .rwc-op-strip .rwc-op-row {
        flex: 0 0 calc((100% - 12px) / 2);
    }
}
@media (max-width: 600px) {
    .rwc-op.rwc-op--modal.is-open [id^="rwc-child-offers-"] .rwc-op-strip .rwc-op-row {
        flex: 0 0 85%;
    }
}

/* Side-drawer experiment reverted 2026-07-28 — going back to yesterday's
   centered modal that worked. Amazon-style drawer parked for later. */

/* ═══════════════════════════════════════════════════════════════
   Promo Banner — matches v2 buy-pane card language (2026-07-28)
   Kills the gradient/colored-pill chrome from the module's inline
   <style> block. White card, subtle border/shadow, navy text, mono
   values. Per-style variants (holiday/bundle/tier) get a small
   left-accent line for differentiation instead of full background.
   Template override strips the inline <style>; this CSS wins.
   ─────────────────────────────────────────────────────────────── */

.rwc-promo-banner {
    display: block;
    margin: 0 0 16px;
}
/* Full-width band between row 1 (image+buy) and row 2 (tabs) —
   sits as a direct child of .column.main grid via layout XML move.
   Explicit grid-row: 2 so it sits ABOVE the tabs (which are bumped
   to row 3 below); auto-flow would otherwise push it after tabs. */
.catalog-product-view .column.main > .rwc-promo-banner {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 8px 0 24px !important;
    align-self: start;
}
@media (max-width: 959px) {
    .catalog-product-view .column.main > .rwc-promo-banner {
        margin: 20px 0 !important;
    }
}
.rwc-promo-banner__card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-left-width: 3px !important;
    border-left-color: #1a2543 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
    margin-bottom: 10px;
}
.rwc-promo-banner__card:last-child { margin-bottom: 0; }

/* Per-style left-accent line (no background gradients — just an
   accent stripe so buyers can tell them apart at a glance). */
.rwc-promo-banner__card--default { border-left-color: #1a2543 !important; }
.rwc-promo-banner__card--bundle  { border-left-color: #1a2543 !important; }
.rwc-promo-banner__card--tier    { border-left-color: #b45309 !important; }
.rwc-promo-banner__card--holiday { border-left-color: #b91c1c !important; }

/* Thumb image — small white card, muted border */
.rwc-promo-banner__img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
    background: #ffffff !important;
    border-radius: 6px !important;
    border: 1px solid #e5e7eb !important;
    padding: 3px !important;
    flex-shrink: 0;
}

.rwc-promo-banner__body { flex: 1; min-width: 0; }

/* Eyebrow — small caps, tracked, muted (no colored pill) */
.rwc-promo-banner__label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #64748b !important;
    margin: 0 0 4px !important;
}
.rwc-promo-banner__card--tier    .rwc-promo-banner__label { color: #b45309 !important; }
.rwc-promo-banner__card--holiday .rwc-promo-banner__label { color: #b91c1c !important; }

/* Title — navy, weight 600 */
.rwc-promo-banner__title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
    margin: 0 0 4px !important;
}

/* Value — mono, muted */
.rwc-promo-banner__value {
    font-size: 11px !important;
    color: #64748b !important;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace !important;
    line-height: 1.5;
}
.rwc-promo-banner__value strong {
    font-weight: 700 !important;
    color: #0f172a !important;
}
.rwc-promo-banner__card--tier    .rwc-promo-banner__value strong { color: #b45309 !important; }
.rwc-promo-banner__card--holiday .rwc-promo-banner__value strong { color: #b91c1c !important; }

/* Tier ladder — 2-col grid, mono */
.rwc-tier-ladder {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 3px 14px !important;
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace !important;
    font-size: 11px !important;
    color: #475569 !important;
    margin: 6px 0 !important;
}
.rwc-tier-ladder__qty {
    font-weight: 700 !important;
    color: #b45309 !important;
    text-align: right !important;
}
.rwc-tier-ladder__pct { color: #0f172a !important; }
.rwc-tier-ladder__pct strong {
    color: #b45309 !important;
    font-weight: 700 !important;
}

@media (max-width: 480px) {
    .rwc-promo-banner__card { padding: 12px; gap: 10px; }
    .rwc-promo-banner__img { width: 48px !important; height: 48px !important; }
    .rwc-promo-banner__title { font-size: 12px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Price size lockdown (2026-07-28)
   Force 3.6rem on ALL variations of the PDP price DOM regardless
   of product type (simple / configurable / grouped / tier-priced).
   Highest-specificity selectors + !important to beat any parent-
   theme cascade issue.
   ─────────────────────────────────────────────────────────────── */
.catalog-product-view .product-info-main .product-info-price .price-box .price,
.catalog-product-view .product-info-main .product-info-price .price-box .normal-price .price,
.catalog-product-view .product-info-main .product-info-price .price-box .special-price .price,
.catalog-product-view .product-info-main .product-info-price .price-box .price-container .price-wrapper .price {
    font-family: var(--ss-mono, 'JetBrains Mono', Menlo, monospace) !important;
    font-size: 3.6rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    color: var(--text-primary, #0f172a) !important;
}
/* Mobile scale-down (matches existing @media 767 rule at line 727) */
@media (max-width: 767px) {
    .catalog-product-view .product-info-main .product-info-price .price-box .price,
    .catalog-product-view .product-info-main .product-info-price .price-box .normal-price .price,
    .catalog-product-view .product-info-main .product-info-price .price-box .special-price .price {
        font-size: 2.6rem !important;
    }
}