/* ============================================================
   CPP · RATE GOODS — retail overlay  v3.3 ("Good goods" moniker retired per client 2026-08-06)
   Additive reskin of the live BrightSites theme (stylistic).
   Loads AFTER custom-main.css via snippets/cpp/cpp_head-include.
   Ported from the DLZ "Built to Spec" engine — same touchpoints,
   same functionality, Rate retail brand throughout.
   Typography per rate.com: Figtree (free stand-in for Proxima
   Nova) · sentence case everywhere · uppercase reserved for tiny
   labels/plates only · pill buttons · white chrome.
   Art language: the red Rate arrow (a small down triangle) is the
   only decorative mark — NO corner brackets, NO construction art.
   Palette: Rate Ink #21292D · Deep Ink #161C20 · Rate Red #D13239
   · Soft Red (dark surfaces) #EE5A61 · cool neutral grays
   ============================================================ */

:root{
  /* legacy token names kept so every engine rule keeps working —
     values are RATE brand (rate.com): ink=Rate ink (text + primary action),
     carbon=ink chrome (dark cap/drawer), teal=primary action (ink),
     glow=soft red accent for dark surfaces, amber=Rate red callout */
  --cpp-ink:#21292D; --cpp-carbon:#21292D; --cpp-teal:#21292D;
  --cpp-teal-deep:#39434B; --cpp-glow:#EE5A61; --cpp-amber:#D13239;
  --cpp-fog:#F6F7F8; --cpp-line:#E3E6E8; --cpp-gray:#5E6A72; --cpp-gray-2:#ABB4BA;
  /* Rate-native names */
  --cpp-maroon:#21292D; --cpp-legacy:#161C20; --cpp-red:#D13239;
  --cpp-lake:#D13239; --cpp-ocean:#12181B; --cpp-air:#EEF1F2;
  --cpp-font:'Figtree',Helvetica,Arial,sans-serif;
  --cpp-r-s:10px; --cpp-r-m:14px; --cpp-r-l:20px;
  --cpp-shadow:0 10px 30px rgba(15,20,24,.08);
}

/* ---------- base type ---------- */
body{font-family:var(--cpp-font);color:#21292D}
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:#DDE3E6!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:#fff!important;border-bottom:0!important}
.header-navbar .navbar-brand img{max-height:52px}
/* nav links */
.header-navbar .header-links > li > a, .cpp-navrow ul.header-links > li > a, .header-navbar .header-links .nav-link{color:var(--cpp-ink)!important;font-size:13.5px;font-weight:600;letter-spacing:.01em;text-transform:none}
.header-navbar .header-links > li > a:hover, .cpp-navrow ul.header-links > li > a:hover, .header-navbar .header-links .nav-link:hover{color:var(--cpp-red)!important}
.header-navbar .header-links .dropdown-menu, .cpp-navrow .dropdown-menu{background:#fff;border:1px solid var(--cpp-line);border-radius:var(--cpp-r-m);box-shadow:var(--cpp-shadow)}
.header-navbar .header-links .dropdown-menu a, .cpp-navrow .dropdown-menu a{color:var(--cpp-ink)!important;font-size:13px;font-weight:500}
.header-navbar .header-links .dropdown-menu a:hover, .cpp-navrow .dropdown-menu a:hover{background:var(--cpp-fog);color:var(--cpp-red)!important}
/* search */
.search-form input{background:var(--cpp-fog);border:1px solid var(--cpp-line);color:var(--cpp-ink);border-radius:999px}
.search-form input::placeholder{color:var(--cpp-gray-2);text-transform:none;letter-spacing:.01em;font-size:13px}
.search-form button, .search-form .btn{background:var(--cpp-ink);border-color:var(--cpp-ink);color:#fff}
.search-form button:hover, .search-form .btn:hover{background:var(--cpp-teal-deep);border-color:var(--cpp-teal-deep)}

/* ---------- announcement bar (ONE calm crossfade line — injected under the utility cap) ---------- */
.cpp-announce{background:var(--cpp-ocean);color:#fff;display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 14px;border-top:1px solid rgba(255,255,255,.07);position:relative;min-height:36px}
.cpp-announce .an-line{font-size:12px;font-weight:600;letter-spacing:.03em;opacity:0;transition:opacity .24s ease;text-align:center}
.cpp-announce .an-line.on{opacity:1}
.cpp-announce .an-line a{color:var(--cpp-glow);text-decoration:none}
.cpp-announce .an-line a:hover{text-decoration:underline}
.cpp-announce .an-btn{background:none;border:0;color:rgba(255,255,255,.5);width:26px;height:26px;display:grid;place-items:center;cursor:pointer;padding:0;flex:none}
.cpp-announce .an-btn:hover{color:#fff}
.cpp-announce .an-btn svg{width:13px;height:13px}
.cpp-announce.an-solo .an-btn{display:none}
@media (max-width:640px){.cpp-announce .an-line{font-size:11px}}

/* ---------- 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(15,20,24,.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-red)!important;color:#fff!important}
.sku-ribbon[data-cpp-status="ready"] span{background:var(--cpp-air)!important;color:var(--cpp-ink)!important}
.sku-ribbon[data-cpp-status="preorder"] span{background:var(--cpp-ink)!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(15,20,24,.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(15,20,24,.02) 14px 16px),linear-gradient(160deg,#F7F8F8,#EDEFF0);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-red);color:#fff;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:4px;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(18,24,27,.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:#DDE3E6;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:#F2F4F5!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:#F2F4F5}

/* ---------- CPP homepage sections (cpp_home-aisles / cpp_home-lanes) ---------- */
.cpp-section{padding:44px 0 8px}
.cpp-eyebrow{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--cpp-gray)}
/* the red Rate arrow — small down triangle, echoing the logo mark */
.cpp-eyebrow::before{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--cpp-red)}
.cpp-sec-title{font-size:clamp(24px,3vw,34px);font-weight:700;margin:8px 0 22px;color:var(--cpp-ink)}
/* aisle tiles — retail category cards (white / fog / ink / red variants).
   The snippet assigns variants; wireAisles() keeps hrefs synced to the live nav. */
.cpp-aisles{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.cpp-aisle{position:relative;grid-column:span 3;min-height:200px;border-radius:var(--cpp-r-l);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:22px 24px;color:var(--cpp-ink);text-decoration:none;background:#fff;border:1px solid var(--cpp-line);transition:box-shadow .18s,transform .18s}
.cpp-aisle:hover{box-shadow:0 16px 38px rgba(15,20,24,.12);transform:translateY(-3px)}
.cpp-aisle--lg{grid-column:span 6;min-height:255px}
.cpp-aisle--third{grid-column:span 3}
.cpp-aisle--fog,.cpp-aisle--ocean{background:var(--cpp-fog);border-color:var(--cpp-fog)}
.cpp-aisle--ink,.cpp-aisle--accent{background:var(--cpp-ink);border-color:var(--cpp-ink);color:#fff}
.cpp-aisle--red{background:var(--cpp-red);border-color:var(--cpp-red);color:#fff}
.cpp-aisle .anum{position:absolute;top:20px;left:24px;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cpp-red);display:flex;align-items:center;gap:8px}
.cpp-aisle--ink .anum,.cpp-aisle--accent .anum,.cpp-aisle--red .anum{color:rgba(255,255,255,.85)}
.cpp-aisle .anum::before{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:7px solid var(--cpp-red)}
.cpp-aisle--red .anum::before{border-top-color:#fff}
.cpp-aisle--ink .anum::before,.cpp-aisle--accent .anum::before{border-top-color:var(--cpp-glow)}
.cpp-aisle .aicon{position:absolute;top:50%;left:50%;transform:translate(-50%,-62%);width:96px;height:96px;color:rgba(15,20,24,.10);pointer-events:none}
.cpp-aisle--ink .aicon,.cpp-aisle--accent .aicon,.cpp-aisle--red .aicon{color:rgba(255,255,255,.22)}
.cpp-aisle--lg .aicon{width:150px;height:150px}
.cpp-aisle .aicon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:.7;stroke-linecap:round;stroke-linejoin:round}
.cpp-aisle .at{position:relative;font-size:21px;font-weight:700;line-height:1.12}
.cpp-aisle--lg .at{font-size:29px}
.cpp-aisle .as{position:relative;font-size:12px;font-weight:500;color:var(--cpp-gray);margin-top:5px}
.cpp-aisle--ink .as,.cpp-aisle--accent .as,.cpp-aisle--red .as{color:rgba(255,255,255,.75)}
.cpp-aisle .aarrow{position:absolute;right:20px;bottom:20px;width:40px;height:40px;border-radius:999px;background:var(--cpp-red);display:grid;place-items:center;transition:transform .16s,background .16s}
.cpp-aisle--red .aarrow{background:#fff}
.cpp-aisle--red .aarrow svg{stroke:var(--cpp-red)}
.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:translateX(4px)}
/* quick-links band under the grid (utility categories as pill chips) */
.cpp-aislerow{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.cpp-aislechip{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--cpp-line);border-radius:999px;padding:11px 19px;font-size:12.5px;font-weight:600;color:var(--cpp-ink);text-decoration:none;background:#fff;transition:all .14s}
.cpp-aislechip:hover{border-color:var(--cpp-ink);background:var(--cpp-ink);color:#fff}
.cpp-aislechip .dot{width:7px;height:7px;border-radius:50%;background:var(--cpp-red);flex:none}
/* 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:#21292D;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:#DDE3E6;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:#B9C2C8}
@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:#DDE3E6!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(15,20,24,.5)!important;padding:8px!important;min-width:230px;margin-top:10px!important}
.navbar-container .dropdown-menu .dropdown-item{color:#E9EDEF!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(238,90,97,.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:56px;border-radius:0 999px 999px 0;flex:none}
.cpp-hsearch .search-form input{border-radius:999px 0 0 999px;border-right:0}
/* driver's seat */
.cpp-account{display:flex;align-items:center;gap:10px;color:var(--cpp-ink)!important;text-decoration:none!important;flex:none;margin-left:auto}
.cpp-account svg{width:22px;height:22px;color:var(--cpp-ink)}
.cpp-account .l{display:block;font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cpp-gray)}
.cpp-account .v{display:block;font-size:14px;font-weight:700}
.cpp-account:hover .v{color:var(--cpp-red)}
/* 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:var(--cpp-ink)!important;border:1px solid var(--cpp-ink);border-radius:999px!important;padding:9px 18px!important;color:#fff!important;text-decoration:none!important;box-shadow:0 6px 16px rgba(15,20,24,.16);transition:background .14s}
a.cpp-wo-pill:hover{background:var(--cpp-teal-deep)!important;border-color:var(--cpp-teal-deep)}
a.cpp-wo-pill .cart-ic{position:relative;display:inline-flex}
a.cpp-wo-pill .cart-ic svg{width:22px;height:22px;color:#F2F4F5}
a.cpp-wo-pill .badge-ct{position:absolute;top:-7px;right:-9px;background:var(--cpp-red);color:#fff;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:#B9C2C8}
a.cpp-wo-pill .v{display:block;font-size:14px;font-weight:700}
/* nav on its own row */
.cpp-navrow{background:#fff;border-top:1px solid var(--cpp-line);border-bottom:1px solid var(--cpp-line);margin-top:10px}
.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-red)!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:54px 0 58px;margin-top:30px}
.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:#21292D;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:#C0C8CD}
.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:#C0C8CD;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:#C4CCD1;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:#C4CCD1!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:var(--cpp-ink);width:44px;height:44px;padding:0}
  .cpp-mburger svg{width:24px;height:24px;stroke:var(--cpp-ink)}
  button.cpp-msearch{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--cpp-ink);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;box-shadow:none}
  a.cpp-wo-pill .wo-tx{display:none}
  a.cpp-wo-pill .cart-ic svg{width:24px;height:24px;color:var(--cpp-ink)}
  /* 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:#B9C2C8;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:#DDE3E6!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:#F2F4F5!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(15,20,24,.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(33,41,45,.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:#21292D;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(15,20,24,.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(15,20,24,.55);z-index:1049}
.cpp-flyout .fgrab{display:none}
@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(15,20,24,.45);max-height:78vh;overflow:auto;padding:10px 18px calc(18px + env(safe-area-inset-bottom));touch-action:pan-y}
  .cpp-workorder:hover .cpp-flyout{display:none}
  .cpp-flyout.cpp-open{display:block!important}
  .cpp-flyout .fclose{display:block!important}
  /* v3.3: swipe-down-to-close affordance — the little grab bar every bottom
     sheet has; the JS drag lives in buildFlyout (sheetSwipe) */
  .cpp-flyout .fgrab{display:block;width:40px;height:4px;border-radius:99px;background:var(--cpp-line);margin:0 auto 10px}
  .cpp-flyout.cpp-dragging{transition:none!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:#D13239}
.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:#D13239}
.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%}
/* RATE: hero graphics are designed comps managed in the dashboard — never crop
   them (no object-fit, no fixed height). The engine only rounds the stage. */
.cpp-hero{max-width:1540px;margin:14px auto 0;padding:0 20px}
.cpp-hero #homepage-carousel{border-radius:var(--cpp-r-l);overflow:hidden}
@media (max-width:640px){.cpp-hero{padding:0 10px;margin-top:8px}}
.cpp-hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(100deg,rgba(15,20,24,.86) 0%,rgba(15,20,24,.55) 30%,rgba(15,20,24,.12) 55%,rgba(15,20,24,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(15,20,24,.45)}
.cpp-hero-h .row.accent{color:var(--cpp-glow)}
.cpp-hero-p{font-size:15px;line-height:1.65;color:#F2F4F5;max-width:400px;margin:18px 0 0;text-shadow:0 1px 12px rgba(15,20,24,.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(33,41,45,.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:#B9C2C8;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 #E3E6E8;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:#21292D;background:rgba(255,255,255,.88);border:1px solid #E3E6E8;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:#21292D;background:rgba(255,255,255,.92);border:1.5px solid #21292D;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 #E3E6E8;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:#ABB4BA}
.product-page .images-container li.image.cpp-cur{border-color:#21292D}
.product-page .images-container li.image.cpp-cur::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#21292D}
.cpp-p14-thumbname{flex:none;font-size:8.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#5E6A72;background:#fff;border-top:1px solid #EEF0F1;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:#21292D;font-weight:700}
.product-page .product-gallery .images-wrapper button.nav{width:42px!important;height:42px!important;min-width:42px;border:1.5px solid #CDD3D6!important;border-radius:50%!important;background:#fff!important;color:#21292D;box-shadow:0 2px 10px rgba(15,20,24,.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:#21292D!important}
.product-page .product-gallery .images-wrapper button.nav:hover{background:#21292D!important;border-color:#21292D!important;box-shadow:0 4px 14px rgba(33,41,45,.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:#CDD3D6!important}
.product-page .product-gallery .images-wrapper button.nav.disabled:hover::before{border-color:#21292D!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(15,20,24,.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(15,20,24,.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:#21292D;border-color:#21292D}
.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:#21292D;border-color:#21292D}
.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:#EE5A61}

/* ---------- 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:#EE5A61;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 #E3E6E8;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:#F6F7F8}
.cpp-p14-tier .tq{display:block;font-size:10px;color:#5E6A72;letter-spacing:.08em}
.cpp-p14-tier .tp{display:block;font-size:16px;font-weight:600;margin-top:4px;color:#21292D}
.cpp-p14-tier .ts{display:block;font-size:8.5px;color:#21292D;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:#EE5A61}

/* ---------- 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:#21292D}
.cpp-p14-optlabel .req{color:#D13239;font-size:9px}
.cpp-p14-optlabel .sel{color:#21292D;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 #E3E6E8!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:#5E6A72!important}
.product-page .logo-location-thumb.cpp-darktile{background:#21292D!important}
.product-page .logo-location-thumb.selected-logo{border-color:#21292D!important;box-shadow:0 0 0 1px #21292D}
.product-page .logo-location-thumb.selected-logo::after{content:"\2713";position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;background:#21292D;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 #E3E6E8;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:#21292D}
.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:#D13239;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(15,20,24,.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 #21292D}
.cpp-p14-swatch .cl{display:block;font-size:8.5px;letter-spacing:.08em;color:#5E6A72;margin-top:8px;text-transform:uppercase;line-height:1.4;width:100%}
.cpp-p14-swatch.on .cl{color:#21292D;font-weight:600}

/* ---------- qty + buy ---------- */
.cpp-p14-qty{display:inline-flex;align-items:center;border:1.5px solid #21292D;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:#F6F7F8}
.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:#21292D!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(33,41,45,.35);transition:background .15s,transform .15s,box-shadow .15s;cursor:pointer}
.product-page input.add-to-cart:hover{background:#161C20!important;transform:translateY(-1px);box-shadow:0 10px 24px rgba(33,41,45,.45)}
.product-page .total-info{border-top:1px solid #E3E6E8;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:#21292D!important}
.product-page .product-quantity span.stock.text-danger{color:#D13239!important}
.cpp-p14-hidedesc{display:none!important}

/* ---------- availability callout (pill + icon rows) ---------- */
.cpp-p14-note{background:#F7F8F8;border:1px solid #E3E6E8;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:#21292D}
.cpp-p14-note-row{display:flex;gap:10px;align-items:flex-start;padding:4px 0;font-size:12.5px;color:#39434B;line-height:1.55}
.cpp-p14-note-row svg{width:17px;height:17px;stroke:#5E6A72;flex:none;margin-top:1px}
.cpp-p14-note-row b{color:#21292D;font-weight:700}

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

/* ---------- spec accordion ---------- */
.cpp-p14-specs{margin-top:26px;border-top:2px solid #21292D}
.cpp-p14-spec{border-bottom:1px solid #E3E6E8}
.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:#21292D}
.cpp-p14-spec summary::-webkit-details-marker{display:none}
.cpp-p14-spec summary .num{font-size:10px;color:#21292D;font-weight:600;letter-spacing:.14em}
.cpp-p14-spec summary svg{width:14px;height:14px;stroke:#5E6A72;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:#39434B;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 #E3E6E8}
  .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(15,20,24,.10),0 1px 3px rgba(15,20,24,.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(15,20,24,.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(15,20,24,.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:#B9C2C8;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;font-weight:500}
.cpp-crumbs a{color:#B9C2C8 !important;text-decoration:none !important;transition:color .12s}
.cpp-crumbs a:hover{color:#EE5A61 !important}
.cpp-crumbs .sep{color:#5E6A72}
.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:#5E6A72;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 #E3E6E8;border-radius:14px;padding:18px 22px 12px;
  box-shadow:0 1px 2px rgba(15,20,24,.06),0 2px 8px rgba(15,20,24,.05);grid-column:1;
}
.cpp-req-note{font-size:9px;color:#ABB4BA;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 #E3E6E8;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:#21292D}
.cpp-how h4 .tick{width:14px;height:3px;background:#21292D;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 #21292D;color:#21292D;display:grid;place-items:center;font-size:11px;font-weight:600;flex:none}
.cpp-how-step .ht{font-size:13px;font-weight:700;color:#21292D}
.cpp-how-step .hs{font-size:12px;color:#5E6A72;margin-top:2px;line-height:1.55}
.cpp-how .cpp-rush{font-size:12.5px;color:#5E6A72;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 #EE5A61;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:#EE5A61}
.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:#21292D}
.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:'Figtree',Helvetica,Arial,sans-serif;color:#21292D}
.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(15,20,24,.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:#EE5A61}
.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:#EE5A61}
.cpp-auth-inner p{color:#DCE2E5;font-size:14.5px;line-height:1.7;max-width:390px;margin:0}
.cpp-auth-side{background:#F6F7F8;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(15,20,24,.10),0 1px 3px rgba(15,20,24,.08);overflow:hidden}
.cpp-auth-tabs{display:flex;border-bottom:1px solid #E3E6E8}
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:#5E6A72;position:relative;text-decoration:none!important;transition:color .15s}
a.cpp-auth-tab:hover{color:#21292D}
a.cpp-auth-tab.on{color:#21292D}
a.cpp-auth-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#21292D}
.cpp-auth-body{padding:28px 32px 26px}
.cpp-auth-head{margin-bottom:20px}
.cpp-auth-head .cpp-auth-eyebrow{color:#21292D}
.cpp-auth-head h2{font-size:24px;font-weight:700;line-height:1.12;color:#21292D;margin:10px 0 6px;font-family:inherit}
.cpp-auth-head p{font-size:13px;color:#5E6A72;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:#5E6A72;margin:0 0 7px;font-family:inherit}
.cpp-auth-body form label .required-label{color:#ABB4BA;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:#5E6A72!important}
.cpp-auth-body form .form-control{width:100%;height:48px;border:1.5px solid #E3E6E8;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:#21292D;box-shadow:0 0 0 3px rgba(33,41,45,.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:#5E6A72;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:#21292D!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(33,41,45,.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:#161C20!important;box-shadow:0 10px 24px rgba(33,41,45,.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:#21292D;text-decoration:none}
.cpp-auth-links a:hover{color:#21292D;text-decoration:underline;text-underline-offset:3px}
.cpp-auth-note{display:flex;gap:11px;background:var(--cpp-air);border:1px solid rgba(18,24,27,.15);border-radius:4px;padding:13px 14px;margin:20px 0 0}
.cpp-auth-note svg{width:17px;height:17px;stroke:#12181B;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:#F6F7F8;border-color:#E3E6E8;border-left:4px solid var(--cpp-red);margin:0 0 20px}
.cpp-auth-note--warn svg{stroke:#D13239}
.cpp-auth-note--warn p{color:#21292D}
.cpp-auth-foot{padding:16px 32px;background:#F6F7F8;border-top:1px solid #E3E6E8;font-size:12px;color:#5E6A72;text-align:center}
.cpp-auth-foot a{color:#21292D;font-weight:700;text-decoration:none}
.cpp-auth-foot a:hover{color:#21292D;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:#5E6A72!important;font-weight:500}
/* domain-guard alert (rendered by the liquid gate scripts) */
.cpp-mailguard{display:flex;gap:11px;background:#F6F7F8;border:1px solid #E3E6E8;border-left:4px solid var(--cpp-red);border-radius:4px;padding:12px 14px;margin-top:10px;font-family:'Figtree',Helvetica,Arial,sans-serif;text-align:left}
.cpp-mailguard svg{width:17px;height:17px;stroke:#D13239;fill:none;flex:none;margin-top:1px}
.cpp-mailguard p{font-size:12px;color:#21292D;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:#D13239!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:#ABB4BA!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:#ABB4BA!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 #E3E6E8;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:#5E6A72;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:#21292D}
.cpp-auth--checkout .nav-tabs .nav-link.active{color:#21292D}
.cpp-auth--checkout .nav-tabs .nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#21292D}
.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:#21292D;text-decoration:none}
.cpp-auth--checkout .pt-3 a:hover{color:#21292D;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:#F6F7F8;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 #21292D;color:#21292D;display:grid;place-items:center;font-size:12px;font-weight:700}
.cpp-faq-sechead h2{font-size:17px;font-weight:700;color:#21292D;margin:0;line-height:1.2}
.cpp-faq-item{background:#fff;border:1px solid #E3E6E8;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:#21292D;box-shadow:0 6px 22px rgba(15,20,24,.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 #ABB4BA;color:#5E6A72;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:#21292D;color:#21292D}
.cpp-faq-q .qt{flex:1;font-size:15px;font-weight:700;color:#21292D;line-height:1.35}
.cpp-faq-q .chev{width:20px;height:20px;flex:none;color:#5E6A72;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:#21292D}
.cpp-faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.cpp-faq-ain{padding:2px 18px 18px 58px;color:#39434B;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:#21292D;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(238,90,97,.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:#EE5A61;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:#21292D;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:#161C20;color:#fff;text-decoration:none}
.cpp-faq-contact .fc-btn svg{width:15px;height:15px}
.cpp-faq-contact .fc-mail{font-size:11px;color:#5E6A72;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:#21292D;text-decoration:none;border-bottom:1px solid #EEF0F1;transition:color .15s}
.cpp-faq-link:last-child{border-bottom:0;padding-bottom:2px}
.cpp-faq-link svg{width:15px;height:15px;color:#21292D;flex:none}
.cpp-faq-link:hover{color:#21292D;text-decoration:none}
.cpp-faq-rush{background:#fff;border:1px solid #E3E6E8;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:#21292D}
.cpp-faq-rush p{font-size:13px;line-height:1.65;color:#39434B;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 #D13239;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:Figtree,Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;color:#EE5A61;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:Figtree,Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#5E6A72;margin:0}
body.cpp-lot-built .products-result-verbiage b{color:#21292D;font-weight:700}
body.cpp-lot-built .sort span{font-family:Figtree,Arial,sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#5E6A72;margin-right:4px}
body.cpp-lot-built select.sort-select{border:1.5px solid #E3E6E8;border-radius:8px;background-color:#fff;color:#21292D;font-family:Figtree,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:#21292D;box-shadow:0 0 0 3px rgba(33,41,45,.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:#F6F7F8!important;background-image:none!important;border:1px solid #E3E6E8!important;color:#21292D!important;border-radius:20px;font-family:Figtree,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:#D13239!important;color:#D13239!important;background:#F6F7F8!important}
body.cpp-lot-built .category-page .d-lg-none .btn.secondary{background:#fff!important;background-image:none!important;border:1.5px solid #CDD3D6!important;color:#21292D!important;border-radius:8px;font-family:Figtree,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 #E3E6E8;border-radius:8px;background:#fff;color:#21292D;font-family:Figtree,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:#21292D;color:#21292D;background:#fff;text-decoration:none}
body.cpp-lot-built ul.pagination .page-item.active .page-link{background:#21292D;border-color:#21292D;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(15,20,24,.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(15,20,24,.35),0 6px 18px rgba(15,20,24,.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(15,20,24,.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:#21292D;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:#B02830!important;border-color:#B02830!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:#21292D}
.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(238,90,97,.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(15,20,24,.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 #E3E6E8!important;border-radius:4px!important;padding:10px;transition:border-color .13s;text-decoration:none!important;color:#21292D}
#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 #CDD3D6!important;border-radius:3px!important;
  background:#fff!important;background-image:none!important;color:#21292D;box-shadow:none!important;opacity:1}
.product-page .product-gallery .images-wrapper button.nav::before{border-color:#21292D!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:#CDD3D6!important}
.product-page .product-gallery .images-wrapper button.nav.disabled:hover::before{border-color:#21292D!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:#21292D}
.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 #21292D!important;border-bottom:2.5px solid #21292D!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:#21292D!important;border-bottom-color:#21292D!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(15,20,24,.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:#DCE2E5}
.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:#DCE2E5!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:#DCE2E5}
.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)}

/* category tiles: third-width variant — Rate row = 4 small tiles (span 3) */
.cpp-aisle--third{grid-column:span 3}
@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(15,20,24,.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 #CDD3D6!important;border-radius:3px!important;
  background:#fff!important;background-image:none!important;box-shadow:none!important;
  color:#21292D!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:#CDD3D6!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(15,20,24,.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:#F4F6F7;border:1px solid #C7CFD4;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:#F4F6F7;border:1px solid #C7CFD4;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 #C7CFD4;border-radius:8px;margin:0 0 14px;
    background:linear-gradient(180deg,#FBF7F8,#F4F6F7)}
  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 #C7CFD4;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)}
}


/* ============================================================
   RATE RETAIL OVERRIDES — applied last, wins the cascade.
   Pills, sentence case, soft radii, and the red arrow motif
   replacing every leftover DLZ corner-bracket mark.
   ============================================================ */
/* red arrow marks (echo the logo's down arrow) */
.cpp-utility-brand .sl,.cpp-foot-col h5 .tick{width:0;height:0;border-left:4px solid transparent!important;border-right:4px solid transparent!important;border-top:7px solid var(--cpp-red)!important;border-bottom:0!important;margin-bottom:0!important}
.cpp-lanes-note::before{width:0;height:0;border-left:4px solid transparent!important;border-right:4px solid transparent!important;border-top:7px solid var(--cpp-glow)!important;border-bottom:0!important;margin-bottom:0!important}
/* lanes band: retire the construction lift-pattern corners */
.cpp-lanes-band::before,.cpp-lanes-band::after{display:none}
/* steps: red numbered coins instead of corner brackets */
.cpp-step{border-radius:var(--cpp-r-m)}
.cpp-step .sn{border:0;width:36px;height:36px;border-radius:999px;background:var(--cpp-red);color:#fff;font-size:14px;font-weight:700;letter-spacing:0;display:inline-grid;place-items:center}
.cpp-step .sarrow{color:var(--cpp-glow)}
/* pills + sentence case on every CTA */
.product-page input.add-to-cart{border-radius:999px!important;text-transform:none!important;letter-spacing:.02em!important;font-size:15px!important;font-weight:700!important;padding:16px 32px!important}
#edit_website_product input[type="submit"],#edit_website_product button[type="submit"]{border-radius:999px;text-transform:none;letter-spacing:.02em;font-weight:700;font-size:14px}
.sign-in input[type="submit"],.sign-in button[type="submit"]{border-radius:999px;text-transform:none;letter-spacing:.02em;font-weight:700}
.cpp-hero-ctas .cb{border-radius:999px;text-transform:none;letter-spacing:.02em;font-size:13.5px;font-weight:600}
.cpp-flyout{border-radius:var(--cpp-r-m)}
.cpp-flyout .fbtns a{border-radius:999px;text-transform:none;letter-spacing:.03em;font-weight:700;font-size:13px}
.cpp-startwrap{border-radius:999px}
.cpp-startwrap input[type=submit],.cpp-startwrap button[type=submit],.cpp-startwrap .btn{border-radius:999px;text-transform:none;letter-spacing:.02em;font-size:14.5px}
.pagination .page-link{border-radius:10px}
.cpp-p14-qty,.cpp-flyout .fqty{border-radius:999px}
.cpp-p14-chip{border-radius:12px}
.cpp-p14-note{border-radius:var(--cpp-r-m)}
.cpp-p14-tiers{border-radius:14px;border-color:var(--cpp-ink)}
.product-thumbnail{border-radius:16px}
/* mega panel: red top edge, softer corners */
@media (min-width:992px){.cpp-mega{border-top-color:var(--cpp-red);border-radius:0 0 18px 18px}}
/* nav hover: red underline sweep */
@media (min-width:992px){
  .cpp-navrow ul.header-links > li > a{position:relative}
  .cpp-navrow ul.header-links > li > a::after{content:"";position:absolute;left:14px;right:14px;bottom:9px;height:2.5px;border-radius:2px;background:var(--cpp-red);transform:scaleX(0);transform-origin:left;transition:transform .16s ease}
  .cpp-navrow ul.header-links > li:hover > a::after,.cpp-navrow ul.header-links > li.cpp-mega-show > a::after{transform:scaleX(1)}
}
/* their dashboard hero: subtle red active dot */
.cpp-hero .carousel-indicators button.active{background:var(--cpp-red)}

/* ported DLZ functional fix: disabled selects stay readable (native bootstrap dims them) */
select:disabled{opacity:1}


/* mobile drawer: sentence case for Rate (drawer links were DLZ uppercase) */
.mobile-slider li > a,.mobile-slider .links > li > a,.mobile-slider .cpp-drawer-link{text-transform:none!important;letter-spacing:.01em!important}

/* ============================================================
   RATE v1.2 — "FRESH PASS" (Austin punch list, 2026-07-28 PM)
   Goal: stop looking like a reskinned DLZ. New card language, new
   PDP, light page headers, hero rail, product shelves. This layer
   loads last and wins the cascade.
   ============================================================ */

/* ---------- PRODUCT CARDS: Rate's own card ----------
   No gray frame, NO diagonal slashes, NO blend mode (white products
   stay fully opaque — the multiply blend was hollowing them out).
   Clean white gallery card: art breathes on white, quiet meta row,
   price anchored, availability as a dot-chip IN the body. */
.product-thumbnail{border:1px solid #EDF0F2;border-radius:20px;background:#fff;overflow:hidden}
.product-thumbnail:hover{box-shadow:0 18px 44px rgba(15,20,24,.10);transform:translateY(-2px);border-color:#E0E5E8}
.product-thumbnail .thumbnail-img-container{background:#fff!important;height:250px!important;min-height:0!important;max-height:250px!important;padding:24px 22px 8px;border-bottom:0!important}
.product-thumbnail .thumbnail-img-container img{mix-blend-mode:normal!important}
.product-thumbnail .thumbnail-description-container{padding:8px 20px 18px!important}
.product-thumbnail .card-title{font-size:14px;min-height:38px}
/* availability dot-chips (cards, cart lines, shelves) */
.cpp-avail{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;line-height:1;margin:0 0 6px}
.cpp-avail i{width:7px;height:7px;border-radius:50%;flex:none}
.cpp-avail--mto{color:var(--cpp-red)}.cpp-avail--mto i{background:var(--cpp-red)}
.cpp-avail--ready{color:#1F7A54}.cpp-avail--ready i{background:#1F7A54}
.cpp-avail--preorder{color:var(--cpp-ink)}.cpp-avail--preorder i{background:var(--cpp-ink)}
.sku-ribbon{display:none!important}
/* sku line: quieter, below the chip */
.cpp-sku{font-size:9px;color:#C2CAD0;margin:0 0 4px}
/* quick view: small floating pill, not the DLZ slide-up bar */
.cpp-qv{left:50%!important;right:auto!important;bottom:10px!important;transform:translateX(-50%) translateY(8px);width:auto;background:#fff!important;color:var(--cpp-ink)!important;border:1px solid var(--cpp-line);border-radius:999px!important;padding:9px 16px!important;font-size:11px!important;font-weight:700!important;letter-spacing:.02em!important;text-transform:none!important;box-shadow:0 10px 24px rgba(15,20,24,.16)!important;opacity:0;transition:opacity .16s,transform .16s}
.product-thumbnail:hover .cpp-qv{opacity:1;transform:translateX(-50%) translateY(0);bottom:10px!important}

/* ---------- PAGE HEADERS: light, editorial (was the DLZ dark band) ---------- */
.cpp-pstrip,body.cpp-cart .cpp-pstrip{background:#fff!important;color:var(--cpp-ink)!important;padding:26px 0 4px!important;border-bottom:0}
.cpp-pstrip h1,body.cpp-cart .cpp-pstrip h1{color:var(--cpp-ink)!important}
.cpp-pstrip .cpp-crumbs a,body.cpp-cart .cpp-pstrip .crumbs a{color:#8A959C!important;text-decoration:none}
.cpp-pstrip .cpp-crumbs .cur,body.cpp-cart .cpp-pstrip .crumbs .cur{color:var(--cpp-ink)!important}
.cpp-pstrip .cpp-crumbs .sep{color:#C8CFD4}
.cpp-ghostplate{border-color:var(--cpp-line)!important;color:var(--cpp-gray)!important}
.cpp-lotcount{color:var(--cpp-gray)!important}
body.cpp-cart .cpp-pstrip .crumbs{color:#8A959C!important}
.cpp-units{border-color:var(--cpp-line);color:var(--cpp-gray)}

/* ---------- MEGA: consistent depth + bounded panel/preview ---------- */
.cpp-mega-cols{max-height:56vh;overflow:auto;padding-right:6px;overscroll-behavior:contain}
.cpp-mega-card{align-self:start;width:250px}
.cpp-mega-card img{height:130px}

/* ---------- HERO GRID: smaller carousel + promo rail (mock parity) ---------- */
.cpp-herogrid{max-width:1540px;margin:16px auto 0;padding:0 20px;display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:18px;align-items:stretch}
.cpp-herogrid .cpp-hero,.cpp-herogrid .homepage-carousel-container{max-width:none;margin:0;padding:0;min-width:0}
.cpp-herogrid #homepage-carousel{border-radius:var(--cpp-r-l);overflow:hidden;height:100%}
.cpp-herorail{display:grid;grid-template-rows:1fr 1fr;gap:18px;min-width:0}
.cpp-herotile{position:relative;display:flex;flex-direction:column;justify-content:center;gap:7px;border-radius:var(--cpp-r-l);padding:24px 26px;text-decoration:none!important;overflow:hidden;border:1px solid #EDF0F2;background:#fff;color:var(--cpp-ink);transition:box-shadow .16s,transform .16s;min-height:150px}
.cpp-herotile:hover{box-shadow:0 16px 38px rgba(15,20,24,.12);transform:translateY(-2px)}
.cpp-herotile--ink{background:var(--cpp-ink);border-color:var(--cpp-ink);color:#fff}
.cpp-herotile .ht-eyebrow{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cpp-red)}
.cpp-herotile--ink .ht-eyebrow{color:var(--cpp-glow)}
.cpp-herotile .ht-title{font-size:22px;font-weight:800;line-height:1.1;letter-spacing:-.01em}
.cpp-herotile .ht-text{font-size:12.5px;line-height:1.5;color:var(--cpp-gray);margin:0;max-width:66%}
.cpp-herotile--ink .ht-text{color:rgba(255,255,255,.72)}
.cpp-herotile .ht-cta{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--cpp-red);margin-top:4px}
.cpp-herotile--ink .ht-cta{color:var(--cpp-glow)}
.cpp-herotile .ht-cta svg{width:14px;height:14px;transition:transform .15s}
.cpp-herotile:hover .ht-cta svg{transform:translateX(3px)}
.cpp-herotile .ht-art{position:absolute;right:14px;bottom:10px;top:10px;width:38%;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cpp-herotile .ht-art img{max-width:100%;max-height:88%;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(15,20,24,.18))}
.cpp-herotile--ink .ht-art img{filter:drop-shadow(0 10px 18px rgba(0,0,0,.4))}
@media (max-width:1199.98px){.cpp-herogrid{grid-template-columns:minmax(0,1fr) 300px}.cpp-herotile .ht-title{font-size:19px}}
@media (max-width:991.98px){
  .cpp-herogrid{grid-template-columns:1fr;padding:0 12px}
  .cpp-herorail{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .cpp-herotile{min-height:132px}
}
@media (max-width:640px){.cpp-herorail{grid-template-columns:1fr}.cpp-herotile .ht-text{max-width:60%}}

/* ---------- HOME SHELVES (product rails) ---------- */
.cpp-rail{padding:34px 0 10px;display:none}
.cpp-rail--on{display:block}
.cpp-rail--red{background:#FBF2F2;box-shadow:0 0 0 100vmax #FBF2F2;clip-path:inset(0 -100vmax);padding:38px 0 26px}
.cpp-rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.cpp-rail .cpp-sec-title{margin:6px 0 0;font-size:clamp(21px,2.4vw,28px)}
.cpp-rail-nav{display:flex;align-items:center;gap:8px}
.cpp-rail-all{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cpp-ink);text-decoration:none!important;margin-right:8px}
.cpp-rail-all:hover{color:var(--cpp-red)}
.cpp-rail-all svg{width:14px;height:14px}
.cpp-rail-nav .rb{width:38px;height:38px;border-radius:999px;border:1.5px solid var(--cpp-line);background:#fff;color:var(--cpp-ink);display:grid;place-items:center;cursor:pointer;transition:all .13s;padding:0}
.cpp-rail-nav .rb:hover{background:var(--cpp-ink);border-color:var(--cpp-ink);color:#fff}
.cpp-rail-nav .rb svg{width:15px;height:15px}
.cpp-rail-row{display:grid;grid-auto-flow:column;grid-auto-columns:212px;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 16px;scrollbar-width:none;outline:none}
.cpp-rail-row::-webkit-scrollbar{display:none}
.cpp-rl{scroll-snap-align:start;display:flex;flex-direction:column;border:1px solid #EDF0F2;border-radius:16px;background:#fff;text-decoration:none!important;padding:16px 16px 15px;transition:box-shadow .15s,transform .15s}
.cpp-rl:hover{box-shadow:0 14px 32px rgba(15,20,24,.10);transform:translateY(-2px)}
.cpp-rl .rl-im{height:148px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.cpp-rl .rl-im img{max-width:100%;max-height:100%;object-fit:contain}
.cpp-rl .rl-n{font-size:12.5px;font-weight:700;color:var(--cpp-ink);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.cpp-rl .rl-p{font-size:13.5px;font-weight:800;color:var(--cpp-ink);margin-top:6px}
@media (max-width:640px){.cpp-rail-row{grid-auto-columns:170px}.cpp-rl .rl-im{height:120px}.cpp-rail-nav .rb{display:none}}

/* ---------- PDP: the Rate take (function untouched, new skin) ---------- */
.product-page .main-img-container{border:0!important;border-radius:26px;background:#fff!important;box-shadow:0 0 0 1px #EEF1F2}
.product-page .images-container li.image{border-radius:14px;border-color:#EDF0F2}
.product-page .images-container li.image:hover{border-color:#C4CCD1}
.product-page .images-container li.image.cpp-cur{border-color:var(--cpp-ink)}
.product-page .images-container li.image.cpp-cur::after{display:none}
.product-page .product-right-section{border:1px solid #EEF1F2;border-radius:26px;background:#fff;padding:26px 26px 30px;box-shadow:0 16px 40px rgba(15,20,24,.05)}
.cpp-pdp-skuplate{border:0;border-radius:0;margin:8px 0 2px}
.cpp-pdp-skuplate .k{background:transparent;color:#C2CAD0;padding:0 6px 0 0;font-size:9px}
.cpp-pdp-skuplate .v{padding:0;color:#8A959C;font-size:10.5px}
.cpp-p14-optlabel{text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:700;color:var(--cpp-ink)}
.cpp-p14-optlabel .sel{font-size:12px;color:var(--cpp-gray)}
.cpp-p14-chip{border-radius:999px;min-width:54px;height:46px}
.cpp-p14-chip.on{background:var(--cpp-ink);border-color:var(--cpp-ink)}
.cpp-p14-swatch.on .cs::after{border-color:var(--cpp-red)}
.cpp-p14-tiers{border:0!important;border-radius:0;overflow:visible;margin:20px 0 6px}
.cpp-p14-tiers-head{background:none;color:var(--cpp-ink);padding:0 0 10px;text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:700;justify-content:flex-start;gap:8px}
.cpp-p14-tiers-head b{color:var(--cpp-gray);font-weight:500;font-size:12px}
.cpp-p14-tiers-grid{gap:8px}
.cpp-p14-tier{border:1.5px solid #E8ECEF!important;border-radius:14px;background:#fff}
.cpp-p14-tier:hover{background:var(--cpp-fog)}
.cpp-p14-tier.on{background:var(--cpp-ink)!important;border-color:var(--cpp-ink)!important}
.cpp-p14-tier.on .ts{color:var(--cpp-glow)}
.cpp-p14-note{background:#fff;border:1px solid #EEF1F2;border-left:4px solid var(--cpp-red);border-radius:16px}
.cpp-p14-note--ready{border-left-color:#1F7A54}
.cpp-p14-note--preorder{border-left-color:var(--cpp-ink)}
.cpp-p14-note-head .pill{border-radius:999px;text-transform:none;letter-spacing:.02em;font-size:11px;padding:6px 12px}
.cpp-p14-note--ready .cpp-p14-note-head .pill{background:#1F7A54;color:#fff}
.cpp-p14-specs summary{font-size:14px;font-weight:700;color:var(--cpp-ink)}
.cpp-p14-spec .num{display:none}
/* notify-me-when-back-in-stock: proper pill + branded modal */
.product-page .js-out-of-stock-button{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--cpp-ink)!important;border-radius:999px!important;background:#fff!important;color:var(--cpp-ink)!important;font-size:13px!important;font-weight:700!important;padding:12px 22px!important;text-decoration:none!important;transition:all .14s;margin-top:6px}
.product-page .js-out-of-stock-button:hover{background:var(--cpp-ink)!important;color:#fff!important}
.product-page .js-out-of-stock-button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cpp-red);flex:none}
#modal-out-of-stock .modal-content{border:0;border-radius:24px;box-shadow:0 30px 80px rgba(15,20,24,.35);font-family:var(--cpp-font)}
#modal-out-of-stock .modal-header{border-bottom:0;padding:26px 28px 0}
#modal-out-of-stock .modal-title{font-size:20px;font-weight:800;color:var(--cpp-ink)}
#modal-out-of-stock .modal-body{padding:12px 28px 8px}
#modal-out-of-stock .modal-body p{font-size:13.5px;color:var(--cpp-gray);line-height:1.6}
#modal-out-of-stock .in-stock-notif-container{border:1.5px solid var(--cpp-line);border-radius:999px;overflow:hidden;flex-wrap:nowrap}
#modal-out-of-stock .in-stock-notif-container input{border:0!important;font-size:14px;padding:12px 20px;box-shadow:none!important}
#modal-out-of-stock .notify-me-btn{border:0!important;background:var(--cpp-ink)!important;color:#fff!important;font-weight:700;font-size:13px;padding:12px 22px;border-radius:0!important}
#modal-out-of-stock .notify-me-btn:hover{background:var(--cpp-teal-deep)!important}
#modal-out-of-stock .modal-footer{border-top:0;padding:0 28px 22px;justify-content:flex-start}
#modal-out-of-stock .modal-footer p{font-size:11px;color:var(--cpp-gray-2);margin:0}

/* ---------- their homepage Shipping-notice modal (custom HTML block) — reskinned ---------- */
.bs-modal__backdrop{background:rgba(15,20,24,.55)!important}
.bs-modal__dialog{max-width:660px!important;border-radius:24px!important;padding:40px 42px 28px!important;box-shadow:0 30px 80px rgba(15,20,24,.4)!important;font-family:var(--cpp-font);max-height:84vh;overflow:auto}
.bs-modal__title{font-size:23px!important;font-weight:800!important;color:var(--cpp-ink);letter-spacing:-.01em}
.bs-modal__content{font-size:13.5px!important;line-height:1.6!important;color:var(--cpp-gray)}
.bs-modal__content > p:first-child{max-width:460px;margin:6px auto 0!important}
.bs-modal__content ul{list-style:none!important;margin:20px 0 6px!important;padding:0!important;display:grid;gap:10px;text-align:left!important;width:100%}
.bs-modal__content ul li{border:1px solid #EEF1F2;border-radius:14px;padding:13px 16px 13px 46px;position:relative;font-size:13px;line-height:1.55;color:#39434B;background:#fff}
.bs-modal__content ul li::before{content:"";position:absolute;left:16px;top:13px;width:18px;height:18px;background-repeat:no-repeat;background-size:contain}
.bs-modal__content ul li:nth-child(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D13239' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.4l3.4 2'/%3E%3C/svg%3E")}
.bs-modal__content ul li:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D13239' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 6h13v11h-13zM14.5 10h4l3 3.5V17h-7'/%3E%3Ccircle cx='6' cy='18.6' r='1.9'/%3E%3Ccircle cx='17.5' cy='18.6' r='1.9'/%3E%3C/svg%3E")}
.bs-modal__content ul li:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D13239' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4.5 13.5h6L10 22l8.5-11.5h-6z'/%3E%3C/svg%3E")}
.bs-modal__content ul li:nth-child(4)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D13239' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E")}
.bs-modal__content ul li strong{color:var(--cpp-ink)}
.bs-modal .btn.primary{border-radius:999px!important;background:var(--cpp-ink)!important;border:0!important;color:#fff!important;font-weight:700!important;font-size:13.5px!important;padding:13px 30px!important;display:block;margin:2px auto 0}
.bs-modal .btn.primary:hover{background:var(--cpp-teal-deep)!important;filter:none!important}
.bs-modal__ack{justify-content:center;color:var(--cpp-gray);font-size:12px!important}
.bs-modal__close{top:14px!important;right:16px!important;width:34px;height:34px;border-radius:999px!important;background:var(--cpp-fog)!important;color:var(--cpp-ink);font-size:20px!important;display:grid;place-items:center}
.bs-modal__close:hover{background:var(--cpp-line)!important}

/* ---------- FAQ: page beautification + media (delivery map etc.) ---------- */
.cpp-faq-ain img{max-width:100%;height:auto;border-radius:16px;border:1px solid #EEF1F2;margin:12px 0;display:block;background:#fff;padding:8px}
.cpp-faq-ain table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #EEF1F2;border-radius:14px;overflow:hidden;font-size:13px;margin:12px 0}
.cpp-faq-ain table th{background:var(--cpp-fog);color:var(--cpp-ink);font-weight:700;text-align:left;padding:10px 14px}
.cpp-faq-ain table td{padding:9px 14px;border-top:1px solid #F1F4F5;color:#39434B}
.cpp-faq-item{border-radius:16px}
.cpp-faq-q .qn{border-radius:999px}

/* ---------- cart: mixed-bag banner + line chips + cost-center note ---------- */
.cpp-bagmix{border:1px solid #EEF1F2;border-left:4px solid var(--cpp-red);border-radius:16px;background:#fff;padding:16px 20px;margin:6px 0 18px}
.cpp-bagmix .bm-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cpp-bagmix .bm-head svg{width:20px;height:20px;stroke:var(--cpp-red);flex:none}
.cpp-bagmix .bm-head b{font-size:13.5px;font-weight:800;color:var(--cpp-ink)}
.cpp-bagmix .bm-lanes{display:flex;flex-direction:column;gap:7px}
.cpp-bagmix .bm-lane{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cpp-bagmix .bm-lane .cpp-avail{margin:0;min-width:118px}
.cpp-bagmix .bm-n{font-size:12.5px;color:var(--cpp-gray)}
.item-description .cpp-avail{display:inline-flex;margin:0 0 6px}
.cpp-ccnote{display:flex;align-items:center;gap:10px;border:1px solid #F3D9DA;background:#FBF2F2;border-radius:14px;padding:12px 16px;margin:0 0 12px;font-size:12.5px;color:#39434B;line-height:1.5}
.cpp-ccnote svg{width:18px;height:18px;stroke:var(--cpp-red);flex:none}
.cpp-ccnote b{color:var(--cpp-ink)}

/* ---------- category row: compact department cards ---------- */
.cpp-aisle--six{grid-column:span 2;min-height:148px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;padding:18px 18px 16px;border-radius:18px}
.cpp-aisle--six .aicon{position:static;transform:none;width:36px;height:36px;color:var(--cpp-ink);opacity:1}
.cpp-aisle--six .aicon::before{display:none}
.cpp-aisle--six .aicon svg{stroke-width:1.4}
.cpp-aisle--six .at{font-size:15px;margin-top:auto}
.cpp-aisle--six .aarrow{width:30px;height:30px;right:14px;bottom:14px}
.cpp-aisle--six .aarrow svg{width:13px;height:13px}
.cpp-aisle--six:hover .aicon{color:var(--cpp-red)}
@media (max-width:991.98px){.cpp-aisle--six{grid-column:span 4;min-height:130px}}
@media (max-width:640px){.cpp-aisle--six{grid-column:span 6;min-height:118px}}
#cpp-aisles{padding:44px 0 46px}

/* announcement links keep the soft red */
.cpp-announce .an-line b{color:#fff}

/* ============================================================
   RATE v1.3 — staging punch list #2 (2026-07-28 late)
   ============================================================ */

/* ---- cards: SKU hidden, discount as a proper sale treatment ---- */
.product-thumbnail .cpp-sku{display:none!important}
.product-thumbnail .discount-container{position:absolute;top:14px;right:14px;left:auto;bottom:auto;z-index:3;width:auto;height:auto;background:var(--cpp-red);color:#fff;font-size:11px;font-weight:800;letter-spacing:.02em;border-radius:999px;padding:6px 11px;line-height:1;box-shadow:0 6px 14px rgba(209,50,57,.28);transform:none;display:inline-flex;align-items:center}
.product-thumbnail p.card-text del{font-weight:500;color:#B7C0C6;margin-right:6px;font-size:13px}
.product-thumbnail p.card-text del ~ span{color:var(--cpp-red)}
/* shelf cards: sale price pair */
.cpp-rl .rl-p del{font-weight:500;color:#B7C0C6;font-size:12px;margin-right:5px}
.cpp-rl .rl-p .sale{color:var(--cpp-red);font-weight:800}

/* ---- PDP: "You save" as a quiet sale chip next to the price ---- */
.product-page .product-header .text-success{display:inline-flex!important;align-items:center;gap:6px;background:#FBF2F2;color:var(--cpp-red)!important;font-size:12.5px;font-weight:700;border-radius:999px;padding:7px 14px;margin-left:10px;vertical-align:middle;line-height:1}
.product-page .product-price del,.product-page .product-header del{color:#B7C0C6;font-weight:500}

/* ---- hero: fixed-aspect stage (no more slide-height jump) ---- */
.cpp-herogrid #homepage-carousel{height:auto}
.cpp-herogrid .carousel-inner{aspect-ratio:var(--cpp-hero-ar,2.35);border-radius:var(--cpp-r-l);overflow:hidden}
.cpp-herogrid .carousel-item{height:100%}
.cpp-herogrid .carousel-item img{width:100%;height:100%;object-fit:cover;object-position:center}
.cpp-herogrid .carousel-item a{display:block;height:100%}
/* hero tiles: real 2-col layout — text column + contained art column (no overlap) */
.cpp-herotile{display:grid;grid-template-columns:minmax(0,1fr) 104px;grid-auto-rows:min-content;align-content:center;column-gap:14px;padding:22px 22px 22px 26px}
.cpp-herotile .ht-eyebrow,.cpp-herotile .ht-title,.cpp-herotile .ht-text,.cpp-herotile .ht-cta{grid-column:1}
.cpp-herotile .ht-text{max-width:none;margin:2px 0}
.cpp-herotile .ht-art{position:static;grid-column:2;grid-row:1 / span 4;width:auto;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cpp-herotile .ht-art img{max-width:100%;max-height:118px;object-fit:contain;transition:opacity .24s ease;filter:drop-shadow(0 8px 14px rgba(15,20,24,.16))}
.cpp-herotile .ht-art img.swap{opacity:0}
.cpp-herotile--ink .ht-art img{filter:drop-shadow(0 8px 14px rgba(0,0,0,.4))}
/* on the ink tile, product photos are white-bg squares — give them a soft plate */
.cpp-herotile--ink .ht-art img{background:#fff;border-radius:14px;padding:6px}
.cpp-herotile--light .ht-art img,.cpp-herotile .ht-art img{background:#fff;border-radius:14px;padding:6px}
@media (max-width:640px){.cpp-herotile{grid-template-columns:minmax(0,1fr) 84px}.cpp-herotile .ht-art img{max-height:92px}}

/* ---- collections showcase ---- */
.cpp-collx{padding:36px 0 8px;display:none}
.cpp-collx.on{display:block}
.cpp-collx-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;grid-auto-rows:200px}
.cpp-coll{grid-column:span 3;grid-row:span 1;position:relative;display:flex;flex-direction:column;border:1px solid #EDF0F2;border-radius:20px;background:#fff;overflow:hidden;text-decoration:none!important;transition:box-shadow .16s,transform .16s}
.cpp-coll:hover{box-shadow:0 18px 42px rgba(15,20,24,.11);transform:translateY(-2px)}
.cpp-coll--hero{grid-column:span 6;grid-row:span 2}
.cpp-coll .cl-im{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:16px 16px 6px}
.cpp-coll .cl-im img{max-width:100%;max-height:100%;object-fit:contain;transition:opacity .24s ease}
.cpp-coll .cl-im img.swap{opacity:0}
/* v3.3 image logic: lifestyle shots (same detector as product cards) go
   FULL-BLEED in the frame; studio shots keep the contained white plate */
.cpp-coll .cl-im.cl-cover{padding:0;overflow:hidden}
.cpp-coll .cl-im.cl-cover img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.cpp-coll .cl-th.cl-cover{padding:0;overflow:hidden}
.cpp-coll .cl-th.cl-cover img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.cpp-coll .cl-meta{padding:0 18px 14px}
.cpp-coll .cl-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cpp-coll .cl-top b{font-size:15px;font-weight:800;color:var(--cpp-ink);line-height:1.2}
.cpp-coll--hero .cl-top b{font-size:21px}
.cpp-coll .cl-ct{font-size:11px;font-weight:600;color:var(--cpp-gray-2)}
.cpp-coll .cl-go{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--cpp-red);margin-top:5px}
.cpp-coll .cl-go svg{width:13px;height:13px;transition:transform .14s}
.cpp-coll:hover .cl-go svg{transform:translateX(3px)}
.cpp-coll--hero .cl-meta{padding:0 22px 18px}
@media (max-width:991.98px){
  .cpp-collx-grid{grid-auto-rows:170px}
  .cpp-coll{grid-column:span 6}
  .cpp-coll--hero{grid-column:span 12;grid-row:span 2}
}
@media (max-width:640px){.cpp-collx-grid{grid-auto-rows:150px}.cpp-coll{grid-column:span 6}}

/* ---- category row: descriptors visible again (icons alone read confusing) ---- */
.cpp-aisle--six .as{display:block;font-size:11px;color:var(--cpp-gray);margin-top:2px}
.cpp-aisle--six .at{margin-top:auto;line-height:1.15}
.cpp-aisle--six{gap:10px;min-height:158px}

/* ---- payment page: labeled cost-center field, calm errors, pill Apply ---- */
body.cpp-co .cpp-cclabel{display:flex;align-items:baseline;gap:6px;font-size:12.5px;margin:14px 0 7px}
body.cpp-co .cpp-cclabel b{font-weight:800;color:var(--ink);letter-spacing:.02em}
body.cpp-co .cpp-cclabel span{color:var(--gray);font-size:11.5px}
body.cpp-co .cpp-ccfield{min-height:52px}
body.cpp-co .cpp-ccfield--need{border-color:var(--red)!important;box-shadow:0 0 0 3px rgba(209,50,57,.10)!important}
body.cpp-co .content-item.payment .error,
body.cpp-co .billing-method-container .error,
body.cpp-co .invalid-feedback{display:block;color:var(--red);font-size:12px;font-weight:600;margin:6px 0 0;letter-spacing:.01em}
body.cpp-co .billing-method-container .btn,
body.cpp-co .billing-method-container input[type=submit]{border-radius:999px!important}
body.cpp-co .balance-info{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;background:var(--fog);padding:9px 16px;font-size:11px!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}

/* ---- FAQ: the transit map (and any answer imagery) presented as a clean figure ---- */
.cpp-faq-ain img{padding:0;border:1px solid #EEF1F2;border-radius:18px}

/* ============================================================
   RATE v1.4 — staging punch list #3 (2026-07-28 night)
   ============================================================ */

/* ---- cards: the floating -NN% pill goes; the price pair carries the sale ---- */
.product-thumbnail .discount-container{display:none!important}

/* ---- hero: never crop their art (contain on a quiet stage), no arrows, tiny dots ---- */
.cpp-herogrid .carousel-inner{background:#F5F6F7}
.cpp-herogrid .carousel-item img{object-fit:contain;object-position:center}
.cpp-hero .carousel-control-prev,.cpp-hero .carousel-control-next{display:none!important}
.cpp-hero .carousel-indicators{margin-bottom:12px;gap:2px}
.cpp-hero .carousel-indicators button{width:7px;height:7px;border-radius:50%;background:rgba(15,20,24,.28);border:0;opacity:1;margin:0 4px;transition:background .15s,transform .15s}
.cpp-hero .carousel-indicators button.active{background:var(--cpp-red);transform:scale(1.25)}

/* ---- homepage rhythm: alternating full-bleed fog bands ---- */
.cpp-rail--band{background:var(--cpp-fog);box-shadow:0 0 0 100vmax var(--cpp-fog);clip-path:inset(0 -100vmax);padding:38px 0 30px}
.cpp-rail--band .cpp-rl,.cpp-rail--band .cpp-rail-nav .rb{border-color:#E6EAEC}

/* ---- logos: the client's own art on white plates (never rework a logo) ---- */
.cpp-drawer-top .dlg-plate{display:inline-flex;align-items:center;background:#fff;border-radius:12px;padding:8px 14px}
.cpp-drawer-top .dlg{max-height:38px;width:auto;display:block}
.cpp-foot-plate{display:inline-flex;align-items:center;background:#fff;border-radius:14px;padding:10px 16px}

/* ---- collections v2: hero tile = big photo + thumb strip ---- */
.cpp-collx-grid{grid-auto-rows:210px}
.cpp-coll--hero{grid-row:span 2;display:grid;grid-template-rows:minmax(0,1fr) 74px auto}
.cpp-coll--hero .cl-im--main{padding:22px 22px 8px}
.cpp-coll--hero .cl-im--main img{max-height:100%;max-width:88%}
.cpp-coll .cl-thumbs{display:flex;gap:10px;padding:0 22px}
.cpp-coll .cl-th{flex:1;height:64px;border:1px solid #EEF1F2;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:6px;background:#fff}
.cpp-coll .cl-th img{max-width:100%;max-height:100%;object-fit:contain}
.cpp-coll--hero .cl-meta{padding:10px 22px 16px}
/* ---- v3.3: collections phone sizing. NOTE (landmine): this v1.4 block sits
   AFTER the older 991/640 media queries in source order at equal specificity,
   so those row-height rules were dead — every viewport got 210px rows. The
   responsive sizes are restated HERE, after the block, so they actually win. */
@media (max-width:991.98px){
  .cpp-collx-grid{grid-auto-rows:170px}
}
@media (max-width:640px){
  .cpp-collx-grid{grid-auto-rows:150px}
  .cpp-coll--hero{grid-template-rows:minmax(0,1fr) 56px auto}
  .cpp-coll--hero .cl-im--main{padding:14px 14px 6px}
  .cpp-coll .cl-thumbs{gap:8px;padding:0 14px}
  .cpp-coll .cl-th{height:48px;border-radius:10px}
  .cpp-coll--hero .cl-meta{padding:8px 14px 14px}
}

/* ---- PDP: personalization fields as a proper form card ---- */
.product-page .product-personalization{border:1px solid #EEF1F2;border-radius:16px;padding:16px 18px 14px;margin-bottom:14px;background:#fff}
.product-page .product-personalization h5{font-size:13.5px;font-weight:800;color:var(--cpp-ink);margin:0 0 10px}
.product-page .product-personalization label{font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--cpp-ink)}
.product-page .pp-input{border:1.5px solid var(--cpp-line)!important;border-radius:12px!important;min-height:46px;font-size:14px;padding:10px 14px}
.product-page .pp-input:focus{border-color:var(--cpp-ink)!important;box-shadow:0 0 0 3px rgba(33,41,45,.08)}
.product-page .pp-input::placeholder{color:#B7C0C6;font-style:normal}
.cpp-ppcount{display:block;text-align:right;font-size:10.5px;font-weight:600;color:var(--cpp-gray-2);margin-top:4px}
.cpp-ppcount.warn{color:var(--cpp-red)}
.product-page .personalization-groups label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cpp-gray)}
.product-page .personalization-groups select{border:1.5px solid var(--cpp-line);border-radius:12px;min-height:44px}
.product-page .product-personalization .error{display:block;color:var(--cpp-red);font-size:12px;font-weight:600;margin-top:5px}

/* ---- PDP: custom artwork uploader as a proper dropzone card ---- */
.cpp-custom-art-inner{border:1.5px dashed #CBD3D8;border-radius:16px;padding:18px 20px;background:var(--cpp-fog);margin:12px 0}
.cpp-custom-art-inner .cpp-help-text{font-size:12.5px;color:var(--cpp-gray);margin:0 0 10px}
.cpp-custom-art-inner .cpp-filetypes{font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--cpp-gray-2)}
.cpp-custom-art-inner .btn.primary,.cpp-upload-btn,.cpp-view-btn,.cpp-remove-btn{border-radius:999px!important;text-transform:none!important;letter-spacing:.02em!important;font-weight:700!important;font-size:13px!important}
.cpp-upload-btn{background:var(--cpp-ink)!important;border-color:var(--cpp-ink)!important;color:#fff!important}
.cpp-view-btn{background:#fff!important;color:var(--cpp-ink)!important;border:1.5px solid var(--cpp-ink)!important}
.cpp-remove-btn{background:#fff!important;color:var(--cpp-red)!important;border:1.5px solid var(--cpp-red)!important}
.cpp-custom-art-inner .cpp-success-msg,.cpp-success-state{color:#1F7A54;font-weight:700;font-size:12.5px}
.cpp-custom-art-inner .cpp-error{color:var(--cpp-red);font-weight:600;font-size:12.5px}
.cpp-custom-art-inner .cpp-loading{color:var(--cpp-gray)}

/* ---- payment: cost-center block that explains itself ---- */
body.cpp-co .cpp-ccwrap{border:1.5px solid var(--line);border-radius:16px;padding:16px 18px 14px;background:#fff;margin-top:10px}
body.cpp-co .cpp-cclabel{display:flex;align-items:center;gap:10px;font-size:13px;margin:0 0 8px}
body.cpp-co .cpp-cclabel b{font-weight:800;color:var(--ink)}
body.cpp-co .cpp-cclabel .req{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:4px 9px;background:var(--fog);color:var(--gray);line-height:1}
body.cpp-co .cpp-cclabel .req.on{background:var(--red);color:#fff}
body.cpp-co .cpp-cchelp{font-size:12px;color:var(--gray);line-height:1.55;margin:8px 2px 0}

/* ============================================================
   RATE v1.5 — staging punch list #4 (2026-07-29)
   ============================================================ */

/* ---- SITE NOTIFICATIONS: branded toast cards ----
   Native markup: .notification-container > .toast.notif-success / .notif-error
   with .toast-header (title + .btn-close) and .toast-body (both .text-white).
   Reskin: white card, colored accent rail + icon, ink text, calm slide-in. */
.notification-container{z-index:2000!important}
.notification-container .toast{width:min(380px,92vw);background:#fff!important;border:1px solid #EDF0F2!important;border-radius:16px!important;box-shadow:0 20px 50px rgba(15,20,24,.18)!important;overflow:hidden;position:relative;padding:0 0 0 6px;animation:cppToastIn .32s cubic-bezier(.2,.8,.3,1);opacity:1!important}
.notification-container .toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px}
.notification-container .toast.notif-success::before{background:#1F7A54}
.notification-container .toast.notif-error::before{background:var(--cpp-red)}
.notification-container .toast.notif-warning::before,.notification-container .toast[class*="warn"]::before{background:#C88A2B}
.notification-container .toast-header{background:transparent!important;border-bottom:0!important;padding:13px 14px 2px 40px;position:relative}
.notification-container .toast-header strong{color:var(--cpp-ink)!important;font-size:13px;font-weight:800;letter-spacing:.01em}
.notification-container .toast-header::before{content:"";position:absolute;left:14px;top:12px;width:18px;height:18px;background-repeat:no-repeat;background-size:contain}
.notification-container .toast.notif-success .toast-header::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7A54' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.5l2.5 2.5 4.5-5'/%3E%3C/svg%3E")}
.notification-container .toast.notif-error .toast-header::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D13239' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16.5v.01'/%3E%3C/svg%3E")}
.notification-container .toast-body{color:#39434B!important;font-size:13px;line-height:1.55;padding:2px 16px 14px 40px}
.notification-container .toast-body a{color:var(--cpp-red);font-weight:700}
.notification-container .btn-close{filter:none!important;opacity:.45;background-size:11px;margin:2px 2px 0 0}
.notification-container .btn-close:hover{opacity:.9}
.notification-container .text-white{color:inherit!important}
@keyframes cppToastIn{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.notification-container .toast{animation:none}}

/* ---- HEADER: kill the white line (empty native top-notification strip) ----
   The dashboard setting renders an empty white bar above the dark cap; the
   engine's announcement bar owns this job now. */
.top-navbar-notification-container{display:none!important}

/* ---- HERO: ink tile hover was inheriting the global link-hover color ---- */
.cpp-herotile--ink:hover .ht-title,.cpp-herotile--ink .ht-title{color:#fff!important}
.cpp-herotile--ink:hover .ht-text,.cpp-herotile--ink .ht-text{color:rgba(255,255,255,.72)!important}
.cpp-herotile--ink:hover .ht-eyebrow,.cpp-herotile--ink:hover .ht-cta{color:var(--cpp-glow)!important}
.cpp-herotile--light .ht-title,.cpp-herotile--light:hover .ht-title{color:var(--cpp-ink)!important}
.cpp-herotile--light:hover .ht-eyebrow,.cpp-herotile--light:hover .ht-cta{color:var(--cpp-red)!important}
/* stage: with auto-measured aspect the art fills edge-to-edge; soften the frame */
.cpp-herogrid .carousel-inner{background:#F2F4F5;box-shadow:0 12px 34px rgba(15,20,24,.08)}
.cpp-herogrid #homepage-carousel{border-radius:var(--cpp-r-l)}

/* ---- FAQ: embedded transit-map figure + page polish ---- */
.cpp-faq-map{margin:0 0 24px;border:1px solid #EEF1F2;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(15,20,24,.05)}
.cpp-faq-map img{display:block;width:100%;height:auto;border:0;border-radius:0;margin:0;padding:0}
.cpp-faq-sechead h2{letter-spacing:-.01em}
.cpp-faq-item{background:#fff}

/* ============================================================
   RATE v1.6 — staging punch list #5 (2026-07-29)
   ============================================================ */
/* dead space between hero and Trending: compress the hand-off */
.homepage-carousel-container{margin-bottom:0!important}
.cpp-herogrid{margin-bottom:0}
.featured-products{padding-top:20px!important}
.cpp-feat-head{margin-top:0}
/* FAQ answers: neutralize the legacy rainbow inline colors */
.cpp-faq-ain [style*="color"]{color:#39434B!important}
.cpp-faq-ain strong,.cpp-faq-ain b{color:var(--cpp-ink)}

/* ==================================================================
   v2.0 (2026-07-29) — Austin's punch: tighter product cards + price bar
   ================================================================== */

/* tighter cards: price rides right under the title/swatches; the spare
   space (there to keep grid rows level) falls to the card BOTTOM instead
   of gaping above the price */
.product-thumbnail .thumbnail-description-container p.card-text{margin-top:2px!important;padding-top:6px}
/* the anchor must not stretch (it pushed the price to the card floor);
   the spacer lives on the CONTAINER so it works wherever the price node sits */
.product-thumbnail .thumbnail-description-container>a{flex:0 0 auto!important}
.product-thumbnail .thumbnail-description-container::after{content:"";flex:1 1 auto;min-height:0}
/* v2.1 (Austin): CONSISTENT anatomy on every card — chip / 2-line title slot /
   swatch strip (reserved on all cards so color options never shift the price) /
   price+MOQ line. Spare row-stretch space still falls to the card bottom. */
.cpp-swatchrow{min-height:24px!important;margin:2px 0 4px!important}
.product-thumbnail .thumbnail-description-container p.card-text{padding-top:4px}
/* MOQ chip rides the price line (was pinned to the card floor) */
.product-thumbnail .thumbnail-description-container p.card-text ~ p.card-text{position:static!important;text-align:right;margin:-19px 0 0!important;padding:0!important}

/* catalog price-range bar */
.cpp-pricebar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid var(--cpp-line);border-radius:12px;padding:12px 18px;margin:6px 0 18px}
.cpp-pricebar .pb-lab{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cpp-ink)}
.cpp-pricebar .pb-track{position:relative;flex:1 1 220px;max-width:340px;height:26px}
.cpp-pricebar .pb-track::before{content:"";position:absolute;left:0;right:0;top:11px;height:4px;border-radius:4px;background:var(--cpp-mist,#ECEEEF)}
.cpp-pricebar .pb-fill{position:absolute;top:11px;height:4px;border-radius:4px;background:var(--cpp-maroon,#D13239);left:0;right:0}
.cpp-pricebar input[type=range]{position:absolute;inset:0;width:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;height:26px}
.cpp-pricebar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:18px;height:18px;margin-top:4px;border-radius:50%;background:#fff;border:2px solid var(--cpp-maroon,#D13239);box-shadow:0 1px 4px rgba(15,20,24,.25);cursor:grab}
.cpp-pricebar input[type=range]::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--cpp-maroon,#D13239);box-shadow:0 1px 4px rgba(15,20,24,.25);cursor:grab}
.cpp-pricebar input[type=range]::-webkit-slider-runnable-track{background:transparent}
.cpp-pricebar input[type=range]::-moz-range-track{background:transparent}
.cpp-pricebar .pb-read{font-size:13px;font-weight:700;color:var(--cpp-ink);min-width:96px;text-align:center;font-variant-numeric:tabular-nums}
.cpp-pricebar .pb-apply{background:var(--cpp-ink,#21292D);color:#fff;border:none;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;padding:9px 20px;cursor:pointer;transition:transform .12s}
.cpp-pricebar .pb-apply:hover{transform:translateY(-1px)}
.cpp-pricebar .pb-clear{background:none;border:1px solid var(--cpp-line);color:var(--cpp-gray,#5E6A72);border-radius:999px;font-size:11px;font-weight:700;padding:8px 16px;cursor:pointer}
.cpp-pricebar .pb-clear:hover{border-color:var(--cpp-ink);color:var(--cpp-ink)}
.cpp-pricebar .pb-note{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cpp-gray-2,#ABB4BA)}
@media(max-width:700px){.cpp-pricebar{gap:10px;padding:11px 14px}.cpp-pricebar .pb-track{flex:1 1 140px}}

/* v2.1: price slider — finger-friendly on touch (drag the thumbs without the
   page scroll stealing the gesture; bigger targets on coarse pointers) */
.cpp-pricebar input[type=range]{touch-action:none}
@media(pointer:coarse){
  .cpp-pricebar .pb-track{height:32px}
  .cpp-pricebar .pb-track::before,.cpp-pricebar .pb-fill{top:14px}
  .cpp-pricebar input[type=range]{height:32px}
  .cpp-pricebar input[type=range]::-webkit-slider-thumb{width:24px;height:24px;margin-top:2px}
  .cpp-pricebar input[type=range]::-moz-range-thumb{width:24px;height:24px}
}

/* v2.3: price bar typed min/max boxes + deterministic results grid */
.cpp-pricebar .pb-vals{display:inline-flex;align-items:center;gap:6px}
.cpp-pricebar .pb-vals i{font-style:normal;color:var(--cpp-gray-2,#ABB4BA)}
.cpp-pricebar .pb-cur{font-size:12px;font-weight:700;color:var(--cpp-gray,#5E6A72);margin-right:-3px}
.cpp-pricebar input[type=number]{width:74px;height:38px;border:1.5px solid var(--cpp-line,#E3E6E8);border-radius:9px;padding:0 8px;font-size:13.5px;font-weight:700;color:var(--cpp-ink,#21292D);background:#fff;text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.cpp-pricebar input[type=number]::-webkit-outer-spin-button,.cpp-pricebar input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cpp-pricebar input[type=number]:focus{outline:none;border-color:var(--cpp-maroon,#D13239);box-shadow:0 0 0 3px rgba(209,50,57,.12)}

/* while a price filter is active WE own the grid — the native theme's
   late-running sizing scripts can't reflow it (3-then-4-across bug) */
.cpp-filtergrid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 18px;width:100%}
.cpp-filtergrid::before,.cpp-filtergrid::after{display:none!important}
.cpp-filtergrid>*{width:auto!important;max-width:none!important;min-width:0!important;margin:0!important;padding:0!important;flex:none!important;float:none!important}
.cpp-filtergrid .product-thumbnail{height:100%}
@media(max-width:1199.98px){.cpp-filtergrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:899.98px){.cpp-filtergrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:519.98px){.cpp-filtergrid{grid-template-columns:1fr}}

/* ==================================================================
   v2.4 (Austin) — price pixel-alignment + LIFESTYLE editorial cards
   ================================================================== */

/* price: identical slot on every card (strip is EXACTLY the same height
   filled or empty) + real breathing room under the price line */
/* v3.2 (Austin: "color previewer is getting cut off on the cards"): the
   fixed slot stays (price alignment) but grows 2px and the clip window is
   GONE — selection rings and hover scale paint outside the slot freely.
   nowrap + forced flex centering so no context can baseline-sink the dots. */
.cpp-swatchrow{display:flex!important;align-items:center!important;flex-wrap:nowrap;height:28px!important;min-height:28px!important;max-height:28px!important;overflow:visible!important;margin:2px 0 4px!important}
.cpp-swatchrow .cpp-swd{margin:0;flex:none}
.product-thumbnail .thumbnail-description-container{padding-bottom:24px!important}

/* lifestyle cards v2.5 (Austin's tuning round) — photo LOCKED to the frame:
   absolute-fill + center cover means it always fills completely (portrait,
   landscape, whatever — it zooms on center), corners clip to the card radius,
   NO gradient. Slow zoom on hover stays. */
.product-thumbnail.cpp-tile--life .thumbnail-img-container{padding:0!important;position:relative;overflow:hidden;border-radius:12px 12px 0 0;background:#E9EBEC}
.product-thumbnail.cpp-tile--life .thumbnail-img-container>a{position:absolute!important;inset:0!important;display:block!important;width:auto!important;height:auto!important;overflow:hidden}
.product-thumbnail.cpp-tile--life .thumbnail-img-container img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center 38%!important;mix-blend-mode:normal!important;transition:transform .7s cubic-bezier(.2,.6,.2,1);display:block}
.product-thumbnail.cpp-tile--life:hover .thumbnail-img-container img{transform:scale(1.05)}
.product-thumbnail.cpp-tile--life .thumbnail-img-container .corner{display:none}
/* v2.6: the photo must not slam into the chip/title — hairline seam on
   full-bleed cards, and the SAME 16px breathing room on EVERY card so the
   pixel-aligned prices stay pixel-aligned */
.product-thumbnail.cpp-tile--life .thumbnail-img-container{border-bottom:1px solid var(--cpp-line,#E3E6E8)!important}
.product-thumbnail .thumbnail-description-container{padding-top:16px!important}
@media(prefers-reduced-motion:reduce){
  .product-thumbnail.cpp-tile--life .thumbnail-img-container img{transition:none}
  .product-thumbnail.cpp-tile--life:hover .thumbnail-img-container img{transform:none}
}

/* v2.7 (Austin): lifestyle editorial treatment on the homepage "new" shelf
   cards — full-bleed photo bleeding through the card's top padding, heads-safe
   crop, hairline seam, slow hover zoom. Studio shots keep the padded plate. */
.cpp-rl.cpp-rl--life .rl-im{position:relative;height:164px;margin:-16px -16px 12px;border-radius:16px 16px 0 0;overflow:hidden;border-bottom:1px solid var(--cpp-line,#E3E6E8)}
.cpp-rl.cpp-rl--life .rl-im img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center 38%;transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.cpp-rl.cpp-rl--life:hover .rl-im img{transform:scale(1.05)}
@media(max-width:640px){.cpp-rl.cpp-rl--life .rl-im{height:136px;margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){
  .cpp-rl.cpp-rl--life .rl-im img{transition:none}
  .cpp-rl.cpp-rl--life:hover .rl-im img{transform:none}
}

/* v2.9: hero tile art — grid-stacked layers so images crossfade in place
   (no blink, no pop, no layout shift), soft fade-in on first load */
.cpp-herotile .ht-art{display:grid!important;place-items:center}
.cpp-herotile .ht-art img{grid-area:1/1;opacity:0;transition:opacity .9s ease}
.cpp-herotile .ht-art img.on{opacity:1}

/* ============================================================
   RATE v3.0 — staging punch list #6 (2026-08-05)
   ============================================================ */

/* ---- home shelves: card anatomy parity with the PLP cards ----
   The meta row now RESERVES its height on every card (chip or no chip), so
   the title and price sit at the same spot whether an item is Ready to ship,
   MTO, or Preorder. The green inventory chip renders via plateMode in JS. */
.cpp-rl .rl-meta{display:flex;align-items:center;min-height:22px}
.cpp-rl .rl-meta .cpp-avail{margin:0}

/* ---- hero → Trending hand-off: kill the remaining dead band ---- */
body.cpp-home .featured-products{padding-top:6px!important}
body.cpp-home .cpp-herogrid{margin-bottom:0}
body.cpp-home .homepage-carousel-container{margin-bottom:0!important}

/* ---- mobile search flyout: branded top sheet ----
   (native #search-modal was a bare modal-sm with a naked input) */
#search-modal .modal-dialog{max-width:none;margin:0;padding:12px 12px 0;width:100%}
#search-modal .modal-content{border:0;border-radius:0 0 22px 22px;box-shadow:0 24px 60px rgba(15,20,24,.28);font-family:var(--cpp-font)}
#search-modal .modal-body{padding:18px 18px 20px;text-align:left}
#search-modal .modal-body::before{content:"Search the store";display:block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--cpp-gray);margin:0 0 10px 4px}
#search-modal .input-group{flex-wrap:nowrap;align-items:stretch}
#search-modal .input-group input.popup-search{border:1.5px solid var(--cpp-line)!important;border-right:0!important;border-radius:999px 0 0 999px!important;background:var(--cpp-fog);height:50px;padding:0 20px;font-size:16px;color:var(--cpp-ink);box-shadow:none!important}
#search-modal .input-group input.popup-search:focus{border-color:var(--cpp-ink)!important;background:#fff}
#search-modal .input-group input.popup-search::placeholder{color:var(--cpp-gray-2);font-size:13.5px}
#search-modal .input-group .search-btn{border:0!important;border-radius:0 999px 999px 0!important;background:var(--cpp-red)!important;color:#fff!important;width:56px;height:50px;display:inline-flex;align-items:center;justify-content:center}
#search-modal .input-group .search-btn:hover{background:#B02830!important}
@media (min-width:768px){
  #search-modal .modal-dialog{max-width:560px;margin:10vh auto 0;padding:0}
  #search-modal .modal-content{border-radius:22px}
}

/* ---- homepage shipping popup: phone shoppers see the Got-it without
   digging (Austin: "not innate to scroll to bottom to mute").
   Covers BOTH generations of the custom-HTML block:
   · legacy .bs-modal block — the whole dialog scrolls, so the primary
     button now rides sticky at the dialog floor on a white plate;
   · v2/v3 #store-entry-notice block — body scrolls between a fixed head
     and a fixed foot; phones get tighter paddings + dvh sizing so the foot
     is ALWAYS on screen (dvh tracks the real visible viewport under the
     browser chrome, where vh lies). ---- */
@media (max-width:640px){
  .bs-modal__dialog{max-height:88dvh!important;margin:4dvh 12px 0!important;padding:26px 18px 14px!important;border-radius:20px!important}
  .bs-modal__title{font-size:19px!important}
  .bs-modal__content{font-size:12.5px!important}
  .bs-modal .btn.primary{position:sticky;bottom:0;width:100%;box-shadow:0 -14px 16px #fff,0 8px 18px rgba(15,20,24,.22)}
  #store-entry-notice .bs2-dialog{max-height:90dvh!important;margin:4dvh 12px 0!important}
  #store-entry-notice .bs2-head{padding:22px 18px 0!important}
  #store-entry-notice .bs2-head h1{font-size:19px}
  #store-entry-notice .bs2-sub{font-size:12px}
  #store-entry-notice .bs2-body{padding:14px 14px 4px!important}
  #store-entry-notice .bs2-row{padding:11px 13px;gap:11px;margin-bottom:8px}
  #store-entry-notice .bs2-row p{font-size:12.5px}
  #store-entry-notice .bs2-foot{padding:10px 14px 16px!important;box-shadow:0 -12px 18px rgba(255,255,255,.9)}
  #store-entry-notice .bs2-ok{padding:13px 26px;font-size:13.5px}
  #store-entry-notice .bs2-ack{margin-top:8px;font-size:11.5px}
}

/* ============================================================
   RATE v3.1 — staging punch list #7 (2026-08-05)
   ============================================================ */

/* ---- iOS paints untinted <button>s BLUE — pin explicit colors on every
   engine button the PDP shows (Austin: "product options text is blue and
   not the same on mobile", "+ and - buttons are blue") ---- */
.cpp-p14-chip,.cpp-p14-chip .sz{color:var(--cpp-ink)}
.cpp-p14-chip.on,.cpp-p14-chip.on .sz{color:#fff}
.cpp-p14-chip .up{color:var(--cpp-red)}
.cpp-p14-swatch{color:var(--cpp-gray)}
.cpp-p14-qty button{color:var(--cpp-ink);-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.cpp-p14-chips button{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}

/* ---- multi-quantity grids still use jquery-ui spinners: de-blue them ---- */
.product-page .ui-spinner{border:1.5px solid var(--cpp-line)!important;border-radius:10px;background:#fff;box-shadow:none!important}
.product-page .ui-spinner .ui-spinner-button{background:#fff!important;border:0!important;color:var(--cpp-ink)!important;cursor:pointer}
.product-page .ui-spinner .ui-spinner-button:hover{background:var(--cpp-fog)!important}
.product-page .ui-spinner .ui-icon{filter:grayscale(1) brightness(.25)}

/* ---- "N in stock" readout: quiet green chip instead of bare text ---- */
.product-page .product-quantity #stock,.product-page span.stock{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#1F7A54;background:#EDF7F1;border:1px solid #CBE7D7;border-radius:999px;padding:6px 12px;margin:8px 0 0;line-height:1;width:fit-content}
.product-page .product-quantity #stock:empty,.product-page span.stock:empty{display:none;border:0;padding:0}
.product-page .product-quantity #stock::before,.product-page span.stock::before{content:"";width:7px;height:7px;border-radius:50%;background:#1F7A54;flex:none}

/* ---- takeover grid veil: no unfiltered flash, ever ---- */
.cpp-gridveil{opacity:.22;pointer-events:none;filter:saturate(.5);transition:opacity .18s}

/* ---- takeover pagination: Show more ---- */
#cpp-showmore{display:block;margin:26px auto 10px;border:1.5px solid var(--cpp-ink);background:#fff;color:var(--cpp-ink);font-weight:700;font-size:13px;border-radius:999px;padding:13px 32px;cursor:pointer;transition:all .13s;font-family:var(--cpp-font);-webkit-appearance:none;appearance:none}
#cpp-showmore:hover{background:var(--cpp-ink);color:#fff}

/* ---- popup: Got it + Mute for today side by side, always visible ---- */
.cpp-popbtnrow{display:flex;gap:10px;justify-content:center;align-items:stretch;position:sticky;bottom:0;background:#fff;padding:4px 0 0}
.cpp-popbtnrow .bs2-ok,.cpp-popbtnrow .btn.primary{margin:0!important;display:inline-flex!important;align-items:center;justify-content:center;width:auto!important;flex:1 1 auto;position:static!important;box-shadow:none!important}
.cpp-mutebtn{flex:0 0 auto;border:1.5px solid var(--cpp-line);background:#fff;color:var(--cpp-ink);font-weight:700;font-size:13px;border-radius:999px;padding:13px 22px;cursor:pointer;font-family:var(--cpp-font);transition:border-color .13s;-webkit-appearance:none;appearance:none}
.cpp-mutebtn:hover{border-color:var(--cpp-ink)}

/* ---- popup: harder phone compaction (Austin: "still too long") ----
   sub-copy hides on phones only; rows tighten; head/foot shrink. Desktop
   keeps the full copy. ---- */
@media (max-width:640px){
  .cpp-popbtnrow{gap:8px}
  .cpp-popbtnrow .bs2-ok,.cpp-popbtnrow .btn.primary{font-size:12.5px;padding:12px 14px!important}
  .cpp-mutebtn{font-size:12px;padding:12px 14px}
  #store-entry-notice .bs2-sub{display:none}
  #store-entry-notice .bs2-head{padding:18px 16px 0!important}
  #store-entry-notice .bs2-head h1{font-size:17px}
  #store-entry-notice .bs2-row{padding:9px 11px;gap:9px;margin-bottom:7px}
  #store-entry-notice .bs2-row p{font-size:12px;line-height:1.45}
  #store-entry-notice .bs2-row svg{width:17px;height:17px}
  #store-entry-notice .bs2-note{font-size:10.5px;margin-top:4px}
  #store-entry-notice .bs2-foot{padding:8px 12px 12px!important}
  .bs-modal__content > p:first-child{display:none}
}


/* ============================================================
   RATE v3.2 — round #8 (2026-08-05)
   ============================================================ */

/* ---- PDP stock readout, second pass (Austin: "out of stock and in stock
   information layout is bad" on mobile) ----
   In-stock stays the quiet green dot-chip but can never word-stack again
   (nowrap); out-of-stock flips the chip red (class set by the engine) and
   reads as a sentence. On phones the chip leaves the cramped qty row and
   takes its own full-width line under the stepper. */
.product-page .product-quantity #stock,.product-page span.stock{white-space:nowrap}
.product-page #stock.cpp-stock--out,.product-page span.stock.cpp-stock--out{color:#B02830;background:#FBF2F2;border-color:#F3D9DA;white-space:normal;text-transform:none;font-size:12px;font-weight:700;letter-spacing:0;line-height:1.4}
.product-page #stock.cpp-stock--out::before,.product-page span.stock.cpp-stock--out::before{background:#B02830}
@media (max-width:767.98px){
  .product-page .product-quantity{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px;row-gap:8px}
  .product-page .product-quantity label{flex:0 0 auto;margin:0}
  .product-page .product-quantity #quantity{flex:0 0 auto}
  .product-page .product-quantity #stock,.product-page .product-quantity span.stock{flex-basis:100%;margin:0;justify-content:flex-start;width:fit-content}
}