/* ============================================================
   CPP · GUARANTEED RATE AFFINITY — theme skin  v1.0 (2026-09-03)
   Engine CSS of the WESTconsin v1.4 → NIP v1.3 → Rate v3.4 lineage with the
   palette swept to GRA (ink #25282A · lapis #1C5D99 · Mulish + DM Serif
   Display · the A mark) and the GRA "OPEN HOUSE" block appended at the END
   of this file — read that block first; it re-declares every state it
   re-skins. ALL rules scoped under engine classes / ids (never a bare
   Bootstrap utility). Remove cpp_head-include to revert.
   ============================================================ */

:root{
  /* legacy token names kept so every engine rule keeps working —
     values are WESTconsin brand (westconsincu.org): ink=navy (text +
     primary action), carbon=navy chrome (dark cap/drawer), teal=primary
     action (navy), glow=light green accent for dark surfaces, amber=blue
     callout. --cpp-orange is the W-mark orange — use sparingly. */
  --cpp-ink:#25282A; --cpp-carbon:#25282A; --cpp-teal:#25282A;
  --cpp-teal-deep:#1C5D99; --cpp-glow:#6FB1E3; --cpp-amber:#1C5D99;
  --cpp-fog:#F5F7FA; --cpp-line:#E2E7EE; --cpp-gray:#5B6B7E; --cpp-gray-2:#A8B4C4;
  /* engine legacy names (Rate/DLZ heritage) */
  --cpp-maroon:#25282A; --cpp-legacy:#1A1C1E; --cpp-red:#1C5D99;
  --cpp-lake:#1C5D99; --cpp-ocean:#141617; --cpp-air:#E8F0F8; --cpp-green:#1C5D99; --cpp-lime:#6FB1E3; --cpp-orange:#C88A2B; --cpp-sky:#EEF3F9;
  --cpp-font:'Mulish',Helvetica,Arial,sans-serif;
  --cpp-r-s:10px; --cpp-r-m:14px; --cpp-r-l:20px;
  --cpp-shadow:0 10px 30px rgba(20,24,30,.08);
}

/* ---------- base type ---------- */
body{font-family:var(--cpp-font);color:#25282A}
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:#D9E1EA!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(20,24,30,.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(20,24,30,.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(20,24,30,.02) 14px 16px),linear-gradient(160deg,#F6F8FA,#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:#25282A;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:#D9E1EA;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:#F1F4F8!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:#F1F4F8}

/* ---------- 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)}
/* accent tick — small down triangle (engine heritage mark, now royal blue) */
.cpp-eyebrow::before{content:"";width:9px;height:14px;background:var(--cpp-amark) no-repeat center/contain}
.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(20,24,30,.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:8px;height:12px;background:var(--cpp-amark) no-repeat center/contain}
.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(20,24,30,.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:#25282A;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:#D9E1EA;white-space:nowrap;overflow:hidden}
.cpp-utility-brand .sl{width:8px;height:12px;flex:none;background:var(--cpp-amark) no-repeat center/contain;margin-bottom:-2px}
.cpp-utility-brand b{color:#fff;font-weight:700}
.cpp-utility-brand .dash,.cpp-utility-brand .tag{color:#B5C1CF}
@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:#D9E1EA!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(20,24,30,.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(20,24,30,.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:#F1F4F8}
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:#B5C1CF}
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:#25282A;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:#C0CAD6;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:#C0CAD6!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:#B5C1CF;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:#D9E1EA!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:#F1F4F8!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(20,24,30,.35);border-top:3px solid var(--cpp-teal);border-radius:0 0 14px 14px}
  li.cpp-has-mega.cpp-mega-show .cpp-mega{display:block}   /* v1.4: :focus-within dropped — a clicked trigger kept its panel open beside the next hover (keyboard users get focusin/focusout in JS) */
  .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:#25282A;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(20,24,30,.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(20,24,30,.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(20,24,30,.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:#1C5D99}
.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:#1C5D99}
.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%}
/* hero stage: without hero.branded, dashboard comps are framed — 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(20,24,30,.86) 0%,rgba(20,24,30,.55) 30%,rgba(20,24,30,.12) 55%,rgba(20,24,30,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(20,24,30,.45)}
.cpp-hero-h .row.accent{color:var(--cpp-glow)}
.cpp-hero-p{font-size:15px;line-height:1.65;color:#F1F4F8;max-width:400px;margin:18px 0 0;text-shadow:0 1px 12px rgba(20,24,30,.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:#B5C1CF;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 #E2E7EE;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:#25282A;background:rgba(255,255,255,.88);border:1px solid #E2E7EE;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:#25282A;background:rgba(255,255,255,.92);border:1.5px solid #25282A;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 #E2E7EE;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:#A8B4C4}
.product-page .images-container li.image.cpp-cur{border-color:#25282A}
.product-page .images-container li.image.cpp-cur::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#25282A}
.cpp-p14-thumbname{flex:none;font-size:8.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#5B6B7E;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:#25282A;font-weight:700}
.product-page .product-gallery .images-wrapper button.nav{width:42px!important;height:42px!important;min-width:42px;border:1.5px solid #C9D2DD!important;border-radius:50%!important;background:#fff!important;color:#25282A;box-shadow:0 2px 10px rgba(20,24,30,.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:#25282A!important}
.product-page .product-gallery .images-wrapper button.nav:hover{background:#25282A!important;border-color:#25282A!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:#C9D2DD!important}
.product-page .product-gallery .images-wrapper button.nav.disabled:hover::before{border-color:#25282A!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(20,24,30,.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(20,24,30,.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:#25282A;border-color:#25282A}
.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:#25282A;border-color:#25282A}
.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:#6FB1E3}

/* ---------- 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:#6FB1E3;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 #E2E7EE;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:#F5F7FA}
.cpp-p14-tier .tq{display:block;font-size:10px;color:#5B6B7E;letter-spacing:.08em}
.cpp-p14-tier .tp{display:block;font-size:16px;font-weight:600;margin-top:4px;color:#25282A}
.cpp-p14-tier .ts{display:block;font-size:8.5px;color:#25282A;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:#6FB1E3}

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

/* ---------- qty + buy ---------- */
.cpp-p14-qty{display:inline-flex;align-items:center;border:1.5px solid #25282A;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:#F5F7FA}
.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:#25282A!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:#1A1C1E!important;transform:translateY(-1px);box-shadow:0 10px 24px rgba(33,41,45,.45)}
.product-page .total-info{border-top:1px solid #E2E7EE;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:#25282A!important}
.product-page .product-quantity span.stock.text-danger{color:#1C5D99!important}
.cpp-p14-hidedesc{display:none!important}

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

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

/* ---------- spec accordion ---------- */
.cpp-p14-specs{margin-top:26px;border-top:2px solid #25282A}
.cpp-p14-spec{border-bottom:1px solid #E2E7EE}
.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:#25282A}
.cpp-p14-spec summary::-webkit-details-marker{display:none}
.cpp-p14-spec summary .num{font-size:10px;color:#25282A;font-weight:600;letter-spacing:.14em}
.cpp-p14-spec summary svg{width:14px;height:14px;stroke:#5B6B7E;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:#1C5D99;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 #E2E7EE}
  .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(20,24,30,.10),0 1px 3px rgba(20,24,30,.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(20,24,30,.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(20,24,30,.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:#B5C1CF;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;font-weight:500}
.cpp-crumbs a{color:#B5C1CF !important;text-decoration:none !important;transition:color .12s}
.cpp-crumbs a:hover{color:#6FB1E3 !important}
.cpp-crumbs .sep{color:#5B6B7E}
.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:#5B6B7E;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 #E2E7EE;border-radius:14px;padding:18px 22px 12px;
  box-shadow:0 1px 2px rgba(20,24,30,.06),0 2px 8px rgba(20,24,30,.05);grid-column:1;
}
.cpp-req-note{font-size:9px;color:#A8B4C4;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 #E2E7EE;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:#25282A}
.cpp-how h4 .tick{width:14px;height:3px;background:#25282A;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 #25282A;color:#25282A;display:grid;place-items:center;font-size:11px;font-weight:600;flex:none}
.cpp-how-step .ht{font-size:13px;font-weight:700;color:#25282A}
.cpp-how-step .hs{font-size:12px;color:#5B6B7E;margin-top:2px;line-height:1.55}
.cpp-how .cpp-rush{font-size:12.5px;color:#5B6B7E;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 #6FB1E3;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:#6FB1E3}
.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:#25282A}
.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:'Mulish',Helvetica,Arial,sans-serif;color:#25282A}
.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(20,24,30,.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:#6FB1E3}
.cpp-auth-eyebrow::before{content:"";width:9px;height:14px;background:var(--cpp-amark) no-repeat center/contain;margin-bottom:-2px;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:#6FB1E3}
.cpp-auth-inner p{color:#D8E0E9;font-size:14.5px;line-height:1.7;max-width:390px;margin:0}
.cpp-auth-side{background:#F5F7FA;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(20,24,30,.10),0 1px 3px rgba(20,24,30,.08);overflow:hidden}
.cpp-auth-tabs{display:flex;border-bottom:1px solid #E2E7EE}
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:#5B6B7E;position:relative;text-decoration:none!important;transition:color .15s}
a.cpp-auth-tab:hover{color:#25282A}
a.cpp-auth-tab.on{color:#25282A}
a.cpp-auth-tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#25282A}
.cpp-auth-body{padding:28px 32px 26px}
.cpp-auth-head{margin-bottom:20px}
.cpp-auth-head .cpp-auth-eyebrow{color:#25282A}
.cpp-auth-head h2{font-size:24px;font-weight:700;line-height:1.12;color:#25282A;margin:10px 0 6px;font-family:inherit}
.cpp-auth-head p{font-size:13px;color:#5B6B7E;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:#5B6B7E;margin:0 0 7px;font-family:inherit}
.cpp-auth-body form label .required-label{color:#A8B4C4;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:#5B6B7E!important}
.cpp-auth-body form .form-control{width:100%;height:48px;border:1.5px solid #E2E7EE;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:#25282A;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:#5B6B7E;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:#25282A!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:#1A1C1E!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:#25282A;text-decoration:none}
.cpp-auth-links a:hover{color:#25282A;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:#141617;fill:none;flex:none;margin-top:1px}
.cpp-auth-note p{font-size:12px;color:#25282A;line-height:1.6;margin:0}
.cpp-auth-note--warn{background:#F5F7FA;border-color:#E2E7EE;border-left:4px solid var(--cpp-red);margin:0 0 20px}
.cpp-auth-note--warn svg{stroke:#1C5D99}
.cpp-auth-note--warn p{color:#25282A}
.cpp-auth-foot{padding:16px 32px;background:#F5F7FA;border-top:1px solid #E2E7EE;font-size:12px;color:#5B6B7E;text-align:center}
.cpp-auth-foot a{color:#25282A;font-weight:700;text-decoration:none}
.cpp-auth-foot a:hover{color:#25282A;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:#5B6B7E!important;font-weight:500}
/* domain-guard alert (rendered by the liquid gate scripts) */
.cpp-mailguard{display:flex;gap:11px;background:#F5F7FA;border:1px solid #E2E7EE;border-left:4px solid var(--cpp-red);border-radius:4px;padding:12px 14px;margin-top:10px;font-family:'Mulish',Helvetica,Arial,sans-serif;text-align:left}
.cpp-mailguard svg{width:17px;height:17px;stroke:#1C5D99;fill:none;flex:none;margin-top:1px}
.cpp-mailguard p{font-size:12px;color:#25282A;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:#1C5D99!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:#A8B4C4!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:#A8B4C4!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 #E2E7EE;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:#5B6B7E;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:#25282A}
.cpp-auth--checkout .nav-tabs .nav-link.active{color:#25282A}
.cpp-auth--checkout .nav-tabs .nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#25282A}
.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:#25282A;text-decoration:none}
.cpp-auth--checkout .pt-3 a:hover{color:#25282A;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:#F5F7FA;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 #25282A;color:#25282A;display:grid;place-items:center;font-size:12px;font-weight:700}
.cpp-faq-sechead h2{font-size:17px;font-weight:700;color:#25282A;margin:0;line-height:1.2}
.cpp-faq-item{background:#fff;border:1px solid #E2E7EE;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:#25282A;box-shadow:0 6px 22px rgba(20,24,30,.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 #A8B4C4;color:#5B6B7E;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:#25282A;color:#25282A}
.cpp-faq-q .qt{flex:1;font-size:15px;font-weight:700;color:#25282A;line-height:1.35}
.cpp-faq-q .chev{width:20px;height:20px;flex:none;color:#5B6B7E;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:#25282A}
.cpp-faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
.cpp-faq-ain{padding:2px 18px 18px 58px;color:#1C5D99;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:#25282A;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:#6FB1E3;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:#25282A;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:#1A1C1E;color:#fff;text-decoration:none}
.cpp-faq-contact .fc-btn svg{width:15px;height:15px}
.cpp-faq-contact .fc-mail{font-size:11px;color:#5B6B7E;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:#25282A;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:#25282A;flex:none}
.cpp-faq-link:hover{color:#25282A;text-decoration:none}
.cpp-faq-rush{background:#fff;border:1px solid #E2E7EE;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:#25282A}
.cpp-faq-rush p{font-size:13px;line-height:1.65;color:#1C5D99;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 #1C5D99;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:Mulish,Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:.18em;color:#6FB1E3;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:Mulish,Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#5B6B7E;margin:0}
body.cpp-lot-built .products-result-verbiage b{color:#25282A;font-weight:700}
body.cpp-lot-built .sort span{font-family:Mulish,Arial,sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#5B6B7E;margin-right:4px}
body.cpp-lot-built select.sort-select{border:1.5px solid #E2E7EE;border-radius:8px;background-color:#fff;color:#25282A;font-family:Mulish,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:#25282A;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:#F5F7FA!important;background-image:none!important;border:1px solid #E2E7EE!important;color:#25282A!important;border-radius:20px;font-family:Mulish,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:#1C5D99!important;color:#1C5D99!important;background:#F5F7FA!important}
body.cpp-lot-built .category-page .d-lg-none .btn.secondary{background:#fff!important;background-image:none!important;border:1.5px solid #C9D2DD!important;color:#25282A!important;border-radius:8px;font-family:Mulish,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 #E2E7EE;border-radius:8px;background:#fff;color:#25282A;font-family:Mulish,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:#25282A;color:#25282A;background:#fff;text-decoration:none}
body.cpp-lot-built ul.pagination .page-item.active .page-link{background:#25282A;border-color:#25282A;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(20,24,30,.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(20,24,30,.35),0 6px 18px rgba(20,24,30,.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(20,24,30,.45);
}
.quick-actions-menu .dropdown-menu::before{
  content:"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:#25282A;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:#154A7A!important;border-color:#154A7A!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:#25282A}
.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(20,24,30,.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:8px;height:12px;background:var(--cpp-amark) no-repeat center/contain;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 #E2E7EE!important;border-radius:4px!important;padding:10px;transition:border-color .13s;text-decoration:none!important;color:#25282A}
#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 #C9D2DD!important;border-radius:3px!important;
  background:#fff!important;background-image:none!important;color:#25282A;box-shadow:none!important;opacity:1}
.product-page .product-gallery .images-wrapper button.nav::before{border-color:#25282A!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:#C9D2DD!important}
.product-page .product-gallery .images-wrapper button.nav.disabled:hover::before{border-color:#25282A!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:#25282A}
.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:8px;height:12px;background:var(--cpp-amark) no-repeat center/contain;margin-bottom:-2px;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 #25282A!important;border-bottom:2.5px solid #25282A!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:#25282A!important;border-bottom-color:#25282A!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(20,24,30,.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:#D8E0E9}
.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:#D8E0E9!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:#D8E0E9}
.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 — row of 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(20,24,30,.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 #C9D2DD!important;border-radius:3px!important;
  background:#fff!important;background-image:none!important;box-shadow:none!important;
  color:#25282A!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:#C9D2DD!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(20,24,30,.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:#F3F6F9;border:1px solid #C3CDD9;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:#F3F6F9;border:1px solid #C3CDD9;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 #C3CDD9;border-radius:8px;margin:0 0 14px;
    background:linear-gradient(180deg,#FBF7F8,#F3F6F9)}
  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 #C3CDD9;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)}
}


/* ============================================================
   CORPORATE 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:8px;height:12px;border:0!important;background:var(--cpp-amark) no-repeat center/contain!important;margin-bottom:-1px!important}
.cpp-lanes-note::before{width:8px;height:12px;border:0!important;background:var(--cpp-amark) no-repeat center/contain!important;margin-bottom:-1px!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 (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}

/* ============================================================
   engine 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: the engine 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 #EBF0F6;border-radius:20px;background:#fff;overflow:hidden}
.product-thumbnail:hover{box-shadow:0 18px 44px rgba(20,24,30,.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:#1C5D99}.cpp-avail--ready i{background:#1C5D99}
.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(20,24,30,.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:#8694A6!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:#8694A6!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}
/* v1.3: margin:0 MUST out-shout Bootstrap's .mx-auto (margin auto !important) on the
   stock wrapper — as a GRID ITEM, auto margins disable stretch and the branded stage
   shrink-wraps to the copy's width (~560px) at every viewport ("stuck in mobile").
   width:100% belts-and-suspenders the stretch. */
.cpp-herogrid .cpp-hero,.cpp-herogrid .homepage-carousel-container{max-width:none;margin:0!important;padding:0;min-width:0;width:100%}
.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 #EBF0F6;background:#fff;color:var(--cpp-ink);transition:box-shadow .16s,transform .16s;min-height:150px}
.cpp-herotile:hover{box-shadow:0 16px 38px rgba(20,24,30,.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(20,24,30,.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:#EEF3F9;box-shadow:0 0 0 100vmax #EEF3F9;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 #EBF0F6;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(20,24,30,.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 (function untouched, new skin) ---------- */
.product-page .main-img-container{border:0!important;border-radius:26px;background:#fff!important;box-shadow:0 0 0 1px #E8F0F8}
.product-page .images-container li.image{border-radius:14px;border-color:#EBF0F6}
.product-page .images-container li.image:hover{border-color:#C0CAD6}
.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 #E8F0F8;border-radius:26px;background:#fff;padding:26px 26px 30px;box-shadow:0 16px 40px rgba(20,24,30,.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:#8694A6;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 #E8F0F8;border-left:4px solid var(--cpp-red);border-radius:16px}
.cpp-p14-note--ready{border-left-color:#1C5D99}
.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:#1C5D99;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(20,24,30,.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(20,24,30,.55)!important}
.bs-modal__dialog{max-width:660px!important;border-radius:24px!important;padding:40px 42px 28px!important;box-shadow:0 30px 80px rgba(20,24,30,.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 #E8F0F8;border-radius:14px;padding:13px 16px 13px 46px;position:relative;font-size:13px;line-height:1.55;color:#1C5D99;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='%231C5D99' 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='%231C5D99' 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='%231C5D99' 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='%231C5D99' 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 #E8F0F8;margin:12px 0;display:block;background:#fff;padding:8px}
.cpp-faq-ain table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #E8F0F8;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:#1C5D99}
.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 #E8F0F8;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:#EEF3F9;border-radius:14px;padding:12px 16px;margin:0 0 12px;font-size:12.5px;color:#1C5D99;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}

/* ============================================================
   engine 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:#B3BECC;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:#B3BECC;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:#EEF3F9;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:#B3BECC;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(20,24,30,.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 #EBF0F6;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(20,24,30,.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 #E8F0F8;border-radius:18px}

/* ============================================================
   engine 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(20,24,30,.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 #E8F0F8;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 #E8F0F8;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:#B3BECC;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:#1C5D99;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}

/* ============================================================
   engine 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 #EBF0F6!important;border-radius:16px!important;box-shadow:0 20px 50px rgba(20,24,30,.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:#1C5D99}
.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='%231C5D99' 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='%231C5D99' 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:#1C5D99!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:#F1F4F8;box-shadow:0 12px 34px rgba(20,24,30,.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 #E8F0F8;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(20,24,30,.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}

/* ============================================================
   engine 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:#1C5D99!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,#EAEEF3)}
.cpp-pricebar .pb-fill{position:absolute;top:11px;height:4px;border-radius:4px;background:var(--cpp-maroon,#1C5D99);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,#1C5D99);box-shadow:0 1px 4px rgba(20,24,30,.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,#1C5D99);box-shadow:0 1px 4px rgba(20,24,30,.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,#25282A);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,#5B6B7E);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,#A8B4C4)}
@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,#A8B4C4)}
.cpp-pricebar .pb-cur{font-size:12px;font-weight:700;color:var(--cpp-gray,#5B6B7E);margin-right:-3px}
.cpp-pricebar input[type=number]{width:74px;height:38px;border:1.5px solid var(--cpp-line,#E2E7EE);border-radius:9px;padding:0 8px;font-size:13.5px;font-weight:700;color:var(--cpp-ink,#25282A);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,#1C5D99);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,#E2E7EE)!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,#E2E7EE)}
.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}

/* ============================================================
   engine 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(20,24,30,.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:#154A7A!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(20,24,30,.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}
}

/* ============================================================
   engine 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:#1C5D99;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:#1C5D99;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}
}


/* ============================================================
   engine 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:#154A7A;background:#EEF3F9;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:#154A7A}
@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}
}


/* ============================================================
   engine (WCU lineage) v1.0 — BRAND GEOMETRY (mirrors westconsincu.org)
   westconsincu.org speaks in ROUNDED forms — pill CTAs (30px), 15px
   card radii, sentence-case copy, Mulish. The engine heritage is
   already pill buttons, so this block only nudges what the NIP port
   had squared back to round and pins the WESTconsin card radius.
   ============================================================ */
:root{--cpp-r-s:10px;--cpp-r-m:15px;--cpp-r-l:22px}
.cpp-hero-ctas .cb{border-radius:999px;text-transform:none;letter-spacing:0;font-size:14px;font-weight:700}
.product-page input.add-to-cart{border-radius:999px!important;text-transform:none!important;letter-spacing:0!important;font-size:15px!important;font-weight:700!important}
#edit_website_product input[type="submit"],#edit_website_product button[type="submit"]{border-radius:999px;text-transform:none;letter-spacing:0;font-size:14px;font-weight:700}
.sign-in input[type="submit"],.sign-in button[type="submit"]{border-radius:999px;text-transform:none;letter-spacing:0;font-weight:700}
.cpp-flyout .fbtns a{border-radius:999px;text-transform:none;letter-spacing:0;font-size:13.5px;font-weight:700}
.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:0;font-size:14px;font-weight:700}
.cpp-p14-chip{border-radius:999px}
.cpp-p14-qty,.cpp-flyout .fqty{border-radius:10px}
.cpp-aislechip{border-radius:999px}
.product-page .js-out-of-stock-button{border-radius:999px!important}
.bs-modal .btn.primary{border-radius:999px!important;text-transform:none!important;letter-spacing:0!important;font-size:13.5px!important;font-weight:700!important}
.cpp-pricebar .pb-apply,.cpp-pricebar .pb-clear{border-radius:999px}
body.cpp-co .billing-method-container input[type=submit]{border-radius:999px!important}
.cpp-eyebrow{letter-spacing:.14em}


/* ============================================================
   NIP v1.1 — ROUND-2 FIXES (Austin punch list, 2026-08-14)
   ============================================================ */
/* mobile quick-actions bar: engine paints it navy, but the native rules fill
   the SVG icons with settings.qam_text_color (navy) — tone-on-tone. Icons +
   labels forced white (settings updated too; this is belt-and-braces). */
.quick-actions-menu a,.quick-actions-menu .btn{color:#FFFFFF!important}
.quick-actions-menu svg{fill:#FFFFFF!important;stroke:#FFFFFF!important}
.quick-actions-menu li>a:hover>svg,.quick-actions-menu a:hover svg{fill:#6FB1E3!important;stroke:#6FB1E3!important}
.quick-actions-menu .dropdown-toggle::after{color:#FFFFFF}
/* PDP: retire the native "View Logos" chip over the gallery — the Product
   Options logo picker carries the logos; the chip read as clutter. */
.product-page .view-logo-label{display:none!important}
/* product cards: NIP photography is studio art — no lifestyle cover treatment
   (JS classifier off via tiles.lifestyle:false) and NO hover zoom. */
.product-thumbnail:hover .thumbnail-img-container img{transform:none!important}
/* footer logo: NIP's footer art is WHITE — bare mode (no white plate). */
.cpp-foot .cpp-foot-plate--bare{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
/* (prehero rules moved to the v1.2 branded-hero block below) */


/* ============================================================
   NIP v1.2 — BRANDED HERO, CONTENT-DRIVEN (round 3)
   The v1.0 stage sized itself from a fixed aspect-ratio while the
   copy sat in an ABSOLUTE overlay — at mid widths the copy clipped
   or spilled out of the navy field and the resize behavior read as
   "moving strangely". Now the copy is IN-FLOW and OWNS the height;
   the navy field + bokeh + arc paint on the HOST; the native
   carousel is display:none in branded mode (it no longer provides
   height). html.cpp-prehero (set in the head) pre-paints the same
   field before the deferred engine boots, so there is no flash and
   no size jump.
   ============================================================ */
.cpp-hero--branded{position:relative;border-radius:var(--cpp-r-l);overflow:hidden;min-height:clamp(300px,30vw,440px);display:flex;align-items:center;background:radial-gradient(560px 300px at 86% 18%, rgba(79,118,225,.34), transparent 65%),
    radial-gradient(420px 260px at 70% 88%, rgba(24,200,232,.16), transparent 62%),
    radial-gradient(circle 5px at 63% 24%, rgba(24,200,232,.5) 0 5px, transparent 6px),
    radial-gradient(circle 3px at 71% 62%, rgba(255,255,255,.28) 0 3px, transparent 4px),
    radial-gradient(circle 7px at 82% 74%, rgba(79,118,225,.42) 0 7px, transparent 8px),
    radial-gradient(circle 2.5px at 56% 78%, rgba(24,200,232,.4) 0 2.5px, transparent 3.5px),
    radial-gradient(circle 4px at 90% 44%, rgba(255,255,255,.2) 0 4px, transparent 5px),
    radial-gradient(circle 3px at 48% 40%, rgba(79,118,225,.35) 0 3px, transparent 4px),
    linear-gradient(118deg,#141617 0%,#13294A 46%,#25282A 100%)}
.cpp-hero--branded::after{content:"";position:absolute;right:-90px;top:50%;transform:translateY(-50%);width:min(46vw,430px);aspect-ratio:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Ccircle cx='210' cy='210' r='152' stroke='%231C5D99' stroke-width='26' stroke-dasharray='64 46' opacity='.55'/%3E%3Ccircle cx='210' cy='210' r='152' stroke='%236FB1E3' stroke-width='26' stroke-dasharray='30 210' stroke-dashoffset='-52' opacity='.65'/%3E%3Ccircle cx='210' cy='210' r='104' stroke='%23FFFFFF' stroke-width='16' stroke-dasharray='34 58' opacity='.09'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;opacity:.9;pointer-events:none}
.cpp-hero--branded #homepage-carousel{display:none!important}
.cpp-hero--branded .cpp-hero-copy{position:relative;z-index:2;left:auto;top:auto;bottom:auto;max-width:660px;padding:clamp(26px,4.5vw,54px) clamp(20px,4.5vw,60px);background:transparent!important}
.cpp-hero--branded .cpp-hero-h .row{font-size:clamp(30px,3.6vw,52px)}
.cpp-hero--branded .cpp-hero-p{margin-top:14px}
.cpp-hero--branded .cpp-hero-ctas{margin-top:20px}
.cpp-hero--branded .cpp-hero-stats{margin-top:22px;gap:22px}
.cpp-hero--branded .cpp-hero-stats .n{font-size:21px}
.cpp-hero--branded .cpp-hero-ctas .cb--primary{background:var(--cpp-red);box-shadow:0 8px 24px rgba(79,118,225,.4)}
.cpp-hero--branded .cpp-hero-ctas .cb--primary:hover{background:#154A7A}
/* pre-boot: same field, painted from the FIRST frame */
html.cpp-prehero .homepage-carousel-container{max-width:1540px;margin:14px auto 0;padding:0;border-radius:var(--cpp-r-l);overflow:hidden;min-height:clamp(300px,30vw,440px);background:radial-gradient(560px 300px at 86% 18%, rgba(79,118,225,.34), transparent 65%),
    radial-gradient(420px 260px at 70% 88%, rgba(24,200,232,.16), transparent 62%),
    radial-gradient(circle 5px at 63% 24%, rgba(24,200,232,.5) 0 5px, transparent 6px),
    radial-gradient(circle 3px at 71% 62%, rgba(255,255,255,.28) 0 3px, transparent 4px),
    radial-gradient(circle 7px at 82% 74%, rgba(79,118,225,.42) 0 7px, transparent 8px),
    radial-gradient(circle 2.5px at 56% 78%, rgba(24,200,232,.4) 0 2.5px, transparent 3.5px),
    radial-gradient(circle 4px at 90% 44%, rgba(255,255,255,.2) 0 4px, transparent 5px),
    radial-gradient(circle 3px at 48% 40%, rgba(79,118,225,.35) 0 3px, transparent 4px),
    linear-gradient(118deg,#141617 0%,#13294A 46%,#25282A 100%)}
html.cpp-prehero #homepage-carousel{display:none!important}
@media (max-width:991.98px){
  html.cpp-prehero .homepage-carousel-container{margin:14px 12px 0;max-width:none}
}

/* ============================================================
   NIP v1.2 — NO-LIFESTYLE HARD STOP (round 3)
   This store never cover-crops product art (tiles.lifestyle:false
   kills the classifier engine-wide); these resets guarantee the
   contained look even if a cached verdict or stray class survives.
   ============================================================ */
.product-thumbnail.cpp-tile--life .thumbnail-img-container{padding:revert!important;position:static!important;overflow:visible!important;border-radius:0!important;background:transparent!important}
.product-thumbnail.cpp-tile--life .thumbnail-img-container>a{position:static!important;inset:auto!important}
.product-thumbnail.cpp-tile--life .thumbnail-img-container img{position:static!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important}
.cpp-rl.cpp-rl--life .rl-im{position:static!important;height:148px!important;margin:0 0 10px!important;border-radius:0!important;overflow:visible!important;border-bottom:0!important}
.cpp-rl.cpp-rl--life .rl-im img{position:static!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important}
.cpp-collx img{object-fit:contain!important}
.cpp-herotile .ht-art img{object-fit:contain!important}


/* ============================================================
   engine (WCU lineage) v1.0 — WESTCONSIN ADDITIONS (2026-09-01)
   Everything below is new for this store: toast/outdated standards
   (Rate V1.3), the SSO-first auth card, the Shop-by-purpose lanes,
   the monthly batch band. Append-only; every state re-declares
   background AND colour (playbook §6 Overlay CSS).
   ============================================================ */

/* ---- toasts: ink colour on the widget itself (Rate V1.3) + a real red for errors ---- */
:root{--cpp-danger:#C0392B;--cpp-warn:#C88A2B}
.notification-container .toast{color:#1F2A37!important}
.notification-container .toast-body{color:#1F2A37!important}
.notification-container .toast.notif-error::before{background:var(--cpp-danger)!important}
.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='%23C0392B' 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.notif-warning .toast-header::before,.notification-container .toast[class*="warn"] .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='%23C88A2B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 16.5h-19z'/%3E%3Cpath d='M12 10v4.5M12 17.4v.2'/%3E%3C/svg%3E")}
.notification-container .toast-body a{color:var(--cpp-lake)}
/* BrightSites marks admin-edited cart lines with .outdated on tr.cart-item — flag the exact rows (Rate V1.3 standard) */
tr.cart-item.outdated>td:first-child{border-left:4px solid var(--cpp-warn)!important;border-radius:4px 0 0 4px}
tr.cart-item.outdated .item-description::before{content:"UPDATED BY THE STORE \2014  REMOVE, THEN RE-ADD FROM ITS PRODUCT PAGE TO CHECK OUT";display:inline-block;background:#FBF3E4;color:#8A5F14;border:1px solid #EBD6AC;border-radius:6px;font-size:10.5px;font-weight:800;letter-spacing:.04em;line-height:1.35;padding:4px 8px;margin-bottom:6px}

/* ---- plates: WESTconsin lanes. "In stock" = mint chip w/ green ink · MTO = navy ---- */
.sku-ribbon[data-cpp-status="ready"] span{background:var(--cpp-air)!important;color:#154A7A!important}
.sku-ribbon[data-cpp-status="mto"] span{background:var(--cpp-ink)!important;color:#fff!important}
.sku-ribbon[data-cpp-status="preorder"] span{background:var(--cpp-orange)!important;color:#fff!important}

/* ---- section sub-copy (new utility) ---- */
.cpp-sec-sub{font-size:14.5px;color:var(--cpp-gray);line-height:1.6;margin:-12px 0 22px;max-width:640px}

/* ---- auth: navy brand panel (scrim was maroon in the donor) ---- */
.cpp-auth-brand{background:linear-gradient(160deg,#25282A 0%,#1A1C1E 100%)}
.cpp-auth-brand::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(134,190,68,.28),rgba(134,190,68,0) 70%);pointer-events:none}
.cpp-auth-scrim{background:linear-gradient(100deg,rgba(37,40,42,.94) 30%,rgba(37,40,42,.6) 65%,rgba(14,34,68,.4))}
.cpp-auth-inner h1 .cpp-acc{color:var(--cpp-lime)}
.cpp-auth-body form .form-control{border-radius:10px}
.cpp-auth-body form .form-control:focus{border-color:var(--cpp-lake);box-shadow:0 0 0 3px rgba(0,84,164,.14)}
.cpp-auth-note--warn{border-left-color:var(--cpp-warn)}
.cpp-auth-note--warn svg{stroke:var(--cpp-warn)}
/* the EMPLOYEE LOGIN card — always the top block */
.cpp-sso{background:linear-gradient(150deg,#F3F8F0,#EAF3FB);border:1px solid #D8E4EE;border-radius:14px;padding:20px 20px 18px;margin:0 0 18px}
.cpp-sso .cpp-auth-eyebrow{color:#2E7D32}
.cpp-sso h2{font-size:22px;font-weight:800;color:var(--cpp-ink);margin:8px 0 6px;line-height:1.15}
.cpp-sso p{font-size:13px;color:var(--cpp-gray);line-height:1.6;margin:0 0 14px}
a.cpp-sso-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:0 20px;border-radius:999px;background:var(--cpp-ink);color:#fff!important;font-size:15px;font-weight:800;letter-spacing:.01em;text-decoration:none!important;box-shadow:0 8px 22px rgba(37,40,42,.22);transition:background .15s,transform .15s,box-shadow .15s;-webkit-appearance:none}
a.cpp-sso-btn:hover{background:var(--cpp-lake);color:#fff!important;transform:translateY(-1px);box-shadow:0 12px 26px rgba(0,84,164,.26)}
a.cpp-sso-btn svg{width:18px;height:18px;flex:none}
a.cpp-sso-btn .arr{font-style:normal;margin-left:2px}
.cpp-auth-or{display:flex;align-items:center;gap:12px;margin:22px 0 14px;color:var(--cpp-gray-2);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.cpp-auth-or::before,.cpp-auth-or::after{content:"";flex:1;height:1px;background:var(--cpp-line)}
.cpp-auth-head--other{margin-bottom:14px}
.cpp-auth-head--other h3{font-size:16px;font-weight:800;color:var(--cpp-ink);margin:0 0 4px}
.cpp-auth-head--other p{font-size:12.5px;color:var(--cpp-gray);margin:0}
.cpp-auth-body form .cpp-startwrap input[type=submit],.cpp-auth-body form .cpp-startwrap button[type=submit]{background:#fff!important;color:var(--cpp-ink)!important;border:1.5px solid var(--cpp-ink)!important;box-shadow:none!important}
.cpp-auth-body form .cpp-startwrap input[type=submit]:hover,.cpp-auth-body form .cpp-startwrap button[type=submit]:hover{background:var(--cpp-fog)!important;color:var(--cpp-ink)!important}
.cpp-auth-actions{display:flex;flex-direction:column;gap:12px;margin-top:8px}
a.cpp-auth-ghost{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;border:1.5px solid var(--cpp-ink);color:var(--cpp-ink)!important;font-weight:700;font-size:14px;text-decoration:none!important;background:#fff}
a.cpp-auth-ghost:hover{background:var(--cpp-fog);color:var(--cpp-ink)!important}
.cpp-auth--card .cpp-auth-side{align-items:center}
.cpp-auth .nav-tabs,.cpp-auth .register-container,.cpp-auth .cpp-auth-noreg{display:none!important}
.cpp-auth--checkout .guest-checkout .login-container{display:block!important}
.cpp-auth--checkout .guest-checkout .sign-in .pt-3 p{margin-top:12px}
.cpp-auth--checkout .guest-checkout .sign-in .pt-3 a{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cpp-ink)}
[data-cpp-noreg]{display:none!important}

/* ---- SHOP BY PURPOSE lanes ---- */
.cpp-purpose{padding-top:36px}
.cpp-lanes-p{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0 0 14px}
a.cpp-lane{position:relative;display:flex;flex-direction:column;gap:10px;min-height:290px;padding:24px 22px 22px;border-radius:var(--cpp-r-l);text-decoration:none!important;color:var(--cpp-ink);background:#fff;border:1px solid var(--cpp-line);overflow:hidden;transition:transform .18s,box-shadow .18s}
a.cpp-lane::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--lane,#25282A)}
a.cpp-lane:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(20,24,30,.14);color:var(--cpp-ink)}
a.cpp-lane--navy{--lane:#25282A}
a.cpp-lane--green{--lane:#1C5D99}
a.cpp-lane--blue{--lane:#1C5D99}
a.cpp-lane--sky{--lane:#6FB1E3}
.cpp-lane .licon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--lane-bg,#EEF3F9);color:var(--lane);margin-top:6px}
a.cpp-lane--navy{--lane-bg:#EEF3F9}a.cpp-lane--green{--lane-bg:#E8F0F8}a.cpp-lane--blue{--lane-bg:#E0ECF8}a.cpp-lane--sky{--lane-bg:#E8F0F8}
.cpp-lane .licon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cpp-lane .lhead{display:flex;flex-direction:column;gap:2px}
.cpp-lane .lt{font-size:20px;font-weight:800;line-height:1.15;color:var(--cpp-ink)}
.cpp-lane .ls{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lane)}
.cpp-lane .lp{font-size:13px;line-height:1.6;color:var(--cpp-gray);flex:1}
.cpp-lane .lchips{display:flex;flex-wrap:wrap;gap:6px}
.cpp-lane .lchip{font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:4px 9px;border-radius:999px;background:var(--cpp-fog);border:1px solid var(--cpp-line);color:var(--cpp-ink)}
.cpp-lane .lchip--more{background:transparent;color:var(--cpp-gray)}
.cpp-lane .lcta{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--lane);margin-top:4px}
.cpp-lane .lcta svg{width:15px;height:15px;transition:transform .18s}
a.cpp-lane:hover .lcta svg{transform:translateX(4px)}
@media (max-width:1100px){.cpp-lanes-p{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cpp-lanes-p{grid-template-columns:1fr}a.cpp-lane{min-height:0}}

/* ---- MONTHLY BATCH band (full-bleed navy, the store's rhythm) ---- */
.cpp-batch{padding:0;margin:38px 0 0}
.cpp-batch-in{background:var(--cpp-carbon);color:#fff;border-radius:0;box-shadow:0 0 0 100vmax var(--cpp-carbon);clip-path:inset(0 -100vmax);padding:60px 0 56px;position:relative}
.cpp-batch-in::before{content:"";position:absolute;right:-60px;top:-80px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(134,190,68,.22),rgba(134,190,68,0) 70%);pointer-events:none}
.cpp-batch-top{display:grid;grid-template-columns:1.4fr 1fr;gap:34px;align-items:center}
.cpp-batch-copy .cpp-eyebrow{color:var(--cpp-lime)}
.cpp-batch-copy .cpp-sec-title{color:#fff;margin-bottom:12px}
.cpp-batch-p{font-size:15px;line-height:1.7;color:#D8E0E9;margin:0;max-width:560px}
.cpp-batch-p b{color:#fff}
.cpp-batch-clock{justify-self:end;width:min(100%,360px);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--cpp-r-l);padding:22px 24px;display:flex;flex-direction:column;gap:6px;backdrop-filter:blur(4px)}
.cpp-batch-clock .ck-l{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#C9D6E5}
.cpp-batch-clock .ck-l b{color:var(--cpp-lime)}
.cpp-batch-clock .ck-d{font-size:clamp(28px,3vw,40px);font-weight:800;line-height:1.05;color:#fff}
.cpp-batch-clock .ck-s{font-size:13px;color:#C9D6E5}
.cpp-bsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.cpp-bstep{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--cpp-r-m);padding:20px 20px 18px}
.cpp-bstep .bn{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--cpp-lime);margin-bottom:10px}
.cpp-bstep h3{font-size:16px;font-weight:800;color:#fff;margin:0 0 6px}
.cpp-bstep p{font-size:13px;line-height:1.6;color:#C9D6E5;margin:0}
.cpp-batch-note{margin:24px 0 0;font-size:13px;color:#C9D6E5}
.cpp-batch-note a{color:var(--cpp-lime)}
.cpp-help{padding-top:40px}
@media (max-width:900px){.cpp-batch-top{grid-template-columns:1fr}.cpp-batch-clock{justify-self:start}.cpp-bsteps{grid-template-columns:1fr}}

/* ---- hero: dashboard-art mode — banners already carry headlines, keep the frame quiet ---- */
.cpp-herogrid .cpp-hero .carousel-caption{display:none!important}

/* ---- iOS: pin colour on every WCU button (blue-button quirk) ---- */
a.cpp-sso-btn,a.cpp-auth-ghost,.cpp-lane .lcta{-webkit-appearance:none}
/* ---- PDP: long option lists stay native selects (Office Location etc.) — dress them like the field skin ---- */
.product-page select.cpp-p14-nativesel{width:100%;min-height:46px;border:1.5px solid var(--cpp-line);border-radius:12px;padding:0 40px 0 14px;font-family:var(--cpp-font);font-size:14px;color:var(--cpp-ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325282A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px;-webkit-appearance:none;appearance:none}
.product-page select.cpp-p14-nativesel:focus{outline:none;border-color:var(--cpp-lake);box-shadow:0 0 0 3px rgba(0,84,164,.14)}


/* ============================================================
   engine (WCU lineage) v1.1 — ROUND 2 (Austin punch list, 2026-09-01)
   ① W-mark accents replace every DLZ-era triangle / corner bracket
   ② less blue: Kelly green accents (tokens --cpp-red/--cpp-amber/
      --cpp-teal-deep now #1C5D99), green search + Employee Login,
      green hero tile, lime promo lane
   ③ centered category nav ④ hero full-width when the rail is gated
   ⑤ purpose band hidden when logged out / fully gated ⑥ collections
   tile art contained ⑦ cart group-lock dialog + banner
   ⑧ personalization format hint
   ============================================================ */
/* ① the W mark everywhere an accent used to be a triangle or bracket */
.cpp-eyebrow::before,.cpp-aisle .anum::before,.cpp-utility-brand .sl,.cpp-foot-col h5 .tick,.cpp-lanes-note::before,.cpp-lanes-band .cpp-eyebrow::before{
  content:"";width:18px!important;height:12px!important;border:0!important;margin:0 0 -1px!important;flex:none;
  background:var(--cpp-amark) no-repeat center/contain!important}
.cpp-auth-eyebrow::before{content:"";width:18px;height:12px;border:0;margin:0 0 -1px;background:var(--cpp-amark) no-repeat center/contain}
.product-page .size-chart .btn-link::before{content:"";width:16px;height:11px;border:0;margin:0 0 -1px;background:var(--cpp-amark) no-repeat center/contain}
.cpp-sso .cpp-auth-eyebrow::before{background-image:var(--cpp-amark)}
/* eyebrow text: Kelly green on light surfaces, lime on dark */
.cpp-eyebrow{color:#1C5D99}
.cpp-lanes-band .cpp-eyebrow,.cpp-batch-copy .cpp-eyebrow,.cpp-foot .cpp-eyebrow{color:var(--cpp-lime)}
/* ② greener chrome */
.search-form button,.search-form .btn,.cpp-hsearch .search-form button,.cpp-hsearch .search-form .btn{background:#1C5D99!important;border-color:#1C5D99!important;color:#fff!important}
.search-form button:hover,.search-form .btn:hover,.cpp-hsearch .search-form button:hover,.cpp-hsearch .search-form .btn:hover{background:#154A7A!important;border-color:#154A7A!important;color:#fff!important}
.cpp-hsearch .search-form input:focus{border-color:#1C5D99;box-shadow:0 0 0 3px rgba(0,149,58,.14)}
.cpp-account:hover .v,.cpp-account:hover svg{color:#1C5D99}
.cpp-navrow ul.header-links > li > a:hover{color:#1C5D99!important}
.cpp-navrow ul.header-links > li:last-child > a{color:var(--cpp-ink)!important}
a.cpp-sso-btn{background:#1C5D99;box-shadow:0 8px 22px rgba(0,149,58,.24)}
a.cpp-sso-btn:hover{background:#25282A;box-shadow:0 12px 26px rgba(37,40,42,.26)}
.cpp-sso{background:linear-gradient(150deg,#F1F8EC,#E8F0F8);border-color:#CFE7D6}
.cpp-herotile--green{background:linear-gradient(160deg,#1C5D99 0%,#154A7A 100%);border-color:#154A7A;color:#fff}
.cpp-herotile--green .ht-eyebrow,.cpp-herotile--green .ht-cta{color:#D7F0B9}
.cpp-herotile--green .ht-title{color:#fff}
.cpp-herotile--green .ht-text{color:rgba(255,255,255,.78)}
.cpp-herotile--green .ht-art img{filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
a.cpp-lane--lime{--lane:#5E9A26;--lane-bg:#E8F0F8}
a.cpp-lane--lime::before{background:#6FB1E3}
.cpp-lane .lcta{color:var(--lane)}
.cpp-batch-in{background:linear-gradient(135deg,#25282A 0%,#1A1C1E 60%,#0B3D2A 100%)}
.cpp-batch-in::after{content:"";position:absolute;right:-40px;bottom:-60px;width:520px;height:330px;background:var(--cpp-amark) no-repeat center/contain;opacity:.08;pointer-events:none}
.cpp-auth-brand::after{content:"";position:absolute;left:-40px;bottom:-40px;width:420px;height:270px;border:0!important;background:var(--cpp-amark) no-repeat center/contain;opacity:.1;pointer-events:none;z-index:2}
.cpp-rail-all,.cpp-coll .cl-go,.cpp-foot a:hover{color:#1C5D99}
.cpp-foot-col h5 .tick{filter:brightness(2) saturate(.6)}
/* ③ centered category nav */
.cpp-navrow ul.header-links{justify-content:center}
/* ④ hero full width when every rail tile is gated (cat gate adds the class) */
.cpp-herogrid.cpp-herogrid--solo{grid-template-columns:minmax(0,1fr)}
.cpp-herogrid.cpp-herogrid--solo .cpp-herorail{display:none!important}
/* ⑤ purpose band fully gated / logged out */
#cpp-purpose[data-cpp-hidden]{display:none!important}
/* ⑥ collections: studio art stays contained even when a cached lifestyle verdict says cover */
.cpp-collx .cl-im.cl-cover,.cpp-collx .cl-th.cl-cover{padding:16px 16px 6px!important;overflow:hidden}
.cpp-collx .cl-im.cl-cover img,.cpp-collx .cl-th.cl-cover img{width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important}
/* ⑦ cart group lock */
.cpp-gl-modal{position:fixed;inset:0;z-index:2100;background:rgba(14,34,68,.55);display:grid;place-items:center;padding:20px;animation:cppToastIn .2s ease}
.cpp-gl-card{width:min(520px,100%);background:#fff;border-radius:18px;padding:28px 28px 24px;box-shadow:0 30px 70px rgba(20,24,30,.35);font-family:var(--cpp-font);color:var(--cpp-ink)}
.cpp-gl-card h3{font-size:22px;font-weight:800;margin:10px 0 8px;color:var(--cpp-ink)}
.cpp-gl-card p{font-size:14px;line-height:1.65;color:var(--cpp-gray);margin:0 0 18px}
.cpp-gl-card p b{color:var(--cpp-ink)}
.cpp-gl-actions{display:flex;gap:10px;flex-wrap:wrap}
.cpp-gl-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;font-size:14px;font-weight:800;font-family:var(--cpp-font);cursor:pointer;text-decoration:none!important;-webkit-appearance:none;border:1.5px solid var(--cpp-ink)}
.cpp-gl-btn--primary{background:var(--cpp-ink);color:#fff!important;flex:1}
.cpp-gl-btn--primary:hover{background:#1C5D99;border-color:#1C5D99;color:#fff!important}
.cpp-gl-btn--ghost{background:#fff;color:var(--cpp-ink)!important}
.cpp-gl-btn--ghost:hover{background:var(--cpp-fog)}
.cpp-gl-mixed{background:#FBF3E4;border:1px solid #EBD6AC;border-left:5px solid #C88A2B;border-radius:12px;padding:14px 16px;margin:0 0 16px;color:#5C3E08;font-family:var(--cpp-font)}
.cpp-gl-mixed .bm-head{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:800;color:#5C3E08;margin-bottom:4px}
.cpp-gl-mixed .bm-head svg{width:18px;height:18px;flex:none;stroke:#C88A2B}
.cpp-gl-mixed p{margin:0;font-size:13px;line-height:1.55}
.cpp-gl-held,button.cpp-gl-held,input.cpp-gl-held,a.cpp-gl-held{opacity:.45!important;cursor:not-allowed!important;pointer-events:none}
/* ⑧ personalization format hint */
.cpp-ppfmt{display:block;font-size:11px;color:var(--cpp-gray);margin-top:4px}
input[data-cpp-fmt]{font-variant-numeric:tabular-nums}
/* auth: direct-login link when the platform renders no form (Hide Login ON) */
.cpp-auth-links--direct{justify-content:center;margin-top:18px}
.cpp-auth-links--direct a{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;color:var(--cpp-gray)}
.cpp-auth-links--direct a:hover{color:var(--cpp-ink)}

/* ---- engine (WCU lineage) v1.2: FAQ static tail (Privacy Statement — plain copy, not an accordion) ---- */
.cpp-faq-tail{margin:44px 0 0;padding:28px 0 0;border-top:1px solid var(--cpp-line,#E3E8EF);color:#4B5563;font-size:14px;line-height:1.65}
.cpp-faq-tail h2{font-size:15px;font-weight:800;letter-spacing:.02em;color:var(--cpp-ink,#25282A);margin:0 0 12px;display:flex;align-items:center;gap:10px}
.cpp-faq-tail h2::before{content:"";width:16px;height:11px;background:var(--cpp-amark) no-repeat center/contain;flex:none}
.cpp-faq-tail h3,.cpp-faq-tail h4{font-size:13px;font-weight:700;color:var(--cpp-ink,#25282A);margin:18px 0 6px}
.cpp-faq-tail p{margin:0 0 10px}
.cpp-faq-tail ul{margin:0 0 10px 18px;padding:0}

/* ============================================================
   engine (WCU lineage) v1.2 — THE BOARD (2026-09-02, Austin round 3)
   A brand-new homepage language: dotted "board" paper, stickers, a
   personal greeting in giant Mulish, a bento of live tiles around the
   store's own banners, a category marquee, polaroid product cards, a
   poster wall and a dashed batch route. Same engine data, new composition.
   Palette: navy #25282A · blue #1C5D99 · Kelly #1C5D99 · lime #6FB1E3 ·
   sky #EEF3F9 · mint #E8F0F8 · orange #C88A2B (stickers only).
   ============================================================ */
:root{--wb-paper:#F7F8FA;--wb-dot:rgba(37,40,42,.10);--wb-ink:#25282A;--wb-navy:#1A1C1E;--wb-blue:#1C5D99;--wb-green:#1C5D99;--wb-lime:#6FB1E3;--wb-sky:#EEF3F9;--wb-mint:#E8F0F8;--wb-orange:#C88A2B;--wb-r:24px;--wb-r-s:16px;--wb-shadow:0 14px 34px rgba(20,24,30,.10)}
body.cpp-board-on .content-area{padding-top:0}
body.cpp-board-on .content-container{box-shadow:none!important;background:transparent!important;min-height:0!important;margin-top:0!important;margin-bottom:0!important}
body.cpp-board-on .content-container.no-content{display:none}
body.cpp-board-on .cpp-home .cpp-hero,body.cpp-board-on .cpp-hero{margin:0;padding:0;max-width:none}

/* ---- board ground ---- */
.cpp-board{position:relative;background:var(--wb-paper) radial-gradient(var(--wb-dot) 1.1px,transparent 1.2px) 0 0/22px 22px;padding:30px 20px 34px;overflow:hidden;isolation:isolate}
.cpp-board::before{content:"";position:absolute;right:-8vw;top:-16vh;width:52vw;max-width:760px;aspect-ratio:900/576;background:var(--cpp-amark) no-repeat center/contain;opacity:.07;pointer-events:none;z-index:-1;transform:rotate(-8deg)}
.cpp-board > *{max-width:1400px;margin-left:auto;margin-right:auto}

/* ---- stickers ---- */
.cpp-sticker{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font:800 10.5px/1 var(--cpp-font,Mulish,sans-serif);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;box-shadow:0 3px 0 rgba(20,24,30,.10)}
.cpp-sticker--navy{background:var(--wb-ink);color:#fff}
.cpp-sticker--lime{background:var(--wb-lime);color:var(--wb-navy)}
.cpp-sticker--orange{background:var(--wb-orange);color:var(--wb-navy)}
.cpp-sticker--white{background:#fff;color:var(--wb-ink)}
.cpp-sticker--tilt{transform:rotate(-2.5deg)}

/* ---- mast ---- */
.cpp-mast{padding:2px 0 22px}
.cpp-mast-top{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.cpp-mast-h{font-size:clamp(40px,5.8vw,78px);font-weight:900;letter-spacing:-.035em;line-height:.98;color:var(--wb-ink);margin:0 0 12px;max-width:18ch}
.cpp-mast-h .mast-last{white-space:nowrap}
.cpp-mast-h .mast-w{display:inline-block;width:.42em;height:.28em;margin:0 0 -.02em .16em;background:var(--cpp-amark) no-repeat center/contain}
.cpp-mast-p{font-size:clamp(16px,1.5vw,20px);line-height:1.45;color:#3B4A63;margin:0 0 22px;max-width:52ch;font-weight:500}
/* lanes: four start-here cards */
.cpp-lanes2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cpp-lanes2[data-cpp-hidden]{display:none!important}
.cpp-lane2{display:flex;align-items:center;gap:13px;background:#fff;border:1.5px solid rgba(37,40,42,.12);border-radius:20px;padding:13px 14px 13px 13px;color:var(--wb-ink);text-decoration:none!important;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;min-width:0}
.cpp-lane2:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:var(--wb-shadow);color:var(--wb-ink)}
.cpp-lane2 .l2-icon{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--wb-mint);color:var(--wb-green)}
.cpp-lane2 .l2-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cpp-lane2 .l2-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.cpp-lane2 .l2-txt b{font-size:16px;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.cpp-lane2 .l2-txt small{font-size:12.5px;color:#5B6B85;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpp-lane2 .l2-go{margin-left:auto;flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--wb-paper);color:var(--wb-ink);transition:background .16s,color .16s}
.cpp-lane2 .l2-go svg{width:14px;height:14px}
.cpp-lane2:hover .l2-go{background:var(--wb-ink);color:#fff}
.cpp-lane2--green:hover{border-color:var(--wb-green)}
.cpp-lane2--lime .l2-icon{background:#E8F0F8;color:#4F7D16}.cpp-lane2--lime:hover{border-color:var(--wb-lime)}
.cpp-lane2--blue .l2-icon{background:var(--wb-sky);color:var(--wb-blue)}.cpp-lane2--blue:hover{border-color:var(--wb-blue)}
.cpp-lane2--navy .l2-icon{background:#E4E8F0;color:var(--wb-ink)}.cpp-lane2--navy:hover{border-color:var(--wb-ink)}

/* ---- bento ---- */
.cpp-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:14px;margin-top:6px;align-items:stretch}
.cpp-bt{position:relative;border-radius:var(--wb-r);overflow:hidden;padding:16px 18px 15px;display:flex;flex-direction:column;min-width:0;min-height:0;text-decoration:none!important;color:inherit;background:#fff;box-shadow:0 1px 0 rgba(20,24,30,.06),0 10px 26px rgba(20,24,30,.06)}
.cpp-bt--hero{grid-column:span 2;grid-row:span 2;padding:0;background:#EEF2F6;box-shadow:var(--wb-shadow);aspect-ratio:var(--cpp-hero-ar,2)}
.cpp-bt--hero .homepage-carousel-container,.cpp-bt--hero .cpp-hero{position:absolute;inset:0;margin:0!important;padding:0!important;max-width:none;width:100%;height:100%}
.cpp-bt--hero #homepage-carousel,.cpp-bt--hero .carousel-inner,.cpp-bt--hero .carousel-item,.cpp-bt--hero .carousel-item a{height:100%}
.cpp-bt--hero .carousel-inner{border-radius:0;box-shadow:none;background:#EEF2F6}
.cpp-bt--hero .carousel-item img{width:100%;height:100%;object-fit:cover;object-position:center}
.cpp-bt--hero .carousel-caption{display:none!important}
.cpp-bt--hero .carousel-indicators{margin-bottom:14px}
.cpp-bt--hero-empty{min-height:340px;background:var(--wb-ink)}
.cpp-bt .bt-eyebrow{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.82;margin-bottom:6px;display:flex;align-items:center;gap:7px}
.cpp-bt .bt-eyebrow::before{content:"";width:14px;height:9px;background:var(--cpp-amark) no-repeat center/contain;flex:none}
.cpp-bt .bt-title{font-size:clamp(18px,1.5vw,22px);font-weight:800;letter-spacing:-.02em;line-height:1.08;display:block;max-width:70%}
.cpp-bt .bt-sub{font-size:12.5px;line-height:1.4;opacity:.85;margin-top:6px;max-width:62%}
.cpp-bt .bt-cta{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800}
.cpp-bt .bt-cta svg{width:14px;height:14px;transition:transform .16s}
.cpp-bt:hover .bt-cta svg{transform:translateX(4px)}
/* clock */
.cpp-bt--clock{background:var(--wb-green);color:#fff}
.cpp-bt--clock .bt-eyebrow::before{background-image:var(--cpp-amark)}
.cpp-bt--clock .bt-big{font-size:clamp(44px,3.8vw,58px);font-weight:900;letter-spacing:-.05em;line-height:.9;margin:2px 0 4px}
.cpp-bt--clock .bt-sub{font-size:13px;line-height:1.3;opacity:.95;max-width:100%;margin:0}
.cpp-bt--clock .bt-sub b{font-weight:800}
.cpp-bt--clock .bt-foot{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.cpp-bt--clock .bt-link{color:#fff;font-size:12.5px;font-weight:800;text-decoration:none;opacity:.9}
.cpp-bt--clock .bt-link:hover{opacity:1;text-decoration:underline}
/* category tiles with live art */
.cpp-bt--cat{min-height:0}
.cpp-bt--navy{background:linear-gradient(150deg,var(--wb-ink),var(--wb-navy));color:#fff}
.cpp-bt--navy .bt-eyebrow::before{background-image:var(--cpp-amark)}
.cpp-bt--lime{background:linear-gradient(150deg,#9BD05A,var(--wb-lime));color:var(--wb-navy)}
.cpp-bt--green{background:var(--wb-green);color:#fff}
.cpp-bt--sky{background:var(--wb-sky);color:var(--wb-ink)}
.cpp-bt--blue{background:var(--wb-blue);color:#fff}
.cpp-bt--cat .ht-art{position:absolute;right:-6px;bottom:-4px;width:52%;height:66%;display:flex;align-items:flex-end;justify-content:flex-end;pointer-events:none}
.cpp-bt--cat .ht-art img{position:absolute;right:10px;bottom:6px;max-width:100%;max-height:100%;object-fit:contain;opacity:0;transform:rotate(6deg) translateY(6px);transition:opacity .9s ease,transform .9s ease;filter:drop-shadow(0 14px 22px rgba(0,0,0,.28))}
.cpp-bt--cat .ht-art img.on{opacity:1;transform:rotate(6deg) translateY(0)}
.cpp-bt--lime .ht-art img{filter:drop-shadow(0 12px 20px rgba(37,40,42,.22))}
.cpp-bt--cat:hover .ht-art img.on{transform:rotate(2deg) translateY(-4px) scale(1.04)}
/* help tile */
.cpp-bt--help{background:#fff;color:var(--wb-ink);border:1.5px solid rgba(37,40,42,.12);box-shadow:none}
.cpp-bt--help .bt-sub{max-width:80%;color:#4B5B75}
.cpp-bt--help .bt-cta{font-size:12px;letter-spacing:.02em;color:var(--wb-blue);overflow-wrap:anywhere}
.cpp-bt--help .bt-short{display:none}
.cpp-bt--help .bt-bubble{position:absolute;right:16px;top:16px;width:42px;height:42px;border-radius:14px;background:var(--wb-mint);color:var(--wb-green);display:grid;place-items:center}
.cpp-bt--help .bt-bubble svg{width:22px;height:22px}
.cpp-bt--help:hover{border-color:var(--wb-green);box-shadow:var(--wb-shadow)}
/* re-flow when tiles are gated for this group */
.cpp-bento[data-cpp-live="3"] .cpp-bt--help,.cpp-bento[data-cpp-small="3"] .cpp-bt--help{grid-column:span 2}
.cpp-bento[data-cpp-live="2"] .cpp-bt--help,.cpp-bento[data-cpp-live="2"] .cpp-bt--clock,.cpp-bento[data-cpp-small="2"] .cpp-bt--help,.cpp-bento[data-cpp-small="2"] .cpp-bt--clock{grid-column:span 2}
.cpp-bento[data-cpp-live="1"] .cpp-bt:not(.cpp-bt--hero){grid-column:span 2;grid-row:span 2}
.cpp-bento[data-cpp-live="0"] .cpp-bt--hero{grid-column:span 4}

/* ---- marquee ---- */
.cpp-marq{margin-top:22px;overflow:hidden;border-top:1.5px dashed rgba(37,40,42,.18);border-bottom:1.5px dashed rgba(37,40,42,.18);padding:12px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cpp-marq[data-gra-catgated]{display:none!important}
.cpp-marq-track{display:flex;gap:0;width:max-content;animation:cppMarq calc(var(--mq-n,6) * 4.2s) linear infinite}
.cpp-marq:hover .cpp-marq-track{animation-play-state:paused}
.mq-item{display:inline-flex;align-items:center;gap:14px;padding:0 22px 0 8px;color:var(--wb-ink);text-decoration:none!important;font-size:clamp(18px,2.2vw,30px);font-weight:900;letter-spacing:-.025em;white-space:nowrap;transition:color .15s}
.mq-item:hover{color:var(--wb-green)}
.mq-item .mq-w{width:22px;height:14px;background:var(--cpp-amark) no-repeat center/contain;flex:none;opacity:.9}
@keyframes cppMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cpp-marq-track{animation:none;flex-wrap:wrap;width:auto}.cpp-marq{mask-image:none;-webkit-mask-image:none}.mq-item[aria-hidden]{display:none}}

/* ---- section headers on the board ---- */
.cpp-board-h2{font-size:clamp(26px,3.1vw,40px);font-weight:900;letter-spacing:-.03em;line-height:1.02;color:var(--wb-ink);margin:4px 0 0}
body.cpp-board-on .cpp-eyebrow{font-size:10.5px;letter-spacing:.16em}

/* ---- featured: the native block, playful plates ---- */
body.cpp-board-on .featured-products{padding-top:34px}
body.cpp-board-on .cpp-feat-title{font-size:clamp(26px,3.1vw,40px);font-weight:900;letter-spacing:-.03em}
body.cpp-board-on .featured-products .product-thumbnail:nth-child(4n+1) .card-img-top,body.cpp-board-on .featured-products .product-thumbnail:nth-child(4n+1) .cpp-card-art{background:var(--wb-mint)}
body.cpp-board-on .featured-products .product-thumbnail:nth-child(4n+2) .card-img-top,body.cpp-board-on .featured-products .product-thumbnail:nth-child(4n+2) .cpp-card-art{background:var(--wb-sky)}
body.cpp-board-on .featured-products .product-thumbnail:nth-child(4n+3) .card-img-top,body.cpp-board-on .featured-products .product-thumbnail:nth-child(4n+3) .cpp-card-art{background:#F6F1E3}
body.cpp-board-on .featured-products .product-thumbnail:nth-child(4n+4) .card-img-top,body.cpp-board-on .featured-products .product-thumbnail:nth-child(4n+4) .cpp-card-art{background:#E8F0F8}
body.cpp-board-on .featured-products .product-thumbnail .card{border-radius:22px;overflow:hidden;transition:transform .16s ease,box-shadow .16s ease}
body.cpp-board-on .featured-products .product-thumbnail:hover .card{transform:translateY(-4px) rotate(-.6deg);box-shadow:var(--wb-shadow)}
body.cpp-board-on .featured-products .product-thumbnail:nth-child(even):hover .card{transform:translateY(-4px) rotate(.6deg)}

/* ---- fresh off the press: tabbed polaroid strip ---- */
.cpp-fresh{background:var(--wb-paper) radial-gradient(var(--wb-dot) 1.1px,transparent 1.2px) 0 0/22px 22px;padding:36px 20px 40px;margin:26px 0 0}
.cpp-fresh[data-gra-catgated],.cpp-fresh--empty{display:none!important}
.cpp-fresh-head{max-width:1400px;margin:0 auto 18px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.cpp-fresh-tabs{display:flex;gap:8px;flex-wrap:wrap}
.cpp-ftab{border:1.5px solid rgba(37,40,42,.16);background:#fff;color:var(--wb-ink);border-radius:999px;padding:9px 16px;font:800 13px/1 var(--cpp-font,Mulish,sans-serif);letter-spacing:.01em;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s}
.cpp-ftab:hover{border-color:var(--wb-ink);transform:translateY(-1px)}
.cpp-ftab.on{background:var(--wb-ink);color:#fff;border-color:var(--wb-ink)}
.cpp-ftab[data-gra-catgated]{display:none!important}
.cpp-fresh-body{max-width:1400px;margin:0 auto;position:relative}
.cpp-fresh-row{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding:16px 4px 26px;scrollbar-width:none}
.cpp-fresh-row::-webkit-scrollbar{display:none}
.cpp-fresh-nav{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:2px}
.cpp-fresh-all{display:inline-flex;align-items:center;gap:8px;margin-right:auto;font-size:13px;font-weight:800;color:var(--wb-ink);text-decoration:none!important}
.cpp-fresh-all svg{width:14px;height:14px}
.cpp-fresh-nav .rb{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(37,40,42,.16);background:#fff;color:var(--wb-ink);display:grid;place-items:center;cursor:pointer}
.cpp-fresh-nav .rb svg{width:16px;height:16px}
.cpp-fresh-nav .rb:hover{background:var(--wb-ink);color:#fff;border-color:var(--wb-ink)}
.cpp-pol{position:relative;flex:0 0 218px;scroll-snap-align:start;background:#fff;border-radius:6px;padding:12px 12px 14px;box-shadow:0 1px 0 rgba(20,24,30,.08),0 12px 26px rgba(20,24,30,.10);text-decoration:none!important;color:var(--wb-ink);display:flex;flex-direction:column;gap:10px;transform:rotate(0);transition:transform .18s ease,box-shadow .18s ease}
.cpp-pol--l{transform:rotate(-1.6deg)}
.cpp-pol--r{transform:rotate(1.4deg)}
.cpp-pol:hover{transform:rotate(0) translateY(-6px) scale(1.02);box-shadow:0 22px 40px rgba(20,24,30,.16);z-index:2}
.cpp-pol .pol-tape{position:absolute;left:50%;top:-9px;width:74px;height:20px;transform:translateX(-50%) rotate(-2deg);background:rgba(134,190,68,.55);border-radius:2px;backdrop-filter:blur(1px)}
.cpp-pol--r .pol-tape{transform:translateX(-50%) rotate(2.5deg);background:rgba(0,84,164,.30)}
.cpp-pol .pol-im{display:block;aspect-ratio:1;background:#F4F6F8;border-radius:3px;overflow:hidden;display:grid;place-items:center}
.cpp-pol .pol-im img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.cpp-pol .pol-meta{display:flex;flex-direction:column;gap:5px;min-height:62px}
.cpp-pol .pol-plate{align-self:flex-start}
.cpp-pol .pol-n{font-size:13.5px;font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cpp-pol .pol-p{font-size:14px;font-weight:800;color:var(--wb-ink)}
.cpp-pol .pol-p del{color:#8A96AA;font-weight:600;margin-right:6px}
.cpp-pol .pol-p .sale{color:var(--wb-green)}
.cpp-pol--sk{pointer-events:none}
.cpp-pol--sk .pol-im,.cpp-pol--sk .pol-n,.cpp-pol--sk .pol-p{background:linear-gradient(90deg,#EDF0F4 25%,#F6F8FA 50%,#EDF0F4 75%);background-size:400% 100%;animation:cppShimmer 1.4s ease infinite;border-radius:4px;color:transparent}
.cpp-pol--sk .pol-n{height:16px;width:80%}.cpp-pol--sk .pol-p{height:14px;width:36%}
@keyframes cppShimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---- poster wall ---- */
.cpp-wall{background:linear-gradient(160deg,var(--wb-ink),var(--wb-navy) 60%,#141617);color:#fff;padding:44px 20px 48px;position:relative;overflow:hidden}
.cpp-wall[data-gra-catgated]{display:none!important}
.cpp-wall::after{content:"";position:absolute;left:-6vw;bottom:-22vh;width:60vw;max-width:900px;aspect-ratio:900/576;background:var(--cpp-amark) no-repeat center/contain;opacity:.08;pointer-events:none;transform:rotate(6deg)}
.cpp-wall-in{max-width:1400px;margin:0 auto;position:relative;z-index:1}
.cpp-wall-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.cpp-wall .cpp-eyebrow{color:var(--wb-lime)}
.cpp-wall .cpp-board-h2{color:#fff}
.cpp-wall-all{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:#fff;text-decoration:none!important;border:1.5px solid rgba(255,255,255,.35);border-radius:999px;padding:10px 16px}
.cpp-wall-all svg{width:14px;height:14px}
.cpp-wall-all:hover{background:#fff;color:var(--wb-ink)}
.cpp-wall-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.cpp-poster{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:3/4;border-radius:20px;overflow:hidden;padding:18px;text-decoration:none!important;color:#fff;background:#243B66;box-shadow:0 18px 40px rgba(0,0,0,.28);transition:transform .2s ease}
.cpp-poster:nth-child(odd){transform:rotate(-1.2deg)}
.cpp-poster:nth-child(even){transform:rotate(1.2deg) translateY(10px)}
.cpp-poster:hover{transform:rotate(0) translateY(-6px) scale(1.03);z-index:2}
.cpp-poster--navy{background:linear-gradient(180deg,#2A4778,#25282A)}
.cpp-poster--green{background:linear-gradient(180deg,#1FA653,#1C5D99)}
.cpp-poster--lime{background:linear-gradient(180deg,#A6D66A,#6FB1E3);color:var(--wb-navy)}
.cpp-poster--sky{background:linear-gradient(180deg,#F1F5FA,#DCE6F2);color:var(--wb-ink)}
.cpp-poster--blue{background:linear-gradient(180deg,#1F6DBF,#1C5D99)}
.cpp-poster .po-art{position:absolute;inset:0 0 34% 0;padding:14px}
.cpp-poster .po-art img{position:absolute;left:50%;top:50%;translate:-50% -50%}
.cpp-poster .po-art img{max-width:82%;max-height:84%;object-fit:contain;opacity:0;background:#fff;padding:6px;border-radius:6px;transition:opacity .8s ease,transform .8s ease;transform:rotate(-4deg) translateY(8px);box-shadow:0 16px 26px rgba(0,0,0,.30)}
.cpp-poster .po-art img.on{opacity:1;transform:rotate(-4deg) translateY(0)}
.cpp-poster:nth-child(even) .po-art img{transform:rotate(3deg) translateY(8px)}.cpp-poster:nth-child(even) .po-art img.on{transform:rotate(3deg) translateY(0)}
.cpp-poster .po-count{position:absolute;top:14px;left:14px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);border-radius:999px;padding:6px 10px}
.cpp-poster--lime .po-count,.cpp-poster--sky .po-count{background:rgba(37,40,42,.10)}
.cpp-poster .po-name{font-size:clamp(20px,1.7vw,26px);font-weight:900;letter-spacing:-.03em;line-height:1;position:relative;z-index:1;text-wrap:balance}
.cpp-poster .po-go{position:relative;z-index:1;margin-top:10px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;opacity:.9}
.cpp-poster .po-go svg{width:13px;height:13px}
.cpp-poster--sk{background:rgba(255,255,255,.08);border:1.5px dashed rgba(255,255,255,.18);box-shadow:none}

/* ---- the batch route ---- */
.cpp-route{padding:48px 20px 40px;background:#fff}
.cpp-route-in{max-width:1400px;margin:0 auto}
.cpp-route-head{max-width:760px;margin-bottom:28px}
.cpp-route-p{font-size:15.5px;line-height:1.6;color:#3B4A63;margin:12px 0 0}
.cpp-route-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.cpp-stops{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;position:relative}
.cpp-stops::before{content:"";position:absolute;left:8%;right:8%;top:26px;border-top:2.5px dashed rgba(0,149,58,.45);z-index:0}
.cpp-stop{position:relative;z-index:1;background:var(--wb-paper);border-radius:22px;padding:18px 18px 20px;border:1.5px solid rgba(37,40,42,.08)}
.cpp-stop .stop-n{width:52px;height:52px;border-radius:50%;background:var(--wb-green);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:900;box-shadow:0 0 0 6px #fff;margin:-44px 0 12px}
.cpp-stop:nth-child(2) .stop-n{background:var(--wb-blue)}
.cpp-stop:nth-child(3) .stop-n{background:var(--wb-ink)}
.cpp-stop h3{font-size:17px;font-weight:800;letter-spacing:-.01em;margin:0 0 6px;color:var(--wb-ink)}
.cpp-stop p{font-size:13.5px;line-height:1.55;color:#4B5B75;margin:0}
.cpp-stops{margin-top:44px}
.cpp-route-clock{background:var(--wb-ink);color:#fff;border-radius:22px;padding:22px 22px 20px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.cpp-route-clock::after{content:"";position:absolute;right:-30px;bottom:-30px;width:180px;aspect-ratio:900/576;background:var(--cpp-amark) no-repeat center/contain;opacity:.16;transform:rotate(-10deg)}
.cpp-route-clock .rc-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--wb-lime)}
.cpp-route-clock .rc-big{font-size:72px;font-weight:900;letter-spacing:-.05em;line-height:.95;margin:8px 0 4px}
.cpp-route-clock .rc-sub{font-size:14px;line-height:1.4;opacity:.92;max-width:22ch}
.cpp-route-clock .rc-date{margin-top:16px;align-self:flex-start;background:rgba(255,255,255,.12);border-radius:999px;padding:7px 12px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.cpp-route-note{margin:22px 0 0;font-size:13.5px;color:#5B6B85;display:flex;align-items:center;gap:10px}
.cpp-route-note::before{content:"";width:16px;height:11px;background:var(--cpp-amark) no-repeat center/contain;flex:none}

/* ---- help cards on the board ground ---- */
body.cpp-board-on .cpp-help{background:var(--wb-paper) radial-gradient(var(--wb-dot) 1.1px,transparent 1.2px) 0 0/22px 22px;padding:40px 20px 48px;margin:0}
body.cpp-board-on .cpp-help .cpp-service{max-width:1400px;margin:20px auto 0}
body.cpp-board-on .cpp-help > .cpp-eyebrow,body.cpp-board-on .cpp-help > .cpp-board-h2{display:block;max-width:1400px;margin-left:auto;margin-right:auto}
body.cpp-board-on .cpp-scard{border-radius:22px;background:#fff;border:1.5px solid rgba(37,40,42,.10)}
body.cpp-board-on .cpp-scard:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:var(--wb-shadow);border-color:var(--wb-green)}
body.cpp-board-on .cpp-scard .sicon{border-radius:14px;background:var(--wb-mint);color:var(--wb-green)}

/* ---- responsive ---- */
@media (max-width:1199.98px){
  .cpp-lanes2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cpp-bento{grid-auto-rows:auto}
  .cpp-bt--hero{grid-column:span 4;grid-row:span 1}
  .cpp-bt--clock,.cpp-bt--cat,.cpp-bt--help{min-height:190px}
  .cpp-bento[data-cpp-live="3"] .cpp-bt--help,.cpp-bento[data-cpp-small="3"] .cpp-bt--help{grid-column:span 2}
  .cpp-bento[data-cpp-live="2"] .cpp-bt--help,.cpp-bento[data-cpp-live="2"] .cpp-bt--clock{grid-column:span 2}
  .cpp-bento[data-cpp-live="1"] .cpp-bt:not(.cpp-bt--hero){grid-column:span 4;grid-row:span 1}
  .cpp-wall-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cpp-route-grid{grid-template-columns:minmax(0,1fr)}
  .cpp-route-clock{flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px 18px}
  .cpp-route-clock .rc-big{font-size:56px;margin:0}
  .cpp-route-clock .rc-eyebrow{width:100%}
  .cpp-route-clock .rc-date{margin-top:0;margin-left:auto}
}
@media (max-width:767.98px){
  .cpp-board{padding:22px 14px 26px}
  .cpp-board::before{width:80vw;right:-30vw;top:-4vh;opacity:.06}
  .cpp-mast-h{font-size:clamp(36px,11vw,52px);max-width:none}
  .cpp-mast-p{font-size:15.5px;margin-bottom:16px}
  .cpp-mast-top{gap:8px;margin-bottom:14px}
  .cpp-lanes2{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .cpp-lane2{flex-direction:column;align-items:flex-start;gap:10px;padding:13px;border-radius:18px}
  .cpp-lane2 .l2-txt small{white-space:normal}
  .cpp-lane2 .l2-go{position:absolute;right:12px;top:12px}
  .cpp-lane2{position:relative}
  .cpp-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:10px;margin-top:14px}
  .cpp-bt{border-radius:20px;padding:16px 16px 14px}
  .cpp-bt--hero{grid-column:span 2;grid-row:span 1;aspect-ratio:var(--cpp-hero-ar,2);min-height:0}
  .cpp-bt--clock,.cpp-bt--cat,.cpp-bt--help{min-height:172px}
  .cpp-bt .bt-title{font-size:19px;max-width:100%}
  .cpp-bt--clock .bt-big{font-size:52px}
  .cpp-bt--clock .bt-foot{gap:6px}
  .cpp-bt--clock .bt-link{display:none}
  .cpp-bt--cat .ht-art{width:46%;height:46%;right:-4px;bottom:auto;top:30px}
  .cpp-bt--cat .bt-title{max-width:58%}
  .cpp-bt--cat .bt-cta{position:relative;z-index:1}
  .cpp-bt--help .bt-mail{display:none}.cpp-bt--help .bt-short{display:inline}
  .cpp-bt--help .bt-sub{max-width:100%;font-size:12.5px}
  .cpp-bt--help .bt-bubble{width:34px;height:34px;right:12px;top:12px}
  .cpp-bt--help .bt-bubble svg{width:18px;height:18px}
  .cpp-bento[data-cpp-live="3"] .cpp-bt--help,.cpp-bento[data-cpp-small="3"] .cpp-bt--help{grid-column:span 2;min-height:0}
  .cpp-bento[data-cpp-live="1"] .cpp-bt:not(.cpp-bt--hero){grid-row:span 1}
  .cpp-marq{margin-top:16px;padding:9px 0}
  .mq-item{font-size:20px;padding:0 14px 0 6px;gap:10px}
  .cpp-fresh{padding:28px 0 30px;overflow:hidden}
  .cpp-fresh-head{padding:0 14px}
  .cpp-fresh-body{padding:0}
  .cpp-fresh-row{gap:14px;padding:16px 14px 22px;margin:0;scroll-snap-type:x proximity;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;overscroll-behavior-x:contain}
  .cpp-fresh-row::after{content:"";flex:0 0 6px}
  .cpp-fresh-nav{padding:0 14px}
  .cpp-pol{flex:0 0 176px;padding:10px 10px 12px;transform:none!important}
  .cpp-pol .pol-tape{width:60px;height:16px;top:-7px}
  .cpp-pol .pol-n{font-size:12.5px}
  .cpp-fresh-nav .rb{display:none}
  .cpp-wall{padding:32px 14px 36px}
  .cpp-wall-head{margin-bottom:16px;gap:10px}
  .cpp-wall .cpp-board-h2{font-size:26px}
  .cpp-wall-all{padding:8px 13px;font-size:12px}
  .cpp-wall-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:4px 0 0}
  .cpp-poster,.cpp-poster:nth-child(odd),.cpp-poster:nth-child(even){transform:none;aspect-ratio:4/5;padding:12px;border-radius:16px}
  .cpp-poster .po-name{font-size:17px}
  .cpp-poster .po-count{top:10px;left:10px;font-size:9.5px;padding:5px 8px}
  .cpp-poster .po-go{font-size:11.5px;margin-top:6px}
  .cpp-poster .po-art{inset:34px 0 38% 0;padding:6px}
  .cpp-route{padding:34px 14px 30px}
  .cpp-stops{grid-template-columns:1fr;gap:26px;margin-top:10px}
  .cpp-stops::before{left:25px;right:auto;top:6%;bottom:6%;border-top:0;border-left:2.5px dashed rgba(0,149,58,.45)}
  .cpp-stop{padding:16px 16px 16px 70px}
  .cpp-stop .stop-n{position:absolute;left:-1px;top:14px;margin:0;width:52px;height:52px}
  body.cpp-board-on .cpp-help{padding:30px 14px 36px}
}
@media (min-width:768px) and (max-width:991.98px){
  .cpp-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cpp-bt--hero{grid-column:span 2;grid-row:span 1;aspect-ratio:var(--cpp-hero-ar,2)}
  .cpp-bento[data-cpp-live="1"] .cpp-bt:not(.cpp-bt--hero){grid-column:span 2}
}

/* ---- v1.2 preview gate (personalized products) ---- */
.product-page .cpp-pv-wrap{margin:6px 0 4px}
.product-page .cpp-pv-btn{display:inline-flex!important;align-items:center;gap:9px;width:100%;justify-content:center;border-radius:999px!important;padding:13px 20px!important;font:800 14px/1 var(--cpp-font,Mulish,sans-serif)!important;letter-spacing:.01em;border:2px solid var(--wb-green,#1C5D99)!important;background:var(--wb-green,#1C5D99)!important;color:#fff!important;box-shadow:0 8px 20px rgba(0,149,58,.22);transition:transform .15s,box-shadow .15s,background .15s;cursor:pointer}
.product-page .cpp-pv-btn::before{content:"";width:16px;height:16px;flex:none;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12a8 8 0 1 1-2.3-5.6'/><path d='M20 4v5h-5'/></svg>") no-repeat center/contain}
.product-page .cpp-pv-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(0,149,58,.28)}
.product-page .cpp-pv-btn[data-cpp-stale="0"]{background:#fff!important;color:var(--wb-green,#1C5D99)!important;box-shadow:none}
.product-page .cpp-pv-btn[data-cpp-stale="0"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C5D99' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>")}
.product-page .cpp-pv-btn.cpp-pv-nudge{animation:cppNudge .5s ease 2}
@keyframes cppNudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.product-page .cpp-pv-hint{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:#4B5B75;display:flex;gap:8px;align-items:flex-start}
.product-page .cpp-pv-hint::before{content:"";width:14px;height:10px;margin-top:4px;flex:none;background:var(--cpp-amark) no-repeat center/contain}
.product-page .cpp-pv-hint--ok{color:#154A7A}
.product-page .cpp-pv-hint--nudge{color:#B45309;font-weight:700}
.product-page form[data-cpp-stale="1"] input[type="submit"],.product-page form[data-cpp-stale="1"] button[type="submit"]{opacity:.55;filter:saturate(.6)}

/* ---- v1.2 auth: giant Employee Login, native form under a disclosure ---- */
.cpp-auth .cpp-sso{padding:26px 26px 24px;border-radius:24px;position:relative}
.cpp-auth .cpp-sso::after{content:"Employees start here";position:absolute;right:16px;top:-12px;background:var(--wb-orange,#C88A2B);color:var(--wb-navy,#1A1C1E);font:800 10.5px/1 var(--cpp-font,Mulish,sans-serif);letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:999px;transform:rotate(3deg);box-shadow:0 3px 0 rgba(20,24,30,.10)}
.cpp-auth .cpp-sso h2{font-size:clamp(26px,3vw,34px);font-weight:900;letter-spacing:-.03em}
.cpp-auth a.cpp-sso-btn{width:100%;justify-content:center;padding:17px 22px;font-size:17px;border-radius:999px}
.cpp-auth-other{margin:18px 0 0;border:1.5px dashed rgba(37,40,42,.22);border-radius:18px;background:#FAFBFC}
.cpp-auth-other summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 16px;color:var(--wb-ink,#25282A)}
.cpp-auth-other summary::-webkit-details-marker{display:none}
.cpp-auth-other summary .ao-t{font-size:14px;font-weight:800}
.cpp-auth-other summary .ao-s{font-size:12.5px;color:#5B6B85;flex:1 1 auto;min-width:0}
.cpp-auth-other summary .ao-chev{width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(37,40,42,.25);flex:none;position:relative;transition:transform .2s}
.cpp-auth-other summary .ao-chev::before{content:"";position:absolute;left:7px;top:5px;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.cpp-auth-other[open] summary .ao-chev{transform:rotate(180deg)}
.cpp-auth-other[open] summary{border-bottom:1.5px dashed rgba(37,40,42,.18)}
.cpp-auth-other-in{padding:16px 16px 18px}
.cpp-auth-other-in .cpp-auth-head--other{margin-bottom:10px}
.cpp-auth-other-in .cpp-auth-head--other h3{font-size:15px;font-weight:800;margin:0}
@media (max-width:767.98px){.cpp-auth-other summary{flex-wrap:wrap}.cpp-auth-other summary .ao-s{flex-basis:100%;order:3}.cpp-auth .cpp-sso::after{right:10px}}

/* ---- v1.2 group-lock dialog: rule first ---- */
.cpp-gl-card .cpp-gl-rule{display:block;font-weight:700;color:var(--wb-ink,#25282A);margin-bottom:8px}
.cpp-gl-mixed .bm-rules{margin:8px 0 0;padding:0 0 0 18px;font-size:13px;line-height:1.5;color:#4B5B75}

/* ---- engine (WCU lineage) v1.3 (Austin): mobile quick-access panel was white-on-white (the navy-bar
   "all links white" rule bled into the white flyout) + the DLZ "⌐" glyph on its heading ---- */
.quick-actions-menu .dropdown-menu .dropdown-item,.quick-actions-menu .dropdown-menu a{color:#25282A!important}
.quick-actions-menu .dropdown-menu .dropdown-item:hover,.quick-actions-menu .dropdown-menu .dropdown-item:focus{color:#154A7A!important;background:#E8F0F8}
.quick-actions-menu .dropdown-menu .dropdown-item::after{color:#1C5D99}
.quick-actions-menu .dropdown-menu::before{content:"Site access";color:#1C5D99;padding-left:32px;background:var(--cpp-amark) no-repeat 10px 3px/16px 11px}

/* ---- engine (WCU lineage) v1.3: PDP "what's missing" outline + lightbox + shipping guard ---- */
.product-page .cpp-needs{outline:2px solid #C88A2B;outline-offset:6px;border-radius:12px;animation:cppNeeds .6s ease 1}
@keyframes cppNeeds{0%{outline-color:transparent}50%{outline-color:#C88A2B}100%{outline-color:#C88A2B}}
.notification-container .toast-body b,.notification-container .toast-body strong{color:#25282A!important;font-weight:800}
.cpp-lightbox{position:fixed;inset:0;z-index:2000;background:rgba(14,34,68,.86);display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;transition:opacity .2s ease}
.cpp-lightbox.on{opacity:1}
.cpp-lightbox figure{margin:0;max-width:min(92vw,900px);max-height:92vh;display:flex;flex-direction:column;align-items:center;gap:10px}
.cpp-lightbox img{max-width:100%;max-height:80vh;object-fit:contain;background:#fff;border-radius:16px;padding:10px;box-shadow:0 30px 70px rgba(0,0,0,.4);transform:scale(.96);transition:transform .2s ease}
.cpp-lightbox.on img{transform:scale(1)}
.cpp-lightbox figcaption{color:#fff;font-weight:700;font-size:14px;text-align:center}
.cpp-lightbox .cpp-lb-close{position:absolute;right:14px;top:14px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#25282A;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.cpp-lb-trigger{cursor:zoom-in}
#cpp-pm-recap .pm-recap-thumb.cpp-lb-trigger::after{content:""}

/* ---- engine (WCU lineage) v1.4: long-list option selects stay NATIVE (msDropdown widget hidden) ---- */
.product-page select.cpp-p14-nativesel{display:block!important}


/* ============================================================
   GRA v1.0 — GUARANTEED RATE AFFINITY "OPEN HOUSE" SKIN (2026-09-03)
   Appended re-skin over the WESTconsin→NIP→Rate engine CSS above (the
   navy/green/Figtree/W-mark palette was swept to ink/lapis/Mulish/A-mark
   in code before this block). Rule of the lineage: a later block that
   changes a state's background re-declares colour, border and shadow too.
   Language (from grarate.com): DM Serif Display headlines · Mulish body ·
   ink #25282A · lapis #1C5D99 (their "lapis-lazuli") as THE accent · the
   one-big-corner "petal" card · white ground, paper #F7F8FA, sky #EEF3F9.
   NO GRI assets, tokens or copy live here — different entity.
   ============================================================ */
:root{
  --cpp-ink:#25282A; --cpp-carbon:#25282A; --cpp-teal:#1C5D99; --cpp-teal-deep:#154A7A;
  --cpp-glow:#6FB1E3; --cpp-amber:#C88A2B; --cpp-red:#1C5D99; --cpp-maroon:#25282A; --cpp-legacy:#1A1C1E;
  --cpp-lake:#1C5D99; --cpp-ocean:#141617; --cpp-air:#E8F0F8; --cpp-green:#1F7A4D; --cpp-lime:#6FB1E3; --cpp-orange:#C88A2B; --cpp-sky:#EEF3F9;
  --cpp-fog:#F7F8FA; --cpp-line:#E3E7EC; --cpp-gray:#5B6470; --cpp-gray-2:#A3ACB6;
  --cpp-lapis:#1C5D99; --cpp-lapis-deep:#154A7A; --cpp-lapis-ink:#0F3A63; --cpp-lapis-tint:#EEF3F9; --cpp-lapis-tint-2:#DCE8F4; --cpp-lapis-glow:#2A8FBD;
  --cpp-paper:#F7F8FA; --cpp-stock:#1F7A4D; --cpp-stock-tint:#E6F3EC;
  --cpp-font:'Mulish','Proxima Nova',Helvetica,Arial,sans-serif;
  --cpp-serif:'DM Serif Display',Georgia,'Times New Roman',serif;
  --cpp-r-s:8px; --cpp-r-m:12px; --cpp-r-l:18px;
  --cpp-petal:8px 44px 8px 8px;       /* the grarate.com card corner */
  --cpp-petal-s:6px 24px 6px 6px;
  --cpp-shadow:0 12px 32px rgba(20,24,30,.08);
  --wb-paper:#FFFFFF; --wb-dot:transparent; --wb-ink:#25282A; --wb-navy:#1A1C1E; --wb-blue:#1C5D99; --wb-green:#1F7A4D; --wb-lime:#6FB1E3; --wb-sky:#EEF3F9; --wb-mint:#E8F0F8; --wb-orange:#C88A2B; --wb-r:18px; --wb-r-s:12px; --wb-shadow:0 12px 32px rgba(20,24,30,.08)
}
body{font-family:var(--cpp-font)!important;color:var(--cpp-ink)}
/* serif headlines everywhere the engine writes a section title */
.cpp-feat-title,.cpp-board-h2,.cpp-oh-h2,.cpp-oh-h1,.cpp-auth-brand h1,.cpp-auth-card h2,.cpp-rail-title,.cpp-hero-h,.cpp-req-h,.cpp-lane-h,.cpp-collx-title,.cpp-mega-card b.mc-n,.product-page .product-right-section h1,.product-page .product-header .product-title h2,.cpp-p14-title,.cpp-cartpage-h,.cpp-co-h{font-family:var(--cpp-serif)!important;font-weight:400!important;letter-spacing:-.005em!important}
.cpp-eyebrow{color:var(--cpp-lapis)!important;font-weight:800;letter-spacing:.16em}
.cpp-eyebrow::before{content:"";width:9px;height:14px;border:0!important;background:var(--cpp-amark) no-repeat center/contain!important;margin-bottom:-2px}
.cpp-eyebrow--light{color:#fff!important}
/* the A mark: portrait tile (124×194) — every W-mark slot gets the right box */
.cpp-auth-eyebrow::before,.product-page .size-chart .btn-link::before,.cpp-faq-tail h2::before,.cpp-route-note::before,.product-page .cpp-pv-hint::before,.cpp-bt .bt-eyebrow::before,.mq-item .mq-w{width:9px!important;height:14px!important;border:0!important;background:var(--cpp-amark) no-repeat center/contain!important}
.cpp-auth-brand::after,.cpp-wall::after,.cpp-board::before,.cpp-batch-in::after,.cpp-route-clock::after{aspect-ratio:124/194!important;width:min(24vw,240px)!important;height:auto!important;opacity:.07!important;transform:none!important}
.cpp-mast-h .mast-w{width:.34em;height:.52em}
.cpp-amark{display:inline-block;width:9px;height:14px;background:var(--cpp-amark) no-repeat center/contain;flex:none}

/* ---------- 1. UTILITY STRIP — no dark cap: a slim white letterhead line ---------- */
.navbar-container{background:#fff!important;border-bottom:1px solid var(--cpp-line)!important;box-shadow:none!important}
.cpp-utility{min-height:34px;padding-top:2px;padding-bottom:2px}
.cpp-utility-brand{color:var(--cpp-gray)!important;font-size:10px;letter-spacing:.2em}
.cpp-utility-brand b{color:var(--cpp-lapis)!important}
.cpp-utility-brand .sl{width:8px;height:12px;border:0!important;background:var(--cpp-amark) no-repeat center/contain!important}
.navbar-container ul.nav > li > a.nav-link,.navbar-container ul.nav > li > a.dropdown-toggle,.navbar-container ul.header-links.pages .nav-link{color:var(--cpp-ink)!important;font-size:10.5px!important;letter-spacing:.14em;text-shadow:none!important}
.navbar-container ul.nav > li > a.nav-link:hover,.navbar-container ul.nav > li > a.dropdown-toggle:hover{color:var(--cpp-lapis)!important}
.navbar-container a[href*="register"]{color:var(--cpp-lapis)!important}
.navbar-container .dropdown-menu{background:#fff!important;border:1px solid var(--cpp-line)!important;box-shadow:0 18px 44px rgba(20,24,30,.14)!important;border-radius:var(--cpp-petal-s)!important}
.navbar-container .dropdown-menu .dropdown-item{color:var(--cpp-ink)!important}
.navbar-container .dropdown-menu .dropdown-item:hover,.navbar-container .dropdown-menu .dropdown-item:focus{background:var(--cpp-lapis-tint)!important;color:var(--cpp-lapis)!important}
.navbar-container .dropdown-menu .dropdown-divider{border-top:1px solid var(--cpp-line)!important}

/* ---------- 2. HEADER ROW — the letterhead ---------- */
body.cpp-header-built .header-container{background:#fff!important;box-shadow:none!important;border-bottom:1px solid var(--cpp-line)}
body.cpp-header-built .header-navbar{padding:14px 0 12px;background:#fff!important}
.cpp-hrow{gap:26px}
.cpp-hrow .navbar-brand img{max-height:58px!important}
.cpp-hsearch{max-width:720px}
.cpp-hsearch .search-form input{height:48px;border:1.5px solid var(--cpp-line)!important;border-right:0!important;background:var(--cpp-paper)!important;color:var(--cpp-ink)!important;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;border-radius:8px 0 0 8px!important;box-shadow:none!important}
.cpp-hsearch .search-form input::placeholder{color:var(--cpp-gray);font-weight:500;letter-spacing:0;text-transform:none}
.cpp-hsearch .search-form input:focus{border-color:var(--cpp-lapis)!important;background:#fff!important;outline:0;box-shadow:0 0 0 3px rgba(28,93,153,.14)!important}
.cpp-hsearch .search-form button,.cpp-hsearch .search-form .btn{height:48px;width:58px;border-radius:0 22px 8px 0!important;background:var(--cpp-lapis)!important;border:1.5px solid var(--cpp-lapis)!important;color:#fff!important;box-shadow:none!important}
.cpp-hsearch .search-form button:hover,.cpp-hsearch .search-form .btn:hover{background:var(--cpp-lapis-deep)!important;border-color:var(--cpp-lapis-deep)!important;color:#fff!important}
.cpp-hsearch .search-form button svg,.cpp-hsearch .search-form .btn svg,.cpp-hsearch .search-form button i{color:#fff!important;fill:#fff!important}
.cpp-account{color:var(--cpp-ink)!important}
.cpp-account svg{color:var(--cpp-lapis)}
.cpp-account .l{color:var(--cpp-gray)}
.cpp-account:hover .v{color:var(--cpp-lapis)}
a.cpp-wo-pill{background:var(--cpp-ink)!important;border:1px solid var(--cpp-ink)!important;color:#fff!important;border-radius:8px 22px 8px 8px!important;box-shadow:0 8px 18px rgba(20,24,30,.14)!important;padding:9px 18px 9px 14px!important}
a.cpp-wo-pill:hover{background:var(--cpp-lapis)!important;border-color:var(--cpp-lapis)!important;color:#fff!important}
a.cpp-wo-pill .badge-ct{background:var(--cpp-lapis)!important;color:#fff!important;border:2px solid #fff!important;box-shadow:none!important}
a.cpp-wo-pill:hover .badge-ct{background:#fff!important;color:var(--cpp-lapis)!important}
a.cpp-wo-pill .wo-tx .l{color:rgba(255,255,255,.72)!important}
a.cpp-wo-pill .wo-tx .v{color:#fff!important}
.cpp-mburger,.cpp-msearch{color:var(--cpp-ink)!important;background:transparent!important;border:0!important}

/* ---------- 3. NAV ROW + THE DIRECTORY ---------- */
.cpp-navrow{background:#fff!important;border-top:1px solid var(--cpp-line)!important;border-bottom:0!important;box-shadow:none!important}
.cpp-navrow-in{display:flex!important;align-items:center;gap:6px}
.cpp-navrow ul.header-links.categories{flex:1 1 auto;margin:0}
.cpp-navrow ul.header-links.categories > li > a,.cpp-navrow ul.header-links.categories > li > .dropdown-toggle{color:var(--cpp-ink)!important;font-size:12px!important;font-weight:700!important;letter-spacing:.06em;text-transform:none!important;text-shadow:none!important;padding:14px 10px!important;position:relative;border-radius:0!important;background:transparent!important}
.cpp-navrow ul.header-links.categories > li > a::after,.cpp-navrow ul.header-links.categories > li > .dropdown-toggle::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:2px;background:var(--cpp-lapis);transform:scaleX(0);transform-origin:left;transition:transform .16s ease;border:0!important;margin:0!important;display:block!important;width:auto!important}
.cpp-navrow ul.header-links.categories > li:hover > a::after,.cpp-navrow ul.header-links.categories > li.cpp-mega-show > a::after,.cpp-navrow ul.header-links.categories > li:hover > .dropdown-toggle::after,.cpp-navrow ul.header-links.categories > li.cpp-mega-show > .dropdown-toggle::after{transform:scaleX(1)}
.cpp-navrow ul.header-links.categories > li:hover > a,.cpp-navrow ul.header-links.categories > li.cpp-mega-show > a,.cpp-navrow ul.header-links.categories > li:hover > .dropdown-toggle{color:var(--cpp-lapis)!important;background:transparent!important}
.cpp-dir{position:relative;flex:none;margin-right:10px}
.cpp-dir-btn{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 14px 0 12px;border:1.5px solid var(--cpp-lapis);border-radius:8px 18px 8px 8px;background:#fff;color:var(--cpp-lapis);font:800 12px/1 var(--cpp-font);letter-spacing:.06em;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background .14s,color .14s}
.cpp-dir-btn svg{width:18px;height:18px;flex:none}
.cpp-dir-btn .dir-chev svg{width:14px;height:14px;transition:transform .16s}
.cpp-dir-btn:hover,.cpp-dir.on .cpp-dir-btn{background:var(--cpp-lapis);color:#fff}
.cpp-dir.on .cpp-dir-btn .dir-chev svg{transform:rotate(180deg)}
.cpp-dir-panel{display:none;position:absolute;left:0;top:calc(100% + 10px);z-index:65;width:min(1180px,calc(100vw - 32px));background:#fff;color:var(--cpp-ink);border:1px solid var(--cpp-line);border-radius:var(--cpp-petal);box-shadow:0 30px 70px rgba(20,24,30,.22);padding:26px 30px 30px;max-height:min(78vh,760px);overflow:auto}
.cpp-dir.on .cpp-dir-panel{display:block}
.cpp-dir-head{display:flex;align-items:baseline;gap:16px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--cpp-line)}
.cpp-dir-head b{font:400 24px/1.1 var(--cpp-serif);color:var(--cpp-ink)}
.cpp-dir-cols{column-count:4;column-gap:30px}
.cpp-dir-col{break-inside:avoid;margin:0 0 18px;padding:0 0 4px}
.cpp-dir-top{display:flex;align-items:baseline;gap:10px;text-decoration:none!important;color:var(--cpp-ink)!important;font:800 13.5px/1.2 var(--cpp-font);padding:4px 0 6px}
.cpp-dir-top .dir-num{font:400 12px/1 var(--cpp-serif);color:var(--cpp-lapis);letter-spacing:.04em;min-width:20px}
a.cpp-dir-top:hover .dir-name{color:var(--cpp-lapis)}
.cpp-dir-kids{list-style:none;margin:0;padding:0 0 0 30px;border-left:1px solid var(--cpp-line);margin-left:6px}
.cpp-dir-kids li{margin:0}
.cpp-dir-kids a{display:block;padding:4px 0;font:600 12.5px/1.3 var(--cpp-font);color:var(--cpp-gray)!important;text-decoration:none!important}
.cpp-dir-kids a:hover{color:var(--cpp-lapis)!important}
.cpp-dir-kids .dir-k2 a{padding-left:12px;font-weight:500}
@media (max-width:1240px){.cpp-dir-cols{column-count:3}}
@media (max-width:991.98px){.cpp-dir{display:none}}
/* mega panels: the listing sheet — petal corner, lapis rule, serif card names */
@media (min-width:992px){
  .cpp-mega{border-top:3px solid var(--cpp-lapis)!important;border-radius:0 0 28px 8px!important;box-shadow:0 30px 60px rgba(20,24,30,.22)!important;background:#fff!important;color:var(--cpp-ink)!important}
  .cpp-mega .cpp-mega-col h6,.cpp-mega .cpp-mega-col > b,.cpp-mega-col .mc-h{color:var(--cpp-lapis)!important}
  .cpp-mega a{color:var(--cpp-ink)!important}
  .cpp-mega a:hover{color:var(--cpp-lapis)!important}
  .cpp-mega-all,.cpp-mega .cpp-mega-all{background:var(--cpp-ink)!important;color:#fff!important;border-radius:6px 16px 6px 6px!important;border:0!important}
  .cpp-mega-all:hover,.cpp-mega .cpp-mega-all:hover{background:var(--cpp-lapis)!important;color:#fff!important}
  .cpp-mega-card{border-radius:6px 18px 6px 6px!important;background:var(--cpp-paper)!important;border:1px solid var(--cpp-line)!important;box-shadow:none!important}
}
/* announcement bar: lapis-tint strip under the nav */
.cpp-announce{background:var(--cpp-lapis-tint)!important;color:var(--cpp-ink)!important;border-top:1px solid var(--cpp-lapis-tint-2)!important;border-bottom:1px solid var(--cpp-lapis-tint-2)!important;min-height:36px}
.cpp-announce a{color:var(--cpp-lapis)!important;text-decoration:underline!important}
.cpp-announce b{color:var(--cpp-lapis)}
.cpp-announce button,.cpp-announce .an-prev,.cpp-announce .an-next{color:var(--cpp-lapis)!important;background:transparent!important;border-color:var(--cpp-lapis-tint-2)!important}
.cpp-announce .an-dots i,.cpp-announce .dot{background:var(--cpp-lapis-tint-2)!important}
.cpp-announce .an-dots i.on,.cpp-announce .dot.on{background:var(--cpp-lapis)!important}

/* ---------- 4. BUTTONS — ink fill, lapis hover, quiet radius; petal on big CTAs ---------- */
.btn.primary,.btn.primary:visited,.product-page .add-to-cart,.product-page input.add-to-cart,.cpp-startco,.cpp-sso-btn,.cb.cb--primary,.cpp-startwrap input[type=submit],.cpp-startwrap button[type=submit]{background:var(--cpp-ink)!important;border:1.5px solid var(--cpp-ink)!important;color:#fff!important;border-radius:8px 20px 8px 8px!important;box-shadow:none!important;font-family:var(--cpp-font)!important;font-weight:800!important;letter-spacing:.06em;text-transform:uppercase;-webkit-appearance:none;appearance:none}
.btn.primary:hover,.product-page .add-to-cart:hover,.product-page input.add-to-cart:hover,.cpp-startco:hover,.cpp-sso-btn:hover,.cb.cb--primary:hover,.cpp-startwrap input[type=submit]:hover,.cpp-startwrap button[type=submit]:hover{background:var(--cpp-lapis)!important;border-color:var(--cpp-lapis)!important;color:#fff!important}
.btn.secondary,.btn.secondary.outline,.cpp-auth-ghost,.cb.cb--ghost{background:#fff!important;border:1.5px solid var(--cpp-lapis)!important;color:var(--cpp-lapis)!important;border-radius:8px 20px 8px 8px!important;box-shadow:none!important;font-family:var(--cpp-font)!important;font-weight:800!important;letter-spacing:.06em;-webkit-appearance:none;appearance:none}
.btn.secondary:hover,.btn.secondary.outline:hover,.cpp-auth-ghost:hover,.cb.cb--ghost:hover{background:var(--cpp-lapis)!important;border-color:var(--cpp-lapis)!important;color:#fff!important}
.cpp-startwrap input[type=submit],.cpp-startwrap button[type=submit]{width:100%}
/* iOS pins */
.cpp-p14-chip,.cpp-p14-qty button,.cpp-ftab,.cpp-fresh-nav .rb,.cpp-dir-btn,.cpp-mutebtn,.cpp-popbtnrow button{color:var(--cpp-ink);-webkit-appearance:none;appearance:none}

/* ---------- 5. PLATES — In stock = green chip · Made to order = lapis · Preorder = amber ---------- */
.cpp-avail{border-radius:6px!important;font-weight:800!important;letter-spacing:.08em}
.cpp-avail--ready{background:var(--cpp-stock-tint)!important;color:var(--cpp-stock)!important;border:1px solid rgba(31,122,77,.18)!important}
.cpp-avail--ready i{background:var(--cpp-stock)!important}
.cpp-avail--mto{background:var(--cpp-lapis-tint)!important;color:var(--cpp-lapis)!important;border:1px solid rgba(28,93,153,.18)!important}
.cpp-avail--mto i{background:var(--cpp-lapis)!important}
.cpp-avail--preorder{background:#FBF3E4!important;color:#8C5E12!important;border:1px solid rgba(200,138,43,.28)!important}
.cpp-avail--preorder i{background:var(--cpp-amber)!important}
.product-thumbnail .new-item-label,.new-item-productname{display:none!important}   /* the platform "new product" flag is labelled "Made-To-Order" on this store — the SKU plate says it properly */
.product-thumbnail{border-radius:6px 18px 6px 6px!important;border:1px solid var(--cpp-line)!important;box-shadow:none!important;background:#fff!important}
.product-thumbnail:hover{box-shadow:0 14px 30px rgba(20,24,30,.10)!important;border-color:var(--cpp-lapis-tint-2)!important}
.product-thumbnail .card-title{font-family:var(--cpp-font)!important;font-weight:700!important;color:var(--cpp-ink)!important}
.product-thumbnail .card-text,.product-thumbnail .card-text span{color:var(--cpp-ink)!important}
.cpp-tile-sku,.product-thumbnail .cpp-sku{color:var(--cpp-gray)!important}
/* stock readout chip */
.product-page #stock,.product-page span.stock{background:var(--cpp-stock-tint)!important;color:var(--cpp-stock)!important;border-color:rgba(31,122,77,.18)!important}
.product-page #stock.cpp-stock--out,.product-page span.stock.cpp-stock--out{background:#FBECEC!important;color:#A32B2B!important;border-color:rgba(163,43,43,.2)!important}

/* ---------- 6. PDP ---------- */
.cpp-p14-note{border-radius:var(--cpp-petal-s)!important;border:1px solid var(--cpp-line)!important;background:var(--cpp-paper)!important;box-shadow:none!important}
.cpp-p14-note--ready{border-color:rgba(31,122,77,.22)!important;background:#F3FAF6!important}
.cpp-p14-note--mto{border-color:rgba(28,93,153,.22)!important;background:var(--cpp-lapis-tint)!important}
.cpp-p14-note .pill{background:var(--cpp-ink)!important;color:#fff!important;border-radius:4px 10px 4px 4px!important}
.cpp-p14-note--ready .pill{background:var(--cpp-stock)!important}
.cpp-p14-note--mto .pill{background:var(--cpp-lapis)!important}
.cpp-p14-note-head b{color:var(--cpp-ink)!important}
.cpp-p14-note-row svg{color:var(--cpp-lapis)!important;stroke:var(--cpp-lapis)!important}
.cpp-p14-note--ready .cpp-p14-note-row svg{color:var(--cpp-stock)!important;stroke:var(--cpp-stock)!important}
.cpp-p14-note-row span,.cpp-p14-note-row b{color:var(--cpp-ink)!important}
/* the client's Compliance notice — a proper notice band, same words */
.product-page p.cpp-compliance{display:flex!important;gap:14px;align-items:flex-start;background:#FBF3E4!important;border:1px solid rgba(200,138,43,.35)!important;border-left:5px solid #C88A2B!important;border-radius:0 18px 6px 0!important;padding:14px 18px!important;margin:0 0 18px!important;color:#5C3D0A!important;font-size:13.5px!important;line-height:1.5}
.product-page p.cpp-compliance::before{content:"";width:22px;height:22px;flex:none;margin-top:1px;background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C88A2B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2.5l7.5 3v6c0 5-3.2 8.4-7.5 10-4.3-1.6-7.5-5-7.5-10v-6z'/><path d='M12 8v5'/><path d='M12 16.4v.2'/></svg>")}
.product-page p.cpp-compliance b{font-weight:600!important;color:#5C3D0A!important}
.product-page p.cpp-compliance b::first-line{font-weight:800}
.cpp-p14-chip{border-radius:6px!important;border-color:var(--cpp-line)!important;background:#fff!important;color:var(--cpp-ink)!important}
.cpp-p14-chip.on,.cpp-p14-chip[aria-pressed="true"],.cpp-p14-chip.cpp-on{background:var(--cpp-ink)!important;border-color:var(--cpp-ink)!important;color:#fff!important}
.cpp-p14-chip:hover{border-color:var(--cpp-lapis)!important;color:var(--cpp-lapis)!important;background:#fff!important}
.cpp-p14-chip.on:hover,.cpp-p14-chip.cpp-on:hover{background:var(--cpp-lapis)!important;border-color:var(--cpp-lapis)!important;color:#fff!important}
.cpp-p14-spec summary{color:var(--cpp-ink)!important;font-family:var(--cpp-serif)!important;font-weight:400!important;font-size:20px!important}
.cpp-p14-spec summary svg{color:var(--cpp-lapis)!important}
.product-page .cpp-pv-btn,.product-page .update-preview{border-radius:8px 20px 8px 8px!important}
.product-page .cpp-pv-btn.is-fresh,.product-page .update-preview.cpp-pv--fresh{border-color:var(--cpp-stock)!important;color:var(--cpp-stock)!important;background:var(--cpp-stock-tint)!important}

/* ---------- 7. OPEN HOUSE — the homepage ---------- */
body.cpp-oh-on .content-area{padding-top:0}
body.cpp-oh-on .content-container{box-shadow:none!important;background:transparent!important;min-height:0!important;margin-top:0!important;margin-bottom:0!important}
body.cpp-oh-on .content-container.no-content{display:none}
body.cpp-oh-on .cpp-hero{margin:0;padding:0;max-width:none}
.cpp-openhouse{position:relative;background:#fff;padding:26px 20px 10px;isolation:isolate}
.cpp-openhouse > *{max-width:1400px;margin-left:auto;margin-right:auto}
.cpp-oh-mast{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(300px,.78fr);gap:22px;align-items:stretch}
/* the listing card: lapis petal frame around the store's own banners, uncropped */
.cpp-oh-listing{position:relative;border-radius:var(--cpp-petal);background:linear-gradient(135deg,var(--cpp-lapis),var(--cpp-lapis-glow));padding:10px;box-shadow:0 22px 48px rgba(20,24,30,.14)}
.cpp-oh-listing .homepage-carousel-container,.cpp-oh-listing .cpp-hero{border-radius:6px 36px 6px 6px;overflow:hidden;background:#fff;aspect-ratio:var(--cpp-hero-ar,1.9);height:auto!important;max-height:none!important;min-height:0!important}
.cpp-oh-listing #homepage-carousel,.cpp-oh-listing .carousel,.cpp-oh-listing .carousel-inner,.cpp-oh-listing .carousel-item{height:100%!important;max-height:none!important}
.cpp-oh-listing .carousel-item img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center;display:block}
.cpp-oh-listing .carousel-control-prev,.cpp-oh-listing .carousel-control-next{width:54px;opacity:.85}
.cpp-oh-listing .carousel-control-prev-icon,.cpp-oh-listing .carousel-control-next-icon{background-color:rgba(37,40,42,.55);border-radius:50%;background-size:46%;width:38px;height:38px}
.cpp-oh-listing .carousel-indicators [data-bs-target]{width:22px;height:4px;border-radius:2px;background:#fff;opacity:.55;border:0}
.cpp-oh-listing .carousel-indicators .active{opacity:1;background:#fff}
.cpp-oh-listing--empty{min-height:360px}
.cpp-oh-sticker{position:absolute;left:22px;top:-12px;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--cpp-ink);border:1.5px solid var(--cpp-lapis-tint-2);border-radius:6px 16px 6px 6px;padding:7px 14px 7px 10px;font:800 11.5px/1 var(--cpp-font);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 10px 22px rgba(20,24,30,.14);z-index:3}
/* the open-house panel: ink card, lapis petal, serif greeting */
.cpp-oh-panel{position:relative;background:var(--cpp-ink);color:#fff;border-radius:8px 8px 44px 8px;padding:26px 26px 22px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 22px 48px rgba(20,24,30,.14)}
.cpp-oh-panel::before{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(42,143,189,.55),rgba(28,93,153,0) 70%);pointer-events:none}
.cpp-oh-panel::after{content:"";position:absolute;right:16px;bottom:10px;width:54px;aspect-ratio:124/194;background:var(--cpp-amark) no-repeat center/contain;opacity:.16;pointer-events:none}
.cpp-oh-panel > *{position:relative;z-index:1}
.cpp-oh-h1{font:400 clamp(30px,2.6vw,40px)/1.06 var(--cpp-serif);color:#fff;margin:8px 0 6px;letter-spacing:-.01em}
.cpp-oh-p{font:500 14px/1.5 var(--cpp-font);color:rgba(255,255,255,.78);margin:0 0 14px}
.cpp-oh-hours{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:9px}
.cpp-oh-hours li{display:flex;gap:10px;align-items:flex-start;font:500 12.5px/1.45 var(--cpp-font);color:rgba(255,255,255,.86)}
.cpp-oh-hours li i{flex:none;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:var(--cpp-glow)}
.cpp-oh-hours li i svg{width:15px;height:15px}
.cpp-oh-hours li b{color:#fff;font-weight:800}
.cpp-oh-hours li a{color:var(--cpp-glow)!important;text-decoration:underline!important}
.cpp-oh-tourhead{display:flex;align-items:center;gap:10px;margin:auto 0 8px;font:800 10.5px/1 var(--cpp-font);letter-spacing:.18em;text-transform:uppercase;color:var(--cpp-glow)}
.cpp-oh-tourhead::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.14)}
.cpp-oh-tour{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.cpp-oh-tour-a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px 14px 6px 6px;text-decoration:none!important;color:#fff!important;background:rgba(255,255,255,.04);transition:background .14s}
.cpp-oh-tour-a:hover{background:rgba(255,255,255,.1)}
.cpp-oh-tour-a .ot-n{flex:1 1 auto;font:800 13.5px/1.2 var(--cpp-font);display:flex;flex-direction:column;gap:2px}
.cpp-oh-tour-a .ot-s{font:500 11.5px/1.2 var(--cpp-font);color:rgba(255,255,255,.62)}
.cpp-oh-tour-a .ot-c{font:700 11px/1 var(--cpp-font);color:var(--cpp-glow);white-space:nowrap}
.cpp-oh-tour-a .ot-go{width:22px;height:22px;flex:none;color:var(--cpp-glow);display:grid;place-items:center}
.cpp-oh-tour-a .ot-go svg{width:16px;height:16px;transition:transform .14s}
.cpp-oh-tour-a:hover .ot-go svg{transform:translateX(3px)}
/* section heads */
.cpp-oh-in{max-width:1400px;margin:0 auto}
.cpp-oh-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:0 0 18px}
.cpp-oh-h2,.cpp-board-h2{font:400 clamp(26px,2.4vw,36px)/1.08 var(--cpp-serif)!important;color:var(--cpp-ink)!important;margin:6px 0 0!important;letter-spacing:-.01em}
.cpp-oh-all,.cpp-wall-all,.cpp-fresh-all{display:inline-flex;align-items:center;gap:8px;font:800 12.5px/1 var(--cpp-font);color:var(--cpp-lapis)!important;text-decoration:none!important;border:1.5px solid var(--cpp-lapis);border-radius:6px 16px 6px 6px;padding:10px 14px;background:#fff!important;transition:background .14s,color .14s}
.cpp-oh-all svg,.cpp-wall-all svg,.cpp-fresh-all svg{width:15px;height:15px}
.cpp-oh-all:hover,.cpp-wall-all:hover,.cpp-fresh-all:hover{background:var(--cpp-lapis)!important;color:#fff!important}
/* rooms — the floor plan */
.cpp-oh-rooms{padding:38px 0 6px}
.cpp-oh-plan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:230px;gap:14px}
.cpp-room{position:relative;display:flex;flex-direction:column;justify-content:flex-end;border-radius:6px 26px 6px 6px;overflow:hidden;padding:18px;text-decoration:none!important;color:var(--cpp-ink);background:var(--cpp-paper);border:1px solid var(--cpp-line);isolation:isolate;transition:transform .18s ease,box-shadow .18s ease}
.cpp-room:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(20,24,30,.12)}
.cpp-room--big{grid-column:span 2;grid-row:span 2}
.cpp-room .ht-art{position:absolute;inset:0;z-index:0;background:#fff;display:block}
.cpp-room .ht-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center 40%;padding:8% 8% 34%;opacity:0;transition:opacity .9s ease}
.cpp-room .ht-art img.on{opacity:1}
.cpp-room--big .ht-art img{padding:6% 6% 28%}
.cpp-room::after{content:"";position:absolute;inset:auto 0 0 0;height:62%;background:linear-gradient(to top,rgba(255,255,255,1) 34%,rgba(255,255,255,0));z-index:0;pointer-events:none}
.cpp-room--sky .ht-art{background:var(--cpp-lapis-tint)}
.cpp-room--sky::after{background:linear-gradient(to top,var(--cpp-lapis-tint) 34%,rgba(238,243,249,0))}
.cpp-room--lapis{color:#fff;border-color:transparent}
.cpp-room--lapis .ht-art{background:linear-gradient(160deg,var(--cpp-lapis),var(--cpp-lapis-glow))}
.cpp-room--lapis::after{background:linear-gradient(to top,rgba(15,58,99,.96) 30%,rgba(15,58,99,0))}
.cpp-room--ink{color:#fff;border-color:transparent}
.cpp-room--ink .ht-art{background:var(--cpp-ink)}
.cpp-room--ink::after{background:linear-gradient(to top,rgba(20,22,23,.96) 30%,rgba(20,22,23,0))}
.cpp-room .rm-txt{position:relative;z-index:1;display:flex;flex-direction:column;gap:3px}
.cpp-room .rm-eyebrow{font:800 10.5px/1 var(--cpp-font);letter-spacing:.16em;text-transform:uppercase;color:var(--cpp-lapis)}
.cpp-room--lapis .rm-eyebrow,.cpp-room--ink .rm-eyebrow{color:var(--cpp-glow)}
.cpp-room .rm-title{font:400 24px/1.05 var(--cpp-serif);color:inherit}
.cpp-room--big .rm-title{font-size:34px}
.cpp-room .rm-count{font:600 12px/1 var(--cpp-font);color:var(--cpp-gray);min-height:12px}
.cpp-room--lapis .rm-count,.cpp-room--ink .rm-count{color:rgba(255,255,255,.7)}
.cpp-room .rm-cta{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:800 12px/1 var(--cpp-font);color:inherit;opacity:.85}
.cpp-room .rm-cta svg{width:14px;height:14px;transition:transform .14s}
.cpp-room:hover .rm-cta svg{transform:translateX(3px)}
/* just listed — clean listing cards (the polaroids retire) */
.cpp-fresh{background:var(--cpp-paper)!important;padding:40px 20px 44px;margin:30px 0 0;border-top:1px solid var(--cpp-line);border-bottom:1px solid var(--cpp-line)}
.cpp-ftab{border:1.5px solid var(--cpp-line)!important;background:#fff!important;color:var(--cpp-ink)!important;border-radius:6px 14px 6px 6px!important;font-weight:800!important}
.cpp-ftab:hover{border-color:var(--cpp-lapis)!important;color:var(--cpp-lapis)!important;background:#fff!important}
.cpp-ftab.on{background:var(--cpp-ink)!important;border-color:var(--cpp-ink)!important;color:#fff!important}
.cpp-pol,.cpp-pol--l,.cpp-pol--r{transform:none!important;border-radius:6px 18px 6px 6px!important;border:1px solid var(--cpp-line)!important;box-shadow:none!important;background:#fff!important;padding:10px 10px 14px!important}
.cpp-pol:hover{box-shadow:0 14px 30px rgba(20,24,30,.10)!important;transform:translateY(-3px)!important}
.cpp-pol .pol-tape{display:none!important}
.cpp-pol .pol-im{border-radius:4px 12px 4px 4px!important;background:var(--cpp-paper)!important}
.cpp-pol .pol-n{font:700 13px/1.3 var(--cpp-font)!important;color:var(--cpp-ink)!important}
.cpp-pol .pol-p{font:800 13px/1 var(--cpp-font)!important;color:var(--cpp-lapis)!important}
.cpp-pol .pol-p del{color:var(--cpp-gray)!important;font-weight:500!important}
.cpp-fresh-nav .rb{border:1.5px solid var(--cpp-line)!important;background:#fff!important;color:var(--cpp-ink)!important;border-radius:8px!important}
.cpp-fresh-nav .rb:hover{border-color:var(--cpp-lapis)!important;color:var(--cpp-lapis)!important}
/* featured: agent's picks — restyled native block */
.cpp-feat-head{border-bottom:1px solid var(--cpp-line);padding-bottom:12px}
.cpp-feat-viewall{color:var(--cpp-lapis)!important;font-weight:800!important}
.cpp-feat-viewall:hover{color:var(--cpp-lapis-deep)!important}
body.cpp-oh-on .featured-products .product-thumbnail{background:#fff!important}
/* collections wall — the neighbourhoods (ink ground, lapis + paper posters) */
.cpp-wall{background:linear-gradient(160deg,#25282A,#1A1C1E 60%,#141617)!important;color:#fff;padding:46px 20px 50px!important}
.cpp-wall .cpp-eyebrow{color:var(--cpp-glow)!important}
.cpp-wall .cpp-board-h2,.cpp-wall .cpp-oh-h2{color:#fff!important}
.cpp-wall-all{color:#fff!important;border-color:rgba(255,255,255,.4)!important;background:transparent!important}
.cpp-wall-all:hover{background:#fff!important;color:var(--cpp-ink)!important;border-color:#fff!important}
.cpp-poster{border-radius:8px 30px 8px 8px!important;background:var(--cpp-lapis)!important;color:#fff!important}
.cpp-poster--navy{background:var(--cpp-lapis-ink)!important}
.cpp-poster--green{background:var(--cpp-lapis)!important}
.cpp-poster--lime{background:var(--cpp-lapis-glow)!important;color:#fff!important}
.cpp-poster--sky{background:#fff!important;color:var(--cpp-ink)!important}
.cpp-poster--sky .po-go,.cpp-poster--sky .po-count{color:var(--cpp-lapis)!important}
.cpp-poster--blue{background:var(--cpp-lapis-deep)!important}
.cpp-poster .po-name{font-family:var(--cpp-serif)!important;font-weight:400!important;font-size:22px!important;letter-spacing:0!important}
.cpp-poster .po-art img{object-fit:contain!important;padding:10% 10% 44%!important;background:transparent!important}
.cpp-poster--sky .po-art{background:var(--cpp-paper)!important}
.cpp-poster--sk{background:rgba(255,255,255,.06)!important}
/* route — three stops, lapis numerals */
.cpp-route{background:#fff!important;padding:48px 20px 40px!important}
.cpp-route-grid{display:block!important}
.cpp-stops{margin-top:26px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
.cpp-stops::before{display:none!important}
.cpp-stop{background:var(--cpp-paper)!important;border:1px solid var(--cpp-line)!important;border-radius:6px 22px 6px 6px!important;padding:22px 20px 22px!important}
.cpp-stop .stop-n{position:static!important;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:6px 14px 6px 6px;background:var(--cpp-lapis)!important;color:#fff!important;font:400 20px/1 var(--cpp-serif)!important;border:0!important;box-shadow:none!important;margin:0 0 12px!important;transform:none!important}
.cpp-stop h3{font:400 21px/1.15 var(--cpp-serif)!important;color:var(--cpp-ink)!important;margin:0 0 6px!important}
.cpp-stop p{font:500 13.5px/1.55 var(--cpp-font)!important;color:var(--cpp-gray)!important;margin:0!important}
.cpp-stop p b{color:var(--cpp-ink);font-weight:800}
.cpp-route-p{font:500 15px/1.55 var(--cpp-font);color:var(--cpp-gray);max-width:720px;margin:10px 0 0}
/* help cards */
body.cpp-oh-on .cpp-help{background:var(--cpp-paper)!important;padding:40px 20px 52px;margin:0;border-top:1px solid var(--cpp-line)}
body.cpp-oh-on .cpp-help > .cpp-eyebrow,body.cpp-oh-on .cpp-help > .cpp-oh-h2{max-width:1400px;margin-left:auto;margin-right:auto;display:block}
body.cpp-oh-on .cpp-help > .cpp-eyebrow{display:inline-flex;width:100%}
body.cpp-oh-on .cpp-help .cpp-service{max-width:1400px;margin:20px auto 0}
body.cpp-oh-on .cpp-scard{border-radius:6px 22px 6px 6px!important;background:#fff!important;border:1px solid var(--cpp-line)!important;box-shadow:none!important}
body.cpp-oh-on .cpp-scard:hover{box-shadow:0 14px 30px rgba(20,24,30,.10)!important;border-color:var(--cpp-lapis-tint-2)!important}
.cpp-scard .sicon{background:var(--cpp-lapis-tint)!important;color:var(--cpp-lapis)!important;border-radius:6px 14px 6px 6px!important}
.cpp-scard .sicon svg{stroke:var(--cpp-lapis)!important;color:var(--cpp-lapis)!important}
.cpp-scard h4{font:400 20px/1.15 var(--cpp-serif)!important;color:var(--cpp-ink)!important}
.cpp-scard p{color:var(--cpp-gray)!important}
.cpp-scard .go{color:var(--cpp-lapis)!important;font-weight:800!important}
/* the shipping-notice popup (client block) — lapis buttons */
.cpp-popbtnrow .btn.primary,.cpp-popbtnrow .bs2-ok{background:var(--cpp-ink)!important;border-color:var(--cpp-ink)!important;color:#fff!important;border-radius:8px 18px 8px 8px!important}
.cpp-mutebtn{background:#fff!important;border:1.5px solid var(--cpp-lapis)!important;color:var(--cpp-lapis)!important;border-radius:8px 18px 8px 8px!important}
.cpp-mutebtn:hover{background:var(--cpp-lapis)!important;color:#fff!important}

/* ---------- 8. AUTH — lapis gradient brand panel with the petal ---------- */
.cpp-auth{gap:0;border-radius:var(--cpp-petal);overflow:hidden;box-shadow:0 24px 60px rgba(20,24,30,.14)}
.cpp-auth-brand{background:linear-gradient(150deg,var(--cpp-lapis) 0%,var(--cpp-lapis-glow) 100%)!important;color:#fff!important}
.cpp-auth-scrim{background:linear-gradient(150deg,rgba(28,93,153,.86),rgba(42,143,189,.7))!important}
.cpp-auth-brand h1{color:#fff!important;font-size:clamp(30px,3vw,44px)!important}
.cpp-auth-brand h1 .cpp-acc{color:#fff!important;font-style:italic}
.cpp-auth-brand p{color:rgba(255,255,255,.86)!important}
.cpp-auth-brand .cpp-auth-eyebrow{color:#fff!important}
.cpp-auth-brand::after{opacity:.14!important;filter:brightness(4) grayscale(1)}
.cpp-auth-card{border-radius:0!important;box-shadow:none!important;border:0!important}
.cpp-auth-side{background:#fff}
.cpp-auth-head h2{font:400 30px/1.1 var(--cpp-serif)!important;color:var(--cpp-ink)!important;margin:4px 0 6px!important}
.cpp-auth-head p{color:var(--cpp-gray)!important}
.cpp-auth-eyebrow{color:var(--cpp-lapis)!important}
.cpp-auth-card label,.cpp-auth-card .form-label,.cpp-auth-card .mb-1{color:var(--cpp-ink)!important;font-weight:700!important;font-size:12px!important;letter-spacing:.06em}
.cpp-auth-card .form-control,.cpp-auth-card input[type=text],.cpp-auth-card input[type=password],.cpp-auth-card input[type=email]{border:1.5px solid var(--cpp-line)!important;border-radius:8px!important;background:var(--cpp-paper)!important;color:var(--cpp-ink)!important;height:46px;box-shadow:none!important}
.cpp-auth-card .form-control:focus{border-color:var(--cpp-lapis)!important;background:#fff!important;box-shadow:0 0 0 3px rgba(28,93,153,.14)!important}
.cpp-auth-links a{color:var(--cpp-lapis)!important;font-weight:700}
.cpp-auth-note{background:var(--cpp-lapis-tint)!important;border:1px solid var(--cpp-lapis-tint-2)!important;color:var(--cpp-ink)!important;border-radius:6px 16px 6px 6px!important}
.cpp-auth-note svg{stroke:var(--cpp-lapis)!important;color:var(--cpp-lapis)!important}
.cpp-auth-note--warn{background:#FBF3E4!important;border-color:rgba(200,138,43,.35)!important;color:#5C3D0A!important}
.cpp-auth-note--warn svg{stroke:#C88A2B!important;color:#C88A2B!important}
.cpp-auth-reg{margin-top:22px;padding:18px 20px;border:1.5px dashed var(--cpp-lapis-tint-2);border-radius:6px 20px 6px 6px;background:var(--cpp-paper);display:grid;gap:6px}
.cpp-auth-reg .ar-t{font:400 22px/1.1 var(--cpp-serif);color:var(--cpp-ink)}
.cpp-auth-reg .ar-s{font:500 13px/1.5 var(--cpp-font);color:var(--cpp-gray)}
.cpp-auth-reg .ar-s b{color:var(--cpp-ink)}
.cpp-auth-ghost--reg{display:inline-flex!important;align-items:center;gap:10px;justify-content:center;margin-top:8px;padding:12px 18px!important}
.cpp-auth-ghost--reg svg{width:18px;height:18px}
.cpp-auth-ghost--reg .arr{font-style:normal}
.cpp-auth-foot{background:var(--cpp-paper)!important;border-top:1px solid var(--cpp-line)!important;color:var(--cpp-gray)!important}
.cpp-auth-foot a{color:var(--cpp-lapis)!important}
#email-register-error,#email-login-error{display:none;color:#A32B2B!important;font-size:11.5px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;margin-left:6px}
.cpp-auth-card .required-label{color:var(--cpp-gray)!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important}
.cpp-auth--checkout .nav-tabs .nav-link,.sign-in .nav-tabs .nav-link,.guest-checkout .nav-tabs .nav-link{color:var(--cpp-gray)!important;border-bottom:3px solid transparent!important}
.cpp-auth--checkout .nav-tabs .nav-link.active,.guest-checkout .nav-tabs .nav-link.active,.sign-in .nav-tabs .nav-link.active{color:var(--cpp-lapis)!important;border-bottom-color:var(--cpp-lapis)!important;background:transparent!important}
.cpp-auth-sso-native{margin-top:12px}

/* ---------- 9. FOOTER — ink, white logo bare, lapis links ---------- */
.cpp-foot{background:var(--cpp-ink)!important;color:#C9CFD6!important;border-top:4px solid var(--cpp-lapis)}
.cpp-foot .cpp-foot-col h5,.cpp-foot h5{color:#fff!important;font:800 11px/1 var(--cpp-font)!important;letter-spacing:.18em}
.cpp-foot .cpp-foot-col h5 .tick{width:8px!important;height:12px!important;border:0!important;background:var(--cpp-amark) no-repeat center/contain!important}
.cpp-foot a{color:#C9CFD6!important}
.cpp-foot a:hover{color:var(--cpp-glow)!important}
.cpp-foot .cpp-foot-blurb{color:#C9CFD6!important}
.cpp-foot-logo img,.cpp-foot-main img{max-height:56px!important;width:auto!important;background:transparent!important;padding:0!important;border-radius:0!important;box-shadow:none!important}
.cpp-foot-plates{background:transparent!important;border:0!important;padding:0!important}
.cpp-foot-bottom{border-top:1px solid rgba(255,255,255,.12)!important;color:#8E97A1!important}
.cpp-foot-bottom a{color:#C9CFD6!important}
.cpp-foot-legal{color:#8E97A1!important}
.cpp-foot .cpp-foot-social a,.cpp-foot .social-media a{background:rgba(255,255,255,.06)!important;border-radius:6px 12px 6px 6px!important}
.cpp-foot .cpp-foot-social a:hover,.cpp-foot .social-media a:hover{background:var(--cpp-lapis)!important}
.cpp-foot .cpp-foot-social svg,.cpp-foot .social-media svg{fill:#fff!important}

/* ---------- 10. CART FLYOUT / DRAWER / TOASTS ---------- */
.cpp-flyout{border-radius:var(--cpp-petal-s)!important;border:1px solid var(--cpp-line)!important;box-shadow:0 26px 60px rgba(20,24,30,.22)!important;color:var(--cpp-ink)!important;background:#fff!important}
.cpp-flyout .cpp-startco,.cpp-flyout .fly-checkout{background:var(--cpp-ink)!important;color:#fff!important;border-radius:8px 18px 8px 8px!important}
.cpp-flyout .cpp-startco:hover,.cpp-flyout .fly-checkout:hover{background:var(--cpp-lapis)!important}
.mobile-slider,.mobile-slider ul,.mobile-slider .links{background:var(--cpp-ink)!important;color:#fff!important}
.mobile-slider a,.mobile-slider .cpp-drawer-link,.mobile-slider .cpp-sub-all-a{color:#fff!important}
.mobile-slider .cpp-drawer-h{color:var(--cpp-glow)!important}
.mobile-slider .cpp-caret{color:var(--cpp-glow)!important;background:transparent!important;border:0!important}
.cpp-drawer-top{background:#fff!important;border-bottom:1px solid var(--cpp-line)}
.cpp-drawer-top .dlg-plate{background:#fff!important;border-radius:0!important;padding:0!important}
.cpp-drawer-x{color:var(--cpp-ink)!important;background:transparent!important;border:0!important}
.quick-actions-menu .dropdown-menu{background:#fff!important;color:var(--cpp-ink)!important;border-radius:var(--cpp-petal-s)!important;border:1px solid var(--cpp-line)!important}
.quick-actions-menu .dropdown-menu a,.quick-actions-menu .dropdown-menu .dropdown-item{color:var(--cpp-ink)!important;background:transparent!important}
.quick-actions-menu .dropdown-menu a:hover,.quick-actions-menu .dropdown-menu .dropdown-item:hover{color:var(--cpp-lapis)!important;background:var(--cpp-lapis-tint)!important}
.quick-actions-menu .dropdown-menu::before{color:var(--cpp-lapis)!important;background:var(--cpp-amark) no-repeat 10px 3px/9px 14px!important}
.notification-container .toast{color:var(--cpp-ink)!important;border-radius:6px 18px 6px 6px!important;border:1px solid var(--cpp-line)!important}
.notification-container .toast .toast-header{color:var(--cpp-ink)!important}
.notification-container .toast.notif-error{border-left:5px solid #A32B2B!important}
.notification-container .toast.notif-success{border-left:5px solid var(--cpp-stock)!important}
.notification-container .toast.notif-warning{border-left:5px solid #C88A2B!important}
tr.cart-item.outdated{box-shadow:inset 5px 0 0 #C88A2B!important}
/* page headers + PLP */
.cpp-plp-head h1,.category-page h1,.cpp-page-h,.common-page h1{font-family:var(--cpp-serif)!important;font-weight:400!important;color:var(--cpp-ink)!important}
.cpp-filtergrid .cpp-more,.cpp-showmore{background:#fff!important;border:1.5px solid var(--cpp-lapis)!important;color:var(--cpp-lapis)!important;border-radius:8px 18px 8px 8px!important}
.cpp-filtergrid .cpp-more:hover,.cpp-showmore:hover{background:var(--cpp-lapis)!important;color:#fff!important}
.cpp-req-strip,.cpp-req-crumbs .cpp-crumbs a{color:var(--cpp-lapis)!important}
.cpp-crumbs a{color:var(--cpp-lapis)!important}
/* FAQ accordion */
.cpp-faq details summary,.cpp-svc-q{font:400 19px/1.25 var(--cpp-serif)!important;color:var(--cpp-ink)!important}
.cpp-faq details[open] summary,.cpp-svc-q.on{color:var(--cpp-lapis)!important}
.cpp-faq details{border-radius:6px 16px 6px 6px!important;border-color:var(--cpp-line)!important}

/* ---------- 11. RESPONSIVE ---------- */
@media (max-width:1240px){
  .cpp-oh-mast{grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr)}
  .cpp-oh-plan{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:210px}
}
@media (max-width:991.98px){
  .cpp-oh-mast{grid-template-columns:1fr;gap:16px}
  .cpp-oh-panel{border-radius:8px 8px 34px 8px;padding:22px 20px 18px}
  .cpp-oh-panel::after{display:none}
  .cpp-oh-hours{grid-template-columns:1fr}
  .cpp-oh-plan{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:190px}
  .cpp-room--big{grid-column:span 2;grid-row:span 1}
  .cpp-room--big .rm-title{font-size:28px}
  .cpp-stops{grid-template-columns:1fr!important;gap:12px!important}
  .cpp-navrow ul.header-links.categories > li > a{font-size:12px!important}
}
@media (max-width:767.98px){
  .cpp-openhouse{padding:16px 14px 6px}
  .cpp-oh-listing{padding:6px;border-radius:6px 28px 6px 6px}
  .cpp-oh-listing .homepage-carousel-container,.cpp-oh-listing .cpp-hero{border-radius:4px 22px 4px 4px}
  .cpp-oh-sticker{left:12px;top:-10px;padding:6px 10px 6px 8px;font-size:10px}
  .cpp-oh-h1{font-size:28px}
  .cpp-oh-rooms{padding:26px 0 4px}
  .cpp-oh-plan{grid-auto-rows:170px;gap:10px}
  .cpp-room{padding:14px;border-radius:6px 20px 6px 6px}
  .cpp-room .rm-title{font-size:20px}
  .cpp-room--big .rm-title{font-size:24px}
  .cpp-oh-head{margin-bottom:12px}
  .cpp-fresh{padding:28px 0 30px!important;margin-top:22px}
  .cpp-wall{padding:32px 14px 36px!important}
  .cpp-route{padding:32px 14px 26px!important}
  body.cpp-oh-on .cpp-help{padding:30px 14px 36px}
  .cpp-hrow .navbar-brand img{max-height:44px!important}
  a.cpp-wo-pill{border-radius:8px 16px 8px 8px!important;padding:8px 12px!important}
  .product-page p.cpp-compliance{font-size:12.5px!important;padding:12px 14px!important}
}

/* ---------- 12. v1.0 preview pass (headless replica 2026-09-03) ---------- */
.cpp-p14-spec .cpp-p14-specbody{color:#3F4750!important}
.cpp-announce .an-line b,.cpp-announce b{color:var(--cpp-lapis)!important}
.product-thumbnail .cpp-avail,.cpp-pol .cpp-avail{display:inline-flex!important;width:auto!important;align-self:flex-start!important}
.cpp-navrow ul.header-links.categories{justify-content:flex-start!important;flex-wrap:wrap;row-gap:0}
.cpp-navrow ul.header-links.categories > li > a,.cpp-navrow ul.header-links.categories > li > .dropdown-toggle{font-size:11.5px!important;letter-spacing:.03em!important;padding:13px 8px!important}
.cpp-navrow ul.header-links.categories > li > a::after,.cpp-navrow ul.header-links.categories > li > .dropdown-toggle::after{left:8px;right:8px}
@media (min-width:992px) and (max-width:1300px){.cpp-navrow ul.header-links.categories > li > a,.cpp-navrow ul.header-links.categories > li > .dropdown-toggle{font-size:11px!important;padding:12px 6px!important}.cpp-dir-btn{padding:0 10px}.cpp-dir-btn span{display:none}.cpp-dir-btn .dir-chev{display:none}}
.cpp-room--wide{grid-column:span 2}
.cpp-room .ht-art img{padding:6% 8% 42%}
.cpp-room--big .ht-art img{padding:5% 6% 30%}
.cpp-room--wide .ht-art img{padding:4% 30% 40%}
.cpp-room::after{height:66%}
.cpp-oh-sticker{left:50%;transform:translateX(-50%);top:-13px}
.cpp-poster .po-art{transform:none!important;left:0!important;right:0!important;top:0!important;bottom:0!important;width:100%!important;height:100%!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;inset:0!important;position:absolute!important}
.cpp-poster .po-art img{transform:none!important;object-fit:contain!important;padding:12% 12% 44%!important;position:absolute;inset:0;width:100%;height:100%}
.cpp-poster .po-count{background:rgba(255,255,255,.16)!important;color:#fff!important;border-radius:6px 12px 6px 6px!important}
.cpp-poster--sky .po-count{background:var(--cpp-lapis-tint)!important;color:var(--cpp-lapis)!important}
.footer-container.cpp-foot-built .copyright-section,.footer-container.cpp-foot-built .mobile-copyright-section{display:none!important}
.product-page .cpp-pv-hint--ok{color:var(--cpp-stock)!important;font-weight:600}
.product-page .cpp-pv-hint--nudge{color:#8C5E12!important}
.product-page .cpp-pv-hint::before{width:9px!important;height:14px!important}
@media (max-width:767.98px){
  .cpp-hrow{gap:10px}
  .cpp-hrow .navbar-brand{margin:0 auto!important}
  .cpp-hrow .navbar-brand img{max-height:38px!important}
  .cpp-msearch{margin-left:0;width:38px;height:38px;flex:none}
  .cpp-room .ht-art img{padding:6% 12% 52%}
  .cpp-room--big .ht-art img{padding:5% 20% 46%}
  .cpp-room--wide{grid-column:span 2}
  .cpp-room--wide .ht-art img{padding:4% 34% 48%}
  .cpp-room::after{height:70%}
  .cpp-oh-sticker{top:-10px}
}
.cart-item .cpp-avail,.cpp-bagmix .cpp-avail{display:inline-flex!important;width:auto!important}
.cpp-auth-brand::after{opacity:.08!important;width:min(18vw,180px)!important;left:-20px!important;bottom:-30px!important}
.cpp-navrow ul.header-links.categories > li > a,.cpp-navrow ul.header-links.categories > li > .dropdown-toggle{letter-spacing:0!important;padding:13px 7px!important;font-size:11.5px!important}
.cpp-navrow ul.header-links.categories > li > a::after,.cpp-navrow ul.header-links.categories > li > .dropdown-toggle::after{left:7px;right:7px}
@media (min-width:992px) and (max-width:1520px){.cpp-dir-btn{padding:0 11px;gap:0}.cpp-dir-btn span,.cpp-dir-btn .dir-chev{display:none}.cpp-dir{margin-right:8px}}
@media (min-width:992px){
  .cpp-mega-all,.cpp-mega .cpp-mega-all{background:transparent!important;border:0!important;border-top:1px solid var(--cpp-line)!important;border-radius:0!important;padding:12px 26px 16px!important}
  .cpp-mega .cpp-mega-all a{display:inline-flex;align-items:center;gap:9px;background:var(--cpp-ink)!important;color:#fff!important;border-radius:6px 16px 6px 6px!important;padding:9px 16px!important;font-size:11px!important;letter-spacing:.12em}
  .cpp-mega .cpp-mega-all a:hover{background:var(--cpp-lapis)!important;color:#fff!important}
  .cpp-mega .cpp-mega-col h6,.cpp-mega .cpp-mega-col .mc-h{border-bottom-color:var(--cpp-lapis-tint-2)!important}
}
a.cpp-wo-pill .cart-ic,a.cpp-wo-pill .cart-ic svg{color:#fff!important;stroke:#fff!important;opacity:1!important}
@media (max-width:767.98px){
  a.cpp-wo-pill{background:none!important;border:0!important;padding:6px 2px!important;box-shadow:none!important;border-radius:0!important}
  a.cpp-wo-pill .cart-ic,a.cpp-wo-pill .cart-ic svg{color:var(--cpp-ink)!important;stroke:var(--cpp-ink)!important;width:24px;height:24px}
  a.cpp-wo-pill .badge-ct{background:var(--cpp-lapis)!important;color:#fff!important;border-color:#fff!important}
}

/* ---------- 13. v1.1 — round 2 (Austin's live review, 2026-09-03) ----------
   Header: lapis nav band · cart pill count chip · Home: listing card fills its
   frame, brighter open-house panel, rooms as photo+caption cards, lifestyle
   photos cover on every card (tiles / just-listed / rooms / posters), quiet
   dot plates, poster art fixed (the `translate` landmine), help head aligned ·
   Auth watermark = white A glyph, no tile · Cart summary readable · PDP:
   logo tiles by luminance, related / recently-viewed skinned · FAQ + shipping
   step carry the GRA transit map · Payment step: cost-center helper. ---------- */

/* 13.1 HEADER — the lapis band. Letterhead stays white; the category row is
   the accent. Every state re-declared (colour, bg, border, shadow). */
body.cpp-header-built .header-container{border-bottom:0!important}
.cpp-navrow{background:var(--cpp-lapis)!important;border-top:0!important;border-bottom:0!important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)!important}
.cpp-navrow ul.header-links.categories > li > a,.cpp-navrow ul.header-links.categories > li > .dropdown-toggle{color:#fff!important;font-weight:700!important;background:transparent!important;text-shadow:none!important}
.cpp-navrow ul.header-links.categories > li > a::after,.cpp-navrow ul.header-links.categories > li > .dropdown-toggle::after{background:#fff!important;height:2px;bottom:7px}
.cpp-navrow ul.header-links.categories > li:hover > a,.cpp-navrow ul.header-links.categories > li.cpp-mega-show > a,.cpp-navrow ul.header-links.categories > li:hover > .dropdown-toggle,.cpp-navrow ul.header-links.categories > li.cpp-mega-show > .dropdown-toggle{color:#fff!important;background:rgba(255,255,255,.10)!important;border-radius:6px 6px 0 0!important}
.cpp-dir-btn{border:1.5px solid rgba(255,255,255,.55)!important;background:transparent!important;color:#fff!important;box-shadow:none!important}
.cpp-dir-btn:hover,.cpp-dir.on .cpp-dir-btn{background:#fff!important;border-color:#fff!important;color:var(--cpp-lapis)!important}
.cpp-dir-panel{top:calc(100% + 8px);border-top:3px solid var(--cpp-lapis)}
@media (min-width:992px){
  .cpp-mega{border-top:0!important;border-radius:0 0 28px 8px!important;margin-top:0!important}
  .cpp-mega-card .mc-im{height:170px;background:#fff}
  .cpp-mega-card .mc-im img,.cpp-mega-card img{padding:12px 12px 8px}
  .cpp-mega-card.mc-life .mc-im img{object-fit:cover!important;padding:0!important}
  .cpp-mega-card .mc-n{font:400 15px/1.25 var(--cpp-serif)!important;color:var(--cpp-ink)!important}
  .cpp-mega-card .mc-p b{color:var(--cpp-lapis)!important}
  .cpp-mega-card .mc-p .go{color:var(--cpp-lapis)!important;font-weight:800!important;letter-spacing:.1em}
}
/* the announcement strip sits between letterhead and band on this store — keep it white-tinted */
.cpp-announce{border-bottom:0!important}
/* cart pill: the count is a chip INSIDE the pill (a 3-digit badge used to sit on the icon) */
a.cpp-wo-pill{padding:8px 16px 8px 12px!important;gap:10px!important}
a.cpp-wo-pill .cart-ic{display:inline-flex!important;align-items:center;gap:7px;position:static!important}
a.cpp-wo-pill .cart-ic svg{width:22px;height:22px}
a.cpp-wo-pill .badge-ct{position:static!important;top:auto!important;right:auto!important;min-width:22px!important;height:20px!important;padding:0 6px!important;border-radius:5px 9px 5px 5px!important;font-size:11px!important;font-weight:800!important;border:0!important;background:var(--cpp-lapis)!important;color:#fff!important;line-height:20px!important;display:inline-grid!important;place-items:center}
a.cpp-wo-pill:hover .badge-ct{background:#fff!important;color:var(--cpp-lapis)!important}
a.cpp-wo-pill .wo-tx{display:flex;flex-direction:column;line-height:1.1}
a.cpp-wo-pill .wo-tx .l{font-size:9.5px!important;letter-spacing:.14em}
a.cpp-wo-pill .wo-tx .v{font-size:14px!important;font-weight:800!important}
@media (max-width:767.98px){
  a.cpp-wo-pill{padding:6px 2px!important;gap:0!important}
  a.cpp-wo-pill .cart-ic{position:relative!important;gap:0}
  a.cpp-wo-pill .badge-ct{position:absolute!important;top:-7px!important;right:-10px!important;min-width:18px!important;height:18px!important;font-size:10px!important;line-height:18px!important;border-radius:999px!important;border:2px solid #fff!important;padding:0 4px!important}
}

/* 13.2 HERO LISTING CARD — the carousel fills the lapis frame at every width.
   Desktop: the card is as tall as the panel beside it, the slide COVERS the
   frame (banner art is centre-weighted). Stacked (<992px): natural aspect,
   nothing cropped. Controls are white discs with an ink glyph. */
.cpp-oh-listing{display:flex;flex-direction:column;min-height:0}
@media (min-width:992px){
  .cpp-oh-listing .homepage-carousel-container,.cpp-oh-listing .cpp-hero{flex:1 1 auto;aspect-ratio:auto!important;min-height:380px!important;height:auto!important;position:relative;width:100%!important;margin:0!important;align-self:stretch}   /* .mx-auto kills flex stretch → width 0 */
  .cpp-oh-listing #homepage-carousel{position:absolute;inset:0;height:100%!important}
  .cpp-oh-listing .carousel-inner,.cpp-oh-listing .carousel-item{height:100%!important}
  .cpp-oh-listing .carousel-item > a{height:100%!important;display:block}
  .cpp-oh-listing .carousel-item img{object-fit:cover!important;object-position:left 45%!important;height:100%!important;width:100%!important}   /* left-anchored: the banner logo lives top-left */
}
@media (max-width:991.98px){
  .cpp-oh-listing .homepage-carousel-container,.cpp-oh-listing .cpp-hero{aspect-ratio:var(--cpp-hero-ar,1.9);height:auto!important}
  .cpp-oh-listing .carousel-item img{object-fit:contain!important}
}
.cpp-oh-listing .carousel-control-prev,.cpp-oh-listing .carousel-control-next{width:64px;opacity:1}
.cpp-oh-listing .carousel-control-prev-icon,.cpp-oh-listing .carousel-control-next-icon{width:42px;height:42px;border-radius:50%;background-color:#000;filter:invert(1);box-shadow:0 6px 16px rgba(0,0,0,.35);background-size:44%;opacity:.92;transition:opacity .14s,transform .14s}
.cpp-oh-listing .carousel-control-prev:hover .carousel-control-prev-icon,.cpp-oh-listing .carousel-control-next:hover .carousel-control-next-icon{opacity:1;transform:scale(1.06)}
.cpp-oh-listing .carousel-indicators{margin-bottom:14px;gap:6px}
.cpp-oh-listing .carousel-indicators [data-bs-target]{width:10px;height:10px;border-radius:50%;background:#fff;opacity:.55;border:0;margin:0;transition:width .18s,opacity .18s}
.cpp-oh-listing .carousel-indicators .active{opacity:1;width:26px;border-radius:5px;background:#fff}
@media (max-width:767.98px){
  .cpp-oh-listing .carousel-control-prev,.cpp-oh-listing .carousel-control-next{width:44px}
  .cpp-oh-listing .carousel-control-prev-icon,.cpp-oh-listing .carousel-control-next-icon{width:32px;height:32px}
}

/* 13.3 OPEN-HOUSE PANEL — readable: near-white copy, lapis icon tiles, tour
   rows with a real edge. Panel ground = lapis-ink → ink gradient (more blue). */
.cpp-oh-panel{background:linear-gradient(165deg,#12365C 0%,#25282A 62%)!important;color:#fff;box-shadow:0 22px 48px rgba(20,24,30,.18)}
.cpp-oh-panel::before{background:radial-gradient(circle at 40% 40%,rgba(111,177,227,.42),rgba(28,93,153,0) 70%)}
.cpp-oh-panel::after{background:var(--cpp-amark-white,var(--cpp-amark)) no-repeat center/contain;opacity:.10}
.cpp-oh-panel .cpp-eyebrow--light{color:#BFE0F7!important}
.cpp-oh-h1{color:#fff!important}
.cpp-oh-p{color:rgba(255,255,255,.92)!important;font-weight:600}
.cpp-oh-hours li{color:#fff!important;font-size:13px;font-weight:500}
.cpp-oh-hours li b{color:#fff!important;font-weight:800}
.cpp-oh-hours li i{background:var(--cpp-lapis)!important;color:#fff!important;border-radius:6px 10px 6px 6px;width:28px;height:28px;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.cpp-oh-hours li a{color:#BFE0F7!important;font-weight:700}
.cpp-oh-tourhead{color:#BFE0F7!important}
.cpp-oh-tourhead::after{background:rgba(255,255,255,.22)}
.cpp-oh-tour-a{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.12);color:#fff!important}
.cpp-oh-tour-a:hover{background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.28)}
.cpp-oh-tour-a .ot-n{color:#fff!important;font-size:14px}
.cpp-oh-tour-a .ot-s{color:rgba(255,255,255,.78)!important}
.cpp-oh-tour-a .ot-c{color:#BFE0F7!important;font-size:11.5px}
.cpp-oh-tour-a .ot-go{color:#fff!important;background:var(--cpp-lapis);border-radius:6px;width:24px;height:24px}

/* 13.4 ROOMS — photo + caption. The art lives in a fixed white photo box in
   the top of the card; the caption sits on the card's own ground beneath it
   (never text over art, never tone-on-tone). Lifestyle shots cover the box,
   studio shots sit contained; the crossfade is a slow dissolve. */
.cpp-oh-plan{grid-auto-rows:250px;gap:16px}
.cpp-room{padding:0!important;justify-content:flex-start;background:#fff!important;border:1px solid var(--cpp-line)!important;border-radius:6px 26px 6px 6px!important;box-shadow:none!important}
.cpp-room:hover{transform:translateY(-3px)!important;box-shadow:0 18px 36px rgba(20,24,30,.12)!important;border-color:var(--cpp-lapis-tint-2)!important}
.cpp-room::after{display:none!important}
.cpp-room .ht-art{position:absolute!important;inset:0 0 auto 0!important;height:58%!important;background:#fff!important;border-bottom:1px solid var(--cpp-line);overflow:hidden;z-index:0}
.cpp-room .ht-art img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;padding:8% 10%!important;opacity:0;transition:opacity 1.1s ease,transform 1.1s ease;transform:scale(1.02);background:#fff}
.cpp-room .ht-art img.on{opacity:1;transform:scale(1)}
.cpp-room .ht-art img.life{object-fit:cover!important;padding:0!important}
.cpp-room:hover .ht-art img.on{transform:scale(1.04)}
.cpp-room .rm-txt{position:absolute!important;left:18px;right:18px;top:auto!important;bottom:44px;gap:4px}
.cpp-room .rm-cta{position:absolute!important;left:18px;bottom:16px;margin:0!important;opacity:1!important;color:var(--cpp-lapis)!important;font-weight:800!important}
.cpp-room .rm-eyebrow{color:var(--cpp-lapis)!important}
.cpp-room .rm-title{color:var(--cpp-ink)!important;font-size:22px}
.cpp-room .rm-count{color:var(--cpp-gray)!important}
.cpp-room--big{grid-column:span 2;grid-row:span 2}
.cpp-room--big .ht-art{height:66%!important}
.cpp-room--big .ht-art img{padding:6% 8%!important}
.cpp-room--big .rm-txt{bottom:54px;left:24px;right:24px}
.cpp-room--big .rm-cta{left:24px;bottom:22px}
.cpp-room--big .rm-title{font-size:32px}
.cpp-room--wide .ht-art img{padding:5% 18%!important}
/* toned rooms keep their ground on the CAPTION only — white photo box stays */
.cpp-room--sky{background:var(--cpp-lapis-tint)!important;border-color:var(--cpp-lapis-tint-2)!important}
.cpp-room--sky .ht-art{border-bottom-color:var(--cpp-lapis-tint-2)}
.cpp-room--lapis{background:var(--cpp-lapis)!important;border-color:var(--cpp-lapis)!important}
.cpp-room--lapis .ht-art{border-bottom:0}
.cpp-room--lapis .rm-eyebrow{color:#BFE0F7!important}
.cpp-room--lapis .rm-title{color:#fff!important}
.cpp-room--lapis .rm-count{color:rgba(255,255,255,.78)!important}
.cpp-room--lapis .rm-cta{color:#fff!important}
.cpp-room--ink{background:var(--cpp-ink)!important;border-color:var(--cpp-ink)!important}
.cpp-room--ink .ht-art{border-bottom:0}
.cpp-room--ink .rm-eyebrow{color:#BFE0F7!important}
.cpp-room--ink .rm-title{color:#fff!important}
.cpp-room--ink .rm-count{color:rgba(255,255,255,.72)!important}
.cpp-room--ink .rm-cta{color:#BFE0F7!important}
@media (max-width:1240px){.cpp-oh-plan{grid-auto-rows:230px}}
@media (max-width:991.98px){
  .cpp-oh-plan{grid-auto-rows:210px}
  .cpp-room--big{grid-column:span 2;grid-row:span 1}
  .cpp-room--big .ht-art{height:58%!important}
  .cpp-room--big .rm-txt{bottom:44px}
  .cpp-room--big .rm-title{font-size:26px}
  .cpp-room--big .rm-cta{bottom:16px}
}
@media (max-width:767.98px){
  .cpp-oh-plan{grid-auto-rows:190px;gap:10px}
  .cpp-room .ht-art{height:54%!important}
  .cpp-room .rm-txt{bottom:36px;left:12px;right:12px}
  .cpp-room .rm-cta{left:12px;bottom:12px;font-size:11px}
  .cpp-room .rm-title,.cpp-room--big .rm-title{font-size:18px}
  .cpp-room--big .ht-art{height:54%!important}
  .cpp-room--big .rm-txt{bottom:36px;left:12px;right:12px}
  .cpp-room--big .rm-cta{left:12px;bottom:12px}
  .cpp-room--wide .ht-art img{padding:5% 10%!important}
}

/* 13.5 PRODUCT TILES (Trending / PLP / related / recently viewed) — one photo
   box (5:4), white ground, no stripes. Lifestyle = cover + soft zoom; studio =
   contained with breathing room. Empty card-text rows collapse. */
.product-thumbnail .thumbnail-img-container{background:#fff!important;height:auto!important;max-height:none!important;min-height:0!important;aspect-ratio:5/4;padding:8%!important;display:flex!important;align-items:center;justify-content:center;border-bottom:1px solid var(--cpp-line)!important;overflow:hidden;position:relative!important}
.product-thumbnail .thumbnail-img-container > a{display:flex!important;align-items:center;justify-content:center;width:100%!important;height:100%!important;position:static!important}
.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:normal!important;transition:transform .5s ease}
.product-thumbnail.cpp-tile--life .thumbnail-img-container{padding:0!important;background:#EDF1F5!important;position:relative!important;overflow:hidden!important;border-radius:0!important}
.product-thumbnail.cpp-tile--life .thumbnail-img-container > a{position:absolute!important;inset:0!important;display:block!important}
.product-thumbnail.cpp-tile--life .thumbnail-img-container img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;object-position:center 40%!important}
.product-thumbnail.cpp-tile--life:hover .thumbnail-img-container img{transform:scale(1.05)}
.product-thumbnail .thumbnail-description-container{padding:14px 16px 16px!important;display:flex;flex-direction:column;gap:6px;flex:1 1 auto}
.product-thumbnail .thumbnail-description-container > a{display:flex;flex-direction:column;gap:6px;text-decoration:none!important;height:100%}
.product-thumbnail .card-title{font-size:14px!important;line-height:1.3!important;margin:0!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-thumbnail .card-text{margin:0!important;font-weight:800!important;font-size:14.5px!important}
.product-thumbnail .card-text:empty,.product-thumbnail p.card-text:empty{display:none!important}
.product-thumbnail .card-text:last-child{margin-top:auto!important}
.product-thumbnail .cpp-swatchrow:empty{display:none!important}
.product-thumbnail .cpp-qv{border-radius:6px 12px 6px 6px!important;background:var(--cpp-ink)!important;color:#fff!important}
/* the plates: a quiet dot label (no chip box) on every card */
.product-thumbnail .cpp-avail,.cpp-pol .cpp-avail.pol-plate{background:transparent!important;border:0!important;padding:0!important;font-size:10.5px!important;letter-spacing:.12em!important;font-weight:800!important;gap:6px!important;line-height:1!important;margin:0 0 2px!important;border-radius:0!important;box-shadow:none!important;text-transform:uppercase}
.product-thumbnail .cpp-avail i,.cpp-pol .cpp-avail.pol-plate i{width:7px!important;height:7px!important;border-radius:50%!important;flex:none}
.product-thumbnail .cpp-avail--ready,.cpp-pol .cpp-avail--ready.pol-plate{color:var(--cpp-stock)!important}
.product-thumbnail .cpp-avail--mto,.cpp-pol .cpp-avail--mto.pol-plate{color:var(--cpp-lapis)!important}
.product-thumbnail .cpp-avail--preorder,.cpp-pol .cpp-avail--preorder.pol-plate{color:#8C5E12!important}
/* Trending grid: 4 across on the wide board */
@media (min-width:1200px){body.cpp-oh-on .featured-products .product-list{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important}}
body.cpp-oh-on .featured-products{max-width:1400px;margin:0 auto;padding:44px 20px 10px}
body.cpp-oh-on .featured-products .cpp-feat-head{border-bottom:0;padding-bottom:0;margin-bottom:22px}

/* 13.6 JUST LISTED — same photo-box logic on the strip cards */
.cpp-pol{flex:0 0 232px!important;gap:0!important;padding:0!important;overflow:hidden}
.cpp-pol .pol-im{aspect-ratio:5/4!important;background:#fff!important;border-radius:0!important;border-bottom:1px solid var(--cpp-line);padding:8%;display:grid!important;place-items:center;position:relative;overflow:hidden}
.cpp-pol .pol-im img{width:100%!important;height:100%!important;object-fit:contain!important;mix-blend-mode:normal!important;transition:transform .5s ease}
.cpp-pol.cpp-pol--life .pol-im{padding:0;background:#EDF1F5!important}
.cpp-pol.cpp-pol--life .pol-im img{object-fit:cover!important;object-position:center 40%}
.cpp-pol:hover .pol-im img{transform:scale(1.04)}
.cpp-pol .pol-meta{padding:12px 14px 14px!important;gap:6px!important;min-height:0!important}
.cpp-pol .pol-n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.cpp-pol .pol-p{margin-top:2px;font-size:14px!important}
@media (max-width:767.98px){.cpp-pol{flex:0 0 184px!important}}

/* 13.7 COLLECTIONS WALL — the poster art is a pinned white photo card again
   (v1.0's `transform:none` never touched the engine's `translate`, so the
   photo sat clipped in the corner). Photo card top, title + count below. */
.cpp-poster{padding:16px!important;aspect-ratio:3/4!important}
.cpp-poster .po-art{position:absolute!important;inset:52px 16px 40% 16px!important;width:auto!important;height:auto!important;padding:0!important;background:#fff!important;border-radius:6px 16px 6px 6px!important;box-shadow:0 14px 28px rgba(0,0,0,.28)!important;overflow:hidden;transform:none!important;translate:none!important}
.cpp-poster .po-art img{position:absolute!important;inset:0!important;left:0!important;top:0!important;translate:none!important;transform:none!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain!important;padding:8%!important;background:#fff!important;border-radius:0!important;box-shadow:none!important;opacity:0;transition:opacity .9s ease}
.cpp-poster .po-art img.on{opacity:1!important}
.cpp-poster .po-art img.life{object-fit:cover!important;padding:0!important}
.cpp-poster:nth-child(even) .po-art img,.cpp-poster:nth-child(odd) .po-art img{transform:none!important}
.cpp-poster .po-count{top:16px!important;left:16px!important;z-index:2}
.cpp-poster .po-name{font-size:21px!important;margin-top:auto}
.cpp-poster .po-go{margin-top:8px!important}
.cpp-poster--sky .po-art{border:1px solid var(--cpp-line)}
.cpp-poster,.cpp-poster:nth-child(odd),.cpp-poster:nth-child(even){transform:none!important}
.cpp-poster:hover{transform:translateY(-6px)!important}
@media (max-width:767.98px){.cpp-poster .po-art{inset:44px 12px 40% 12px!important}.cpp-poster .po-name{font-size:17px!important}}

/* 13.8 HELP HEAD — aligned to the 1400 rail (h2 margin was !important) */
body.cpp-oh-on .cpp-help-head{max-width:1400px;margin:0 auto;display:block}
body.cpp-oh-on .cpp-help > .cpp-eyebrow,body.cpp-oh-on .cpp-help-head > .cpp-eyebrow{display:inline-flex}
body.cpp-oh-on .cpp-help-head > .cpp-oh-h2{margin:6px 0 0!important}

/* 13.9 AUTH — the watermark is the A glyph alone (the red tile read as a
   rounded box), bigger and brighter; the petal frame is explicit. */
.cpp-auth{border-radius:8px 44px 8px 8px!important;overflow:hidden!important}
.cpp-auth-brand{border-radius:0!important}
.cpp-auth-brand::after{background:var(--cpp-amark-white,var(--cpp-amark)) no-repeat center/contain!important;filter:none!important;opacity:.16!important;width:min(26vw,300px)!important;height:auto!important;aspect-ratio:124/194;left:-30px!important;bottom:-60px!important;border-radius:0!important}
.cpp-auth-card{border-radius:0!important}
@media (max-width:991.98px){.cpp-auth{border-radius:8px 30px 8px 8px!important}.cpp-auth-brand::after{width:180px!important;bottom:-40px!important}}

/* 13.10 CART — the order-summary skin lives in cpp_gra_checkout.css (it loads after this file and owned the ink card) */

/* 13.11 PDP — logo tiles (luminance-classed by the engine), related +
   recently viewed as proper shelves (NOT scoped to .product-page: the browser
   closes that wrapper before these rows in the live DOM). */
.product-page .virtual-logo-container{display:flex;flex-wrap:wrap;gap:10px}
.product-page .virtual-logo-container .logo-location-text{flex:0 0 100%;font:600 12.5px/1.3 var(--cpp-font);color:var(--cpp-gray)}
.product-page .logo-location-thumb{width:132px!important;height:84px!important;display:grid!important;place-items:center;border:1.5px solid var(--cpp-line)!important;border-radius:6px 14px 6px 6px!important;background:#fff!important;padding:0!important;margin:0!important;overflow:hidden!important;position:relative}
.product-page .logo-location-thumb img{width:100%!important;height:100%!important;object-fit:contain!important;padding:12px!important;background:transparent!important;display:block}
.product-page .logo-location-thumb.cpp-darktile{background:#2B2F33!important;border-color:#2B2F33!important}
.product-page .logo-location-thumb.cpp-midtile{background:#8A97A6!important;border-color:#8A97A6!important}
.product-page .logo-location-thumb:hover{border-color:var(--cpp-lapis)!important;box-shadow:0 0 0 3px rgba(28,93,153,.14)!important}
.product-page .logo-location-thumb.selected-logo{border-color:var(--cpp-lapis)!important;box-shadow:0 0 0 2px var(--cpp-lapis)!important}
.product-page .logo-location-thumb.selected-logo::after{background:var(--cpp-lapis)!important;color:#fff!important;top:6px!important;right:6px!important;width:18px;height:18px}
.recently-viewed-products,.related-products{max-width:1400px;margin:44px auto 0!important;padding:34px 0 0!important;border-top:1px solid var(--cpp-line);float:none!important;width:auto!important;clear:both}
.recently-viewed-products h2,.related-products h2{font:400 clamp(24px,2.2vw,30px)/1.1 var(--cpp-serif)!important;color:var(--cpp-ink)!important;margin:0 0 18px!important;padding:0!important;letter-spacing:-.01em!important;border:0!important;text-align:left!important}
.recently-viewed-products h2::before,.related-products h2::before{content:"";display:inline-block;width:9px;height:14px;margin:0 10px -1px 0;background:var(--cpp-amark) no-repeat center/contain}
.recently-viewed-products-thumbnails,.related-products-thumbnails{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important;gap:16px!important;margin:0!important;padding:0!important}
.recently-viewed-products-thumbnails > .product-thumbnail,.related-products-thumbnails > .product-thumbnail{width:auto!important;margin:0!important;float:none!important;display:flex!important;flex-direction:column}
.recently-viewed-products-thumbnails .thumbnail-img-container,.related-products-thumbnails .thumbnail-img-container{aspect-ratio:1/1}
@media (max-width:767.98px){
  .recently-viewed-products-thumbnails,.related-products-thumbnails{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .product-page .logo-location-thumb{width:calc(50% - 5px)!important;height:76px!important}
}
/* the description's made-to-order boilerplate is hidden once the callout states it (mtoNote.hideBoilerplate) */
.product-page .cpp-p14-hidedesc{display:none!important}

/* 13.12 FAQ MAP — the GRA transit map (cpp/gra-shipping-map.png) at the top of the FAQ */
.cpp-faq-map{border:1px solid var(--cpp-line)!important;border-radius:8px 30px 8px 8px!important;box-shadow:var(--cpp-shadow)!important;background:#F7F8FA!important}
.cpp-faq-map img{display:block;width:100%;height:auto}

/* ---------- 14. v1.2 — round 3 (Austin's second live review, 2026-09-03) ----------
   Hero: no frame, no sticker — the banner is a clean petal card beside the panel ·
   Tour: "newest N" catalog pages · Rooms: taller boxes, bigger studio art, side
   layout for the wide room · Trending: exactly one row · Auth: square left edge,
   no watermark · Payment: helper sits under the cost-center field · PDP: logo
   tile grounds v2 (lapis for white marks, slate for mixes). ---------- */

/* 14.1 HERO — the listing card IS the banner now */
.cpp-oh-listing{padding:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
.cpp-oh-listing .homepage-carousel-container,.cpp-oh-listing .cpp-hero{border-radius:8px 44px 8px 8px!important;box-shadow:0 22px 48px rgba(20,24,30,.14);background:#fff}
.cpp-oh-sticker{display:none!important}
@media (max-width:767.98px){.cpp-oh-listing .homepage-carousel-container,.cpp-oh-listing .cpp-hero{border-radius:6px 28px 6px 6px!important}}

/* 14.2 TOUR — "newest N" rows */
.cpp-oh-tour-a .ot-c{white-space:nowrap}
/* the PLP strip for a newest-N page: title + "See all" link */
.cpp-pstrip .cpp-lot-seeall{display:inline-flex;align-items:center;gap:8px;margin-left:18px;font:800 12.5px/1 var(--cpp-font);letter-spacing:.06em;color:var(--cpp-lapis)!important;text-decoration:none!important;border:1.5px solid var(--cpp-lapis);border-radius:6px 16px 6px 6px;padding:9px 14px;vertical-align:middle;background:#fff;transition:background .14s,color .14s}
.cpp-pstrip .cpp-lot-seeall:hover{background:var(--cpp-lapis)!important;color:#fff!important}
.cpp-pstrip .cpp-lot-seeall svg{width:14px;height:14px}
body[data-cpp-newest-cap] #cpp-showmore,body[data-cpp-newest-cap] .pagination,body[data-cpp-newest-cap] .paginator{display:none!important}
@media (max-width:767.98px){.cpp-pstrip .cpp-lot-seeall{display:inline-flex;margin:10px 0 0}}

/* 14.3 ROOMS — boxes closer to square, studio art fills them, the wide room
   goes side-by-side (art left, caption right) so nothing is a letterbox */
.cpp-oh-plan{grid-auto-rows:300px;gap:16px}
.cpp-room .ht-art{height:68%!important;background:linear-gradient(180deg,#fff 0%,#F3F5F8 100%)!important}
.cpp-room .ht-art img{padding:4% 5%!important}
.cpp-room .rm-txt{bottom:42px}
.cpp-room--big .ht-art{height:72%!important}
.cpp-room--big .ht-art img{padding:4% 5%!important}
.cpp-room--big .rm-txt{bottom:52px}
/* wide (2×1) room: art box on the left, full height, near-square */
.cpp-room--wide .ht-art{inset:0 auto 0 0!important;height:100%!important;width:44%!important;border-bottom:0;border-right:1px solid var(--cpp-line)}
.cpp-room--wide .ht-art img{padding:6% 8%!important}
.cpp-room--wide .rm-txt{left:calc(44% + 24px)!important;right:24px;bottom:auto!important;top:50%!important;transform:translateY(-60%)}
.cpp-room--wide .rm-cta{left:calc(44% + 24px)!important;bottom:22px}
.cpp-room--ink.cpp-room--wide .ht-art,.cpp-room--lapis.cpp-room--wide .ht-art{border-right:0}
@media (max-width:1240px){.cpp-oh-plan{grid-auto-rows:270px}}
@media (max-width:991.98px){
  .cpp-oh-plan{grid-auto-rows:240px}
  .cpp-room--big .ht-art{height:66%!important}
  .cpp-room--big .rm-txt{bottom:44px}
}
@media (max-width:767.98px){
  .cpp-oh-plan{grid-auto-rows:236px;gap:10px}
  .cpp-room .ht-art,.cpp-room--big .ht-art{height:54%!important}
  .cpp-room .rm-txt,.cpp-room--big .rm-txt{bottom:34px;gap:2px}
  .cpp-room .rm-eyebrow{font-size:9.5px}
  .cpp-room--wide .ht-art{width:40%!important}
  .cpp-room--wide .rm-txt{left:calc(40% + 14px)!important;right:12px}
  .cpp-room--wide .rm-cta{left:calc(40% + 14px)!important;bottom:12px}
}

/* 14.4 TRENDING — exactly one row: 4 across, 3 under 1200, 2 on phones; the rest stay in the DOM but off the grid */
body.cpp-oh-on .featured-products .product-list{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:auto!important;grid-auto-rows:0!important;row-gap:0!important;column-gap:18px!important;overflow:hidden!important;flex-wrap:nowrap!important;margin:0!important}
body.cpp-oh-on .featured-products .product-list > *{min-width:0}
@media (max-width:1199.98px){body.cpp-oh-on .featured-products .product-list{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media (max-width:767.98px){body.cpp-oh-on .featured-products .product-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:10px!important}}

/* 14.5 AUTH — flush left edge, petal top-right only, no watermark */
.cpp-auth{border-radius:0 44px 0 0!important}
.cpp-auth-brand::after{display:none!important}
@media (max-width:991.98px){.cpp-auth{border-radius:0 30px 0 0!important}}

/* 14.6 PDP LOGO TILES v2 — white marks on lapis-deep, mixes on slate, dark/colour marks on white */
.product-page .logo-location-thumb.cpp-darktile{background:#154A7A!important;border-color:#154A7A!important}
.product-page .logo-location-thumb.cpp-midtile{background:#8A97A6!important;border-color:#8A97A6!important}
.product-page .logo-location-thumb.cpp-darktile:hover,.product-page .logo-location-thumb.cpp-midtile:hover{border-color:var(--cpp-lapis-glow)!important}

/* ---------- 14b. v1.2.1 — room captions + the checkout sign-in page ---------- */
/* rooms: the caption zone is a FIXED 118px band under the art (V3's % box left the
   eyebrow kissing — or overlapping — the photo edge at tablet widths); the caption
   anchors to the TOP of that band with real padding, the title never wraps */
.cpp-room .ht-art{height:calc(100% - 118px)!important}
.cpp-room--big .ht-art{height:calc(100% - 126px)!important}
.cpp-room .rm-txt{top:auto!important;bottom:auto!important;left:18px;right:18px;transform:none;gap:3px}
.cpp-room .rm-txt,.cpp-room--big .rm-txt{top:calc(100% - 102px)!important}
.cpp-room--big .rm-txt{top:calc(100% - 110px)!important;left:24px;right:24px}
.cpp-room .rm-cta{bottom:16px}
.cpp-room--big .rm-cta{bottom:18px}
.cpp-room .rm-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.cpp-room .rm-eyebrow{line-height:1.2}
.cpp-room--wide .ht-art{height:100%!important}
.cpp-room--wide .rm-txt{top:50%!important;transform:translateY(-60%);left:calc(44% + 24px)!important;right:24px}
.cpp-room--wide .rm-cta{bottom:22px}
@media (max-width:1240px){.cpp-room--big .rm-title{font-size:28px}}
@media (max-width:991.98px){
  .cpp-room .ht-art,.cpp-room--big .ht-art{height:calc(100% - 112px)!important}
  .cpp-room .rm-txt,.cpp-room--big .rm-txt{top:calc(100% - 98px)!important}
  .cpp-room--big .rm-title{font-size:24px}
}
@media (max-width:767.98px){
  .cpp-oh-plan{grid-auto-rows:232px}
  .cpp-room .ht-art,.cpp-room--big .ht-art{height:calc(100% - 104px)!important}
  .cpp-room .rm-txt,.cpp-room--big .rm-txt{top:calc(100% - 92px)!important;left:12px;right:12px}
  .cpp-room .rm-cta,.cpp-room--big .rm-cta{bottom:12px;left:12px}
  .cpp-room .rm-title,.cpp-room--big .rm-title{font-size:18px}
  .cpp-room--wide .ht-art{height:100%!important}
  .cpp-room--wide .rm-txt{top:50%!important;left:calc(40% + 14px)!important;right:12px}
}
/* checkout sign-in page = the login shape (the WESTconsin-era rule hid .register-container store-wide — this store registers) */
.cpp-auth{overflow-x:hidden}
.cpp-auth .cpp-auth-regform.register-container{display:block!important}
.cpp-auth .cpp-auth-regform.register-container[style*="display: none"],.cpp-auth .cpp-auth-regform.register-container[style*="display:none"]{display:none!important}
.cpp-auth--checkout .cpp-auth-regform{margin-top:14px;padding:18px 20px 20px;border:1.5px solid var(--cpp-lapis-tint-2);border-radius:6px 20px 6px 6px;background:var(--cpp-paper)}
.cpp-auth--checkout .cpp-auth-regform .row,.cpp-auth--checkout .cpp-auth-regform [class*=col-]{margin:0!important;padding:0!important;border:0!important;flex:0 0 100%!important;width:100%!important;max-width:100%!important}
.cpp-auth--checkout .cpp-auth-regform .sign-in,.cpp-auth--checkout .cpp-auth-regform .content-block,.cpp-auth--checkout .cpp-auth-regform .sign-in-form{padding:0!important;margin:0!important;border:0!important;box-shadow:none!important;background:transparent!important;width:100%!important;max-width:none!important}
.cpp-auth--checkout .cpp-auth-regform .py-5,.cpp-auth--checkout .cpp-auth-regform .px-4{padding:0!important}
.cpp-auth--checkout .cpp-auth-reghead .ar-t{display:block;font:400 22px/1.1 var(--cpp-serif);color:var(--cpp-ink);margin-bottom:10px}
.cpp-auth--checkout .cpp-auth-regform .cpp-auth-note{margin:0 0 14px}
.cpp-auth--checkout .cpp-auth-regform .cpp-startwrap{margin-top:6px}
.cpp-auth--checkout .cpp-auth-regform form{border:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
.cpp-auth--checkout .cpp-auth-regform .btn.secondary[disabled]{opacity:.5}
.cpp-auth--checkout button.cpp-auth-ghost--reg{width:100%;cursor:pointer;font-family:var(--cpp-font)}

/* ======================================================================
   v1.3 (2026-09-30) — BAG FLYOUT IS VIEWPORT-BOUND
   Asana (Jon / Becca): "when a VP has multiple items in their cart and it
   extends almost to the bottom of the page, the scroll stops working and
   it's hard to access the checkout button." The panel grew with its
   contents, so on a laptop-height window a full bag pushed View My Bag /
   Express Checkout below the fold with no way to reach them.
   Now: the open panel is a flex column that never exceeds the viewport —
   header + subtotal + buttons are pinned, the item list (.fi) scrolls
   between them. Desktop max-height is measured from the panel's own top
   (JS setFlyBounds); the calc() here is only the no-JS fallback.
   Mobile sheet: same column layout, the sheet itself no longer scrolls
   (the list does) so the buttons are always on screen there too.
   ====================================================================== */
.cpp-flyout.cpp-open{display:flex;flex-direction:column;max-height:calc(100vh - 160px);overflow:hidden;box-sizing:border-box}
.cpp-flyout .fh,.cpp-flyout .fsub,.cpp-flyout .fbtns{flex:none}
.cpp-flyout .fi{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;margin:0 -8px;padding:0 8px;scrollbar-width:thin;scrollbar-color:var(--cpp-line) transparent}
.cpp-flyout .fi::-webkit-scrollbar{width:6px}
.cpp-flyout .fi::-webkit-scrollbar-thumb{background:var(--cpp-line);border-radius:99px}
.cpp-flyout .fi::-webkit-scrollbar-track{background:transparent}
/* "more below" hint: a soft fade over the last visible row while the list still scrolls */
.cpp-flyout .fsub{position:relative}
.cpp-flyout .fi.cpp-scrolls + .fsub::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:26px;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff)}
.cpp-flyout .fmore{display:block;text-align:center;font-size:12px;font-weight:700;color:var(--cpp-teal);text-decoration:none;padding:10px 0 6px;border-top:1px solid var(--cpp-line)}
.cpp-flyout .fmore:hover{color:var(--cpp-teal-deep);text-decoration:underline}
@media (max-width:991.98px){
  .cpp-flyout.cpp-open{display:flex!important;max-height:82vh;max-height:82dvh;overflow:hidden}
}

/* v1.4 nav from server tree: wrap state + optional accent label.
   13 labels + the Directory button fit one row down to ~1300px; below that the
   row wraps on purpose: both rows centred, tighter rhythm, hairline between. */
.cpp-navrow ul.header-links.categories{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;row-gap:0}
.cpp-navrow--wrap .cpp-navrow-in{align-items:flex-start}
.cpp-navrow--wrap .cpp-dir{margin-top:7px}
.cpp-navrow.cpp-navrow--wrap ul.header-links.categories{justify-content:center!important;column-gap:2px;margin:0 auto!important}
.cpp-navrow--wrap ul.header-links.categories > li > a,.cpp-navrow--wrap ul.header-links.categories > li > .dropdown-toggle{padding:11px 9px!important}
.cpp-navrow--wrap ul.header-links.categories > li > a::after,.cpp-navrow--wrap ul.header-links.categories > li > .dropdown-toggle::after{bottom:4px}
@media (min-width:992px) and (max-width:1300px){.cpp-navrow ul.header-links.categories > li > a,.cpp-navrow ul.header-links.categories > li > .dropdown-toggle{padding-left:8px!important;padding-right:8px!important;letter-spacing:.04em}}
@media (min-width:992px) and (max-width:1100px){.cpp-navrow ul.header-links.categories > li > a,.cpp-navrow ul.header-links.categories > li > .dropdown-toggle{font-size:10.5px!important;padding-left:7px!important;padding-right:7px!important}}
.cpp-navrow ul.header-links > li.cpp-nav-accent > a{color:var(--cpp-lapis,#1C5D99)!important}