/* ===========================================================
   Cameron Ashley Building Products (CABP) — Demo brand layer
   Loaded after swift.css via Swift-v2_Master.cshtml
   Palette tuned to the April 23 walkthrough of the live CONNECT
   portal (notes/brand-frames/): CONNECT navy primary, vibrant red
   for promo-only callouts, teal for inline shopping CTAs, warm
   cream for the DC-info utility band, plus loyalty green.
   =========================================================== */

/* IBM Plex stack (Wave 1, 2026-05-13): Plex Sans body, Plex Sans Condensed
   display heads (industrial wordmark character), Plex Mono tabular numerics
   so prices / SKUs / qty-break tables align across rows. All Apache 2.0. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@500;600;700&display=swap");

:root {
    /* Brand — CONNECT-true palette */
    --cabp-navy:       #1B2A4E;   /* primary: nav bar, decisive CTAs, header */
    --cabp-navy-dark:  #11203F;   /* hover / pressed for navy buttons */
    --cabp-navy-mid:   #2C3E66;   /* secondary navy for hover band */
    --cabp-teal:       #1BB8C4;   /* inline shopping CTA: add-to-cart pills, accent */
    --cabp-teal-dark:  #149AA4;   /* teal hover */
    --cabp-red:        #CC1C2C;   /* promo accent ONLY — NEW FEATURE banners, price-increase warnings */
    --cabp-red-dark:   #A8141E;
    --cabp-cream:      #F5F2EC;   /* warm cream — DC info band */
    --cabp-cream-mid:  #EBE5DA;   /* hover/border for cream band */
    --cabp-stone:      #E9EEF4;   /* legacy cool cream — kept for cards */
    --cabp-charcoal:   #1F2937;
    --cabp-slate:      #374151;
    --cabp-mute:       #6B7280;
    --cabp-line:       #E5E7EB;
    --cabp-green:      #2E9D33;   /* +POINTS / loyalty / in-stock */
    --cabp-green-soft: #E8F4EE;
    --cabp-amber:      #B45309;   /* low-stock */

    /* Legacy aliases retained so older rules keep resolving while we transition. */
    --cabp-blue:       var(--cabp-navy);
    --cabp-blue-dark:  var(--cabp-navy-dark);
    --cabp-blue-mid:   var(--cabp-navy-mid);

    /* Bridge to DW10 / Swift design tokens */
    --dw-color-primary:        var(--cabp-navy);
    --dw-color-primary-dark:   var(--cabp-navy-dark);
    --dw-color-secondary:      var(--cabp-charcoal);
    --dw-color-text:           var(--cabp-slate);
    --dw-color-heading:        var(--cabp-charcoal);
    --dw-color-link:           var(--cabp-navy);
    --dw-color-bg-subtle:      var(--cabp-cream);
    --dw-color-border:         var(--cabp-line);
    --swift-color-primary:     var(--cabp-navy);
    --swift-color-secondary:   var(--cabp-charcoal);
}

/* --- Typography ------------------------------------------------------- */

body {
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--cabp-slate);
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss03"; /* Plex Sans alt 'a' for industrial character */
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    color: var(--cabp-charcoal);
    font-weight: 700;
    letter-spacing: -0.012em;
    line-height: 1.18;
}

h1, .h1 { font-weight: 700; font-size: 2.75rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.5rem; }

/* Tabular numerics for any monetary / measurement / SKU cell. Lining figures
   guarantee $ + comma + decimal columns stack across rows; Plex Mono on
   demand for tight tables and product numbers. */
.price, [data-swift-product-price], .product-price,
.cabp-pdp-tier td, .cabp-pdp-tier th,
.table td, .table th,
.cabp-points-balance-value, .cabp-points-dial-pct,
[class*="price"]:not([class*="price-increase"]) {
    font-variant-numeric: tabular-nums lining-nums;
}
code, kbd, samp, .cabp-sku, [data-dw-itemtype*="productnumber"] {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-feature-settings: "zero"; /* slashed zero */
}

/* --- Buttons --------------------------------------------------------- */

.btn-primary,
button.btn[data-dw-button="primary"],
a.btn[data-dw-button-variant="primary"],
button.btn[data-dw-button]:not([data-dw-button="outline-secondary"]):not([data-dw-button="outline-primary"]):not([data-dw-button="link"]):not(.btn-outline-secondary):not(.btn-outline-primary):not(.btn-link):not(.btn-close):not(.dropdown-item):not(.nav-link):not(.list-group-item):not(.dropdown-toggle):not(.btn-secondary),
a.btn[data-dw-button]:not([data-dw-button="outline-secondary"]):not([data-dw-button="outline-primary"]):not([data-dw-button="link"]):not(.btn-outline-secondary):not(.btn-outline-primary):not(.btn-link):not(.btn-close):not(.dropdown-item):not(.nav-link):not(.list-group-item):not(.dropdown-toggle):not(.btn-secondary) {
    background-color: var(--cabp-blue) !important;
    border-color: var(--cabp-blue) !important;
    color: #ffffff !important;
    border-radius: 4px;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}
.btn-primary:hover,
button.btn[data-dw-button="primary"]:hover,
a.btn[data-dw-button-variant="primary"]:hover {
    background-color: var(--cabp-blue-dark) !important;
    border-color: var(--cabp-blue-dark) !important;
}
.btn-primary:active {
    transform: translateY(1px);
}

/* Reset DW outline buttons to neutral so the blanket [data-dw-button] rule
   above doesn't paint them solid blue (e.g. orders-list ellipsis + chevron). */
.btn-outline-secondary,
button[data-dw-button="outline-secondary"],
[data-dw-button="outline-secondary"] {
    background-color: transparent !important;
    border-color: var(--cabp-line, #E5E7EB) !important;
    color: var(--cabp-slate, #374151) !important;
}
.btn-outline-secondary:hover,
button[data-dw-button="outline-secondary"]:hover {
    background-color: var(--cabp-cream, #F4F6F9) !important;
    color: var(--cabp-blue, #0F4A8A) !important;
}

.btn-secondary,
button[data-dw-button="secondary"],
[data-dw-button-variant="secondary"] {
    background-color: var(--cabp-charcoal) !important;
    border-color: var(--cabp-charcoal) !important;
    color: #ffffff !important;
    border-radius: 4px;
    font-weight: 600;
}
.btn-secondary:hover {
    background-color: #0F172A !important;
    border-color: #0F172A !important;
}

.btn-outline-primary {
    color: var(--cabp-blue) !important;
    border-color: var(--cabp-blue) !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover {
    background-color: var(--cabp-blue) !important;
    color: #ffffff !important;
}

/* --- Header / nav --------------------------------------------------- */

[data-swift-page-header],
header[data-swift-page-header] {
    background-color: #ffffff !important;
    border-bottom: 3px solid var(--cabp-blue);
}

[data-swift-page-header] a,
header[data-swift-page-header] a {
    color: var(--cabp-charcoal);
    font-weight: 500;
}
[data-swift-page-header] a:hover {
    color: var(--cabp-blue);
}

/* Logo (cabp-logo.svg) */
[data-dw-itemtype="swift-v2_logo"] img {
    max-height: 56px;
    width: auto;
}

/* Header band 2 — DC info utility strip (E12.S21, increment 15).
   Was a `content:` rule painting a CSS custom property that Swift-v2_Master.cshtml
   computed from a five-DC C# switch. It is now REAL MARKUP: the Cabp_DcInfoBar
   paragraph on the desktop (27) and mobile (29) header pages, reading the
   CabpDcContact table. That matters beyond tidiness — a `content:` string is not
   selectable, not linkable and invisible to a screen reader, so "Email DC" and the
   phone number could never actually be clicked. They are anchors now. */
header > section[data-dw-itemtype="swift-v2_rowflex"]:has(.cabp-dcbar) {
    background: var(--cabp-cream) !important;
    border-bottom: 1px solid var(--cabp-cream-mid);
    min-height: 36px;
}
.cabp-dcbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 .5rem;
    width: 100%;
    color: var(--cabp-slate);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    font-feature-settings: "ss03";
    line-height: 1.6;
}
.cabp-dcbar__seg + .cabp-dcbar__seg::before {
    content: "\00B7";
    opacity: .55;
    margin-right: .5rem;
}
.cabp-dcbar__assigned { font-weight: 700; color: var(--cabp-navy, #0B2545); }
/* !important, and deliberately. The band's grid row was authored under the "dark"
   colour scheme in the demo phase; Swift's GENERATED ColorSchemes sheet then paints
   every descendant anchor #fff, which put the phone number and "Email DC" at white on
   cream — a measured contrast ratio of 1.05:1, i.e. invisible. The row is now
   lightgrey1, and this rule stops any future scheme change from doing it again. */
.cabp-dcbar a { color: var(--cabp-slate) !important; text-decoration: none; font-weight: 500; }
.cabp-dcbar a:hover,
.cabp-dcbar a:focus-visible { color: var(--cabp-blue) !important; text-decoration: underline; }
.cabp-dcbar__email a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 575.98px) {
    /* Phone: keep the assigned DC, the branch name and the two actions; drop the prose
       so the strip stays short and the header does not grow on a 390px canvas.
       Because the separator is drawn by the segment itself, hiding a segment takes its
       separator with it — no stranded middots. */
    .cabp-dcbar { gap: 0 .35rem; font-size: 0.72rem; letter-spacing: .04em; }
    .cabp-dcbar__seg + .cabp-dcbar__seg::before { margin-right: .35rem; }
    .cabp-dcbar__manager,
    .cabp-dcbar__hours { display: none; }
}

/* Header band 3 — main navigation, repainted to CONNECT navy.
   The nav paragraph type is `swift-v2_menurelatedcontent` (verified in DOM
   probe 2026-05-11). Matches the navy nav band in frames 02b/08/15/18. */
header.sticky-top > section[data-dw-itemtype="swift-v2_rowflex"]:has([data-dw-itemtype="swift-v2_menurelatedcontent"]) {
    background-color: var(--cabp-navy) !important;
}
header.sticky-top > section[data-dw-itemtype="swift-v2_rowflex"]:has([data-dw-itemtype="swift-v2_menurelatedcontent"]) a,
header.sticky-top > section[data-dw-itemtype="swift-v2_rowflex"]:has([data-dw-itemtype="swift-v2_menurelatedcontent"]) [data-dw-itemtype] {
    color: #ffffff !important;
}
header.sticky-top > section[data-dw-itemtype="swift-v2_rowflex"]:has([data-dw-itemtype="swift-v2_menurelatedcontent"]) a {
    font-weight: 600;
}
header.sticky-top > section[data-dw-itemtype="swift-v2_rowflex"]:has([data-dw-itemtype="swift-v2_menurelatedcontent"]) a:hover {
    color: var(--cabp-teal) !important;
}
/* Keep the search field inside the navy nav band readable */
header.sticky-top > section[data-dw-itemtype="swift-v2_rowflex"]:has([data-dw-itemtype="swift-v2_menurelatedcontent"]) [data-dw-itemtype="swift-v2_searchfield"] input,
header.sticky-top > section[data-dw-itemtype="swift-v2_rowflex"]:has([data-dw-itemtype="swift-v2_menurelatedcontent"]) input[type="search"],
header.sticky-top > section[data-dw-itemtype="swift-v2_rowflex"]:has([data-dw-itemtype="swift-v2_menurelatedcontent"]) input[type="text"] {
    background: #ffffff !important;
    color: var(--cabp-slate) !important;
}

/* --- Footer --------------------------------------------------------- */

/* Scope the navy/teal painted footer to the page-level footer landmark only.
   Generic `<footer>` elements inside cards (e.g. each Favorites list article
   has a footer carrying Rename/Delete actions) were being painted navy by the
   un-scoped rule — visible as a "blue bar" under each list. */
body > footer,
[data-swift-page-footer] {
    background-color: var(--cabp-navy) !important;
    color: rgba(255,255,255,0.85);
    border-top: 4px solid var(--cabp-teal);
}
body > footer a,
[data-swift-page-footer] a {
    color: #ffffff;
    opacity: 0.88;
}
body > footer a:hover,
[data-swift-page-footer] a:hover {
    color: var(--cabp-teal) !important;
    opacity: 1;
}

/* White logo on dark footer. Mockups render the wordmark in white on the
   navy ground; achieve it by inverting the dark logo PNG/SVG with a CSS
   filter rather than shipping a second asset. */
body > footer [data-dw-itemtype="swift-v2_logo"] img,
[data-swift-page-footer] [data-dw-itemtype="swift-v2_logo"] img {
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

/* Contact strip above the centered copyright — matches the walkthrough's
   footer right-side info block. Includes the Spanish-language phone line
   that signals serving the Hispanic contractor base. */
body > footer section:last-of-type [data-swift-text]::before,
[data-swift-page-footer] section:last-of-type [data-swift-text]::before {
    content: "Call 1-800-CAMERON  ·  ecommhelp@cameronashleybp.com  ·  Para Español 800-364-1997";
    display: block;
    color: rgba(255,255,255,0.92);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.86rem;
    font-weight: 500;
    margin-bottom: 14px;
    letter-spacing: 0.04em;
    text-align: center;
    font-feature-settings: "ss03";
}

/* Strip the inline charcoal background-color on the seeded copyright span so
   it inherits the footer navy correctly. Center the copyright row so it
   aligns with the centered contact strip above. */
body > footer section:last-of-type p.dw-paragraph-0 span,
[data-swift-page-footer] section:last-of-type p.dw-paragraph-0 span {
    background: transparent !important;
}
body > footer section:last-of-type [data-swift-text],
[data-swift-page-footer] section:last-of-type [data-swift-text],
body > footer section:last-of-type p.dw-paragraph-0,
[data-swift-page-footer] section:last-of-type p.dw-paragraph-0 {
    text-align: center;
}

/* --- Product cards (PLP) ------------------------------------------- */

.card,
[data-dw-itemtype*="card"],
[data-dw-itemtype="swift-v2_productcomponent"] {
    border: 1px solid var(--cabp-line);
    border-radius: 4px;
    transition: box-shadow .2s ease, border-color .2s ease, transform .15s ease;
    background: #ffffff;
}
.card:hover,
[data-dw-itemtype*="card"]:hover,
[data-dw-itemtype="swift-v2_productcomponent"]:hover {
    border-color: var(--cabp-blue);
    box-shadow: 0 8px 24px rgba(15,74,138,0.10);
    transform: translateY(-2px);
}
/* Belt and suspenders: PDP's productcomponentselector wrapper hosts the
   right-rail price/qty stack inside a g-col. The earlier `*="productcomponent"`
   selector accidentally framed it with a 1px line + radius and zero internal
   padding, leaving content kissing the edge. Strip framing from selector
   wrappers — they are layout containers, not cards. */
[data-dw-itemtype="swift-v2_productcomponentselector"] {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* PLP card cleanup: the customised ProductHeader paragraph emits brand + name
   + SKU + stock + short description on both PLP and PDP. On the PLP we want
   a tidy card with predictable height so prices line up; suppress the short
   description on cards and pin price to the bottom of the card via flex. */
article.product.js-product .cabp-pdp-short {
    display: none !important;
}
article.product.js-product > section:last-of-type {
    margin-top: auto;
}

/* --- PDP price tag ------------------------------------------------- */

.price,
[data-swift-product-price],
.product-price,
[class*="price-"]:not([class*="price-increase"]) {
    color: var(--cabp-charcoal);
    font-weight: 700;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 1.4rem;
}

/* Stock indicator pills */
.stock-status-instock,
.in-stock,
[data-stock-status="InStock"] {
    color: var(--cabp-green);
    font-weight: 600;
}
.stock-status-low,
[data-stock-status="LowStock"] {
    color: var(--cabp-amber);
    font-weight: 600;
}
.stock-status-outofstock,
.out-of-stock,
[data-stock-status="OutOfStock"] {
    color: var(--cabp-mute);
    font-weight: 500;
}

/* --- CABP stock + loyalty badges (PDP Swift-v2_ProductStock) -------- */

.cabp-stock-extras { font-size: .85rem; }
.cabp-badge--info {
    background: #FFF8E1;
    color: var(--cabp-amber);
    border: 1px solid var(--cabp-amber);
    font-weight: 600;
    padding: .35rem .6rem;
    border-radius: 3px;
}
.cabp-badge--loyalty {
    background: var(--cabp-green);
    color: #ffffff;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .35rem .6rem;
    border-radius: 3px;
    text-transform: uppercase;
    font-size: .7rem;
}
.cabp-stock-fst { font-size: .72rem; line-height: 1.4; }

/* CABP PDP inventory rows — brand frame 05 paired label:value layout.
   Replaces the compact "12,940 in stock · Omaha DC" pill with a structured
   <dl> so DC stock and 48-hour arrivals each get their own row. */
.cabp-pdp-inventory {
    display: grid;
    gap: 0.25rem 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}
.cabp-pdp-inventory__row {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}
.cabp-pdp-inventory dt {
    color: var(--cabp-slate);
    font-weight: 600;
    white-space: nowrap;
}
.cabp-pdp-inventory dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
/* CABP PDP PIM detail block — brand frame 05 label:value rows. */
.cabp-pdp-pim {
    display: grid;
    gap: 0.25rem 1rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--cabp-line);
}
.cabp-pdp-pim__row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0.5rem;
    align-items: baseline;
    font-size: 0.85rem;
    line-height: 1.5;
}
.cabp-pdp-pim dt {
    color: var(--cabp-slate);
    font-weight: 600;
    text-transform: none;
}
.cabp-pdp-pim dd {
    margin: 0;
    color: var(--cabp-charcoal);
    font-weight: 500;
    word-break: break-all;
}
.cabp-pdp-pim__row--customer {
    background: rgba(15, 74, 138, 0.06);
    border-left: 3px solid var(--cabp-blue);
    padding-left: 10px !important;
    border-radius: 4px;
}
.cabp-pdp-pim__row--customer dt {
    color: var(--cabp-blue);
}
.cabp-pdp-pim__row--customer dd {
    color: var(--cabp-blue);
    font-weight: 700;
}

/* CABP PDP description + cross-sell + spec tabs (frame 06).
   Tabs follow the brand wireframe in spirit (3 pills SPECIFICATIONS / FEATURES /
   DOCUMENTS) but use a cleaner underline+active style than the boxed pill of
   the original 2024 frame — informational parity, design upgrade. */
.cabp-pdp-section-title {
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cabp-charcoal);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.6rem;
}
.cabp-pdp-description {
    color: var(--cabp-slate);
    line-height: 1.65;
    font-size: 0.95rem;
}
.cabp-pdp-description p { margin: 0 0 0.75em; }
.cabp-pdp-crosssell {
    margin: 0;
    padding: 0.75rem 1rem;
    background: var(--cabp-cream);
    border-left: 3px solid var(--cabp-teal);
    border-radius: 4px;
    font-size: 0.92rem;
    color: var(--cabp-slate);
}
.cabp-pdp-crosssell a {
    color: var(--cabp-navy);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cabp-pdp-crosssell a:hover { color: var(--cabp-teal); }

.cabp-pdp-spec-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    row-gap: 0;
    margin: 0;
}
.cabp-pdp-spec-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed var(--cabp-line);
    font-size: 0.88rem;
}
.cabp-pdp-spec-row dt {
    color: var(--cabp-slate);
    font-weight: 600;
    text-transform: none;
}
.cabp-pdp-spec-row dd { margin: 0; color: var(--cabp-charcoal); }
@media (max-width: 720px) {
    .cabp-pdp-spec-table { grid-template-columns: 1fr; }
}

.cabp-pdp-feature-list {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--cabp-slate);
    font-size: 0.92rem;
    line-height: 1.7;
}
.cabp-pdp-feature-list li { margin-bottom: 0.4rem; }
.cabp-pdp-feature-list li::marker { color: var(--cabp-teal); font-weight: 700; }

.cabp-pdp-doc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.cabp-pdp-doc-list a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    background: #ffffff;
    border: 1px solid var(--cabp-line);
    border-radius: 4px;
    text-decoration: none;
    color: var(--cabp-charcoal);
    font-weight: 600;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.cabp-pdp-doc-list a:hover {
    border-color: var(--cabp-navy);
    box-shadow: 0 4px 10px rgba(27, 42, 78, 0.08);
    color: var(--cabp-navy);
}
.cabp-pdp-doc-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    color: var(--cabp-red);
    flex: none;
}
.cabp-pdp-doc-icon svg { width: 100%; height: 100%; fill: currentColor; }

/* Visual editor stub — shown when a PDP paragraph is rendered without a
   product context (i.e. when editing the page in Visual Editor). Helps
   editors see "where" each paragraph will appear on a real PDP. */
.cabp-ve-stub {
    background: var(--cabp-cream);
    border: 1px dashed var(--cabp-line);
    color: var(--cabp-slate);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
}
.cabp-ve-stub strong {
    display: block;
    color: var(--cabp-charcoal);
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    margin-bottom: 0.2rem;
}

/* CABP PDP — Related Product Categories strip (frame 06). Image-led cards
   linking to sibling top-level categories. Each card scales the image on
   hover to reinforce its tap-target feel. */
.cabp-pdp-related-cats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}
.cabp-pdp-related-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #ffffff;
    border: 1px solid var(--cabp-line);
    border-radius: 6px;
    text-decoration: none;
    color: var(--cabp-charcoal);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.cabp-pdp-related-cat:hover {
    border-color: var(--cabp-navy);
    box-shadow: 0 8px 18px rgba(27, 42, 78, 0.08);
    transform: translateY(-2px);
    color: var(--cabp-navy);
}
.cabp-pdp-related-cat__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: var(--cabp-cream);
    background-size: cover;
    background-position: center;
    border-radius: 4px;
}
.cabp-pdp-related-cat__label {
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* CABP PDP — Related Products slider. Product cards linking to sibling SKUs
   sourced from DW10 product.RelatedGroups (EcomProductsRelated). Track shows
   --cabp-related-visible cards per viewport with snap-scroll for the rest. */
.cabp-pdp-related-products {
    --cabp-related-visible: 4;
    --cabp-related-gap: 0.9rem;
}
.cabp-pdp-related-products__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.cabp-pdp-related-products__head .cabp-pdp-section-title:empty {
    display: none;
}
.cabp-pdp-related-products__head-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.cabp-pdp-related-products__addall {
    white-space: nowrap;
}
.cabp-pdp-related-products__controls {
    display: flex;
    gap: 0.4rem;
}
.cabp-pdp-related-products__nav {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: 1px solid var(--cabp-line);
    background: #ffffff;
    color: var(--cabp-navy);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.cabp-pdp-related-products__nav:hover {
    background: var(--cabp-navy);
    border-color: var(--cabp-navy);
    color: #ffffff;
}
.cabp-pdp-related-products__nav[disabled] {
    opacity: 0.4;
    cursor: default;
}
.cabp-pdp-related-products__track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--cabp-related-gap);
    margin-top: 0.75rem;
}
.cabp-pdp-related-products__track--slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    padding-block: 0.4rem;
}
.cabp-pdp-related-products__track--slider .cabp-pdp-related-product {
    flex: 0 0 calc((100% - (var(--cabp-related-visible) - 1) * var(--cabp-related-gap)) / var(--cabp-related-visible));
    scroll-snap-align: start;
}
@media (max-width: 768px) {
    .cabp-pdp-related-products__track--slider .cabp-pdp-related-product {
        flex-basis: calc((100% - var(--cabp-related-gap)) / 2);
    }
}
.cabp-pdp-related-product {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.1rem 0.75rem;
    background: #ffffff;
    border: 1px solid var(--cabp-line);
    border-radius: 6px;
    color: var(--cabp-charcoal);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.cabp-pdp-related-product:hover {
    border-color: var(--cabp-navy);
    box-shadow: 0 8px 18px rgba(27, 42, 78, 0.08);
    transform: translateY(-2px);
}
.cabp-pdp-related-product__link {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}
.cabp-pdp-related-product__link:hover {
    color: var(--cabp-navy);
}
.cabp-pdp-related-product__buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
.cabp-pdp-related-product__qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--cabp-line);
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
}
.cabp-pdp-related-product__qty-btn {
    width: 1.75rem;
    background: transparent;
    border: 0;
    color: var(--cabp-navy);
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
}
.cabp-pdp-related-product__qty-btn:hover {
    background: var(--cabp-cream);
}
.cabp-pdp-related-product__qty-input {
    width: 2.5rem;
    border: 0;
    border-left: 1px solid var(--cabp-line);
    border-right: 1px solid var(--cabp-line);
    text-align: center;
    padding: 0.25rem 0;
    font-size: 0.85rem;
    -moz-appearance: textfield;
}
.cabp-pdp-related-product__qty-input::-webkit-outer-spin-button,
.cabp-pdp-related-product__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cabp-pdp-related-product__add {
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
    white-space: nowrap;
}
.cabp-pdp-related-product__img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: var(--cabp-cream);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 4px;
}
.cabp-pdp-related-product__img--placeholder {
    background-image: linear-gradient(135deg, var(--cabp-cream) 0%, var(--cabp-cream-mid, #EBE5DA) 100%);
}
.cabp-pdp-related-product__name {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cabp-charcoal);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cabp-pdp-related-product__price {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cabp-navy);
    margin-top: auto;
}

/* CABP PDP — Recently Viewed strip (frame 06). Smaller cards than the
   related-cats since the goal is "jog memory" not "browse". */
.cabp-pdp-recent__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 180px));
    gap: 0.75rem;
    margin-top: 0.75rem;
    justify-content: start;
}
.cabp-pdp-recent__card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.5rem;
    background: #ffffff;
    border: 1px solid var(--cabp-line);
    border-radius: 4px;
    text-decoration: none;
    color: var(--cabp-charcoal);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    font-size: 0.82rem;
    line-height: 1.35;
}
.cabp-pdp-recent__card:hover {
    border-color: var(--cabp-navy);
    box-shadow: 0 4px 10px rgba(27, 42, 78, 0.08);
}
.cabp-pdp-recent__img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--cabp-cream);
    background-size: cover;
    background-position: center;
    border-radius: 3px;
}
.cabp-pdp-recent__img--blank {
    background-image: linear-gradient(135deg, var(--cabp-cream), #ffffff);
}
.cabp-pdp-recent__name {
    color: var(--cabp-slate);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* CABP PDP — top utility row (Share + Print). Frame 05 reference. */
.cabp-pdp-actions-top {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.cabp-pdp-action-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    background: transparent;
    color: var(--cabp-slate);
    border: 1px solid var(--cabp-line);
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.cabp-pdp-action-icon:hover {
    border-color: var(--cabp-navy);
    color: var(--cabp-navy);
}
.cabp-pdp-action-icon svg { width: 14px; height: 14px; fill: currentColor; }
.cabp-pdp-action-icon.is-copied::after {
    content: "Copied ✓";
    margin-left: 0.4rem;
    color: var(--cabp-green);
}

/* CABP PDP — secondary "View Cart" CTA under Add to Cart. */
.cabp-pdp-viewcart {
    margin-top: 0.5rem;
}
.cabp-pdp-viewcart__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #ffffff;
    color: var(--cabp-navy);
    border: 1px solid var(--cabp-navy);
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.cabp-pdp-viewcart__link:hover {
    background: var(--cabp-navy);
    color: #ffffff;
}
.cabp-pdp-viewcart__link svg { width: 16px; height: 16px; fill: currentColor; }

/* CABP PDP image overlay — +POINTS pill on top-left of the product image,
   zoom magnifier hint on top-right. Matches brand frame 05. The container
   needs to be position:relative (added on Swift-v2_ProductMedia outer flex). */
.cabp-pdp-points-overlay {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    background: var(--cabp-green);
    color: #ffffff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 6px 14px rgba(46, 157, 51, 0.25);
    pointer-events: none;
}
.cabp-pdp-points-overlay svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
    flex: none;
}
.cabp-pdp-zoom-hint {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 3;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(27, 42, 78, 0.78);
    color: #ffffff;
    border-radius: 50%;
    pointer-events: none;
    backdrop-filter: blur(2px);
}
.cabp-pdp-zoom-hint svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* CABP B5/H7 — Order detail beats (timeline + reorder + POD photo).
   Renders on customer-center order detail pages so customers see a
   stable, branded "what happened to my order" arc. */
.cabp-order-timeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    counter-reset: cabp-otl-step;
    gap: 0.5rem;
}
.cabp-order-timeline li {
    flex: 1;
    text-align: center;
    position: relative;
    padding-top: 1.6rem;
    color: var(--cabp-mute);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.cabp-order-timeline li + li::before {
    content: "";
    position: absolute;
    inset-block-start: 11px;
    inset-inline-start: -50%;
    inline-size: 100%;
    block-size: 2px;
    background: var(--cabp-line);
    z-index: 0;
}
.cabp-order-timeline li.is-done + li.is-done::before,
.cabp-order-timeline li.is-done::after { /* keep specificity tight */
    background: var(--cabp-teal);
}
.cabp-order-timeline .cabp-otl-dot {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: 24px;
    block-size: 24px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--cabp-line);
    z-index: 1;
    display: grid;
    place-items: center;
}
.cabp-order-timeline li.is-done .cabp-otl-dot {
    background: var(--cabp-teal);
    border-color: var(--cabp-teal);
}
.cabp-order-timeline li.is-done .cabp-otl-dot::after {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    background: #ffffff;
    border-radius: 50%;
}
.cabp-order-timeline li:last-child.is-done {
    color: var(--cabp-charcoal);
}
.cabp-order-timeline .cabp-otl-label {
    display: block;
}

.cabp-reorder-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* POD card */
.cabp-pod-card .cabp-pod-grid {
    display: grid;
    gap: 1.4rem;
    grid-template-columns: minmax(220px, 1fr) 1.4fr;
    align-items: flex-start;
}
@media (max-width: 720px) {
    .cabp-pod-card .cabp-pod-grid { grid-template-columns: 1fr; }
}
.cabp-pod-photo img {
    inline-size: 100%;
    block-size: auto;
    border-radius: 4px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid var(--cabp-line);
}
.cabp-pod-meta {
    margin: 0;
    display: grid;
    gap: 0.6rem;
}
.cabp-pod-meta > div {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0.6rem;
    align-items: baseline;
}
.cabp-pod-meta dt {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cabp-mute);
    margin: 0;
    font-weight: 600;
}
.cabp-pod-meta dd {
    margin: 0;
    color: var(--cabp-charcoal);
    font-weight: 500;
}

/* CABP price-increase notice (Swift-v2_ProductLongDescription PDP variant) */
.cabp-pdp-price-increase {
    color: var(--cabp-red);
    font-size: .9rem;
    line-height: 1.45;
    font-weight: 500;
    padding: .6rem .8rem;
    border-left: 3px solid var(--cabp-red);
    background: rgba(204, 28, 44, 0.06);
    border-radius: 3px;
}
/* Increment 15: the notice now carries its effective date ahead of the wording. */
.cabp-pdp-price-increase__date {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .8rem;
    margin-right: .4rem;
}
.cabp-pdp-price-increase__date::after { content: " \2014"; }

/* E05.S03 — the "Welcome to CONNECT" band.
   The shipped Poster templates lay copy straight onto the photograph with no scrim, so
   navy body text over dc-warehouse.jpg was measured at roughly 2:1 against the lighter
   patches of the image. A left-anchored gradient wash restores the contrast without
   flattening the picture, and the copy column is capped so a 1440px canvas does not
   stretch a paragraph to full width. */
.cabp-welcome { position: relative; }
.cabp-welcome > figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.88) 38%, rgba(255,255,255,.30) 68%, rgba(255,255,255,0) 100%);
}
.cabp-welcome [data-swift-container] { max-width: 100%; }
.cabp-welcome__eyebrow { color: var(--cabp-blue); letter-spacing: .08em; text-transform: uppercase; }
.cabp-welcome__greeting { color: var(--cabp-navy); }
.cabp-welcome__account,
.cabp-welcome__body { color: var(--cabp-charcoal); max-width: 46rem; }
@media (max-width: 767.98px) {
    /* On a phone the gradient has no room to fall off, so wash the whole frame. */
    .cabp-welcome > figure::after {
        background: linear-gradient(180deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.90) 100%);
    }
}

/* E05.S04 — "Price Change Notifications and Letters", grouped by effective month.
   Deliberately price-free: the list carries product, brand, date and wording only,
   so it is safe for anonymous visitors and for the E12.S02 price-hidden user type. */
.cabp-pricechange__month { margin-block: 2rem 0; }
.cabp-pricechange__monthhead {
    color: var(--cabp-navy);
    border-bottom: 2px solid var(--cabp-cream-mid);
    padding-bottom: .4rem;
    margin-bottom: .75rem;
}
.cabp-pricechange__list { margin: 0; padding: 0; }
.cabp-pricechange__row {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: .35rem 1.5rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--cabp-line);
}
.cabp-pricechange__meta { display: flex; flex-direction: column; gap: .15rem; }
.cabp-pricechange__date {
    color: var(--cabp-red);
    font-weight: 700;
    letter-spacing: .03em;
}
.cabp-pricechange__brand { color: var(--cabp-mute); font-size: .85rem; }
.cabp-pricechange__product { font-weight: 600; color: var(--cabp-navy); }
.cabp-pricechange__product:hover { color: var(--cabp-blue); }
.cabp-pricechange__sku {
    display: block;
    color: var(--cabp-mute);
    font-size: .8rem;
    letter-spacing: .04em;
}
.cabp-pricechange__notice { margin: .35rem 0 0; color: var(--cabp-charcoal); font-size: .92rem; }
.cabp-pricechange__anon { color: var(--cabp-mute); }
.cabp-pricechange__empty { color: var(--cabp-mute); font-style: italic; }
@media (max-width: 575.98px) {
    .cabp-pricechange__row { grid-template-columns: 1fr; gap: .25rem; }
}

/* A6 — PDP right-rail breathing room. The Swift PDP wraps each paragraph in a
   grid column; price + cart + stock typically share the right rail. The
   :has(.item_swift-v2_productprice) selector targets the column hosting the
   price paragraph and applies symmetric inline padding so text doesn't run
   into the column edge on wide layouts. */
[data-swift-gridrow] > [class*="g-col"]:has(> .item_swift-v2_productprice),
[data-swift-gridrow] > [class*="g-col"]:has(> .item_swift-v2_productaddtocart) {
    padding-inline: clamp(1rem, 2vw, 1.5rem);
}

/* --- Forms --------------------------------------------------------- */

input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
.form-select:focus {
    border-color: var(--cabp-blue);
    box-shadow: 0 0 0 0.18rem rgba(15,74,138,0.18);
}

/* --- Tables (customer center: orders, invoices) -------------------- */

.table thead th {
    background: var(--cabp-cream);
    color: var(--cabp-charcoal);
    border-bottom: 2px solid var(--cabp-line);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
}
.table tbody tr:hover {
    background: var(--cabp-cream);
}

/* --- Impersonation / role banners --------------------------------- */

.badge-impersonating,
[data-swift-impersonation-banner] {
    background-color: var(--cabp-blue) !important;
    color: #ffffff !important;
    font-weight: 600;
    border-radius: 2px;
    border: none !important;
}

/* --- Misc polish --------------------------------------------------- */

a {
    color: var(--cabp-blue);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover {
    color: var(--cabp-blue-dark);
}

::selection {
    background: var(--cabp-blue-mid);
    color: #ffffff;
}

/* A12 — PLP duplicate title cleanup. The inner catalog component-page (PageID 57)
   ships with an h6-styled ProductListInfo that renders at the bottom of the
   product grid — visible as an orphan "Roofing" title under the product count.
   The wrapper page (71) already renders an h3 hero title at the top of the PLP,
   so the inner h6 is redundant. We can't reliably soft-delete the paragraph
   (the ProductListComponentSelector caches its rendered grid), so hide it
   with a CSS rule targeting the h6 size. */
.item_swift-v2_productlistinfo h1.h6 {
    display: none !important;
}
.item_swift-v2_productlistinfo:has(> div > div > h1.h6:only-child) {
    display: none !important;
}

/* Category tile hover (shop landing) */
[data-swift-gridrow] a.text-decoration-none:hover h3,
[data-swift-gridrow] a.text-decoration-none:hover .h3 {
    color: var(--cabp-blue);
}

/* PDP hero image polish — scope to gallery/media images only, not descendant VE chrome icons. */
[data-dw-itemtype*="productdetails"] [data-swift-media] img,
[data-dw-itemtype*="ProductDetails"] [data-swift-media] img,
[data-dw-itemtype*="productdetails"] .product-media img,
[data-dw-itemtype*="ProductDetails"] .product-media img,
[data-dw-itemtype*="productdetails"] picture img,
[data-dw-itemtype*="ProductDetails"] picture img {
    border-radius: 4px;
    background: var(--cabp-cream);
}

/* PDP grid rows — Bootstrap's .grid class sets
   `grid-template-rows: repeat(var(--bs-rows,1), 1fr)`. With a single declared
   row each cell is sized to `1fr` of the row, and the row itself stops
   growing once shorter cells (header/price/actions) reach their natural
   height — but the media cell's carousel+thumbnails are taller, so they
   overflow the row visually and bleed into the next 1-column row's
   description. Make rows auto-grow to content. Column layout (3-col)
   untouched. */
[data-swift-container].grid:has(.item_swift-v2_productmedia) {
    grid-template-rows: auto !important;
    grid-auto-rows: auto;
}
.item_swift-v2_productmedia.h-100,
.item_swift-v2_productmedia {
    height: auto !important;
}

/* Cart / checkout summary */
[data-dw-itemtype*="cart"] .card-body,
[data-dw-itemtype*="checkout"] .card-body {
    border-left: 3px solid var(--cabp-blue);
}

/* 2026-10-10 navtags: the "ID=8308" hide rule was removed (page 8308 does not exist on any CABP host). */
/* ===========================================================
   CABP F^ST hero — Swift-v2_Poster variant `CabpFstHero.cshtml`.
   All content lives in the standard Poster editor fields (Eyebrow / Title / Text / FirstButton).
   No inline HTML in those fields — every visual is driven from here.
   =========================================================== */
.cabp-fst-hero {
    background: linear-gradient(180deg, var(--cabp-navy) 0%, #0F1B36 100%);
    color: #ffffff;
    padding: 4rem 1rem 3.5rem;
    overflow: hidden;
}
.cabp-fst-hero[data-swift-poster-height="1"] { padding-block: 2.5rem; }
.cabp-fst-hero[data-swift-poster-height="2"] { padding-block: 3.5rem; }
.cabp-fst-hero[data-swift-poster-height="3"] { padding-block: 4.5rem; }
.cabp-fst-hero[data-swift-poster-height="4"] { padding-block: 6rem; }

.cabp-fst-hero .cabp-fst-eyebrow,
.cabp-fst-hero .cabp-fst-eyebrow * {
    color: rgba(255, 255, 255, 0.7) !important;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}
.cabp-fst-hero .cabp-fst-wordmark,
.cabp-fst-hero .cabp-fst-wordmark * {
    color: #ffffff !important;
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-size: clamp(5rem, 16vw, 11rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 0.88;
    margin: 0;
    font-feature-settings: "ss03";
}
/* Story-card group: one outer border around the whole row, internal dividers between cards
   (rather than 3 separate Bootstrap card borders). Scoped to rows containing image-top cards. */
body.cabp-content-page section[data-swift-gridrow="3Columns"]:has(.card-img-top) > [data-swift-container].grid {
    background: #fff;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: 0.5rem;
    overflow: hidden;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
}
body.cabp-content-page section[data-swift-gridrow="3Columns"]:has(.card-img-top) .card {
    border: 0 !important;
    border-radius: 0 !important;
}
body.cabp-content-page section[data-swift-gridrow="3Columns"]:has(.card-img-top) > [data-swift-container].grid > [data-swift-gridcolumn]:not(:last-child) {
    border-right: 1px solid var(--bs-border-color, #e5e7eb);
}
@media (max-width: 991.98px) {
    body.cabp-content-page section[data-swift-gridrow="3Columns"]:has(.card-img-top) > [data-swift-container].grid > [data-swift-gridcolumn]:not(:last-child) {
        border-right: 0;
        border-bottom: 1px solid var(--bs-border-color, #e5e7eb);
    }
}

.cabp-fst-hero .cabp-fst-logo {
    display: block;
    margin: 0 auto;
    width: min(60vw, 440px);
    height: auto;
    object-fit: contain;
}
section.cabp-fst-hero[data-swift-poster-height="L"] {
    padding-block: clamp(3rem, 6vw, 5rem) !important;
}
section.cabp-fst-hero[data-swift-poster-height="XL"] {
    padding-block: clamp(4rem, 8vw, 6.5rem) !important;
}
section.cabp-fst-hero[data-swift-poster-height="S"] {
    padding-block: 2rem !important;
}
section.cabp-fst-hero[data-swift-poster-height="M"] {
    padding-block: 3rem !important;
}
.cabp-fst-hero .cabp-fst-wordmark .cabp-fst-peak {
    display: inline-block;
    transform: translateY(-0.18em);
    font-size: 0.65em;
    color: var(--cabp-teal);
    font-weight: 700;
    margin: 0 0.05em;
}
.cabp-fst-hero .cabp-fst-body,
.cabp-fst-hero .cabp-fst-body * {
    color: rgba(255, 255, 255, 0.86) !important;
    max-width: 64ch;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    line-height: 1.5;
    margin-top: 1.4rem;
}
.cabp-fst-hero .cabp-fst-body p { margin-bottom: 0.6em; }

/* ===========================================================
   CABP "New Feature" promo card — Swift-v2_Feature variant `CabpNewFeature.cshtml`.
   =========================================================== */
.cabp-new-feature {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 1.6fr;
    align-items: stretch;
    max-width: 780px;
    margin: 1.5rem auto 0;
    border: 2px solid var(--cabp-red);
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
}
.cabp-new-feature__badge {
    background: var(--cabp-red);
    color: #ffffff;
    padding: 1.6rem 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
}
.cabp-new-feature__badge-eyebrow {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    opacity: 0.9;
}
.cabp-new-feature__badge-title,
.cabp-new-feature__badge-title * {
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: #ffffff !important;
    margin: 0;
}
.cabp-new-feature__badge-icon { width: 64px; height: 64px; line-height: 0; }
.cabp-new-feature__badge-icon svg,
.cabp-new-feature__badge-icon img { width: 100%; height: 100%; color: #ffffff; fill: currentColor; }
.cabp-new-feature__body {
    background: #ffffff;
    color: var(--cabp-charcoal);
    padding: 1.4rem 1.4rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cabp-new-feature__body-text,
.cabp-new-feature__body-text * { font-family: "IBM Plex Sans", sans-serif; font-size: 0.95rem; line-height: 1.5; color: var(--cabp-slate); }
.cabp-new-feature__body-text strong, .cabp-new-feature__body-text b { color: var(--cabp-charcoal); }

@media (max-width: 540px) {
    .cabp-new-feature { grid-template-columns: 1fr; }
}

/* Home top row: F^ST + Delivery ETA side-by-side at lg.
   Equal heights via Bootstrap grid stretch; type scales down inside half-width column. */
[data-swift-gridcolumn].g-col-lg-6 .cabp-fst-hero,
[data-swift-gridcolumn].g-col-lg-6 .cabp-new-feature {
    height: 100%;
}
@media (min-width: 992px) {
    [data-swift-gridcolumn].g-col-lg-6 .cabp-fst-hero[data-swift-poster-height="3"] {
        padding-block: 3rem;
    }
    [data-swift-gridcolumn].g-col-lg-6 .cabp-fst-hero .cabp-fst-wordmark,
    [data-swift-gridcolumn].g-col-lg-6 .cabp-fst-hero .cabp-fst-wordmark * {
        font-size: clamp(3.5rem, 8vw, 6.5rem);
    }
    [data-swift-gridcolumn].g-col-lg-6 .cabp-fst-hero .cabp-fst-body,
    [data-swift-gridcolumn].g-col-lg-6 .cabp-fst-hero .cabp-fst-body * {
        font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    }
    [data-swift-gridcolumn].g-col-lg-6 .cabp-new-feature {
        grid-template-columns: minmax(150px, 1fr) 1.4fr;
    }
    [data-swift-gridcolumn].g-col-lg-6 .cabp-new-feature__badge-title,
    [data-swift-gridcolumn].g-col-lg-6 .cabp-new-feature__badge-title * {
        font-size: 1.45rem;
    }
}

/* ===========================================================
   CABP +POINTS Rewards dashboard — Swift-v2_Text variant `CabpPointsDashboard.cshtml`.
   Uses AccessUser.AccessUserPointBalance (ERP-imported per 2026-05-13 architecture call).
   Layout order: hero (slim) → dials (fun, fills on load) → fineprint.
   =========================================================== */
.cabp-points-dashboard {
    --cabp-dial-track: rgba(27, 42, 78, 0.07);
    background: linear-gradient(180deg, #ffffff 0%, var(--cabp-cream) 100%);
    border-radius: 8px;
    padding: 1.5rem clamp(1.25rem, 3vw, 2rem) 1.75rem;
    color: var(--cabp-slate);
    font-family: "IBM Plex Sans", sans-serif;
}
.cabp-points-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.25rem;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--cabp-line);
}
@media (max-width: 720px) { .cabp-points-hero { grid-template-columns: 1fr; align-items: flex-start; } }
.cabp-points-hero-text { min-width: 0; }
.cabp-points-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cabp-green);
    margin-bottom: 0.3rem;
}
.cabp-points-title {
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    font-weight: 700;
    color: var(--cabp-charcoal);
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.01em;
}
.cabp-points-title-num { color: var(--cabp-navy); font-variant-numeric: tabular-nums; }
.cabp-points-title-reward { color: var(--cabp-green); }
.cabp-points-balance {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.85rem;
    background: var(--cabp-navy);
    color: #ffffff;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(27,42,78,0.18);
}
.cabp-points-balance-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.72;
}
.cabp-points-balance-value {
    font-family: "IBM Plex Mono", "IBM Plex Sans", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.cabp-points-balance-value small { font-size: 0.7rem; opacity: 0.65; font-weight: 600; margin-left: 0.25rem; }

/* Dials — first thing on the page, animated fill on load */
.cabp-points-dials {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-bottom: 1.5rem;
    align-items: stretch;
}
.cabp-points-dial {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--cabp-line);
    border-radius: 10px;
    padding: 1.25rem 1.1rem 1.1rem;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.cabp-points-dial::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, var(--cabp-dial-accent-soft), transparent 60%);
    opacity: 0.85;
    pointer-events: none;
}
.cabp-points-dial:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(27,42,78,0.10);
    border-color: var(--cabp-dial-accent);
}
.cabp-points-dial.is-unlocked { border-color: var(--cabp-dial-accent); }
.cabp-points-dial.is-unlocked::after {
    content: "★";
    position: absolute;
    top: 0.55rem;
    right: 0.75rem;
    color: var(--cabp-dial-accent);
    font-size: 1.15rem;
    line-height: 1;
}
.cabp-points-dial-ring {
    position: relative;
    width: 168px;
    height: 168px;
    border-radius: 50%;
    background:
        conic-gradient(from -90deg,
            var(--cabp-dial-accent) 0deg,
            var(--cabp-dial-accent) var(--cabp-dial-fill, 0deg),
            var(--cabp-dial-track) var(--cabp-dial-fill, 0deg),
            var(--cabp-dial-track) 360deg);
    display: grid;
    place-items: center;
    margin-bottom: 0.85rem;
    animation: cabp-dial-spin-in 1.1s cubic-bezier(.22,.84,.45,1.04) both;
    animation-delay: var(--cabp-dial-delay, 0ms);
}
.cabp-points-dial-ring::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px dashed var(--cabp-dial-accent);
    opacity: 0.22;
    pointer-events: none;
}
@keyframes cabp-dial-spin-in {
    0%   { background: conic-gradient(from -90deg, var(--cabp-dial-accent) 0deg, var(--cabp-dial-accent) 0deg, var(--cabp-dial-track) 0deg, var(--cabp-dial-track) 360deg); transform: scale(0.92) rotate(-6deg); opacity: 0; }
    60%  { opacity: 1; transform: scale(1.02) rotate(2deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
.cabp-points-dial-inner {
    position: relative;
    width: 134px; height: 134px;
    background: #ffffff;
    border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.18rem;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}
.cabp-points-dial-glyph { width: 28px; height: 28px; color: var(--cabp-dial-accent); display: inline-flex; line-height: 0; margin-bottom: 2px; }
.cabp-points-dial-glyph svg { width: 100%; height: 100%; fill: currentColor; }
.cabp-points-dial-pct {
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-size: 1.7rem; font-weight: 700; color: var(--cabp-charcoal);
    letter-spacing: -0.02em; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.cabp-points-dial-pct small { font-size: 0.8rem; color: var(--cabp-mute); font-weight: 600; letter-spacing: 0; margin-left: 1px; }
.cabp-points-dial-status { font-size: 0.7rem; color: var(--cabp-slate); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.cabp-points-dial-status--unlocked { color: var(--cabp-dial-accent); }
.cabp-points-dial-label { position: relative; z-index: 1; font-size: 1.05rem; font-weight: 700; color: var(--cabp-charcoal); margin: 0 0 0.2rem; letter-spacing: -0.005em; }
.cabp-points-dial-reward { position: relative; z-index: 1; font-size: 0.82rem; color: var(--cabp-slate); line-height: 1.4; margin: 0 0 0.4rem; }
.cabp-points-dial-threshold { position: relative; z-index: 1; font-size: 0.7rem; color: var(--cabp-mute); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

.cabp-points-fineprint { font-size: 0.82rem; color: var(--cabp-mute); line-height: 1.5; max-width: 70ch; }
.cabp-points-fineprint p { margin: 0 0 0.4rem; }
.cabp-points-cta { color: var(--cabp-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cabp-points-cta:hover { color: var(--cabp-teal); }
@media (prefers-reduced-motion: reduce) {
    .cabp-points-dial-ring { animation: none; }
}

/* ===========================================================
   CABP layout pass (2026-05-13, Wave 1 follow-up) — alignment,
   spacing, and order. Findings were probed with Playwright
   boundingClientRect; each rule below has a concrete signal.
   =========================================================== */

/* Vertical rhythm — every body-level page section (home, shop,
   plp etc.) butted up with gap=0 against the next. 48px breathing
   between major sections is the floor; bands with their own
   internal padding can still feel coherent. Scoped to the swift
   page wrapper so we don't paint margin on header/footer sections. */
body[data-dw-itemtype="swift-v2_page"] > main > section + section,
body > section + section[data-dw-itemtype="swift-v2_row"],
body > section[data-dw-itemtype="swift-v2_row"] + section,
body > section[data-dw-itemtype="swift-v2_rowflex"] + section,
body > section + section[data-dw-itemtype="swift-v2_rowflex"] {
    margin-top: clamp(2rem, 4vw, 3rem);
}

/* Home chip strip — 6 category links clustered far-left (chips at
   x=8 to x=531 of a 1440 viewport, leaving 900px of band empty).
   Center the chips horizontally so the navy band reads as a
   composed strip. Target the nav.d-flex inside menurelatedcontent
   inside a body-level rowflex (NOT the header nav — that one needs
   to keep its existing left-aligned brand-style). */
body > section[data-dw-itemtype="swift-v2_rowflex"] [data-dw-itemtype="swift-v2_menurelatedcontent"] nav.d-flex,
main section[data-dw-itemtype="swift-v2_rowflex"] [data-dw-itemtype="swift-v2_menurelatedcontent"] nav.d-flex {
    justify-content: center;
    gap: clamp(0.5rem, 2vw, 2rem) !important;
}

/* Home category grid — cards collapsed to h=0 because Bootstrap
   `.ratio` expects `--bs-aspect-ratio: <percentage>` (e.g. 100%)
   but the SQL/JSON fallback parser writes `1x1` (the editor's
   admin-side token). Override locally to a 1:1 aspect-ratio so
   the 6 image-bearing cards actually render. */
[data-dw-itemtype="swift-v2_productgroupgrid"] .card.ratio,
[data-dw-itemtype="swift-v2_productgroupgrid"] .card.rounded-0.ratio {
    aspect-ratio: 1 / 1;
    height: auto !important;
    --bs-aspect-ratio: 100% !important;
    overflow: hidden;
    position: relative;
}
[data-dw-itemtype="swift-v2_productgroupgrid"] .card.ratio > * {
    position: absolute;
    inset: 0;
}
[data-dw-itemtype="swift-v2_productgroupgrid"] .card.ratio img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
[data-dw-itemtype="swift-v2_productgroupgrid"] .card.ratio .btn,
[data-dw-itemtype="swift-v2_productgroupgrid"] .card.ratio .stretched-link {
    align-self: end;
    justify-self: center;
    inset: auto auto 1rem auto;
    position: absolute;
}

/* CC dashboard orders table — Qty + Total + Placed read as money/
   counts/dates; right-align so columns line up across rows.
   Targeted at .table to avoid disturbing order-detail tables. */
.dw-page-customer-center .table thead th:nth-child(3), /* Placed */
.dw-page-customer-center .table thead th:nth-child(5), /* Qty */
.dw-page-customer-center .table thead th:nth-child(6), /* Total */
.dw-page-customer-center .table tbody td:nth-child(3),
.dw-page-customer-center .table tbody td:nth-child(5),
.dw-page-customer-center .table tbody td:nth-child(6) {
    text-align: right;
}
/* Fallback if .dw-page-customer-center isn't applied: target by URL via :where on table inside an order-list paragraph */
[data-dw-itemtype="swift-v2_order_list"] .table thead th:nth-child(5),
[data-dw-itemtype="swift-v2_order_list"] .table thead th:nth-child(6),
[data-dw-itemtype="swift-v2_order_list"] .table tbody td:nth-child(5),
[data-dw-itemtype="swift-v2_order_list"] .table tbody td:nth-child(6) {
    text-align: right;
}
/* Broadest fallback — any table inside .customer-center wrapper / a Card list-orders block */
.customer-center .table tbody td:has(.badge) ~ td,
.customer-center .table thead th:nth-child(n+5),
.customer-center .table tbody td:nth-child(n+5) {
    text-align: right;
}

/* CC sidebar section-header rhythm — gap before each section
   header (Customer center, Account) was inconsistent (27px vs
   46px). Equalize to 32px top + 8px bottom regardless of where
   it sits in the sidebar. */
nav.list-group .list-group-item:where(.text-uppercase, [class*="section-header"], small.text-uppercase),
nav .list-group > small,
.list-group > .text-muted.small {
    margin-top: 1.5rem !important;
    margin-bottom: 0.25rem !important;
    padding-top: 0 !important;
}

/* Footer columns — uneven gaps (179px vs 216px). Force even three-
   column grid so headers + link lists align across columns. */
body > footer .grid,
body > footer [class*="grid-template"],
[data-swift-page-footer] .grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    column-gap: clamp(2rem, 4vw, 4rem) !important;
}
body > footer h1, body > footer h2, body > footer h3,
body > footer h4, body > footer h5, body > footer h6,
body > footer .dw-h1, body > footer .dw-h2, body > footer .dw-h3,
body > footer .dw-h4, body > footer .dw-h5, body > footer .dw-h6 {
    margin-bottom: 0.75rem !important;
}

/* PDP — dead space between Add-to-cart and Long Description was
   296px (from y=865 to y=1161). The LongDesc breaks the two-column
   layout to full-width; we can't easily restore the two-column
   without restructuring, but we can pull the LongDesc up so the
   transition feels intentional, not abandoned. */
[data-dw-itemtype="swift-v2_row"]:has(.item_swift-v2_productlongdescription) {
    margin-top: clamp(1.5rem, 3vw, 2.5rem) !important;
}
.item_swift-v2_productlongdescription {
    padding-block: 0 !important;
}

/* PDP price stack — stock paragraph touches price paragraph (gap=0)
   creating visual collision between the qty-break tier table and
   the stock + DC line. Insert a 1rem gap. */
.item_swift-v2_productprice + *,
[data-dw-itemtype="swift-v2_app"] > .item_swift-v2_productstock {
    margin-top: 0.75rem !important;
}

/* POD card photo:meta — was 1:1.4 (photo 383px, meta 536px).
   Rebalance to 3:4 so the photo carries enough weight without
   eating the meta column. */
.cabp-pod-card .cabp-pod-grid {
    grid-template-columns: minmax(260px, 3fr) 4fr !important;
}

/* +POINTS dial column rhythm — see primary block above (~line 760). */

/* PLP / Shop catalog — sidebar Categories list visual weight.
   Items rendered as plain text lines with no current-state
   highlight beyond bold. Add left-rail accent for the active
   item so order is visually anchored.
   Scoped to <main> so the same active-state styling doesn't bleed
   into the footer's per-category link columns (where "Roofing"
   would otherwise get a cream box on every shop/PDP). */
main .dw-page-shop nav.list-group a.active,
main .dw-page-shop nav .list-group a.active,
main .dw-page-roofing nav.list-group a.active,
main [data-dw-itemtype="swift-v2_navigation"] a.active {
    border-left: 3px solid var(--cabp-navy);
    padding-left: calc(0.75rem - 3px);
    font-weight: 600;
    background: var(--cabp-cream);
}

/* Header right-edge padding — cart label visible cart icon sits at
   right=1417 in a 1440 viewport (23px from edge). Give the header
   inner container a min 16px right padding via clamp to be safe at
   wider viewports too. */
header.sticky-top > section > [data-swift-container],
header.sticky-top > section > div {
    padding-inline: clamp(0.75rem, 2vw, 1.5rem);
}

/* ============================================================
   CABP PDP — Wave 3
   1. Sticky right rail
   2. Quick-spec chip row
   3. Sticky TOC
   4. Bulk-pricing calculator
   5. Reorder-from-history nudge
   6. Tier-prices paragraph (refactored out of ProductPrice)
   ============================================================ */

/* (1) Sticky right rail — scoped to PDP. Swift's productcomponentselector
   wraps the right-rail column on page 70; we sticky-position that wrapper
   below the page header. Measured header height at 1440x900 is ~181px;
   TOC adds ~52px when stuck; 16px slack. */
@media (min-width: 992px) {
    body[data-dw-itemtype="swift-v2_shop"] [data-dw-itemtype="swift-v2_productcomponentselector"] {
        position: sticky;
        top: 249px;
        align-self: flex-start;
    }
}

/* PDP hero image — cap the hero IMAGE area so the carousel doesn't blow
   out vertically with portrait/square sources. Bootstrap's .ratio uses
   padding-bottom: 100% to maintain 1:1, which stretches the container to
   match its width. We override that and pin a height directly on the
   .ratio element + image. Outer productMedia cell is left to grow naturally
   so thumbnails below the carousel don't escape the cell into the next
   row's description. */
body[data-dw-itemtype="swift-v2_shop"] [data-dw-itemtype="swift-v2_productmedia"] {
    align-self: flex-start;
}
body[data-dw-itemtype="swift-v2_shop"] [data-dw-itemtype="swift-v2_productmedia"] .ratio {
    padding-bottom: 0 !important;
    height: 520px !important;
}
body[data-dw-itemtype="swift-v2_shop"] [data-dw-itemtype="swift-v2_productmedia"] .ratio::before {
    padding-top: 0 !important;
    height: 0 !important;
    content: none !important;
}
body[data-dw-itemtype="swift-v2_shop"] [data-dw-itemtype="swift-v2_productmedia"] .carousel,
body[data-dw-itemtype="swift-v2_shop"] [data-dw-itemtype="swift-v2_productmedia"] .carousel-inner,
body[data-dw-itemtype="swift-v2_shop"] [data-dw-itemtype="swift-v2_productmedia"] .carousel-item {
    max-height: 520px;
}
body[data-dw-itemtype="swift-v2_shop"] [data-dw-itemtype="swift-v2_productmedia"] img {
    max-height: 520px;
    object-fit: contain;
    width: auto !important;
    margin-inline: auto;
}
/* Don't stretch the productMedia column to match the rail column height. */
body[data-dw-itemtype="swift-v2_shop"] section[data-swift-gridrow="2Columns_8-4"] [data-swift-gridcolumn] {
    align-self: flex-start;
}

/* (2) Quick-spec chip row */
.cabp-pdp-chips {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
}
.cabp-pdp-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.32rem 0.7rem;
    background: #ffffff;
    border: 1px solid var(--cabp-line);
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1.2;
    color: var(--cabp-slate);
}
.cabp-pdp-chip__label {
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.66rem;
    color: var(--cabp-mute);
}
.cabp-pdp-chip__value {
    font-weight: 600;
    color: var(--cabp-charcoal);
    font-variant-numeric: tabular-nums;
}

/* (3) Sticky table-of-contents jumper */
.cabp-pdp-toc {
    position: sticky;
    top: 74px; /* clears header.sticky-top */
    z-index: 30;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: saturate(180%) blur(6px);
    border-bottom: 1px solid var(--cabp-line);
    margin: 0 0 1rem;
}
.cabp-pdp-toc__inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    /* Visually hide the horizontal scrollbar; touch + wheel scroll still work. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cabp-pdp-toc__inner::-webkit-scrollbar {
    display: none;
}
.cabp-pdp-toc__link {
    flex: none;
    padding: 0.85rem 1rem;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 700;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cabp-slate);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.cabp-pdp-toc__link:hover {
    color: var(--cabp-charcoal);
}
.cabp-pdp-toc__link.is-active {
    color: var(--cabp-navy);
    border-bottom-color: var(--cabp-navy);
}
.cabp-pdp-toc__link.is-disabled {
    color: var(--cabp-line);
    pointer-events: none;
    cursor: default;
}

/* (4) Bulk-pricing calculator widget — lives at the bottom of the tier
   prices paragraph, below the table. */
.cabp-bulk-calc {
    margin-top: 0.9rem;
    padding: 0.8rem 0.9rem;
    background: var(--cabp-cream);
    border: 1px solid var(--cabp-line);
    border-radius: 4px;
    max-width: 380px;
}
.cabp-bulk-calc__label {
    display: block;
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.68rem;
    color: var(--cabp-slate);
    margin-bottom: 0.4rem;
}
.cabp-bulk-calc__row {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
}
.cabp-bulk-calc__qty {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--cabp-line);
    border-radius: 3px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cabp-charcoal);
    background: #ffffff;
}
.cabp-bulk-calc__qty:focus {
    outline: 2px solid var(--cabp-navy);
    outline-offset: 0;
    border-color: var(--cabp-navy);
}
.cabp-bulk-calc__uom {
    display: inline-flex;
    align-items: center;
    padding: 0 0.6rem;
    background: #ffffff;
    border: 1px solid var(--cabp-line);
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cabp-slate);
}
.cabp-bulk-calc__out {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.85rem;
    color: var(--cabp-slate);
}
.cabp-bulk-calc.is-active .cabp-bulk-calc__out {
    color: var(--cabp-charcoal);
}
.cabp-bulk-calc__per {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 600;
}
.cabp-bulk-calc__total {
    font-family: "IBM Plex Mono", monospace;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cabp-charcoal);
    line-height: 1.2;
}
.cabp-bulk-calc__sq {
    font-size: 0.78rem;
    color: var(--cabp-mute);
}
.cabp-bulk-calc__save {
    font-size: 0.78rem;
    color: var(--cabp-green);
    font-weight: 700;
}

/* (5) Reorder-from-history nudge */
.cabp-pdp-reorder {
    display: flex;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #FFF8E1, #ffffff);
    border: 1px solid var(--cabp-amber);
    border-radius: 4px;
    margin-bottom: 0.85rem;
}
.cabp-pdp-reorder__icon {
    flex: none;
    width: 26px;
    height: 26px;
    color: var(--cabp-amber);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cabp-pdp-reorder__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}
.cabp-pdp-reorder__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.cabp-pdp-reorder__lede {
    color: var(--cabp-charcoal);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.35;
}
.cabp-pdp-reorder__meta {
    color: var(--cabp-slate);
    font-size: 0.78rem;
}
.cabp-pdp-reorder__form {
    margin-top: 0.35rem;
}
.cabp-pdp-reorder__btn {
    appearance: none;
    background: var(--cabp-navy);
    color: #ffffff;
    border: 0;
    border-radius: 3px;
    padding: 0.42rem 0.85rem;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.15s ease;
}
.cabp-pdp-reorder__btn:hover {
    background: var(--cabp-charcoal);
}

/* (6) Refactored tier-prices paragraph styling — picks up where the
   old inline styles in Swift-v2_ProductPrice.cshtml left off, but now
   scoped to .cabp-pdp-tier-prices so it can't bleed into other tables. */
.cabp-pdp-tier-prices .cabp-bulk-badge {
    background: var(--cabp-red);
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.45rem 0.75rem;
    border-radius: 3px;
    font-size: 0.7rem;
}
.cabp-pdp-tier-prices .cabp-tier-table {
    max-width: 380px;
    font-size: 0.85rem;
}
.cabp-pdp-tier-prices .cabp-tier-table thead tr {
    background: var(--cabp-cream);
}
.cabp-pdp-tier-prices .cabp-tier-table th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--cabp-slate);
}
.cabp-pdp-tier-prices .cabp-tier-sq {
    color: var(--cabp-slate);
}
.cabp-pdp-tier-prices .cabp-tier-foot {
    margin-top: 0.25rem;
    font-size: 0.72rem;
}

/* ============================================================
   CABP — Visual Editor mode reset
   ------------------------------------------------------------
   When Swift master renders in VE mode, body gets a `ve-mode`
   class. DW10's VE chrome injects row/column toolbars with
   icon buttons; my brand `.btn` / `[data-dw-button]` overrides
   cascade into those icons (white text on hover) and become
   invisible against the editor's green/yellow row-hover and
   column-hover overlays. Reset every aggressive color rule
   inside VE so the editor's own styling wins.
   ============================================================ */
body.ve-mode .btn,
body.ve-mode button.btn,
body.ve-mode a.btn,
body.ve-mode [data-dw-button],
body.ve-mode [data-dw-button-variant],
body.ve-mode .btn-primary,
body.ve-mode .btn-secondary,
body.ve-mode .btn-outline-primary,
body.ve-mode .btn-outline-secondary {
    background-color: revert !important;
    border-color: revert !important;
    color: revert !important;
}
body.ve-mode .btn:hover,
body.ve-mode button.btn:hover,
body.ve-mode a.btn:hover,
body.ve-mode [data-dw-button]:hover,
body.ve-mode .btn-outline-primary:hover,
body.ve-mode .btn-outline-secondary:hover,
body.ve-mode .btn-secondary:hover {
    background-color: revert !important;
    border-color: revert !important;
    color: revert !important;
}
/* SVG icons inside the editor chrome may use fill="currentColor";
   if my brand body color cascades they pick up dark charcoal then
   flip to white under DW's :hover. Pin the SVG fill to a safe
   neutral inside VE so the icons stay visible on every accent. */
body.ve-mode svg {
    fill: currentColor;
}
body.ve-mode :is([data-dw-edit], [data-dw-edit-row], [data-dw-edit-column], [class*="dw-edit"], [class*="dw-vmode"]) {
    color: #1F2937 !important;
}
body.ve-mode :is([data-dw-edit], [data-dw-edit-row], [data-dw-edit-column], [class*="dw-edit"], [class*="dw-vmode"]) svg {
    fill: #1F2937 !important;
}
body.ve-mode :is([data-dw-edit], [data-dw-edit-row], [data-dw-edit-column], [class*="dw-edit"], [class*="dw-vmode"]) *:hover {
    color: #0F4A8A !important;
}
body.ve-mode :is([data-dw-edit], [data-dw-edit-row], [data-dw-edit-column], [class*="dw-edit"], [class*="dw-vmode"]) *:hover svg {
    fill: #0F4A8A !important;
}

/* ============================================================
   CABP content pages (98-105) — children of Home, body has
   class `cabp-content-page`. Hero, lead, tile-row card framing,
   section rhythm. Targets Swift-v2_Page item-typed pages only.
   ============================================================ */

/* Hero — first 1Column row on a content page gets large padding,
   centered headline, optional accent background. */
body.cabp-content-page main > section[data-swift-gridrow="1Column"]:first-of-type {
    background: linear-gradient(180deg, var(--cabp-cream) 0%, #ffffff 100%);
    padding-block: 2.5rem 2rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--cabp-line);
}
body.cabp-content-page main > section[data-swift-gridrow="1Column"]:first-of-type [data-swift-text] {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}
body.cabp-content-page main > section[data-swift-gridrow="1Column"]:first-of-type h1,
body.cabp-content-page main > section[data-swift-gridrow="1Column"]:first-of-type .dw-h2 {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--cabp-charcoal);
    line-height: 1.1;
    margin: 0 0 .75rem;
}
body.cabp-content-page main > section[data-swift-gridrow="1Column"]:first-of-type .lead {
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--cabp-slate);
    margin: 0;
}

/* Body rows — generous padding, max-width-readable. */
body.cabp-content-page main > section[data-swift-gridrow] {
    padding-block: 1.5rem;
}
body.cabp-content-page main > section[data-swift-gridrow="1Column"]:not(:first-of-type) [data-swift-text] {
    max-width: 760px;
    margin-inline: auto;
}
body.cabp-content-page main > section[data-swift-gridrow="1Column"] h2,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .dw-h3 {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 700;
    color: var(--cabp-charcoal);
    font-size: 1.5rem;
    margin: 0 0 .75rem;
}
body.cabp-content-page main > section[data-swift-gridrow="1Column"] p {
    color: var(--cabp-slate);
    line-height: 1.65;
    font-size: 1rem;
    margin: 0 0 .75em;
}

/* Tile rows — 3Columns / 2Columns on content pages get card framing.
   Each [data-swift-text] becomes a card. */
body.cabp-content-page main > section[data-swift-gridrow="3Columns"] [data-swift-gridcolumn],
body.cabp-content-page main > section[data-swift-gridrow="2Columns"] [data-swift-gridcolumn] {
    padding: 0.5rem;
}
body.cabp-content-page main > section[data-swift-gridrow="3Columns"] [data-swift-gridcolumn] [data-swift-text],
body.cabp-content-page main > section[data-swift-gridrow="2Columns"] [data-swift-gridcolumn] [data-swift-text] {
    background: #ffffff;
    border: 1px solid var(--cabp-line);
    border-radius: 6px;
    padding: 1.4rem 1.25rem;
    height: 100%;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.cabp-content-page main > section[data-swift-gridrow="3Columns"] [data-swift-gridcolumn] [data-swift-text]:hover,
body.cabp-content-page main > section[data-swift-gridrow="2Columns"] [data-swift-gridcolumn] [data-swift-text]:hover {
    border-color: var(--cabp-blue);
    box-shadow: 0 6px 16px rgba(15, 74, 138, .08);
    transform: translateY(-2px);
}
body.cabp-content-page main > section[data-swift-gridrow="3Columns"] [data-swift-text] h3,
body.cabp-content-page main > section[data-swift-gridrow="2Columns"] [data-swift-text] h3,
body.cabp-content-page main > section[data-swift-gridrow="3Columns"] [data-swift-text] .dw-h4,
body.cabp-content-page main > section[data-swift-gridrow="2Columns"] [data-swift-text] .dw-h4 {
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--cabp-navy);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 .55rem;
    border-bottom: 2px solid var(--cabp-blue);
    padding-bottom: .35rem;
    display: inline-block;
}
body.cabp-content-page main > section[data-swift-gridrow="3Columns"] [data-swift-text] p,
body.cabp-content-page main > section[data-swift-gridrow="2Columns"] [data-swift-text] p {
    color: var(--cabp-slate);
    font-size: .92rem;
    line-height: 1.55;
    margin: 0 0 .5em;
}
body.cabp-content-page main > section[data-swift-gridrow="3Columns"] [data-swift-text] a:not(.btn),
body.cabp-content-page main > section[data-swift-gridrow="2Columns"] [data-swift-text] a:not(.btn) {
    color: var(--cabp-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* TextCenter inside non-hero 1Column rows — accented panel for CTA/contact blocks only
   (matches when the text contains a mailto/tel/contact link, so plain section headings stay clean). */
body.cabp-content-page main > section[data-swift-gridrow="1Column"]:not(:first-of-type) [data-swift-text].text-center:has(a[href^="mailto:"], a[href^="tel:"], a[href*="contact"]) {
    background: var(--cabp-cream);
    border-left: 4px solid var(--cabp-navy);
    border-radius: 4px;
    padding: 1.4rem 1.5rem;
    max-width: 720px;
    margin-inline: auto;
}

/* --- Cabp_StatStrip ---------------------------------------------------
   Horizontal stat strip: large number + small caption per column.
   Lives on About / Home / Locations to add visual rhythm without imagery.
   ---------------------------------------------------------------------- */
.cabp-statstrip {
    padding: 2.5rem 0;
    color: var(--cabp-charcoal);
}
.cabp-statstrip__title {
    text-align: center;
    margin: 0 0 1.75rem;
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    color: var(--cabp-navy);
    font-size: 1.5rem;
    letter-spacing: -0.005em;
}
.cabp-statstrip__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem 2rem;
    align-items: end;
}
.cabp-statstrip__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    padding: 0.75rem 0.5rem;
    border-left: 1px solid var(--cabp-line);
}
.cabp-statstrip__item:first-child {
    border-left: 0;
}
@media (max-width: 575px) {
    .cabp-statstrip__item {
        border-left: 0;
        border-top: 1px solid var(--cabp-line);
        padding-top: 1.1rem;
    }
    .cabp-statstrip__item:first-child {
        border-top: 0;
        padding-top: 0;
    }
}
.cabp-statstrip__icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-bottom: 0.25rem;
    opacity: 0.85;
}
.cabp-statstrip__stat {
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--cabp-navy);
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.02em;
}
.cabp-statstrip__label {
    font-size: 0.85rem;
    color: var(--cabp-slate);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

/* --- Cabp_Testimonial -------------------------------------------------
   Pull-quote card with optional photo, author, role, brand logo.
   Default variant = stacked card; Inline variant = compact horizontal.
   ---------------------------------------------------------------------- */
.cabp-testimonial {
    margin: 2rem 0;
    padding: 1.75rem 1.5rem 1.5rem;
    background: var(--cabp-cream);
    border-left: 4px solid var(--cabp-teal);
    border-radius: 6px;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.25rem;
    row-gap: 0.5rem;
    align-items: start;
}
.cabp-testimonial__photo {
    grid-row: 1 / span 2;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cabp-line);
    flex-shrink: 0;
}
.cabp-testimonial__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cabp-testimonial__quote {
    grid-column: 2;
    margin: 0;
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif;
    font-size: 1.15rem;
    line-height: 1.45;
    color: var(--cabp-charcoal);
    font-weight: 500;
    quotes: "\201C" "\201D";
}
.cabp-testimonial__quote::before {
    content: open-quote;
    margin-right: 0.1em;
    color: var(--cabp-teal);
    font-weight: 700;
}
.cabp-testimonial__quote::after {
    content: close-quote;
    margin-left: 0.05em;
    color: var(--cabp-teal);
    font-weight: 700;
}
.cabp-testimonial__quote > * {
    margin: 0 0 0.5rem;
}
.cabp-testimonial__quote > *:last-child {
    margin-bottom: 0;
}
.cabp-testimonial__attribution {
    grid-column: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(0,0,0,0.05);
    margin-top: 0.5rem;
}
.cabp-testimonial__author {
    font-weight: 600;
    color: var(--cabp-navy);
    font-size: 0.95rem;
}
.cabp-testimonial__role {
    color: var(--cabp-mute);
    font-size: 0.85rem;
}
.cabp-testimonial__role::before {
    content: "·";
    margin-right: 0.5rem;
    color: var(--cabp-mute);
}
.cabp-testimonial__brand {
    height: 22px;
    width: auto;
    margin-left: auto;
    opacity: 0.85;
}
@media (max-width: 575px) {
    .cabp-testimonial {
        grid-template-columns: 1fr;
    }
    .cabp-testimonial__photo {
        grid-row: auto;
        width: 64px;
        height: 64px;
    }
    .cabp-testimonial__quote,
    .cabp-testimonial__attribution {
        grid-column: 1;
    }
}
.cabp-testimonial--inline {
    padding: 1rem 1.25rem;
    background: transparent;
    border-left: 3px solid var(--cabp-teal);
    border-radius: 0;
}
.cabp-testimonial--inline .cabp-testimonial__quote {
    font-size: 1rem;
}

/* ============================================================
   Phase G - Per-block CSS for content-page redesign.
   Tokens: --cabp-navy / --cabp-blue / --cabp-teal / --cabp-cream / --cabp-charcoal
   Each block scoped under its own class name.
   ============================================================ */

/* --- Cabp_ProcessStrip --- */
.cabp-process {
    padding: clamp(48px, 6vw, 88px) clamp(16px, 4vw, 48px);
    background: var(--cabp-cream);
    color: var(--cabp-charcoal);
}
.cabp-process--navy {
    background: var(--cabp-navy);
    color: #fff;
}
.cabp-process__head {
    max-width: 720px;
    margin: 0 auto clamp(28px, 4vw, 56px);
    text-align: left;
}
.cabp-process__kicker {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cabp-teal);
    margin: 0 0 .5rem;
    font-weight: 600;
}
.cabp-process--navy .cabp-process__kicker { color: var(--cabp-teal); }
.cabp-process__title {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.15;
    margin: 0 0 .75rem;
    font-weight: 700;
}
.cabp-process__lede {
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0;
    opacity: .85;
}
.cabp-process__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(24px, 3vw, 40px);
}
.cabp-process__step {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 0 0;
    border-top: 1px solid currentColor;
    opacity: .92;
}
.cabp-process__num {
    font-size: clamp(3.5rem, 7vw, 6rem);
    line-height: 1;
    font-weight: 800;
    color: var(--cabp-cream);
    -webkit-text-stroke: 2px var(--cabp-cream);
    -webkit-text-fill-color: transparent;
    margin: 0;
}
.cabp-process__step--hi .cabp-process__num {
    color: var(--cabp-teal);
    -webkit-text-stroke: 0;
    -webkit-text-fill-color: var(--cabp-teal);
}
.cabp-process__step-title {
    font-size: 1.15rem;
    margin: 0;
    font-weight: 700;
    line-height: 1.3;
}
.cabp-process__step-copy {
    margin: 0;
    line-height: 1.6;
    opacity: .8;
}
.cabp-process__step-tag {
    margin: 4px 0 0;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cabp-teal);
    font-weight: 600;
}

/* --- Cabp_LogoWall --- */
.cabp-logowall {
    padding: clamp(48px, 6vw, 80px) clamp(16px, 4vw, 48px);
    background: #fff;
}
.cabp-logowall__head { max-width: 720px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.cabp-logowall__kicker { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cabp-teal); margin: 0 0 .5rem; font-weight: 600; }
.cabp-logowall__title { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; margin: 0; color: var(--cabp-charcoal); font-weight: 700; }
.cabp-logowall__grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-top: 1px solid var(--cabp-cream-mid);
    border-left: 1px solid var(--cabp-cream-mid);
}
@media (max-width: 1024px) { .cabp-logowall__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px)  { .cabp-logowall__grid { grid-template-columns: repeat(3, 1fr); } }
.cabp-logowall__cell {
    aspect-ratio: 5 / 3;
    display: grid; place-items: center;
    padding: 18px;
    border-right: 1px solid var(--cabp-cream-mid);
    border-bottom: 1px solid var(--cabp-cream-mid);
    background: #fff;
    transition: background .2s ease;
}
.cabp-logowall__img {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .65;
    transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}
.cabp-logowall__cell:hover .cabp-logowall__img,
.cabp-logowall__cell:focus-within .cabp-logowall__img {
    filter: none;
    opacity: 1;
    transform: scale(1.03);
}
.cabp-logowall__foot { text-align: center; margin: 24px 0 0; font-size: .9rem; color: var(--cabp-charcoal); opacity: .7; }

/* --- Cabp_SplitCallout --- */
.cabp-splitcta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: clamp(48px, 6vw, 80px) 0 0;
}
@media (max-width: 768px) { .cabp-splitcta { grid-template-columns: 1fr; } }
.cabp-splitcta__half {
    padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 56px);
    background: var(--cabp-cream);
    color: var(--cabp-charcoal);
    display: flex; flex-direction: column; gap: 16px;
}
.cabp-splitcta__half--accent { background: var(--cabp-navy); color: #fff; }
.cabp-splitcta__half--teal   { background: var(--cabp-teal); color: var(--cabp-navy); }
.cabp-splitcta__kicker {
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--cabp-teal); margin: 0; font-weight: 600;
}
.cabp-splitcta__half--accent .cabp-splitcta__kicker { color: var(--cabp-teal); }
.cabp-splitcta__title { font-size: clamp(1.45rem, 2.8vw, 1.95rem); line-height: 1.2; margin: 0; font-weight: 700; }
.cabp-splitcta__copy { font-size: 1rem; line-height: 1.6; margin: 0; opacity: .9; }
.cabp-splitcta__cta {
    align-self: flex-start;
    margin-top: 12px;
    padding: 12px 22px;
    background: var(--cabp-teal);
    color: var(--cabp-navy);
    text-decoration: none;
    font-weight: 700;
    border-radius: 0;
    letter-spacing: .02em;
    border: 2px solid transparent;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cabp-splitcta__half--accent .cabp-splitcta__cta { background: #fff; color: var(--cabp-navy); }
.cabp-splitcta__cta:hover { background: transparent; border-color: currentColor; color: inherit; }

/* --- Cabp_TeamGrid --- */
.cabp-team {
    padding: clamp(56px, 6vw, 88px) clamp(16px, 4vw, 48px);
    background: var(--cabp-cream);
    color: var(--cabp-charcoal);
}
.cabp-team__head { max-width: 720px; margin: 0 auto clamp(32px, 4vw, 56px); }
.cabp-team__kicker { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cabp-teal); font-weight: 600; margin: 0 0 .5rem; }
.cabp-team__title { font-size: clamp(1.8rem, 3.2vw, 2.4rem); line-height: 1.2; margin: 0 0 .75rem; font-weight: 700; }
.cabp-team__lede { font-size: 1rem; line-height: 1.6; margin: 0; opacity: .8; }
.cabp-team__grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
@media (max-width: 1024px) { .cabp-team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .cabp-team__grid { grid-template-columns: 1fr; } }
.cabp-team__member {
    position: relative;
    padding: 36px 28px 28px;
    background: #fff;
    border: 1px solid var(--cabp-cream-mid);
    display: flex; flex-direction: column; gap: 8px;
    overflow: hidden;
}
.cabp-team__member--navy { background: var(--cabp-navy); color: #fff; border-color: var(--cabp-navy); }
.cabp-team__member--teal { background: var(--cabp-teal); color: var(--cabp-navy); border-color: var(--cabp-teal); }
.cabp-team__corner {
    position: absolute; top: 0; left: 0;
    width: 56px; height: 4px;
    background: linear-gradient(90deg, var(--cabp-blue), var(--cabp-teal));
}
.cabp-team__initials {
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: 1;
    font-weight: 800;
    color: var(--cabp-cream);
    -webkit-text-stroke: 2px var(--cabp-cream);
    -webkit-text-fill-color: transparent;
    letter-spacing: .04em;
    margin: 0 0 8px;
}
.cabp-team__member--teal .cabp-team__initials { -webkit-text-stroke: 2px var(--cabp-navy); -webkit-text-fill-color: transparent; color: var(--cabp-navy); }
.cabp-team__name { margin: 0; font-size: 1.2rem; font-weight: 700; }
.cabp-team__role { margin: 0; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.cabp-team__bio { margin: 8px 0 0; font-size: .92rem; line-height: 1.55; opacity: .85; }
.cabp-team__meta { margin: 12px 0 0; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.cabp-team__dot { margin: 0 .4em; }

/* --- Cabp_Timeline --- */
.cabp-timeline {
    padding: clamp(56px, 6vw, 96px) clamp(16px, 4vw, 48px);
    background: var(--cabp-navy);
    color: #fff;
}
.cabp-timeline__head { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); }
.cabp-timeline__kicker { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cabp-teal); font-weight: 600; margin: 0 0 .5rem; }
.cabp-timeline__title { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin: 0 0 .75rem; font-weight: 700; line-height: 1.2; }
.cabp-timeline__lede { margin: 0; opacity: .8; line-height: 1.6; }
.cabp-timeline__list {
    list-style: none; padding: 0; margin: 0;
    max-width: 980px; margin-inline: auto;
    display: flex; flex-direction: column; gap: 12px;
}
.cabp-timeline__milestone {
    position: relative;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
    padding: 28px 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 768px) { .cabp-timeline__milestone { grid-template-columns: 100px 1fr; } }
.cabp-timeline__spine { display: none; }
.cabp-timeline__year {
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 800;
    line-height: 1;
    color: #fff;
    -webkit-text-stroke: 2px #fff;
    -webkit-text-fill-color: transparent;
    letter-spacing: -.02em;
}
.cabp-timeline__milestone--hi .cabp-timeline__year {
    color: var(--cabp-teal);
    -webkit-text-stroke: 0;
    -webkit-text-fill-color: var(--cabp-teal);
}
.cabp-timeline__tag {
    display: inline-block;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cabp-teal);
    padding: 4px 10px;
    border: 1px solid var(--cabp-teal);
    margin-bottom: 10px;
    font-weight: 600;
}
.cabp-timeline__milestone-title { font-size: clamp(1.1rem, 2vw, 1.4rem); margin: 0 0 6px; font-weight: 700; line-height: 1.3; }
.cabp-timeline__desc { margin: 0; opacity: .8; line-height: 1.6; }

/* --- Cabp_DcCardGrid --- */
.cabp-dcs { padding: clamp(56px, 6vw, 96px) clamp(16px, 4vw, 48px); background: var(--cabp-cream); color: var(--cabp-charcoal); }
.cabp-dcs__head { max-width: 720px; margin: 0 auto clamp(32px, 4vw, 56px); }
.cabp-dcs__kicker { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cabp-teal); font-weight: 600; margin: 0 0 .5rem; }
.cabp-dcs__title { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin: 0 0 .75rem; font-weight: 700; line-height: 1.2; }
.cabp-dcs__lede { margin: 0; opacity: .8; line-height: 1.6; }
.cabp-dcs__board {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px;
}
@media (max-width: 1024px) { .cabp-dcs__board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .cabp-dcs__board { grid-template-columns: 1fr; } }
.cabp-dc {
    position: relative;
    padding: 32px 24px 24px;
    background: #fff;
    border: 1px solid var(--cabp-cream-mid);
    display: flex; flex-direction: column; gap: 16px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.cabp-dc:hover { transform: translateY(-3px); box-shadow: 4px 4px 0 var(--cabp-navy); }
.cabp-dc--hq { background: var(--cabp-navy); color: #fff; border-color: var(--cabp-navy); grid-column: span 2; }
@media (max-width: 1024px) { .cabp-dc--hq { grid-column: span 2; } }
@media (max-width: 600px)  { .cabp-dc--hq { grid-column: span 1; } }
.cabp-dc__corner {
    position: absolute; top: 0; left: 0;
    width: 56px; height: 4px;
    background: linear-gradient(90deg, var(--cabp-blue), var(--cabp-teal));
}
.cabp-dc__stamp {
    position: absolute; top: 12px; right: 12px;
    background: var(--cabp-teal); color: var(--cabp-navy);
    font-size: .7rem; letter-spacing: .14em;
    padding: 4px 10px;
    font-weight: 800;
    transform: rotate(-6deg);
}
.cabp-dc__code { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; font-weight: 600; }
.cabp-dc__name { margin: 4px 0 0; font-size: 1.3rem; font-weight: 700; }
.cabp-dc__sub { margin: 4px 0 0; font-size: .85rem; opacity: .7; }
.cabp-dc__meta { margin: 0; display: grid; gap: 10px; }
.cabp-dc__meta > div { display: grid; grid-template-columns: 88px 1fr; gap: 12px; font-size: .9rem; padding: 8px 0; border-top: 1px solid currentColor; opacity: .9; }
.cabp-dc__meta > div:first-child { border-top: none; padding-top: 0; }
.cabp-dc__meta dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .55; margin: 0; }
.cabp-dc__meta dd { margin: 0; }
.cabp-dc__meta dd a { color: inherit; text-decoration: underline; }
.cabp-dc__tz { display: inline-block; margin-left: 6px; font-size: .68rem; letter-spacing: .12em; color: var(--cabp-teal); padding: 2px 6px; border: 1px solid var(--cabp-teal); }

/* --- Cabp_OpenRolesList --- */
.cabp-roles { padding: clamp(56px, 6vw, 96px) clamp(16px, 4vw, 48px); background: #fff; color: var(--cabp-charcoal); }
.cabp-roles__head { max-width: 720px; margin: 0 auto clamp(32px, 4vw, 56px); }
.cabp-roles__kicker { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cabp-teal); font-weight: 600; margin: 0 0 .5rem; }
.cabp-roles__title { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin: 0 0 .75rem; font-weight: 700; line-height: 1.2; }
.cabp-roles__lede { margin: 0; opacity: .8; line-height: 1.6; }
.cabp-roles__grid {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 18px;
}
@media (max-width: 1024px) { .cabp-roles__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .cabp-roles__grid { grid-template-columns: 1fr; } }
.cabp-roles__link {
    display: flex; flex-direction: column; gap: 12px;
    padding: 24px 22px;
    background: var(--cabp-cream);
    border: 1px solid var(--cabp-cream-mid);
    text-decoration: none; color: inherit;
    min-height: 180px;
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.cabp-roles__link:hover { background: #fff; border-color: var(--cabp-navy); transform: translateY(-3px); }
.cabp-roles__top { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.cabp-roles__type { padding: 3px 8px; font-weight: 700; }
.cabp-roles__type--fulltime { background: var(--cabp-navy); color: #fff; }
.cabp-roles__type--parttime { background: var(--cabp-cream-mid); color: var(--cabp-navy); }
.cabp-roles__type--apprentice { background: var(--cabp-teal); color: var(--cabp-navy); }
.cabp-roles__posted { opacity: .6; }
.cabp-roles__role-title { margin: 4px 0 auto; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.cabp-roles__meta { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; opacity: .75; }
.cabp-roles__arrow { font-weight: 700; color: var(--cabp-teal); }
.cabp-roles__more { text-align: center; margin: 24px 0 0; }
.cabp-roles__more-link { color: var(--cabp-navy); text-decoration: none; font-weight: 600; border-bottom: 1px solid currentColor; }

/* --- Cabp_ProductShowcase (Canopy line) --- */
.cabp-showcase { padding: clamp(56px, 6vw, 96px) clamp(16px, 4vw, 48px); background: #fff; color: var(--cabp-charcoal); }
.cabp-showcase__head { max-width: 720px; margin: 0 auto clamp(32px, 4vw, 56px); }
.cabp-showcase__kicker { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cabp-teal); font-weight: 600; margin: 0 0 .5rem; }
.cabp-showcase__title { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin: 0 0 .75rem; font-weight: 700; line-height: 1.2; }
.cabp-showcase__lede { margin: 0; opacity: .8; line-height: 1.6; }
.cabp-showcase__grid {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 24px;
}
@media (max-width: 1024px) { .cabp-showcase__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .cabp-showcase__grid { grid-template-columns: 1fr; } }
.cabp-showcase__card {
    background: var(--cabp-cream);
    border: 1px solid var(--cabp-cream-mid);
    display: flex; flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.cabp-showcase__card:hover { transform: translateY(-4px); box-shadow: 4px 4px 0 var(--cabp-navy); }
.cabp-showcase__img { aspect-ratio: 4/3; background: #fff; display: grid; place-items: center; overflow: hidden; }
.cabp-showcase__img img { width: 100%; height: 100%; object-fit: cover; }
.cabp-showcase__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; }
.cabp-showcase__rank { display: flex; align-items: center; gap: 8px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.cabp-showcase__rank-tier { background: var(--cabp-teal); color: var(--cabp-navy); padding: 2px 8px; }
.cabp-showcase__rank-dot { width: 4px; height: 4px; background: var(--cabp-navy); border-radius: 50%; opacity: .5; }
.cabp-showcase__rank-cat { color: var(--cabp-charcoal); opacity: .7; }
.cabp-showcase__code { margin: 2px 0 0; font-size: .92rem; font-weight: 700; letter-spacing: .04em; color: var(--cabp-charcoal); opacity: .8; }
.cabp-showcase__name { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.cabp-showcase__spec { margin: 4px 0 0; font-size: .9rem; line-height: 1.5; opacity: .82; }
.cabp-showcase__foot { margin-top: 12px; }
.cabp-showcase__cta { color: var(--cabp-navy); text-decoration: none; font-weight: 600; font-size: .9rem; border-bottom: 1px solid var(--cabp-teal); }
.cabp-showcase__foot-text { text-align: center; margin: 32px 0 0; font-size: .92rem; opacity: .75; }

/* --- Cabp_DocumentDownload --- */
.cabp-doc { padding: clamp(36px, 5vw, 64px) clamp(16px, 4vw, 48px); }
.cabp-doc__card {
    max-width: 980px; margin: 0 auto;
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 28px;
    background: var(--cabp-cream);
    border: 1px solid var(--cabp-cream-mid);
    border-left: 4px solid var(--cabp-teal);
}
@media (max-width: 600px) { .cabp-doc__card { grid-template-columns: 1fr; text-align: left; } }
.cabp-doc__icon { width: 64px; height: 64px; color: var(--cabp-navy); }
.cabp-doc__icon svg { width: 100%; height: 100%; }
.cabp-doc__kicker { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cabp-teal); font-weight: 600; margin: 0 0 6px; }
.cabp-doc__title { margin: 0 0 6px; font-size: 1.2rem; font-weight: 700; }
.cabp-doc__copy { margin: 0 0 6px; line-height: 1.55; opacity: .85; }
.cabp-doc__meta { margin: 0; font-size: .82rem; opacity: .65; letter-spacing: .04em; }
.cabp-doc__cta {
    background: var(--cabp-navy); color: #fff;
    padding: 14px 22px;
    text-decoration: none; font-weight: 700; letter-spacing: .02em;
    border: 2px solid var(--cabp-navy);
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.cabp-doc__cta:hover { background: var(--cabp-teal); color: var(--cabp-navy); border-color: var(--cabp-teal); }

/* --- Cabp_ContactChannelGrid --- */
.cabp-channels { padding: clamp(56px, 6vw, 96px) clamp(16px, 4vw, 48px); background: var(--cabp-cream); color: var(--cabp-charcoal); }
.cabp-channels__head { max-width: 720px; margin: 0 auto clamp(32px, 4vw, 56px); }
.cabp-channels__kicker { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cabp-teal); font-weight: 600; margin: 0 0 .5rem; }
.cabp-channels__title { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin: 0 0 .75rem; font-weight: 700; line-height: 1.2; }
.cabp-channels__lede { margin: 0; opacity: .8; line-height: 1.6; }
.cabp-channels__grid {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 18px;
}
@media (max-width: 1024px) { .cabp-channels__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .cabp-channels__grid { grid-template-columns: 1fr; } }
.cabp-channels__channel {
    background: #fff;
    border: 1px solid var(--cabp-cream-mid);
    padding: 28px 24px;
    display: flex; flex-direction: column; gap: 12px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.cabp-channels__channel:hover { transform: translateY(-3px); box-shadow: 4px 4px 0 var(--cabp-navy); }
.cabp-channels__plate { display: flex; align-items: center; justify-content: space-between; }
.cabp-channels__index { font-size: .9rem; font-weight: 700; color: var(--cabp-teal); letter-spacing: .12em; }
.cabp-channels__glyph { width: 36px; height: 36px; color: var(--cabp-navy); }
.cabp-channels__glyph svg { width: 100%; height: 100%; }
.cabp-channels__name { margin: 4px 0 0; font-size: 1.25rem; font-weight: 700; }
.cabp-channels__desc { margin: 0; font-size: .9rem; line-height: 1.5; opacity: .8; }
.cabp-channels__contacts { margin: 8px 0 0; display: grid; gap: 6px; font-size: .85rem; }
.cabp-channels__contacts > div { display: grid; grid-template-columns: 70px 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid var(--cabp-cream-mid); }
.cabp-channels__contacts > div:first-child { border-top: none; padding-top: 0; }
.cabp-channels__contacts dt { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: .55; margin: 0; }
.cabp-channels__contacts dd { margin: 0; }
.cabp-channels__contacts dd a { color: var(--cabp-navy); }
.cabp-channels__sla { margin: 8px 0 0; padding: 8px 12px; background: var(--cabp-cream); font-size: .78rem; line-height: 1.4; display: flex; gap: 8px; align-items: center; }
.cabp-channels__sla-tag { background: var(--cabp-teal); color: var(--cabp-navy); padding: 2px 6px; font-weight: 800; letter-spacing: .1em; font-size: .68rem; }

/* --- Cabp_ProductTOC Tabs variant --- */
.cabp-pdp-toc--tabs { border-bottom: 1px solid var(--cabp-cream-mid); margin: 24px 0 0; padding: 0; }
.cabp-pdp-toc--tabs .cabp-pdp-toc__inner {
    display: flex; gap: 0; flex-wrap: wrap; overflow-x: auto;
}
.cabp-pdp-toc__tab {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 22px;
    color: var(--cabp-charcoal); text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: border-color .2s, color .2s, background .2s;
    font-weight: 600;
}
.cabp-pdp-toc__tab:hover { color: var(--cabp-navy); background: var(--cabp-cream); border-color: var(--cabp-cream-mid); }
.cabp-pdp-toc__tab.is-active,
.cabp-pdp-toc__tab:focus { border-color: var(--cabp-teal); color: var(--cabp-navy); }
.cabp-pdp-toc__num { font-size: .7rem; letter-spacing: .14em; color: var(--cabp-teal); font-weight: 700; }
.cabp-pdp-toc__lbl { font-size: .92rem; letter-spacing: .02em; }

/* --- Cabp_ProductPimDetails customer-SKU flag-chip treatment (Phase G PDP retouch) --- */
.cabp-product-pim-details .row--customer,
.cabp-product-pim-details [data-row="customer-sku"] {
    position: relative;
    background: var(--cabp-navy);
    color: #fff;
    padding: 12px 14px;
    margin: 0 0 8px;
    border-left: 4px solid var(--cabp-teal);
}
.cabp-product-pim-details .row--customer dt,
.cabp-product-pim-details [data-row="customer-sku"] dt {
    color: var(--cabp-teal);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.cabp-product-pim-details .row--customer dd,
.cabp-product-pim-details [data-row="customer-sku"] dd {
    color: #fff;
    font-weight: 700;
    margin: 2px 0 0;
}

/* --- Cabp PLP Row layout (sibling template) --- */
.cabp-plp__rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cabp-plp__row {
    position: relative; display: block;
    border: 1px solid var(--cabp-cream-mid);
    padding: 16px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.cabp-plp__row:hover { border-color: var(--cabp-navy); box-shadow: 2px 2px 0 var(--cabp-cream-mid); }
/* PLP category header — Swift renders the H1 with Bootstrap .h3 utility (24px).
   On a category landing that reads small; bump to a proper hero scale and
   keep the family aligned with the rest of the brand stack. */
main:has(.cabp-plp) h1.h3,
main:has(.cabp-plp) h1 {
    font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif !important;
    font-size: clamp(2rem, 4vw, 2.75rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--cabp-navy);
}

/* Sibling-category pills — Bootstrap btn-secondary rounded-pill renders as
   chunky solid-navy pills. Trade-PLP wants something quieter: thin outline
   chips that don't compete with the actual product cards. */
.nav-pills .btn.btn-secondary.rounded-pill,
.nav-pills .nav-link.btn.btn-secondary {
    background: transparent !important;
    color: var(--cabp-navy) !important;
    border: 1px solid var(--cabp-cream-mid, #E7E1D5) !important;
    font-weight: 600;
    letter-spacing: 0;
    padding: 0.35rem 0.85rem;
}
.nav-pills .btn.btn-secondary.rounded-pill:hover,
.nav-pills .nav-link.btn.btn-secondary:hover {
    background: var(--cabp-navy) !important;
    color: #fff !important;
    border-color: var(--cabp-navy) !important;
}

.cabp-plp__row-link { position: absolute; inset: 0; z-index: 1; }
.cabp-plp__row-grid {
    position: relative;
    z-index: 2;
    pointer-events: none;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    align-items: center;
}
.cabp-plp__row-actions,
.cabp-plp__row-actions *,
.cabp-plp__row-favorite,
.cabp-plp__row-favorite * {
    pointer-events: auto;
}
.cabp-plp__row img,
.cabp-plp__row [data-swift-product-image] img,
.cabp-plp__row picture img {
    max-width: 200px;
    max-height: 200px;
    height: auto;
    width: auto;
    object-fit: contain;
}
@media (max-width: 600px) {
    .cabp-plp__row-grid { grid-template-columns: 96px 1fr; gap: 12px; }
    .cabp-plp__row img,
    .cabp-plp__row [data-swift-product-image] img,
    .cabp-plp__row picture img { max-width: 96px; max-height: 96px; }
}

/* =========================================================================
   Phase G AUDIT-2 overrides (2026-05-15)
   Top-10 fix list from notes/phase-G/AUDIT-2.md applied here so the original
   rules stay clean and the fix-set is discoverable for future tuning.
   ========================================================================= */

/* 1. Heading-color clobber on dark sections — explicit overrides per region.
   The global at line 64 paints h1..h4 cabp-charcoal; these regions need cream. */
.cabp-process--navy h1, .cabp-process--navy h2, .cabp-process--navy h3, .cabp-process--navy h4,
.cabp-process--navy .cabp-process__title, .cabp-process--navy .cabp-process__step-title,
.cabp-timeline h1, .cabp-timeline h2, .cabp-timeline h3, .cabp-timeline h4,
.cabp-timeline .cabp-timeline__title, .cabp-timeline .cabp-timeline__milestone-title,
.cabp-team__member--navy h1, .cabp-team__member--navy h2, .cabp-team__member--navy h3, .cabp-team__member--navy h4,
.cabp-team__member--navy .cabp-team__name,
.cabp-team__member--teal h1, .cabp-team__member--teal h2, .cabp-team__member--teal h3, .cabp-team__member--teal h4,
.cabp-team__member--teal .cabp-team__name,
.cabp-splitcta__half--accent h1, .cabp-splitcta__half--accent h2, .cabp-splitcta__half--accent h3, .cabp-splitcta__half--accent h4,
.cabp-splitcta__half--accent .cabp-splitcta__title,
.cabp-dc--hq h1, .cabp-dc--hq h2, .cabp-dc--hq h3, .cabp-dc--hq h4,
.cabp-dc--hq .cabp-dc__name {
    color: #fff;
}

/* The Canopy download CTA renders as <a> inside a navy card. */
.cabp-doc .cabp-doc__cta { color: var(--cabp-teal); }
.cabp-doc .cabp-doc__cta:hover { color: #fff; }

/* 2. Paragraph-color clobber on dark sections — inverse overrides. */
.cabp-process--navy p, .cabp-process--navy .cabp-process__kicker, .cabp-process--navy .cabp-process__lede,
.cabp-process--navy .cabp-process__step-copy, .cabp-process--navy .cabp-process__step-tag,
.cabp-timeline p, .cabp-timeline .cabp-timeline__kicker, .cabp-timeline .cabp-timeline__lede,
.cabp-timeline .cabp-timeline__desc,
.cabp-team__member--navy p, .cabp-team__member--navy .cabp-team__role,
.cabp-team__member--navy .cabp-team__bio, .cabp-team__member--navy .cabp-team__meta,
.cabp-team__member--teal p, .cabp-team__member--teal .cabp-team__role,
.cabp-team__member--teal .cabp-team__bio, .cabp-team__member--teal .cabp-team__meta,
.cabp-splitcta__half--accent p, .cabp-splitcta__half--accent .cabp-splitcta__kicker,
.cabp-splitcta__half--accent .cabp-splitcta__copy,
.cabp-dc--hq p, .cabp-dc--hq .cabp-dc__sub {
    color: rgba(255,255,255,.85);
}

/* 4. Cream-variant team initials were cream-on-white (invisible). */
.cabp-team__member--cream {
    background: var(--cabp-cream);
    border-color: var(--cabp-cream-mid, var(--cabp-rule-soft, #dcd6c7));
}
.cabp-team__member--cream .cabp-team__initials {
    color: var(--cabp-navy);
    -webkit-text-stroke: 2px var(--cabp-navy);
    -webkit-text-fill-color: transparent;
}

/* 6. Logo wall cells render 0px on initial paint (lazy-load race). */
.cabp-logowall__cell { min-height: 80px; }

/* 7. Small teal kickers on white — bump weight + size, deepen color. */
.cabp-logowall__kicker,
.cabp-splitcta__half--cream .cabp-splitcta__kicker,
.cabp-dc__tz,
.cabp-channels__index {
    color: var(--cabp-blue);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .12em;
}
.cabp-channels__index { font-size: 16px; font-weight: 800; }

/* 5/cluster E. Testimonial role gray below AA-4.5 — bump contrast. */
.cabp-testimonial__role,
[data-cabp-testimonial] .role,
[data-cabp-testimonial] .meta,
.testimonial__role {
    color: var(--cabp-charcoal);
    opacity: .85;
}

/* 9. Careers + Home process strip — kill top padding overflow that created
   ~120px of dead space below the hero. */
.cabp-process--navy { padding-block: clamp(40px, 4.5vw, 64px); }

/* 10. PDP customer-pricing PIM row — solidify the bg + brighten text. */
.cabp-pdp-pim__row--customer {
    background: var(--cabp-cream);
}
.cabp-pdp-pim__row--customer dt {
    color: var(--cabp-blue);
}
.cabp-pdp-pim__row--customer dd.font-monospace,
.cabp-pdp-pim__row--customer dd {
    color: var(--cabp-blue);
    font-weight: 700;
}

/* +POINTS overlay badge — deepen the green so the 11.52px label clears AA. */
.cabp-pdp-points-overlay { background: #1f7a23; }

/* =========================================================================
   Phase G AUDIT-3 — PLP row enhancement (2026-05-15)
   Trade-dense row content: brand chip, SKU/MPN line, spec, stock-at-DC,
   qty-break, +points, qty stepper + add-to-cart + favorite. The original
   row layout (2-col 200px/1fr) is overridden here to 4-col image/main/price/actions.
   ========================================================================= */
.cabp-plp__row-grid {
    grid-template-columns: 200px 1fr 180px 180px;
    column-gap: 24px;
    row-gap: 8px;
    align-items: center;
}
.cabp-plp__row-image {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cabp-plp__row-image img {
    transition: transform .25s ease;
}
.cabp-plp__row:hover .cabp-plp__row-image img {
    transform: scale(1.04);
}
.cabp-plp__row-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.cabp-plp__row-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cabp-blue, #163563);
}
.cabp-plp__row-brand-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.cabp-plp__row-title {
    margin: 0;
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--cabp-navy, #0c2240);
}
.cabp-plp__row-skuline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cabp-charcoal, #2a2a2a);
    opacity: .8;
}
.cabp-plp__row-divider {
    opacity: .5;
}
.cabp-plp__row-spec {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, monospace);
    font-size: 12px;
    line-height: 1.4;
    color: var(--cabp-charcoal, #2a2a2a);
    opacity: .85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cabp-plp__row-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cabp-charcoal, #2a2a2a);
}
.cabp-plp__row-stock-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cabp-teal, #2a857d);
    box-shadow: 0 0 0 2px rgba(42, 133, 125, .18);
}
.cabp-plp__row-stock.is-outofstock .cabp-plp__row-stock-dot {
    background: #a33;
    box-shadow: 0 0 0 2px rgba(170, 51, 51, .18);
}
.cabp-plp__row-pricecol {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    text-align: right;
}
.cabp-plp__row-price {
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--cabp-navy, #0c2240);
    font-variant-numeric: tabular-nums;
}
.cabp-plp__row-qtybreak {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--cabp-charcoal, #2a2a2a);
    opacity: .8;
}
.cabp-plp__row-points {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cabp-teal, #2a857d);
}
/* Actions column sits ABOVE the absolute row-link so qty / add / favorite are clickable. */
.cabp-plp__row-actions {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    pointer-events: auto;
}
.cabp-plp__row-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cabp-plp__row-form > div:first-of-type {
    align-self: flex-start;
}
.cabp-plp__row-addbtn {
    white-space: nowrap;
    width: 100%;
}
.cabp-plp__row-favorite {
    display: flex;
    justify-content: center;
}
.cabp-plp__row-favorite .swift_favorites-button {
    padding: 4px 8px;
}

/* Tighten on narrow viewports. */
@media (max-width: 1100px) {
    .cabp-plp__row-grid {
        grid-template-columns: 140px 1fr 140px 150px;
        column-gap: 16px;
    }
    .cabp-plp__row-title { font-size: 18px; }
    .cabp-plp__row-price { font-size: 20px; }
}
@media (max-width: 768px) {
    .cabp-plp__row-grid {
        grid-template-columns: 96px 1fr;
        row-gap: 10px;
    }
    .cabp-plp__row-pricecol,
    .cabp-plp__row-actions {
        grid-column: 1 / -1;
        align-items: stretch;
        text-align: left;
    }
}

/* =========================================================================
   Phase G AUDIT-3 overrides (2026-05-15)
   Root cause: AUDIT-2 selectors lost specificity to
     body.cabp-content-page main > section[data-swift-gridrow="1Column"] h2/p
   (spec 0,2,3 with attribute) vs AUDIT-2's bare `.cabp-block h2` (spec 0,2,0).
   Fix: re-prefix every dark-section override with the same wrapper to win on
   specificity (0,4,4 >> 0,2,3). No !important needed.
   ========================================================================= */

/* FIX-1 — wrapper-prefixed heading overrides (defeats line 1931 clobber). */
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-process--navy h1,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-process--navy h2,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-process--navy h3,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-process--navy h4,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-process--navy .cabp-process__title,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-process--navy .cabp-process__step-title,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-timeline h1,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-timeline h2,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-timeline h3,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-timeline h4,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-timeline .cabp-timeline__title,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-timeline .cabp-timeline__milestone-title,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-team__member--navy h1,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-team__member--navy h2,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-team__member--navy h3,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-team__member--navy h4,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-team__member--navy .cabp-team__name,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-splitcta__half--accent h1,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-splitcta__half--accent h2,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-splitcta__half--accent h3,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-splitcta__half--accent h4,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-splitcta__half--accent .cabp-splitcta__title,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-dc--hq h1,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-dc--hq h2,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-dc--hq h3,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-dc--hq h4,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-dc--hq .cabp-dc__name {
    color: #fff;
}

/* FIX-2 — wrapper-prefixed paragraph overrides (defeats line 1939 clobber). */
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-process--navy p,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-process--navy .cabp-process__kicker,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-process--navy .cabp-process__lede,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-process--navy .cabp-process__step-copy,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-process--navy .cabp-process__step-tag,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-timeline p,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-timeline .cabp-timeline__kicker,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-timeline .cabp-timeline__lede,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-timeline .cabp-timeline__desc,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-team__member--navy p,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-team__member--navy .cabp-team__role,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-team__member--navy .cabp-team__bio,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-team__member--navy .cabp-team__meta,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-splitcta__half--accent p,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-splitcta__half--accent .cabp-splitcta__kicker,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-splitcta__half--accent .cabp-splitcta__copy,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-dc--hq p,
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-dc--hq .cabp-dc__sub {
    color: rgba(255,255,255,.85);
}

/* FIX-3 — teal-card team member text is too light (white-on-teal = 2.41). Flip to navy. */
.cabp-team__member--teal .cabp-team__name { color: var(--cabp-navy); }
.cabp-team__member--teal .cabp-team__role,
.cabp-team__member--teal .cabp-team__bio,
.cabp-team__member--teal .cabp-team__meta,
.cabp-team__member--teal .cabp-team__meta span {
    color: var(--cabp-navy);
    opacity: 1;
}

/* FIX-4 — Locations HQ card: phone link + tz pill were navy-on-navy. */
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-dc--hq dd a {
    color: var(--cabp-teal);
}
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-dc--hq dd a:hover {
    color: #fff;
}
.cabp-dc--hq .cabp-dc__tz {
    color: var(--cabp-cream);
    background: rgba(255,255,255,.12);
}

/* FIX-5 — Canopy "Download PDF" CTA link inside navy doc card. */
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-doc .cabp-doc__cta {
    color: var(--cabp-teal);
}
body.cabp-content-page main > section[data-swift-gridrow="1Column"] .cabp-doc .cabp-doc__cta:hover {
    color: #fff;
}

/* FIX-6 — Careers progression arrow was teal-on-cream (2.16). */
.cabp-roles__arrow { color: var(--cabp-blue); }

/* PDP thumbnail strip — Swift's Swift-v2_ProductMedia template gives thumbs
   width via clamp + inline --bs-aspect-ratio, but Bootstrap's .ratio class
   doesn't always carry through, so thumbs blow up to source-image height.
   Force a square box + contain the image. */
[id^="SmallScreenImagesThumbnails_"] {
    align-items: flex-start;
}
[id^="SmallScreenImagesThumbnails_"] > div {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    max-height: 8rem;
}
[id^="SmallScreenImagesThumbnails_"] > div > img,
[id^="SmallScreenImagesThumbnails_"] > div picture,
[id^="SmallScreenImagesThumbnails_"] > div video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Home page (tag Home; was PageID 96, 2026-10-10 navtags) — tighten Swift's data-dw-row-space=6 default (96px each
   side = 192px between sections). Trade-B2B reads as more confident with a
   tighter vertical rhythm. ~64px top + bottom = 128px between sections. */
body.cabp-tag-home main > section[data-swift-gridrow][data-dw-row-space-top="6"] {
    --dw-row-space-top: clamp(2rem, 4vw, 4rem);
}
body.cabp-tag-home main > section[data-swift-gridrow][data-dw-row-space-bottom="6"] {
    --dw-row-space-bottom: clamp(2rem, 4vw, 4rem);
}
/* Full-bleed dark band (FAST hero, Canopy ribbon, How-CABP-works) wants
   to keep its dramatic internal padding but should still butt up against
   neighbours without 96px of cream sandwich. */
body.cabp-tag-home main > section[data-swift-gridrow][data-dw-colorscheme="dark"][data-dw-row-space-top="6"],
body.cabp-tag-home main > section[data-swift-gridrow][data-dw-colorscheme="dark"][data-dw-row-space-bottom="6"] {
    --dw-row-space-top: clamp(2.5rem, 5vw, 5rem);
    --dw-row-space-bottom: clamp(2.5rem, 5vw, 5rem);
}

/* FIX-7 — PDP standard-price strike + tier footnote bumped above AA. */
.cabp-pdp-standard-price > span,
.cabp-pdp-standard-price > span.text-decoration-line-through {
    color: var(--cabp-charcoal);
}
.cabp-tier-foot { color: var(--cabp-charcoal); }

/* ============== ACCOUNT DASHBOARD TILES — Cabp_AccountTiles ============== */
.cabp-acct-tiles {
    padding: clamp(8px, 2vw, 16px) 0 clamp(24px, 3vw, 40px);
}
.cabp-acct-tiles__head {
    margin: 0 0 clamp(20px, 2.5vw, 28px);
}
.cabp-acct-tiles__kicker {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cabp-teal);
    margin: 0 0 .35rem;
    font-weight: 600;
}
.cabp-acct-tiles__title {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.2;
    margin: 0;
    color: var(--cabp-charcoal);
    font-weight: 700;
}
.cabp-acct-tiles__lede {
    margin: .5rem 0 0;
    color: var(--cabp-charcoal);
    opacity: .75;
    font-size: .95rem;
    max-width: 64ch;
}
.cabp-acct-tiles__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.cabp-acct-tile {
    background: #fff;
    border: 1px solid var(--cabp-cream-mid, #E7E1D5);
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cabp-acct-tile:hover {
    border-color: var(--cabp-teal);
    box-shadow: 0 4px 16px rgba(15, 52, 75, 0.06);
    transform: translateY(-1px);
}
.cabp-acct-tile__link {
    display: grid;
    grid-template-columns: 44px 1fr 18px;
    align-items: center;
    gap: 14px;
    padding: 18px 18px;
    text-decoration: none;
    color: inherit;
    min-height: 88px;
}
.cabp-acct-tile__icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cabp-cream, #F5F2EC);
    color: var(--cabp-navy);
    font-size: 22px;
    line-height: 1;
}
.cabp-acct-tile__icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}
.cabp-acct-tile__chev svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}
.cabp-acct-tile:hover .cabp-acct-tile__icon {
    background: var(--cabp-navy);
    color: #fff;
}
.cabp-acct-tile__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.cabp-acct-tile__title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--cabp-charcoal);
    line-height: 1.25;
}
.cabp-acct-tile__desc {
    font-size: .85rem;
    color: var(--cabp-charcoal);
    opacity: .65;
    line-height: 1.35;
}
.cabp-acct-tile__chev {
    color: var(--cabp-charcoal);
    opacity: .35;
    font-size: 20px;
    line-height: 1;
    transition: transform .15s ease, opacity .15s ease, color .15s ease;
}
.cabp-acct-tile:hover .cabp-acct-tile__chev {
    color: var(--cabp-teal);
    opacity: 1;
    transform: translateX(2px);
}

/* ============================================================
   +POINTS (100) & Canopy (103) lead with a full-bleed visual
   hero, not a centered text lead. The shared content-page rule
   gives the first section a cream intro-banner with top padding;
   on these two that padding reads as a white bar under the nav.
   Drop the banner treatment so the hero butts the header.
   ============================================================ */
body.cabp-tag-pluspoints.cabp-content-page main > section[data-swift-gridrow="1Column"]:first-of-type,
body.cabp-tag-canopy.cabp-content-page main > section[data-swift-gridrow="1Column"]:first-of-type {
    background: none;
    padding-block: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

/* Canopy (103) hero slider — the CardCoverFull template bakes a
   bottom-black gradient overlay inline. Drop it and darken the
   photography itself so the washed-out product shots read richer;
   the white caption keeps a shadow so it stays legible. */
body.cabp-tag-canopy .swiffy-slider .card-img-overlay {
    background-image: none !important;
}
body.cabp-tag-canopy .swiffy-slider .card-img {
    filter: brightness(.58) contrast(1.05) saturate(1.1);
}
body.cabp-tag-canopy .swiffy-slider .card-text,
body.cabp-tag-canopy .swiffy-slider .card-text :is(h1, h2, h3, h4, h5, h6, p, a, span) {
    color: #fff;
}
body.cabp-tag-canopy .swiffy-slider .card-text {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .65), 0 4px 22px rgba(0, 0, 0, .8);
}
body.cabp-tag-canopy .swiffy-slider .card-text h3 {
    font-size: clamp(1.6rem, 2.6vw, 2.15rem);
    line-height: 1.15;
    letter-spacing: -.01em;
}

/* ============================================================
   +POINTS Inspiring Stories — Swift-v2_PostList / CabpStoryGrid.
   Editorial article cards: photo + title + teaser. Generous gap
   between cards; no box border framing the text.
   ============================================================ */
.cabp-story-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.75rem);
}
@media (min-width: 576px) {
    .cabp-story-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .cabp-story-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
    .cabp-story-grid { grid-template-columns: repeat(5, 1fr); }
}
.cabp-story-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.cabp-story-card__media {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 16 / 9;
    background: var(--cabp-cream);
}
.cabp-story-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.cabp-story-card:hover .cabp-story-card__media img {
    transform: scale(1.04);
}
.cabp-story-card__body {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1rem .25rem 0;
}
.cabp-story-card__title {
    display: block;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--cabp-navy);
}
.cabp-story-card:hover .cabp-story-card__title {
    color: var(--cabp-blue);
}
.cabp-story-card__text {
    display: block;
    color: var(--cabp-slate);
    font-size: .95rem;
    line-height: 1.55;
}

/* +POINTS story article pages — left-align the body copy; the shared
   content-page rule centres a page's first section as a hero. */
body.cabp-content-page.cabp-tag-cabppointsstory1 main > section[data-swift-gridrow="1Column"]:first-of-type [data-swift-text],
body.cabp-content-page.cabp-tag-cabppointsstory2 main > section[data-swift-gridrow="1Column"]:first-of-type [data-swift-text],
body.cabp-content-page.cabp-tag-cabppointsstory3 main > section[data-swift-gridrow="1Column"]:first-of-type [data-swift-text],
body.cabp-content-page.cabp-tag-cabppointsstory4 main > section[data-swift-gridrow="1Column"]:first-of-type [data-swift-text],
body.cabp-content-page.cabp-tag-cabppointsstory5 main > section[data-swift-gridrow="1Column"]:first-of-type [data-swift-text] {
    text-align: left;
}

/* +POINTS story detail pages — pull-quote + "by the numbers" fun blocks. */
.cabp-story-quote {
    margin: 1.85rem 0;
    padding: .35rem 0 .35rem 1.5rem;
    border-left: 4px solid var(--cabp-teal);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    font-style: italic;
    line-height: 1.4;
    color: var(--cabp-navy);
}
.cabp-story-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 1.85rem 0;
    padding: 1.35rem 1.5rem;
    background: var(--cabp-cream);
    border-radius: 8px;
}
.cabp-story-stat {
    flex: 1 1 130px;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.cabp-story-stat__num {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--cabp-teal);
}
.cabp-story-stat__label {
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cabp-slate);
}

/* +POINTS story byline — avatar photo + name + company. */
.cabp-story-byline {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0 0 1.4rem;
}
.cabp-story-byline__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--cabp-line);
}
.cabp-story-byline__text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.cabp-story-byline__text strong {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--cabp-navy);
}
.cabp-story-byline__org {
    font-size: .85rem;
    color: var(--cabp-slate);
}

/* ============================================================
   INCREMENT 16 — Item 4: mobile footer horizontal overflow
   ------------------------------------------------------------
   Measured before: document.scrollWidth 548 vs clientWidth 390
   (iPhone 13, overflowX 158) and 548 vs 412 (Pixel 5, overflowX
   136) on every page, because the page footer is on every page.

   Cause, measured not guessed: the demo-phase rule above replaces
   Swift's `repeat(12, 1fr)` with `repeat(auto-fit, minmax(180px,
   1fr))`, which resolves to ONE explicit track at a phone width.
   Bootstrap's `g-col-12` still asks to span twelve, so the grid
   manufactures eleven zero-width implicit tracks — and still pays
   the column gap between them. The used width of the "Get in
   touch" column (paragraph 978 on footer 28 / 976 on footer 26)
   is therefore 180px + 11 x 32px gap = 532px, a constant that
   does not depend on the viewport at all. 532 + the 16px body
   padding either side = 564, hence 548 of scrollWidth over 390.

   Three things fix it, all needed:
   1. one real track below the lg breakpoint, so a `g-col-12`
      child spans exactly it and no gap is multiplied;
   2. `min-width: 0` on the grid children, so the min-content of a
      column can never push the track wider than the viewport;
   3. `overflow-wrap` on footer prose, because the contact block
      carries an unbreakable 265px e-mail address whose min-content
      alone would overflow a 358px column.
   ============================================================ */
@media (max-width: 991.98px) {
    body > footer .grid,
    body > footer [class*="grid-template"],
    [data-swift-page-footer] .grid {
        grid-template-columns: 1fr !important;
        column-gap: 0 !important;
    }
}
body > footer .grid > *,
[data-swift-page-footer] .grid > * {
    min-width: 0 !important;
}
body > footer p,
body > footer a,
body > footer li,
[data-swift-page-footer] p,
[data-swift-page-footer] a,
[data-swift-page-footer] li {
    overflow-wrap: anywhere;
}

/* Increment 16 — Item 4 (second, independent offender, home page only).
   With the footer fixed, /cameron-ashley/home still reported
   scrollWidth 433 vs clientWidth 390. The residual is the vendor logo
   wall: its two responsive overrides use bare `1fr` where the base rule
   uses `minmax(0, 1fr)`, so each cell's min-content (18px padding either
   side + the logo's intrinsic width) floors the track at 133px and three
   of them come to 433px inside a 358px container. Restore the
   zero-floored track in both breakpoints. */
@media (max-width: 1024px) { .cabp-logowall__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .cabp-logowall__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cabp-logowall__cell { min-width: 0; }
.cabp-logowall__img  { min-width: 0; }


/* =========================================================================
   INCREMENT 16 — E05.S05 PLP card + E05.S06 PDP composition
   ========================================================================= */

/* --- SVD 11.3 identifier set on the card -------------------------------- */
.cabp-plp__ids {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    row-gap: 2px;
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .04em;
    color: var(--cabp-charcoal, #2a2a2a);
    min-width: 0;
}
.cabp-plp__id { display: contents; }
.cabp-plp__ids dt {
    font-weight: 400;
    opacity: .62;
    text-transform: uppercase;
    white-space: nowrap;
}
.cabp-plp__ids dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* --- availability slot (shared: card + PDP) ----------------------------- */
.cabp-avail { font-size: 12px; line-height: 1.5; min-width: 0; }
.cabp-avail__neutral {
    color: var(--cabp-charcoal, #2a2a2a);
    opacity: .7;
    font-style: italic;
}
.cabp-avail__figures { margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; }
.cabp-avail__row { display: contents; }
.cabp-avail__figures dt {
    font-weight: 400;
    opacity: .7;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11px;
    white-space: nowrap;
}
.cabp-avail__figures dd {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--cabp-navy, #0c2240);
}
.cabp-avail__row--onhand dd { color: var(--cabp-teal, #2a857d); }
.cabp-avail__special {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8a5300;
    background: #fff3d6;
    border: 1px solid #f0d9a0;
    border-radius: 2px;
    padding: 1px 6px;
}
.cabp-avail--full .cabp-avail__figures { font-size: 14px; row-gap: 4px; }
.cabp-avail--full .cabp-avail__figures dt { font-size: 12px; }

/* --- second price line + quantity-breaks disclosure --------------------- */
.cabp-plp__row-price2 {
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--cabp-charcoal, #2a2a2a);
    font-variant-numeric: tabular-nums;
}
.cabp-plp__row-priceunit {
    display: inline-block;
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, monospace);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .7;
}
/* The disclosure and the note sit above the absolutely-positioned row link so
   they stay clickable — the same trick the actions column already uses. */
.cabp-plp__breaks {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: right;
}
.cabp-plp__breaks-toggle {
    cursor: pointer;
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cabp-teal, #2a857d);
    list-style: none;
}
.cabp-plp__breaks-toggle::-webkit-details-marker { display: none; }
.cabp-plp__breaks-toggle::after { content: " ▾"; }
.cabp-plp__breaks[open] .cabp-plp__breaks-toggle::after { content: " ▴"; }
.cabp-plp__breaks-table {
    width: 100%;
    margin-top: 4px;
    border-collapse: collapse;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.cabp-plp__breaks-table th {
    font-weight: 400;
    opacity: .65;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--cabp-cream-mid, #e5ddcf);
    padding: 2px 0;
}
.cabp-plp__breaks-table td {
    padding: 2px 0;
    border-bottom: 1px solid var(--cabp-cream, #f5f0e6);
}

/* --- the standing "call your DC" note ----------------------------------- */
.cabp-plp__row-fastnote {
    position: relative;
    z-index: 2;
    margin: 2px 0 0;
    font-size: 10px;
    line-height: 1.35;
    color: var(--cabp-charcoal, #2a2a2a);
    opacity: .62;
}

/* --- compact price-increase notice on the card -------------------------- */
.cabp-pdp-price-increase--compact {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    margin: 0;
}

/* --- recently-viewed strip below the list ------------------------------- */
.cabp-plp-recent { margin-top: 24px; }
.cabp-plp-recent__title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cabp-navy, #0c2240);
    margin-bottom: 10px;
}
.cabp-plp-recent__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.cabp-plp-recent__tile {
    border: 1px solid var(--cabp-cream-mid, #e5ddcf);
    background: #fff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.cabp-plp-recent__link { text-decoration: none; color: inherit; display: block; min-width: 0; }
.cabp-plp-recent__img { display: block; height: 84px; }
.cabp-plp-recent__img img { max-height: 84px; max-width: 100%; object-fit: contain; }
.cabp-plp-recent__name {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--cabp-navy, #0c2240);
    overflow-wrap: anywhere;
}
.cabp-plp-recent__form { display: flex; gap: 6px; align-items: center; }
.cabp-plp-recent__qty { width: 64px; }

/* The card grid gained an identifier list, an availability block and a notice,
   so the main column needs more room and the price column a little more. */
@media (min-width: 992px) {
    .cabp-plp__row-grid { grid-template-columns: 160px 1fr 210px 190px; }
}
@media (max-width: 991.98px) {
    .cabp-plp__ids { grid-template-columns: auto 1fr; }
    .cabp-plp__row-pricecol { align-items: flex-start; text-align: left; }
    .cabp-plp__breaks { text-align: left; }
}

/* --- PDP tabs (E05.S06.T04) --------------------------------------------- */
.cabp-pdp-tabs { margin-top: 8px; }
.cabp-pdp-tabs__strip {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 2px solid var(--cabp-cream-mid, #e5ddcf);
    margin-bottom: 16px;
}
.cabp-pdp-tabs__tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    padding: 10px 18px;
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cabp-charcoal, #2a2a2a);
    cursor: pointer;
}
.cabp-pdp-tabs__tab:hover { color: var(--cabp-navy, #0c2240); }
.cabp-pdp-tabs__tab.is-active {
    color: var(--cabp-navy, #0c2240);
    border-bottom-color: var(--cabp-teal, #2a857d);
}
.cabp-pdp-tabs__tab:focus-visible { outline: 2px solid var(--cabp-teal, #2a857d); outline-offset: 2px; }
.cabp-pdp-tabs__heading {
    /* The tab strip already names the panel on desktop; the heading is for the
       stacked mobile read and for screen readers. */
    position: absolute;
    width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.cabp-pdp-tabs__fields {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(160px, 260px) 1fr;
    column-gap: 24px;
    row-gap: 0;
}
.cabp-pdp-tabs__field { display: contents; }
.cabp-pdp-tabs__fields dt,
.cabp-pdp-tabs__fields dd {
    padding: 7px 0;
    border-bottom: 1px solid var(--cabp-cream, #f5f0e6);
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}
.cabp-pdp-tabs__fields dt { font-weight: 400; color: var(--cabp-charcoal, #2a2a2a); opacity: .72; }
.cabp-pdp-tabs__fields dd { font-weight: 600; color: var(--cabp-navy, #0c2240); }
.cabp-pdp-tabs__empty {
    margin: 0;
    padding: 14px 16px;
    background: var(--cabp-cream, #f5f0e6);
    border-left: 3px solid var(--cabp-cream-mid, #e5ddcf);
    color: var(--cabp-charcoal, #2a2a2a);
    font-size: 14px;
}
.cabp-pdp-tabs__docs { width: 100%; border-collapse: collapse; font-size: 14px; }
.cabp-pdp-tabs__docs th {
    text-align: left;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .65;
    border-bottom: 2px solid var(--cabp-cream-mid, #e5ddcf);
    padding: 6px 0;
}
.cabp-pdp-tabs__docs td { padding: 8px 0; border-bottom: 1px solid var(--cabp-cream, #f5f0e6); }
.cabp-pdp-tabs__docs td + td { padding-left: 16px; }

/* Mobile: no tab strip, every panel stacked under its own heading. */
@media (max-width: 767.98px) {
    .cabp-pdp-tabs__strip { display: none; }
    .cabp-pdp-tabs__panel { display: block !important; margin-bottom: 20px; }
    .cabp-pdp-tabs__heading {
        position: static;
        width: auto; height: auto; margin: 0 0 8px; clip: auto;
        overflow: visible; white-space: normal;
        font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
        color: var(--cabp-navy, #0c2240);
        border-bottom: 2px solid var(--cabp-cream-mid, #e5ddcf);
        padding-bottom: 6px;
    }
    .cabp-pdp-tabs__fields { grid-template-columns: 1fr; }
    .cabp-pdp-tabs__fields dt { border-bottom: 0; padding-bottom: 0; font-size: 12px; }
    .cabp-pdp-tabs__fields dd { padding-top: 2px; }
}
@media (max-width: 767.98px) {
    /* cabp-pdp-tabs.js sets [hidden] on the inactive panels for the desktop tab
       behaviour; at mobile every panel is shown, so the attribute is overridden
       here rather than branching the script on a breakpoint. */
    .cabp-pdp-tabs__panel[hidden] { display: block !important; }
}

/* --- accessible teal for TEXT (increment 16) ----------------------------- */
/* --cabp-teal (#1BB8C4) is a fill colour: measured 2.41:1 against white, which
   is below WCAG AA for body text. Everywhere increment 16 uses teal as INK it
   uses this darker token instead — 4.94:1, and it reads as the same accent.
   Found by var/cabp-work/inc16/contrast16.mjs, not by eye: an HTTP sweep cannot
   see it (increment 15 finding 7). */
:root { --cabp-teal-ink: #127C85; }
.cabp-avail__row--onhand dd { color: var(--cabp-teal-ink); }
.cabp-plp__breaks-toggle { color: var(--cabp-teal-ink); }

/* The two 0.62-opacity elements on the card measured 4.31:1 — under WCAG AA for
   body text. 0.68 puts both at 5.19:1 and is visually indistinguishable at this
   size. Measured, not estimated: inc16/contrast16.mjs. */
.cabp-plp__ids dt { opacity: .68; }
.cabp-plp__row-fastnote { opacity: .68; }

/* The quantity-breaks disclosure sits inside the price column, which the card's
   stretched row link covers. Hit-testing proved the link won: clicking
   "Quantity Breaks Available" navigated to the PDP instead of opening the tiers.
   The price column is lifted above the link and then made click-through again,
   so only the disclosure itself takes the pointer and the rest of the column
   still opens the product — the same trick the actions column uses, minus the
   side effect of swallowing the whole column's clicks. */
.cabp-plp__row-pricecol { position: relative; z-index: 2; pointer-events: none; }
.cabp-plp__row-pricecol .cabp-plp__breaks,
.cabp-plp__row-pricecol .cabp-plp__breaks * { pointer-events: auto; }

/* =========================================================================
   INCREMENT 17 — the two real site defects the first site-wide gate found
   (var/log/cabp/20260901-225638, verdict FAIL). Both are CSS-only.
   ========================================================================= */

/* --- Defect A: the desktop nav dropdowns had no caret and a 4px dead band --

   ROOT CAUSE, measured rather than assumed. Swift's Menu.cshtml renders every
   top-level dropdown trigger as
       <a class="nav-link p-2 text-decoration-underline-hover …"
          data-bs-toggle="dropdown" aria-expanded="false">
   — the Bootstrap TOGGLE ATTRIBUTE without the `.dropdown-toggle` CLASS. The
   caret in Bootstrap 5 is `.dropdown-toggle::after`, keyed on the class, so it
   never matched: `getComputedStyle(link,'::after').content` was `none` and
   `border-right-width` `0px` on all four items (Shop / About / +POINTS Rewards
   / Resources). Nothing in this stylesheet had stripped it — there was never
   a caret to strip. Fix is to generate the pseudo-element ourselves off the
   attribute the template does emit.

   The caret is restated in PX, not em, on purpose: tools/nav-affordance-probes.mjs
   asserts `border-right-width != 0px`, and an em-sized caret shrinks with the nav
   font-size until it can round under the probe (marine header-nav-polish §6).
   `position: static` is stated explicitly because probe 3 re-reads the pseudo in
   the aria-expanded="true" state, where an ::after-based hover utility would
   otherwise own it. The two Swift text utilities on these links —
   `text-decoration-underline-hover:where(:hover){text-decoration:underline}` and
   `text-decoration-accent-hover:where(:hover){color:…}` — do NOT use ::after and
   are no threat. Something else does, and it is the next paragraph.

   THE `!important` ON THE THREE BORDER PROPERTIES IS NOT DEFENSIVE, IT IS
   REQUIRED, and it was found by reading the matched rules in the browser rather
   than by guessing. Swift already owns this exact pseudo-element:
       .dropdown:has(.dropdown-menu:where(.mouseover)) > [data-bs-toggle="dropdown"]::after {
           content:""; display:block; position:absolute; width:100%; left:0; right:0;
           height:calc(var(--swift-dynamic-offset));
           bottom:calc(var(--swift-dynamic-offset)*-1); pointer-events:all;
           border-width:medium !important; border-style:none !important;
           border-color:currentcolor !important; }
   — Swift's OWN hover bridge, which fires once its JS puts `.mouseover` on the
   open panel, and which deliberately flattens any border on ::after so a caret
   cannot survive there. Everything else in it loses to this rule on specificity
   ((0,5,2) vs (0,3,1)), but three `!important` border declarations do not, so
   without these the caret computed to `border-right-width: 0px` the moment the
   pointer reached the panel: present at rest, GONE while the menu is open. The
   gate's probe 3 hovers the LINK only, so it never enters that state and would
   have scored the defect green — measured with inc17/matched2.mjs and
   inc17/caret-computed.txt, not inferred.
   Swift's bridge on these six links is therefore replaced by ours below, which is
   keyed on `aria-expanded` instead of `.mouseover` and so also covers the FIRST
   crossing — the one that was failing. Every other dropdown on the site keeps
   Swift's bridge untouched; this selector reaches only the top-level desktop nav. */
.megamenu-wrapper > nav > .nav-item.dropdown > .nav-link[data-bs-toggle="dropdown"]::after {
    content: "";
    display: inline-block;
    position: static;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: 2px;
    border-width: 5px 5px 0 !important;
    border-style: solid solid none !important;
    border-color: currentColor transparent !important;
    transition: transform .15s ease-in-out;
}
.megamenu-wrapper > nav > .nav-item.dropdown > .nav-link[data-bs-toggle="dropdown"][aria-expanded="true"]::after {
    position: static;
    border-width: 5px 5px 0 !important;
    border-style: solid solid none !important;
    border-color: currentColor transparent !important;
    transform: rotate(180deg);
}

/* The hover bridge. The trigger carries `data-bs-offset="0, 4"`, so Popper opens
   the panel 4px below the link and the pointer crosses 4px of NOTHING on its way
   down — measured: elementFromPoint at the gap midpoint returned an element
   OUTSIDE the .nav-item, i.e. the mouseleave fires and the menu closes before the
   cursor arrives. The bridge is anchored to the LINK, not to the panel and not to
   the item:
     * not the panel — Swift gives `.dropdown-menu` / `.megamenu` `overflow: auto`,
       which would CLIP a `::before` apron drawn above the panel's own top edge;
     * not the item — the Shop item is `.position-static` (Bootstrap `position:
       static !important`, which is what lets the megamenu span the full header
       width), so an absolutely-positioned `::after` on it would resolve against
       some ancestor instead and land in the wrong place.
   The link is inside the item either way, so `item.contains(hit)` — the thing
   probe 2 actually asserts — is satisfied, and making the link `position:
   relative` does not move the panel (the panel is the link's SIBLING, so its
   containing block is unchanged and probe 4 stays green).
   Open-state only, so nothing under the closed nav bar is ever covered. */
.megamenu-wrapper > nav > .nav-item.dropdown > .nav-link[aria-expanded="true"] {
    position: relative;
}
.megamenu-wrapper > nav > .nav-item.dropdown > .nav-link[aria-expanded="true"]::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
}

/* --- Defect B: the ANONYMOUS mobile document scrolled horizontally --------

   ROOT CAUSE, measured. `document.documentElement.scrollWidth` read 461 at BOTH
   mobile viewports — 390+71 and 412+49 — which is the signature of a fixed-width
   offender, not a responsive one. The gate names `DIV.offcanvas.offcanvas-end`
   as the widest element past the edge, but that is a SYMPTOM: the drawer is
   `position: fixed; right: 0; transform: translateX(100%)`, so it sits at
   left = scrollWidth and its right edge is simply 461+390. It follows the number,
   it does not cause it.
   The cause is the mobile header's top utility row — one Swift grid container
   `div[data-swift-container].d-flex` with `gap: 16px` and `max-width: calc(100% -
   32px)` (= 358px at 390) holding four grid columns whose min-content widths are
   30 (burger) + 240 (logo, an <img style="width:240px">) + 0 (spacer) + 123
   (account) = 393, plus 3 × 16px gap = 441 → the row's own scrollWidth is 445 and
   the document's is 16 + 445 = 461. No ancestor clips (section, header and body
   are all `overflow: visible`), so it reaches documentElement.
   Why only ANONYMOUS: signed in, the my-account column renders a 48px ICON
   BUTTON; anonymous it renders an avatar plus the literal text "My account",
   whose `.text-nowrap` box alone is 83px. That 83px is most of the overflow —
   increment 16 measured 0 here because it measured the signed-in document.
   Fix, in two parts: take the label out of layout while keeping it for assistive
   tech (icon-only is already the signed-in mobile treatment, so this is the same
   affordance, not a new one), and let the logo column give ground if a future
   header still asks for more than the row has. */
@media (max-width: 991.98px) {
    header [data-swift-container].d-flex > [data-swift-gridcolumn] { min-width: 0; }
    header [data-swift-gridcolumn][data-dw-itemtype="swift-v2_logo"] figure { max-width: 100%; }
    header [data-swift-gridcolumn][data-dw-itemtype="swift-v2_logo"] img {
        max-width: 100%;
        height: auto;
    }
    /* Clipped, not `display: none` and not `font-size: 0` — the link's only other
       content is an SVG avatar, so removing the text would leave the control with
       no accessible name at all.

       `overflow: hidden` IS LOAD-BEARING HERE and was A/B-tested, not assumed.
       Foundry #70 ships the visually-hidden idiom as `clip + clip-path` with NO
       overflow declaration, on the reasoning that clip-path crops the 1x1 box and
       an `overflow` inside the header would clip megamenu/offcanvas panels. On
       this document that variant is WORSE THAN DOING NOTHING: `clip-path` (and the
       legacy `clip`) crop PAINTING only, they do not contain SCROLLABLE overflow,
       and absolute positioning has meanwhile taken the label out of flow so the
       flex row stops accounting for it — the 83px of `white-space: nowrap` text
       then spills from the static position with nothing containing it. Measured on
       the same page, same devices (inc17/sronly-ab.txt):

           variant                              iPhone 13   Pixel 5
           A  label left in flow                  +4px       0px
           B  clip + clip-path  (Foundry #70)    +19px      +18px
           C  clip-path only                     +19px      +18px
           D  overflow:hidden + clip-path          0px        0px

       The accessible name survives in all four (element.scrollWidth stays 83 and
       the link's accessible name stays "My account"), so `overflow: hidden` costs
       nothing here. #70's panel-clipping worry does not apply to this rule: it is
       scoped to a 1x1 label span with no descendants, not to a header ancestor. */
    header [data-dw-itemtype="swift-v2_myaccount"] .nav-link > .text-nowrap {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
    /* `me-auto` on the trigger stretched the (now icon-only) control across the
       column; with the label gone it is just dead width. */
    header [data-dw-itemtype="swift-v2_myaccount"] .nav-link.me-auto { margin-right: 0; }
}

/* ============================================================================
   INCREMENT 18 — WS-D accounts (E06.S02–S08)
   Appended, never interleaved: nothing above this line was edited.
   ========================================================================= */

/* E06.S03 — the ship-to slot inside the DC info bar.
   It is a normal `.cabp-dcbar__seg`, so it inherits the middot separator, the ink
   colour, the anchor override and the 575.98px rules for free. Only the label needs
   its own weight; the value is the thing a buyer scans for. */
.cabp-dcbar__shipto .cabp-shipto-bar__label { opacity: .75; }
.cabp-dcbar__shipto .cabp-shipto-bar__value { font-weight: 700; color: var(--cabp-navy, #0B2545); }
.cabp-dcbar__shipto .cabp-shipto-bar__change { margin-left: .35rem; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 575.98px) {
    /* On a phone the bar already drops the manager and the hours; the ship-to keeps
       its value (that is the point of it) but loses the word "Ship to". */
    .cabp-dcbar__shipto .cabp-shipto-bar__label { display: none; }
}

/* E06.S03 — the chooser itself. Plain Bootstrap list-group; only the scope note needs
   a rule, and it needs one because the muted grey Swift ships (--bs-secondary-color on
   cream) measures under 4.5:1. --cabp-slate is the DC bar's own ink and measures
   well over it on both the white page and the cream band. */
.cabp-shipto__scopenote { color: var(--cabp-slate); }

/* E06.S06 — the no-prices stand-in line in the cart / checkout summary. Same size and
   ink as the totals block it replaces, so the sidebar does not visibly collapse. */
[data-cabp-noprices-summary] { color: var(--cabp-slate); }

/* E06.S08.2 / E06.S03 — the small explanatory notes increment 18 adds all measured
   under 4.5:1 with Bootstrap's `text-muted` (rgba(31,41,55,.5) = 3.05:1 on white).
   --cabp-slate is the build's accessible secondary ink and measures 10.31:1 there. */
[data-cabp-fno-note],
[data-cabp-shipto-dc],
[data-cabp-account-addresses] .text-muted,
.cabp-shipto .text-muted { color: var(--cabp-slate) !important; }

/* 2026-10-05 test pass: home hero contrast. The site-wide `h1-h4 { color: var(--cabp-charcoal) }`
   above beat the slide card's white --bs-heading-color, so every slide title rendered #1F2937 on a
   dark photo (1.4:1 to 1.9:1 median). The title also sat in the lightest band of the bottom-up
   gradient. White copy everywhere in the slide, and a gradient that stays dark behind the copy. */
.cabp-hero .card-img-overlay {
    background-image: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.65) 55%, rgba(0,0,0,.35) 100%) !important;
}
.cabp-hero .card-img-overlay :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .dw-h1, .dw-h2, .dw-h3, .dw-h4, .dw-h5, p, .dw-paragraph) {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* 2026-10-05 test pass: PLP brand logo. `.cabp-plp__row img { width:auto; max-width:200px }` above
   out-ranks `.cabp-plp__row-brand-logo` (0,1,1 vs 0,1,0), so the 18px logo rendered up to 200x119
   and shoved the title down. Restated with the row scope so it wins. */
.cabp-plp__row .cabp-plp__row-brand-logo {
    width: auto;
    height: 18px;
    max-width: 72px;
    max-height: 18px;
}
/* The no-photo fallback in the image column: a brand logo or category photo, visibly a stand-in. */
.cabp-plp__row-image--fallback img { opacity: .9; }
.cabp-plp__row-image--logo { background: var(--cabp-cream, #F4F6F9); border-radius: 4px; }
.cabp-plp__row-image--logo img { max-width: 70% !important; max-height: 60% !important; }

/* 2026-10-05 (Swift 2.4): grid items default to min-width:auto, so a wide table inside .table-responsive widened
   its column instead of scrolling (open invoices measured 740px on a 390 viewport). Let grid columns shrink. */
.grid > [class*="g-col"] { min-width: 0; }
/* The open-invoices list is re-rendered by an HTMX swap that drops the .table-responsive wrapper, so on phones the
   table pushed the page to 740px. Customer-center tables scroll inside themselves below lg. */
@media (max-width: 991.98px) {
    [data-swift-customer-center] table { display: block; max-width: 100%; overflow-x: auto; }
}

/* 2026-10-07 (beat-4 session): the site has ONE header (no Swift mobile header), so below lg the
   desktop rows overflowed: the logo/search/icons row reached 534px and the megamenu row 764px on a
   390px viewport, and every page scrolled sideways. Below lg only:
   - the logo/search/icons row wraps: logo + icons on line one, the search field full width on line two;
   - the main navigation row (megamenu in English, plain dropdowns in es-MX) scrolls horizontally inside itself. Its dropdowns are position:absolute with the
     sticky header as containing block (nav, wrapper and nav-items are position:static), so the
     scroller does not clip them. Desktop (>= 992px) is untouched. */
@media (max-width: 991.98px) {
    header.sticky-top > section:has(> [data-swift-container] > [data-dw-itemtype="swift-v2_searchfield"]) > [data-swift-container] {
        flex-wrap: wrap; row-gap: .5rem;
    }
    header.sticky-top [data-swift-gridcolumn][data-dw-itemtype="swift-v2_logo"] { flex: 1 1 0; min-width: 0; }
    header.sticky-top [data-swift-gridcolumn][data-dw-itemtype="swift-v2_logo"] img { max-width: min(150px, 100%); height: auto; }
    header.sticky-top [data-swift-gridcolumn][data-dw-itemtype="swift-v2_searchfield"] .js-async-fetch-placeholder,
    header.sticky-top [data-swift-gridcolumn][data-dw-itemtype="swift-v2_searchfield"] .type-ahead-dropdown,
    header.sticky-top [data-swift-gridcolumn][data-dw-itemtype="swift-v2_searchfield"] form,
    header.sticky-top [data-swift-gridcolumn][data-dw-itemtype="swift-v2_searchfield"] input { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
    header.sticky-top [data-swift-gridcolumn][data-dw-itemtype="swift-v2_searchfield"] { order: 10; flex: 1 1 100%; min-width: 0; }
    header.sticky-top [data-swift-gridcolumn][data-dw-itemtype="swift-v2_myaccount"],
    header.sticky-top [data-swift-gridcolumn][data-dw-itemtype="swift-v2_preferences"],
    header.sticky-top [data-swift-gridcolumn][data-dw-itemtype="swift-v2_favorites"],
    header.sticky-top [data-swift-gridcolumn][data-dw-itemtype="swift-v2_minicart"] { flex: 0 0 auto; }
    header.sticky-top [data-swift-gridcolumn] > .nav-wrapper:has(> nav) { min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    header.sticky-top [data-swift-gridcolumn] > .nav-wrapper:has(> nav)::-webkit-scrollbar { display: none; }
    header.sticky-top [data-swift-gridcolumn] > .nav-wrapper:has(> nav) > nav { flex-wrap: nowrap; width: max-content; }
    header.sticky-top section:has(> [data-swift-container] > [data-swift-gridcolumn] > .nav-wrapper > nav) > [data-swift-container],
    header.sticky-top section:has(> [data-swift-container] > [data-swift-gridcolumn] > .nav-wrapper > nav) > [data-swift-container] > * { min-width: 0; max-width: 100%; }
    header.sticky-top [data-swift-gridcolumn] > .nav-wrapper:has(> nav) .dropdown-menu { max-width: 100vw; overflow-x: hidden; }
    /* The footer's 4ColumnsFlex row had the same nowrap overflow (553px at 390): let its columns wrap. */
    footer > section > [data-swift-container].d-flex { flex-wrap: wrap; row-gap: 1.5rem; }
    footer > section > [data-swift-container].d-flex > [data-swift-gridcolumn] { min-width: 0; }
}
/* Below 576px the Favorites and Cart labels go icon-only so logo and the four header icons share one line. */
@media (max-width: 575.98px) {
    header.sticky-top [data-dw-itemtype="swift-v2_favorites"] .nav-link > .dw-paragraph,
    header.sticky-top [data-dw-itemtype="swift-v2_minicart"] .nav-link > .dw-paragraph { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    header.sticky-top [data-dw-itemtype="swift-v2_favorites"] .nav-link,
    header.sticky-top [data-dw-itemtype="swift-v2_minicart"] .nav-link { gap: 0 !important; }
    header.sticky-top > section:has(> [data-swift-container] > [data-dw-itemtype="swift-v2_searchfield"]) > [data-swift-container] { column-gap: .25rem !important; }
    header.sticky-top [data-swift-gridcolumn][data-dw-itemtype="swift-v2_logo"] img { max-width: min(128px, 100%); }
    header.sticky-top [data-dw-itemtype="swift-v2_myaccount"] .nav-link, header.sticky-top [data-dw-itemtype="swift-v2_preferences"] .nav-link, header.sticky-top [data-dw-itemtype="swift-v2_favorites"] .nav-link, header.sticky-top [data-dw-itemtype="swift-v2_minicart"] .nav-link { padding-left: .35rem !important; padding-right: .35rem !important; }
}

/* =========================================================================
   2026-10-09 D1 global look and feel (card c1791545 run 2, Justin "Apply all").
   Backup of the previous sheet: F:\demo\var\cabp-build\c1791545\run2\D1\.
   Measured with Playwright at 1440/768/390 signed in as sheartland.
   ========================================================================= */
:root {
    --cabp-teal-ink: #127C85;     /* teal for TEXT on white/cream: 5.0:1 / 4.6:1 */
    --cabp-muted-ink: #5F6670;    /* secondary text: 5.9:1 on white, 5.3:1 on cream */
    --bs-font-monospace: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- 1. Buttons: one radius, navy outline secondaries, one height per group --- */
.btn, .btn-sm, .btn-lg { --bs-btn-border-radius: 4px; --bs-btn-sm-border-radius: 4px; }
.dw-button, [data-dw-button] { --dw-btn-border-radius: 4px; --dw-btn-padding-y: .75rem; }
.btn-secondary,
button[data-dw-button="secondary"],
a[data-dw-button="secondary"],
[data-dw-button-variant="secondary"] {
    background-color: #fff !important;
    border-color: var(--cabp-navy) !important;
    color: var(--cabp-navy) !important;
    border-radius: 4px;
}
.btn-secondary:hover, .btn-secondary:focus-visible, .btn-secondary:active,
button[data-dw-button="secondary"]:hover, a[data-dw-button="secondary"]:hover,
[data-dw-button-variant="secondary"]:hover {
    background-color: var(--cabp-navy) !important;
    border-color: var(--cabp-navy) !important;
    color: #fff !important;
}
/* Small buttons share one compact height (36px). */
.btn.btn-sm:not(.btn-link):not(.p-0) { min-height: 36px; padding-top: .375rem; padding-bottom: .375rem; }
/* Cart action row: the 8 actions overflowed a justify-end flex row (Continue shopping at x=-113,
   labels wrapping to 60/95px). Wrap instead: secondaries on line one, back-link + Checkout below. */
form#ordersubmit > div.d-grid .btn { white-space: nowrap; }
@media (min-width: 992px) {
    form#ordersubmit > div.d-grid.d-lg-flex { flex-wrap: wrap; justify-content: flex-start !important; row-gap: .75rem; }
    form#ordersubmit > div.d-grid.d-lg-flex > .swift_cartbackbutton { order: 90 !important; margin-right: auto !important; padding-left: 0; }
    form#ordersubmit > div.d-grid.d-lg-flex > .btn-primary { order: 91; }
}
form#ordersubmit > div.d-grid > .btn:not(.btn-link) { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.cabp-plp-recent__add.btn { padding-left: .5rem; padding-right: .5rem; }
/* PDP favourite: a 66x110 navy block detached at the far right. Sit it beside Add to cart as a
   44px navy-outline square. */
[data-dw-itemtype="swift-v2_productaddtocart"] .js-input-group > .d-flex { justify-content: flex-start !important; align-items: flex-end; }
[data-dw-itemtype="swift-v2_productaddtocart"] .js-input-group > .d-flex > form { flex: 0 1 18rem; max-width: 18rem; margin-bottom: 0 !important; }
[data-dw-itemtype="swift-v2_productaddtocart"] .js-input-group > .d-flex > form > .d-flex.flex-wrap > .btn-primary { flex: 1 1 auto; }
/* The blanket primary-button rule above is (0,15,1); the repeated class outranks it here only. */
[data-dw-itemtype="swift-v2_productaddtocart"] button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button {
    width: 44px; height: 44px; padding: 0 !important; flex: 0 0 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background-color: #fff !important; border: 1px solid var(--cabp-navy) !important; color: var(--cabp-navy) !important; border-radius: 4px;
}
[data-dw-itemtype="swift-v2_productaddtocart"] button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button.swift_favorites-button:hover { background-color: var(--cabp-navy) !important; color: #fff !important; }

/* --- 2. Contrast ------------------------------------------------------------ */
.text-muted { color: var(--cabp-muted-ink) !important; }
:is([data-dw-colorscheme="dark"], [data-dw-colorscheme="darksubtle"], [data-dw-colorscheme="primary"], [data-dw-colorscheme="secondary"], [data-dw-colorscheme="lightcabp"], .bg-dark, .text-bg-dark) .text-muted { color: rgba(255, 255, 255, .78) !important; }
:is([data-dw-colorscheme="dark"], [data-dw-colorscheme="darksubtle"], [data-dw-colorscheme="lightcabp"]) :is([data-dw-colorscheme="light"], [data-dw-colorscheme="lightgrey1"], [data-dw-colorscheme="lightgrey2"]) .text-muted { color: var(--cabp-muted-ink) !important; }
.form-floating > label, .form-floating > .form-control:not(:focus):placeholder-shown ~ label { color: var(--cabp-muted-ink); }
.form-control::placeholder { color: #6B7079; opacity: 1; }
/* Order-state badges carry their state colour inline (color: #1BB8C4 !important, 2.41:1). Paint the
   glyphs in teal-ink without touching the inline declaration. */
.badge[style*="1BB8C4" i] { -webkit-text-fill-color: #0F6E76; }
.cabp-plp__row-points,
.cabp-acct-tiles__kicker,
.cabp-logowall__kicker { color: var(--cabp-teal-ink) !important; }
.cabp-estimator__eyebrow { color: #0F6E76 !important; }
.cabp-estimator__peak:not(.cabp-estimator__peak--btn) { color: var(--cabp-teal-ink) !important; }
.cabp-estimator__label, .cabp-estimator__examples, .cabp-estimator__examples > span { color: var(--cabp-muted-ink) !important; }
.cabp-plus-badge--no { color: var(--cabp-muted-ink) !important; }
.cabp-points-fineprint, .cabp-points-fineprint * { color: var(--cabp-muted-ink); }
.cabp-plp__breaks-table th { opacity: .9; }
main .btn-link.opacity-50 { opacity: 1 !important; color: var(--cabp-muted-ink) !important; }
/* Table row actions (open invoices: Pay 40px next to 32px icon buttons): one 36px height. */
main table td .btn:not(.btn-link) { height: 36px; min-height: 36px; padding-top: 0 !important; padding-bottom: 0 !important; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }

/* --- 7. Fonts: IBM Plex only. Brand names are words (Sans); SKUs/part numbers are Plex Mono. --- */
.cabp-plp__row-brand-name { font-family: "IBM Plex Sans", sans-serif !important; }
.font-monospace { font-family: var(--bs-font-monospace) !important; }

/* --- 8. Navigation bar: the lightcabp scheme painted #004A87, not the brand navy. --- */
html [data-dw-colorscheme="lightcabp"] {
    --dw-color-background: #1B2A4E;
    --dw-color-background-rgb: 27, 42, 78;
    --dw-color-button-primary: #1B2A4E;
    --dw-color-button-primary-rgb: 27, 42, 78;
}

/* --- Header: cart badge sits after the label instead of on top of it. --- */
header.sticky-top [data-dw-itemtype="swift-v2_minicart"] .mini-cart-quantity { position: static !important; margin-left: -.25rem; transform: none !important; }

/* --- 3. Header below 992px: about 150px signed in at 390 (was 292). Logo, icons, search, nav.
   The stone impersonation strip and the cream DC bar move into the My account off-canvas
   (CabpHeadInclude clones them there as .cabp-oc-context). --- */
@media (max-width: 991.98px) {
    header.sticky-top > section:has([data-dw-itemtype="swift-v2_impersonationbar"]),
    header.sticky-top > section:has([data-dw-itemtype="cabp_dcinfobar"] .cabp-dcbar:not([data-cabp-dcbar="anonymous"])) { display: none !important; }
    /* Anonymous visitors have no off-canvas to carry the DC line, and the gate asserts it (header-dc-info-bar-anonymous,
       minHeight 12), so it stays as one compact line. */
    header.sticky-top > section:has(.cabp-dcbar[data-cabp-dcbar="anonymous"]) { padding-top: 2px !important; padding-bottom: 2px !important; }
    header.sticky-top .cabp-dcbar[data-cabp-dcbar="anonymous"] { font-size: .75rem; line-height: 1.3; }
    header.sticky-top > section:has(> [data-swift-container] > [data-dw-itemtype="swift-v2_searchfield"]) { padding-top: .5rem !important; padding-bottom: .5rem !important; }
    header.sticky-top > section:has(> [data-swift-container] > [data-dw-itemtype="swift-v2_searchfield"]) > [data-swift-container] { row-gap: .375rem !important; align-items: center; }
    header.sticky-top [data-swift-gridcolumn][data-dw-itemtype="swift-v2_logo"] { min-height: 0 !important; height: 40px; display: flex; align-items: center; }
    header.sticky-top [data-dw-itemtype="swift-v2_myaccount"] .nav-link,
    header.sticky-top [data-dw-itemtype="swift-v2_preferences"] .nav-link,
    header.sticky-top [data-dw-itemtype="swift-v2_favorites"] .nav-link,
    header.sticky-top [data-dw-itemtype="swift-v2_minicart"] .nav-link { min-height: 40px; padding-top: .25rem !important; padding-bottom: .25rem !important; }
    header.sticky-top [data-dw-itemtype="swift-v2_myaccount"] [data-dw-button], header.sticky-top [data-dw-itemtype="swift-v2_myaccount"] .rounded-circle { max-height: 34px; }
    header.sticky-top [data-dw-itemtype="swift-v2_searchfield"] .search-modal,
    header.sticky-top [data-dw-itemtype="swift-v2_searchfield"] .js-async-fetch-placeholder { height: auto !important; min-height: 0 !important; }
    header.sticky-top [data-dw-itemtype="swift-v2_searchfield"] input { height: 40px; min-height: 40px; padding-top: .25rem; padding-bottom: .25rem; }
    header.sticky-top > section:has([data-dw-itemtype^="swift-v2_menu"]) { padding-top: 0 !important; padding-bottom: 0 !important; }
    header.sticky-top > section:has([data-dw-itemtype^="swift-v2_menu"]) .nav-link { padding-top: .5rem !important; padding-bottom: .5rem !important; }
    header.sticky-top [data-swift-gridcolumn][data-dw-itemtype="swift-v2_searchfield"] { height: 40px; }
}
@media (max-width: 575.98px) {
    /* Label hidden below 576: the count rides the icon's top-right corner, clear of the next icon. */
    header.sticky-top [data-dw-itemtype="swift-v2_minicart"] .mini-cart-quantity { position: absolute !important; top: -2px !important; left: 20px !important; margin: 0; }
    header.sticky-top [data-dw-itemtype="swift-v2_minicart"] .nav-link { padding-right: .9rem !important; }
    html header.sticky-top [data-swift-gridcolumn] :is(.nav-link) { padding-left: .5rem !important; padding-right: .5rem !important; justify-content: center; }
    header.sticky-top :is([data-dw-itemtype="swift-v2_myaccount"], [data-dw-itemtype="swift-v2_preferences"], [data-dw-itemtype="swift-v2_favorites"], [data-dw-itemtype="swift-v2_minicart"]) { flex: 0 0 auto !important; min-width: 40px; display: flex; justify-content: center; }
    header.sticky-top :is([data-dw-itemtype="swift-v2_myaccount"], [data-dw-itemtype="swift-v2_preferences"], [data-dw-itemtype="swift-v2_favorites"], [data-dw-itemtype="swift-v2_minicart"]) .nav-wrapper { margin: 0 !important; }
    header.sticky-top > section:has(> [data-swift-container] > [data-dw-itemtype="swift-v2_searchfield"]) > [data-swift-container] { column-gap: .125rem !important; }
    header.sticky-top [data-swift-gridcolumn][data-dw-itemtype="swift-v2_logo"] img { max-width: min(124px, 100%) !important; }
    header.sticky-top [data-swift-gridcolumn][data-dw-itemtype="swift-v2_logo"] { flex: 1 1 0 !important; min-width: 0 !important; }
    header.sticky-top [data-swift-gridcolumn][data-dw-itemtype="swift-v2_logo"] :is(.d-flex, figure) { min-width: 0; max-width: 100%; }
}
.cabp-oc-context { display: none; }
@media (max-width: 991.98px) {
    .cabp-oc-context { display: block; margin: 0 -1rem .75rem; padding: .75rem 1rem; background: var(--cabp-cream); border-bottom: 1px solid var(--cabp-cream-mid); font-size: .8125rem; color: var(--cabp-slate); }
    .cabp-oc-context .cabp-dcbar { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: 0; height: auto; white-space: normal; }
    .cabp-oc-context .cabp-dcbar__seg::before, .cabp-oc-context .cabp-dcbar__seg::after { content: none !important; }
    .cabp-oc-context .cabp-dcbar__seg { padding: 0 !important; margin: 0 !important; border: 0 !important; }
    .cabp-oc-context > :not(.cabp-dcbar) { display: flex; flex-direction: column; align-items: flex-start !important; gap: .25rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--cabp-cream-mid); }
}

/* --- 4. Footer: columns on the logo/container edge, one type scale (16px links, 14px legal). --- */
footer > section > [data-swift-container] { max-width: calc(min(1680px, 100%) - 32px) !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; }
footer > section[data-dw-row-space-top="6"] { --dw-row-space-top: 1.5rem; }
footer .dw-paragraph-0, footer [data-swift-text] .dw-paragraph-0 { text-align: left !important; }
footer > section[data-dw-row-space-bottom="4"] { --dw-row-space-bottom: 1.5rem; }
footer > section > [data-swift-container].d-flex { justify-content: flex-start !important; column-gap: 3rem !important; }
footer [data-dw-itemtype="swift-v2_navigation"] .nav-link { padding-left: 0 !important; padding-right: 0 !important; padding-top: .3rem !important; padding-bottom: .3rem !important; font-size: 1rem; }
footer [data-dw-itemtype="swift-v2_navigation"] .nav-wrapper { margin-left: 0 !important; }
footer [data-swift-text].text-center { text-align: left !important; margin-left: 0 !important; }
footer [data-swift-text] .dw-paragraph-1, footer [data-swift-text] .dw-paragraph-1 a { font-size: 1rem !important; line-height: 1.9; }
footer [data-swift-text] .dw-paragraph-0, footer [data-swift-text] .dw-paragraph-0 a { font-size: .875rem !important; }
footer [data-swift-text] { text-align: left; }
footer .dw-h6 { font-size: 1rem; margin-bottom: .5rem; }
@media (min-width: 992px) {
    footer > section > [data-swift-container].d-flex > [data-dw-itemtype="swift-v2_navigation"] { flex: 0 1 auto !important; min-width: 9rem; }
    footer > section > [data-swift-container].d-flex > [data-dw-itemtype="swift-v2_text"] { flex: 0 1 auto !important; margin-left: auto; }
}
@media (max-width: 991.98px) {
    footer > section > [data-swift-container].d-flex > [data-swift-gridcolumn] { flex: 1 1 calc(50% - 1.5rem) !important; }
    footer > section > [data-swift-container].d-flex > [data-dw-itemtype="swift-v2_text"] { flex-basis: 100% !important; }
}

/* --- 5. Vertical rhythm. Swift row space 6 = 96px per side, so two adjacent rows made 192px bands
   (cart, dashboard, express buy, PDP). Cap: 32px per side + the 32px section margin = 96px at
   1440 for major breaks, 64px inside a section; 48px on phones. --- */
main [data-swift-gridrow][data-dw-row-space-top="6"],
html body[data-dw-page-id] main > section[data-swift-gridrow][data-dw-row-space-top="6"] { --dw-row-space-top: clamp(1rem, 2.5vw, 2rem); }
main [data-swift-gridrow][data-dw-row-space-bottom="6"],
html body[data-dw-page-id] main > section[data-swift-gridrow][data-dw-row-space-bottom="6"] { --dw-row-space-bottom: clamp(1rem, 2.5vw, 2rem); }
main [data-swift-gridrow]:is([data-dw-row-space-top="7"], [data-dw-row-space-top="8"], [data-dw-row-space-top="9"], [data-dw-row-space-top="10"]) { --dw-row-space-top: clamp(1.5rem, 3.5vw, 3rem); }
main [data-swift-gridrow]:is([data-dw-row-space-bottom="7"], [data-dw-row-space-bottom="8"], [data-dw-row-space-bottom="9"], [data-dw-row-space-bottom="10"]) { --dw-row-space-bottom: clamp(1.5rem, 3.5vw, 3rem); }
body[data-dw-itemtype="swift-v2_page"] > main > section + section { margin-top: clamp(1rem, 2.5vw, 2rem); }
/* A row whose columns rendered nothing still paints its row space: hide it (Swift columns hold
   whitespace, so :empty cannot be used; see memory css-has-cannot-nest). */
main [data-swift-gridrow]:has([data-swift-gridcolumn]):not(:has([data-swift-gridcolumn] > *)) { display: none; }
/* Home components carried their own 64-88px padding on top of the row space. */
.cabp-process { padding-block: clamp(32px, 4vw, 56px); }
.cabp-logowall { padding-block: clamp(32px, 4vw, 48px); }
.cabp-splitcta { margin-top: 0; }
.cabp-statstrip { padding-block: 1.5rem; }
/* Express buy: the app grid is min-height 100vh on lg, leaving a 346px empty band under an empty
   list. Let it size to content. */
[data-dw-itemtype="swift-v2_expressbuyapp"] .min-vh-lg-100 { min-height: 0 !important; }
[data-dw-itemtype="swift-v2_expressbuyapp"] .h-lg-100 { height: auto !important; }
[data-dw-itemtype="swift-v2_expressbuyapp"] .js-express-buy-empty-state { min-height: 0 !important; padding-block: 2rem; }

/* --- 7. Checkout step 1 sat at x=208 (ps-xl-6 / ps-xxl-8) while every other page starts at the
   container edge. --- */
@media (min-width: 992px) {
    #InformationUser > [class*="g-col-lg-8"] { padding-left: 0 !important; }
    #InformationUser form#ordersubmit { margin-left: 0 !important; }
}
#SelectDeliveryAddressGroup > label.list-group-item { padding-left: .75rem; }
/* Home category tiles: a 904px narrow container started the grid at x=268. Full container width,
   six across on desktop, three on tablet, two on phones. */
main section[data-swift-gridrow]:has(> [data-swift-container] > [data-dw-itemtype="swift-v2_productgroupgrid"]) > [data-swift-container] { max-width: calc(min(1680px, 100%) - 32px) !important; }
[data-dw-itemtype="swift-v2_productgroupgrid"] .item_swift-v2_productgroupgrid > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (min-width: 576px) { [data-dw-itemtype="swift-v2_productgroupgrid"] .item_swift-v2_productgroupgrid > .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 1200px) { [data-dw-itemtype="swift-v2_productgroupgrid"] .item_swift-v2_productgroupgrid > .grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } }
[data-dw-itemtype="swift-v2_productgroupgrid"] .card.ratio { --bs-aspect-ratio: 100%; }

/* D1: +POINTS eyebrow green #2E9D33 measured 3.51:1 at 11px; loyalty green ink 5.4:1. */
.cabp-points-eyebrow { color: #1E7B4F !important; }

/* Users list (UserGroupUser_List): the card clipped the row-actions dropdown (card overflow:hidden + a transformed card
   made the fixed menu card-relative). Card no longer clips; the header row carries the rounded corners instead.
   Horizontal scroll stays on .table-responsive. */
.cabp-users-card { overflow: visible; position: relative; z-index: 5; } /* z-index: the open menu must paint above the footer links that follow the card */
.cabp-users-card > .table-responsive { border-radius: inherit; position: relative; } /* position: contains the .visually-hidden sort radios, which the card used to clip */
.cabp-users-card thead tr:first-child th:first-child { border-top-left-radius: calc(var(--bs-card-border-radius, .5rem) - 1px); }
.cabp-users-card thead tr:first-child th:last-child { border-top-right-radius: calc(var(--bs-card-border-radius, .5rem) - 1px); }
.cabp-users-card tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--bs-card-border-radius, .5rem) - 1px); }
.cabp-users-card tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--bs-card-border-radius, .5rem) - 1px); }

/* ===== Mini-cart footer opaque (2026-10-10, owner report) =====
   Cause: the cart summary's .offcanvas-body is the scroll container and carries
   padding 1rem 2rem. The footer (#cartSummaryFooter) is position:sticky bottom:0
   inside it, so it sticks to the CONTENT edge and the 1rem bottom padding strip plus
   the 2rem side strips stay uncovered; cart lines scroll visible through them,
   below "Continue shopping". Fix: no bottom padding on the body, footer bleeds to the
   full panel width with its own padding, opaque white, top border. Scoped to the offcanvas. */
#DynamicOffcanvas .offcanvas-body.item_swift-v2_cartsummary { padding-bottom: 0 !important; }
#DynamicOffcanvas #cartSummaryFooter {
    margin-left: calc(-1 * var(--bs-offcanvas-padding-x, 2rem));
    margin-right: calc(-1 * var(--bs-offcanvas-padding-x, 2rem));
    padding: .75rem var(--bs-offcanvas-padding-x, 2rem) 1rem;
    background-color: #fff !important;
    border-top: 1px solid var(--bs-gray-300, #dee2e6);
    z-index: 2;
}