/* ============================================================================
   CPP — "THE BOOK" THEME OVERLAY · fanduel.mybrightsites.com 1 
   Phase 1 implementation: restyles the LIVE theme's existing markup.
   Targets only selectors verified on the live site (BS5 theme 14539):
     .header-container / .category-container / #homepage-carousel
     .content-area.index-page / .featured-products / .product-thumbnail
     .category-page / #filter-container / .product-page / .sign-in
     .footer-container / .mobile-slider
   Load AFTER the theme stylesheet, together with cpp/fd-fulfillment.css.
   Injected sections (ticker, board, playbook, casino band) are styled here
   and created by cpp_thebook.js + the homepage content block.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Barlow:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root {
  --fd-blue: #1493FF;
  --fd-blue-hot: #3FA9FF;
  --fd-blue-deep: #0E6FDB;
  --fd-navy: #20365B;
  --fd-ink: #0A1322;
  --fd-ink-2: #0F1B33;
  --fd-fog: #F2F5FA;
  --fd-win: #00B15C;
  --fd-win-glow: #2EE58A;
  --fd-gold: #C9A24B;
  --fd-gold-light: #EAD194;
  --fd-yellow: #FFC432;
  --fd-amber: #F2A900;
  --fd-line: #DCE4EF;
  --fd-line-dark: #243758;
  --fd-mute: #5B6B85;
  --fd-disp: 'Barlow Condensed', sans-serif;
  --fd-body: 'Barlow', system-ui, sans-serif;
  --fd-mono: 'IBM Plex Mono', monospace;
}

body { font-family: var(--fd-body); color: var(--fd-ink); }

/* ---------------------------------------------------------------- util bar (built by cpp_thebook.js) */
.cpp-util { background: var(--fd-blue); color: #fff; }
.cpp-util-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 24px;
  display: flex; justify-content: space-between; align-items: center;
  height: 42px; font-size: 13px;
}
.cpp-util a { color: #fff; font-weight: 600; text-decoration: none; opacity: .95; }
.cpp-util a:hover { opacity: 1; text-decoration: underline; }
.cpp-util .return-to-site img { height: 21px; width: auto; display: block; }
.cpp-util-right { display: flex; gap: 22px; align-items: center; }
.cpp-util-tag {
  font-family: var(--fd-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- header (white brand row) */
.header-container {
  background: #fff;
  border-bottom: 1px solid var(--fd-line) !important;
}
/* fallback: if JS hasn't moved the white return-to-site PNG out yet, hide it */
.header-container .return-to-site { display: none; }

/* brand lockup (injected by cpp_thebook.js in place of the white logo PNG) */
.navbar-brand.cpp-branded {
  display: flex; align-items: center; gap: 13px; text-decoration: none;
}
.cpp-word {
  font-family: var(--fd-disp); font-weight: 900; font-size: 26px;
  text-transform: uppercase; letter-spacing: .015em; line-height: .9;
  color: var(--fd-ink);
}
.cpp-word em { font-style: normal; color: var(--fd-blue); }
.cpp-word small {
  display: block; font-family: var(--fd-mono); font-weight: 500;
  font-size: 9px; letter-spacing: .32em; color: var(--fd-mute); margin-top: 4px;
}

/* search pill (injected; opens the theme's #search-modal) */
.cpp-search-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--fd-line); border-radius: 99px;
  background: #fff; color: var(--fd-mute); cursor: pointer;
  padding: 9px 16px; min-width: 210px; font-size: 14px;
  font-family: var(--fd-body); text-align: left; margin-right: 14px;
  transition: border-color .15s;
}
.cpp-search-pill:hover { border-color: var(--fd-blue); }

.header-container .header-icons { display: flex; align-items: center; gap: 14px; }
.header-container .header-icons .btn-outline-light {
  font-family: var(--fd-disp);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 2px solid var(--fd-navy) !important;
  color: var(--fd-navy) !important;
  background: #fff;
  border-radius: 8px;
  padding: 8px 20px;
}
.header-container .header-icons .btn-outline-light:hover {
  background: var(--fd-navy); color: #fff !important;
}

/* cart link → "slip" pill (cpp_thebook.js adds .cpp-slip-pill + label) */
.header-container .header-icons a[href="/cart"] {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--fd-navy);
  border-radius: 8px;
  padding: 8px 16px;
  transition: background .2s;
}
.header-container .header-icons a[href="/cart"]:hover { background: var(--fd-ink); }
.cpp-slip-label {
  font-family: var(--fd-disp); font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: #fff; font-size: 15px;
}
.header-container .header-icons a[href="/cart"] .cart-items-count,
.header-container .header-icons a[href="/cart"] span:not(.cpp-slip-label) {
  background: var(--fd-yellow); color: var(--fd-ink);
  font-family: var(--fd-mono); font-size: 11px; font-weight: 700;
  border-radius: 5px; padding: 1px 7px;
}

/* ---------------------------------------------------------------- nav bar */
.category-container {
  background: var(--fd-navy);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}
/* center the nav like the mock */
.category-container .navbar { justify-content: center; }
.category-container .headerLinks { flex-grow: 0 !important; justify-content: center; }
.category-container .header-links.categories { margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.category-container .header-links.categories > li.nav-item > a.nav-link {
  font-family: var(--fd-disp);
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff !important;
  padding: 12px 14px;
  border-bottom: 3px solid transparent;
  transition: .15s;
}
.category-container .header-links.categories > li.nav-item > a.nav-link:hover {
  background: rgba(255,255,255,.07);
  border-bottom-color: var(--fd-blue);
}
/* CASINO gets the gold treatment (class added by cpp_thebook.js) */
.category-container a.nav-link.cpp-casino-link { color: var(--fd-gold-light) !important; }
/* dropdowns */
.category-container .dropdown-menu {
  border: 0; border-radius: 0 0 10px 10px;
  box-shadow: 0 24px 60px rgba(10,19,34,.18);
  overflow: hidden; margin-top: 0;
}
.category-container .dropdown-menu .dropdown-item {
  font-weight: 600; font-size: 14.5px; padding: 12px 20px;
  border-bottom: 1px solid var(--fd-fog);
}
.category-container .dropdown-menu .dropdown-item:hover {
  background: var(--fd-fog); color: var(--fd-blue-deep);
}

/* ---------------------------------------------------------------- ticker (injected) */
.cpp-ticker {
  background: var(--fd-ink);
  overflow: hidden;
  border-bottom: 1px solid var(--fd-line-dark);
}
.cpp-ticker .cpp-ticker-inner {
  display: flex; white-space: nowrap; width: max-content;
  animation: cpp-tick 46s linear infinite;
}
.cpp-ticker:hover .cpp-ticker-inner { animation-play-state: paused; }
.cpp-ticker span {
  font-family: var(--fd-mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #fff;
  padding: 9px 26px; display: inline-flex; align-items: center; gap: 8px;
}
.cpp-ticker .up  { color: var(--fd-win-glow); }
.cpp-ticker .tag { color: var(--fd-yellow); }
.cpp-ticker .dot { color: var(--fd-blue-hot); }
@keyframes cpp-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- hero carousel */
.homepage-carousel-container { max-width: none !important; }
#homepage-carousel .carousel-item img { width: 100%; object-fit: cover; }
#homepage-carousel .carousel-indicators { display: flex !important; }
#homepage-carousel .carousel-indicators button {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255,255,255,.45); border: 0;
}
#homepage-carousel .carousel-indicators button.active { background: #fff; }

/* ---------------------------------------------------------------- shared section headers */
.cpp-eyebrow {
  font-family: var(--fd-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--fd-blue-deep);
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.cpp-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--fd-blue); }
.cpp-eyebrow.on-dark { color: var(--fd-blue-hot); }
.cpp-h2 {
  font-family: var(--fd-disp); font-weight: 800; text-transform: uppercase;
  line-height: .95; font-size: clamp(34px, 4.5vw, 54px); margin: 0 0 30px;
}

/* homepage "New Releases" heading → display style */
.featured-products h1 {
  font-family: var(--fd-disp); font-weight: 800; text-transform: uppercase;
  font-size: clamp(34px, 4.5vw, 54px);
  text-align: left !important;
  margin-top: 3rem !important;
}

/* ---------------------------------------------------------------- product tiles */
.product-thumbnail {
  background: #fff;
  border: 1px solid var(--fd-line);
  border-radius: 14px;
  overflow: hidden;
  transition: .22s;
  position: relative;
  padding-bottom: 14px;
}
.product-thumbnail:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(10,19,34,.18);
  border-color: var(--fd-blue);
}
.product-thumbnail .thumbnail-img-container {
  background: var(--fd-fog);
  position: relative;
}
.product-thumbnail .thumbnail-img-container img {
  mix-blend-mode: multiply;
  padding: 14px;
  transition: transform .35s;
}
.product-thumbnail:hover .thumbnail-img-container img { transform: scale(1.05); }
.product-thumbnail .thumbnail-description-container { padding: 4px 16px 0; }
.product-thumbnail .thumbnail-description-container a { text-decoration: none; color: inherit; }
.product-thumbnail h5.card-title {
  font-family: var(--fd-disp);
  font-weight: 700 !important;
  font-size: 19px;
  line-height: 1.08 !important;
  text-transform: uppercase;
  letter-spacing: .015em;
  color: var(--fd-ink);
}
/* price → odds chip */
.product-thumbnail p.card-text {
  display: inline-block;
  font-family: var(--fd-mono);
  font-weight: 600;
  font-size: 14px;
  background: var(--fd-navy);
  color: #fff;
  border-radius: 7px;
  padding: 6px 12px;
  margin: 8px 0 0;
  transition: background .2s;
}
.product-thumbnail:hover p.card-text { background: var(--fd-blue); }
.product-thumbnail p.card-text del,
.product-thumbnail p.card-text s {
  opacity: .55; font-size: 11.5px; margin-right: 7px;
}
/* sale badge → green price-drop chip pinned to image corner */
.product-thumbnail .discount-container {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--fd-win); color: #fff;
  font-family: var(--fd-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; border-radius: 6px; padding: 4px 9px;
}
/* LINE # tag + plate slot (added by cpp_thebook.js / snippets) */
.cpp-line-no {
  display: block;
  font-family: var(--fd-mono); font-size: 10px; letter-spacing: .16em;
  color: var(--fd-mute); margin: 8px 0 2px; text-transform: uppercase;
}
.product-thumbnail .fd-plate-slot { display: block; margin-top: 6px; }

/* ---------------------------------------------------------------- category page */
.category-page .products-result-verbiage {
  font-family: var(--fd-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fd-mute);
}
#filter-container.accordion { border-radius: 11px; overflow: visible; }
#filter-container .accordion-item {
  border: 1px solid var(--fd-line); border-radius: 11px !important;
  margin-bottom: 10px; overflow: hidden; background: #fff;
}
#filter-container .accordion-button {
  font-family: var(--fd-disp); font-weight: 700; text-transform: uppercase;
  font-size: 16px; letter-spacing: .06em; color: var(--fd-ink);
  box-shadow: none !important;
}
#filter-container .accordion-button:not(.collapsed) { color: var(--fd-blue-deep); }
#filter-container .form-check-input { accent-color: var(--fd-blue); }
#filter-container .form-check-input:checked { background-color: var(--fd-blue); border-color: var(--fd-blue); }
#filter-container .badge.bg-secondary {
  background: transparent !important; color: var(--fd-mute) !important;
  font-family: var(--fd-mono); font-size: 10.5px;
}
.sort-form select, .sort-form .form-select {
  border: 1.5px solid var(--fd-line); border-radius: 8px; font-weight: 600;
}

/* ---------------------------------------------------------------- PDP */
.product-page .product-gallery {
  background: var(--fd-fog);
  border: 1px solid var(--fd-line);
  border-radius: 16px;
  padding: 18px;
}
.product-page .product-gallery img { mix-blend-mode: multiply; }
.product-page .product-header h1 {
  font-family: var(--fd-disp); font-weight: 800; text-transform: uppercase;
  line-height: .98; font-size: clamp(30px, 3.4vw, 44px);
}
.product-page .product-header .fd-plate-slot { display: block; margin: 10px 0 4px; }
/* price block(s) */
.product-page .product-header [class*="price"],
.product-page form [class*="price"] { font-family: var(--fd-disp); }
/* main CTA */
.product-page form .btn-primary,
.product-page form input[type="submit"],
.product-page form button[type="submit"] {
  background: var(--fd-blue) !important;
  border-color: var(--fd-blue) !important;
  font-family: var(--fd-disp); font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; font-size: 18px;
  border-radius: 9px; padding: 13px 30px;
  box-shadow: 0 8px 24px rgba(20,147,255,.35);
  transition: .2s;
}
.product-page form .btn-primary:hover,
.product-page form input[type="submit"]:hover,
.product-page form button[type="submit"]:hover {
  background: var(--fd-blue-deep) !important; transform: translateY(-1px);
}
/* size / option chips — BrightSites renders sub-option buttons on some products */
.product-page form .btn-group .btn,
.product-page form label.btn {
  min-width: 54px; border: 1.5px solid var(--fd-line) !important;
  border-radius: 9px !important; margin-right: 8px;
  font-family: var(--fd-disp); font-weight: 700;
}
.product-page form .btn-group .btn.active,
.product-page form label.btn.active {
  background: var(--fd-navy) !important; color: #fff !important;
  border-color: var(--fd-navy) !important;
}
/* recently viewed / related headings */
.recently-viewed-products h2, .related-products h2 {
  font-family: var(--fd-disp); font-weight: 800; text-transform: uppercase;
  font-size: 34px;
}

/* ---------------------------------------------------------------- login */
.sign-in, .nav-tabs + .row.border { border-color: var(--fd-line) !important; }
ul.nav.nav-tabs .nav-link {
  font-family: var(--fd-disp); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: 16px; color: var(--fd-mute);
}
ul.nav.nav-tabs .nav-link.active {
  background: var(--fd-navy); color: #fff; border-color: var(--fd-navy);
}
.sign-in .btn, .sign-in input[type="submit"] {
  background: var(--fd-blue); border-color: var(--fd-blue); color: #fff;
  font-family: var(--fd-disp); font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; border-radius: 9px; padding: 12px 28px;
}
.sign-in .btn:hover, .sign-in input[type="submit"]:hover { background: var(--fd-blue-deep); }
.sign-in label {
  font-family: var(--fd-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fd-mute);
}
.sign-in input.form-control { border: 1.5px solid var(--fd-line); border-radius: 9px; padding: 12px 14px; }
.sign-in input.form-control:focus { border-color: var(--fd-blue); box-shadow: 0 0 0 3px rgba(20,147,255,.15); }

/* ---------------------------------------------------------------- footer */
.footer-container {
  background: var(--fd-ink);
  color: #B9C6DC;
  margin-top: 4rem !important;
  padding: 40px 0 20px;
}
.footer-container h4, .footer-container h5 {
  font-family: var(--fd-mono); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: #9FB0C9; font-weight: 600 !important;
}
.footer-container a { color: #B9C6DC; text-decoration: none; }
.footer-container a:hover { color: #fff; }
.footer-container .nav-link { padding-left: 0; color: #B9C6DC; font-size: 14.5px; }
.footer-container .accordion-item { background: transparent !important; border-color: var(--fd-line-dark); }
.footer-container .accordion-button { background: transparent; color: #fff; }

/* ---------------------------------------------------------------- mobile drawer */
.mobile-slider { background: var(--fd-ink) !important; }
.mobile-slider a, .mobile-slider .nav-link {
  color: #fff !important;
  font-family: var(--fd-disp); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: 17px;
}

/* ============================================================================
   INJECTED HOMEPAGE SECTIONS (markup in cpp_home-content snippet/content block)
   ============================================================================ */

/* full-bleed dark band helper — breaks out of the content container */
.cpp-band {
  width: 100vw; position: relative;
  left: 50%; transform: translateX(-50%);
  padding: 72px max(28px, calc((100vw - 1280px) / 2));
}

/* --- the board --- */
.cpp-board { background: var(--fd-ink); color: #fff; }
.cpp-board-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cpp-tile {
  position: relative; display: flex; flex-direction: column;
  background: var(--fd-ink-2); border: 1px solid var(--fd-line-dark);
  border-radius: 14px; padding: 24px 24px 20px; min-height: 158px;
  text-decoration: none !important; color: #fff !important;
  overflow: hidden; transition: .22s;
}
.cpp-tile:hover {
  border-color: var(--fd-blue); transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(20,147,255,.22);
}
.cpp-tile .t-eyebrow {
  font-family: var(--fd-mono); font-size: 10.5px; letter-spacing: .24em;
  color: #9FB0C9; text-transform: uppercase;
}
.cpp-tile h3 {
  font-family: var(--fd-disp); font-weight: 800; text-transform: uppercase;
  font-size: 28px; margin: 8px 0 0; line-height: .95; color: #fff;
}
.cpp-tile .lines {
  margin-top: auto; padding-top: 16px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--fd-mono); font-size: 12px; letter-spacing: .12em;
  color: var(--fd-win-glow);
}
.cpp-tile .lines .go { color: var(--fd-blue-hot); font-size: 18px; }
.cpp-tile.gold { background: linear-gradient(145deg, #151109 0%, #241B0C 60%, #191307 100%); border-color: #4A3B1B; }
.cpp-tile.gold h3 { color: var(--fd-gold-light); }
.cpp-tile.gold .lines { color: var(--fd-gold-light); }
.cpp-tile.gold:hover { border-color: var(--fd-gold); box-shadow: 0 18px 44px rgba(201,162,75,.25); }

/* --- casino band --- */
.cpp-casino { background: linear-gradient(160deg, #120E06 0%, #1E1608 55%, #0D0A04 100%); color: #fff; }
.cpp-casino .cpp-eyebrow { color: var(--fd-gold-light); }
.cpp-casino .cpp-eyebrow::before { background: var(--fd-gold); }
.cpp-casino h2 em { font-style: normal; color: var(--fd-gold-light); }
.cpp-casino p { color: #D8CDB2; max-width: 560px; font-size: 16px; }
.cpp-btn-gold {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--fd-gold); color: var(--fd-ink) !important;
  font-family: var(--fd-disp); font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; font-size: 17px;
  border-radius: 9px; padding: 13px 28px; text-decoration: none !important;
  transition: .2s;
}
.cpp-btn-gold:hover { background: var(--fd-gold-light); }

/* --- playbook --- */
.cpp-playbook { background: var(--fd-navy); color: #fff; }
.cpp-playbook .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.cpp-play {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px; padding: 24px;
}
.cpp-play .num { font-family: var(--fd-mono); font-size: 11px; letter-spacing: .2em; color: var(--fd-blue-hot); }
.cpp-play h3 {
  font-family: var(--fd-disp); font-weight: 800; text-transform: uppercase;
  font-size: 23px; margin: 10px 0 8px; color: #fff;
}
.cpp-play p { font-size: 14.5px; color: #C9D6EA; margin: 0; }
.cpp-play p b { color: #fff; }

/* --- primary blue CTA reused --- */
.cpp-btn-blue {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--fd-blue); color: #fff !important;
  font-family: var(--fd-disp); font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; font-size: 17px;
  border-radius: 9px; padding: 13px 28px; text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(20,147,255,.35); transition: .2s;
}
.cpp-btn-blue:hover { background: var(--fd-blue-deep); transform: translateY(-1px); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 991px) {
  .cpp-board-grid { grid-template-columns: repeat(2, 1fr); }
  .cpp-playbook .cols { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .cpp-board-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   FULFILLMENT PLATES (merged — one CSS file total)
   Rule: SKU contains "-OD-" -> MADE TO ORDER (amber) · else IN STOCK (green)
   ============================================================================ */
.fd-plate{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;border-radius:5px;padding:4px 8px;line-height:1.4;white-space:nowrap}
.fd-plate--stock{background:rgba(0,177,92,.12);color:#008747}
.fd-plate--mto{background:rgba(242,169,0,.14);color:#9A6C00}
[data-fd-status="mto"].fd-cart-line,.fd-cart-line[data-fd-status="mto"]{border-left:4px solid #F2A900}
[data-fd-status="stock"].fd-cart-line,.fd-cart-line[data-fd-status="stock"]{border-left:4px solid #1493FF}
.fd-on-dark .fd-plate--stock{background:rgba(46,229,138,.14);color:#2EE58A}
.fd-on-dark .fd-plate--mto{background:rgba(255,196,50,.16);color:#FFC432}


/* ---- v3.1 header fixes ---- */
.cpp-util .return-to-site{position:static !important;display:block !important;top:auto !important;left:auto !important}
@media (min-width:992px){
  .header-container .navbar-brand.logo-container{position:static !important;transform:none !important;margin-right:auto !important;left:auto !important}
}
.cpp-search-pill{min-width:170px}


/* ---- v3.2 white header + ticker links ---- */
.header-container .navbar-brand { background: var(--fd-blue); border-radius: 10px; padding: 6px 14px; }
.header-container .navbar-brand img { display: block; }
.header-container .header-icons > a:not([href*='cart']) { color: var(--fd-ink); font-weight: 600; }
.header-container .navbar > button svg, .header-container .navbar > button svg * { fill: var(--fd-navy) !important; }
.cpp-ticker a { color: inherit; text-decoration: none; }
.cpp-ticker a:hover span { text-decoration: underline; }


/* ---- v3.3 homepage polish ---- */
body { overflow-x: hidden; }
.cpp-board .cpp-h2, .cpp-casino .cpp-h2, .cpp-playbook .cpp-h2 { color: #fff; }
.product-thumbnail .thumbnail-description-container { text-align: left; }
.product-thumbnail .thumbnail-description-container a { display: block; }


/* ---- v3.4 dropdowns + account + gold + util centering ---- */
.category-container .header-links.categories > li.nav-item > a.nav-link.cpp-casino-link { color: var(--fd-gold-light) !important; }
.cpp-util .return-to-site { display: flex !important; align-items: center; margin: 0; padding: 0; line-height: 1; }
.category-container .dropdown-menu, .header-container .dropdown-menu {
  border: 0; border-radius: 12px; box-shadow: 0 24px 60px rgba(10,19,34,.22);
  padding: 8px; min-width: 230px; margin-top: 6px; background: #fff;
}
.category-container .dropdown-menu .dropdown-item, .header-container .dropdown-menu .dropdown-item {
  font-family: var(--fd-body); font-weight: 600; font-size: 14.5px; color: var(--fd-ink);
  padding: 11px 14px; border-radius: 8px; border-bottom: 0; background: transparent;
}
.category-container .dropdown-menu .dropdown-item:hover, .header-container .dropdown-menu .dropdown-item:hover {
  background: var(--fd-fog); color: var(--fd-blue-deep);
}
.header-container .dropdown-menu .cpp-logout { background: var(--fd-blue); color: #fff !important; margin-top: 6px; }
.header-container .dropdown-menu .cpp-logout:hover { background: var(--fd-blue-deep); color: #fff !important; }
.cpp-account .dropdown-toggle { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; color: var(--fd-ink); border: 0; background: transparent; box-shadow: none; }
.cpp-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--fd-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--fd-mono); font-size: 11px; font-weight: 700; }
.cpp-balance { color: var(--fd-ink); font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.header-container .navbar-brand.cpp-logo-light { background: transparent; padding: 6px 0; }


/* ---- v3.5 topbar/dropdown/ticker/drawer polish ---- */
.cpp-util .return-to-site{position:static !important;height:42px;display:flex !important;align-items:center !important;margin:0;padding:0}
.cpp-util-inner > *{align-self:center}
.cpp-util-tag{opacity:.85}
.category-container .dropdown-menu{border:0;border-radius:0 0 10px 10px;margin-top:0 !important;padding:0;min-width:250px;overflow:hidden;box-shadow:0 24px 60px rgba(10,19,34,.18)}
.category-container .dropdown-menu .dropdown-item{font-weight:600;font-size:14.5px;color:var(--fd-ink);padding:13px 20px;border-radius:0;border-bottom:1px solid var(--fd-fog)}
.category-container .dropdown-menu li:last-child .dropdown-item{background:var(--fd-fog);font-family:var(--fd-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fd-blue-deep);border-bottom:0}
.cpp-ticker b{font-weight:500;font-style:normal}
.cpp-ticker .pr{color:#fff}
.mobile-slider{background:var(--fd-ink) !important}
.mobile-slider > a.d-block{padding:14px 16px !important;border-bottom:1px solid var(--fd-line-dark)}
.mobile-slider > a.d-block img{height:18px;width:auto}
.mobile-slider .nav > li > a{font-family:var(--fd-disp);font-weight:700;text-transform:uppercase;font-size:17px;letter-spacing:.08em;color:#fff !important;padding:12px 16px;border-bottom:1px solid var(--fd-line-dark);display:block}
.mobile-slider .nav ul a, .mobile-slider .nav li li a{font-family:var(--fd-body);font-weight:500;text-transform:none;font-size:14.5px;color:#C9D6EA !important;padding:8px 16px 8px 30px;border-bottom:0}

.cpp-util .return-to-site, .cpp-util .return-to-site img { transform: none !important; /* v3.5b */ top: auto !important; }


/* ---- v3.6 drawer hierarchy (flat list: parents a.ps-0, subs a.ms-2) ---- */
.mobile-slider .nav > li > a.ps-0{font-family:var(--fd-disp);font-weight:700;text-transform:uppercase;font-size:17px;letter-spacing:.08em;color:#fff !important;padding:12px 16px !important;margin:0 !important;border-bottom:1px solid var(--fd-line-dark);display:block}
.mobile-slider .nav > li > a.ms-2{font-family:var(--fd-body);font-weight:500;text-transform:none;font-size:14.5px;color:#C9D6EA !important;padding:8px 16px 8px 30px !important;margin:0 !important;border-bottom:0;display:block}


/* ---- v3.7 mobile drawer + hamburger + util ---- */
@media (max-width:991px){ .cpp-util-tag{display:none} }
.mobile-slider::before,.mobile-slider::after,.mobile-slider > a.d-block::before,.mobile-slider > a.d-block::after{display:none !important;content:none !important}
#mobile-slider-button{background:transparent !important;opacity:1 !important}
#mobile-slider-button svg, #mobile-slider-button svg *{fill:var(--fd-navy) !important}
.cpp-caret{float:right;background:transparent;border:0;color:var(--fd-blue-hot);font-size:12px;line-height:1.4;padding:2px 8px;transition:transform .2s}
li.cpp-open > a .cpp-caret{transform:rotate(180deg)}

/* ---- v3.8 close-icon stroke ---- */
#mobile-slider-button svg line, #mobile-slider-button svg *[stroke]{stroke:var(--fd-navy) !important}


/* ═══════════════════════════════════════════════════════════════════════════
   v3.5 · MOBILE DRAWER — SUBCATEGORY DROPDOWNS (hamburger menu)
   Parents stay collapsed; caret becomes a real, visible tap target.
   Stock theme paints the drawer list bright blue — pin it to ink.
   ═══════════════════════════════════════════════════════════════════════════ */
.mobile-slider ul.nav { background: var(--fd-ink) !important; }
.mobile-slider ul.nav > .nav-item { border-bottom: 1px solid rgba(255,255,255,.08); }
.mobile-slider .nav-link { display: flex !important; align-items: center; padding: 12px 16px !important; }
.mobile-slider .nav-link > span { flex: 1 1 auto; }

/* dropdown toggle — was 12px blue-on-blue (invisible) */
.mobile-slider .cpp-caret {
  float: none; margin-left: auto; flex: 0 0 46px;
  display: flex; align-items: center; justify-content: center;
  height: 34px; padding: 0;
  color: #fff; font-size: 17px; line-height: 1;
  border-left: 1px solid rgba(255,255,255,.16);
}
.mobile-slider li.cpp-open > a { background: rgba(63,169,255,.08); }
.mobile-slider li.cpp-open > a .cpp-caret { color: var(--fd-yellow); }

/* expanded subcategories — indented dropdown rows on ink-2 w/ blue rail */
.mobile-slider .nav-link.ms-2 {
  margin-left: 0 !important;
  padding: 10px 16px 10px 28px !important;
  font-size: 14px !important; font-weight: 600;
  letter-spacing: .1em;
  color: var(--fd-fog) !important;
  background: var(--fd-ink-2);
  border-left: 3px solid var(--fd-blue-hot);
}


/* ═══════════════════════════════════════════════════════════════════════════
   v3.6 · MOCKUP PARITY PASS — hero overlay, product cards, casino floor band,
   collab band, board extras, footer, white-seam fixes, fd-fulfillment plates
   (kit CSS inlined — plates injected by kit JS inlined in cpp_thebook.js)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── white seams between bands ── */
.content-container:has(.index-page) { margin-top: 0 !important; }
.footer-container { margin-top: 0 !important; }

/* ── hero: compact banner + overlay on the stock carousel ── */
.homepage-carousel-container { position: relative; background: var(--fd-blue); }
.homepage-carousel-container .carousel-item img {
  width: 100%; height: clamp(420px, 44vw, 640px);
  object-fit: cover; object-position: center;
}
.cpp-hero-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,19,34,0) 55%, rgba(10,19,34,.72) 100%);
}
.cpp-hero-content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 0 max(28px, calc((100vw - 1280px) / 2)) 44px;
  pointer-events: none;
}
.cpp-hero-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cpp-hero-inner a { pointer-events: auto; }
.cpp-hero-kick {
  font-family: var(--fd-mono); font-size: 12px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--fd-yellow); margin: 0 0 10px;
}
.cpp-hero-sub {
  margin: 0; max-width: 560px; font-size: 17px; font-weight: 500;
  color: #EAF3FF; text-shadow: 0 1px 12px rgba(10,19,34,.5);
}
.cpp-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.cpp-btn-hero, .cpp-btn-heroghost {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fd-disp); font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; border-radius: 9px; transition: .2s; border: none;
  font-size: 19px; text-decoration: none;
}
.cpp-btn-hero { background: var(--fd-blue); color: #fff !important; padding: 15px 34px; box-shadow: 0 8px 24px rgba(20,147,255,.35); }
.cpp-btn-hero:hover { background: var(--fd-blue-deep); transform: translateY(-1px); }
.cpp-btn-heroghost { background: transparent; color: #fff !important; padding: 13px 30px; border: 2px solid rgba(255,255,255,.75); }
.cpp-btn-heroghost:hover { background: #fff; color: var(--fd-ink) !important; }
.homepage-carousel-container .carousel-indicators { top: 22px; right: 28px; left: auto; bottom: auto; margin: 0; }
@media (max-width: 760px) {
  .homepage-carousel-container .carousel-item img { height: min(64vw, 340px); }
  .cpp-hero-scrim { display: none; }
  .cpp-hero-content { position: static; background: var(--fd-ink); padding: 20px 18px 26px; }
  .homepage-carousel-container .carousel-indicators { display: none; }
}

/* ── product cards → mockup spec ── */
.product-thumbnail {
  background: #fff; border: 1px solid var(--fd-line); border-radius: 14px;
  overflow: hidden; transition: .22s; display: flex; flex-direction: column; position: relative;
}
.product-thumbnail:hover { transform: translateY(-5px); box-shadow: 0 24px 60px rgba(10,19,34,.18); border-color: var(--fd-blue); }
.product-thumbnail .thumbnail-img-container {
  position: relative; background: var(--fd-fog); aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.product-thumbnail .thumbnail-img-container a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.product-thumbnail .thumbnail-img-container img {
  width: 100%; height: 100%; object-fit: contain;
  mix-blend-mode: multiply; padding: 16px; transition: .35s;
}
.product-thumbnail:hover .thumbnail-img-container img { transform: scale(1.05); }
.product-thumbnail .thumbnail-description-container { padding: 16px 18px 18px !important; flex: 1; display: flex; text-align: left; }
.product-thumbnail .thumbnail-description-container > a { display: flex; flex-direction: column; gap: 9px; flex: 1; text-decoration: none; }
.cpp-line-no { font-family: var(--fd-mono); font-size: 10px; letter-spacing: .16em; color: #5B6B85; }
.product-thumbnail h5.card-title {
  font-family: var(--fd-disp); font-weight: 700 !important; font-size: 19.5px;
  line-height: 1.08 !important; text-transform: uppercase; letter-spacing: .015em;
  min-height: 2.1em; margin: 0; color: var(--fd-ink); text-align: left;
}
.product-thumbnail .card-text {
  margin: auto 0 0; align-self: flex-start;
  font-family: var(--fd-mono); font-weight: 600; font-size: 15px;
  background: var(--fd-navy); color: #fff; border-radius: 7px;
  padding: 6px 12px; letter-spacing: .02em;
}
.product-thumbnail:hover .card-text { background: var(--fd-blue); }
.product-thumbnail .card-text del { opacity: .55; font-size: 11.5px; margin-right: 7px; }
.product-thumbnail .discount-container { position: absolute; top: 12px; left: 12px; z-index: 2; margin: 0; }
.product-thumbnail .fd-plate-slot { display: block; }

/* ── fd-fulfillment plates (kit CSS, inlined) ── */
.fd-plate {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fd-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  border-radius: 5px; padding: 4px 8px; line-height: 1.4; white-space: nowrap;
}
.fd-plate--stock { background: rgba(0,177,92,.12); color: #008747; }
.fd-plate--mto   { background: rgba(242,169,0,.14); color: #9A6C00; }
[data-fd-status="mto"].fd-cart-line,  .fd-cart-line[data-fd-status="mto"]  { border-left: 4px solid #F2A900; }
[data-fd-status="stock"].fd-cart-line, .fd-cart-line[data-fd-status="stock"] { border-left: 4px solid #1493FF; }
.fd-on-dark .fd-plate--stock { background: rgba(46,229,138,.14); color: #2EE58A; }
.fd-on-dark .fd-plate--mto   { background: rgba(255,196,50,.16); color: #FFC432; }

/* ── board extras: radial glow, watermarks, see-all ── */
.cpp-band.cpp-board { position: relative; }
.cpp-band.cpp-board::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 380px at 85% -10%, rgba(20,147,255,.22), transparent 60%),
              radial-gradient(700px 300px at 8% 110%, rgba(20,147,255,.14), transparent 60%);
}
.cpp-band.cpp-board > * { position: relative; }
.cpp-tile-mark {
  position: absolute; right: -14px; bottom: -26px;
  font-family: var(--fd-disp); font-weight: 900; font-size: 120px;
  color: rgba(255,255,255,.045); text-transform: uppercase; line-height: 1; pointer-events: none;
}
.cpp-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; }
.cpp-sec-head .cpp-h2 { margin-bottom: 0; }
.cpp-see-all {
  font-family: var(--fd-mono); font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fd-blue-hot) !important;
  border-bottom: 2px solid var(--fd-blue-hot); padding-bottom: 4px;
  white-space: nowrap; text-decoration: none; transition: .2s;
}
.cpp-see-all:hover { color: #fff !important; }

/* ── collab band (Merch Book × Peak Design) ── */
.cpp-band.cpp-collab { background: var(--fd-blue); color: #fff; position: relative; overflow: hidden; padding-top: 0; padding-bottom: 0; }
.cpp-collab-grid { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 430px; }
.cpp-collab-txt { padding: 70px 40px 70px 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; position: relative; z-index: 2; }
.cpp-collab .cpp-h2 { color: #fff; }
.cpp-collab .cpp-x { color: var(--fd-yellow); }
.cpp-collab-txt > p:not(.cpp-eyebrow) { color: #EAF3FF; max-width: 480px; font-size: 16.5px; margin: 0; }
.cpp-collab-art { position: relative; }
.cpp-collab-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cpp-collab-art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--fd-blue) 0%, rgba(20,147,255,0) 40%); }
.cpp-mini-grid { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.cpp-mini {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  border-radius: 9px; padding: 10px 14px;
  font-family: var(--fd-mono); font-size: 11.5px; letter-spacing: .06em;
}
.cpp-mini b { display: block; font-size: 13px; margin-top: 2px; }
@media (max-width: 1080px) {
  .cpp-collab-grid { grid-template-columns: 1fr; }
  .cpp-collab-art { min-height: 300px; order: -1; }
  .cpp-collab-art::before { background: linear-gradient(0deg, var(--fd-blue) 0%, rgba(20,147,255,0) 55%); }
  .cpp-collab-txt { padding: 40px 0 60px; }
}

/* ── casino floor band (was unstyled → rendered white) ── */
.cpp-band.cpp-casino {
  background: linear-gradient(160deg, #120E06 0%, #1E1608 55%, #0D0A04 100%);
  color: #fff; position: relative; overflow: hidden;
}
.cpp-band.cpp-casino::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 300px at 90% 0%, rgba(201,162,75,.16), transparent 65%);
}
.cpp-band.cpp-casino > * { position: relative; }
.cpp-casino .cpp-eyebrow { color: var(--fd-gold-light); }
.cpp-casino .cpp-eyebrow::before { background: var(--fd-gold); }
.cpp-casino .cpp-h2 { color: #fff; }
.cpp-casino .cpp-h2 em { font-style: normal; color: var(--fd-gold-light); }
.cpp-casino > p:not(.cpp-eyebrow) { color: #D8C89A; max-width: 600px; }

/* ── footer → mockup spec ── */
.footer-container { background: var(--fd-ink); color: #B9C6DC; padding: 66px 0 34px; }
.footer-container h4, .footer-container h5 {
  font-family: var(--fd-mono); font-size: 11px !important; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: #9FB0C9; margin-bottom: 16px;
}
.footer-container .nav-link { padding: 5px 0 !important; font-size: 14.5px; color: #B9C6DC !important; transition: .15s; }
.footer-container .nav-link:hover { color: #fff !important; }
.cpp-ftr-brandline { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cpp-ftr-word { font-family: var(--fd-disp); font-weight: 900; font-size: 23px; color: #fff; text-transform: uppercase; line-height: .95; }
.cpp-ftr-word em { font-style: normal; color: var(--fd-blue-hot); }
.cpp-ftr-small { font-size: 13.5px; max-width: 320px; color: #8FA1BD; }
.cpp-ftr-small a { color: var(--fd-blue-hot); }
.cpp-ftr-soc {
  width: 38px; height: 38px; border: 1px solid var(--fd-line-dark); border-radius: 9px;
  display: inline-flex !important; align-items: center; justify-content: center;
  margin-right: 10px; padding: 0 !important; transition: .15s;
}
.cpp-ftr-soc:hover { background: var(--fd-blue); border-color: var(--fd-blue); }
.cpp-ftr-base {
  max-width: 1280px; margin: 44px auto 0; padding: 26px 28px 0;
  border-top: 1px solid var(--fd-line-dark);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--fd-mono); font-size: 11px; letter-spacing: .12em;
  color: #6E7F9C; flex-wrap: wrap; gap: 10px;
}

/* v3.6.1 · seam: kill content-container bottom margin + trailing padding above footer (index) */
.content-container:has(.index-page) { margin-bottom: 0 !important; }
.content-container:has(.index-page) > .container-fluid { padding-bottom: 0 !important; }

/* v3.6.2 · card sale price: readable strikethrough on navy chip · footer real logo */
.product-thumbnail .card-text del { color: #fff !important; opacity: .6; font-size: 11.5px; margin-right: 7px; }
.product-thumbnail .card-text del * { color: inherit !important; }
.cpp-ftr-logo { height: 30px; width: auto; display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   v3.7 · util bar standardization · grid spacing fix · THE SLIP flyout
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── util bar: one font treatment for everything up top ── */
.cpp-util a, .cpp-util .cpp-util-tag {
  font-family: var(--fd-mono) !important; font-size: 11.5px !important; font-weight: 600 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important;
  color: #fff !important; text-decoration: none;
}
.cpp-util a:hover { text-decoration: underline; }
.cpp-util .cpp-util-tag { opacity: .75; }
.cpp-util .return-to-site { display: inline-flex; align-items: center; }

/* ── product grid: even spacing at every width (kills theme inline widths) ── */
.product-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px;
  margin: 0 !important; padding-right: 0 !important; width: auto !important;
}
.product-list > .product-thumbnail { width: auto !important; margin: 0 !important; }
@media (max-width: 575.98px) {
  .product-list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ── THE SLIP flyout ── */
.cpp-slip-overlay{position:fixed;inset:0;background:rgba(10,19,34,.55);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:2000}
.cpp-slip-overlay.open{opacity:1;visibility:visible}
.cpp-slip-panel{position:fixed;z-index:2001;background:#fff;font-family:'Barlow',sans-serif;display:flex;flex-direction:column;box-shadow:0 0 50px rgba(10,19,34,.35);top:0;right:0;height:100%;width:min(420px,92vw);transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.3,1)}
.cpp-slip-overlay.open .cpp-slip-panel{transform:translateX(0)}
@media(max-width:1024.98px){.cpp-slip-panel{top:auto;right:0;left:0;bottom:0;width:100%;height:auto;max-height:88vh;transform:translateY(100%);border-radius:20px 20px 0 0}.cpp-slip-overlay.open .cpp-slip-panel{transform:translateY(0)}}
.cpp-slip-grip{display:none}
@media(max-width:1024.98px){.cpp-slip-grip{display:block;width:42px;height:5px;border-radius:3px;background:var(--fd-line);margin:8px auto 0}}
.cpp-slip-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--fd-ink);border-bottom:3px solid var(--fd-blue);flex:0 0 auto}
.cpp-slip-title{font-family:var(--fd-disp);font-weight:800;text-transform:uppercase;font-size:22px;letter-spacing:.05em;color:#fff;display:flex;align-items:center;gap:10px}
.cpp-slip-cnt{background:var(--fd-yellow);color:var(--fd-ink);font-family:var(--fd-mono);font-size:12px;font-weight:700;min-width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;padding:0 7px}
.cpp-slip-x{background:rgba(255,255,255,.08);border:none;width:34px;height:34px;border-radius:50%;cursor:pointer;color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center;transition:background .15s}
.cpp-slip-x:hover{background:var(--fd-blue)}
.cpp-slip-body{flex:1 1 auto;overflow-y:auto;padding:8px 20px}
.cpp-slip-leg{display:flex;gap:12px;padding:14px 0 14px 12px;border-left:4px solid var(--fd-blue);border-bottom:1px solid var(--fd-fog);margin:8px 0}
.cpp-slip-leg:last-child{border-bottom:none}
.cpp-slip-thumb{width:66px;height:66px;border-radius:10px;object-fit:contain;padding:3px;background:var(--fd-fog);border:1px solid var(--fd-line);flex:0 0 auto;mix-blend-mode:multiply}
.cpp-slip-info{flex:1 1 auto;min-width:0}
.cpp-slip-legno{font-family:var(--fd-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fd-blue-deep)}
.cpp-slip-name{font-family:var(--fd-disp);font-weight:700;text-transform:uppercase;font-size:16.5px;line-height:1.1;color:var(--fd-ink);margin:2px 0 3px}
.cpp-slip-opts{font-family:var(--fd-mono);font-size:10.5px;letter-spacing:.03em;color:#5B6B85;margin:0 0 8px;line-height:1.7}
.cpp-slip-opts b{color:var(--fd-navy);font-weight:600}
.cpp-slip-row2{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cpp-slip-qty{display:inline-flex;align-items:center;border:1.5px solid var(--fd-line);border-radius:8px;overflow:hidden}
.cpp-slip-qty button{width:28px;height:28px;border:none;background:var(--fd-fog);color:var(--fd-navy);font-size:16px;font-weight:700;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;transition:.12s}
.cpp-slip-qty button:hover{background:var(--fd-blue);color:#fff}
.cpp-slip-qty button:disabled{opacity:.35;cursor:default}
.cpp-slip-qty span{min-width:30px;text-align:center;font-family:var(--fd-mono);font-size:13px;font-weight:700;color:var(--fd-ink)}
.cpp-slip-price{font-family:var(--fd-mono);font-size:14px;font-weight:700;color:var(--fd-ink);white-space:nowrap}
.cpp-slip-remove{background:none;border:none;color:#9FB0C9;cursor:pointer;font-family:var(--fd-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 0;margin-top:6px;transition:color .12s}
.cpp-slip-remove:hover{color:#E8483F}
.cpp-slip-foot{flex:0 0 auto;padding:14px 20px 20px;border-top:1px solid var(--fd-line);background:#fff}
.cpp-slip-clearrow{display:flex;justify-content:flex-end;margin-bottom:8px}
.cpp-slip-clear{background:none;border:none;color:#9FB0C9;cursor:pointer;font-family:var(--fd-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;transition:color .12s}
.cpp-slip-clear:hover{color:#E8483F}
.cpp-slip-sub{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
.cpp-slip-sub-l{font-family:var(--fd-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#5B6B85}
.cpp-slip-sub-v{font-family:var(--fd-disp);font-weight:800;font-size:26px;color:var(--fd-ink)}
.cpp-slip-note{font-size:11.5px;color:#9FB0C9;margin:0 0 14px}
.cpp-slip-btns{display:flex;gap:10px}
.cpp-slip-btn{flex:1;text-align:center;padding:13px;border-radius:9px;font-family:var(--fd-disp);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:16px;text-decoration:none;cursor:pointer;border:none;transition:.15s}
.cpp-slip-btn.secondary{background:var(--fd-fog);color:var(--fd-ink)}
.cpp-slip-btn.secondary:hover{background:var(--fd-line)}
.cpp-slip-btn.primary{background:var(--fd-win);color:#fff;box-shadow:0 6px 18px rgba(0,177,92,.35)}
.cpp-slip-btn.primary:hover{background:#009A50}
.cpp-slip-loading,.cpp-slip-empty{text-align:center;padding:50px 20px;color:#5B6B85;font-size:14px}
.cpp-slip-empty-ic{font-size:38px;margin-bottom:10px}
.cpp-slip-spinner{width:30px;height:30px;border:3px solid var(--fd-line);border-top-color:var(--fd-blue);border-radius:50%;margin:0 auto 12px;animation:cppSpin .7s linear infinite}
@keyframes cppSpin{to{transform:rotate(360deg)}}
.cpp-slip-body.busy{opacity:.5;pointer-events:none}

/* ── v3.7.2 · cards: fixed 4-col grid · image paint stability (drop blend — Chromium
   zoom+mix-blend-mode paint bug rendered imgs oversized/offset at some zoom levels) ── */
.product-list { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .product-list { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .product-list { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
.product-thumbnail .thumbnail-img-container { background: #fff; isolation: isolate; border-bottom: 1px solid var(--fd-fog); }
.product-thumbnail .thumbnail-img-container img { mix-blend-mode: normal; }

/* ── v3.7.3 · homepage: section padding under the card grid · image wells rebuilt on the
   classic max-width/max-height path (drops aspect-ratio + object-fit entirely — the
   remaining source of the zoom/emulation paint glitches on some devices) ── */
.index-page .content-main { padding-bottom: 72px; }
.product-thumbnail .thumbnail-img-container { aspect-ratio: auto; height: 260px; padding: 18px; }
.product-thumbnail .thumbnail-img-container a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.product-thumbnail .thumbnail-img-container img {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: initial; padding: 0;
}
@media (max-width: 768px) {
  .product-thumbnail .thumbnail-img-container { height: 200px; padding: 12px; }
  .index-page .content-main { padding-bottom: 48px; }
}

/* ── v3.7.3b · selector corrections: content-main is the ANCESTOR of .index-page (use :has);
   an earlier 3-class rule pins the image well at 300px — height needs !important ── */
.content-main:has(.index-page) { padding-bottom: 72px; }
.product-thumbnail .thumbnail-img-container { height: 260px !important; }
@media (max-width: 768px) {
  .product-thumbnail .thumbnail-img-container { height: 200px !important; }
  .content-main:has(.index-page) { padding-bottom: 48px; }
}

/* v3.7.3c · theme sheet pins well height 300px !important — out-specify it */
.product-list .product-thumbnail .thumbnail-img-container,
.featured-products .product-thumbnail .thumbnail-img-container { height: 260px !important; }
@media (max-width: 768px) {
  .product-list .product-thumbnail .thumbnail-img-container,
  .featured-products .product-thumbnail .thumbnail-img-container { height: 200px !important; }
}

/* ── v3.7.4 · phones: compact cards. ROOT CAUSE of the unbeatable 300px wells: the theme
   sets MIN-HEIGHT:300px on .thumbnail-img-container — min-height beats height regardless
   of specificity. Reset min-height wherever we set height. ── */
@media (max-width: 768px) {
  .product-list .product-thumbnail .thumbnail-img-container { min-height: 0 !important; height: 220px !important; }
}
@media (max-width: 575.98px) {
  .product-list .product-thumbnail .thumbnail-img-container { min-height: 0 !important; height: 170px !important; padding: 10px; }
  .product-thumbnail .thumbnail-description-container { padding: 10px 12px 12px !important; }
  .product-thumbnail .thumbnail-description-container > a { gap: 6px; }
  .product-thumbnail h5.card-title { font-size: 14px; min-height: 0; }
  .cpp-line-no { font-size: 8.5px; }
  .product-thumbnail .card-text { font-size: 12px; padding: 4px 9px; }
  .fd-plate { font-size: 8.5px; padding: 3px 6px; }
}

/* ── v3.7.5 · hero full-art presentation: the banner shows at its NATURAL aspect ratio
   (no cover-crop zoom at any width). Desktop height capped; the capped-off bottom is
   revealed by a subtle translateY drift on scroll (js v3.7.6) — reveal without zoom. ── */
.homepage-carousel-container { max-height: min(84vh, 940px); overflow: hidden; }
.homepage-carousel-container .carousel-item img { height: auto; }
@media (max-width: 760px) {
  .homepage-carousel-container .carousel-item img { height: auto; }
}

/* ── v3.7.6 · hero responsive treatment: desktop keeps full-art + drift; ≤1200 the art
   becomes a dimmed backdrop under an ink gradient with a display headline + CTAs
   (fixes tablet text collision and mobile edge-slicing — crop reads as ambiance) ── */
.cpp-hero-head { display: none; font-family: var(--fd-disp); font-weight: 800; text-transform: uppercase; color: #fff; font-size: clamp(30px, 6vw, 46px); line-height: .95; margin: 6px 0 8px; }
.cpp-hero-head span { color: var(--fd-yellow); }
@media (max-width: 1200px) {
  .homepage-carousel-container { max-height: none; }
  .homepage-carousel-container .carousel-item img { height: clamp(380px, 52vw, 560px) !important; object-fit: cover; object-position: 50% 42%; }
  .cpp-hero-scrim { display: block !important; background: linear-gradient(180deg, rgba(10,19,34,.30) 0%, rgba(10,19,34,.55) 55%, rgba(10,19,34,.85) 100%); }
  .cpp-hero-content { position: absolute !important; left: 0; right: 0; bottom: 0; top: auto; background: transparent !important; padding: 0 22px 26px; }
  .cpp-hero-head { display: block; }
}
@media (max-width: 760px) {
  .homepage-carousel-container .carousel-item img { height: min(108vw, 480px) !important; object-position: 47% 40%; }
  .cpp-hero-ctas { width: 100%; }
  .cpp-btn-hero, .cpp-btn-heroghost { flex: 1; justify-content: center; font-size: 16px; padding: 12px 10px; }
}

/* v3.7.6b · theme h2 rule outranks the hero headline — out-specify it */
.cpp-hero-content .cpp-hero-head { color: #fff !important; font-family: var(--fd-disp) !important; font-weight: 800 !important; letter-spacing: .01em; }

/* v3.7.7 · slip button hover → FD blue (was hard to read) · playbook lane link style */
.header-container .header-icons a[href="/cart"]:hover,
.header-container .header-icons a[href$="/cart"]:hover {
  background: #0E6FDB !important; color: #fff !important; /* v3.8: mock slip-btn hover (fd-blue-deep) */
}
.cpp-playbook .cpp-play p a { color: var(--fd-blue-hot); text-decoration: none; border-bottom: 1px solid var(--fd-blue-hot); }
.cpp-playbook .cpp-play p a:hover { color: #fff; border-color: #fff; }
.cpp-playbook .cpp-play p a b { color: inherit; }


/* ═══════════════════════════════════════════════════════════════════════════
   v3.8 · CATEGORY PAGES — ink hero band (crumbs + display title + mirrored
   count chip), toolbar/sort skin, bootstrap pager skin, selections chips.
   Scope: #cpp-catpage (JS tags the theme's own .category-page) + .cpp-cat-hero.
   Furniture only — sort/pager/cards mechanics are native. (Mock: category.html)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-cpp-cat-hidden]{display:none!important}

.cpp-cat-hero{background:#0A1322;color:#fff;padding:46px 30px 40px;position:relative;overflow:hidden;margin:0 0 6px}
.cpp-cat-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(800px 320px at 88% -20%,rgba(20,147,255,.25),transparent 60%);pointer-events:none}
.cpp-cat-hero.cpp-gold{background:linear-gradient(160deg,#120E06 0%,#1E1608 60%,#0D0A04 100%)}
.cpp-cat-hero.cpp-gold::after{background:radial-gradient(800px 320px at 88% -20%,rgba(201,162,75,.22),transparent 60%)}
.cpp-cat-in{position:relative;z-index:2;max-width:1280px;margin:0 auto}
.cpp-cat-crumbs{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#8FA1BD;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cpp-cat-crumbs a{color:#8FA1BD;text-decoration:none}
.cpp-cat-crumbs a:hover{color:#3FA9FF}
.cpp-cat-crumbs .sep{color:#243758}
.cpp-cat-crumbs .cur{color:#C9D6EA}
.cpp-cat-hero.cpp-gold .cpp-cat-crumbs .cur{color:#D8C89A}
.cpp-cat-title{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.01em;line-height:.95;font-size:clamp(38px,5vw,60px);color:#fff!important;margin:14px 0 0}
.cpp-cat-title em{font-style:normal;color:#EAD194}
.cpp-cat-meta{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cpp-cat-meta .m{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;border:1px solid rgba(255,255,255,.22);border-radius:6px;color:#9FB0C9}
.cpp-cat-hero.cpp-gold .cpp-cat-meta .m{color:#D8C89A}

/* toolbar row — native structure, restyled in place */
#cpp-catpage .category-page-content-section>.container-fluid{padding-top:22px}
#cpp-catpage .sort-form .sort>span{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#5B6B85;margin-right:2px}
#cpp-catpage select.sort-select{border:1.5px solid #DCE4EF;border-radius:8px;padding:9px 34px 9px 13px;font-weight:600;font-size:14px;color:#0A1322;background-color:#fff;transition:border-color .15s,box-shadow .15s;box-shadow:none}
#cpp-catpage select.sort-select:focus{outline:none;border-color:#1493FF;box-shadow:0 0 0 3px rgba(20,147,255,.15)}
#cpp-catpage .category-page-content-section button.btn.secondary{background:#20365B!important;color:#fff!important;border:none!important;border-radius:8px!important;font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.07em;font-size:15px!important;padding:10px 20px!important}
#cpp-catpage .category-page-content-section button.btn.secondary:hover{background:#0E6FDB!important}

/* selections chips (only when filter chips exist) */
#cpp-catpage .cpp-cat-selections{padding:6px 0 2px}
#cpp-catpage .cpp-cat-selections a{display:inline-flex;align-items:center;gap:8px;background:#20365B;border-radius:99px;color:#fff;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.08em;padding:6px 13px;text-decoration:none;margin:0 6px 6px 0;transition:background .15s}
#cpp-catpage .cpp-cat-selections a:hover{background:#0E6FDB;text-decoration:none}

/* pager — bootstrap .pagination skinned to the mock */
#cpp-catpage .pagination{gap:8px;justify-content:center;margin:44px 0 14px}
#cpp-catpage .pagination .page-link{min-width:42px;min-height:42px;display:flex;align-items:center;justify-content:center;border:1.5px solid #DCE4EF;border-radius:9px!important;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;color:#0A1322;background:#fff;padding:0 12px;transition:.15s;box-shadow:none;margin:0}
#cpp-catpage .pagination .page-item:not(.disabled):not(.active) .page-link:hover{border-color:#1493FF!important;color:#0E6FDB!important}
#cpp-catpage .pagination .page-item.active .page-link{background:#20365B!important;border-color:#20365B!important;color:#fff!important}
#cpp-catpage .pagination .page-item.disabled .page-link{opacity:.45}

@media (max-width:760px){
  .cpp-cat-hero{padding:30px 18px 26px}
  .cpp-cat-title{font-size:clamp(30px,9vw,38px)}
}


/* ═══════════════════════════════════════════════════════════════════════════
   v3.8.1 · FAQ "THE RULEBOOK" (/pages/36280) + LOGIN/REGISTER SPLIT
   FAQ: hero reuses .cpp-cat-hero kit; JS rebuilds the flat CMS paragraphs
   into rule-nav + contact card + QA accordions (fail-open).
   AUTH: native .sign-in rows + nav-tabs styled/moved IN PLACE into a split
   layout with a brand art panel. Forms, fields, links untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---------- FAQ rulebook ---------- */
.cpp-rule-layout{display:grid;grid-template-columns:250px 1fr;gap:44px;padding:38px 0 70px;max-width:1280px;margin:0 auto;text-align:left}
.cpp-rule-nav{position:sticky;top:120px;display:flex;flex-direction:column;gap:2px;align-self:start}
.cpp-rule-nav a{padding:11px 16px;border-left:3px solid #DCE4EF;font-family:var(--fd-disp,'Barlow Condensed',sans-serif);font-weight:700;text-transform:uppercase;font-size:16px;letter-spacing:.05em;color:#5B6B85;transition:.15s;text-decoration:none}
.cpp-rule-nav a:hover,.cpp-rule-nav a.on{border-left-color:#1493FF;color:#0A1322;text-decoration:none}
.cpp-rule-sec{margin-bottom:44px}
.cpp-rule-sec h2{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;font-size:30px;color:#0A1322!important;display:flex;align-items:center;gap:14px;margin:0 0 18px;line-height:1}
.cpp-rule-sec h2 .ic{width:40px;height:40px;border-radius:10px;background:#20365B;color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.cpp-qa{border:1px solid #DCE4EF;border-radius:12px;margin-bottom:10px;overflow:hidden;background:#fff}
.cpp-qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;font-weight:700;font-size:15px;cursor:pointer;color:#0A1322}
.cpp-qa summary::-webkit-details-marker{display:none}
.cpp-qa summary .car{color:#1493FF;font-size:12px;transition:.2s;flex:0 0 auto}
.cpp-qa[open] summary .car{transform:rotate(180deg)}
.cpp-qa .a{padding:2px 20px 18px;color:#33415C;font-size:14.5px}
.cpp-qa .a p{margin:0 0 10px;line-height:1.6}
.cpp-qa .a p:last-child{margin-bottom:0}
.cpp-qa .a a{color:#0E6FDB;font-weight:600}
.cpp-contact-card{background:#20365B;color:#fff;border-radius:14px;padding:26px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.cpp-contact-card .cc-txt{max-width:640px}
.cpp-contact-card h3{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;font-size:24px;color:#fff!important;margin:0 0 6px}
.cpp-contact-card p{color:#C9D6EA!important;font-size:14px;margin:0 0 6px;line-height:1.6}
.cpp-contact-card p:last-child{margin-bottom:0}
.cpp-contact-card a{color:#3FA9FF}
.cpp-btn-gold{background:#C9A24B;color:#0A1322!important;font-family:var(--fd-disp,'Barlow Condensed',sans-serif);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:16px;border-radius:9px;padding:13px 22px;display:inline-flex;align-items:center;gap:10px;text-decoration:none!important;transition:.2s;white-space:nowrap}
.cpp-btn-gold:hover{background:#EAD194;color:#0A1322!important}
.cpp-fine .shopify-policy__title h1{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;font-size:24px;color:#0A1322!important;margin:14px 0 8px}
.cpp-fine .a{max-height:520px;overflow:auto}
#cpp-faq #page-showing p.MsoNormal{margin:0 0 10px}
@media (max-width:1080px){
  .cpp-rule-layout{grid-template-columns:1fr;gap:24px}
  .cpp-rule-nav{position:static;flex-direction:row;flex-wrap:wrap}
  .cpp-rule-nav a{border-left:none;border-bottom:3px solid #DCE4EF}
  .cpp-rule-nav a:hover,.cpp-rule-nav a.on{border-bottom-color:#1493FF}
}

/* ---------- login / register / checkout gate ---------- */
.cpp-auth-split{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 300px);border-radius:16px;overflow:hidden;margin:26px 0 60px;box-shadow:0 24px 60px rgba(10,19,34,.14)}
.cpp-auth-brand{position:relative;background:#1493FF;overflow:hidden;display:flex;align-items:flex-end;min-height:420px}
.cpp-auth-brand img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cpp-auth-brand .scrim{position:absolute;inset:0;background:linear-gradient(200deg,rgba(20,147,255,.15) 0%,rgba(10,19,34,.8) 100%)}
.cpp-auth-brand .txt{position:relative;z-index:2;padding:44px;color:#fff}
.cpp-auth-brand .kick{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:#FFC432;margin:0 0 10px}
.cpp-auth-brand h2{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;font-size:clamp(34px,3.6vw,52px);color:#fff!important;margin:0;line-height:.95;max-width:420px}
.cpp-auth-brand .sub{margin:12px 0 0;color:#D9EAFF;max-width:400px;font-size:15.5px;line-height:1.6}
.cpp-auth-side{background:#fff;display:flex;flex-direction:column;justify-content:center;padding:52px 44px}
.cpp-auth-side .cpp-auth-head{max-width:440px;margin:0 auto;width:100%}
.cpp-auth-side .cpp-auth-head .eyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#0E6FDB;margin:0 0 8px}
.cpp-auth-side .cpp-auth-head h1{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;font-size:42px;color:#0A1322!important;margin:0 0 14px;line-height:.95}
.cpp-auth-side ul.nav-tabs{border:1.5px solid #DCE4EF!important;border-radius:11px!important;overflow:hidden;background:#fff!important;box-shadow:none!important;padding:0!important;display:flex;margin:0 auto 26px;max-width:440px;width:100%;gap:0}
.cpp-auth-side ul.nav-tabs .nav-item{flex:1;margin:0!important;border:0!important;background:transparent!important}
.cpp-auth-side ul.nav-tabs .nav-link{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;text-align:center;padding:12px 10px!important;font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.08em;font-size:16px!important;color:#5B6B85!important;transition:.15s}
.cpp-auth-side ul.nav-tabs .nav-link h5{margin:0;font:inherit!important;color:inherit!important}
.cpp-auth-side ul.nav-tabs .nav-link.active{background:#20365B!important;color:#fff!important}
.cpp-auth-side ul.nav-tabs .nav-link:not(.active):hover{color:#0A1322!important}
.cpp-auth-side .row.cpp-auth-row{border:0!important;background:transparent;justify-content:center;margin:0}
.cpp-auth-side .row.cpp-auth-row>[class*=col-]{max-width:440px;flex:0 0 100%;padding:0!important}
.cpp-auth-side .sign-in{border:0;padding:0;background:transparent}
.cpp-auth-side .sign-in label{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#5B6B85;font-weight:600}
.cpp-auth-side .sign-in label abbr,.cpp-auth-side .sign-in label small{color:#9FB0C9}
.cpp-auth-side .sign-in .form-control{height:48px;border:1.5px solid #DCE4EF;border-radius:9px;color:#0A1322;font-weight:600;font-size:14.5px;padding-left:14px;background:#fff;transition:border-color .15s,box-shadow .15s}
.cpp-auth-side .sign-in .form-control:focus{border-color:#1493FF;box-shadow:0 0 0 3px rgba(20,147,255,.15);outline:none}
.cpp-auth-side .sign-in input[type=submit].btn,
.cpp-auth-side .sign-in button[type=submit].btn{display:block;width:100%;margin-top:12px;border:0!important;border-radius:9px!important;background:#1493FF!important;color:#fff!important;font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.07em;font-size:19px!important;padding:14px!important;box-shadow:0 8px 24px rgba(20,147,255,.35);transition:.2s;cursor:pointer}
.cpp-auth-side .sign-in input[type=submit].btn:hover,
.cpp-auth-side .sign-in button[type=submit].btn:hover{background:#0E6FDB!important;transform:translateY(-1px)}
.cpp-auth-side .sign-in a:not(.btn):not(.nav-link){display:inline-block;color:#0E6FDB;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;margin-top:14px;margin-right:18px}
.cpp-auth-side .sign-in a:not(.btn):not(.nav-link):hover{text-decoration:underline}
@media (max-width:1080px){
  .cpp-auth-split{grid-template-columns:1fr}
  .cpp-auth-brand{min-height:280px}
  .cpp-auth-side{padding:36px 22px}
}


/* ═══════════════════════════════════════════════════════════════════════════
   v3.8.2 · CART PAGE — "YOUR SLIP" (mock: cart.html) + pager specificity
   overrides + FAQ Mso-paste normalization.
   Cart scope: #cpp-cart; hides keyed off data-cpp-hidden set ONLY on
   cart-owned elements. Mechanics preserved per STORE_EDIT_RULES: real qty
   inputs moved (form attr), Update=requestSubmit, Remove=native button,
   checkout/clear/continue relocated not rebuilt, data-max-quantity capped.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-cpp-hidden]{display:none!important}
#cpp-cart{max-width:1280px;margin:0 auto 70px;padding:0 6px;color:#0A1322}
#cpp-cart .cpp-slip-title{padding:36px 0 20px}
#cpp-cart .cpp-slip-title h1{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;font-size:clamp(38px,4.6vw,56px);color:#0A1322!important;margin:0;line-height:.95}
#cpp-cart .cpp-slip-title .sub{color:#5B6B85;margin-top:8px;font-size:15.5px}
#cpp-cart .cpp-slip-main{display:grid;grid-template-columns:1.35fr .65fr;gap:32px;align-items:start}
#cpp-cart .cpp-legs{display:flex;flex-direction:column;gap:14px;min-width:0}
#cpp-cart .cpp-leg{display:grid;grid-template-columns:120px 1fr auto;gap:20px;background:#fff;border:1px solid #DCE4EF;border-left:4px solid #1493FF;border-radius:12px;padding:18px;align-items:center;transition:box-shadow .2s,opacity .25s,transform .25s}
#cpp-cart .cpp-leg:hover{box-shadow:0 10px 30px rgba(10,19,34,.10)}
#cpp-cart .cpp-leg.mto{border-left-color:#F2A900}
#cpp-cart .cpp-leg.removing{opacity:0;transform:translateX(40px)}
#cpp-cart .cpp-leg .ph{background:#F2F5FA;border-radius:9px;width:120px;height:120px;display:flex;align-items:center;justify-content:center;overflow:hidden}
#cpp-cart .cpp-leg .ph img{max-width:100%;max-height:100%;padding:8px}
#cpp-cart .cpp-leg-tag{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
#cpp-cart .cpp-leg-tag.stock{color:#00B15C}
#cpp-cart .cpp-leg-tag.mtotag{color:#B77900}
#cpp-cart .cpp-leg h4{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:700!important;font-size:21px;text-transform:uppercase;margin:5px 0 3px;color:#0A1322!important;line-height:1.05}
#cpp-cart .cpp-leg .meta{font-size:13.5px;color:#5B6B85}
#cpp-cart .cpp-leg .row2{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
#cpp-cart .cpp-qty{display:inline-flex;align-items:center;border:1.5px solid #DCE4EF;border-radius:9px;overflow:hidden;background:#fff}
#cpp-cart .cpp-qty:focus-within{border-color:#1493FF;box-shadow:0 0 0 3px rgba(20,147,255,.15)}
#cpp-cart .cpp-qty button{width:38px;height:42px;background:#F2F5FA;border:0;font-size:17px;color:#20365B;cursor:pointer;line-height:1}
#cpp-cart .cpp-qty button:hover{background:#DCE4EF}
#cpp-cart .cpp-qty button:disabled{opacity:.35;cursor:not-allowed;background:#F2F5FA}
#cpp-cart .cpp-qty .qb{width:52px;text-align:center}
#cpp-cart .cpp-qty .qb input{width:100%!important;height:42px;border:0!important;text-align:center;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px;font-weight:700;color:#0A1322;background:#fff;padding:0;-moz-appearance:textfield;box-shadow:none!important}
#cpp-cart .cpp-qty .qb input::-webkit-outer-spin-button,#cpp-cart .cpp-qty .qb input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#cpp-cart .cpp-upd{font-family:var(--fd-disp,'Barlow Condensed',sans-serif);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.06em;background:#20365B;color:#fff;border:0;border-radius:8px;padding:11px 18px;cursor:pointer;transition:.15s}
#cpp-cart .cpp-upd:hover{background:#0E6FDB}
#cpp-cart .cpp-upd.idle{background:#EDF1F7;color:#9FB0C9;cursor:default}
#cpp-cart .cpp-rm{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#E8483F;background:none;border:0;cursor:pointer;padding:0;margin-left:auto}
#cpp-cart .cpp-rm:hover{text-decoration:underline}
#cpp-cart .cpp-leg .amt{font-family:var(--fd-disp,'Barlow Condensed',sans-serif);font-weight:800;font-size:26px;text-align:right;color:#0A1322}
#cpp-cart .cpp-leg .amt .was{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:#9FB0C9;text-decoration:line-through;font-weight:400}
#cpp-cart .cpp-leg .amt .save{display:inline-block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.06em;color:#00B15C;margin-top:4px;font-weight:700}

#cpp-cart .cpp-slipcard{background:#0A1322;color:#fff;border-radius:16px;overflow:hidden;position:sticky;top:120px;box-shadow:0 24px 60px rgba(10,19,34,.18)}
#cpp-cart .cpp-slipcard .head{background:#20365B;padding:18px 22px;display:flex;justify-content:space-between;align-items:center}
#cpp-cart .cpp-slipcard .head h3{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;font-size:22px;letter-spacing:.05em;margin:0;color:#fff!important}
#cpp-cart .cpp-slipcard .head .legs{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;color:#3FA9FF;letter-spacing:.14em}
#cpp-cart .cpp-slipcard .bd{padding:22px}
#cpp-cart .cpp-slipcard .srow{display:flex;justify-content:space-between;padding:9px 0;font-size:14.5px;color:#C9D6EA}
#cpp-cart .cpp-slipcard .srow .v{font-family:'IBM Plex Mono',ui-monospace,monospace}
#cpp-cart .cpp-slipcard .srow.note{font-size:12.5px;color:#8FA1BD}
#cpp-cart .cpp-slipcard .srow.total{border-top:1px solid #243758;margin-top:10px;padding-top:16px;color:#fff;font-weight:700;font-size:16px;align-items:baseline}
#cpp-cart .cpp-slipcard .srow.total .v{font-family:var(--fd-disp,'Barlow Condensed',sans-serif);font-weight:800;font-size:30px}
#cpp-cart .cpp-win-note{margin-top:14px;background:rgba(0,177,92,.12);border:1px solid rgba(46,229,138,.3);color:#2EE58A;border-radius:9px;padding:11px 14px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.08em;line-height:1.7}
#cpp-cart .cpp-co{margin-top:16px}
#cpp-cart .cpp-co input{display:block;width:100%!important;border:0!important;border-radius:9px!important;background:#1493FF!important;color:#fff!important;font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;font-size:18px!important;text-transform:uppercase;letter-spacing:.06em;padding:15px!important;cursor:pointer;box-shadow:0 8px 24px rgba(20,147,255,.35);transition:.2s}
#cpp-cart .cpp-co input:hover{background:#0E6FDB!important;transform:translateY(-1px)}
#cpp-cart .cpp-sec{display:flex;gap:10px;margin-top:12px}
#cpp-cart .cpp-sec a{flex:1;text-align:center;border:1px solid #243758!important;border-radius:9px!important;background:transparent!important;color:#C9D6EA!important;font-family:'IBM Plex Mono',ui-monospace,monospace!important;font-size:10.5px!important;letter-spacing:.08em;text-transform:uppercase;padding:10px 6px!important;text-decoration:none!important;transition:.15s;white-space:nowrap}
#cpp-cart .cpp-sec a:hover{border-color:#3FA9FF!important;color:#fff!important}
#cpp-cart .cpp-trust{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.1em;color:#8FA1BD;text-transform:uppercase}
@media (max-width:1080px){
  #cpp-cart .cpp-slip-main{grid-template-columns:1fr}
  #cpp-cart .cpp-slipcard{position:static}
}
@media (max-width:760px){
  #cpp-cart .cpp-leg{grid-template-columns:96px 1fr;gap:14px}
  #cpp-cart .cpp-leg .ph{width:96px;height:96px}
  #cpp-cart .cpp-leg .amt{grid-column:2;text-align:left;margin-top:4px}
}

/* pager overrides — theme rule ties (1,4,1) via #content and loads later; go two-id */
#content #cpp-catpage .pagination{gap:8px;justify-content:center;margin:44px 0 14px}
#content #cpp-catpage .pagination .page-link{min-width:42px;min-height:42px;display:flex;align-items:center;justify-content:center;border:1.5px solid #DCE4EF!important;border-radius:9px!important;font-family:'IBM Plex Mono',ui-monospace,monospace!important;font-size:13px!important;color:#0A1322!important;background:#fff!important;padding:0 12px;transition:.15s;box-shadow:none!important;margin:0}
#content #cpp-catpage .pagination .page-item:not(.disabled):not(.active) .page-link:hover{border-color:#1493FF!important;color:#0E6FDB!important}
#content #cpp-catpage .pagination .page-item.active .page-link{background:#20365B!important;border-color:#20365B!important;color:#fff!important}
#content #cpp-catpage .pagination .page-item.disabled .page-link{opacity:.45}

/* FAQ — normalize Word-paste inline styles inside our components */
.cpp-contact-card p,.cpp-contact-card p span{background:transparent!important;color:#C9D6EA!important;font-family:inherit!important;font-size:14px!important;line-height:1.6!important}
.cpp-contact-card p a,.cpp-contact-card p span a{color:#3FA9FF!important}
.cpp-qa .a p,.cpp-qa .a p span{font-family:inherit!important;font-size:14.5px!important;background:transparent!important;line-height:1.6!important}
.cpp-qa .a p a,.cpp-qa .a p span a{color:#0E6FDB!important}


/* v3.8.2b · slip pill hover: theme flips the cart svg to slate on a:hover — keep it white */
.header-container .header-icons a[href="/cart"]:hover svg,
.header-container .header-icons a[href$="/cart"]:hover svg,
.header-container .header-icons a[href="/cart"]:hover svg path,
.header-container .header-icons a[href$="/cart"]:hover svg path{fill:#fff!important;color:#fff!important}


/* ═══════════════════════════════════════════════════════════════════════════
   v3.8.3 · PRODUCT PAGE — gallery skin, buy-box type, option chips, qty
   stepper, add-to-cart CTA, in-production callout, related head.
   Scope: #cpp-pdp (JS tags the theme's own .product-page). Native lightbox,
   options, form mechanics untouched. (Mocks: product.html, product-apparel.html)
   ═══════════════════════════════════════════════════════════════════════════ */
#cpp-pdp .main-img-container{background:#F2F5FA!important;border:1px solid #DCE4EF;border-radius:16px;overflow:hidden;padding:24px}
#cpp-pdp .gallery-main,#cpp-pdp .main-img-container{touch-action:pan-y pinch-zoom}
#cpp-pdp .images-wrapper{margin-top:12px}
#cpp-pdp .images-container ul.images li{border:1.5px solid #DCE4EF;border-radius:11px;background:#F2F5FA;overflow:hidden;transition:border-color .15s}
#cpp-pdp .images-container ul.images li:hover{border-color:#1493FF}
#cpp-pdp .images-container ul.images li.primary{border-color:#1493FF}
#cpp-pdp .images-wrapper button.nav{border:1.5px solid #DCE4EF!important;border-radius:9px!important;background:#fff!important;color:#20365B!important;box-shadow:none!important}
#cpp-pdp .images-wrapper button.nav:hover{border-color:#1493FF!important;color:#0E6FDB!important}

#cpp-pdp .cpp-line-no{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#5B6B85;margin-bottom:8px}
#cpp-pdp .product-title h2{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;font-size:clamp(30px,3.4vw,44px);color:#0A1322!important;line-height:.95;margin:0 0 6px}
#cpp-pdp .product-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
#cpp-pdp .product-price .current-price{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;font-size:38px;color:#0A1322!important}
#cpp-pdp .product-overview{margin-top:14px;color:#33415C;font-size:15.5px;line-height:1.65}
#cpp-pdp .cpp-prod-note{background:#FFF7E6;border:1px solid #F2C24B;border-left:4px solid #F2A900;border-radius:10px;padding:12px 16px;margin:0 0 14px;display:flex;gap:12px;align-items:flex-start;font-size:14px;color:#7A5200;line-height:1.5}
#cpp-pdp .cpp-prod-note .tag{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.16em;color:#B77900;white-space:nowrap;padding-top:3px;font-weight:700}

#cpp-pdp .prod_option_block h4{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#5B6B85;font-weight:600;margin:18px 0 4px}
#cpp-pdp .product-option-wrapper>label{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#5B6B85}
#cpp-pdp .product-option-thumb{min-width:52px;height:46px;border:1.5px solid #DCE4EF!important;border-radius:9px!important;font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:700!important;font-size:16px!important;color:#0A1322!important;background:#fff!important;padding:0 14px!important;transition:.15s;box-shadow:none!important;margin:3px 6px 3px 0}
#cpp-pdp .product-option-thumb:hover{border-color:#1493FF!important}
#cpp-pdp .product-option-thumb.active,#cpp-pdp .product-option-thumb.selected,#cpp-pdp .product-option-thumb[aria-pressed=true]{background:#20365B!important;border-color:#20365B!important;color:#fff!important}

#cpp-pdp .cpp-pdp-qty{display:inline-flex;align-items:center;border:1.5px solid #DCE4EF;border-radius:9px;overflow:hidden;background:#fff}
#cpp-pdp .cpp-pdp-qty:focus-within{border-color:#1493FF;box-shadow:0 0 0 3px rgba(20,147,255,.15)}
#cpp-pdp .cpp-pdp-qty button{width:40px;height:46px;background:#F2F5FA;border:0;font-size:17px;color:#20365B;cursor:pointer;line-height:1}
#cpp-pdp .cpp-pdp-qty button:hover{background:#DCE4EF}
#cpp-pdp .cpp-pdp-qty input{width:58px!important;height:46px;border:0!important;text-align:center;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:15px;font-weight:700;color:#0A1322;background:#fff;padding:0;box-shadow:none!important;-moz-appearance:textfield}
#cpp-pdp .cpp-pdp-qty input::-webkit-outer-spin-button,#cpp-pdp .cpp-pdp-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

#cpp-pdp input.add-to-cart{display:block;width:100%!important;border:0!important;border-radius:9px!important;background:#1493FF!important;color:#fff!important;font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;font-size:19px!important;text-transform:uppercase;letter-spacing:.06em;padding:15px!important;margin-top:14px;cursor:pointer;box-shadow:0 8px 24px rgba(20,147,255,.35);transition:.2s}
#cpp-pdp input.add-to-cart:hover{background:#0E6FDB!important;transform:translateY(-1px)}
#cpp-pdp .total-info{border-top:1px solid #DCE4EF;margin-top:20px;padding-top:14px}
#cpp-pdp .total-info,#cpp-pdp .total-info label{font-size:14.5px;color:#5B6B85}

.related-products .cpp-rel-head{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;font-size:34px;color:#0A1322!important}
@media (max-width:760px){
  #cpp-pdp .main-img-container{padding:12px;border-radius:12px}
  #cpp-pdp .product-title h2{font-size:30px}
}


/* ═══════════════════════════════════════════════════════════════════════════
   v3.8.4 · CHECKOUT SKIN + PDP polish.
   Checkout scope: #content.cpp-checkout (JS tags .content-page on /checkout only).
   Native steps DOM untouched — buttons/labels styled in place; fields skinned
   with scoped selectors; payment containers (.row.pt-5 .border etc.) are
   DELIBERATELY not touched (Spreedly iframe lesson, STORE_EDIT_RULES §4).
   Compliance: native action labels kept (Continue / Place Order).
   ═══════════════════════════════════════════════════════════════════════════ */
#content.cpp-checkout h1{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;color:#0A1322!important;font-size:clamp(32px,3.6vw,44px)}
#content.cpp-checkout .checkout-steps{background:#fff;border:1px solid #DCE4EF;border-radius:12px;padding:16px 12px;margin:18px 0 26px}
#content.cpp-checkout .checkout-steps>div>div{font-family:var(--fd-disp,'Barlow Condensed',sans-serif);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:14px;color:#5B6B85}
#content.cpp-checkout .checkout-steps>div.cpp-ck-active>div{color:#0A1322}
#content.cpp-checkout .checkout-steps>div.cpp-ck-done>div{color:#20365B}
#content.cpp-checkout .checkout-steps .btn{width:34px;height:34px;padding:0!important;display:inline-flex;align-items:center;justify-content:center;border-radius:50%!important;font-family:'IBM Plex Mono',ui-monospace,monospace!important;font-size:13px!important;border:2px solid #DCE4EF!important;background:#fff!important;color:#5B6B85!important;box-shadow:none!important}
#content.cpp-checkout .checkout-steps>div.cpp-ck-active .btn{background:#1493FF!important;border-color:#1493FF!important;color:#fff!important}
#content.cpp-checkout .checkout-steps>div.cpp-ck-done .btn,#content.cpp-checkout .checkout-steps>div.cpp-ck-done a.btn{background:#00B15C!important;border-color:#00B15C!important;color:#fff!important}
#content.cpp-checkout #checkout-form h2,#content.cpp-checkout #checkout-form h4{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;color:#0A1322!important;letter-spacing:.03em}
#content.cpp-checkout #checkout-form h4{font-size:20px}
#content.cpp-checkout #checkout-form label{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#5B6B85;font-weight:600}
#content.cpp-checkout #checkout-form input[type=text],#content.cpp-checkout #checkout-form input[type=email],#content.cpp-checkout #checkout-form input[type=tel],#content.cpp-checkout #checkout-form input[type=date],#content.cpp-checkout #checkout-form input[type=number],#content.cpp-checkout #checkout-form select,#content.cpp-checkout #checkout-form textarea{border:1.5px solid #DCE4EF;border-radius:9px;padding:11px 13px;font-size:14.5px;color:#0A1322;background:#fff;transition:border-color .15s,box-shadow .15s;box-shadow:none}
#content.cpp-checkout #checkout-form input:focus,#content.cpp-checkout #checkout-form select:focus,#content.cpp-checkout #checkout-form textarea:focus{outline:none;border-color:#1493FF;box-shadow:0 0 0 3px rgba(20,147,255,.15)}
#content.cpp-checkout #checkout-form input[type=submit].btn,#content.cpp-checkout #checkout-form input[type=submit].primary,#content.cpp-checkout form input[type=submit].primary{border:0!important;border-radius:9px!important;background:#1493FF!important;color:#fff!important;font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;font-size:17px!important;text-transform:uppercase;letter-spacing:.06em;padding:13px 30px!important;cursor:pointer;box-shadow:0 8px 24px rgba(20,147,255,.35);transition:.2s}
#content.cpp-checkout #checkout-form input[type=submit].btn:hover,#content.cpp-checkout form input[type=submit].primary:hover{background:#0E6FDB!important}
#content.cpp-checkout .preview-cart-details{border-radius:8px!important;border:2px solid #20365B!important;color:#20365B!important;background:#fff!important;font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.05em}
#content.cpp-checkout .preview-cart-details:hover{background:#20365B!important;color:#fff!important}
#content.cpp-checkout .row.pt-5 h2,#content.cpp-checkout .row.pt-5 h4,#content.cpp-checkout .row.pt-5 h5{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;color:#0A1322!important}

/* PDP polish: theme's selected-option class, qty row layout, recently-viewed head */
#cpp-pdp .product-option-thumb.selected-prod-option{background:#20365B!important;border-color:#20365B!important;color:#fff!important}
#cpp-pdp .product-quantity{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
#cpp-pdp .product-quantity>label{margin:0;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#5B6B85}
#cpp-pdp .product-quantity #quantity{width:auto!important;flex:0 0 auto}
#cpp-pdp #stock{font-size:13px;white-space:nowrap}
.recently-viewed-products h2{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;font-size:34px;color:#0A1322!important}


/* ═══════════════════════════════════════════════════════════════════════════
   v3.8.5 · PDP ROUND 2 — white fixed-size main image, sticky gallery,
   qty/in-stock spacing (theme max-width:100px on #quantity was the culprit),
   MTO disclaimer tile, thumb option labels, lightbox beautification,
   touch-action for mobile scroll (JS also strips theme touch-pan handlers).
   ═══════════════════════════════════════════════════════════════════════════ */
#cpp-pdp .main-img-container{background:#fff!important;height:min(68vh,560px);display:flex;align-items:center;justify-content:center;padding:20px}
#cpp-pdp .main-img{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
#cpp-pdp .main-img a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
#cpp-pdp .main-img img{max-width:100%;max-height:100%;width:auto!important;height:auto!important;object-fit:contain}
#cpp-pdp .product-left-section .product-info{position:sticky!important;top:104px}
#cpp-pdp .gallery-main,#cpp-pdp .main-img-container,#cpp-pdp .main-img img{touch-action:pan-y pinch-zoom}
@media (max-width:760px){
  #cpp-pdp .main-img-container{height:min(88vw,420px);padding:10px}
  #cpp-pdp .product-left-section .product-info{position:static!important}
}

#cpp-pdp #quantity{max-width:none!important;width:auto!important}
#cpp-pdp .cpp-pdp-qty{flex:0 0 auto}
#cpp-pdp #stock{margin-left:4px}

#cpp-pdp .cpp-mto-note{background:#FFF7E6;border:1px solid #F2C24B;border-left:4px solid #F2A900;border-radius:10px;padding:12px 16px;margin:12px 0 2px;display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:#7A5200;line-height:1.55}
#cpp-pdp .cpp-mto-note .tag{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.16em;color:#B77900;white-space:nowrap;padding-top:3px;font-weight:700}
#cpp-pdp .cpp-mto-note a{color:#B77900;font-weight:600}

#cpp-pdp .images-container ul.images li{position:relative}
#cpp-pdp .cpp-th-label{position:absolute;left:0;right:0;bottom:0;background:rgba(10,19,34,.72);color:#fff;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:3px 4px;text-align:center;pointer-events:none;border-radius:0 0 9px 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.modal.lightbox .modal-content{background:transparent!important;border:0!important;box-shadow:none!important}
.modal.lightbox .carousel-item img{width:auto!important;max-width:min(90vw,1080px)!important;max-height:82vh!important;object-fit:contain;border-radius:14px;background:#fff;padding:14px;box-shadow:0 24px 60px rgba(10,19,34,.45);margin:0 auto}
.modal.lightbox .btn-close{background-color:#fff;border-radius:50%;opacity:1;padding:11px;margin:10px;box-shadow:0 4px 14px rgba(10,19,34,.35);z-index:5}
.modal.lightbox .btn-close:hover{background-color:#EAF3FF}
.modal.lightbox .carousel-control-prev,.modal.lightbox .carousel-control-next{width:9%;opacity:1}
.modal.lightbox .carousel-control-prev-icon,.modal.lightbox .carousel-control-next-icon{background-color:#20365B;border-radius:50%;padding:24px;background-size:42%;box-shadow:0 4px 14px rgba(10,19,34,.4);transition:.15s}
.modal.lightbox .carousel-control-prev:hover .carousel-control-prev-icon,.modal.lightbox .carousel-control-next:hover .carousel-control-next-icon{background-color:#0E6FDB}
.modal.lightbox+.modal-backdrop.show,.modal-backdrop.cpp-deep.show{opacity:.78}


/* v3.8.5b · lightbox: center the slide (img was pinned to the dialog's left edge) */
.modal.lightbox .carousel-item{text-align:center}
.modal.lightbox .carousel-item img{display:inline-block!important;margin:0!important}


/* v3.8.5c · lightbox: flex-center the active slide (bootstrap d-block on the img resists overrides) */
.modal.lightbox .carousel-item.active,.modal.lightbox .carousel-item-next,.modal.lightbox .carousel-item-prev{display:flex!important;align-items:center;justify-content:center}


/* v3.8.5d · lightbox: the slide is a bootstrap .ratio.ratio-16x9 box with an absolutely
   pinned img — neutralize the ratio hack and center the image for real */
.modal.lightbox .carousel-item .ratio{display:flex!important;align-items:center;justify-content:center;height:auto!important}
.modal.lightbox .carousel-item .ratio::before{display:none!important;padding-top:0!important}
.modal.lightbox .carousel-item .ratio>img{position:static!important;width:auto!important;height:auto!important;max-width:min(90vw,1080px)!important;max-height:82vh!important}


/* v3.8.5e · lightbox: ensure no theme background paints a dark stage behind the slide */
.modal.lightbox .modal-content,.modal.lightbox .modal-body,.modal.lightbox .lightbox-carousel,.modal.lightbox .carousel,.modal.lightbox .carousel-inner,.modal.lightbox .carousel-item,.modal.lightbox .carousel-item .ratio{background:transparent!important;background-color:transparent!important}


/* ═══════════════════════════════════════════════════════════════════════════
   v3.8.6 · PDP ROUND 3 — hover-zoom OFF (elevateZoom UI hidden), gallery
   arrow cleanup (data-uri chevrons in circles), ACM-structure fulfillment
   panel (badge + icon rows + (i) popover) for BOTH made-to-order and
   in-stock, thumb option captions, lightbox = white floating card w/ dark
   circular close + radial ink backdrop (ACM port, BOOK skin).
   ═══════════════════════════════════════════════════════════════════════════ */
.zoomLens,.zoomWindow,.zoomWindowContainer{display:none!important;opacity:0!important;pointer-events:none!important}
.zoomContainer{pointer-events:none!important}
#cpp-pdp .main-img img{transition:transform .35s ease}
#cpp-pdp .main-img-container:hover .main-img img{transform:scale(1.03)}

#cpp-pdp .images-wrapper button.btn.nav{width:38px;height:38px;min-width:38px;border-radius:50%!important;border:1.5px solid #DCE4EF!important;background-color:#F2F5FA!important;background-repeat:no-repeat!important;background-position:center!important;background-size:15px!important;box-shadow:none!important;padding:0!important;overflow:hidden;text-indent:-999px;transition:background-color .15s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230A1322' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E")!important}
#cpp-pdp .images-wrapper button.btn.nav::before,#cpp-pdp .images-wrapper button.btn.nav::after{display:none!important;content:none!important}
#cpp-pdp .images-wrapper button.btn.nav *{display:none!important}
#cpp-pdp .images-wrapper button.btn.nav:hover{background-color:#0E6FDB!important;border-color:#0E6FDB!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E")!important}
#cpp-pdp .images-wrapper button.btn.nav.prev{transform:rotate(180deg)}

.cpp-fulfill{margin:6px 0 18px;padding:15px 17px;border:1px solid #DCE4EF;border-radius:14px;background:linear-gradient(180deg,#F8FAFD 0%,#F2F5FA 100%)}
.cpp-fulfill-head{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.cpp-fulfill-badge{padding:5px 13px;border-radius:999px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:#20365B;white-space:nowrap}
.cpp-fulfill-badge.stock{background:#00B15C}
.cpp-fulfill-title{font-family:var(--fd-disp,'Barlow Condensed',sans-serif);font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.04em;color:#0A1322}
.cpp-fulfill-row{display:flex;align-items:flex-start;gap:10px;padding:4px 0;font-size:13.5px;color:#33415C;line-height:1.5}
.cpp-fulfill-row svg{flex:0 0 16px;width:16px;height:16px;margin-top:2px;stroke:#1493FF;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cpp-fulfill-row.warn svg{stroke:#B77900}
.cpp-fulfill-row b{color:#0A1322}
.cpp-fulfill-row.lowstock,.cpp-fulfill-row.lowstock b{color:#9A5B12}
.cpp-fulfill-info{position:relative;display:inline-block;margin-left:6px}
.cpp-fulfill-info>button{width:16px;height:16px;padding:0;border:1px solid #9FB0C9;border-radius:50%;background:#fff;color:#5B6B85;font-size:10px;font-weight:800;line-height:1;font-style:italic;font-family:Georgia,serif;cursor:pointer;vertical-align:1px}
.cpp-fulfill-pop{display:none;position:absolute;z-index:30;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:260px;padding:12px 14px;border-radius:12px;background:#0A1322;color:#C9D6EA;box-shadow:0 14px 34px rgba(10,19,34,.35);font-size:12px;text-align:left}
.cpp-fulfill-info.open .cpp-fulfill-pop{display:block}
.cpp-fulfill-pop-title{margin:0 0 6px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#3FA9FF}
.cpp-fulfill-pop-note{margin:0;font-size:11.5px;color:#8FA1BD;line-height:1.55}
.cpp-fulfill-pop-note a{color:#3FA9FF}
#cpp-pdp .cpp-mto-note{display:none!important}

.modal.lightbox .modal-dialog{max-width:min(92vw,720px)!important;width:auto!important;height:auto!important;max-height:none!important;margin:auto!important;display:flex!important;align-items:center!important;min-height:calc(100% - 1rem)!important}
.modal.lightbox .modal-content{position:relative!important;background:#fff!important;border:none!important;border-radius:18px!important;box-shadow:0 50px 120px rgba(10,19,34,.55)!important;padding:22px!important;overflow:visible!important;height:auto!important;width:100%!important}
.modal.lightbox .modal-body{padding:0!important;overflow:visible!important}
.modal.lightbox .carousel-item img,.modal.lightbox img.img-fluid{max-height:min(72vh,560px)!important;border-radius:8px!important;box-shadow:none!important;padding:0!important}
.modal.lightbox .spinner-border,.modal.lightbox .carousel-item .position-absolute{display:none!important}
.modal.lightbox .btn-close>svg,.modal.lightbox .btn-close *{display:none!important}
.modal.lightbox .btn-close{position:absolute!important;top:-14px!important;right:-14px!important;width:38px!important;height:38px!important;border-radius:50%!important;background-color:#0A1322!important;background-repeat:no-repeat!important;background-position:center!important;background-size:14px!important;opacity:1!important;border:none!important;box-shadow:0 8px 20px rgba(10,19,34,.4)!important;padding:0!important;margin:0!important;z-index:7;transition:transform .2s,background-color .2s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E")!important}
.modal.lightbox .btn-close:hover{background-color:#1493FF!important;transform:rotate(90deg)!important}
.modal-backdrop.show{background:radial-gradient(circle at 50% 38%, rgba(20,54,91,.82), rgba(10,19,34,.94))!important;opacity:1!important;backdrop-filter:blur(3px)!important;-webkit-backdrop-filter:blur(3px)!important}
body.modal-open .zoomContainer,body.modal-open .zoomWindow,body.modal-open .zoomLens{display:none!important}
.modal.lightbox .carousel-control-prev{left:-12px}
.modal.lightbox .carousel-control-next{right:-12px}


/* ═══════════════════════════════════════════════════════════════════════════
   v3.8.7 · CUSTOM ITEM REQUEST PAGE (/pages/67593) — "THE CUSTOM DESK".
   Hero reuses the cpp-cat-hero kit; the REAL Wufoo embed is MOVED intact
   into a styled card; sidebar = How It Works steps + Idea Showroom banner
   (links to the parent Creative Web Store) + rush note. (CDK request_1 port)
   ═══════════════════════════════════════════════════════════════════════════ */
.cpp-req-intro{max-width:720px;margin:34px auto 26px;color:#33415C;font-size:15.5px;line-height:1.7}
.cpp-req-layout{display:grid;grid-template-columns:1fr 340px;gap:30px;max-width:1280px;margin:0 auto 80px;align-items:start}
.cpp-req-card{background:#fff;border:1px solid #DCE4EF;border-radius:14px;overflow:hidden}
.cpp-req-card .head{background:#20365B;color:#fff;padding:16px 22px;display:flex;align-items:center;gap:12px}
.cpp-req-card .head .num{width:30px;height:30px;border-radius:50%;background:#1493FF;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;font-weight:700;flex:0 0 auto}
.cpp-req-card .head h3{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;font-size:21px;letter-spacing:.04em;margin:0;color:#fff!important}
.cpp-req-card .head p{margin:0;font-size:12.5px;color:#C9D6EA}
.cpp-req-card .bd{padding:14px 16px 18px}
.cpp-req-card .bd iframe{width:100%!important}
.cpp-req-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:110px}
.cpp-how-card{background:#fff;border:1px solid #DCE4EF;border-radius:14px;padding:20px 20px 14px}
.cpp-how-card h4{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;font-size:19px;letter-spacing:.04em;color:#0A1322!important;margin:0 0 14px;display:flex;align-items:center;gap:9px}
.cpp-how-card h4::before{content:"";width:22px;height:3px;background:#1493FF}
.cpp-how-step{display:flex;gap:12px;padding:8px 0;align-items:flex-start}
.cpp-how-step .hn{width:26px;height:26px;border-radius:50%;background:#F2F5FA;border:1.5px solid #DCE4EF;color:#20365B;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;font-weight:700;flex:0 0 auto}
.cpp-how-step .ht{font-weight:700;font-size:14px;color:#0A1322}
.cpp-how-step .hs{font-size:12.5px;color:#5B6B85;line-height:1.55}
.cpp-how-card .rush{font-size:12.5px;color:#5B6B85;line-height:1.65;margin:0}
.cpp-idea-banner{display:block;background:#0A1322;color:#fff;border-radius:14px;padding:22px;position:relative;overflow:hidden;text-decoration:none!important;transition:transform .2s,box-shadow .2s}
.cpp-idea-banner::after{content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at 90% -10%,rgba(201,162,75,.28),transparent 60%);pointer-events:none}
.cpp-idea-banner:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(10,19,34,.35)}
.cpp-idea-banner .eyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#EAD194;display:block;margin-bottom:8px}
.cpp-idea-banner h4{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;font-size:27px;line-height:.95;color:#fff!important;margin:0 0 10px}
.cpp-idea-banner p{font-size:13px;color:#C9D6EA;line-height:1.6;margin:0 0 12px;position:relative;z-index:1}
.cpp-idea-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;position:relative;z-index:1}
.cpp-idea-cats span{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,.25);border-radius:5px;padding:3px 8px;color:#9FB0C9}
.cpp-idea-btn{display:inline-flex;align-items:center;gap:8px;border:2px solid rgba(255,255,255,.75);border-radius:8px;padding:9px 16px;font-family:var(--fd-disp,'Barlow Condensed',sans-serif);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:15px;color:#fff;position:relative;z-index:1;transition:.2s}
.cpp-idea-banner:hover .cpp-idea-btn{background:#C9A24B;border-color:#C9A24B;color:#0A1322}
@media (max-width:1080px){
  .cpp-req-layout{grid-template-columns:1fr}
  .cpp-req-side{position:static}
}


/* v3.8.7b · custom desk: guarantee the Wufoo iframe height (auto-resize can lag) */
.cpp-req-card .bd iframe{width:100%!important;min-height:1100px;border:0!important}


/* ═══════════════════════════════════════════════════════════════════════════
   v3.8.8 · CHECKOUT ROUND 2 — steps rail, compact mobile strip, summary cards.
   Scope: #content.cpp-checkout. Spreedly zone untouched — only JS-tagged
   .cpp-ck-osum / .cpp-ck-isum boxes are skinned, never generic .border.
   ═══════════════════════════════════════════════════════════════════════════ */
#content.cpp-checkout .checkout-steps{display:flex;align-items:stretch;background:#fff;border:1px solid #DCE4EF;border-radius:14px;padding:16px 12px 12px;margin:6px 0 4px}
#content.cpp-checkout .checkout-steps>div{flex:1 1 0;display:flex;flex-direction:column-reverse;justify-content:flex-end;align-items:center;gap:7px;position:relative;margin:0!important;min-width:0}
/* v3.8.8c: single container track (per-node segments misrendered on some pages) */
#content.cpp-checkout .checkout-steps::before{content:"";position:absolute;top:31px;left:calc(12px + (100% - 24px)/14);right:calc(12px + (100% - 24px)/14);height:2px;background:#DCE4EF;border-radius:2px}
#content.cpp-checkout .checkout-steps>div::before{display:none!important;content:none!important}
#content.cpp-checkout .checkout-steps>div .rounded-pill{position:relative;z-index:1;width:32px;height:32px;min-width:32px;padding:0!important;display:flex;align-items:center;justify-content:center;border-radius:50%!important;border:1.5px solid #DCE4EF!important;background:#fff!important;color:#9FB0C9!important;font-family:'IBM Plex Mono',ui-monospace,monospace!important;font-size:12.5px!important;font-weight:700!important;line-height:1!important;box-shadow:none!important;opacity:1!important;text-decoration:none!important;margin:0 auto}
#content.cpp-checkout .checkout-steps>div.cpp-ck-active .rounded-pill{background:#1493FF!important;border-color:#1493FF!important;color:#fff!important;box-shadow:0 0 0 5px rgba(20,147,255,.16)!important}
#content.cpp-checkout .checkout-steps>div.cpp-ck-done .rounded-pill{background:#20365B!important;border-color:#20365B!important}
#content.cpp-checkout .checkout-steps>div.cpp-ck-done .rounded-pill svg{filter:brightness(0) invert(1)}
#content.cpp-checkout .checkout-steps>div.cpp-ck-done .rounded-pill:hover{background:#0E6FDB!important;border-color:#0E6FDB!important}
#content.cpp-checkout .checkout-steps>div>div{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#9FB0C9;line-height:1.3;text-align:center;padding:0 4px}
#content.cpp-checkout .checkout-steps>div.cpp-ck-active>div{color:#0A1322;font-weight:700}
#content.cpp-checkout .checkout-steps>div.cpp-ck-done>div{color:#20365B}

/* compact mobile strip */
#content.cpp-checkout .cpp-ck-compact{display:none}
@media (max-width:991.98px){
  #content.cpp-checkout .checkout-steps{display:none}
  #content.cpp-checkout .cpp-ck-compact{display:block;background:#fff;border:1px solid #DCE4EF;border-radius:12px;padding:12px 14px;margin:6px 0 4px}
  #content.cpp-checkout .cpp-ck-compact .t{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  #content.cpp-checkout .cpp-ck-compact .n{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;color:#0E6FDB;font-weight:700;white-space:nowrap}
  #content.cpp-checkout .cpp-ck-compact .l{font-family:var(--fd-disp,'Barlow Condensed',sans-serif);font-weight:800;text-transform:uppercase;font-size:18px;color:#0A1322;line-height:1;text-align:right}
  #content.cpp-checkout .cpp-ck-compact .bar{height:6px;border-radius:99px;background:#EDF1F7;margin-top:9px;overflow:hidden}
  #content.cpp-checkout .cpp-ck-compact .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#1493FF,#0E6FDB)}
}

/* summary cards (JS-tagged; sidebar sticky) */
#content.cpp-checkout .cpp-ck-side{position:sticky;top:100px}
#content.cpp-checkout .border.cpp-ck-osum{background:#0A1322;border:0!important;border-radius:16px;padding:20px 22px!important;color:#C9D6EA;box-shadow:0 18px 44px rgba(10,19,34,.16)}
#content.cpp-checkout .border.cpp-ck-osum h5{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;color:#fff!important;font-size:20px;letter-spacing:.04em;margin:0 0 10px}
#content.cpp-checkout .cpp-ck-osum>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;font-size:14px;color:#C9D6EA}
#content.cpp-checkout .cpp-ck-osum .value{font-family:'IBM Plex Mono',ui-monospace,monospace;color:#fff;float:none!important;margin-left:auto}
#content.cpp-checkout .cpp-ck-osum hr{border-color:#243758!important;opacity:1;margin:8px 0!important}
#content.cpp-checkout .cpp-ck-osum>div:last-of-type{padding-top:9px;font-weight:700;color:#fff;font-size:15px}
#content.cpp-checkout .cpp-ck-osum>div:last-of-type .value{font-family:var(--fd-disp,'Barlow Condensed',sans-serif);font-weight:800;font-size:26px;line-height:1}
#content.cpp-checkout .border.cpp-ck-isum{background:#fff;border:1px solid #DCE4EF!important;border-radius:16px;padding:18px 20px!important;margin-top:18px!important}
#content.cpp-checkout .cpp-ck-isum>.mb-3{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px!important}
#content.cpp-checkout .border.cpp-ck-isum h5{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;color:#0A1322!important;font-size:18px;margin:0}
#content.cpp-checkout .cpp-ck-isum .cpp-ck-edit{float:none!important;font-family:'IBM Plex Mono',ui-monospace,monospace!important;font-size:10px!important;letter-spacing:.1em;text-transform:uppercase;color:#0E6FDB!important;background:#fff!important;border:1.5px solid #DCE4EF!important;border-radius:99px!important;padding:5px 12px!important;text-decoration:none!important;transition:.15s}
#content.cpp-checkout .cpp-ck-isum .cpp-ck-edit:hover{border-color:#1493FF!important;color:#fff!important;background:#1493FF!important}
#content.cpp-checkout .cpp-ck-isum>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0;font-size:13.5px;color:#0A1322}
#content.cpp-checkout .cpp-ck-isum .checkout-product-label{color:#5B6B85;line-height:1.45}
#content.cpp-checkout .cpp-ck-isum .value{font-family:'IBM Plex Mono',ui-monospace,monospace;color:#0A1322;float:none!important;margin-left:auto;white-space:nowrap}
#content.cpp-checkout .cpp-ck-isum hr{border-color:#DCE4EF!important;opacity:1;margin:8px 0!important}
#content.cpp-checkout .cpp-ck-isum>div:last-of-type{font-weight:700}


/* v3.8.8d · THEME's native step connector = pill ::after (3840px wide stripe
   through every circle) — re-exposed by the rail restyle; kill it. Plus
   mid-size tuning: tablets (<992) use the compact strip; small desktops
   (992-1399) get tighter labels so they never collide. */
#content.cpp-checkout .checkout-steps .rounded-pill::before,
#content.cpp-checkout .checkout-steps .rounded-pill::after{display:none!important;content:none!important}
@media (min-width:992px) and (max-width:1399.98px){
  #content.cpp-checkout .checkout-steps>div>div{font-size:8.5px;letter-spacing:.05em;padding:0 2px}
}


/* ═══════════════════════════════════════════════════════════════════════════
   v3.8.9 · SUMMARY STEP + ORDER CONFIRMATION (Book skin; hooks from JS).
   Scope: .cpp-ck-summary (added only when .summary-container exists) and
   cpp-confirm tags that exist nowhere else. Spreedly untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
#content.cpp-checkout [data-cpp-blank]{display:none!important}
#content.cpp-checkout .summary-container>h2{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;font-size:26px;color:#0A1322!important;letter-spacing:.02em;margin:0 0 16px;padding-bottom:12px;border-bottom:3px solid #1493FF}
#content.cpp-checkout .summary-container h4{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;font-size:19px;color:#0A1322!important;margin:26px 0 10px}
#content.cpp-checkout .summary-container .row [class*="col-"]{font-size:14px;color:#0A1322;line-height:1.7;padding-top:8px;padding-bottom:8px}
#content.cpp-checkout .summary-container .row [class*="col-"]>:first-child{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#5B6B85;margin-bottom:6px}
#content.cpp-checkout.cpp-ck-summary .place-order-btn,
#content.cpp-checkout.cpp-ck-summary #checkout-form button[type=submit],
#content.cpp-checkout.cpp-ck-summary #checkout-form input[type=submit]{border:0!important;border-radius:10px!important;background:#1493FF!important;color:#fff!important;font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.06em;font-size:19px!important;padding:15px 44px!important;box-shadow:0 10px 28px rgba(20,147,255,.35);transition:.15s;cursor:pointer}
#content.cpp-checkout.cpp-ck-summary .place-order-btn:hover,
#content.cpp-checkout.cpp-ck-summary #checkout-form button[type=submit]:hover,
#content.cpp-checkout.cpp-ck-summary #checkout-form input[type=submit]:hover{background:#0E6FDB!important;transform:translateY(-1px)}

/* order confirmation (/checkout/confirm) — cpp-confirm hooks only */
.content-item.thank-you.cpp-confirm{max-width:720px;margin:44px auto 10px!important;background:#fff;border:1px solid #DCE4EF;border-radius:20px;padding:44px 36px 38px;box-shadow:0 18px 44px rgba(10,19,34,.10);position:relative;overflow:hidden;text-align:center}
.content-item.thank-you.cpp-confirm::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#1493FF,#3FA9FF)}
.content-item.thank-you.cpp-confirm h1{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;color:#0A1322!important;letter-spacing:.01em;margin:18px 0 6px;font-size:36px}
.content-item.thank-you.cpp-confirm h1::before{content:'\2713';display:flex;width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:linear-gradient(135deg,#1493FF,#0E6FDB);color:#fff;font-size:30px;font-weight:700;align-items:center;justify-content:center;box-shadow:0 12px 26px rgba(20,147,255,.35)}
.content-item.thank-you.cpp-confirm h3{font-size:16px;font-weight:600;color:#20365B;margin:0 0 10px}
.content-item.thank-you.cpp-confirm .body{font-size:14px;color:#5B6B85;line-height:1.65;max-width:520px;margin:0 auto}
.content-item.thank-you.cpp-confirm .body a{color:#0E6FDB;font-weight:700}
.content-item.suggested-products.cpp-confirm h3{font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;font-size:24px;color:#0A1322!important;margin:36px 0 12px}
a.btn.cpp-confirm-back{border-radius:10px!important;border:0!important;color:#fff!important;background:#1493FF!important;font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.05em;padding:13px 34px!important;box-shadow:0 8px 22px rgba(20,147,255,.3);transition:.15s;text-decoration:none!important}
a.btn.cpp-confirm-back:hover{background:#0E6FDB!important;transform:translateY(-1px)}


/* v3.8.9b · mobile sticky Place Order bar (outside #content) — same Book CTA */
.quick-actions-menu .place-order-btn{border:0!important;border-radius:10px!important;background:#1493FF!important;color:#fff!important;font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 8px 22px rgba(20,147,255,.3)}
.quick-actions-menu .place-order-btn:hover{background:#0E6FDB!important}


/* v3.8.9b · mobile sticky Place Order bar (outside #content) — same Book CTA */
.quick-actions-menu .place-order-btn{border:0!important;border-radius:10px!important;background:#1493FF!important;color:#fff!important;font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 8px 22px rgba(20,147,255,.3)}
.quick-actions-menu .place-order-btn:hover{background:#0E6FDB!important}


/* ═══════════════════════════════════════════════════════════════════════════
   v3.8.9c · MOBILE QUICK-ACTIONS BAR + ACCOUNT DROP-UP (The Book).
   CSS only — native links/dropdown untouched. The bar is the theme's fixed
   bottom strip (.quick-actions-menu, <lg only): was flat #0078FF; now ink
   slip-bar w/ mono labels, FD-blue active state, white account card drop-up.
   ═══════════════════════════════════════════════════════════════════════════ */
.quick-actions-menu{background:#0A1322!important;border-top:1px solid #24365B!important;box-shadow:0 -12px 32px rgba(10,19,34,.28)!important;padding:6px 10px calc(6px + env(safe-area-inset-bottom))!important}
.quick-actions-menu .nav{display:flex;align-items:stretch;justify-content:space-around;gap:4px;width:100%}
.quick-actions-menu .nav-link.quick-nav-link,
.quick-actions-menu .btn.dropdown-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#8FA1BD!important;background:transparent!important;border:0!important;font-family:'IBM Plex Mono',ui-monospace,monospace!important;font-size:9px!important;font-weight:600!important;letter-spacing:.12em;text-transform:uppercase;padding:7px 16px!important;border-radius:10px;box-shadow:none!important;line-height:1!important}
.quick-actions-menu .nav-link svg,.quick-actions-menu .btn.dropdown-toggle svg{width:21px;height:21px}
.quick-actions-menu .nav-link svg path,.quick-actions-menu .btn.dropdown-toggle svg path{fill:currentColor!important}
.quick-actions-menu .nav-link.active{color:#fff!important;background:rgba(20,147,255,.22)!important}
.quick-actions-menu .nav-link:hover,.quick-actions-menu .btn.dropdown-toggle:hover,
.quick-actions-menu .btn.dropdown-toggle[aria-expanded="true"]{color:#fff!important}
.quick-actions-menu .btn.dropdown-toggle::after{display:none!important}
/* account drop-up card */
.quick-actions-menu .dropdown-menu{background:#fff!important;border:1px solid #DCE4EF!important;border-radius:14px!important;box-shadow:0 -16px 48px rgba(10,19,34,.25)!important;padding:8px!important;min-width:232px;overflow:hidden;margin-bottom:10px!important}
.quick-actions-menu .dropdown-item{font-family:'Barlow',Arial,sans-serif!important;font-size:14px!important;font-weight:600!important;color:#0A1322!important;padding:11px 14px!important;border-radius:9px!important;transition:background .12s,color .12s}
.quick-actions-menu .dropdown-item:hover,.quick-actions-menu .dropdown-item:focus{background:#F2F5FA!important;color:#0E6FDB!important}
.quick-actions-menu .dropdown-item[href="/account/logout"]{color:#E8483F!important;border-top:1px solid #DCE4EF!important;border-radius:0!important;margin-top:6px!important;padding-top:13px!important}
.quick-actions-menu .dropdown-item[href="/account/logout"]:hover{background:#FFF3F2!important;color:#E8483F!important}
/* checkout variant: the inner white panel joins the ink bar (Place Order stays FD-blue via v3.8.9b) */
.quick-actions-menu .bg-white{background:transparent!important;border-top:0!important}


/* ═══════════════════════════════════════════════════════════════════════════
   v3.8.9d · FLASH TOASTS (sign in/out, notices) — The Book. The theme's
   .notification-container renders Bootstrap toasts (.toast.notif-success /
   .notif-error, header strong + btn-close, body). Was a flat green two-band
   box; now a white Book card w/ status accent + badge. CSS only.
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes cppToastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.notification-container{z-index:2000!important}
.notification-container .toast{background:#fff!important;border:1px solid #DCE4EF!important;border-left:4px solid #00B15C!important;border-radius:12px!important;box-shadow:0 18px 44px rgba(10,19,34,.18)!important;overflow:hidden;min-width:300px;animation:cppToastIn .28s ease}
.notification-container .toast .toast-header strong{color:#0A1322!important}
.notification-container .toast .toast-header{background:transparent!important;border-bottom:0!important;color:#0A1322!important;font-family:var(--fd-disp,'Barlow Condensed',sans-serif)!important;font-weight:800!important;text-transform:uppercase;font-size:15px;letter-spacing:.05em;padding:12px 14px 0!important;display:flex;align-items:center}
.notification-container .toast .toast-header::before{content:'\2713';display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:#00B15C;color:#fff;font-size:11px;font-weight:700;margin-right:9px;font-family:'Barlow',Arial,sans-serif}
.notification-container .toast .toast-body{color:#5B6B85!important;font-family:'Barlow',Arial,sans-serif!important;font-size:14px!important;line-height:1.5;padding:6px 14px 14px 43px!important;background:transparent!important}
.notification-container .toast .btn-close{filter:none!important;opacity:.45;background-color:transparent!important}
.notification-container .toast .btn-close:hover{opacity:1}
/* status variants */
.notification-container .toast.notif-error{border-left-color:#E8483F!important}
.notification-container .toast.notif-error .toast-header::before{content:'!';background:#E8483F}
.notification-container .toast.notif-warning,.notification-container .toast.notif-notice{border-left-color:#FFC432!important}
.notification-container .toast.notif-warning .toast-header::before,.notification-container .toast.notif-notice .toast-header::before{content:'!';background:#B77900}


/* ═══════════════════════════════════════════════════════════════════════════
   v3.9 · availability wording support — native SOLD OUT card ribbon hidden
   (Austin: don't use it; the PDP panel tells the truth), and the PDP badge's
   sold-out state.
   ═══════════════════════════════════════════════════════════════════════════ */
.outofstock-container{display:none!important}
.cpp-fulfill-badge.oos{background:#E8483F!important;border-color:#E8483F!important;color:#fff!important}


/* ═══════════════════════════════════════════════════════════════════════════
   v3.9a · PDP OPTION SWATCHES — the color chips were oversized boxes with
   tiny padded thumbnails, and the selected state filled navy behind the art.
   Now: compact 64px square swatches, image fills the tile, selected = FD-blue
   ring + corner check badge (art stays fully visible). Buttons untouched. 
   ═══════════════════════════════════════════════════════════════════════════ */
#cpp-pdp .product-option-thumb{width:64px;height:64px;min-width:64px;padding:0!important;margin:0 8px 8px 0;background:#fff!important;border:1.5px solid #DCE4EF!important;border-radius:12px!important;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;position:relative;transition:border-color .15s, box-shadow .15s, transform .15s;box-shadow:none!important}
#cpp-pdp .product-option-thumb img{width:100%!important;height:100%!important;object-fit:contain;border:0!important;padding:4px!important;background:#fff;border-radius:0!important;max-width:none!important}
#cpp-pdp .product-option-thumb:hover{border-color:#9FB0C9!important;transform:translateY(-1px)}
#cpp-pdp .product-option-thumb.selected-prod-option{background:#fff!important;border:2px solid #1493FF!important;box-shadow:0 0 0 3px rgba(20,147,255,.18)!important}
#cpp-pdp .product-option-thumb.selected-prod-option::after{content:'\2713';position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:#1493FF;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;font-family:'Barlow',Arial,sans-serif;box-shadow:0 2px 6px rgba(10,19,34,.25)}

/* ═══════════════════════════════════════════════════════════════════════════
   v3.10.2 · PDP SIZE CHIPS — the SELECTED size letter was invisible.
   Root cause: v3.9a re-skinned .product-option-thumb for COLOR swatches
   (white tile + FD-blue ring + check badge) and overrode only background /
   border / box-shadow. The older v3.8.x rule above it
     #cpp-pdp .product-option-thumb.selected-prod-option{...color:#fff!important}
   was written for the NAVY fill, and that colour declaration survived the
   re-skin. Size options render TEXT in the button (product_option.liquid
   injects S / M / L / XL via JS) rather than an <img>, so the selected
   letter ended up white-on-white. Colour swatches carry no text node and
   were never affected — which is why it hid this long.
   Display-only, append-only. Rollback = delete this block.
   ═══════════════════════════════════════════════════════════════════════════ */
#cpp-pdp .product-option-thumb.selected-prod-option{color:#0A1322!important}

/* ═══════════════════════════════════════════════════════════════════════════
   v3.11 · CATEGORY-GRID STOCK COUNTS — the count chip appended to the plate,
   and the SOLD OUT state. Scoped to .fd-plate so nothing generic is touched.
   ═══════════════════════════════════════════════════════════════════════════ */
.fd-plate .fd-qty{display:inline;margin-left:7px;padding-left:7px;border-left:1px solid currentColor;font-weight:800;letter-spacing:.04em;opacity:.92}
.fd-plate.fd-plate--oos{background:#F4F6FA!important;color:#8A94A6!important;border-color:#DCE4EF!important}
.fd-plate.fd-plate--oos .fd-qty{display:none}

/* ═══════════════════════════════════════════════════════════════════════════
   v3.12 · AUTH PAGES ON EVERY ENTRY POINT — /permissions_denied, forgot /
   reset / resend / activate join the login split. Everything scoped under
   .cpp-auth-* (our own wrappers); native rows keep their nodes.
   ═══════════════════════════════════════════════════════════════════════════ */
.cpp-auth-wrap{border:0!important;margin-top:0!important}
.cpp-auth-wrap.my-5{margin-top:0!important;margin-bottom:0!important}
.cpp-auth-native-h1{display:none!important}
.cpp-auth-side .row.cpp-auth-row{background:transparent!important}                       /* permissions_denied row carries .bg-white (!important utility) */
.cpp-auth-side .cpp-auth-head .cpp-auth-sub{margin:0 0 22px;color:#5B6B85;font-size:15px;line-height:1.6;font-family:'Barlow',Arial,sans-serif}
.cpp-auth-side .sign-in .notice{margin:0 0 20px!important;padding:0!important;border:0!important;background:transparent!important;color:#5B6B85;font-size:14.5px;line-height:1.6;font-family:'Barlow',Arial,sans-serif;box-shadow:none!important}
.cpp-auth-side .sign-in .notice a{display:inline!important;margin:0!important;font:inherit!important;letter-spacing:0!important;text-transform:none!important;color:#0E6FDB;text-decoration:underline}
.cpp-auth-side .sign-in label .required-label{font-weight:500;letter-spacing:.06em;color:#9FB0C9;text-transform:none}
.cpp-auth-side .sign-in .invalid-feedback{font-family:'Barlow',Arial,sans-serif;font-size:13px;color:#E8483F}
.cpp-auth-side .sign-in .form-control.is-invalid{border-color:#E8483F}
.cpp-auth-side .sign-in .sign-in-form.input_frgt{margin-bottom:6px!important}
.cpp-auth-side .cpp-auth-help>a{display:inline-block;color:#0E6FDB;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;margin-top:14px}
.cpp-auth-side .cpp-auth-help>a:hover{text-decoration:underline}
/* logged-in visitor on /permissions_denied — the "not in your book" card */
.cpp-auth-split--card .cpp-auth-side{justify-content:center}
.cpp-auth-actions{max-width:440px;margin:0 auto;width:100%;display:flex;flex-wrap:wrap;gap:10px}
.cpp-auth-btn{display:inline-flex;align-items:center;justify-content:center;flex:1 1 180px;border-radius:9px;padding:14px 18px;font-family:var(--fd-disp,'Barlow Condensed',sans-serif);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:16px;white-space:nowrap;text-decoration:none!important;transition:.2s;cursor:pointer}
.cpp-auth-btn--primary{background:#1493FF;color:#fff!important;box-shadow:0 8px 24px rgba(20,147,255,.35)}
.cpp-auth-btn--primary:hover{background:#0E6FDB;transform:translateY(-1px)}
.cpp-auth-btn--ghost{background:#fff;color:#20365B!important;border:1.5px solid #DCE4EF}
.cpp-auth-btn--ghost:hover{border-color:#20365B}
/* the native permissions toast is a .notif-warning — the v3.9 toast skin only knew success/error (it painted a green ✓ on "Warning") */
.notification-container .toast.notif-warning{border-left-color:#F2A900!important}
.notification-container .toast.notif-warning .toast-header::before{content:'!';background:#F2A900}

/* ═══════════════════════════════════════════════════════════════════════════
   v3.12 · LIVE STOCK — no new visuals by design; the live number reuses the
   v3.11 chip. A hook is left for QA (data-fd-live) and a soft settle.
   ═══════════════════════════════════════════════════════════════════════════ */
.fd-plate .fd-qty.fd-qty--live{animation:fdQtySettle .35s ease}
@keyframes fdQtySettle{from{opacity:.35}to{opacity:.92}}