/* ============================================================
   CPP · DLZ COMPANY STORE — "BUILT TO SPEC" theme overlay  v1.0
   Additive reskin of the live BrightSites theme (stylistic).
   Loads AFTER custom-main.css via snippets/cpp/cpp_head-include.
   Ported from the CDK Garage engine (CDK_V1) — same touchpoints,
   same functionality, DLZ brand throughout.
   Typography per DLZ 2026 brand book: Inter only · headings
   Title Case · uppercase reserved for small labels/plates/nav.
   Art language: frame marks (corner brackets) + lift patterns
   (stepped right angles) — NO solid rings, NO tints of brand colors.
   Palette: New Maroon #8D2041 · Legacy Maroon #67213C ·
   Bright Red #ED3332 · Lake Blue #00BBDC · Ocean Blue #003349 ·
   Air Blue #D1E8F2 · Dark Gray #3D3935 · neutral grays
   ============================================================ */

:root{
  /* legacy token names kept so every downstream rule keeps working —
     values are DLZ brand (see brand book): ink=Dark Gray text/neutral dark,
     carbon=New Maroon chrome, teal=New Maroon action, glow=Lake Blue accent,
     amber=Bright Red callout */
  --cpp-ink:#3D3935; --cpp-carbon:#8D2041; --cpp-teal:#8D2041;
  --cpp-teal-deep:#67213C; --cpp-glow:#00BBDC; --cpp-amber:#ED3332;
  --cpp-fog:#F4F3F1; --cpp-line:#DEDDDA; --cpp-gray:#75787B; --cpp-gray-2:#B1B3B3;
  /* DLZ-native names */
  --cpp-maroon:#8D2041; --cpp-legacy:#67213C; --cpp-red:#ED3332;
  --cpp-lake:#00BBDC; --cpp-ocean:#003349; --cpp-air:#D1E8F2;
  --cpp-font:'Inter',Helvetica,Arial,sans-serif;
  --cpp-r-s:3px; --cpp-r-m:6px; --cpp-r-l:10px;
  --cpp-shadow:0 10px 30px rgba(24,6,13,.10);
}

/* ---------- base type ---------- */
body{font-family:var(--cpp-font);color:#3D3935}
h1,h2,h3,h4,h5,h6{font-family:var(--cpp-font);font-weight:700;text-transform:none;letter-spacing:0}

/* micro-label utility (matches cdkglobal.com small uppercase CTAs) */
.cpp-label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

/* ---------- top utility bar (.navbar-container) ---------- */
.navbar-container{background:var(--cpp-ocean)!important;border-bottom:1px solid rgba(255,255,255,.07)}
.navbar-container .nav-link{color:#E9E2E5!important;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding-top:.55rem;padding-bottom:.55rem}
.navbar-container .nav-link:hover{color:var(--cpp-glow)!important}
/* Work Order pill — the cart link */
.navbar-container a[href*="/cart"]{background:var(--cpp-teal)!important;color:#fff!important;border-radius:999px;padding:.3rem .9rem!important;margin:.2rem 0}
.navbar-container a[href*="/cart"]:hover{background:var(--cpp-teal-deep)!important;color:#fff!important}

/* ---------- header ---------- */
.header-container{background:var(--cpp-carbon)!important;border-bottom:1px solid rgba(255,255,255,.06)!important}
.header-navbar .navbar-brand img{max-height:52px}
/* nav links */
.header-links > li > a, .header-links .nav-link{color:#F1EDEF!important;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.header-links > li > a:hover, .header-links .nav-link:hover{color:var(--cpp-glow)!important}
.header-links .dropdown-menu{background:var(--cpp-carbon);border:1px solid rgba(255,255,255,.09);border-radius:var(--cpp-r-m);box-shadow:var(--cpp-shadow)}
.header-links .dropdown-menu a{color:#EDE8EA!important;font-size:12px;font-weight:600}
.header-links .dropdown-menu a:hover{background:rgba(0,187,220,.09);color:var(--cpp-glow)!important}
/* search */
.search-form input{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:var(--cpp-r-s)}
.search-form input::placeholder{color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.08em;font-size:10.5px}
.search-form button, .search-form .btn{background:var(--cpp-teal);border-color:var(--cpp-teal);color:#fff}

/* ---------- CPP marquee (injected by cpp_thegarage.js under the header) ---------- */
.cpp-marquee{background:var(--cpp-red);color:#fff;overflow:hidden;white-space:nowrap;position:relative}
.cpp-marquee .cpp-marquee-track{display:inline-block;padding:7px 0;animation:cpp-marquee 38s linear infinite;will-change:transform}
.cpp-marquee span{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:0 26px}
.cpp-marquee span::after{content:"\2310";margin-left:52px;opacity:.55;font-weight:800}
@keyframes cpp-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cpp-marquee .cpp-marquee-track{animation:none}}

/* ---------- plates (restyled native .sku-ribbon) ---------- */
/* dedupe: the theme's per-tile script stacks duplicates — show only the first */
.product-thumbnail .sku-ribbon ~ .sku-ribbon{display:none!important}
/* availability plate — small pill, top-left over the gray image frame (matches the
   approved mockup: product is centered with margin so the plate sits over gray). */
.product-thumbnail{position:relative}
.product-thumbnail .sku-ribbon{position:absolute;top:12px;left:12px;z-index:3}
.sku-ribbon span{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:var(--cpp-font)!important;font-size:10px!important;font-weight:600!important;
  letter-spacing:.13em;text-transform:uppercase;
  padding:4px 9px!important;border-radius:3px;line-height:1!important;
  box-shadow:0 2px 8px rgba(24,6,13,.16);
}
/* status colors via data attr set by cpp js (overrides the inline legacy colors) */
.sku-ribbon[data-cpp-status="mto"] span{background:var(--cpp-maroon)!important;color:#fff!important}
.sku-ribbon[data-cpp-status="ready"] span{background:var(--cpp-air)!important;color:var(--cpp-ocean)!important}
.sku-ribbon[data-cpp-status="preorder"] span{background:var(--cpp-red)!important;color:#fff!important}

/* ---------- product tiles ---------- */
.product-thumbnail{border:1px solid var(--cpp-line);border-radius:12px;background:#fff;transition:box-shadow .18s,transform .18s;overflow:hidden}
.product-thumbnail:hover{box-shadow:0 16px 38px rgba(24,6,13,.14);transform:translateY(-3px)}
/* image frame (mockup .pimg) — light-gray gradient + faint diagonal stripes; the
   product is CONTAINED with margin so the plate sits over gray, not the product.
   DEFINITE height (native forces min-height:300px, so pin height/min/max). The photo
   is white-bg, so mix-blend-mode:multiply melts that white into the gray frame. */
.product-thumbnail .thumbnail-img-container{background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(24,6,13,.02) 14px 16px),linear-gradient(160deg,#F6F5F3,#ECEBE9);display:flex;align-items:center;justify-content:center;height:230px!important;min-height:0!important;max-height:230px!important;padding:26px 24px 22px;border-bottom:1px solid var(--cpp-line);overflow:hidden}
/* the photo is wrapped in an <a> — fill + center so max-height:100% resolves and the
   image can't spill. NO z-index/position here: a stacking context would isolate the
   image's mix-blend-mode and the white photo bg would NOT melt into the gray frame. */
.product-thumbnail .thumbnail-img-container > a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0;overflow:hidden}
.product-thumbnail .thumbnail-img-container img{width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;mix-blend-mode:multiply;transition:transform .35s ease}
.product-thumbnail:hover .thumbnail-img-container img{transform:scale(1.045)}
.product-thumbnail .thumbnail-description-container{padding:14px 16px 16px!important}
.product-thumbnail .thumbnail-description-container > a{position:relative;display:block}
.product-thumbnail .card-title{font-size:13.5px;font-weight:700!important;line-height:1.35!important;color:var(--cpp-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:37px;margin:2px 0 8px}
.product-thumbnail a:hover .card-title{color:var(--cpp-teal)}
.product-thumbnail .card-text{font-weight:700;color:var(--cpp-ink)}
.product-thumbnail p.card-text{font-size:15px;font-weight:700;color:var(--cpp-ink);margin:0}
/* MOQ (2nd .card-text, native "Minimum Order Quantity: N") → small amber, right-
   aligned on the price line, mockup .moq. cpp js shortens the text to "MOQ N". */
.product-thumbnail .thumbnail-description-container p.card-text ~ p.card-text{position:absolute;right:0;bottom:1px;font-size:9.5px!important;font-weight:600!important;color:var(--cpp-amber)!important;letter-spacing:.06em;text-transform:uppercase;margin:0!important;line-height:1;white-space:nowrap}
.product-thumbnail .card-text del{font-weight:400;color:var(--cpp-gray-2)}
/* part number line injected by cpp js */
.cpp-sku{display:block;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cpp-gray-2);margin:0 0 3px}
.new-item-label{background:var(--cpp-lake);color:var(--cpp-ocean);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:3px;padding:3px 8px}

/* ---------- category page ---------- */
.products-result-verbiage{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cpp-gray)}
.sort-form select{border:1px solid var(--cpp-line);border-radius:var(--cpp-r-s);font-weight:600;font-size:13px;padding:8px 12px}
.pagination .page-link{color:var(--cpp-ink);font-weight:700;border-color:var(--cpp-line)}
.pagination .page-item.active .page-link{background:var(--cpp-teal);border-color:var(--cpp-teal);color:#fff}
/* breadcrumbs */
[class*="breadcrumb"] a{color:var(--cpp-gray);font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
[class*="breadcrumb"] a:hover{color:var(--cpp-teal)}

/* ---------- PDP ---------- */
.product-header .product-title h2{font-size:clamp(24px,2.6vw,32px);font-weight:700;line-height:1.15;color:var(--cpp-ink)}
/* part-number plate (cpp js wraps the SKU span) */
.cpp-pdp-skuplate{display:inline-flex;align-items:stretch;border:1.5px solid var(--cpp-ink);border-radius:5px;overflow:hidden;margin:10px 0 4px}
.cpp-pdp-skuplate .k{background:var(--cpp-ink);color:#fff;font-size:9px;font-weight:700;letter-spacing:.2em;padding:6px 9px;text-transform:uppercase;display:flex;align-items:center}
.cpp-pdp-skuplate .v{font-size:11px;font-weight:600;letter-spacing:.08em;padding:6px 11px;color:var(--cpp-ink);display:flex;align-items:center}
.product-price .current-price{font-size:28px;font-weight:700;color:var(--cpp-ink)}
.product-price .text-success{color:var(--cpp-teal)!important;font-weight:700}
/* amber MTO notice (cpp js injects above the price when SKU flags MTO) */
.cpp-mto-note{display:flex;gap:11px;background:var(--cpp-air);border:1px solid rgba(0,51,73,.15);border-left:4px solid var(--cpp-maroon);border-radius:var(--cpp-r-s);padding:12px 14px;margin:12px 0}
.cpp-mto-note .t{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cpp-ocean);display:block;margin-bottom:3px}
.cpp-mto-note p{font-size:12.5px;color:#1E4258;line-height:1.55;margin:0}
/* embroidery logo picker buttons */
[class*="logo-location-button"]{border:1.5px solid var(--cpp-line)!important;border-radius:var(--cpp-r-s)!important;transition:border-color .13s,box-shadow .13s}
[class*="logo-location-button"]:hover{border-color:var(--cpp-teal)!important}
[class*="logo-location-button"].selected{border-color:var(--cpp-teal)!important;box-shadow:0 0 0 1px var(--cpp-teal)}
/* form controls */
#edit_website_product select,#edit_website_product input[type="number"],#edit_website_product input[type="text"]{border:1px solid var(--cpp-line);border-radius:var(--cpp-r-s);font-weight:600}
#edit_website_product select:focus{border-color:var(--cpp-teal);box-shadow:0 0 0 1px var(--cpp-teal)}
#edit_website_product label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cpp-gray)}
/* Add to Cart — style only, native behavior untouched */
#edit_website_product input[type="submit"],#edit_website_product button[type="submit"]{
  background:var(--cpp-teal);border:0;color:#fff;font-weight:700;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;border-radius:var(--cpp-r-s);padding:13px 26px;transition:background .13s}
#edit_website_product input[type="submit"]:hover,#edit_website_product button[type="submit"]:hover{background:var(--cpp-teal-deep)}

/* ---------- sign-in ---------- */
.sign-in .nav-tabs .nav-link{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cpp-gray);border:0;border-bottom:3px solid transparent}
.sign-in .nav-tabs .nav-link.active{color:var(--cpp-ink);border-bottom-color:var(--cpp-teal);background:transparent}
.sign-in input[type="submit"],.sign-in button[type="submit"]{background:var(--cpp-teal);border:0;color:#fff;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--cpp-r-s);padding:12px 24px}
.sign-in input[type="submit"]:hover{background:var(--cpp-teal-deep)}
.sign-in label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cpp-gray)}
.sign-in input[type="email"],.sign-in input[type="password"],.sign-in input[type="text"]{border:1px solid var(--cpp-line);border-radius:var(--cpp-r-s)}

/* ---------- footer ---------- */
.footer-container{background:var(--cpp-legacy)!important;color:#E7E0E2;border-top:4px solid var(--cpp-red)}
.footer-container a{color:#E9E2E5;text-decoration:none}
.footer-container a:hover{color:var(--cpp-glow)}
.footer-container h5,.footer-container h6,.footer-container [class*="title"]{color:#fff;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}

/* ---------- toasts ---------- */
.notification-container .alert,.notification-container [class*="notification"]{
  border-radius:var(--cpp-r-m);border:1px solid var(--cpp-line);box-shadow:var(--cpp-shadow);font-weight:600}

/* ---------- mobile drawer + quick actions ---------- */
.mobile-slider{background:var(--cpp-carbon)}
.mobile-slider .nav-link{color:#F1EDEF!important;font-weight:700;font-size:14px;letter-spacing:.04em}
.mobile-slider .nav-link:hover{color:var(--cpp-glow)!important}
.quick-actions-menu{background:var(--cpp-carbon);border-top:1px solid rgba(255,255,255,.08)}
.quick-actions-menu a{color:#F1EDEF}

/* ---------- CPP homepage sections (cpp_home-aisles / cpp_home-lanes) ---------- */
.cpp-section{padding:44px 0 8px}
.cpp-eyebrow{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cpp-teal)}
.cpp-eyebrow::before{content:"";width:12px;height:12px;border-top:3px solid var(--cpp-red);border-left:3px solid var(--cpp-red);margin-bottom:-4px}
.cpp-sec-title{font-size:clamp(24px,3vw,34px);font-weight:700;margin:8px 0 22px;color:var(--cpp-ink)}
/* aisle tiles */
.cpp-aisles{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.cpp-aisle{position:relative;grid-column:span 3;min-height:210px;border-radius:4px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:20px 22px;color:#fff;text-decoration:none;background:var(--cpp-legacy)}
.cpp-aisle--accent{background:var(--cpp-maroon)}
.cpp-aisle--ocean{background:var(--cpp-ocean)}
.cpp-aisle--red{background:var(--cpp-red)}
/* lift-pattern corner: stepped right angles up-and-to-the-right */
.cpp-aisle::after{content:"";position:absolute;right:0;top:0;width:74px;height:74px;background:
  linear-gradient(to left,rgba(255,255,255,.16) 0 14px,transparent 14px),
  linear-gradient(to bottom,rgba(255,255,255,.16) 0 14px,transparent 14px);
  background-size:14px 74px,74px 14px;background-position:right top,right top;background-repeat:no-repeat;pointer-events:none}
.cpp-aisle--lg{grid-column:span 6;min-height:260px}
.cpp-aisle .anum{position:absolute;top:18px;left:22px;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--cpp-lake);display:flex;align-items:center;gap:8px}
.cpp-aisle .anum::before{content:"";width:10px;height:10px;border-top:2.5px solid var(--cpp-lake);border-left:2.5px solid var(--cpp-lake);margin-bottom:-3px}
.cpp-aisle .aicon{position:absolute;top:50%;left:50%;transform:translate(-50%,-62%);width:96px;height:96px;color:rgba(255,255,255,.30);pointer-events:none}
.cpp-aisle--lg .aicon{width:140px;height:140px}
.cpp-aisle .aicon::before{content:"";position:absolute;inset:-18px;border:2px solid rgba(255,255,255,.16)}
.cpp-aisle .aicon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:.6;stroke-linecap:round;stroke-linejoin:round}
.cpp-aisle .aicon svg *{stroke-dasharray:none}
.cpp-aisle .at{position:relative;font-size:22px;font-weight:700;line-height:1.1}
.cpp-aisle--lg .at{font-size:30px}
.cpp-aisle .as{position:relative;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:6px}
.cpp-aisle .aarrow{position:absolute;right:20px;bottom:20px;width:38px;height:38px;border-radius:3px;background:var(--cpp-red);display:grid;place-items:center;transition:transform .16s}
.cpp-aisle .aarrow svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cpp-aisle:hover .aarrow{transform:rotate(-45deg)}
/* lanes band */
.cpp-lanes-band{background:var(--cpp-carbon);border-radius:var(--cpp-r-l);padding:34px 30px 30px;margin:30px 0 10px;position:relative;overflow:hidden}
.cpp-lanes-band::before{content:"";position:absolute;right:-40px;top:-40px;width:300px;height:300px;border:34px solid rgba(255,255,255,.07);border-bottom:0;border-left:0;pointer-events:none}
.cpp-lanes-band::after{content:"";position:absolute;right:62px;top:62px;width:150px;height:150px;border:34px solid rgba(255,255,255,.05);border-bottom:0;border-left:0;pointer-events:none}
.cpp-lanes-band .cpp-sec-title{color:#fff}
.cpp-lanes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cpp-lane{border-radius:4px;padding:24px;background:var(--cpp-ocean)}
.cpp-lane--dark{background:#3D3935;border:1px solid rgba(255,255,255,.07)}
.cpp-lane .plate{display:inline-flex;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:3px}
.cpp-lane .plate--ready{background:var(--cpp-lake);color:var(--cpp-ocean)}
.cpp-lane .plate--mto{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6)}
.cpp-lane h3{font-size:22px;font-weight:700;color:#fff;margin:12px 0 8px}
.cpp-lane p{font-size:13px;line-height:1.65;color:rgba(255,255,255,.78);margin:0}
.cpp-lane .track{border-top:2px solid rgba(255,255,255,.35);margin:18px 0 7px}
.cpp-lane .eta{display:flex;justify-content:space-between;font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
/* service lane cards */
.cpp-service{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0 40px}
.cpp-scard{display:flex;gap:15px;align-items:flex-start;background:#fff;border:1px solid var(--cpp-line);border-radius:var(--cpp-r-m);padding:20px;text-decoration:none;transition:box-shadow .16s}
.cpp-scard:hover{box-shadow:var(--cpp-shadow)}
.cpp-scard .sicon{width:46px;height:46px;flex:none;border-radius:3px;border:2px solid var(--cpp-air);background:var(--cpp-air);display:grid;place-items:center}
.cpp-scard .sicon svg{width:21px;height:21px;stroke:var(--cpp-ocean);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cpp-scard h4{font-size:14.5px;font-weight:700;color:var(--cpp-ink);margin:0 0 5px}
.cpp-scard p{font-size:12.5px;color:var(--cpp-gray);line-height:1.6;margin:0 0 8px}
.cpp-scard .go{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cpp-teal)}

/* ---------- responsive ---------- */
@media (max-width:991px){
  .cpp-aisle,.cpp-aisle--lg{grid-column:span 6;min-height:190px}
  .cpp-lanes{grid-template-columns:1fr}
  .cpp-service{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cpp-aisle,.cpp-aisle--lg{grid-column:span 12}
  .cpp-marquee span{letter-spacing:.12em}
  .product-header .product-title h2{font-size:22px}
  .product-thumbnail .thumbnail-img-container{height:190px!important;min-height:0!important;max-height:190px!important;padding:20px 18px 16px}
  .product-thumbnail .thumbnail-description-container{padding:12px 14px 14px!important}
  .product-thumbnail .card-title{font-size:13px;min-height:34px}
}
/* --- product grid column count (category / search / homepage Featured) ---
   The theme's JS hard-locks the grid to per_row=4 and only SHRINKS each card as
   the container narrows, so ~560-1200px renders 4 cramped columns. Take over with
   a real responsive column count (3-up mid widths, 2-up tablet) for BOTH the
   .content-page grids (category/search) AND the .featured-products list on the
   homepage. Native 4-up returns at >=1200px. */
@media (min-width:820px) and (max-width:1199.98px){
  .content-page .product-list, .featured-products .product-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important;margin:0!important}
  .content-page .product-list > .product-thumbnail, .featured-products .product-list > .product-thumbnail{width:auto!important;margin:0!important}
  .featured-products .cpp-feat-head{padding-left:0!important;padding-right:0!important}
}
@media (max-width:819.98px){
  .content-page .product-list, .featured-products .product-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;margin:0!important}
  .content-page .product-list > .product-thumbnail, .featured-products .product-list > .product-thumbnail{width:auto!important;margin:0!important}
  .featured-products .cpp-feat-head{padding-left:0!important;padding-right:0!important}
}

/* ============================================================
   v2.0 — MOCK-PARITY MODULES (header rebuild · mega · flyout · hero)
   ============================================================ */

.navbar-container a,.cpp-navrow a,.cpp-account,a.cpp-wo-pill{text-decoration:none!important}
/* ---------- utility bar v2 ---------- */
.cpp-utility{display:flex!important;align-items:center!important;justify-content:space-between;gap:20px}
.cpp-utility-brand{margin-right:auto}
.navbar-container ul.nav{display:flex;align-items:center;margin:0}
.navbar-container ul.nav li{display:flex;align-items:center}
.cpp-utility-brand{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#E9E2E5;white-space:nowrap;overflow:hidden}
.cpp-utility-brand .sl{width:10px;height:10px;flex:none;border-top:2.5px solid var(--cpp-lake);border-left:2.5px solid var(--cpp-lake);margin-bottom:-3px}
.cpp-utility-brand b{color:#fff;font-weight:700}
.cpp-utility-brand .dash,.cpp-utility-brand .tag{color:#D8CCD1}
@media (max-width:1420px){.cpp-utility-brand .dash,.cpp-utility-brand .tag{display:none}}
.navbar-container ul.nav,.navbar-container ul.header-links.pages{flex-wrap:nowrap}
.navbar-container ul.nav li,.navbar-container ul.header-links.pages li{white-space:nowrap}
.cpp-utility-brand{min-width:0;flex:0 1 auto}
@media (min-width:992px) and (max-width:1240px){.navbar-container ul.nav > li > a.nav-link,.navbar-container ul.nav > li > a.dropdown-toggle,.navbar-container ul.header-links.pages .nav-link{padding-left:.45rem!important;padding-right:.45rem!important;letter-spacing:.08em}}
/* logged-in utility bar: uniform links, vertically centered (native pt:20px/16px font beaten) */
.navbar-container ul.nav > li{display:flex;align-items:center}
.navbar-container ul.nav > li > a.nav-link,
.navbar-container ul.nav > li > a.dropdown-toggle{font-size:11px!important;font-weight:600!important;letter-spacing:.12em;text-transform:uppercase;color:#E9E2E5!important;display:inline-flex!important;align-items:center;gap:6px;padding:.55rem .75rem!important;line-height:1.2!important;height:auto!important}
.navbar-container ul.nav > li > a.nav-link:hover,
.navbar-container ul.nav > li > a.dropdown-toggle:hover{color:var(--cpp-glow)!important}
/* account dropdown (Dashboard/Order History/...) — carbon panel, teal hover, solid divider */
.navbar-container .dropdown-menu{background:var(--cpp-carbon)!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:10px!important;box-shadow:0 18px 44px rgba(24,6,13,.5)!important;padding:8px!important;min-width:230px;margin-top:10px!important}
.navbar-container .dropdown-menu .dropdown-item{color:#EDE8EA!important;font-size:11px!important;font-weight:600!important;letter-spacing:.1em;text-transform:uppercase;padding:10px 12px!important;border-radius:6px;background:transparent!important}
.navbar-container .dropdown-menu .dropdown-item:hover,
.navbar-container .dropdown-menu .dropdown-item:focus{background:rgba(0,187,220,.09)!important;color:var(--cpp-glow)!important}
.navbar-container .dropdown-menu .dropdown-divider{border-top:1px solid rgba(255,255,255,.16)!important;margin:6px 4px;opacity:1}
/* register link teal like mock */
.navbar-container a[href*="register"]{color:var(--cpp-glow)!important}

/* ---------- header row v2 ---------- */
body.cpp-header-built .header-navbar{display:block;padding:9px 0 8px}
.cpp-hrow{display:flex;align-items:center;gap:28px;padding:0 6px}
.cpp-hrow .navbar-brand{flex:none;margin:0}
.cpp-hrow .navbar-brand img{max-height:54px!important}
.cpp-hsearch{flex:1 1 auto;max-width:640px}
.cpp-hsearch .search-form{display:flex;flex-wrap:nowrap;align-items:stretch;width:100%!important;max-width:none!important;margin:0!important}
.cpp-hsearch .input-group{display:flex;flex-wrap:nowrap;width:100%}
.cpp-hsearch .input-group-append{display:flex}
.cpp-hsearch .search-form input{flex:1 1 auto;width:100%;height:46px;padding:0 18px;font-size:11px;font-weight:600;letter-spacing:.08em}
.cpp-hsearch .search-form button,.cpp-hsearch .search-form .btn{height:46px;width:52px;border-radius:0 var(--cpp-r-s) var(--cpp-r-s) 0;flex:none}
.cpp-hsearch .search-form input{border-radius:var(--cpp-r-s) 0 0 var(--cpp-r-s)}
/* driver's seat */
.cpp-account{display:flex;align-items:center;gap:10px;color:#fff!important;text-decoration:none!important;flex:none;margin-left:auto}
.cpp-account svg{width:22px;height:22px;color:#E9E2E5}
.cpp-account .l{display:block;font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#D8CCD1}
.cpp-account .v{display:block;font-size:14px;font-weight:700}
.cpp-account:hover .v{color:var(--cpp-glow)}
/* work order pill v2 (native cart anchor re-dressed) */
.cpp-workorder{position:relative;flex:none}
a.cpp-wo-pill{display:flex!important;align-items:center;gap:12px;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.22);border-radius:var(--cpp-r-s)!important;padding:8px 16px!important;color:#fff!important;text-decoration:none!important}
a.cpp-wo-pill:hover{border-color:var(--cpp-glow)}
a.cpp-wo-pill .cart-ic{position:relative;display:inline-flex}
a.cpp-wo-pill .cart-ic svg{width:22px;height:22px;color:#F1EDEF}
a.cpp-wo-pill .badge-ct{position:absolute;top:-7px;right:-9px;background:var(--cpp-lake);color:var(--cpp-ocean);font-size:9px;font-weight:800;min-width:15px;height:15px;border-radius:999px;display:grid;place-items:center;padding:0 3px}
a.cpp-wo-pill .l{display:block;font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#D8CCD1}
a.cpp-wo-pill .v{display:block;font-size:14px;font-weight:700}
/* nav on its own row */
.cpp-navrow{background:var(--cpp-legacy);border-top:1px solid rgba(255,255,255,.08);margin-top:12px}
.cpp-navrow-in{max-width:1500px;margin:0 auto;padding:0 20px}
.cpp-navrow ul.header-links{display:flex;flex-direction:row!important;flex-wrap:wrap;gap:2px;list-style:none;margin:0;padding:0;width:100%}
.cpp-navrow ul.header-links > li > a{display:flex;align-items:center;gap:6px;padding:15px 16px!important;font-size:12.5px}
.cpp-navrow ul.header-links > li:last-child > a{color:var(--cpp-glow)!important}
.cpp-mburger{display:none}
button.cpp-msearch{display:none}
/* r12: navrow responsive tighten (992-1450) */
.cpp-navrow ul.header-links{row-gap:0!important}
@media (max-width:1449.98px){.cpp-navrow ul.header-links{column-gap:2px!important}}
@media (max-width:1279.98px){.cpp-navrow ul.header-links > li > a{padding:13px 12px!important;font-size:12px!important;letter-spacing:1px!important}}
@media (max-width:1149.98px){.cpp-navrow ul.header-links > li > a{padding:11px 10px!important;font-size:11.5px!important;letter-spacing:.9px!important}}
/* r13: homepage mockup parity - aisles fog band, lanes full-bleed + animated roads, section rhythm, footer rebuild */
#cpp-aisles{background:var(--cpp-fog);box-shadow:0 0 0 100vmax var(--cpp-fog);clip-path:inset(0 -100vmax);padding:58px 0 62px;margin-top:-64px}
.featured-products{padding-top:54px;padding-bottom:58px}
#cpp-lanes{padding:0 0 8px}
.cpp-lanes-band{border-radius:0;box-shadow:0 0 0 100vmax var(--cpp-carbon);clip-path:inset(0 -100vmax);margin:0 0 58px;padding:62px 0 66px}
.cpp-lane{padding:30px 30px 26px}
.cpp-lane--dark{background:#3D3935;border:1px solid rgba(255,255,255,.09)}
.cpp-lane .track{border-top:0;height:6px;border-radius:3px;background:rgba(255,255,255,.12);position:relative;overflow:hidden;margin:22px 0 9px}
.cpp-lane .track::after{content:"";position:absolute;top:2px;bottom:2px;left:-36px;width:calc(100% + 36px);background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 18px,transparent 18px 36px);animation:cppRoad 1.4s linear infinite}
.cpp-lane--dark .track::after{animation-duration:3.2s}
@keyframes cppRoad{to{transform:translateX(36px)}}
@media (prefers-reduced-motion:reduce){.cpp-lane .track::after{animation:none}}
.footer-container.cpp-foot-built{border-top:0!important;padding:0!important}
.footer-container.cpp-foot-built > .wrapper{display:none}
.cpp-foot{background:var(--cpp-legacy);color:#D9CFD3}
.cpp-foot-main{max-width:1400px;margin:0 auto;padding:56px 20px 38px}
.cpp-foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px}
.cpp-foot-logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none!important}
.cpp-foot-logo .lt{display:flex;flex-direction:column;line-height:1.05}
.cpp-foot-logo .l1{color:#fff;font-weight:800;font-size:16px;letter-spacing:.06em}
.cpp-foot-logo .l2{color:#D9CFD3;font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;margin-top:3px}
.cpp-foot-blurb{font-size:13px;line-height:1.7;margin:18px 0 0;color:#DCD2D6;max-width:300px}
.cpp-foot-col h5{color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;margin:0 0 15px;display:flex;align-items:center;gap:8px}
.cpp-foot-col h5 .tick{width:12px;height:12px;border-top:3px solid var(--cpp-red);border-left:3px solid var(--cpp-red);margin-bottom:-4px}
.cpp-foot-col a{display:block;padding:6px 0;font-size:13.5px;color:#DCD2D6!important;text-decoration:none!important;transition:color .12s,padding-left .12s}
.cpp-foot-col a:hover{color:var(--cpp-glow)!important;padding-left:4px}
.cpp-foot-bottom{border-top:1px solid rgba(255,255,255,.09)}
.cpp-foot-bottom .in{max-width:1400px;margin:0 auto;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cpp-foot-legal{font-size:10px;font-weight:600;letter-spacing:.1em;color:#C9B8BE;text-transform:uppercase}
.cpp-foot-plates{display:flex;gap:8px;flex-wrap:wrap}
.cpp-foot-plates .fp{display:inline-flex;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:3px;border:1.5px solid rgba(255,255,255,.35);color:#fff}
.cpp-foot-plates .fp--teal{border-color:var(--cpp-lake);color:var(--cpp-lake)}
@media (max-width:991.98px){.cpp-foot-grid{grid-template-columns:1fr 1fr;gap:30px}}
@media (max-width:640px){.cpp-foot-grid{grid-template-columns:1fr;gap:26px}.cpp-foot-main{padding:40px 16px 28px}}
@media (max-width:991.98px){
  .cpp-navrow{display:none}
  .cpp-hsearch{display:none}
  .cpp-account{display:none}
  /* utility bar: branding line only, left-justified */
  .cpp-utility{justify-content:flex-start}
  .cpp-utility > ul, .navbar-container ul.nav{display:none!important}
  .cpp-utility-brand .dash,.cpp-utility-brand .tag{display:none}
  /* header: hamburger | centered roundel | search + cart */
  body.cpp-header-built .header-navbar{padding:12px 0}
  .cpp-hrow{position:relative;justify-content:space-between;gap:12px;min-height:64px;padding:6px 10px}
  .cpp-hrow .navbar-brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
  .cpp-hrow .navbar-brand img{max-height:44px!important}
  .cpp-mburger{display:inline-flex;align-items:center;justify-content:center;background:none!important;border:0!important;box-shadow:none!important;outline:none;color:#fff;width:44px;height:44px;padding:0}
  .cpp-mburger svg{width:24px;height:24px;stroke:#fff}
  button.cpp-msearch{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:#fff;width:42px;height:42px;padding:0;margin-left:auto}
  button.cpp-msearch svg{width:22px;height:22px}
  a.cpp-wo-pill{background:none!important;border:0!important;padding:6px 2px!important;gap:0}
  a.cpp-wo-pill .wo-tx{display:none}
  a.cpp-wo-pill .cart-ic svg{width:24px;height:24px}
  /* dots overlay the artwork, not the copy panel */
  .cpp-hero #homepage-carousel{position:relative}
}
/* drawer accordion (collapsed parents w/ carets) */
.mobile-slider a{text-decoration:none!important}
.mobile-slider li{list-style:none}
.mobile-slider li.cpp-has-sub{position:relative;display:flex;flex-direction:column;align-items:stretch}
.mobile-slider li.cpp-has-sub > a{display:block;width:auto;padding-right:56px}
.cpp-caret{position:absolute;right:0;top:0;width:52px;height:44px;background:none;border:0;color:#D8CCD1;display:inline-flex;align-items:center;justify-content:center;transition:transform .18s}
.cpp-caret svg{width:18px;height:18px}
.cpp-sub-all-a{display:block;padding:9px 2px;color:var(--cpp-glow)!important;font-size:12.5px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;text-decoration:none!important}
li.cpp-open > .cpp-caret{transform:rotate(180deg);color:var(--cpp-glow)}
.cpp-sub{display:none;margin:0;padding:0 0 6px 14px;border-left:1px solid rgba(255,255,255,.16)}
li.cpp-open > .cpp-sub{display:block}
.cpp-sub a{font-size:13px!important;font-weight:600!important;color:#E9E2E5!important}
/* drawer additions */
.cpp-drawer-extra{list-style:none;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18)}
.cpp-drawer-h{display:block;font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cpp-glow);margin-bottom:8px}
.cpp-drawer-list{list-style:none;margin:0;padding:0}
.cpp-drawer-link{display:block;padding:10px 2px;color:#F1EDEF!important;font-size:14px;font-weight:700;text-decoration:none!important;border-bottom:1px solid rgba(255,255,255,.07)}
.cpp-drawer-link:hover{color:var(--cpp-glow)!important}

/* ---------- featured units section header ---------- */
.cpp-feat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:6px 0 22px}
.cpp-feat-left{min-width:0}
.cpp-feat-title{font-size:clamp(26px,3vw,36px);font-weight:800;color:var(--cpp-ink);margin:9px 0 0;line-height:1.04}
.cpp-feat-viewall{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cpp-teal);text-decoration:none;white-space:nowrap;padding-bottom:6px}
.cpp-feat-viewall:hover{color:var(--cpp-teal-deep)}
.cpp-feat-viewall svg{width:15px;height:15px}
@media (max-width:640px){.cpp-feat-title{font-size:24px}.cpp-feat-head{margin-bottom:16px}}

/* ---------- mega dropdown ---------- */
li.cpp-has-mega{position:static}
@media (min-width:992px){
  li.cpp-has-mega > .dropdown-menu{display:none!important}
  .cpp-mega{display:none;position:absolute;left:0;top:100%;z-index:60;width:min(960px,94vw);background:#fff;color:var(--cpp-ink);box-shadow:0 30px 60px rgba(24,6,13,.35);border-top:3px solid var(--cpp-teal);border-radius:0 0 14px 14px}
  li.cpp-has-mega.cpp-mega-show .cpp-mega,li.cpp-has-mega:focus-within .cpp-mega{display:block}
  .cpp-navrow{position:relative}
}
@media (max-width:991.98px){.cpp-mega{display:none!important}}
.cpp-mega-grid{display:grid;grid-template-columns:1fr 250px;gap:28px;padding:22px 26px 16px}
.cpp-mega-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px 26px;align-content:start}
.cpp-mega-col.leaf .mh{margin-bottom:0}
.cpp-mega-col .mh .ct{margin-left:7px;letter-spacing:0}
.cpp-mega-all{display:flex;align-items:center;padding:12px 26px 15px;border-top:1px solid var(--cpp-line)}
.cpp-mega-all a{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cpp-teal);text-decoration:none}
.cpp-mega-all a:hover{color:var(--cpp-teal-deep)}
.cpp-mega-col .mh{display:block;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cpp-teal);text-decoration:none;padding-bottom:8px;border-bottom:2px solid rgba(141,32,65,.35);margin-bottom:12px}
.cpp-mega-col .mh:hover{color:var(--cpp-teal-deep)}
.cpp-mega-col ul{list-style:none;margin:0;padding:0}
.cpp-mega-col li{display:flex;align-items:baseline;gap:7px;padding:6px 0}
.cpp-mega-col li a{font-size:14px;font-weight:600;color:#3D3935;text-decoration:none}
.cpp-mega-col li a:hover{color:var(--cpp-teal)}
.cpp-mega-col li .ct{font-size:9.5px;font-weight:600;color:var(--cpp-gray-2)}
.cpp-mega-card{position:relative;background:var(--cpp-fog);border:1px solid var(--cpp-line);border-radius:var(--cpp-r-m);padding:12px;min-height:0}
.cpp-mega-card .sku-ribbon{position:absolute;top:10px;left:10px;z-index:2}
.cpp-mega-card .mc-a{display:block;text-decoration:none;color:inherit}
.cpp-mega-card img{width:100%;height:118px;object-fit:contain;background:#fff;border-radius:var(--cpp-r-s);margin:20px 0 8px}
.cpp-mega-card .mc-n{display:block;font-size:13.5px;font-weight:700;color:var(--cpp-ink);line-height:1.3}
.cpp-mega-card .mc-p{display:block;font-size:12px;font-weight:600;color:var(--cpp-teal);margin-top:5px}
.cpp-mega-strip{display:flex;align-items:center;gap:12px;max-width:1120px;margin:0 auto;padding:13px 24px 20px;border-top:1px solid var(--cpp-line)}
.cpp-mega-strip .lbl{font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cpp-gray-2)}
.cpp-mega-strip .chip{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--cpp-line);border-radius:999px;padding:6px 13px;color:var(--cpp-gray)}

/* ---------- cart flyout ---------- */
.cpp-flyout{display:none;position:absolute;right:0;top:calc(100% + 10px);z-index:70;width:330px;background:#fff;color:var(--cpp-ink);border-radius:var(--cpp-r-m);box-shadow:0 26px 60px rgba(24,6,13,.3);padding:18px}
.cpp-flyout::before{content:"";position:absolute;top:-10px;left:0;right:0;height:12px}
.cpp-flyout.cpp-open{display:block}
.cpp-sheet-backdrop{position:fixed;inset:0;background:rgba(24,6,13,.55);z-index:1049}
@media (max-width:991.98px){
  .cpp-flyout{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;border-radius:16px 16px 0 0;z-index:1050;box-shadow:0 -20px 60px rgba(24,6,13,.45);max-height:78vh;overflow:auto;padding:20px 18px calc(18px + env(safe-area-inset-bottom))}
  .cpp-workorder:hover .cpp-flyout{display:none}
  .cpp-flyout.cpp-open{display:block!important}
  .cpp-flyout .fclose{display:block!important}
}
.cpp-flyout .fh{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cpp-ink);padding-bottom:12px}
.cpp-flyout .fitem{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-top:1px solid var(--cpp-line)}
.cpp-flyout .fitem img{width:48px;height:48px;object-fit:contain;background:#fff;border:1px solid var(--cpp-line);border-radius:5px;flex:none} /* v2.4: white plate (was fog) per Austin */
.cpp-flyout .fmid{flex:1;min-width:0}
.cpp-flyout .fn{font-size:12.5px;font-weight:700;color:var(--cpp-ink);text-decoration:none;display:block;line-height:1.3}
.cpp-flyout .fn:hover{color:var(--cpp-teal)}
.cpp-flyout .fm{display:block;font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cpp-teal);margin-top:3px}
.cpp-flyout .fright{display:flex;align-items:flex-start;gap:8px;flex:none}
.cpp-flyout .fp{font-size:12.5px;font-weight:700}
.cpp-flyout .frm{background:none;border:0;color:var(--cpp-gray-2);font-size:17px;line-height:1;padding:0 2px;cursor:pointer}
.cpp-flyout .frm:hover{color:#ED3332}
.cpp-flyout .fh{display:flex;align-items:center;justify-content:space-between}
.cpp-flyout .fclose{display:none;background:none;border:0;font-size:24px;line-height:1;color:var(--cpp-gray);padding:0 4px}
.cpp-flyout .fqty{display:inline-flex;align-items:center;margin-top:7px;border:1px solid var(--cpp-line);border-radius:5px;overflow:hidden}
.cpp-flyout .fqty button{width:26px;height:24px;background:var(--cpp-fog);border:0;font-weight:700;font-size:13px;line-height:1;cursor:pointer;color:var(--cpp-ink);padding:0}
.cpp-flyout .fqty button:hover{background:var(--cpp-line)}
.cpp-flyout .fqty input{width:36px;height:24px;border:0;border-left:1px solid var(--cpp-line);border-right:1px solid var(--cpp-line);text-align:center;font-size:12px;font-weight:700;color:var(--cpp-ink);-moz-appearance:textfield;appearance:textfield}
.cpp-flyout .fqty input::-webkit-outer-spin-button,.cpp-flyout .fqty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cpp-flyout .fi.cpp-busy{opacity:.45;pointer-events:none}
.cpp-flyout .fempty{font-size:12.5px;color:var(--cpp-gray);margin:4px 0 8px}
.cpp-flyout .fload{color:var(--cpp-gray-2);text-align:center;padding:8px}
.cpp-flyout .fsub{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--cpp-line);padding:12px 0 4px;margin-top:4px}
.cpp-flyout .fsub span{font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cpp-gray-2)}
.cpp-flyout .fsub b{font-size:19px;font-weight:800}
.cpp-flyout .fbtns{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.cpp-flyout .fbtns a{display:block;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:var(--cpp-r-s);padding:13px 10px;text-decoration:none}
.cpp-flyout .fclear{display:block;width:100%;background:none;border:0;margin-top:10px;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cpp-gray-2);cursor:pointer;padding:4px 0}
.cpp-flyout .fclear:hover{color:#ED3332}
.cpp-flyout .b1{background:var(--cpp-teal);color:#fff}
.cpp-flyout .b1:hover{background:var(--cpp-teal-deep);color:#fff}
.cpp-flyout .b2{border:1.5px solid var(--cpp-ink);color:var(--cpp-ink)}
.cpp-flyout .b2:hover{background:var(--cpp-ink);color:#fff}

/* ---------- hero overlay ---------- */
.cpp-hero{position:relative}
.cpp-hero #homepage-carousel .carousel-item img,
.cpp-hero #homepage-carousel .carousel-item a{display:block;width:100%}
@media (min-width:992px){
  .cpp-hero #homepage-carousel .carousel-item img{min-height:560px;max-height:74vh;object-fit:cover}
}
.cpp-hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(100deg,rgba(46,8,20,.86) 0%,rgba(46,8,20,.55) 30%,rgba(46,8,20,.12) 55%,rgba(46,8,20,0) 70%)}
.cpp-hero-copy{position:absolute;z-index:3;left:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;max-width:560px;padding:40px 20px 40px clamp(24px,6vw,110px);pointer-events:none}
.cpp-hero-copy a{pointer-events:auto}
.cpp-eyebrow--hero{color:var(--cpp-glow)}
.cpp-eyebrow--hero::before{border-top-color:var(--cpp-glow)}
.cpp-hero-h{margin:16px 0 0;line-height:1.02}
.cpp-hero-h .row{display:block;font-size:clamp(38px,4.6vw,64px);font-weight:700;color:#fff;text-shadow:0 2px 18px rgba(24,6,13,.45)}
.cpp-hero-h .row.accent{color:var(--cpp-glow)}
.cpp-hero-p{font-size:15px;line-height:1.65;color:#F1EDEF;max-width:400px;margin:18px 0 0;text-shadow:0 1px 12px rgba(24,6,13,.6)}
.cpp-hero-ctas{display:flex;gap:13px;margin-top:26px;flex-wrap:wrap}
.cpp-hero-ctas .cb{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:var(--cpp-r-s);padding:14px 22px;text-decoration:none;transition:all .14s}
.cpp-hero-ctas .cb--primary{background:var(--cpp-teal);color:#fff;box-shadow:0 8px 24px rgba(141,32,65,.4)}
.cpp-hero-ctas .cb--primary:hover{background:var(--cpp-teal-deep);color:#fff}
.cpp-hero-ctas .cb--ghost{border:1.5px solid rgba(255,255,255,.75);color:#fff}
.cpp-hero-ctas .cb--ghost:hover{border-color:var(--cpp-glow);color:var(--cpp-glow)}
.cpp-hero-stats{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.cpp-hero-stats .n{font-size:24px;font-weight:700;color:var(--cpp-glow)}
.cpp-hero-stats .l{font-size:8.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#D8CCD1;margin-top:3px}
/* dots + arrows */
.cpp-hero .carousel-indicators{z-index:4;margin-bottom:18px}
.cpp-hero .carousel-indicators button{width:26px;height:4px;border-radius:2px;background:rgba(255,255,255,.45);border:0;opacity:1}
.cpp-hero .carousel-indicators button.active{background:var(--cpp-glow)}
.cpp-hero .carousel-control-prev,.cpp-hero .carousel-control-next{z-index:4;width:56px;opacity:.75}
@media (max-width:991.98px){
  .cpp-hero .carousel-control-prev,.cpp-hero .carousel-control-next{display:none}
  .cpp-hero-copy{position:relative;max-width:none;background:var(--cpp-maroon);padding:30px 22px 34px}
  .cpp-hero-scrim{display:none}
  .cpp-hero-h .row{font-size:34px}
}

/* ============================================================
   r14: PDP - Service Bay product page (2026-07-16)
   Gallery/stage + lightbox + logo visualizer + tiers + options
   ============================================================ */

/* ---------- stage ---------- */
.product-page .main-img-container{position:relative;background:#fff!important;border:1px solid #DEDDDA;border-radius:14px;overflow:hidden}
.product-page .main-img{position:relative}
.product-page .main-img img{width:auto;max-width:100%;height:auto;max-height:min(600px,calc(100vh - 380px));margin:0 auto;cursor:zoom-in}
@media (min-width:992px){.product-page .product-info.position-sticky{top:180px!important}}
.product-page .main-img a{display:flex;justify-content:center;align-items:center}
.cpp-p14-stagename{position:absolute;bottom:12px;left:12px;z-index:3;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#3D3935;background:rgba(255,255,255,.88);border:1px solid #DEDDDA;padding:6px 10px;border-radius:4px;pointer-events:none}
.cpp-p14-stagename:empty{display:none}
.zoomContainer{display:none!important}
@keyframes cppP14Pulse{0%,100%{opacity:.45}50%{opacity:.2}}
.main-img-container.cpp-p14-loading .main-img{animation:cppP14Pulse 1.1s ease-in-out infinite}
.main-img-container.cpp-p14-loading::before{content:"UPDATING PREVIEW...";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;font-size:10px;font-weight:700;letter-spacing:.2em;color:#3D3935;background:rgba(255,255,255,.92);border:1.5px solid #3D3935;border-radius:4px;padding:8px 13px}

/* ---------- thumbs (native carousel geometry kept - ACM pattern; cosmetics only) ---------- */
.product-page .images-wrapper{margin-top:12px}
.product-page .images-container li.image{display:flex;flex-direction:column;width:182px;height:182px;border:1.5px solid #DEDDDA;border-radius:6px;overflow:hidden;cursor:pointer;background:#fff;transition:border-color .12s;position:relative}
.product-page .images-container li.image a{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:hidden;padding:6px}
.product-page .images-container li.image img.small-thumb{display:block;width:auto;height:auto;max-width:100%;max-height:100%}
.product-page .images-container li.image:hover{border-color:#B1B3B3}
.product-page .images-container li.image.cpp-cur{border-color:#3D3935}
.product-page .images-container li.image.cpp-cur::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#8D2041}
.cpp-p14-thumbname{flex:none;font-size:8.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#75787B;background:#fff;border-top:1px solid #EFEEEC;padding:5px 5px 6px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.product-page .images-container li.image.cpp-cur .cpp-p14-thumbname{color:#3D3935;font-weight:700}
.product-page .product-gallery .images-wrapper button.nav{width:42px!important;height:42px!important;min-width:42px;border:1.5px solid #CFCECC!important;border-radius:50%!important;background:#fff!important;color:#3D3935;box-shadow:0 2px 10px rgba(24,6,13,.12)!important;transition:all .15s;display:inline-flex;align-items:center;justify-content:center}
.product-page .product-gallery .images-wrapper button.nav::before{border-color:#3D3935!important}
.product-page .product-gallery .images-wrapper button.nav:hover{background:#8D2041!important;border-color:#8D2041!important;box-shadow:0 4px 14px rgba(141,32,65,.3)!important}
.product-page .product-gallery .images-wrapper button.nav:hover::before{border-color:#fff!important}
.product-page .product-gallery .images-wrapper button.nav.disabled{opacity:.3;box-shadow:none!important}
.product-page .product-gallery .images-wrapper button.nav.disabled:hover{background:#fff!important;border-color:#CFCECC!important}
.product-page .product-gallery .images-wrapper button.nav.disabled:hover::before{border-color:#3D3935!important}
/* tile size follows the theme's responsive buckets - its paging script steps by a FIXED
   per-viewport pitch (208/158/117/143/110/68), so li width must be pitch minus margin */
@media (min-width:992px) and (max-width:1199.98px){
  .product-page .images-container li.image{width:132px;height:132px}
}
@media (min-width:768px) and (max-width:991.98px){
  .product-page .images-container li.image{width:102px;height:102px}
}
@media (min-width:576px) and (max-width:767.98px){
  .product-page .images-container li.image{width:122px;height:122px}
}
@media (min-width:451px) and (max-width:575.98px){
  .product-page .images-container li.image{width:92px;height:92px}
}
@media (max-width:450.98px){
  .product-page .images-container li.image{width:61.8px;height:62px}
}
@media (max-width:991.98px){
  .cpp-p14-thumbname{display:none}
  .product-page .images-container li.image a{padding:3px}
}

/* ---------- lightbox ---------- */
body.cpp-lb-open{overflow:hidden}
.cpp-lb{position:fixed;inset:0;z-index:9999;background:rgba(24,6,13,.94);opacity:0;visibility:hidden;transition:opacity .22s ease;display:flex;align-items:center;justify-content:center}
.cpp-lb.on{opacity:1;visibility:visible}
.cpp-lb-frame{background:#fff;border-radius:10px;padding:18px;max-width:min(880px,88vw);max-height:86vh;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 50px rgba(24,6,13,.5);position:relative;overflow:hidden}
.cpp-lb-frame img{max-width:100%;max-height:calc(86vh - 36px);width:auto;height:auto;display:block;object-fit:contain;user-select:none;-webkit-user-drag:none}
.cpp-lb-name{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:3;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:4px;padding:6px 12px;white-space:nowrap}
.cpp-lb-name:empty{display:none}
.cpp-lb-x{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:all .15s;z-index:3;cursor:pointer}
.cpp-lb-x:hover{background:#8D2041;border-color:#8D2041}
.cpp-lb-x svg{width:17px;height:17px;stroke:#fff}
.cpp-lb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:all .15s;z-index:3;cursor:pointer}
.cpp-lb-arrow:hover{background:#8D2041;border-color:#8D2041}
.cpp-lb-arrow svg{width:17px;height:17px;stroke:#fff}
.cpp-lb-arrow.prev{left:22px}
.cpp-lb-arrow.next{right:22px}
.cpp-lb-count{position:absolute;top:24px;left:26px;font-size:11px;font-weight:600;letter-spacing:.2em;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:4px;padding:7px 11px;z-index:3}
.cpp-lb-thumbs{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.cpp-lb-thumbs button{width:34px;height:5px;border-radius:3px;background:rgba(255,255,255,.35);transition:background .15s;border:none;cursor:pointer;padding:0}
.cpp-lb-thumbs button.on{background:#00BBDC}

/* ---------- volume tiers ---------- */
.cpp-p14-tiers{border:1.5px solid var(--cpp-maroon);border-radius:8px;overflow:hidden;margin:18px 0 4px}
.cpp-p14-tiers-head{background:var(--cpp-maroon);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 14px;font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.cpp-p14-tiers-head b{color:#00BBDC;font-weight:600}
.cpp-p14-tiers-grid{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.cpp-p14-tier{padding:13px 8px;text-align:center;border-right:1px solid #DEDDDA;cursor:pointer;transition:background .12s;background:#fff;border-top:none;border-bottom:none;border-left:none}
.cpp-p14-tier:last-child{border-right:none}
.cpp-p14-tier:hover{background:#F4F3F1}
.cpp-p14-tier .tq{display:block;font-size:10px;color:#75787B;letter-spacing:.08em}
.cpp-p14-tier .tp{display:block;font-size:16px;font-weight:600;margin-top:4px;color:#3D3935}
.cpp-p14-tier .ts{display:block;font-size:8.5px;color:#8D2041;margin-top:3px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;min-height:11px}
.cpp-p14-tier.on{background:var(--cpp-legacy)}
.cpp-p14-tier.on .tq,.cpp-p14-tier.on .tp{color:#fff}
.cpp-p14-tier.on .ts{color:#00BBDC}

/* ---------- option blocks ---------- */
/* the theme draws a hairline under every block - kill them all; cpp keeps its own dividers (r14e) */
.product-page .product-header,.product-page .prod_option_block,.product-page .product-option-wrapper.form-item,.product-page .product-quantity-container{border-bottom:none!important}
.product-page .product-option-wrapper{margin:20px 0}
.cpp-p14-optlabel{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:11px;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#3D3935}
.cpp-p14-optlabel .req{color:#ED3332;font-size:9px}
.cpp-p14-optlabel .sel{color:#8D2041;font-size:10px;letter-spacing:.08em;text-transform:none;font-weight:600;text-align:right}
.cpp-p14-hiddensel{display:none!important}

/* logo visualizer grid */
.product-page .logo-location-thumb{border:1.5px solid #DEDDDA!important;border-radius:6px!important;background:#fff!important;transition:border-color .12s,box-shadow .12s;position:relative;overflow:visible!important}
.product-page .logo-location-thumb img{background:transparent!important}
.product-page .logo-location-thumb:hover{border-color:#75787B!important}
.product-page .logo-location-thumb.cpp-darktile{background:#3D3935!important}
.product-page .logo-location-thumb.selected-logo{border-color:#8D2041!important;box-shadow:0 0 0 1px #8D2041}
.product-page .logo-location-thumb.selected-logo::after{content:"\2713";position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:#8D2041;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;z-index:2}
.product-page .update-preview.cpp-p14-auto{display:none!important}

/* size / text chips (fixed height; upcharge pinned to bottom so size text stays inline) */
.cpp-p14-chips{display:flex;flex-wrap:wrap;gap:9px;align-items:flex-start}
.cpp-p14-chip{min-width:56px;height:52px;padding:6px 12px;border:1.5px solid #DEDDDA;border-radius:4px;display:grid;place-items:center;cursor:pointer;transition:all .12s;background:#fff;font-family:inherit;position:relative}
.cpp-p14-chip:hover{border-color:#3D3935}
.cpp-p14-chip.on{background:var(--cpp-maroon);border-color:var(--cpp-maroon);color:#fff}
.cpp-p14-chip .sz{font-size:13px;font-weight:600;line-height:1;display:block}
.cpp-p14-chip .up{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:8px;color:#ED3332;letter-spacing:.04em;font-weight:600;line-height:1}

/* color swatch chips (top-aligned so multi-line labels don't push circles around) */
.cpp-p14-colors{gap:14px;align-items:flex-start}
.cpp-p14-swatch{text-align:center;cursor:pointer;background:none;border:none;padding:0;font-family:inherit;width:70px;display:flex;flex-direction:column;align-items:center}
.cpp-p14-swatch .cs{display:block;width:42px;height:42px;border-radius:50%;border:1px solid rgba(24,6,13,.2);position:relative;transition:transform .12s;margin:0 auto;flex:none}
.cpp-p14-swatch:hover .cs{transform:scale(1.06)}
.cpp-p14-swatch.on .cs::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #8D2041}
.cpp-p14-swatch .cl{display:block;font-size:8.5px;letter-spacing:.08em;color:#75787B;margin-top:8px;text-transform:uppercase;line-height:1.4;width:100%}
.cpp-p14-swatch.on .cl{color:#3D3935;font-weight:600}

/* ---------- qty + buy ---------- */
.cpp-p14-qty{display:inline-flex;align-items:center;border:1.5px solid #3D3935;border-radius:4px;overflow:hidden}
.cpp-p14-qty button{width:44px;height:50px;font-size:19px;font-weight:600;transition:background .12s;background:#fff;border:none;cursor:pointer}
.cpp-p14-qty button:hover{background:#F4F3F1}
.product-page .cpp-p14-qty input.amount{width:84px;height:50px;border:none!important;text-align:center;font-size:16px;font-weight:600;box-shadow:none!important;border-radius:0;padding:0 4px}
.product-page .cpp-p14-qty input.amount:focus{outline:none}
.product-page input.add-to-cart{background:#8D2041!important;color:#fff!important;font-weight:700!important;font-size:14px!important;letter-spacing:.1em!important;text-transform:uppercase!important;border:none!important;border-radius:4px!important;padding:16px 26px!important;box-shadow:0 6px 18px rgba(141,32,65,.35);transition:background .15s,transform .15s,box-shadow .15s;cursor:pointer}
.product-page input.add-to-cart:hover{background:#67213C!important;transform:translateY(-1px);box-shadow:0 10px 24px rgba(141,32,65,.45)}
.product-page .total-info{border-top:1px solid #DEDDDA;margin-top:16px;padding-top:14px}
.product-page .product-quantity>div{width:auto!important;min-width:max-content}
.product-page .product-quantity span.stock{display:inline-flex;align-items:center;height:50px;vertical-align:middle;margin-left:14px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1}
.product-page .product-quantity span.stock.text-success{color:#8D2041!important}
.product-page .product-quantity span.stock.text-danger{color:#ED3332!important}
.cpp-p14-hidedesc{display:none!important}

/* ---------- availability callout (pill + icon rows) ---------- */
.cpp-p14-note{background:#F6F5F3;border:1px solid #DEDDDA;border-radius:8px;padding:15px 18px 13px;margin-top:16px}
.cpp-p14-note-head{display:flex;align-items:center;gap:11px;margin-bottom:9px;flex-wrap:wrap}
.cpp-p14-note-head .pill{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:3px;line-height:1;white-space:nowrap;background:var(--cpp-maroon);color:#fff}
.cpp-p14-note--ready .cpp-p14-note-head .pill{background:var(--cpp-air);color:var(--cpp-ocean)}
.cpp-p14-note--preorder .cpp-p14-note-head .pill{background:var(--cpp-red);color:#fff}
.cpp-p14-note-head b{font-size:13px;font-weight:700;color:#3D3935}
.cpp-p14-note-row{display:flex;gap:10px;align-items:flex-start;padding:4px 0;font-size:12.5px;color:#4A4744;line-height:1.55}
.cpp-p14-note-row svg{width:17px;height:17px;stroke:#75787B;flex:none;margin-top:1px}
.cpp-p14-note-row b{color:#3D3935;font-weight:700}

/* ---------- cart: virtualized logo thumbs follow the light/dark tile logic ---------- */
.cpp-cartlogo{background:#fff!important;border:1px solid #DEDDDA!important;border-radius:6px!important;padding:5px!important;max-height:56px;width:auto}
.cpp-cartlogo--dark{background:#3D3935!important;border-color:#3D3935!important}

/* ---------- spec accordion ---------- */
.cpp-p14-specs{margin-top:26px;border-top:2px solid #3D3935}
.cpp-p14-spec{border-bottom:1px solid #DEDDDA}
.cpp-p14-spec summary{list-style:none;display:flex;align-items:center;gap:12px;padding:16px 2px;cursor:pointer;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#3D3935}
.cpp-p14-spec summary::-webkit-details-marker{display:none}
.cpp-p14-spec summary .num{font-size:10px;color:#8D2041;font-weight:600;letter-spacing:.14em}
.cpp-p14-spec summary svg{width:14px;height:14px;stroke:#75787B;margin-left:auto;transition:transform .18s;flex:none}
.cpp-p14-spec[open] summary svg{transform:rotate(45deg)}
.cpp-p14-spec .cpp-p14-specbody{padding:2px 2px 20px;color:#4A4744;font-size:13.5px;line-height:1.75}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .product-page .main-img img{max-height:340px}
  .product-page .product-gallery .images-wrapper button.nav{width:34px!important;height:34px!important;min-width:34px}
  .cpp-lb-frame{max-width:94vw;padding:10px}
  .cpp-lb-arrow{width:38px;height:38px}
  .cpp-lb-arrow.prev{left:10px}
  .cpp-lb-arrow.next{right:10px}
  .cpp-lb-x{top:10px;right:12px}
  .cpp-lb-count{top:14px;left:14px}
  .cpp-p14-tiers-grid{grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .cpp-p14-tier{border-bottom:1px solid #DEDDDA}
  .cpp-p14-chip{min-height:46px}
  .product-page input.add-to-cart{width:100%}
}


/* ============================================================
   r15: PRODUCT CARDS - showroom pass (2026-07-16)
   Mockup-parity card layout (category_2 v2.3) + colorway
   swatch previewer (cpp_thegarage.js buildCardLot) replacing
   the legacy mid-image cg-thumb arrows. Responsive grid
   buckets from r8-10 are untouched.
   ============================================================ */
/* retire the legacy inline-script arrows wholesale */
.product-thumbnail .cg-thumb-arrow{display:none!important;pointer-events:none!important}

/* shell: full-bleed image tile, calm lift */
.product-thumbnail{padding:0!important;border-radius:10px;display:flex;flex-direction:column}
.product-thumbnail:hover{transform:translateY(-4px);box-shadow:0 4px 14px rgba(24,6,13,.10),0 1px 3px rgba(24,6,13,.08);border-color:#C7C6C4}
.product-thumbnail .thumbnail-img-container{position:relative;width:100%}
.product-thumbnail .thumbnail-img-container img{transition:transform .35s ease,opacity .18s ease}
.product-thumbnail:hover .thumbnail-img-container img{transform:scale(1.05)}

/* quick view slide-up (lives inside the image link) */
.cpp-qv{position:absolute;left:12px;right:12px;bottom:-56px;z-index:4;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--cpp-maroon);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:12px 14px;border-radius:6px;line-height:1;box-shadow:0 8px 20px rgba(24,6,13,.25);transition:bottom .22s cubic-bezier(.2,.7,.3,1)}
.cpp-qv svg{width:13px;height:13px;flex:none;stroke:currentColor}
.product-thumbnail:hover .cpp-qv{bottom:12px}
@media (hover:none){.cpp-qv{display:none!important}}

/* body: sku, name, swatch rail, price row pinned to the floor */
.product-thumbnail .thumbnail-description-container{flex:1 1 auto;display:flex;flex-direction:column;padding:13px 16px 15px!important}
.product-thumbnail .thumbnail-description-container>a{flex:1 1 auto;display:flex;flex-direction:column;position:relative}
.product-thumbnail .card-title{margin:2px 0 4px}
.product-thumbnail .thumbnail-description-container p.card-text{margin-top:auto!important;padding-top:10px}
.product-thumbnail .thumbnail-description-container p.card-text ~ p.card-text{margin-top:0!important;padding-top:0}

/* colorway swatch rail (reserved strip keeps rows level) */
.cpp-swatchrow{display:flex;align-items:center;gap:7px;min-height:24px;margin:0 0 2px}
.cpp-swd{width:16px;height:16px;border-radius:50%;flex:none;padding:0;border:1px solid rgba(24,6,13,.22);box-shadow:inset 0 0 0 2px #fff;background:#F1F0EE;cursor:pointer;appearance:none;-webkit-appearance:none;transition:transform .12s ease,box-shadow .12s ease}
.cpp-swd:hover{transform:scale(1.2)}
.cpp-swd.cpp-swd--on{box-shadow:inset 0 0 0 2px #fff,0 0 0 2px var(--cpp-teal);border-color:transparent}
.cpp-swmore{font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--cpp-gray-2)}

@media (max-width:819.98px){
  .cpp-swatchrow{min-height:20px;gap:6px}
  .cpp-swd{width:14px;height:14px}
}

/* ==================================================================
   r16: ITEM REQUEST - CUSTOM ORDER DESK (/pages/ Wufoo embed shell)
   ================================================================== */
.cpp-pstrip{background:var(--cpp-maroon);color:#fff;padding:30px 0;position:relative;overflow:hidden}
.cpp-pstrip::after{content:"";position:absolute;right:4%;top:-64px;width:230px;height:230px;border:30px solid rgba(255,255,255,.08);border-bottom:0;border-left:0;pointer-events:none}
.cpp-pstrip-in{max-width:1280px;margin:0 auto;padding:0 28px}
.cpp-crumbs{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#D8CCD1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;font-weight:500}
.cpp-crumbs a{color:#D8CCD1 !important;text-decoration:none !important;transition:color .12s}
.cpp-crumbs a:hover{color:#00BBDC !important}
.cpp-crumbs .sep{color:#75787B}
.cpp-crumbs .cur{color:#fff;font-weight:600}
.cpp-pstrip h1{font-size:clamp(26px,3.4vw,40px);font-weight:700;color:#fff;margin:0;display:flex;align-items:center;gap:16px;flex-wrap:wrap;line-height:1.15}
.cpp-ghostplate{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:3px;border:1.5px solid rgba(255,255,255,.35);color:#fff;line-height:1.4;white-space:nowrap}
body.cpp-req-built .content-container{max-width:1280px;margin-left:auto;margin-right:auto}
.cpp-req-intro{color:#75787B;font-size:15px;line-height:1.7;max-width:720px;margin:26px 0 30px}
body.cpp-req-built .iframe-area{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:44px;align-items:start}
body.cpp-req-built .iframe-area > [id^="wufoo-"]{
  background:#fff;border:1px solid #DEDDDA;border-radius:14px;padding:18px 22px 12px;
  box-shadow:0 1px 2px rgba(24,6,13,.06),0 2px 8px rgba(24,6,13,.05);grid-column:1;
}
.cpp-req-note{font-size:9px;color:#B1B3B3;letter-spacing:.08em;text-transform:uppercase;line-height:1.6;margin:12px 2px 0;grid-column:1;font-weight:600}
.cpp-req-side{grid-column:2;grid-row:1;position:sticky;top:180px;display:flex;flex-direction:column;gap:20px}
.cpp-how{background:#fff;border:1px solid #DEDDDA;border-radius:14px;padding:24px}
.cpp-how h4{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px;display:flex;align-items:center;gap:9px;color:#3D3935}
.cpp-how h4 .tick{width:14px;height:3px;background:#8D2041;display:inline-block}
.cpp-how-step{display:flex;gap:13px;padding:10px 0}
.cpp-how-step .hn{width:26px;height:26px;border-radius:50%;border:1.5px solid #8D2041;color:#8D2041;display:grid;place-items:center;font-size:11px;font-weight:600;flex:none}
.cpp-how-step .ht{font-size:13px;font-weight:700;color:#3D3935}
.cpp-how-step .hs{font-size:12px;color:#75787B;margin-top:2px;line-height:1.55}
.cpp-how .cpp-rush{font-size:12.5px;color:#75787B;line-height:1.65;margin:0}
.cpp-idea{position:relative;border-radius:4px;overflow:hidden;color:#fff;background:var(--cpp-ocean);padding:28px;display:block;text-decoration:none !important}
.cpp-idea::after{content:"";position:absolute;right:-30px;top:-30px;width:170px;height:170px;border:30px solid #00BBDC;border-bottom:0;border-left:0;opacity:.22;pointer-events:none}
.cpp-idea .eyebrow{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#00BBDC}
.cpp-idea h4{font-size:20px;font-weight:700;line-height:1.15;margin:10px 0;color:#fff}
.cpp-idea p{font-size:12.5px;color:#B9D6E4;line-height:1.65;position:relative;z-index:2;margin:0}
.cpp-idea-cats{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;position:relative;z-index:2}
.cpp-idea-cats span{font-size:8.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(255,255,255,.25);border-radius:2px;padding:4px 9px;color:#CFE2EC}
.cpp-idea .cpp-idea-go{display:inline-flex;align-items:center;gap:9px;margin-top:16px;position:relative;z-index:2;border:2px solid rgba(255,255,255,.6);color:#fff;padding:10px 16px;border-radius:4px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;transition:all .15s}
.cpp-idea:hover .cpp-idea-go{border-color:#fff;background:#fff;color:#3D3935}
.cpp-idea .cpp-idea-go svg{width:14px;height:14px;stroke:currentColor}
@media (max-width:1120.98px){
  body.cpp-req-built .iframe-area{grid-template-columns:1fr}
  .cpp-req-side{grid-column:1;grid-row:auto;position:static}
  .cpp-req-note{grid-row:auto}
}
@media (max-width:640.98px){
  .cpp-pstrip-in{padding:0 18px}
  body.cpp-req-built .iframe-area > [id^="wufoo-"]{padding:10px 12px 8px}
  .cpp-req-intro{margin:18px 0 22px}
}

/* ============================================================
   r17: AUTH - DRIVER'S SEAT (login / register / denied / password / confirmation)
   ============================================================ */
body.cpp-auth-built .content-container{max-width:100%!important;width:100%!important;margin:0!important;padding:0!important}
body.cpp-auth-built .cpp-auth-native{display:none!important}
body.cpp-auth-built .notification-container{display:none!important}
body.cpp-auth-built .footer-container{margin-top:0!important}
.cpp-auth{display:grid;grid-template-columns:1fr 1fr;min-height:max(540px,calc(100vh - 430px));font-family:'Inter',Helvetica,Arial,sans-serif;color:#3D3935}
.cpp-auth-brand{background:var(--cpp-maroon);color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:70px 64px}
.cpp-auth-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right;display:block}
.cpp-auth-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(90,16,39,.94) 30%,rgba(90,16,39,.6) 65%,rgba(46,8,20,.4))}
.cpp-auth-brand::after{content:"";position:absolute;left:-40px;bottom:-40px;width:280px;height:280px;border:32px solid rgba(255,255,255,.08);border-top:0;border-right:0;pointer-events:none;z-index:2}
.cpp-auth-inner{position:relative;z-index:3;max-width:440px}
.cpp-auth-eyebrow{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#00BBDC}
.cpp-auth-eyebrow::before{content:"";width:11px;height:11px;border-top:2.5px solid currentColor;border-left:2.5px solid currentColor;margin-bottom:-3px;flex:none}
.cpp-auth-inner h1{font-size:clamp(32px,3.4vw,50px);font-weight:700;line-height:1.12;margin:20px 0;color:#fff;letter-spacing:0}
.cpp-auth-inner h1 .cpp-acc{color:#00BBDC}
.cpp-auth-inner p{color:#EAD9DF;font-size:14.5px;line-height:1.7;max-width:390px;margin:0}
.cpp-auth-side{background:#F4F3F1;display:flex;align-items:center;justify-content:center;padding:56px 40px}
.cpp-auth-card{width:min(470px,100%);background:#fff;border-radius:14px;box-shadow:0 4px 14px rgba(24,6,13,.10),0 1px 3px rgba(24,6,13,.08);overflow:hidden}
.cpp-auth-tabs{display:flex;border-bottom:1px solid #DEDDDA}
a.cpp-auth-tab{flex:1;padding:18px 10px;text-align:center;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#75787B;position:relative;text-decoration:none!important;transition:color .15s}
a.cpp-auth-tab:hover{color:#3D3935}
a.cpp-auth-tab.on{color:#3D3935}
a.cpp-auth-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#8D2041}
.cpp-auth-body{padding:28px 32px 26px}
.cpp-auth-head{margin-bottom:20px}
.cpp-auth-head .cpp-auth-eyebrow{color:#8D2041}
.cpp-auth-head h2{font-size:24px;font-weight:700;line-height:1.12;color:#3D3935;margin:10px 0 6px;font-family:inherit}
.cpp-auth-head p{font-size:13px;color:#75787B;line-height:1.6;margin:0}
.cpp-auth-body form label{display:block;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#75787B;margin:0 0 7px;font-family:inherit}
.cpp-auth-body form label .required-label{color:#B1B3B3;letter-spacing:.06em;font-weight:500;text-transform:none}
.cpp-auth-body form label #email-register-error{display:block;text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:500;margin-top:4px;color:#75787B!important}
.cpp-auth-body form .form-control{width:100%;height:48px;border:1.5px solid #DEDDDA;border-radius:4px;background:#fff;padding:0 14px;font-size:14px;font-family:inherit;box-shadow:none;transition:border-color .15s,box-shadow .15s}
.cpp-auth-body form .form-control:focus{outline:none;border-color:#8D2041;box-shadow:0 0 0 3px rgba(141,32,65,.14)}
.cpp-auth-body form .mb-3{margin-bottom:16px!important}
.cpp-auth-body .password-div{position:relative}
.cpp-auth-body .password-div i{position:absolute;right:14px;top:40px;color:#75787B;cursor:pointer}
.cpp-startwrap{position:relative;overflow:hidden;border-radius:4px;margin-top:20px}
.cpp-startwrap input[type=submit],.cpp-startwrap button[type=submit],.cpp-startwrap .btn{width:100%!important;display:block;float:none!important;background:#8D2041!important;background-image:none!important;color:#fff!important;border:none!important;border-radius:4px;padding:15px 22px;font-size:12.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;cursor:pointer;font-family:inherit;opacity:1!important;box-shadow:0 6px 18px rgba(141,32,65,.30);transition:background .15s,transform .15s,box-shadow .15s;margin:0!important}
.cpp-startwrap:hover input[type=submit],.cpp-startwrap:hover button[type=submit],.cpp-startwrap:hover .btn{background:#67213C!important;box-shadow:0 10px 24px rgba(141,32,65,.40)}
.cpp-startwrap::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);transform:skewX(-20deg);transition:left .45s ease;pointer-events:none}
.cpp-startwrap:hover::after{left:120%}
.cpp-auth-links{display:flex;justify-content:space-between;align-items:center;gap:10px 18px;margin-top:16px;flex-wrap:wrap}
.cpp-auth-links a{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8D2041;text-decoration:none}
.cpp-auth-links a:hover{color:#8D2041;text-decoration:underline;text-underline-offset:3px}
.cpp-auth-note{display:flex;gap:11px;background:var(--cpp-air);border:1px solid rgba(0,51,73,.15);border-radius:4px;padding:13px 14px;margin:20px 0 0}
.cpp-auth-note svg{width:17px;height:17px;stroke:#003349;fill:none;flex:none;margin-top:1px}
.cpp-auth-note p{font-size:12px;color:#1E4258;line-height:1.6;margin:0}
.cpp-auth-note--warn{background:#F4F3F1;border-color:#DEDDDA;border-left:4px solid var(--cpp-red);margin:0 0 20px}
.cpp-auth-note--warn svg{stroke:#ED3332}
.cpp-auth-note--warn p{color:#3D3935}
.cpp-auth-foot{padding:16px 32px;background:#F4F3F1;border-top:1px solid #DEDDDA;font-size:12px;color:#75787B;text-align:center}
.cpp-auth-foot a{color:#8D2041;font-weight:700;text-decoration:none}
.cpp-auth-foot a:hover{color:#8D2041;text-decoration:underline;text-underline-offset:3px}
@media (max-width:1120.98px){
  .cpp-auth{grid-template-columns:1fr;min-height:0}
  .cpp-auth-brand{min-height:340px;padding:56px 36px}
  .cpp-auth-side{padding:44px 24px}
}
@media (max-width:640.98px){
  .cpp-auth-brand{min-height:280px;padding:44px 22px}
  .cpp-auth-side{padding:30px 14px}
  .cpp-auth-body{padding:24px 20px}
  .cpp-auth-foot{padding:14px 20px}
}

/* ============================================================
   r18: EMAIL DOMAIN GUARD + CHECKOUT AUTH CARD
   ============================================================ */
/* passive company-email hint: neutral gray everywhere (native inline style is #f00) */
#email-register-error{color:#75787B!important;font-weight:500}
/* domain-guard alert (rendered by the liquid gate scripts) */
.cpp-mailguard{display:flex;gap:11px;background:#F4F3F1;border:1px solid #DEDDDA;border-left:4px solid var(--cpp-red);border-radius:4px;padding:12px 14px;margin-top:10px;font-family:'Inter',Helvetica,Arial,sans-serif;text-align:left}
.cpp-mailguard svg{width:17px;height:17px;stroke:#ED3332;fill:none;flex:none;margin-top:1px}
.cpp-mailguard p{font-size:12px;color:#3D3935;line-height:1.6;margin:0;text-transform:none;letter-spacing:0;font-weight:400}
.cpp-mailguard p b{font-weight:700}
input.cpp-mail-bad,.cpp-auth-body form .form-control.cpp-mail-bad{border-color:#ED3332!important;box-shadow:0 0 0 3px rgba(214,69,69,.10)!important}
/* locked submit: visibly disabled even under the r17 ignition overrides */
.cpp-btn-locked,.cpp-startwrap input[type=submit]:disabled,.cpp-startwrap button[type=submit]:disabled,.cpp-startwrap .btn:disabled{background:#B1B3B3!important;background-image:none!important;color:#fff!important;box-shadow:none!important;cursor:not-allowed!important;opacity:1!important;transform:none!important}
.cpp-startwrap:hover .cpp-btn-locked,.cpp-startwrap:hover input[type=submit]:disabled,.cpp-startwrap:hover button[type=submit]:disabled,.cpp-startwrap:hover .btn:disabled{background:#B1B3B3!important;box-shadow:none!important}
.cpp-startwrap:has(:disabled)::after{display:none}
/* checkout auth card internals (native tabbed template moved into the cpp card) */
.cpp-auth--checkout .guest-checkout{margin:0!important;padding:0!important}
.cpp-auth--checkout .guest-checkout .row{margin:0!important;border:0!important;padding:0!important}
.cpp-auth--checkout .guest-checkout [class*=col-]{flex:0 0 100%;max-width:100%;padding:0!important;margin:0!important}
.cpp-auth--checkout .guest-checkout .py-5{padding-top:0!important;padding-bottom:0!important}
.cpp-auth--checkout .guest-checkout .px-4{padding-left:0!important;padding-right:0!important}
.cpp-auth--checkout .nav-tabs{display:flex;flex-wrap:nowrap;border:0;border-bottom:1px solid #DEDDDA;margin:-28px -32px 26px;padding:0}
.cpp-auth--checkout .nav-tabs .nav-item{flex:1;margin:0}
.cpp-auth--checkout .nav-tabs .nav-link{display:block;text-align:center;padding:18px 8px;border:0!important;border-radius:0;background:transparent!important;color:#75787B;position:relative;text-decoration:none!important;transition:color .15s}
.cpp-auth--checkout .nav-tabs .nav-link h5{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin:0;font-family:inherit;line-height:1.3}
.cpp-auth--checkout .nav-tabs .nav-link h5 b{font-weight:800}
.cpp-auth--checkout .nav-tabs .nav-link:hover{color:#3D3935}
.cpp-auth--checkout .nav-tabs .nav-link.active{color:#3D3935}
.cpp-auth--checkout .nav-tabs .nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#8D2041}
.cpp-auth--checkout .pt-3{margin-top:16px;padding-top:0!important}
.cpp-auth--checkout .pt-3 p{display:flex;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;margin:0}
.cpp-auth--checkout .pt-3 a{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8D2041;text-decoration:none}
.cpp-auth--checkout .pt-3 a:hover{color:#8D2041;text-decoration:underline;text-underline-offset:3px}
.cpp-auth--checkout .pt-3 br{display:none}
@media (max-width:640.98px){
  .cpp-auth--checkout .nav-tabs{margin:-24px -20px 22px}
}

/* ================================================================== r19: SERVICE LANE FAQ ================================================================== */
body.cpp-faq-built .content-container{max-width:1280px;padding-top:28px;margin-top:0}
body.cpp-faq-built .cpp-req-intro{margin-top:0}
.cpp-faq-area{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:34px;align-items:start;margin-bottom:70px}
.cpp-faq-main{grid-column:1;min-width:0}
.cpp-faq-sec{margin:0 0 34px}
.cpp-faq-sec:last-child{margin-bottom:0}
.cpp-faq-sechead{display:flex;align-items:center;gap:14px;background:#F4F3F1;border-radius:10px;padding:12px 16px;margin:0 0 14px}
.cpp-faq-sechead .sn{width:30px;height:30px;flex:none;border-radius:50%;border:1.5px solid #8D2041;color:#8D2041;display:grid;place-items:center;font-size:12px;font-weight:700}
.cpp-faq-sechead h2{font-size:17px;font-weight:700;color:#3D3935;margin:0;line-height:1.2}
.cpp-faq-item{background:#fff;border:1px solid #DEDDDA;border-radius:12px;margin:0 0 10px;overflow:hidden;transition:border-color .18s,box-shadow .18s}
.cpp-faq-item:hover{border-color:#C7C6C4}
.cpp-faq-item.on{border-color:#8D2041;box-shadow:0 6px 22px rgba(24,6,13,.06)}
.cpp-faq-q{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;padding:16px 18px;cursor:pointer;text-align:left;font-family:inherit}
.cpp-faq-q .qn{width:26px;height:26px;flex:none;border-radius:50%;border:1.5px solid #B1B3B3;color:#75787B;display:grid;place-items:center;font-size:11px;font-weight:600;transition:border-color .18s,color .18s}
.cpp-faq-item.on .cpp-faq-q .qn{border-color:#8D2041;color:#8D2041}
.cpp-faq-q .qt{flex:1;font-size:15px;font-weight:700;color:#3D3935;line-height:1.35}
.cpp-faq-q .chev{width:20px;height:20px;flex:none;color:#75787B;transition:transform .22s,color .18s}
.cpp-faq-q .chev svg{width:100%;height:100%}
.cpp-faq-item.on .cpp-faq-q .chev{transform:rotate(180deg);color:#8D2041}
.cpp-faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.cpp-faq-ain{padding:2px 18px 18px 58px;color:#4A4744;font-size:14px;line-height:1.75}
.cpp-faq-ain p{margin:0 0 10px}
.cpp-faq-ain p:last-child{margin-bottom:0}
.cpp-faq-ain a{color:#8D2041;font-weight:600}
.cpp-faq-contact{background:var(--cpp-ocean);border-radius:4px;padding:26px 24px;color:#fff;position:relative;overflow:hidden}
.cpp-faq-contact::after{content:"";position:absolute;right:-24px;top:-24px;width:110px;height:110px;border:22px solid rgba(0,187,220,.25);border-bottom:0;border-left:0;pointer-events:none}
.cpp-faq-contact .fc-eyebrow{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#00BBDC;margin-bottom:8px}
.cpp-faq-contact h4{font-size:19px;font-weight:700;margin:0 0 8px;color:#fff}
.cpp-faq-contact p{font-size:13px;line-height:1.65;color:#b9bec3;margin:0 0 16px}
.cpp-faq-contact .fc-btn{display:inline-flex;align-items:center;gap:9px;background:#8D2041;color:#fff;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:12px 18px;border-radius:8px;text-decoration:none;transition:background .18s}
.cpp-faq-contact .fc-btn:hover{background:#67213C;color:#fff;text-decoration:none}
.cpp-faq-contact .fc-btn svg{width:15px;height:15px}
.cpp-faq-contact .fc-mail{font-size:11px;color:#75787B;margin-top:12px;letter-spacing:.04em}
.cpp-faq-link{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 2px;font-size:13px;font-weight:700;color:#3D3935;text-decoration:none;border-bottom:1px solid #EFEEEC;transition:color .15s}
.cpp-faq-link:last-child{border-bottom:0;padding-bottom:2px}
.cpp-faq-link svg{width:15px;height:15px;color:#8D2041;flex:none}
.cpp-faq-link:hover{color:#8D2041;text-decoration:none}
.cpp-faq-rush{background:#fff;border:1px solid #DEDDDA;border-left:4px solid var(--cpp-red);border-radius:12px;padding:20px 22px}
.cpp-faq-rush h4{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px;color:#3D3935}
.cpp-faq-rush p{font-size:13px;line-height:1.65;color:#4A4744;margin:0}
@media (max-width:1120.98px){.cpp-faq-area{grid-template-columns:1fr}.cpp-faq-side{grid-column:1;grid-row:auto;position:static}}
@media (max-width:640px){.cpp-faq-ain{padding-left:18px}.cpp-faq-sechead h2{font-size:15px}.cpp-faq-q .qt{font-size:14px}}

/* ================================================================ r20: CATEGORY AISLES (PLP) ================================================================ */
.cpp-pstrip--lot::after{border:44px solid #ED3332;border-bottom:0;border-left:0;opacity:.28;width:300px;height:300px;right:-40px;top:-40px;left:auto;bottom:auto}
.cpp-pstrip--lot h1{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.cpp-lotcount{font-family:Inter,Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;color:#00BBDC;text-transform:uppercase;white-space:nowrap}
body.cpp-lot-built .content-container{max-width:1280px;margin-top:0;padding-top:28px}
body.cpp-lot-built .content-container>.container-fluid{padding-left:28px!important;padding-right:28px!important}
body.cpp-lot-built .category-page-content-section>.container-fluid.px-0{border-bottom:1px solid #E3E2E0;padding-bottom:12px;margin-bottom:4px}
body.cpp-lot-built .category-page .row.m-auto{align-items:center}
body.cpp-lot-built .products-result-verbiage{font-family:Inter,Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#75787B;margin:0}
body.cpp-lot-built .products-result-verbiage b{color:#3D3935;font-weight:700}
body.cpp-lot-built .sort span{font-family:Inter,Arial,sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#75787B;margin-right:4px}
body.cpp-lot-built select.sort-select{border:1.5px solid #DEDDDA;border-radius:8px;background-color:#fff;color:#3D3935;font-family:Inter,Arial,sans-serif;font-size:12.5px;font-weight:600;padding:9px 36px 9px 14px;width:auto;cursor:pointer;box-shadow:none}
body.cpp-lot-built select.sort-select:focus{border-color:#8D2041;box-shadow:0 0 0 3px rgba(141,32,65,.14);outline:none}
body.cpp-lot-built .category-page .col-12>.d-md-inline-block{display:none!important}
body.cpp-lot-built .category-page .col-12>.btn.secondary{display:inline-flex;align-items:center;gap:7px;background:#F4F3F1!important;background-image:none!important;border:1px solid #DEDDDA!important;color:#3D3935!important;border-radius:20px;font-family:Inter,Arial,sans-serif;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;margin:8px 8px 0 0;box-shadow:none!important;opacity:1!important}
body.cpp-lot-built .category-page .col-12>.btn.secondary:hover{border-color:#ED3332!important;color:#ED3332!important;background:#F4F3F1!important}
body.cpp-lot-built .category-page .d-lg-none .btn.secondary{background:#fff!important;background-image:none!important;border:1.5px solid #CFCECC!important;color:#3D3935!important;border-radius:8px;font-family:Inter,Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:10px 16px;box-shadow:none!important}
body.cpp-lot-built ul.pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:38px 0 54px;padding:0;list-style:none}
body.cpp-lot-built ul.pagination .page-item{margin:0}
body.cpp-lot-built ul.pagination .page-link{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 13px;border:1.5px solid #DEDDDA;border-radius:8px;background:#fff;color:#3D3935;font-family:Inter,Arial,sans-serif;font-size:12.5px;font-weight:600;line-height:1;box-shadow:none;text-decoration:none;transition:border-color .12s,color .12s}
body.cpp-lot-built ul.pagination a.page-link:hover{border-color:#3D3935;color:#3D3935;background:#fff;text-decoration:none}
body.cpp-lot-built ul.pagination .page-item.active .page-link{background:#3D3935;border-color:#3D3935;color:#fff}
body.cpp-lot-built ul.pagination .page-item.disabled .page-link{opacity:.35;pointer-events:none}
@media (max-width:819.98px){
body.cpp-lot-built .content-container{padding-top:18px}
body.cpp-lot-built .cpp-pstrip--lot h1{gap:10px}
}

/* =========================================================
   r22: MEGA CARD - instant load + restyle (2026-07-17)
   ========================================================= */
.cpp-mega-card{background:#fff;padding:0;overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.cpp-mega-card:hover{border-color:var(--cpp-teal);box-shadow:0 10px 24px rgba(24,6,13,.12);transform:translateY(-2px)}
.cpp-mega-card .mc-a{display:flex;flex-direction:column;height:100%}
.cpp-mega-card .mc-im{display:block;height:150px;border-bottom:1px solid var(--cpp-line);overflow:hidden}
.cpp-mega-card .mc-im img,.cpp-mega-card img{display:block;width:100%;height:100%;object-fit:contain;background:#fff;border-radius:0;margin:0;padding:16px 14px 10px;opacity:0;transition:opacity .18s ease,transform .25s ease}
.cpp-mega-card .mc-im img.on{opacity:1}
.cpp-mega-card .mc-a:hover .mc-im img{transform:scale(1.04)}
.cpp-mega-card .mc-n{font-size:13px;line-height:1.35;padding:10px 12px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cpp-mega-card .mc-p{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px 12px;margin-top:auto}
.cpp-mega-card .mc-p b{font-size:12.5px;font-weight:700;color:var(--cpp-teal)}
.cpp-mega-card .mc-p .go{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cpp-gray-2);transition:color .15s ease}
.cpp-mega-card .mc-a:hover .mc-p .go{color:var(--cpp-teal)}
.cpp-mega-card.mc-wait{min-height:224px}
.cpp-mega-card.mc-wait::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,var(--cpp-fog) 40%,#fff 50%,var(--cpp-fog) 60%);background-size:200% 100%;animation:cppMegaSheen 1.1s linear infinite}
@keyframes cppMegaSheen{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.cpp-mega-card.mc-wait::before{animation:none}}

/* ============================================================
   r23: QUICK-BAR PROFILE FLYOUT - Drivers Seat panel (mobile)
   ============================================================ */
.quick-actions-menu .dropdown-menu{
  position:fixed!important;
  inset:auto 12px calc(70px + env(safe-area-inset-bottom)) auto!important;
  margin:0!important;transform:none!important;
  width:min(320px,calc(100vw - 24px));
  background:#fff;color:var(--cpp-ink);
  border:0;border-radius:16px 16px 4px 16px!important;
  box-shadow:0 24px 60px rgba(24,6,13,.35),0 6px 18px rgba(24,6,13,.22);
  padding:14px 6px 8px;z-index:1050;
}
.quick-actions-menu .btn.dropdown-toggle[aria-expanded="true"]::before{
  content:"";position:fixed;inset:0;z-index:1049;background:rgba(24,6,13,.45);
}
.quick-actions-menu .dropdown-menu::before{
  content:"\2310  Site Access";display:block;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cpp-teal);padding:2px 10px 12px;margin:0 8px 6px;
  border-bottom:1px solid var(--cpp-line);
}
.quick-actions-menu .dropdown-menu .dropdown-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:auto;margin:2px 8px;padding:11px 10px;
  font-size:13.5px;font-weight:600;color:#3D3935;letter-spacing:.01em;
  border-radius:10px;background:transparent;
}
.quick-actions-menu .dropdown-menu .dropdown-item::after{
  content:"\2192";font-weight:700;color:var(--cpp-gray-2);
}
.quick-actions-menu .dropdown-menu .dropdown-item:hover,
.quick-actions-menu .dropdown-menu .dropdown-item:focus,
.quick-actions-menu .dropdown-menu .dropdown-item:active{
  background:var(--cpp-fog);color:var(--cpp-ink);
}
.quick-actions-menu .dropdown-menu .dropdown-item:active::after{color:var(--cpp-teal)}
.quick-actions-menu .dropdown-menu .dropdown-item.border-top{
  border-top:1px solid var(--cpp-line)!important;
  margin-top:8px!important;padding-top:13px;
  border-radius:0 0 10px 10px;color:var(--cpp-gray);
}
.quick-actions-menu .btn.dropdown-toggle:focus{outline:none!important;box-shadow:none!important}
.quick-actions-menu .btn.dropdown-toggle[aria-expanded="true"]{color:var(--cpp-glow)!important}
.quick-actions-menu .btn.dropdown-toggle[aria-expanded="true"] svg{fill:var(--cpp-glow)!important}
@media (min-width:640px){
  .quick-actions-menu .dropdown{position:relative}
  .quick-actions-menu .dropdown-menu{position:absolute!important;inset:auto 0 calc(100% + 12px) auto!important}
}
@media (prefers-reduced-motion:no-preference){
  .quick-actions-menu .dropdown-menu.show{animation:cppQaFly .18s ease-out}
  @keyframes cppQaFly{from{opacity:0}to{opacity:1}}
}

/* ============================================================
   DLZ additions (not in the CDK source) — frame-mark polish
   ============================================================ */
/* stock DLZ tiles ship four .corner crop spans — restyle as brand
   frame marks that appear on hover (tl hidden: the status plate owns
   that corner; bl/br hidden: the View Item bar slides over them) */
/* v2.1: stock .corner crop spans fully retired (hover mark read as a stray icon) */
.product-thumbnail .corner{display:none!important}
/* hero eyebrow corner reads Lake Blue on the dark art */
.cpp-eyebrow--hero::before{border-color:var(--cpp-lake)}
/* section-title eyebrows inside dark bands keep their inline Lake color;
   the corner follows via currentColor when a color is set inline */
.cpp-lanes-band .cpp-eyebrow::before{border-color:currentColor}
/* marquee separator: give the frame-mark glyph a little air */
.cpp-marquee span::after{font-family:Arial,Helvetica,sans-serif}
/* marquee must paint above the aisles fog band (which pulls up -64px) */
.cpp-marquee{position:relative;z-index:5}
/* search button: Bright Red so it pops off the maroon band (maroon-on-maroon read flat) */
.search-form button,.search-form .btn{background:var(--cpp-red)!important;border-color:var(--cpp-red)!important;color:#fff!important}
.search-form button:hover,.search-form .btn:hover{background:#C9222A!important;border-color:#C9222A!important}
/* belt & suspenders: no underlines inside redesigned tiles regardless of theme defaults */
.product-thumbnail a{text-decoration:none!important}
/* the rebuilt row must span the navbar even when the theme's .container-fluid
   is a flex parent (bootstrap) — content-width rows collapse the mobile layout */
.cpp-hrow{width:100%}
body.cpp-header-built .header-navbar > .container-fluid{display:block}
/* once the engine owns the nav (UL moved into .cpp-navrow), the theme's
   .category-container is an empty leftover bar — hide it in both settings modes */
body.cpp-header-built .category-container{display:none!important}


/* ============================================================
   v2.1 — punch list (2026-07-27 evening)
   ============================================================ */
/* aisle tiles: force white type — the theme's sitewide maroon link color was
   winning on the New Maroon tiles (tone-on-tone, name disappeared) */
.cpp-aisle,.cpp-aisle .at,.cpp-aisle .as,.cpp-aisle:hover .at{color:#fff!important}
.cpp-aisle .anum{color:var(--cpp-lake)!important}

/* hero: no gap where the stats row used to sit */
.cpp-hero-stats:empty{display:none}

/* slim mega for shallow category trees */
.cpp-mega--slim{width:min(520px,94vw)!important}
.cpp-mega--slim .cpp-mega-grid{grid-template-columns:1fr 200px;gap:20px;padding:18px 20px 12px}
.cpp-mega--slim .cpp-mega-cols{grid-template-columns:1fr;gap:0}
.cpp-mega--slim .cpp-mega-col.leaf .mh{border-bottom:0;padding:8px 0;margin:0;font-size:13.5px;font-weight:600;text-transform:none;letter-spacing:0;color:#3D3935}
.cpp-mega--slim .cpp-mega-col.leaf .mh:hover{color:var(--cpp-maroon)}
.cpp-mega--slim .cpp-mega-card{min-height:0}
.cpp-mega--slim .cpp-mega-card .mc-im{height:110px}

/* mobile drawer beautification */
.mobile-slider{padding:16px 18px 90px}
.mobile-slider .links > li > a,.mobile-slider ul > li > a{display:block;padding:13px 2px!important;border-bottom:1px solid rgba(255,255,255,.10)}
.mobile-slider li.cpp-has-sub > a{border-bottom:1px solid rgba(255,255,255,.10)}
.mobile-slider .cpp-sub a{border-bottom:0!important;padding:9px 2px!important}
.mobile-slider .cpp-sub{border-left:2px solid rgba(0,187,220,.45);padding-left:16px;margin:4px 0 6px}
.mobile-slider .cpp-drawer-extra{border-top:2px solid rgba(255,255,255,.16);margin-top:22px;padding-top:18px}
.mobile-slider-overlay{background:rgba(24,6,13,.55)!important}

/* request-form page: kill the dead air between the maroon strip and the form */
body.cpp-req-built .content-container{margin-top:0!important;padding-top:10px!important}
body.cpp-req-built .cpp-req-intro{margin:14px 0 20px}
body.cpp-req-built .iframe-area{margin-top:0!important}
body.cpp-req-built .iframe-area > [id^="wufoo-"]{padding-top:8px}

/* FAQ page: same top-tightening */
body.cpp-faq-built .content-container{margin-top:0!important;padding-top:16px}

/* size chart trigger: frame-mark chip instead of a bare text link */
.product-page .size-chart{margin:6px 0 2px}
.product-page .size-chart .btn-link{
  display:inline-flex;align-items:center;gap:8px;background:#fff!important;background-image:none!important;
  border:1.5px solid var(--cpp-maroon)!important;border-radius:3px!important;color:var(--cpp-maroon)!important;
  font-size:10.5px!important;font-weight:700!important;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 14px!important;text-decoration:none!important;box-shadow:none!important;transition:all .13s}
.product-page .size-chart .btn-link::before{content:"";width:9px;height:9px;border-top:2.5px solid currentColor;border-left:2.5px solid currentColor;margin-bottom:-2px}
.product-page .size-chart .btn-link:hover{background:var(--cpp-maroon)!important;color:#fff!important}
#modal-sizeChart .size-chart-item{border:1.5px solid #DEDDDA!important;border-radius:4px!important;padding:10px;transition:border-color .13s;text-decoration:none!important;color:#3D3935}
#modal-sizeChart .size-chart-item:hover{border-color:var(--cpp-maroon)!important;color:var(--cpp-maroon)}

/* gallery prev/next: flat square frame buttons (theme .btn gradient was leaking through) */
.product-page .product-gallery .images-wrapper button.nav{
  width:40px!important;height:40px!important;min-width:40px;border:1.5px solid #CFCECC!important;border-radius:3px!important;
  background:#fff!important;background-image:none!important;color:#3D3935;box-shadow:none!important;opacity:1}
.product-page .product-gallery .images-wrapper button.nav::before{border-color:#3D3935!important}
.product-page .product-gallery .images-wrapper button.nav:hover{background:var(--cpp-maroon)!important;border-color:var(--cpp-maroon)!important;box-shadow:none!important}
.product-page .product-gallery .images-wrapper button.nav:hover::before{border-color:#fff!important}
.product-page .product-gallery .images-wrapper button.nav.disabled{opacity:.3}
.product-page .product-gallery .images-wrapper button.nav.disabled:hover{background:#fff!important;border-color:#CFCECC!important}
.product-page .product-gallery .images-wrapper button.nav.disabled:hover::before{border-color:#3D3935!important}

/* qty field: no native number spinners anywhere on the PDP (steppers own +/-) */
.product-page input.amount::-webkit-outer-spin-button,
.product-page input.amount::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0}
.product-page input.amount{-moz-appearance:textfield!important;appearance:textfield!important}

/* description typography inside the spec sheet */
.cpp-p14-specbody p{margin:0 0 10px}
.cpp-p14-specbody p:last-child{margin-bottom:0}
.cpp-p14-specbody ul,.cpp-p14-specbody ol{margin:0 0 12px;padding-left:20px}
.cpp-p14-specbody li{margin:4px 0}
.cpp-p14-specbody b,.cpp-p14-specbody strong{color:#3D3935}
.cpp-p14-specbody a{color:var(--cpp-maroon);font-weight:600}

/* home band: 3-step MTO process cards */
.cpp-lanes--steps{grid-template-columns:1fr 1fr 1fr}
.cpp-step{position:relative;border-radius:4px;padding:26px 24px 22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.cpp-step .sn{display:inline-grid;place-items:center;width:40px;height:40px;border-top:3px solid var(--cpp-lake);border-left:3px solid var(--cpp-lake);color:var(--cpp-lake);font-size:15px;font-weight:800;letter-spacing:.04em}
.cpp-step h3{font-size:20px;font-weight:700;color:#fff;margin:14px 0 8px}
.cpp-step p{font-size:13px;line-height:1.65;color:rgba(255,255,255,.85);margin:0}
.cpp-step p b{color:#fff}
.cpp-step .sarrow{position:absolute;top:50%;right:-15px;transform:translateY(-50%);z-index:2;color:var(--cpp-lake);display:grid;place-items:center}
.cpp-step .sarrow svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cpp-lanes-note{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.cpp-lanes-note::before{content:"";width:10px;height:10px;border-top:2.5px solid var(--cpp-lake);border-left:2.5px solid var(--cpp-lake);margin-bottom:-3px;flex:none}
@media (max-width:991px){.cpp-lanes--steps{grid-template-columns:1fr}.cpp-step .sarrow{display:none}}

/* PDP stage: LOCKED box size — the image fits the box, never the other way
   around (desktop/tablet + mobile sizes per Austin 2026-07-27) */
.product-page .main-img-container{height:560px!important;display:flex;flex-direction:column}
.product-page .main-img{flex:1 1 auto;height:100%;min-height:0;display:flex;align-items:center;justify-content:center}
.product-page .main-img a{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.product-page .main-img img{width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain}
@media (min-width:768px) and (max-width:991.98px){
  .product-page .main-img-container{height:460px!important}
}
@media (max-width:767.98px){
  .product-page .main-img-container{height:340px!important}
}

/* ============================================================
   v2.2 — live review #2 (2026-07-27 night)
   ============================================================ */
/* gallery prev/next: the stylistic theme renders these buttons EMPTY —
   draw the chevrons ourselves (v2.1 only recolored a glyph that wasn't there) */
.product-page .product-gallery .images-wrapper button.nav::before{
  content:""!important;display:block;width:11px;height:11px;border:0!important;
  border-left:2.5px solid #3D3935!important;border-bottom:2.5px solid #3D3935!important;margin:0}
.product-page .product-gallery .images-wrapper button.nav.prev::before{transform:rotate(45deg) translateX(2px)}
.product-page .product-gallery .images-wrapper button.nav.next::before{transform:rotate(-135deg) translateX(2px)}
.product-page .product-gallery .images-wrapper button.nav:hover::before{
  border-left-color:#fff!important;border-bottom-color:#fff!important}
.product-page .product-gallery .images-wrapper button.nav.disabled:hover::before{
  border-left-color:#3D3935!important;border-bottom-color:#3D3935!important}

/* mobile drawer v2.2 — the proper beautification pass */
.mobile-slider{background:var(--cpp-legacy)!important;padding:0 0 96px;box-shadow:14px 0 44px rgba(24,6,13,.45)}
.cpp-drawer-top{display:flex;align-items:center;justify-content:space-between;background:var(--cpp-maroon);padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.14)}
.cpp-drawer-top .dt{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#EAD9DF}
.cpp-drawer-top .dt b{color:#fff;font-weight:800;letter-spacing:.1em}
.cpp-drawer-x{background:none;border:0;color:#fff;width:38px;height:38px;display:grid;place-items:center;padding:0}
.cpp-drawer-x svg{width:20px;height:20px}
.mobile-slider > ul{padding:10px 18px 0!important;margin:0!important}
.mobile-slider .links > li > a,.mobile-slider ul > li > a{
  font-size:13px!important;font-weight:700!important;letter-spacing:.08em;text-transform:uppercase;
  color:#fff!important;padding:15px 2px!important;border-bottom:1px solid rgba(255,255,255,.10)}
.mobile-slider .cpp-sub a{font-size:13px!important;font-weight:600!important;letter-spacing:.02em;text-transform:none;color:#EAD9DF!important;padding:10px 2px!important;border-bottom:0!important}
.mobile-slider .cpp-sub{border-left:2px solid var(--cpp-lake);padding-left:16px;margin:2px 0 8px}
.mobile-slider .cpp-sub-all-a{color:var(--cpp-lake)!important}
.mobile-slider .cpp-caret{height:50px;color:#EAD9DF}
.mobile-slider li.cpp-open > .cpp-caret{color:var(--cpp-lake)}
.mobile-slider .cpp-drawer-h{color:var(--cpp-lake);font-size:10px;margin-bottom:10px}
.mobile-slider .cpp-drawer-extra{border-top:2px solid rgba(255,255,255,.16);margin:22px 0 0;padding-top:18px}
.mobile-slider .cpp-drawer-link{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff!important;border-bottom:1px solid rgba(255,255,255,.08)}

/* division tiles: third-width variant for the second row (real DLZ tree = 4 cats) */
.cpp-aisle--third{grid-column:span 4}
@media (max-width:991px){.cpp-aisle--third{grid-column:span 6}}
@media (max-width:640px){.cpp-aisle--third{grid-column:span 12}}

/* ============================================================
   v2.3 — live review #3 (2026-07-28)
   ============================================================ */
/* ---- mobile drawer: total takeover (theme painted qam cyan on panel + UL,
        plus a rotated ::before diamond and same-color hover blocks) ---- */
.mobile-slider{background:var(--cpp-legacy)!important;min-width:min(340px,86vw)!important;padding:0 0 96px!important;box-shadow:14px 0 44px rgba(24,6,13,.45)}
.mobile-slider::before{display:none!important;content:none!important}
.mobile-slider ul,.mobile-slider li{background:transparent!important}
.mobile-slider > ul{padding:8px 18px 0!important}
.mobile-slider li > a,.mobile-slider .links > li > a{
  background:transparent!important;color:#fff!important;
  font-size:13px!important;font-weight:700!important;letter-spacing:.08em!important;text-transform:uppercase!important;
  text-decoration:none!important;padding:15px 2px!important;border-bottom:1px solid rgba(255,255,255,.12)}
.mobile-slider li > a:hover,.mobile-slider li > a:focus{
  background:transparent!important;color:var(--cpp-lake)!important;text-decoration:none!important}
.mobile-slider .cpp-sub{background:transparent!important;border-left:2px solid var(--cpp-lake);padding-left:16px;margin:2px 0 8px}
.mobile-slider .cpp-sub a{font-size:13px!important;font-weight:600!important;letter-spacing:.02em!important;text-transform:none!important;color:#EED9E0!important;border-bottom:0!important;padding:10px 2px!important}
.mobile-slider .cpp-sub a:hover{color:var(--cpp-lake)!important}
.mobile-slider .cpp-sub-all-a{color:var(--cpp-lake)!important;font-weight:700!important}
.cpp-drawer-top{display:flex;align-items:center;justify-content:space-between;background:var(--cpp-maroon);padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.14)}
.cpp-drawer-top .dlg{max-height:34px;width:auto}
.cpp-drawer-top .dt b{color:#fff;font-weight:800;font-size:16px;letter-spacing:.1em}
/* account block cloned into the drawer bottom */
.mobile-slider .cpp-drawer-extra{background:transparent!important;border-top:2px solid rgba(255,255,255,.18);margin:24px 0 0;padding-top:16px}
.mobile-slider .cpp-drawer-link{background:transparent!important;color:#fff!important;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-slider .cpp-drawer-link:hover{color:var(--cpp-lake)!important}

/* ---- gallery arrows: nuke every native layer in every state ---- */
body .product-page .product-gallery .images-wrapper button.btn.nav,
body .product-page .product-gallery .images-wrapper button.btn.nav:hover,
body .product-page .product-gallery .images-wrapper button.btn.nav:focus,
body .product-page .product-gallery .images-wrapper button.btn.nav:active{
  width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;
  border:1.5px solid #CFCECC!important;border-radius:3px!important;
  background:#fff!important;background-image:none!important;box-shadow:none!important;
  color:#3D3935!important;opacity:1;display:inline-flex!important;align-items:center;justify-content:center}
body .product-page .product-gallery .images-wrapper button.btn.nav > *{display:none!important}
body .product-page .product-gallery .images-wrapper button.btn.nav::after{content:none!important;display:none!important}
body .product-page .product-gallery .images-wrapper button.btn.nav:hover,
body .product-page .product-gallery .images-wrapper button.btn.nav:active{
  background:var(--cpp-maroon)!important;border-color:var(--cpp-maroon)!important}
body .product-page .product-gallery .images-wrapper button.btn.nav.disabled,
body .product-page .product-gallery .images-wrapper button.btn.nav.disabled:hover{
  background:#fff!important;border-color:#CFCECC!important;opacity:.3!important}

/* v2.3b: the gallery buttons carry a TEXT-NODE glyph (element hiding can't touch
   text nodes) — zero the font so only our drawn chevron remains */
body .product-page .product-gallery .images-wrapper button.btn.nav,
body .product-page .product-gallery .images-wrapper button.btn.nav:hover,
body .product-page .product-gallery .images-wrapper button.btn.nav:focus,
body .product-page .product-gallery .images-wrapper button.btn.nav:active{
  font-size:0!important;line-height:0!important;color:transparent!important;text-shadow:none!important}

/* v2.3c: gallery artifact final — the theme paints its arrow as a BACKGROUND
   SPRITE on the button's ::before (product-image-carousel-*.png); our chevron
   redraw left that background layer visible behind it. Kill every paint layer
   on both pseudos in every state. */
body .product-page .product-gallery .images-wrapper button.btn.nav::before,
body .product-page .product-gallery .images-wrapper button.btn.nav:hover::before,
body .product-page .product-gallery .images-wrapper button.btn.nav:focus::before,
body .product-page .product-gallery .images-wrapper button.btn.nav:active::before{
  background:none!important;background-image:none!important;box-shadow:none!important;
  -webkit-mask:none!important;mask:none!important;filter:none!important}
body .product-page .product-gallery .images-wrapper button.btn.nav::after{
  content:none!important;display:none!important;background:none!important}

/* ============================================================
   v2.4 — mobile PDP assist (2026-07-28)
   1) stage freed for touch: vertical pans scroll the page, horizontal
      swipes step the gallery (cpp_dlz.js swipe + capture-phase zoom guard)
   2) sticky live preview bar + "Your Selection" recap — ported from the
      ACM store's cpp_product_mobile v2.7, DLZ-skinned. Mobile only
      (<=767.98px), body.cpp-pm scope; desktop untouched.
   (also this pass: cart flyout thumb plate white — see .fitem img above;
    cart page thumbs 128/100 — cpp_dlz_checkout.css)
   ============================================================ */
/* our injected elements exist only for mobile — never render them elsewhere */
#cpp-pm-bar,#cpp-pm-recap{display:none}

@media (max-width:767.98px){
  /* ---- free the image for touch ---- */
  body.cpp-pm .product-gallery,body.cpp-pm .gallery-main,
  body.cpp-pm .main-img-container,body.cpp-pm .main-img,
  body.cpp-pm .main-img a,body.cpp-pm #primary_image{touch-action:pan-y!important}
  body.cpp-pm .zoomContainer,body.cpp-pm .zoomWindowContainer,
  body.cpp-pm .zoomLens,body.cpp-pm .zoomWindow{display:none!important;pointer-events:none!important}

  /* ---- sticky live preview bar (drops in once the stage scrolls off) ---- */
  #cpp-pm-bar{
    position:fixed;left:0;right:0;top:0;z-index:1040;
    display:flex;align-items:center;gap:11px;padding:9px 12px;
    background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--cpp-line);box-shadow:0 10px 28px rgba(24,6,13,.14);
    transform:translateY(-125%);transition:transform .28s cubic-bezier(.2,.7,.2,1);
    font-family:var(--cpp-font);cursor:pointer}
  #cpp-pm-bar::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--cpp-maroon),var(--cpp-legacy))}
  #cpp-pm-bar.show{transform:translateY(0)}
  #cpp-pm-bar:active{background:rgba(249,244,246,.97)}
  #cpp-pm-bar .pm-thumb{width:52px;height:52px;flex:none;object-fit:contain;
    background:#fff;border:1px solid var(--cpp-line);border-radius:6px;padding:3px}
  #cpp-pm-bar .pm-meta{flex:1 1 auto;min-width:0}
  #cpp-pm-bar .pm-name{font-weight:700;font-size:12.5px;color:var(--cpp-ink);line-height:1.2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #cpp-pm-bar .pm-chips{display:flex;gap:5px;margin-top:3px;overflow:hidden}
  #cpp-pm-bar .pm-chip{font-size:10.5px;font-weight:600;color:var(--cpp-maroon);
    background:#F7EEF1;border:1px solid #E5CBD4;border-radius:999px;padding:1px 8px;
    white-space:nowrap;max-width:42vw;overflow:hidden;text-overflow:ellipsis}
  #cpp-pm-bar .pm-right{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
  #cpp-pm-bar .pm-price{font-weight:800;font-size:13.5px;color:var(--cpp-maroon);line-height:1}
  #cpp-pm-bar .pm-jump{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--cpp-maroon);display:flex;align-items:center;gap:3px;
    background:#F7EEF1;border:1px solid #E5CBD4;border-radius:999px;padding:2px 9px}
  #cpp-pm-bar .pm-jump svg{width:9px;height:9px}

  /* ---- "Your Selection" recap at the top of the purchase card ---- */
  body.cpp-pm #cpp-pm-recap{
    display:flex;align-items:center;gap:11px;padding:10px 12px;
    border:1px solid #E5CBD4;border-radius:8px;margin:0 0 14px;
    background:linear-gradient(180deg,#FBF7F8,#F7EEF1)}
  body.cpp-pm #cpp-pm-recap .pm-recap-thumb{width:56px;height:56px;flex:none;object-fit:contain;
    background:#fff;border:1px solid var(--cpp-line);border-radius:6px;padding:4px}
  body.cpp-pm #cpp-pm-recap .pm-recap-designs{display:flex;gap:4px;flex:none}
  body.cpp-pm #cpp-pm-recap .pm-recap-designs:empty{display:none}
  body.cpp-pm #cpp-pm-recap .pm-recap-design{width:38px;height:38px;object-fit:contain;
    background:#fff;border:1px dashed #D9B7C3;border-radius:6px;padding:3px}
  /* white/wht artwork rides a dark plate (same rule as the cart logo thumbs) */
  body.cpp-pm #cpp-pm-recap .pm-recap-design--dark{background:var(--cpp-ink);border-style:solid;border-color:var(--cpp-ink)}
  body.cpp-pm #cpp-pm-recap .pm-recap-meta{flex:1 1 auto;min-width:0}
  body.cpp-pm #cpp-pm-recap .pm-recap-title{font-size:10.5px;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:var(--cpp-maroon);margin-bottom:6px;line-height:1}
  body.cpp-pm #cpp-pm-recap .pm-recap-chips{display:flex;flex-wrap:wrap;gap:5px}
  body.cpp-pm #cpp-pm-recap .pm-chip{font-size:11px;font-weight:600;color:var(--cpp-maroon);
    background:#fff;border:1px solid #E5CBD4;border-radius:999px;padding:2px 9px;
    white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  body.cpp-pm #cpp-pm-recap .pm-recap-none{font-size:12px;color:var(--cpp-gray)}
}