/* ===========================================================
   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: 3px;
    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: 3px;
    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.
   Repurposes the otherwise-empty dark-scheme rowflex section above the logo
   row. The walkthrough shows this band as cream (#F5F2EC) with the user's
   assigned DC, the DC manager's name + phone + email, and DC hours. Per-user
   resolution lives in Swift-v2_Master.cshtml — it sets `--cabp-dc-band` from
   the logged-in user's default ship-to address2 ("DC=<code>") and a 5-DC
   lookup table. The fallback string here is the OMA default for anon visits. */
header.sticky-top > section[data-dw-itemtype="swift-v2_rowflex"][data-dw-colorscheme="dark"] {
    position: relative;
    background: var(--cabp-cream) !important;
    border-bottom: 1px solid var(--cabp-cream-mid);
    min-height: 36px;
}
header.sticky-top > section[data-dw-itemtype="swift-v2_rowflex"][data-dw-colorscheme="dark"] [data-swift-text] {
    visibility: hidden;
}
header.sticky-top > section[data-dw-itemtype="swift-v2_rowflex"][data-dw-colorscheme="dark"]::before {
    content: var(--cabp-dc-band, "Omaha DC  ·  Mike Herwig, DCM  ·  7am–5pm CT  ·  402-266-3421  ·  Email DC");
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cabp-slate);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    pointer-events: none;
    font-feature-settings: "ss03";
}

/* 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;
}

/* 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);
}

/* Hide the broken Digital Assets Portal link from header (defence in depth) */
[data-dw-itemtype="swift-v2_text"] .dw-paragraph-0:has(a[href*="ID=8308"]) {
    display: none !important;
}

/* ===========================================================
   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 (PageID 96) — 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[data-dw-page-id="96"] main > section[data-swift-gridrow][data-dw-row-space-top="6"] {
    --dw-row-space-top: clamp(2rem, 4vw, 4rem);
}
body[data-dw-page-id="96"] 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[data-dw-page-id="96"] main > section[data-swift-gridrow][data-dw-colorscheme="dark"][data-dw-row-space-top="6"],
body[data-dw-page-id="96"] 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[data-dw-page-id="100"].cabp-content-page main > section[data-swift-gridrow="1Column"]:first-of-type,
body[data-dw-page-id="103"].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[data-dw-page-id="103"] .swiffy-slider .card-img-overlay {
    background-image: none !important;
}
body[data-dw-page-id="103"] .swiffy-slider .card-img {
    filter: brightness(.58) contrast(1.05) saturate(1.1);
}
body[data-dw-page-id="103"] .swiffy-slider .card-text,
body[data-dw-page-id="103"] .swiffy-slider .card-text :is(h1, h2, h3, h4, h5, h6, p, a, span) {
    color: #fff;
}
body[data-dw-page-id="103"] .swiffy-slider .card-text {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .65), 0 4px 22px rgba(0, 0, 0, .8);
}
body[data-dw-page-id="103"] .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[data-dw-page-id="110"] main > section[data-swift-gridrow="1Column"]:first-of-type [data-swift-text],
body.cabp-content-page[data-dw-page-id="111"] main > section[data-swift-gridrow="1Column"]:first-of-type [data-swift-text],
body.cabp-content-page[data-dw-page-id="112"] main > section[data-swift-gridrow="1Column"]:first-of-type [data-swift-text],
body.cabp-content-page[data-dw-page-id="113"] main > section[data-swift-gridrow="1Column"]:first-of-type [data-swift-text],
body.cabp-content-page[data-dw-page-id="114"] 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);
}