/*!
 * Codeison Theme — Premium Fashion CSS
 * Hand-authored for OpenCart 4.1. Shopify-grade visual quality, zero runtime dependencies.
 */

:root {
  --codeison-brand: #111111;
  --codeison-accent: #d97706;
  --codeison-text: #1a1a1a;
  --codeison-text-muted: #6b7280;
  --codeison-text-subtle: #9ca3af;
  --codeison-border: #e5e7eb;
  --codeison-border-soft: #f3f4f6;
  --codeison-bg: #ffffff;
  --codeison-bg-soft: #fafafa;
  --codeison-bg-muted: #f5f5f5;
  --codeison-font-body: 'Inter', 'Helvetica Neue', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --codeison-font-display: 'Cormorant Garamond', 'Didot', Georgia, serif;
  --codeison-radius-sm: 4px;
  --codeison-radius: 8px;
  --codeison-radius-lg: 16px;
  --codeison-ease: cubic-bezier(.4, 0, .2, 1);
  --codeison-transition: 250ms var(--codeison-ease);
  --codeison-shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --codeison-shadow: 0 4px 16px rgba(0,0,0,.06);
  --codeison-shadow-lg: 0 10px 40px rgba(0,0,0,.1);
  --codeison-max: 1400px;
}

[x-cloak] { display: none !important; }

/* ============================================================
   RESET OC DEFAULTS — must come BEFORE any other rules so the
   cascade doesn't let them re-assert. OC's stylesheet.css ships
   #container { position: absolute; margin-bottom: 300px; } and
   #content { padding-bottom: 730px; } which collapse our layout.
   ============================================================ */
html, body {
  height: auto !important;
  min-height: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body #container,
html body div#container {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
html body #content,
html body #column-left,
html body #column-right {
  padding-bottom: 0 !important;
}
html body #alert {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  margin: 0 !important;
  z-index: auto !important;
}
html body #top { display: none !important; }

/* OC ships footer { position: absolute; bottom: -1px; border: 1px solid #000 } which
   makes our footer overlap the hero/content. Force static + clean it fully. */
html body footer,
html body footer.cds-footer {
  position: static !important;
  bottom: auto !important;
  border: 0 !important;
  width: auto !important;
}

/* Hide the raw OC chrome that may render if an event fails */
body > #container > nav#top,
body > #container > header:not(.cds-header),
body > #container > main > #menu,
body > #container > footer:not(.cds-footer) {
  display: none !important;
}

/* ---------- Base typography & box model ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--codeison-font-body);
  color: var(--codeison-text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
  background: #fff;
  font-feature-settings: 'ss01' 1, 'cv11' 1, 'kern' 1, 'liga' 1;
}

/* Global font consistency — ensure every OC/Bootstrap/form element inherits our stack
   instead of falling back to browser defaults (Times New Roman on textarea, etc).
   These MUST stay above component-specific rules so component overrides still win. */
body, body * {
  /* don't force font on icons — Font Awesome needs its own family */
}
button, input, select, textarea, optgroup, fieldset, legend, label,
.btn, .form-control, .form-select, .input-group-text,
table, th, td, dl, dt, dd, ul, ol, li, p, blockquote, figcaption, small, strong, em,
.pagination, .page-link, .nav-link, .alert, .badge, .breadcrumb, .breadcrumb-item {
  font-family: var(--codeison-font-body);
}
/* OC + Bootstrap may ship buttons/inputs with bold weights — normalise to 500 for consistency */
button, .btn { font-weight: 500; }
input, select, textarea { font-weight: 400; }
/* Serif ONLY for these semantic headings + explicit classes — everything else stays sans */
h1, h2, h3, h4, h5, h6,
.cds-display, [class*="cds-"][class*="-title"], [class*="cds-"][class*="-heading"] {
  font-family: var(--codeison-font-display);
}
/* Prices, numbers, tabular data — keep sans for clarity */
.price, .price-new, .price-old, .price-tax,
input[type="number"], input[type="tel"],
td.price, .cds-price, .cds-amount, .cds-qty {
  font-family: var(--codeison-font-body);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
a { color: inherit; text-decoration: none; transition: color var(--codeison-transition); }
a:hover { color: var(--codeison-accent); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--codeison-font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.15;
  color: var(--codeison-text);
  margin: 0 0 .4em;
  font-feature-settings: 'kern' 1, 'liga' 1;
}
h1 { font-weight: 500; }
h2 { font-weight: 500; }
h3 { font-weight: 500; }
h4, h5, h6 { font-weight: 600; }

/* Cormorant Garamond is a thin elegant serif — override any 700/heavier weights to 500/600 for consistent look */
.cds-pdp-title, .cds-cat-title, .cds-page-title, .cds-section-title,
.cds-product-title, .cds-aplus-feature-copy h3, .cds-popup h3,
.cds-auth-title, .cds-bag-name, .cds-bag-count, .cds-bag-line-total,
.cds-specs-title, .cds-sg-body h3, .cds-bag-modules-title,
.cds-review-rating-big strong,
h1.cds-product-title, h1.cds-cat-title, h1.cds-page-title, h1.cds-pdp-title {
  font-family: var(--codeison-font-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
}
/* Hero + large heroic text use slightly heavier for presence */
.cds-hero-title, .cds-pdp-title {
  font-weight: 500 !important;
  letter-spacing: -0.01em;
}
/* Tabular numerals for all prices and numeric data */
.cds-pdp-price-new, .cds-pdp-price-old,
.product-thumb .price, .cds-thumb-price,
.cds-cart-page td, .cds-cat-count,
.price-new, .price-old {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
p { margin: 0 0 1em; }
#container { display: block; }
#container > main { padding: 0; margin: 0; }
.cds-main-wrap { min-height: 60vh; }

/* ---------- Topbar ---------- */
/* ---------- Top announcement bar ---------- */
.cds-topbar {
  background: #111; color: rgba(255,255,255,.92);
  font-size: 12px; font-weight: 500;
  letter-spacing: .06em; padding: 10px 0;
  position: relative;
  /* No z-index — drawer (10001) sits above topbar naturally */
}
.cds-topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--codeison-max); margin: 0 auto;
  padding: 0 24px; gap: 16px;
}
.cds-topbar-message { flex: 1; text-align: center; font-weight: 500; }
.cds-topbar-message i { margin: 0 4px; color: var(--codeison-accent, #d97706); }
.cds-topbar-side { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.cds-topbar-side { position: relative; display: inline-flex; align-items: center; gap: 12px; }
.cds-topbar-side--start { justify-content: flex-start; }
.cds-topbar-link {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: 11px; font-weight: 500;
  letter-spacing: .1em;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 150ms;
}
.cds-topbar-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.cds-topbar-link i { font-size: 12px; opacity: .85; }
.cds-topbar-side .dropdown-toggle { color: rgba(255,255,255,.85); text-decoration: none; background: none; border: 0; font-size: 11px; padding: 4px 8px; transition: color 150ms; cursor: pointer; border-radius: 4px; }
.cds-topbar-side .dropdown-toggle:hover, .cds-topbar-side .dropdown-toggle:focus { color: #fff; background: rgba(255,255,255,.08); outline: none; }
.cds-topbar-side form { display: inline-block; margin: 0; position: relative; }
/* Currency/Language dropdown menu popover */
.cds-topbar-side .dropdown-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important; right: 0 !important; left: auto !important; transform: none !important;
  min-width: 180px; padding: 6px !important;
  background: #fff !important; color: #111;
  border: 1px solid #ebe9e4 !important; border-radius: 10px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.15);
  list-style: none; margin: 0 !important;
  z-index: 100 !important;
  font-size: 13px;
}
.cds-topbar-side .dropdown-menu a,
.cds-topbar-side .dropdown-menu button,
.cds-topbar-side .dropdown-item {
  display: block !important; width: 100%;
  padding: 9px 14px !important; border-radius: 6px;
  color: #374151 !important; text-decoration: none !important;
  background: transparent !important; border: 0 !important;
  font-size: 13px !important; font-weight: 500 !important;
  text-align: left; cursor: pointer;
  letter-spacing: normal; text-transform: none;
  transition: all 150ms;
}
.cds-topbar-side .dropdown-menu a:hover,
.cds-topbar-side .dropdown-menu button:hover,
.cds-topbar-side .dropdown-item:hover { background: #f5f5f0 !important; color: #111 !important; padding-left: 18px !important; }
.cds-topbar-side .dropdown-menu button strong,
.cds-topbar-side .dropdown-menu a strong { color: #111; font-weight: 600; margin-right: 6px; }
@media (max-width: 768px) {
  .cds-topbar-side { display: none; }
  .cds-topbar { font-size: 11px; padding: 8px 0; }
}

/* ---------- Header ---------- */
.cds-header {
  display: block !important;
  background: #fff; border-bottom: 1px solid #f3f4f6;
  transition: box-shadow 220ms, background 220ms;
  position: relative; z-index: 50;
}
.cds-header.is-sticky { position: sticky; top: 0; }
.cds-header.is-sticky.is-scrolled {
  box-shadow: 0 1px 12px rgba(0,0,0,.05);
  backdrop-filter: saturate(180%) blur(10px);
  background: rgba(255,255,255,.96);
}

.cds-header-inner {
  display: flex; align-items: center;
  gap: 24px;
  max-width: var(--codeison-max); margin: 0 auto;
  padding: 18px 24px;
}

.cds-logo {
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none; flex-shrink: 0;
  color: var(--codeison-text);
  transition: opacity 180ms var(--codeison-ease);
}
.cds-logo:hover { opacity: .78; }
.cds-logo img { max-height: 42px; width: auto; }

/* Monogram: solid black square with a clean serif "C" cutout.
   The <rect> uses currentColor so the square matches the wordmark; the "C"
   is a white stroke that reads clearly even at tiny sizes. */
.cds-logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  color: var(--codeison-text);
  flex-shrink: 0;
  transition: transform 500ms var(--codeison-ease);
}
.cds-logo-mark svg { display: block; width: 100%; height: 100%; }
.cds-logo:hover .cds-logo-mark { transform: scale(1.06) rotate(-3deg); }

/* ----- Serif wordmark with delicate flanking-line tagline underneath.
   Inspired by Everlane, COS, Jil Sander, Aritzia. ----- */
.cds-logo-wordmark {
  display: inline-flex; flex-direction: column; align-items: center;
  line-height: 1;
  padding: 2px 4px;
}
.cds-logo-text {
  font-family: var(--codeison-font-display);
  font-size: 30px; font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--codeison-text);
  line-height: 1;
  text-transform: none;
  font-feature-settings: 'dlig' 1, 'liga' 1, 'kern' 1;
}
/* Thin horizontal rule + tagline beneath, all-caps micro-text */
.cds-logo-tagline {
  position: relative;
  display: inline-block;
  font-family: var(--codeison-font-body);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--codeison-text-muted);
  margin-top: 6px;
  padding: 4px 0 0;
  /* Padding reserves space so the flanking lines sit level with the text */
}
.cds-logo-tagline::before,
.cds-logo-tagline::after {
  content: ''; position: absolute;
  top: 50%; width: 18px; height: 1px;
  background: var(--codeison-text);
  transition: width 400ms var(--codeison-ease);
}
.cds-logo-tagline::before { right: calc(100% + 8px); }
.cds-logo-tagline::after  { left: calc(100% + 8px); }
.cds-logo:hover .cds-logo-tagline::before,
.cds-logo:hover .cds-logo-tagline::after { width: 26px; }

@media (max-width: 768px) {
  .cds-logo { gap: 10px; }
  .cds-logo-mark { width: 36px; height: 36px; }
  .cds-logo-text { font-size: 24px; }
  .cds-logo-tagline { font-size: 7px; letter-spacing: 0.4em; margin-top: 4px; }
  .cds-logo-tagline::before, .cds-logo-tagline::after { width: 14px; }
}
@media (max-width: 480px) {
  .cds-logo-mark { width: 32px; height: 32px; }
  .cds-logo-text { font-size: 22px; }
  .cds-logo-tagline { display: none; }
}

.cds-header-centered .cds-header-inner { flex-direction: column; padding: 18px 24px 0; }
.cds-header-centered .cds-header-row { display: flex; width: 100%; align-items: center; justify-content: space-between; }
.cds-header-centered .cds-logo { order: 2; text-align: center; }

/* ----- Header variants (selectable from Theme Picker) ----- */
/* Minimal: tight, tools on the right, no search bar by default */
.cds-header-minimal .cds-header-inner { padding: 12px 24px; min-height: 56px; }
.cds-header-minimal .cds-search-wrap { display: none; }
.cds-header-minimal .cds-logo-tagline { display: none; }

/* Split: logo center, nav left, tools right — editorial feel */
.cds-header-split .cds-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 18px 24px; }
.cds-header-split .cds-logo { grid-column: 2; justify-self: center; }
.cds-header-split .cds-header-tools { grid-column: 3; justify-self: end; }
.cds-header-split .cds-search-wrap { grid-column: 1; max-width: 320px; }

/* Transparent: lays over the hero on home, goes solid on scroll (Alpine-driven) */
.cds-header-transparent { background: transparent !important; border-bottom: 0 !important; position: absolute; top: 0; left: 0; right: 0; z-index: 50; }
.cds-header-transparent .cds-logo-text, .cds-header-transparent .cds-logo-tagline, .cds-header-transparent .cds-header-tools a, .cds-header-transparent .cds-mega-link { color: #fff !important; }
.cds-header-transparent.is-scrolled { background: #fff !important; position: fixed; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.cds-header-transparent.is-scrolled .cds-logo-text, .cds-header-transparent.is-scrolled .cds-logo-tagline, .cds-header-transparent.is-scrolled .cds-header-tools a, .cds-header-transparent.is-scrolled .cds-mega-link { color: var(--codeison-text) !important; }

/* ---------- Search wrapper (contains input + autocomplete dropdown) ---------- */
.cds-search-wrap { position: relative; flex: 1; max-width: 520px; margin: 0 auto; }
.cds-search-wrap .cds-search { max-width: none; margin: 0; }
.cds-search-suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: #fff; border: 1px solid #ebe9e4; border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
  max-height: min(70vh, 540px); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all 200ms; z-index: 80;
}
.cds-search-suggest.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.cds-search-none { padding: 20px; font-size: 13px; color: #6b7280; text-align: center; }
.cds-search-none strong { color: #111; }
.cds-search-list { padding: 6px; }
.cds-search-hit {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 12px;
  align-items: center; padding: 10px; border-radius: 8px;
  text-decoration: none; color: #111; transition: background 150ms;
}
.cds-search-hit:hover { background: #fafaf9; }
.cds-search-hit img, .cds-search-hit .cds-search-hit-ph {
  width: 48px; height: 60px; object-fit: cover; border-radius: 6px; background: #f3f4f6; display: block;
}
.cds-search-hit-name { font-size: 13px; font-weight: 500; color: #111; line-height: 1.3; }
.cds-search-hit-price { font-size: 13px; color: #111; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cds-search-hit-price s { color: #9ca3af; margin-right: 4px; }
.cds-search-hit-price strong { font-weight: 700; }
.cds-search-all {
  display: block; padding: 14px 16px; text-align: center;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: #111; text-decoration: none; background: #fafaf9;
  border-top: 1px solid #f3f4f6; border-radius: 0 0 12px 12px;
}
.cds-search-all:hover { color: var(--codeison-accent, #d97706); }

/* ---------- Search ---------- */
.cds-search {
  flex: 1;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}
.cds-search input {
  width: 100%;
  padding: 13px 52px 13px 20px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-size: 13px;
  background: #f5f5f0;
  font-family: inherit;
  color: #111;
  transition: all 180ms;
}
.cds-search input::placeholder { color: #9ca3af; }
.cds-search input:focus {
  outline: none;
  border-color: #111;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.cds-search button {
  position: absolute;
  right: 6px; top: 50%; transform: translateY(-50%);
  background: #111; border: 0;
  cursor: pointer; color: #fff;
  padding: 0; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  transition: background 180ms, transform 180ms;
}
.cds-search button:hover { background: var(--codeison-accent, #d97706); transform: translateY(-50%) scale(1.05); }

.cds-search-modal {
  position: fixed;
  inset: 0;
  background: rgba(17,17,17,.75);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}
.cds-search-modal[style*="display: flex"] { display: flex !important; }
.cds-search-modal .cds-search { max-width: 680px; width: 90%; margin: 0; }
.cds-search-modal .cds-search input { padding: 16px 56px 16px 24px; font-size: 16px; background: #fff; border-radius: 100px; }

/* ---------- Header tools (account/wishlist/cart) ---------- */
.cds-header-tools {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.cds-header-tools a,
.cds-header-tools button {
  color: #111; text-decoration: none; background: transparent; border: 0;
  cursor: pointer; font-size: 16px;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; padding: 0;
  transition: all 180ms;
}
.cds-header-tools a:hover, .cds-header-tools button:hover {
  background: #f5f5f0; color: #111;
}
.cds-badge {
  position: absolute;
  top: 6px; right: 6px;
  background: var(--codeison-accent, #d97706); color: #fff;
  border-radius: 100px;
  font-size: 9px; font-weight: 700;
  padding: 1px 5px; min-width: 16px; height: 16px;
  text-align: center; line-height: 14px;
  border: 1.5px solid #fff;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ---------- Menu (desktop) ---------- */
.cds-menu-wrap {
  border-top: 1px solid var(--codeison-border-soft);
  background: #fff;
}
.cds-menu-inner {
  max-width: var(--codeison-max);
  margin: 0 auto;
  padding: 0 24px;
}
/* Nuke OC default menu chrome (Bootstrap .bg-primary, .container wrappers, navbar padding) */
.cds-menu-inner .container { max-width: none !important; padding: 0 !important; }
.cds-menu-inner #menu,
.cds-menu-inner .navbar,
.cds-menu-inner .navbar.bg-primary {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
}
/* Force Bootstrap's collapse region to always display on desktop inside our wrap */
.cds-menu-inner .navbar-collapse {
  display: flex !important;
  flex-basis: auto !important;
  justify-content: center;
}
@media (max-width: 991px) {
  .cds-menu-inner .navbar-collapse { display: none !important; }
}
.cds-menu-inner .navbar-nav { gap: 4px; display: flex; flex-direction: row; flex-wrap: wrap; padding: 0 !important; margin: 0 !important; list-style: none; }
.cds-menu-inner .navbar-nav > li { list-style: none; }
.cds-menu-inner .nav-link,
.cds-menu-inner .navbar-nav > li > a,
.cds-menu-inner .navbar-nav > li > a.nav-link {
  color: var(--codeison-text) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 18px 18px !important;
  position: relative !important;
  text-decoration: none !important;
  display: inline-block !important;
  background: transparent !important;
  border: 0 !important;
  transition: color var(--codeison-transition) !important;
}
.cds-menu-inner .nav-link:hover,
.cds-menu-inner .navbar-nav > li > a:hover,
.cds-menu-inner .navbar-nav > li.dropdown:hover > a {
  color: var(--codeison-accent) !important;
  background: transparent !important;
}
.cds-menu-inner .nav-link::after,
.cds-menu-inner .navbar-nav > li > a::after {
  content: '';
  position: absolute;
  left: 18px; right: 18px; bottom: 12px;
  height: 2px;
  background: var(--codeison-accent);
  transform: scaleX(0);
  transition: transform var(--codeison-transition);
  transform-origin: center;
}
.cds-menu-inner .nav-link:hover::after,
.cds-menu-inner .navbar-nav > li > a:hover::after { transform: scaleX(1); }
/* Kill Bootstrap dropdown-toggle chevron glyph clash */
.cds-menu-inner .dropdown-toggle::after { vertical-align: middle; margin-left: 6px; opacity: .5; }

.cds-menu-inner .dropdown-menu {
  border: 1px solid var(--codeison-border-soft) !important;
  box-shadow: var(--codeison-shadow) !important;
  border-radius: var(--codeison-radius) !important;
  padding: 8px !important;
  margin-top: 0 !important;
  background: #fff !important;
  min-width: 200px !important;
}
.cds-menu-inner .dropdown-item { border-radius: var(--codeison-radius-sm); padding: 10px 14px; font-size: 13px; color: var(--codeison-text) !important; }
.cds-menu-inner .dropdown-item:hover { background: var(--codeison-bg-soft) !important; color: var(--codeison-brand) !important; }
.cds-menu-inner #category { display: none !important; }
.cds-menu-inner .navbar-toggler { display: none !important; }

/* ============================================================
   CODEISON MEGA MENU (replaces OC's default bootstrap navbar)
   ============================================================ */
.cds-mega { width: 100%; }
.cds-mega-list { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 0; flex-wrap: wrap; }
.cds-mega-item { position: static; }
.cds-mega-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 16px 20px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: #111; text-decoration: none;
  transition: color 180ms;
  position: relative;
}
.cds-mega-link:hover { color: var(--codeison-accent, #d97706); }
.cds-mega-caret { font-size: 8px; opacity: .5; transition: transform 220ms; }
.cds-mega-item:hover .cds-mega-caret { transform: rotate(180deg); opacity: 1; }
.cds-mega-link::after {
  content: ''; position: absolute; left: 20px; right: 20px; bottom: 8px;
  height: 2px; background: #111;
  transform: scaleX(0); transform-origin: center;
  transition: transform 250ms cubic-bezier(.25,.46,.45,.94);
}
.cds-mega-item:hover > .cds-mega-link::after { transform: scaleX(1); }

.cds-mega-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid #f3f4f6;
  box-shadow: 0 20px 60px rgba(0,0,0,.08);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all 260ms cubic-bezier(.25,.46,.45,.94);
  z-index: 60; padding: 36px 28px 28px;
}
.cds-mega-item.has-mega:hover > .cds-mega-panel,
.cds-mega-item.has-mega:focus-within > .cds-mega-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.cds-mega-panel-inner {
  max-width: var(--codeison-max); margin: 0 auto;
}
.cds-mega-content {
  display: grid; grid-template-columns: 1fr 280px; gap: 40px;
}
.cds-mega-cols-wrap {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px;
}
.cds-mega-col { display: flex; flex-direction: column; gap: 0; }
.cds-mega-col::before {
  content: 'Browse'; display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: #9ca3af; margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid #f3f4f6;
}
.cds-mega-col:nth-child(2)::before { content: 'More'; }
.cds-mega-col:nth-child(3)::before { content: 'Collections'; }
.cds-mega-col-link {
  display: block; font-size: 14px; color: #374151;
  text-decoration: none; padding: 7px 0;
  transition: all 150ms;
}
.cds-mega-col-link:hover { color: var(--codeison-accent, #d97706); padding-left: 4px; }

/* Featured card inside mega panel */
.cds-mega-featured-card {
  display: block; text-decoration: none; color: #111;
  border-radius: 12px; overflow: hidden;
  background: #f5f5f0; height: 100%;
  transition: transform 200ms;
}
.cds-mega-featured-card:hover { transform: translateY(-2px); }
.cds-mega-featured-img {
  aspect-ratio: 4/3; overflow: hidden; background: #e5e7eb;
}
.cds-mega-featured-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms ease;
}
.cds-mega-featured-card:hover img { transform: scale(1.05); }
.cds-mega-featured-body { padding: 16px 18px; }
.cds-mega-featured-eyebrow {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: .14em; color: #9ca3af; margin-bottom: 4px;
}
.cds-mega-featured-body strong {
  display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px;
}
.cds-mega-featured-cta {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--codeison-accent, #d97706);
  display: inline-flex; align-items: center; gap: 6px;
}

/* Compact mega panel (3-7 children) — narrower, no image */
.cds-mega-panel--compact { padding: 24px; }
.cds-mega-panel--compact .cds-mega-panel-inner { max-width: 600px; }
.cds-mega-compact-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px;
}
.cds-mega-compact-item {
  display: block; padding: 12px 16px; border-radius: 8px;
  text-decoration: none; color: #374151; font-size: 14px; font-weight: 500;
  transition: all 150ms;
}
.cds-mega-compact-item:hover { background: #f5f5f0; color: #111; padding-left: 20px; }
.cds-mega-compact-item--all { color: var(--codeison-accent, #d97706); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }

/* Promo strip at bottom of mega panel */
.cds-mega-promo {
  padding: 14px 0 0; margin-top: 20px;
  border-top: 1px solid #f3f4f6;
  font-size: 12px; color: #6b7280; text-align: center;
  letter-spacing: .04em;
}
.cds-mega-promo i { color: #111; margin-right: 4px; }

/* Column header inside mega */
.cds-mega-col-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: #9ca3af;
  padding-bottom: 10px; margin-bottom: 6px;
  border-bottom: 1px solid #f3f4f6;
}
.cds-mega-col-link--accent { color: var(--codeison-accent, #d97706) !important; font-weight: 600; margin-top: 6px; }

.cds-mega-footer {
  max-width: var(--codeison-max); margin: 20px auto 0;
  padding-top: 16px; border-top: 1px solid var(--codeison-border-soft);
  text-align: center;
}
.cds-mega-all {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--codeison-brand); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.cds-mega-all:hover { color: var(--codeison-accent); }

/* Simple dropdown (1-4 children) */
.cds-drop {
  position: absolute; top: 100%; left: 0;
  min-width: 220px; padding: 10px 0; margin: 0;
  background: #fff; border: 1px solid var(--codeison-border-soft);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.08);
  list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all 180ms ease;
  z-index: 60;
}
.cds-mega-item.has-drop { position: relative; }
.cds-mega-item.has-drop:hover > .cds-drop,
.cds-mega-item.has-drop:focus-within > .cds-drop { opacity: 1; visibility: visible; transform: none; }
.cds-drop li a {
  display: block; padding: 8px 20px;
  font-size: 13px; color: #374151; text-decoration: none;
  transition: all 150ms;
}
.cds-drop li a:hover { background: #f9fafb; color: var(--codeison-accent); padding-left: 24px; }
.cds-drop-all { border-top: 1px solid #f3f4f6; margin-top: 4px; padding-top: 4px; }
.cds-drop-all a { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--codeison-brand) !important; }

@media (max-width: 991px) {
  .cds-mega-list { display: none; }
}

/* ---------- Mobile menu ---------- */
.cds-mobile-toggle { display: none; background: none; border: 0; font-size: 22px; cursor: pointer; padding: 0; margin-right: 8px; color: var(--codeison-text); }
.cds-mobile-menu {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 360px; max-width: 88vw;
  background: #fff;
  z-index: 200;
  transform: translateX(-100%);
  transition: transform 320ms var(--codeison-ease);
  display: flex;
  flex-direction: column;
}
.cds-mobile-menu.is-open { transform: translateX(0); box-shadow: 2px 0 40px rgba(0,0,0,.25); }
.cds-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--codeison-ease);
}
.cds-mobile-overlay.is-open { opacity: 1; pointer-events: auto; }
.cds-mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--codeison-border-soft);
  font-family: var(--codeison-font-display);
  font-size: 22px;
  color: var(--codeison-brand);
}
.cds-mobile-close { background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; color: var(--codeison-text-muted); padding: 4px 8px; transition: color 150ms; }
.cds-mobile-close:hover { color: var(--codeison-brand); }
.cds-mobile-menu-body { overflow-y: auto; flex: 1; padding: 6px 0; display: flex; flex-direction: column; }

/* Links — clean 48px touch targets */
.cds-mobile-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  text-decoration: none;
  color: var(--codeison-text);
  font-weight: 500;
  font-size: 15px;
  border-bottom: 1px solid var(--codeison-border-soft);
  transition: background 150ms, color 150ms;
}
.cds-mobile-link i { width: 18px; color: var(--codeison-text-muted); font-size: 15px; }
.cds-mobile-link:hover { background: var(--codeison-bg-soft); color: var(--codeison-accent); }
.cds-mobile-link:hover i { color: var(--codeison-accent); }

/* Accordion (mega_data parent) */
.cds-mobile-accordion { border-bottom: 1px solid var(--codeison-border-soft); }
.cds-mobile-accordion > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  font-size: 15px;
  color: var(--codeison-text);
  transition: background 150ms;
}
.cds-mobile-accordion > summary::-webkit-details-marker { display: none; }
.cds-mobile-accordion > summary:hover { background: var(--codeison-bg-soft); }
.cds-mobile-accordion > summary i { font-size: 12px; color: var(--codeison-text-muted); transition: transform 220ms; }
.cds-mobile-accordion[open] > summary i { transform: rotate(180deg); }

.cds-mobile-accordion-body {
  background: var(--codeison-bg-soft);
  padding: 6px 0 14px;
}
.cds-mobile-sub-title {
  margin: 12px 24px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--codeison-text-muted);
}
.cds-mobile-sublink {
  display: block;
  padding: 10px 24px 10px 36px;
  text-decoration: none;
  font-size: 14px;
  color: var(--codeison-text);
  transition: background 150ms, color 150ms;
}
.cds-mobile-sublink:hover { background: rgba(0,0,0,.03); color: var(--codeison-accent); }
.cds-mobile-sublink-all {
  padding-left: 24px;
  margin: 4px 16px 6px;
  background: var(--codeison-brand);
  color: #fff !important;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 20px;
}
.cds-mobile-sublink-all:hover { background: var(--codeison-accent); color: #fff !important; }

/* Divider between nav and account links */
.cds-mobile-divider { height: 8px; background: var(--codeison-bg-soft); margin: 6px 0; border: 0; }

/* Currency select */
.cds-mobile-currency { padding: 16px 24px; display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--codeison-border-soft); margin-top: auto; }
.cds-mobile-currency-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--codeison-text-muted); }
.cds-mobile-currency select { flex: 1; padding: 8px 10px; border: 1px solid var(--codeison-border); border-radius: 6px; background: #fff; font-size: 14px; }

/* ---------- Container helpers ---------- */
.cds-container { max-width: var(--codeison-max); margin: 0 auto; padding: 0 24px; }

/* ---------- Grid ---------- */
.cds-grid { display: grid; gap: 24px; grid-template-columns: repeat(var(--cds-cols, 4), minmax(0, 1fr)); }
@media (max-width: 960px) { .cds-grid { gap: 16px; } }
@media (max-width: 768px) { .cds-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* ---------- Product Card ---------- */
.cds-card {
  background: transparent;
  position: relative;
  transition: transform var(--codeison-transition);
}
.cds-card:hover { transform: translateY(-4px); }
.cds-card-image {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--codeison-bg-soft);
  border-radius: var(--codeison-radius);
}
.cds-card-image img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--codeison-transition), transform 600ms var(--codeison-ease); }
.cds-card-image .cds-img-hover { position: absolute; inset: 0; opacity: 0; }
.cds-card:hover .cds-img-hover { opacity: 1; }
.cds-card:hover .cds-card-image img:first-child { transform: scale(1.06); }
.cds-card-body { padding: 14px 4px 6px; }
.cds-card-title {
  font-family: var(--codeison-font-body);
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--codeison-text);
  text-decoration: none;
  display: block;
  line-height: 1.4;
  letter-spacing: 0;
}
.cds-card-title:hover { color: var(--codeison-accent); }
.cds-card-price { font-size: 15px; font-weight: 600; color: var(--codeison-text); }
.cds-card-price-old { text-decoration: line-through; color: var(--codeison-text-muted); margin-right: 8px; font-weight: 400; font-size: 13px; }

.cds-card-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.cds-badge-tag {
  background: #fff;
  color: var(--codeison-text);
  font-size: 10px;
  padding: 5px 10px;
  border-radius: 100px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: var(--codeison-shadow-sm);
}
.cds-badge-tag.is-new { background: var(--codeison-brand); color: #fff; }
.cds-badge-tag.is-sale { background: #dc2626; color: #fff; }

.cds-card-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateX(8px);
  transition: all var(--codeison-transition);
  z-index: 2;
}
.cds-card:hover .cds-card-actions { opacity: 1; transform: translateX(0); }
.cds-icon-btn {
  background: #fff;
  border: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--codeison-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--codeison-text);
  font-size: 14px;
}
.cds-icon-btn:hover { background: var(--codeison-brand); color: #fff; }

.cds-quickview-btn {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  background: rgba(17,17,17,.95);
  color: #fff;
  border: 0;
  padding: 12px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: all var(--codeison-transition);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--codeison-radius-sm);
  font-family: var(--codeison-font-body);
}
.cds-card:hover .cds-quickview-btn { opacity: 1; transform: translateY(0); }

/* ---------- Swatches ---------- */
.cds-swatches { display: flex; gap: 6px; margin-top: 8px; }
.cds-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--codeison-border); cursor: pointer; }
.cds-swatch.is-active { box-shadow: 0 0 0 2px var(--codeison-brand); }

/* ---------- Hero slider ---------- */
.cds-hero {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: var(--codeison-bg-soft);
}
@media (max-width: 768px) { .cds-hero { min-height: 460px; } }

.cds-hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 900ms var(--codeison-ease), transform 10s linear;
  pointer-events: none;
}
.cds-hero-slide.is-active { opacity: 1; pointer-events: auto; transform: scale(1); }
.cds-hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,.1) 100%);
}

.cds-hero-content {
  position: relative;
  max-width: 600px;
  padding: 64px 24px;
  color: #fff;
  z-index: 1;
}
.cds-hero-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  margin: 0 0 16px;
  opacity: .9;
}
.cds-hero-title {
  font-family: var(--codeison-font-display);
  font-size: clamp(36px, 6vw, 72px);
  margin: 0 0 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
.cds-hero-subtitle {
  font-size: clamp(15px, 1.6vw, 18px);
  margin: 0 0 28px;
  opacity: .95;
  max-width: 460px;
  line-height: 1.5;
}

.cds-hero-dots {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 2;
}
.cds-hero-dots button {
  width: 32px;
  height: 3px;
  border-radius: 0;
  background: rgba(255,255,255,.5);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background var(--codeison-transition);
}
.cds-hero-dots button.is-active { background: #fff; }

/* ---------- Buttons ---------- */
.cds-btn {
  display: inline-block;
  background: var(--codeison-brand);
  color: #fff !important;
  padding: 14px 32px;
  border: 2px solid var(--codeison-brand);
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--codeison-font-body);
  transition: all var(--codeison-transition);
  border-radius: var(--codeison-radius-sm);
}
.cds-btn:hover {
  background: var(--codeison-accent);
  border-color: var(--codeison-accent);
  color: #fff !important;
  transform: translateY(-1px);
}
.cds-btn-outline {
  background: transparent;
  color: #fff !important;
  border-color: rgba(255,255,255,.8);
}
.cds-btn-outline:hover {
  background: #fff;
  color: var(--codeison-brand) !important;
  border-color: #fff;
}
.cds-btn-lg { padding: 16px 40px; font-size: 14px; }
/* .cds-btn-outline-dark defined near end of file with full specificity needed
   to beat body[data-theme=...] scoped overrides. */

/* ---------- Sections ---------- */
.cds-section { padding: 96px 0; }
@media (max-width: 768px) { .cds-section { padding: 56px 0; } }
.cds-section-tight { padding: 32px 0; }
.cds-section-alt { background: var(--codeison-bg-soft); }

.cds-section-header { text-align: center; margin-bottom: 56px; max-width: 640px; margin-left: auto; margin-right: auto; padding: 0 24px; position: relative; }
.cds-section-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.28em;
  color: var(--codeison-text-muted); font-weight: 600;
  margin-bottom: 16px;
}
.cds-section-eyebrow::before,
.cds-section-eyebrow::after {
  content: ''; display: inline-block;
  width: 28px; height: 1px;
  background: var(--codeison-text-subtle);
}
.cds-section-title {
  font-family: var(--codeison-font-display);
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 500;
  margin: 0 0 14px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--codeison-text);
}
.cds-section-title em, .cds-section-title i {
  font-style: italic; font-weight: 400;
  color: var(--codeison-accent);
}
.cds-section-sub {
  color: var(--codeison-text-muted); margin: 0;
  font-size: 16px; line-height: 1.6;
  max-width: 480px; margin-left: auto; margin-right: auto;
}

/* ---------- Featured categories ---------- */
.cds-featured-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: var(--codeison-max);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 768px) { .cds-featured-cats { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; } }

.cds-featured-cat {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--codeison-radius);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  display: block;
}
.cds-featured-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--codeison-ease); }
.cds-featured-cat:hover img { transform: scale(1.08); }
.cds-featured-cat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%);
}
.cds-featured-cat-label {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  z-index: 2;
  color: #fff;
  font-family: var(--codeison-font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.cds-featured-cat-label::after {
  content: '→';
  display: inline-block;
  margin-left: 8px;
  transition: transform var(--codeison-transition);
}
.cds-featured-cat:hover .cds-featured-cat-label::after { transform: translateX(6px); }

/* ---------- USP (trust) bar — premium pro feel ---------- */
.cds-usp {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 56px 24px;
  background: linear-gradient(180deg, #fff 0%, var(--codeison-bg-soft) 100%);
  border-top: 1px solid var(--codeison-border-soft);
  border-bottom: 1px solid var(--codeison-border-soft);
  max-width: 100%;
  margin: 0;
  position: relative;
}
.cds-usp::before {
  content: ''; position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 80px; height: 2px;
  background: var(--codeison-text);
  border-radius: 2px;
}
@media (max-width: 768px) { .cds-usp { grid-template-columns: repeat(2, 1fr); padding: 40px 16px; } }
.cds-usp-item {
  text-align: center;
  padding: 20px 24px;
  border-right: 1px solid var(--codeison-border-soft);
  position: relative;
  transition: transform 400ms var(--codeison-ease);
}
.cds-usp-item:last-child { border-right: 0; }
.cds-usp-item:hover { transform: translateY(-4px); }
.cds-usp-item:hover .cds-usp-icon {
  transform: scale(1.15) rotate(-6deg);
  color: var(--codeison-accent);
}
.cds-usp-item:hover .cds-usp-icon::before {
  transform: scale(1.3); opacity: 0;
}
@media (max-width: 768px) {
  .cds-usp-item { border-right: 0; border-bottom: 1px solid var(--codeison-border-soft); padding: 16px 12px; }
  .cds-usp-item:nth-child(2) { border-right: 0; }
  .cds-usp-item:nth-child(odd) { border-right: 1px solid var(--codeison-border-soft); }
  .cds-usp-item:nth-last-child(-n+2) { border-bottom: 0; }
}
.cds-usp-icon {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--codeison-border);
  font-size: 24px;
  color: var(--codeison-text);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: all 400ms var(--codeison-ease);
}
.cds-usp-icon::before {
  content: ''; position: absolute; inset: -6px;
  border: 1px dashed var(--codeison-border);
  border-radius: 50%;
  opacity: 0;
  transition: all 500ms var(--codeison-ease);
  animation: cds-usp-pulse 3s ease-in-out infinite;
}
.cds-usp-item:hover .cds-usp-icon::before { opacity: 1; animation-play-state: paused; }
@keyframes cds-usp-pulse {
  0%, 100% { transform: scale(1); opacity: 0; }
  50% { transform: scale(1.08); opacity: .4; }
}
.cds-usp-item:nth-child(1) .cds-usp-icon { animation-delay: 0s; }
.cds-usp-item:nth-child(2) .cds-usp-icon { animation-delay: .75s; }
.cds-usp-item:nth-child(3) .cds-usp-icon { animation-delay: 1.5s; }
.cds-usp-item:nth-child(4) .cds-usp-icon { animation-delay: 2.25s; }

.cds-usp-title {
  font-family: var(--codeison-font-display);
  font-weight: 500; font-size: 17px;
  margin-bottom: 4px;
  color: var(--codeison-text);
  letter-spacing: -0.01em;
}
.cds-usp-desc {
  color: var(--codeison-text-muted);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
@media (prefers-reduced-motion: reduce) {
  .cds-usp-item, .cds-usp-icon, .cds-usp-icon::before { transition: none !important; animation: none !important; }
}

/* ---------- Lookbook ---------- */
.cds-lookbook {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: var(--codeison-max);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 768px) { .cds-lookbook { grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 0; } }
.cds-lookbook-item { aspect-ratio: 1/1; overflow: hidden; position: relative; display: block; }
.cds-lookbook-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--codeison-ease); }
.cds-lookbook-item:hover img { transform: scale(1.06); }
.cds-lookbook-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background var(--codeison-transition);
}
.cds-lookbook-item:hover::after { background: rgba(0,0,0,.15); }

/* ---------- Testimonials ---------- */
.cds-testimonials { padding: 80px 0; background: #fff; }
.cds-testimonials-header { text-align: center; margin-bottom: 48px; }
.cds-testimonials-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .2em; color: var(--codeison-accent, #d97706);
  margin-bottom: 12px;
}
.cds-testimonials-title {
  font-family: var(--codeison-font-display);
  font-size: clamp(28px, 4vw, 40px); font-weight: 600;
  margin: 0 0 16px; letter-spacing: -0.02em;
}
.cds-testimonials-summary {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 14px; color: #6b7280;
}
.cds-testimonials-stars { color: #f59e0b; font-size: 16px; letter-spacing: 2px; }
.cds-testimonials-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 991px) { .cds-testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cds-testimonials-grid { grid-template-columns: 1fr; } }

.cds-testimonial-card {
  background: #fafaf9; border: 1px solid #f3f4f6;
  border-radius: 16px; padding: 28px;
  transition: box-shadow 300ms, transform 300ms;
}
.cds-testimonial-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.06); transform: translateY(-3px); }
.cds-testimonial-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.cds-testimonial-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: #111; color: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; font-family: var(--codeison-font-display);
}
.cds-testimonial-meta { flex: 1; min-width: 0; }
.cds-testimonial-name { display: block; font-size: 14px; font-weight: 600; color: #111; }
.cds-testimonial-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: #10b981; font-weight: 500;
}
.cds-testimonial-stars-sm { color: #f59e0b; font-size: 12px; letter-spacing: 1px; flex-shrink: 0; }
.cds-testimonial-text {
  font-size: 15px; line-height: 1.7; color: #374151;
  margin: 0; font-style: italic;
}

/* ============================================================
   TESTIMONIALS V2 — premium slider
   ============================================================ */
.cds-testi-v2 {
  padding: 96px 0;
  background: linear-gradient(180deg, #fff 0%, var(--codeison-bg-soft) 100%);
  position: relative;
  overflow: hidden;
}
.cds-testi-v2::before,
.cds-testi-v2::after {
  content: ''; position: absolute;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 420px; line-height: 1; font-weight: 400;
  color: rgba(0,0,0,.025);
  pointer-events: none; user-select: none;
}
.cds-testi-v2::before { content: '\201C'; top: -80px; left: -20px; }
.cds-testi-v2::after  { content: '\201D'; bottom: -240px; right: -20px; }
@media (max-width: 768px) {
  .cds-testi-v2 { padding: 64px 0; }
  .cds-testi-v2::before, .cds-testi-v2::after { font-size: 240px; }
}

.cds-testi-v2-head {
  text-align: center; margin-bottom: 48px; position: relative; z-index: 1;
}
.cds-testi-v2-title {
  font-family: var(--codeison-font-display);
  font-size: clamp(30px, 4vw, 44px); font-weight: 500;
  letter-spacing: -0.02em; margin: 10px 0 18px;
  color: var(--codeison-text);
}
.cds-testi-v2-rating {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  background: #fff;
  border: 1px solid var(--codeison-border);
  border-radius: 999px;
  font-size: 14px; color: var(--codeison-text);
  box-shadow: var(--codeison-shadow-sm);
}
.cds-testi-v2-rating strong { font-size: 16px; font-weight: 700; color: var(--codeison-text); }
.cds-testi-v2-stars { color: #f59e0b; font-size: 14px; letter-spacing: 1px; }
.cds-testi-v2-rating-meta { color: var(--codeison-text-muted); }

.cds-testi-v2-viewport {
  overflow: hidden;
  position: relative; z-index: 1;
  padding: 12px 0;
  cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.cds-testi-v2-viewport:active { cursor: grabbing; }
.cds-testi-v2-track {
  display: flex;
  transition: transform 600ms var(--codeison-ease);
  will-change: transform;
}
.cds-testi-v2-slide { padding: 0 12px; box-sizing: border-box; }

.cds-testi-v2-card {
  position: relative;
  height: 100%;
  background: #fff;
  border: 1px solid var(--codeison-border-soft);
  border-radius: var(--codeison-radius-lg);
  padding: 32px 28px 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,.02);
  transition: all 400ms var(--codeison-ease);
  display: flex; flex-direction: column; gap: 14px;
}
.cds-testi-v2-card:hover {
  border-color: var(--codeison-text);
  box-shadow: 0 12px 40px rgba(0,0,0,.06);
  transform: translateY(-4px);
}
.cds-testi-v2-quote-icon {
  position: absolute; top: 24px; right: 24px;
  font-size: 28px; color: var(--codeison-bg-muted);
  transition: color 300ms;
}
.cds-testi-v2-card:hover .cds-testi-v2-quote-icon { color: var(--codeison-accent); }
.cds-testi-v2-stars-row {
  color: #f59e0b; font-size: 14px; letter-spacing: 2px;
}
.cds-testi-v2-stars-row .fa-regular { color: var(--codeison-border); }
.cds-testi-v2-text {
  font-size: 15px; line-height: 1.7;
  color: var(--codeison-text); margin: 0;
  flex: 1;
  font-weight: 400;
  letter-spacing: 0.005em;
}
.cds-testi-v2-author {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--codeison-border-soft);
}
.cds-testi-v2-avatar {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--codeison-text) 0%, #333 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--codeison-font-display);
  font-size: 18px; font-weight: 500;
}
.cds-testi-v2-author-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cds-testi-v2-author-meta strong { font-size: 14px; font-weight: 600; color: var(--codeison-text); }
.cds-testi-v2-verified {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500;
  color: #059669;
  letter-spacing: 0.01em;
}
.cds-testi-v2-verified i { font-size: 10px; }

.cds-testi-v2-controls {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin-top: 40px; position: relative; z-index: 1;
}
.cds-testi-v2-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--codeison-border);
  color: var(--codeison-text);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--codeison-transition);
}
.cds-testi-v2-arrow:hover {
  background: var(--codeison-text);
  color: #fff;
  border-color: var(--codeison-text);
  transform: translateY(-2px);
  box-shadow: var(--codeison-shadow);
}
.cds-testi-v2-dots { display: inline-flex; align-items: center; gap: 8px; }
.cds-testi-v2-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--codeison-border);
  border: 0; padding: 0; cursor: pointer;
  transition: all 250ms var(--codeison-ease);
}
.cds-testi-v2-dot:hover { background: var(--codeison-text-subtle); }
.cds-testi-v2-dot.is-active {
  background: var(--codeison-text);
  width: 28px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .cds-testi-v2-track { transition: none !important; }
  .cds-testi-v2-card { transition: none !important; }
}


/* ---------- Newsletter popup ---------- */
.cds-popup {
  position: fixed;
  inset: 0;
  background: rgba(17,17,17,.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cds-popup[style*="display: flex"],
.cds-popup.is-open { display: flex !important; }
.cds-popup-inner {
  background: #fff;
  max-width: 520px;
  width: 100%;
  border-radius: var(--codeison-radius-lg);
  padding: 48px 40px;
  text-align: center;
  position: relative;
  box-shadow: var(--codeison-shadow-lg);
}
.cds-popup-close { position: absolute; top: 16px; right: 16px; background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--codeison-text-subtle); padding: 4px; line-height: 1; }
.cds-popup-close:hover { color: var(--codeison-text); }
.cds-popup-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--codeison-accent); font-weight: 700; margin-bottom: 8px; }
.cds-popup h3 { font-family: var(--codeison-font-display); margin: 0 0 12px; font-size: 28px; font-weight: 600; }
.cds-popup p { color: var(--codeison-text-muted); margin: 0 0 24px; font-size: 15px; }
.cds-popup form { display: flex; gap: 8px; }
.cds-popup input[type=email] { flex: 1; padding: 14px 18px; border: 1px solid var(--codeison-border); border-radius: var(--codeison-radius-sm); font-size: 14px; font-family: inherit; }
.cds-popup input[type=email]:focus { outline: none; border-color: var(--codeison-brand); }

/* ---------- Cart drawer ---------- */
.cds-cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 440px;
  max-width: 92vw;
  background: #fff;
  z-index: 500;
  transform: translateX(100%);
  transition: transform var(--codeison-transition);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,.15);
}
.cds-cart-drawer.is-open { transform: translateX(0); }
.cds-cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 499; opacity: 0; pointer-events: none; transition: opacity var(--codeison-transition); }
.cds-cart-overlay.is-open { opacity: 1; pointer-events: auto; }

/* ---------- Modals (quick view, size guide) ---------- */
.cds-modal {
  position: fixed; inset: 0;
  background: rgba(17,17,17,.6);
  backdrop-filter: blur(4px);
  z-index: 700;
  display: flex !important;
  align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
  animation: cds-modal-fade-in 200ms ease-out;
}
.cds-modal[style*="display: none"] { display: none !important; }
.cds-modal[x-cloak] { display: none !important; }
@keyframes cds-modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
.cds-modal-inner { background: #fff; max-width: 960px; width: 100%; border-radius: var(--codeison-radius-lg); position: relative; max-height: 90vh; overflow: hidden; display: flex; }
@media (max-width: 768px) { .cds-modal-inner { flex-direction: column; } }
.cds-modal-close { position: absolute; top: 16px; right: 16px; background: #fff; border: 0; font-size: 18px; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; z-index: 1; box-shadow: var(--codeison-shadow-sm); }

/* ---------- Footer ---------- */
.cds-footer {
  background: #0a0a0a; color: rgba(255,255,255,.68);
  padding: 80px 0 0; margin-top: 0;
  font-size: 13px; line-height: 1.7;
}
@media (max-width: 768px) { .cds-footer { padding: 56px 0 0; } }

/* Base fallback footer grid. Every theme has its own detailed footer CSS in
   themes/<slug>.css (grid, typography, accents). The per-theme file is the
   source of truth. This base-CSS fallback keeps the apparel-classic f1 footer
   usable when the theme CSS is missing — e.g. on a fresh install where
   module_codeison_general_theme hasn't been set yet. Other variants (f2–f10)
   fall back to a generic grid via the structural selector below. */
.cds-f1-cols {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr;
  gap: 56px; padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 991px) { .cds-f1-cols { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 600px) { .cds-f1-cols { grid-template-columns: 1fr; gap: 32px; } }
/* Generic heading + link styling inside any footer column (all variants) */
.cds-footer h5 { color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; margin: 0 0 18px; }
.cds-footer ul { list-style: none; margin: 0; padding: 0; }
.cds-footer li { margin-bottom: 8px; }
.cds-footer a { color: rgba(255,255,255,.65); font-size: 13px; }
.cds-footer a:hover { color: #fff; }

/* Footer brand block (top of footer) */
.cds-footer-brand {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 14px;
  padding-bottom: 40px; margin-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  max-width: 440px;
}
.cds-foot-logo {
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none;
  color: #fff;
  transition: opacity 180ms;
}
.cds-foot-logo:hover { opacity: .85; color: #fff; }
.cds-foot-logo-mark { color: #fff; display: inline-flex; }
.cds-foot-logo-mark svg { display: block; }
.cds-foot-logo-wordmark { display: inline-flex; flex-direction: column; line-height: 1; }
.cds-foot-logo-text {
  font-family: var(--codeison-font-display);
  font-size: 30px; font-weight: 500;
  letter-spacing: 0.01em;
  color: #fff;
  line-height: 1;
}
.cds-foot-logo-tagline {
  font-family: var(--codeison-font-body);
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-top: 5px;
}
.cds-foot-brand-copy {
  font-family: var(--codeison-font-body);
  font-size: 14px; line-height: 1.65;
  color: rgba(255,255,255,.55);
  margin: 0;
  max-width: 420px;
}
@media (max-width: 600px) {
  .cds-footer-brand { padding-bottom: 28px; margin-bottom: 32px; }
  .cds-foot-logo-text { font-size: 26px; }
}
.cds-footer a { color: rgba(255,255,255,.68); text-decoration: none; transition: color 180ms; }
.cds-footer a:hover { color: #fff; }
.cds-footer .cds-container { padding: 0 24px; }
.cds-footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 56px;
  margin-bottom: 56px;
}
@media (max-width: 991px) { .cds-footer-cols { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 600px) { .cds-footer-cols { grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; } }

/* ----- Footer variants (selectable from Theme Picker) ----- */
/* Minimal: single row, logo + socials + copyright */
.cds-footer-minimal .cds-footer-cols { display: none !important; }
.cds-footer-minimal { padding: 40px 0 0 !important; }
.cds-footer-minimal .cds-footer-bottom { border-top: 0; padding: 20px 0 32px; }

/* Centered: 4 stacked columns centered (editorial) */
.cds-footer-centered .cds-footer-cols { grid-template-columns: 1fr !important; text-align: center; }
.cds-footer-centered .cds-footer-cols ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.cds-footer-centered .cds-footer-cols li { list-style: none; }

/* Newsletter-hero: big centered newsletter cta above compact link rows */
.cds-footer-nl-hero .cds-footer-cols { grid-template-columns: 1fr !important; text-align: center; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 32px; }
.cds-footer-nl-hero .cds-footer-cols > div:not(:last-child) { display: none; }  /* hide link cols in hero variant */
.cds-footer-nl-hero .cds-footer-newsletter { max-width: 480px; margin: 0 auto; }

.cds-footer h5 {
  color: #fff; font-family: var(--codeison-font-body);
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.16em; font-weight: 700;
  margin: 0 0 20px;
}
.cds-footer ul { list-style: none; padding: 0; margin: 0; }
.cds-footer li { margin-bottom: 10px; font-size: 13px; }
.cds-footer li a:hover { padding-left: 4px; color: #fff; }

.cds-footer-brand {
  font-family: var(--codeison-font-display);
  font-weight: 500; font-size: 26px; color: #fff;
  margin-bottom: 12px; letter-spacing: -0.01em;
}
.cds-footer-tag { color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.7; margin: 0 0 20px; max-width: 280px; }

.cds-footer-newsletter {
  display: flex; gap: 0; margin-top: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 0;
  overflow: hidden;
  transition: border-color 200ms;
}
.cds-footer-newsletter:focus-within { border-color: var(--codeison-accent, #d97706); }
.cds-footer-newsletter input {
  flex: 1; padding: 12px 16px; border: 0;
  background: transparent; color: #fff; font-size: 13px; font-family: inherit;
}
.cds-footer-newsletter input::placeholder { color: rgba(255,255,255,.35); }
.cds-footer-newsletter input:focus { outline: none; }
.cds-footer-newsletter button {
  background: var(--codeison-accent, #d97706); color: #fff;
  border: 0; padding: 12px 22px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 180ms;
}
.cds-footer-newsletter button:hover { background: #b45309; color: #fff; }

.cds-footer-social { display: flex; gap: 8px; margin-top: 20px; }
.cds-footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.85); font-size: 13px;
  transition: all 200ms;
}
.cds-footer-social a:hover { background: var(--codeison-accent, #d97706); color: #fff; transform: translateY(-2px); }

.cds-footer-bottom {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: space-between; align-items: center;
  padding: 24px 0; border-top: 1px solid rgba(255,255,255,.06);
  font-size: 12px; color: rgba(255,255,255,.5);
  line-height: 1.5;
}
.cds-footer-legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  letter-spacing: 0.01em;
}
.cds-footer-brand-link {
  font-family: var(--codeison-font-display);
  font-size: 14px; font-weight: 500;
  color: #fff !important;
  letter-spacing: 0.02em;
}
.cds-footer-brand-link:hover { color: var(--codeison-accent) !important; }
.cds-footer-sep { color: rgba(255,255,255,.25); }
.cds-footer-bottom a { color: rgba(255,255,255,.65); }
.cds-footer-bottom a:hover { color: #fff; }

.cds-footer-payments { display: flex; gap: 6px; flex-wrap: wrap; }
.cds-footer-payments span {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,.06);
  padding: 5px 10px; border-radius: 4px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.06);
}

/* ---------- Toast notifications ---------- */
.cds-toast {
  position: fixed;
  top: 80px;
  right: 24px;
  background: #fff;
  color: var(--codeison-text);
  padding: 18px 22px;
  border-radius: var(--codeison-radius);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 12px 40px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 320px;
  max-width: 460px;
  transform: translateX(120%);
  transition: transform 400ms var(--codeison-ease);
  font-family: var(--codeison-font-body);
  line-height: 1.4;
  border-left: 4px solid var(--codeison-brand);
}
.cds-toast.is-visible { transform: translateX(0); }
.cds-toast i {
  font-size: 20px;
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--codeison-bg-soft);
}
.cds-toast-success { border-left-color: #10b981; }
.cds-toast-success i { background: #d1fae5; color: #065f46; }
.cds-toast-error { border-left-color: #dc2626; }
.cds-toast-error i { background: #fee2e2; color: #991b1b; }
.cds-toast a { color: var(--codeison-brand); font-weight: 600; text-decoration: underline; }
.cds-toast-close {
  background: none; border: 0; padding: 0 0 0 8px;
  color: var(--codeison-text-subtle); cursor: pointer;
  font-size: 16px; line-height: 1; margin-left: auto;
}
.cds-toast-close:hover { color: var(--codeison-text); }
@media (max-width: 480px) {
  .cds-toast { top: auto; bottom: 80px; right: 12px; left: 12px; max-width: none; min-width: 0; }
}

/* Cart badge on bag icon */
.cds-cart-link { position: relative; }
.cds-cart-link .cds-badge {
  top: -6px !important; right: -10px !important;
}

/* ============================================================
   v1.1 FEATURE BLOCKS
   Shipping progress bar, Instagram grid, brands strip,
   cookie banner, back-to-top — all admin-toggleable.
   ============================================================ */

/* Free-shipping progress bar (cart summary) */
.cds-shipping-progress { margin: 0 0 20px; padding: 14px 16px; background: #fff; border: 1px solid var(--codeison-border-soft); border-radius: var(--codeison-radius-sm); }
.cds-shipping-progress-msg { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--codeison-text); margin-bottom: 10px; }
.cds-shipping-progress-msg i { color: var(--codeison-brand); font-size: 15px; }
.cds-shipping-progress-text strong { font-weight: 700; color: var(--codeison-brand); }
.cds-shipping-progress-track { height: 6px; background: var(--codeison-border-soft); border-radius: 100px; overflow: hidden; }
.cds-shipping-progress-fill { height: 100%; background: linear-gradient(90deg, var(--codeison-brand) 0%, var(--codeison-accent) 100%); border-radius: 100px; transition: width 400ms var(--codeison-ease); }
.cds-shipping-progress.is-unlocked .cds-shipping-progress-fill { background: #10b981; }

/* Instagram feed */
.cds-insta { padding: 72px 0; }
.cds-insta-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; max-width: var(--codeison-max); margin: 0 auto; padding: 0 24px; }
@media (max-width: 991px) { .cds-insta-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .cds-insta-grid { grid-template-columns: repeat(2, 1fr); gap: 2px; padding: 0; } }
.cds-insta-item { position: relative; aspect-ratio: 1/1; overflow: hidden; display: block; }
.cds-insta-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--codeison-ease); }
.cds-insta-item:hover img { transform: scale(1.08); }
.cds-insta-overlay { position: absolute; inset: 0; background: rgba(17,17,17,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; opacity: 0; transition: opacity var(--codeison-transition); }
.cds-insta-item:hover .cds-insta-overlay { opacity: 1; }

/* Brands carousel strip */
/* Brand strip — editorial "As featured in" auto-scrolling marquee */
.cds-brands-section { padding: 56px 0 64px; background: #fff; border-top: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6; }
.cds-brands-heading {
  text-align: center; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em;
  color: #9ca3af; margin: 0 0 32px;
}
.cds-brands-marquee {
  overflow: hidden; position: relative;
  mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.cds-brands-track {
  display: flex; align-items: center; gap: 0; width: max-content;
  animation: cds-brands-scroll 40s linear infinite;
}
.cds-brands-marquee:hover .cds-brands-track { animation-play-state: paused; }
@keyframes cds-brands-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .cds-brands-track { animation: none; justify-content: center; flex-wrap: wrap; width: 100%; }
}
.cds-brand-item {
  opacity: .45; transition: opacity 300ms; padding: 14px 48px;
  position: relative; flex-shrink: 0;
}
.cds-brand-item:hover { opacity: .95; }
.cds-brand-text {
  font-family: var(--codeison-font-display); font-size: clamp(18px, 2vw, 24px);
  font-weight: 600; color: #111; letter-spacing: .02em; white-space: nowrap;
  text-transform: uppercase;
}
.cds-brand-item img { max-height: 36px; width: auto; filter: grayscale(1); transition: filter 300ms; }
.cds-brand-item:hover img { filter: grayscale(0); }
@media (max-width: 768px) {
  .cds-brand-item { padding: 14px 24px; }
}

/* Cookie banner */
.cds-cookie-banner {
  position: fixed; bottom: 16px; left: 16px; right: 16px;
  max-width: 680px; margin: 0 auto;
  background: #fff;
  border: 1px solid var(--codeison-border-soft);
  box-shadow: 0 12px 40px rgba(0,0,0,.1);
  border-radius: var(--codeison-radius);
  padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  z-index: 9000;
  font-size: 14px;
  animation: cdsCookieSlide 400ms var(--codeison-ease);
}
@keyframes cdsCookieSlide { from { transform: translateY(120%); opacity: 0; } }
.cds-cookie-banner[hidden] { display: none !important; }
.cds-cookie-msg { flex: 1; color: var(--codeison-text); }
.cds-cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cds-cookie-actions .cds-btn { padding: 8px 16px !important; font-size: 11px !important; }
@media (max-width: 640px) {
  .cds-cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .cds-cookie-actions { justify-content: center; }
}

/* Back-to-top button */
.cds-back-to-top {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 44px; height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--codeison-brand);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  display: flex; align-items: center; justify-content: center;
  z-index: 80;
  font-size: 15px;
  transition: all var(--codeison-transition);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}
.cds-back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.cds-back-to-top:hover { background: var(--codeison-accent); transform: translateY(-4px); }
.cds-back-to-top[hidden] { display: none !important; }

/* If WhatsApp button is also visible, stack back-to-top above it */
body:has(.cds-whatsapp) .cds-back-to-top { bottom: 96px; }

/* ---------- WhatsApp floating button ---------- */
.cds-whatsapp {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: #25d366;
  color: #fff !important;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(37,211,102,.4);
  z-index: 80;
  transition: transform var(--codeison-transition);
}
.cds-whatsapp:hover { transform: scale(1.08); color: #fff !important; }

/* ---------- Product page ---------- */
.cds-product-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  max-width: var(--codeison-max);
  margin: 48px auto;
  padding: 0 24px;
}
@media (max-width: 960px) { .cds-product-layout { grid-template-columns: 1fr; gap: 32px; } }

.cds-product-title { font-family: var(--codeison-font-display); font-size: clamp(28px, 3vw, 36px); margin: 0 0 12px; font-weight: 600; letter-spacing: -0.02em; }
.cds-product-price { font-size: 26px; font-weight: 600; color: var(--codeison-text); margin-bottom: 20px; }

/* ---------- Lazy loading ---------- */
.cds-lazy { opacity: 0; transition: opacity 400ms ease; }
.cds-lazy.is-loaded { opacity: 1; }

/* ---------- Utility classes ---------- */
.cds-flex { display: flex; }
.cds-items-center { align-items: center; }
.cds-gap-2 { gap: 8px; }
.cds-gap-3 { gap: 12px; }
.cds-mt-4 { margin-top: 16px; }
.cds-mb-4 { margin-bottom: 16px; }
.cds-text-sm { font-size: 13px; }
.cds-text-muted { color: var(--codeison-text-muted); }
.cds-hidden { display: none; }
.cds-block { display: block; }

/* ============================================================
   PRODUCT DETAIL PAGE (PDP)
   ============================================================ */

/* Breadcrumb */
.cds-breadcrumb-bar { padding: 18px 0; border-bottom: 1px solid var(--codeison-border-soft); background: #fff; }
.cds-breadcrumb { font-size: 13px; color: var(--codeison-text-muted); }
.cds-breadcrumb a { color: var(--codeison-text-muted); text-decoration: none; }
.cds-breadcrumb a:hover { color: var(--codeison-brand); }
.cds-breadcrumb a:last-of-type { color: var(--codeison-text); font-weight: 500; }
.cds-breadcrumb-sep { margin: 0 10px; opacity: .4; }

/* PDP Layout */
.cds-pdp { padding: 48px 0 80px; }
.cds-pdp-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 991px) { .cds-pdp-inner { grid-template-columns: 1fr; gap: 32px; } }

/* Gallery */
.cds-pdp-gallery { position: sticky; top: 90px; }
@media (max-width: 991px) { .cds-pdp-gallery { position: static; } }
.cds-pdp-main-image {
  position: relative;
  aspect-ratio: 3/4;
  background: #f8f7f5;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
}
.cds-pdp-image-slot {
  width: 100%; height: 100%; object-fit: cover; display: block;
  cursor: zoom-in;
  transition: transform 500ms cubic-bezier(.25,.46,.45,.94);
}
.cds-pdp-main-image:hover .cds-pdp-image-slot { transform: scale(1.03); }
.cds-pdp-badges { position: absolute; top: 16px; left: 16px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.cds-pdp-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.96); border: 0;
  width: 48px; height: 48px; border-radius: 50%;
  cursor: pointer; font-size: 15px; color: #111;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  opacity: 0; transition: all 220ms ease; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
}
.cds-pdp-main-image:hover .cds-pdp-arrow { opacity: 1; }
.cds-pdp-arrow:hover { background: #111; color: #fff; transform: translateY(-50%) scale(1.08); }
.cds-pdp-arrow-prev { left: 16px; }
.cds-pdp-arrow-next { right: 16px; }

.cds-pdp-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cds-pdp-thumb {
  background: #f8f7f5; border: 2px solid transparent;
  border-radius: 8px; padding: 0; cursor: pointer;
  overflow: hidden; aspect-ratio: 3/4;
  transition: all 200ms ease;
}
.cds-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .6; transition: opacity 200ms ease; }
.cds-pdp-thumb.is-active { border-color: #111; }
.cds-pdp-thumb.is-active img, .cds-pdp-thumb:hover img { opacity: 1; }
.cds-pdp-thumb:hover { border-color: #d1d5db; }

/* PDP Info */
.cds-pdp-info { padding-top: 4px; display: flex; flex-direction: column; gap: 0; }
.cds-pdp-brand {
  display: inline-block; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--codeison-accent, #d97706); font-weight: 700;
  margin-bottom: 10px; text-decoration: none;
}
.cds-pdp-brand:hover { color: var(--codeison-brand, #111); }
.cds-pdp-title {
  font-family: var(--codeison-font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  color: #111;
}
.cds-pdp-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.cds-pdp-stars { font-size: 14px; letter-spacing: 1px; }
.cds-pdp-stars .fa-solid { color: #f59e0b; }
.cds-pdp-stars .fa-regular { color: #e5e7eb; }
.cds-pdp-review-link {
  font-size: 13px; color: #6b7280; text-decoration: none;
  border-bottom: 1px solid #e5e7eb; padding-bottom: 1px;
  transition: all 150ms;
}
.cds-pdp-review-link:hover { color: #111; border-color: #111; }
.cds-pdp-review-sep { color: #d1d5db; }

.cds-pdp-price-block {
  padding: 20px 0; border-top: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6; margin-bottom: 24px;
}
.cds-pdp-price-new { font-size: 28px; font-weight: 700; color: #111; letter-spacing: -0.02em; }
.cds-pdp-price-old { font-size: 17px; color: #9ca3af; text-decoration: line-through; margin-right: 12px; }
.cds-pdp-save {
  display: inline-block; background: #dc2626; color: #fff;
  font-size: 11px; padding: 4px 10px; border-radius: 4px;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  margin-left: 12px; vertical-align: middle;
}
.cds-pdp-price-tax { font-size: 12px; color: #9ca3af; margin-top: 6px; }

/* Form / options */
.cds-pdp-form { display: flex; flex-direction: column; gap: 20px; }
.cds-pdp-option { display: flex; flex-direction: column; gap: 8px; }
.cds-pdp-option-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #374151; }
.cds-required { color: #dc2626; margin-left: 4px; }
.cds-pdp-select, .cds-pdp-input {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid #e5e7eb; border-radius: 8px;
  font-size: 14px; font-family: inherit;
  background: #fff; color: #111;
  transition: border-color 150ms;
}
.cds-pdp-select:focus, .cds-pdp-input:focus { outline: none; border-color: #111; box-shadow: 0 0 0 3px rgba(17,17,17,.06); }

.cds-pdp-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.cds-pdp-chip { display: inline-block; cursor: pointer; }
.cds-pdp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cds-pdp-chip span {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid #e5e7eb; background: #fff;
  padding: 0 18px; min-height: 40px; font-size: 13px; font-weight: 600;
  border-radius: 6px; transition: all 180ms ease;
  min-width: 48px; text-align: center; gap: 8px;
  color: #111; letter-spacing: .02em;
  position: relative;
}
.cds-pdp-chip span em { font-style: normal; font-size: 11px; color: #9ca3af; font-weight: 500; }
.cds-pdp-chip:hover span { border-color: #111; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.cds-pdp-chip input:checked + span { background: #111; color: #fff; border-color: #111; }
.cds-pdp-chip input:checked + span::after {
  content: ''; position: absolute; top: -4px; right: -4px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--codeison-accent, #d97706);
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--codeison-accent, #d97706);
}
.cds-pdp-chip input:checked + span em { color: rgba(255,255,255,.7); }
.cds-pdp-chip-img { width: 22px; height: 22px; border-radius: 4px; object-fit: cover; }

/* Option label improvement */
.cds-pdp-option-label { display: flex; align-items: center; gap: 8px; font-size: 11px !important; }
.cds-pdp-option-label::after {
  content: attr(data-selected);
  font-weight: 400; color: #6b7280;
  text-transform: none; letter-spacing: 0;
  font-size: 12px; margin-left: 4px;
}

/* Size guide button — proper link-button with ruler icon */
.cds-pdp-size-guide-wrap { margin: -4px 0 4px; }
.cds-pdp-size-guide-btn {
  background: transparent; border: 0; padding: 6px 0;
  font-size: 12px; color: #374151; cursor: pointer;
  font-family: inherit; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  border-bottom: 1px solid #111;
  transition: color 150ms;
}
.cds-pdp-size-guide-btn:hover { color: var(--codeison-accent, #d97706); border-bottom-color: var(--codeison-accent, #d97706); }
.cds-pdp-size-guide-btn i { font-size: 13px; }

/* Bulk pricing tier card — clean minimal with percentage display */
.cds-pdp-discounts {
  padding: 16px 18px; margin: 0 0 20px;
  background: #fafaf9; border: 1px solid #ebe9e4; border-radius: 10px;
}
.cds-pdp-discounts-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  color: #111; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.cds-pdp-discounts-label i { color: var(--codeison-accent, #d97706); }
.cds-pdp-discounts-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 8px;
}
.cds-pdp-discounts-list li {
  flex: 1; padding: 10px 12px; background: #fff; border: 1px solid #ebe9e4;
  border-radius: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  transition: all 200ms;
}
.cds-pdp-discounts-list li:hover { border-color: #111; }
.cds-pdp-discounts-qty {
  font-size: 11px; font-weight: 600; color: #6b7280;
  text-transform: uppercase; letter-spacing: .06em;
}
.cds-pdp-discounts-save { display: flex; flex-direction: column; line-height: 1.1; }
.cds-pdp-discounts-save strong { font-size: 16px; color: var(--codeison-accent, #d97706); font-weight: 700; letter-spacing: -0.01em; }
.cds-pdp-discounts-save small { font-size: 10px; color: #9ca3af; text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
@media (max-width: 480px) { .cds-pdp-discounts-list { flex-direction: column; } }

/* Size guide modal body */
.cds-sg-modal { max-width: 680px; padding: 0; flex-direction: column; border-radius: 16px; }
.cds-sg-body { padding: 40px; }
.cds-sg-body h3 { font-family: var(--codeison-font-display); font-size: 24px; margin: 0 0 20px; }
.cds-sg-table { width: 100%; border-collapse: collapse; }
.cds-sg-table th, .cds-sg-table td { border: 1px solid var(--codeison-border); padding: 10px 14px; text-align: center; font-size: 14px; }
.cds-sg-table th { background: var(--codeison-bg-soft); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }

/* Qty + ATC */
.cds-pdp-qty-row { display: flex; gap: 12px; align-items: stretch; }
.cds-pdp-qty {
  display: flex; border: 1.5px solid #e5e7eb;
  border-radius: 8px; overflow: hidden; flex-shrink: 0;
}
.cds-pdp-qty button {
  background: #fff; border: 0; width: 48px;
  cursor: pointer; font-size: 18px; color: #111;
  transition: all 150ms;
}
.cds-pdp-qty button:hover { background: #f3f4f6; }
.cds-pdp-qty button:active { background: #e5e7eb; }
.cds-pdp-qty input {
  width: 52px; border: 0; border-left: 1px solid #f3f4f6; border-right: 1px solid #f3f4f6;
  text-align: center; font-size: 15px; font-weight: 600; color: #111;
  -moz-appearance: textfield;
}
.cds-pdp-qty input::-webkit-outer-spin-button, .cds-pdp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cds-pdp-atc {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 16px 24px;
  font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: #111 !important; color: #fff !important; border: 0 !important;
  border-radius: 8px !important; cursor: pointer;
  transition: all 250ms cubic-bezier(.25,.46,.45,.94);
  position: relative; overflow: hidden;
}
.cds-pdp-atc:hover {
  background: var(--codeison-accent, #d97706) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.cds-pdp-atc:active { transform: translateY(0); box-shadow: none; }
.cds-pdp-atc:disabled { opacity: .6; cursor: wait; }

/* Wishlist / compare links — as pill buttons with icon */
.cds-pdp-actions-form {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 16px;
}
.cds-pdp-icon-btn {
  background: #fff; border: 1px solid #e5e7eb;
  padding: 10px 16px; border-radius: 100px;
  font-size: 12px; color: #374151; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-weight: 500;
  transition: all 180ms ease; text-decoration: none;
}
.cds-pdp-icon-btn:hover {
  color: #111; border-color: #111;
  background: #fafaf9;
}
.cds-pdp-icon-btn i { font-size: 13px; color: #6b7280; }
.cds-pdp-icon-btn:hover i { color: #111; }

/* Inline feedback message for wishlist/compare AJAX results */
.cds-pdp-feedback { margin: 0 0 16px; }
.cds-pdp-feedback:empty { margin: 0; }
.cds-pdp-feedback-box {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 8px;
  font-size: 13px; line-height: 1.4;
  animation: cds-fb-slide 280ms ease-out;
}
.cds-pdp-feedback-box.is-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.cds-pdp-feedback-box.is-error { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
.cds-pdp-feedback-box i { flex-shrink: 0; font-size: 15px; }
.cds-pdp-feedback-box span { flex: 1; }
.cds-pdp-feedback-action {
  font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
  color: inherit; white-space: nowrap;
}
.cds-pdp-feedback-close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1; color: inherit; opacity: .5;
  padding: 0; margin-left: 4px;
}
.cds-pdp-feedback-close:hover { opacity: 1; }
@keyframes cds-fb-slide { from { transform: translateY(-6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.cds-pdp-urgency {
  background: #fef3c7;
  color: #92400e;
  padding: 12px 16px;
  border-radius: var(--codeison-radius-sm);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cds-pdp-urgency i { color: #dc2626; }

.cds-pdp-meta-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px 32px;
  padding: 20px 0; border-top: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6;
  margin-top: 8px;
}
.cds-pdp-meta-item { display: flex; flex-direction: column; gap: 3px; }
.cds-pdp-meta-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: #9ca3af; font-weight: 600; }
.cds-pdp-meta-value { font-size: 14px; font-weight: 500; color: #111; }

/* Trust bullets — icon circles with subtle bg */
.cds-pdp-trust {
  list-style: none; padding: 24px 28px; margin: 0;
  background: #f5f5f0; border-radius: 12px; border: 1px solid #ebe9e4;
  display: flex; flex-direction: column; gap: 14px;
}
.cds-pdp-trust li { display: flex; align-items: center; gap: 14px; font-size: 14px; color: #374151; }
.cds-pdp-trust li i {
  width: 40px; height: 40px; border-radius: 50%;
  background: #111; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.cds-pdp-trust li strong { color: #111; }

/* Share icons — proper circles */
.cds-pdp-share { display: flex; align-items: center; gap: 10px; padding-top: 12px; }
.cds-pdp-share-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: #9ca3af; font-weight: 600; margin-right: 4px; }
.cds-pdp-share a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid #e5e7eb; background: #fff; color: #6b7280;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; transition: all 200ms; text-decoration: none;
}
.cds-pdp-share a:hover { background: #111; color: #fff; border-color: #111; transform: translateY(-2px); }

/* ============================================================
   A+ CONTENT
   ============================================================ */
.cds-aplus { padding: 80px 0 96px; background: #fafaf9; }
@media (max-width: 768px) { .cds-aplus { padding: 56px 0 64px; } }
.cds-aplus-header { text-align: center; max-width: 700px; margin: 0 auto 56px; padding: 0 24px; }

/* Tabs */
.cds-tabs { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.cds-tabs-nav {
  display: flex; gap: 4px; border-bottom: 1px solid #e5e7eb;
  flex-wrap: wrap; margin-bottom: 32px; justify-content: center;
}
.cds-tabs-nav button {
  background: none; border: 0;
  padding: 16px 24px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #9ca3af; cursor: pointer;
  position: relative; transition: color 200ms; font-family: inherit;
}
.cds-tabs-nav button:hover { color: #374151; }
.cds-tabs-nav button.is-active { color: #111; }
.cds-tabs-nav button::after {
  content: ''; position: absolute;
  left: 24px; right: 24px; bottom: -1px; height: 2px;
  background: #111; transform: scaleX(0); transform-origin: center;
  transition: transform 280ms cubic-bezier(.25,.46,.45,.94);
}
.cds-tabs-nav button.is-active::after { transform: scaleX(1); }
.cds-tabs-panel { padding: 0; }
.cds-product-desc {
  display: grid; grid-template-columns: 1fr 300px; gap: 56px;
  max-width: 1000px; margin: 0 auto; padding: 8px 0 24px;
  align-items: start;
}
@media (max-width: 768px) { .cds-product-desc { grid-template-columns: 1fr; gap: 28px; } }
.cds-product-desc-text { color: #374151; }
.cds-product-desc-text p {
  margin: 0 0 1.4em; font-size: 16px; line-height: 1.85; color: #374151;
}
.cds-product-desc-text p:first-child {
  font-size: 19px; line-height: 1.6; color: #111;
  font-family: var(--codeison-font-display); font-weight: 400;
  letter-spacing: -0.01em; margin-bottom: 1.2em;
}
.cds-product-desc-text p:last-child { margin-bottom: 0; }

/* Right-side spec card */
.cds-product-spec-card {
  background: #f5f5f0; border-radius: 12px; padding: 24px;
  position: sticky; top: 100px;
}
.cds-product-spec-card > strong {
  display: block; font-family: inherit;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #111;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid #ebe9e4;
}
.cds-product-spec-card-body ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.cds-product-spec-card-body ul li {
  position: relative; padding-left: 22px;
  font-size: 13px; line-height: 1.5; color: #374151;
}
.cds-product-spec-card-body ul li::before {
  content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; left: 0; top: 3px;
  color: var(--codeison-accent, #d97706); font-size: 11px;
}

/* Tags row at bottom of description tab */
.cds-pdp-tags {
  margin: 28px auto 0; padding: 20px 0 0;
  max-width: 1000px; border-top: 1px solid #f3f4f6;
}
.cds-pdp-tags::before {
  content: 'Tags'; display: inline-block; margin-right: 12px;
  font-size: 11px; color: #9ca3af; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; vertical-align: middle;
}
.cds-pdp-tags a {
  display: inline-block; padding: 5px 12px; margin: 0 4px 4px 0;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 100px;
  color: #374151; text-decoration: none; font-size: 12px;
  font-weight: 500; transition: all 150ms;
}
.cds-pdp-tags a:hover { background: #111; color: #fff; border-color: #111; }
.cds-pdp-tags { font-size: 13px; color: #6b7280; margin-top: 20px; }
.cds-pdp-tags a { color: #374151; text-decoration: none; border-bottom: 1px solid #e5e7eb; padding-bottom: 1px; transition: all 150ms; margin: 0 2px; }
.cds-pdp-tags a:hover { color: #111; border-color: #111; }

/* ============= REVIEW SECTION ============= */
.cds-review-section { display: flex; flex-direction: column; gap: 32px; }
.cds-review-summary {
  display: grid; grid-template-columns: 280px 1fr; gap: 32px;
  padding: 32px; background: #fafaf9; border: 1px solid #f3f4f6;
  border-radius: 12px; align-items: center;
}
@media (max-width: 768px) { .cds-review-summary { grid-template-columns: 1fr; gap: 20px; padding: 24px; } }
.cds-review-rating-big { text-align: center; padding-right: 32px; border-right: 1px solid #ebe9e4; }
@media (max-width: 768px) { .cds-review-rating-big { padding-right: 0; padding-bottom: 20px; border-right: 0; border-bottom: 1px solid #ebe9e4; } }
.cds-review-rating-big strong {
  display: block; font-family: var(--codeison-font-display);
  font-size: 56px; font-weight: 700; line-height: 1; color: #111;
}
.cds-review-stars-big { color: #f59e0b; font-size: 18px; letter-spacing: 3px; margin: 12px 0 8px; }
.cds-review-stars-big .fa-regular { color: #e5e7eb; }
.cds-review-count { font-size: 13px; color: #6b7280; }
.cds-review-summary-cta h4 {
  font-family: var(--codeison-font-body); font-size: 17px;
  font-weight: 600; letter-spacing: -0.01em;
  margin: 0 0 8px; color: #111;
}
.cds-review-summary-cta p { color: #6b7280; font-size: 14px; line-height: 1.6; margin: 0 0 18px; }
.cds-review-summary-cta .cds-btn {
  background: #111; color: #fff; border: 0;
  padding: 12px 24px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  border-radius: 8px; cursor: pointer; transition: all 200ms;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; text-decoration: none;
}
.cds-review-summary-cta .cds-btn:hover {
  background: var(--codeison-accent, #d97706);
  transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* Style OC's injected review form + list */
.cds-review-content { padding: 8px 0; }
.cds-review-content > p { color: #6b7280; font-size: 14px; text-align: center; padding: 24px; background: #fff; border: 1px dashed #e5e7eb; border-radius: 8px; }
.cds-review-content #form-review,
.cds-review-content form {
  background: #fff; padding: 32px; border: 1px solid #f3f4f6;
  border-radius: 12px; margin-top: 24px;
}
.cds-review-content h2,
.cds-review-content legend {
  font-family: var(--codeison-font-body) !important;
  font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important;
  margin: 0 0 20px !important; color: #111 !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #f3f4f6;
}
.cds-review-content .form-group,
.cds-review-content fieldset > div { margin-bottom: 20px; }
.cds-review-content label,
.cds-review-content .form-label {
  display: block; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: #374151; margin-bottom: 8px;
}
.cds-review-content input[type="text"],
.cds-review-content textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid #e5e7eb; border-radius: 8px;
  font-size: 14px; font-family: inherit; color: #111;
  background: #fff; transition: border-color 150ms;
}
.cds-review-content input[type="text"]:focus,
.cds-review-content textarea:focus { outline: none; border-color: #111; box-shadow: 0 0 0 3px rgba(17,17,17,.06); }
.cds-review-content textarea { min-height: 120px; resize: vertical; }
.cds-review-content .help-block,
.cds-review-content small { font-size: 12px; color: #9ca3af; margin-top: 4px; display: block; }

/* Rating star picker — stars only. No "Bad"/"Good" text, no numeric chips, no labels.
   JS (in product.twig) prepends a .cds-star-row with 5 <label> stars to #input-rating,
   removes all text nodes ("Bad"/"Good"), and we hide every other child below. */
.cds-review-content #input-rating {
  display: block !important;
  padding: 4px 0 !important;
  margin: 4px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Hide ABSOLUTELY everything inside #input-rating except our injected .cds-star-row */
.cds-review-content #input-rating > *:not(.cds-star-row) {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
  opacity: 0 !important; pointer-events: none !important;
}
.cds-star-row {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0;
}
.cds-star-pick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  cursor: pointer;
  color: #e5e7eb;
  font-size: 26px;
  background: transparent;
  border-radius: 6px;
  transition: color 180ms var(--codeison-ease), transform 220ms var(--codeison-ease);
  position: relative;
}
.cds-star-pick:hover {
  transform: scale(1.18) rotate(-4deg);
  color: #fbbf24;
}
.cds-star-pick.is-active {
  color: #f59e0b;
  animation: cds-star-pop 280ms var(--codeison-ease);
}
.cds-star-pick.is-active:hover { color: #d97706; }
@keyframes cds-star-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35) rotate(-8deg); text-shadow: 0 0 16px rgba(245, 158, 11, .55); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cds-star-pick, .cds-star-pick:hover, .cds-star-pick.is-active { transform: none !important; animation: none !important; }
}

/* Submit button */
.cds-review-content button[id^="button-review"],
.cds-review-content #button-review,
.cds-review-content button[type="submit"] {
  background: #111; color: #fff; border: 0;
  padding: 14px 32px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  border-radius: 8px; cursor: pointer; transition: all 200ms;
  font-family: inherit;
}
.cds-review-content button[id^="button-review"]:hover,
.cds-review-content #button-review:hover,
.cds-review-content button[type="submit"]:hover {
  background: var(--codeison-accent, #d97706);
  transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* Existing reviews list */
.cds-review-content .review-item,
.cds-review-content > div > .row {
  padding: 24px 0; border-bottom: 1px solid #f3f4f6;
}
.cds-review-content .review-item:last-child { border-bottom: 0; }
.cds-review-content .pull-right,
.cds-review-content .float-end { color: #9ca3af; font-size: 12px; }

.cds-specs-title { font-family: var(--codeison-font-display); font-size: 18px; margin: 24px 0 12px; }
.cds-specs-table { width: 100%; border-collapse: collapse; }
.cds-specs-table th, .cds-specs-table td { padding: 12px 16px; border-bottom: 1px solid var(--codeison-border-soft); text-align: left; font-size: 14px; }
.cds-specs-table th { font-weight: 600; color: var(--codeison-text-muted); text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; width: 30%; }

.cds-shipping-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 768px) { .cds-shipping-grid { grid-template-columns: 1fr; } }
.cds-shipping-card {
  background: #fff; padding: 24px; border-radius: 10px;
  border: 1px solid #ebe9e4;
  display: flex; gap: 16px; align-items: flex-start;
  transition: all 200ms;
}
.cds-shipping-card:hover { border-color: #d1d5db; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.04); }
.cds-shipping-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: #f5f5f0; color: #111;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0; margin: 0;
}
.cds-shipping-card h4 { font-family: inherit; font-size: 14px; margin: 2px 0 4px; font-weight: 600; color: #111; letter-spacing: .02em; }
.cds-shipping-card p { margin: 0; color: #6b7280; font-size: 13px; line-height: 1.6; }
.cds-shipping-card > div:not(.cds-shipping-icon) { flex: 1; min-width: 0; }

/* A+ Feature alternating blocks */
.cds-aplus-features {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 24px 24px;
}
.cds-aplus-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,.04);
}
@media (max-width: 768px) { .cds-aplus-feature { grid-template-columns: 1fr; gap: 0; } }
.cds-aplus-feature-reverse { direction: rtl; }
.cds-aplus-feature-reverse > * { direction: ltr; }
@media (max-width: 768px) { .cds-aplus-feature-reverse { direction: ltr; } }
.cds-aplus-feature-media {
  aspect-ratio: 1/1;
  overflow: hidden;
  align-self: stretch;
  background: var(--codeison-bg-muted);
  max-height: 480px;
  width: 100%;
}
.cds-aplus-feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cds-aplus-feature-copy { padding: 40px 48px; }
@media (max-width: 768px) { .cds-aplus-feature-copy { padding: 32px 24px 40px; } }
.cds-aplus-feature-copy h3 { font-family: var(--codeison-font-display); font-size: clamp(24px, 3vw, 32px); font-weight: 600; line-height: 1.2; margin: 8px 0 16px; letter-spacing: -0.02em; color: var(--codeison-text); }
.cds-aplus-feature-copy p { color: var(--codeison-text-muted); font-size: 16px; line-height: 1.7; margin: 0 0 20px; }
.cds-aplus-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cds-aplus-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--codeison-text); }
.cds-aplus-list li i { color: var(--codeison-accent); font-size: 14px; margin-top: 5px; flex-shrink: 0; }

/* Sticky mobile ATC */
.cds-sticky-atc {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 12px 20px;
  display: none;
  align-items: center;
  gap: 14px;
  z-index: 40;
  box-shadow: 0 -4px 20px rgba(0,0,0,.06);
  transform: translateY(100%);
  transition: transform 300ms ease;
}
.cds-sticky-atc-info { flex: 1; min-width: 0; }
.cds-sticky-atc-name { font-size: 13px; font-weight: 500; color: var(--codeison-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cds-sticky-atc-price { font-size: 14px; font-weight: 600; color: var(--codeison-brand); }
.cds-sticky-atc .cds-btn { padding: 12px 20px; font-size: 12px; }
@media (max-width: 768px) { .cds-sticky-atc.is-visible { display: flex; } }

/* ============================================================
   CATEGORY PAGE
   ============================================================ */
.cds-cat-hero {
  padding: 48px 0 36px; background: #f5f5f0;
  text-align: center; border-bottom: 1px solid #ebe9e4;
}
.cds-cat-title { font-family: var(--codeison-font-display); font-size: clamp(32px, 5vw, 52px); font-weight: 600; margin: 4px 0 12px; letter-spacing: -0.02em; }
.cds-cat-description { max-width: 640px; margin: 0 auto; color: var(--codeison-text-muted); font-size: 15px; line-height: 1.6; }

.cds-cat-section { padding: 48px 0 80px; }
.cds-cat-layout { display: grid; grid-template-columns: 240px 1fr; gap: 40px; }
@media (max-width: 991px) { .cds-cat-layout { grid-template-columns: 1fr; gap: 32px; } }

.cds-cat-sidebar {
  position: static;
  align-self: start;
  /* All filters visible — no internal scroll, sidebar flows with the page */
}
@media (max-width: 991px) { .cds-cat-sidebar { position: static; max-height: none; } }
.cds-filter-group { border-bottom: 1px solid var(--codeison-border-soft); padding: 18px 0; }
.cds-filter-group:first-child { padding-top: 0; }
.cds-filter-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; margin: 0 0 12px; color: var(--codeison-text); font-family: var(--codeison-font-body); }
.cds-cat-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cds-cat-nav a { font-size: 14px; color: var(--codeison-text); text-decoration: none; display: block; padding: 4px 0; }
.cds-cat-nav a:hover { color: var(--codeison-accent); }

.cds-cat-main { min-width: 0; }
.cds-cat-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; padding-bottom: 16px;
  border-bottom: 1px solid #f3f4f6; gap: 12px; flex-wrap: wrap;
}
.cds-cat-count { font-size: 13px; color: #6b7280; font-weight: 500; }
.cds-cat-toolbar-right { display: flex; align-items: center; gap: 10px; }
.cds-toolbar-sort {
  padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 6px;
  font-size: 13px; color: #374151; background: #fff; cursor: pointer;
  font-family: inherit;
}
.cds-toolbar-sort:focus { outline: none; border-color: #111; }
.cds-grid-toggle { display: flex; gap: 2px; }
.cds-grid-btn {
  background: #fff; border: 1px solid #e5e7eb;
  width: 34px; height: 34px; border-radius: 6px;
  cursor: pointer; color: #9ca3af; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 150ms;
}
.cds-grid-btn:hover { color: #111; border-color: #d1d5db; }
.cds-grid-btn.is-active { background: #111; color: #fff; border-color: #111; }
.cds-cat-compare {
  width: 34px; height: 34px; border-radius: 6px;
  border: 1px solid #e5e7eb; background: #fff;
  color: #9ca3af; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; transition: all 150ms;
}
.cds-cat-compare:hover { color: #111; border-color: #d1d5db; }

.cds-cat-grid { margin-bottom: 40px; }
.cds-card-rating { color: #f59e0b; font-size: 12px; margin-top: 4px; letter-spacing: 1px; }

.cds-cat-pagination { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--codeison-border-soft); gap: 16px; flex-wrap: wrap; }
.cds-cat-pagination .pagination { margin: 0; gap: 4px; }
.cds-cat-pagination .page-link { border-radius: var(--codeison-radius-sm) !important; border-color: var(--codeison-border) !important; color: var(--codeison-text) !important; }
.cds-cat-pagination .page-item.active .page-link { background: var(--codeison-brand) !important; border-color: var(--codeison-brand) !important; color: #fff !important; }
.cds-cat-results { font-size: 13px; color: var(--codeison-text-muted); }

/* Empty state */
.cds-empty-state { text-align: center; padding: 80px 24px; }
.cds-empty-state i { font-size: 56px; color: var(--codeison-text-subtle); margin-bottom: 20px; }
.cds-empty-state h3 { font-family: var(--codeison-font-display); font-size: 24px; margin: 0 0 8px; }
.cds-empty-state p { color: var(--codeison-text-muted); margin: 0 0 24px; }

/* Search page */
.cds-search-bar { display: flex; gap: 8px; max-width: 720px; margin: 24px auto 16px; flex-wrap: wrap; }
.cds-search-bar .cds-pdp-input, .cds-search-bar .cds-pdp-select { flex: 1; min-width: 180px; }
.cds-search-checks { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   GENERIC PAGE LAYOUT (cart/checkout/account/login)
   ============================================================ */
.cds-page-section { padding: 48px 0 80px; }
@media (max-width: 768px) { .cds-page-section { padding: 32px 0 56px; } }
.cds-page-header { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.cds-page-title { font-family: var(--codeison-font-display); font-size: clamp(28px, 4vw, 40px); font-weight: 600; margin: 4px 0 12px; letter-spacing: -0.02em; }
.cds-page-sub { color: var(--codeison-text-muted); font-size: 15px; margin: 0; }

/* Toast stack container — multiple .cds-alert stack vertically top-right */
body { --cds-toast-gap: 8px; }
.cds-alert {
  position: fixed; right: 20px; left: auto; z-index: 9999;
  padding: 12px 16px; font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 10px;
  min-width: 260px; max-width: 420px;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.18);
  animation: cds-alert-slide 350ms cubic-bezier(.25,.46,.45,.94);
  top: 20px;
}
/* Stack alerts: each subsequent alert offsets 60px further down */
.cds-alert ~ .cds-alert { top: 80px; }
.cds-alert ~ .cds-alert ~ .cds-alert { top: 140px; }
.cds-alert ~ .cds-alert ~ .cds-alert ~ .cds-alert { top: 200px; }
.cds-alert .btn-close, .cds-alert button {
  background: transparent; border: 0; cursor: pointer; margin-left: auto;
  font-size: 16px; opacity: .7; color: inherit; padding: 0 0 0 8px;
}
.cds-alert .btn-close:hover, .cds-alert button:hover { opacity: 1; }
.cds-alert a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; white-space: nowrap; }
.cds-alert-success { background: #111; color: #fff; }
.cds-alert-danger  { background: #dc2626; color: #fff; }
.cds-alert-info    { background: var(--codeison-accent, #d97706); color: #fff; }
@keyframes cds-alert-slide { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* OC default #alert container — floating pill toast at top-right */
#alert { position: fixed !important; top: 20px !important; right: 20px !important; left: auto !important; z-index: 9998; max-width: 420px; }
#alert .alert {
  margin: 0 0 8px 0 !important;
  border-radius: 10px !important;
  border: 0 !important;
  padding: 12px 16px !important;
  padding-right: 40px !important;
  font-size: 13px !important;
  text-align: left !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.18);
  animation: cds-alert-slide 350ms cubic-bezier(.25,.46,.45,.94);
  position: relative;
}
#alert .alert-success { background: #111 !important; color: #fff !important; }
#alert .alert-danger  { background: #dc2626 !important; color: #fff !important; }
#alert .alert .btn-close { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); filter: invert(1) grayscale(1) opacity(.7); }
@media (max-width: 480px) {
  .cds-alert, #alert { right: 10px !important; left: 10px !important; max-width: none; }
}

/* Cart page */
.cds-cart-page { margin-bottom: 40px; }
.cds-cart-page h1, .cds-cart-page h2 { display: none !important; } /* duplicated by our .cds-page-header */

.cds-cart-page .table,
.cds-cart-page .table-bordered,
.cds-cart-page table {
  border: 0 !important;
  width: 100% !important;
  border-collapse: collapse !important;
}
.cds-cart-page .table th, .cds-cart-page table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--codeison-text-muted); font-weight: 700 !important;
  padding: 14px 12px !important;
  border-bottom: 1px solid var(--codeison-border) !important;
  border-top: 0 !important; border-left: 0 !important; border-right: 0 !important;
  background: transparent !important;
  text-align: left !important;
}
.cds-cart-page .table td, .cds-cart-page table td {
  padding: 18px 12px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid var(--codeison-border-soft) !important;
  border-top: 0 !important; border-left: 0 !important; border-right: 0 !important;
}
.cds-cart-page img {
  border-radius: var(--codeison-radius-sm);
  max-width: 100px !important;
  width: 100px !important;
  height: auto !important;
}
.cds-cart-page a { color: var(--codeison-text); font-weight: 500; }
.cds-cart-page a:hover { color: var(--codeison-accent); }

/* Cart table internal form controls */
.cds-cart-page input.form-control, .cds-cart-page .input-group {
  max-width: 110px;
}
.cds-cart-page input.form-control {
  padding: 8px 10px !important;
  border: 1px solid var(--codeison-border) !important;
  border-radius: var(--codeison-radius-sm) !important;
  font-size: 14px !important;
  text-align: center !important;
}

/* Cart buttons — nuke OC Bootstrap blue */
.cds-cart-page .btn-primary, .cds-cart-page button.btn-primary,
.cds-checkout-card .btn-primary, .cds-checkout-card button.btn-primary,
.cds-checkout-card .btn-success, .cds-checkout-card button.btn-success {
  background: #111 !important;
  border: 0 !important;
  color: #fff !important;
  padding: 14px 24px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  transition: all 200ms !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.cds-cart-page .btn-primary:hover,
.cds-checkout-card .btn-primary:hover,
.cds-checkout-card .btn-success:hover {
  background: var(--codeison-accent, #d97706) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.cds-cart-page .btn-danger, .cds-cart-page .btn-light {
  background: transparent !important;
  border: 1px solid var(--codeison-border) !important;
  color: var(--codeison-text) !important;
  padding: 8px 12px !important;
  border-radius: var(--codeison-radius-sm) !important;
  font-size: 13px !important;
}
.cds-cart-page .btn-danger:hover { background: #fee2e2 !important; color: #991b1b !important; border-color: #fca5a5 !important; }
.cds-cart-page .btn-light:hover { background: var(--codeison-bg-soft) !important; }

/* ============================================================
   CART PAGE — matches checkout design language
   ============================================================ */
.cds-cart-page-new { padding: 32px 0 80px; background: #fafaf9; }
.cds-cart-page-new .cds-checkout-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* 2-col: items + sticky summary */
.cds-cart-page-new #output-cart, .cds-cart-page-new .cds-bag-layout {
  display: grid !important; grid-template-columns: minmax(0, 1.6fr) minmax(0, 380px);
  gap: 28px !important; align-items: start;
}
@media (max-width: 991px) { .cds-cart-page-new .cds-bag-layout { grid-template-columns: 1fr !important; } }

/* Left items column — card wrapper */
.cds-cart-page-new .cds-bag-items {
  background: #fff; border: 1px solid #ebe9e4; border-radius: 12px;
  padding: 0; min-width: 0;
}
.cds-cart-page-new .cds-bag-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 26px 16px; border-bottom: 1px solid #f3f4f6;
}
.cds-cart-page-new .cds-bag-count { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #111; }
.cds-cart-page-new .cds-bag-weight { font-size: 12px; color: #9ca3af; }

.cds-cart-page-new .cds-bag-list { list-style: none; margin: 0; padding: 0; }
.cds-cart-page-new .cds-bag-item {
  display: grid !important; grid-template-columns: 90px minmax(0, 1fr) auto;
  gap: 16px; padding: 20px 26px; border-bottom: 1px solid #f3f4f6;
  align-items: start; background: transparent;
}
.cds-cart-page-new .cds-bag-item:last-child { border-bottom: 0; }
.cds-cart-page-new .cds-bag-thumb {
  display: block; width: 90px; height: 120px; border-radius: 8px;
  overflow: hidden; background: #fafaf9; position: relative;
}
.cds-cart-page-new .cds-bag-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.cds-cart-page-new .cds-bag-info { min-width: 0; }
.cds-cart-page-new .cds-bag-name {
  font-family: var(--codeison-font-display);
  font-size: 17px; font-weight: 500; color: #111;
  text-decoration: none; line-height: 1.25; letter-spacing: -0.005em;
  display: block; margin: 0 0 6px;
}
.cds-cart-page-new .cds-bag-name:hover { color: var(--codeison-accent, #d97706); }
.cds-cart-page-new .cds-bag-meta {
  list-style: none; padding: 0; margin: 0 0 12px;
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: 11px; color: #9ca3af;
}
.cds-cart-page-new .cds-bag-meta li span {
  color: #6b7280; font-weight: 600;
  text-transform: uppercase; font-size: 10px; letter-spacing: .06em; margin-right: 4px;
}
.cds-cart-page-new .cds-bag-stock {
  display: inline-block; padding: 3px 8px; margin-bottom: 6px;
  background: #fee2e2; color: #991b1b; border-radius: 100px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.cds-cart-page-new .cds-bag-actions {
  display: flex; align-items: center; gap: 12px; margin: 0;
}
.cds-cart-page-new .cds-bag-qty {
  display: inline-flex; align-items: center;
  border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden;
}
.cds-cart-page-new .cds-bag-qty button {
  background: #fff; border: 0; width: 32px; height: 32px;
  cursor: pointer; font-size: 14px; color: #111;
  transition: background 150ms;
}
.cds-cart-page-new .cds-bag-qty button:hover { background: #fafaf9; }
.cds-cart-page-new .cds-bag-qty input {
  width: 40px; height: 32px; border: 0;
  border-left: 1px solid #f3f4f6; border-right: 1px solid #f3f4f6;
  text-align: center; font-size: 13px; font-weight: 600; color: #111;
}
.cds-cart-page-new .cds-bag-remove {
  background: transparent; border: 0; cursor: pointer;
  color: #9ca3af; font-size: 11px; font-weight: 500;
  padding: 4px 0; display: inline-flex; align-items: center; gap: 5px;
  text-transform: uppercase; letter-spacing: .08em;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent;
  transition: all 150ms;
}
.cds-cart-page-new .cds-bag-remove i { font-size: 11px; }
.cds-cart-page-new .cds-bag-remove:hover { color: #dc2626; text-decoration-color: #dc2626; }
.cds-cart-page-new .cds-bag-warn { font-size: 11px; color: #dc2626; margin: 6px 0 0; }
.cds-cart-page-new .cds-bag-prices { text-align: right; min-width: 100px; }
.cds-cart-page-new .cds-bag-line-total {
  font-family: var(--codeison-font-display);
  font-size: 20px; font-weight: 500; color: #111;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.cds-cart-page-new .cds-bag-unit {
  font-size: 10px; color: #9ca3af; margin-top: 4px;
  text-transform: uppercase; letter-spacing: .08em;
}

.cds-cart-page-new .cds-bag-continue {
  padding: 18px 26px; border-top: 1px solid #f3f4f6;
}
.cds-cart-page-new .cds-bag-continue-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: #111; text-decoration: none; transition: color 150ms;
}
.cds-cart-page-new .cds-bag-continue-link:hover { color: var(--codeison-accent, #d97706); }
.cds-cart-page-new .cds-bag-continue-link i { font-size: 10px; }

/* Right summary — sticky card */
.cds-cart-page-new .cds-bag-summary {
  position: sticky; top: 100px; align-self: start;
  background: #fff; border: 1px solid #ebe9e4; border-radius: 12px;
  padding: 26px 28px;
}
@media (max-width: 991px) { .cds-cart-page-new .cds-bag-summary { position: static; } }
.cds-cart-page-new .cds-bag-summary-title {
  font-family: inherit; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; color: #111;
  margin: 0 0 16px; padding-bottom: 14px;
  border-bottom: 1px solid #f3f4f6;
}
.cds-cart-page-new .cds-shipping-progress {
  padding: 14px; background: #f5f5f0; border-radius: 8px; margin-bottom: 18px;
}
.cds-cart-page-new .cds-shipping-progress-msg {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #374151; margin-bottom: 8px;
}
.cds-cart-page-new .cds-shipping-progress-msg i { color: var(--codeison-accent, #d97706); }
.cds-cart-page-new .cds-shipping-progress-msg strong { color: #111; }
.cds-cart-page-new .cds-shipping-progress-track {
  height: 4px; background: #ebe9e4; border-radius: 2px; overflow: hidden;
}
.cds-cart-page-new .cds-shipping-progress-fill {
  height: 100%; background: var(--codeison-accent, #d97706);
  transition: width 500ms cubic-bezier(.25,.46,.45,.94);
}

.cds-cart-page-new .cds-bag-totals { margin: 0 0 18px; padding: 0; }
.cds-cart-page-new .cds-bag-total-row {
  display: flex; justify-content: space-between;
  padding: 8px 0; font-size: 13px; color: #6b7280;
}
.cds-cart-page-new .cds-bag-total-row dt { font-weight: 500; margin: 0; }
.cds-cart-page-new .cds-bag-total-row dd { margin: 0; font-variant-numeric: tabular-nums; }
.cds-cart-page-new .cds-bag-total-grand {
  border-top: 1px solid #f3f4f6; margin-top: 6px; padding-top: 14px;
  font-size: 17px; color: #111;
}
.cds-cart-page-new .cds-bag-total-grand dt {
  font-weight: 700; text-transform: uppercase; font-size: 11px;
  letter-spacing: .14em;
}
.cds-cart-page-new .cds-bag-total-grand dd {
  font-family: var(--codeison-font-body);
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
}

.cds-cart-page-new .cds-btn-full {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 16px 20px;
  background: #111 !important; color: #fff !important; border: 0 !important;
  border-radius: 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  text-decoration: none; cursor: pointer;
  transition: all 200ms; margin: 0 0 16px;
  box-shadow: 0 4px 14px rgba(17,17,17,.15);
}
.cds-cart-page-new .cds-btn-full:hover {
  background: var(--codeison-accent, #d97706) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(217,119,6,.22);
}

/* Trust icons inside summary */
.cds-cart-page-new .cds-bag-trust-stack {
  padding: 16px 0; margin-top: 4px;
  border-top: 1px solid #f3f4f6;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 12px; color: #6b7280;
}
.cds-cart-page-new .cds-bag-trust-stack > div { display: flex; align-items: center; gap: 10px; }
.cds-cart-page-new .cds-bag-trust-stack i {
  width: 24px; height: 24px; border-radius: 50%;
  background: #f5f5f0; color: #111;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; flex-shrink: 0;
}

.cds-cart-page-new .cds-bag-payments {
  display: flex; gap: 6px; flex-wrap: wrap; padding-top: 12px;
  border-top: 1px solid #f3f4f6; margin-top: 4px;
}
.cds-cart-page-new .cds-bag-payments span {
  display: inline-block; padding: 4px 10px;
  background: #fafaf9; border: 1px solid #ebe9e4; border-radius: 4px;
  font-size: 9px; font-weight: 700; color: #6b7280; letter-spacing: .06em;
}

/* Cart promo code — collapsible details/summary + inline form */
.cds-bag-promo {
  margin: 0 0 16px;
  border: 1px dashed var(--codeison-border);
  border-radius: var(--codeison-radius);
  background: var(--codeison-bg-soft);
  padding: 12px 14px;
  transition: all var(--codeison-transition);
}
.cds-bag-promo[open] {
  background: #fff;
  border-style: solid;
  border-color: var(--codeison-text);
  padding-bottom: 14px;
}
.cds-bag-promo > summary.cds-bag-promo-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--codeison-text);
  cursor: pointer;
  list-style: none;
  margin: 0;
  user-select: none;
}
.cds-bag-promo > summary.cds-bag-promo-label::-webkit-details-marker { display: none; }
.cds-bag-promo-label i:first-child { color: var(--codeison-accent); font-size: 13px; }
.cds-bag-promo-chev {
  margin-left: auto; font-size: 10px !important; color: var(--codeison-text-muted) !important;
  transition: transform 220ms var(--codeison-ease);
}
.cds-bag-promo[open] .cds-bag-promo-chev { transform: rotate(180deg); }
.cds-bag-promo > .cds-bag-promo-form { margin-top: 12px; }
.cds-bag-promo-form { display: flex; gap: 6px; }
.cds-bag-promo-form input {
  flex: 1; padding: 12px 14px !important;
  border: 1.5px solid #e5e7eb; border-radius: 8px;
  font-size: 13px; font-family: inherit; color: #111;
  background: #fff; transition: border-color 150ms;
}
.cds-bag-promo-form input:focus { outline: none; border-color: #111; box-shadow: 0 0 0 3px rgba(17,17,17,.06); }
.cds-bag-promo-btn {
  flex-shrink: 0; padding: 12px 20px;
  background: #fff; color: #111; border: 1.5px solid #111;
  border-radius: 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  cursor: pointer; transition: all 180ms;
  font-family: inherit;
}
.cds-bag-promo-btn:hover { background: #111; color: #fff; }
.cds-bag-promo-btn:disabled { opacity: .6; cursor: wait; }
.cds-bag-promo-msg { margin-top: 10px; }
.cds-bag-promo-msg:empty { margin-top: 0; }

/* Empty cart state */
.cds-cart-page h1 + p, .cds-cart-page p { font-size: 15px; color: var(--codeison-text-muted); }

/* Totals table at bottom of cart */
.cds-cart-page .table-bordered td {
  font-size: 14px !important;
  padding: 12px 16px !important;
}
.cds-cart-page .table-bordered td strong { font-weight: 700; }
.cds-cart-page .table-bordered tr:last-child td {
  font-size: 18px !important;
  font-family: var(--codeison-font-display);
  font-weight: 600 !important;
  border-top: 2px solid var(--codeison-brand) !important;
}

/* Empty cart state */
.cds-cart-page .cds-empty-state { padding: 80px 24px; text-align: center; background: #fafaf9; border-radius: 12px; }
.cds-cart-page .cds-empty-state i { font-size: 48px; color: #d1d5db; margin-bottom: 18px; }
.cds-cart-page .cds-empty-state h3 { font-family: var(--codeison-font-display); font-size: 24px; margin: 0 0 8px; color: #111; font-weight: 600; }
.cds-cart-page .cds-empty-state p { color: #6b7280; margin: 0 0 24px; font-size: 15px; }
.cds-cart-page .cds-empty-state .cds-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #111; color: #fff !important; border: 0;
  padding: 14px 28px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  border-radius: 8px; text-decoration: none;
  transition: all 200ms;
}
.cds-cart-page .cds-empty-state .cds-btn:hover { background: var(--codeison-accent, #d97706); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }

/* Legacy cart trust strip — hidden on new cart page (moved inside summary) */
.cds-cart-page-new .cds-cart-trust { display: none; }

/* Cart trust strip — premium cards */
.cds-cart-trust {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  padding: 24px; margin-top: 32px;
  background: #fafaf9; border-radius: 12px;
}
@media (max-width: 768px) { .cds-cart-trust { grid-template-columns: 1fr; gap: 12px; } }
.cds-cart-trust > div {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; color: #374151;
  padding: 8px 12px;
}
.cds-cart-trust i {
  width: 36px; height: 36px; border-radius: 50%;
  background: #111; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.cds-cart-trust strong { color: #111; }

/* ============================================================
   CART — Shopify-style 2-column (items + summary)
   ============================================================ */
.cds-bag-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 991px) { .cds-bag-layout { grid-template-columns: 1fr; gap: 32px; } }

.cds-bag-items { min-width: 0; }
.cds-bag-header {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 16px; border-bottom: 1px solid var(--codeison-border);
  margin-bottom: 8px;
}
.cds-bag-count { font-family: var(--codeison-font-display); font-size: 18px; font-weight: 600; }
.cds-bag-weight { font-size: 12px; color: var(--codeison-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }

.cds-bag-list { list-style: none; margin: 0; padding: 0; }
.cds-bag-item {
  display: grid; grid-template-columns: 100px 1fr auto; gap: 20px;
  padding: 24px 0; border-bottom: 1px solid var(--codeison-border-soft);
  align-items: start;
}
.cds-bag-thumb { display: block; aspect-ratio: 3/4; width: 100px; background: var(--codeison-bg-soft); border-radius: var(--codeison-radius); overflow: hidden; }
.cds-bag-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cds-bag-info { min-width: 0; }
.cds-bag-name { font-family: var(--codeison-font-display); font-size: 17px; font-weight: 600; text-decoration: none; color: var(--codeison-text); display: block; margin-bottom: 6px; line-height: 1.3; }
.cds-bag-name:hover { color: var(--codeison-accent); }
.cds-bag-stock { display: inline-block; background: #fee2e2; color: #991b1b; font-size: 11px; padding: 2px 8px; border-radius: 3px; font-weight: 600; margin-left: 6px; }
.cds-bag-meta { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; color: var(--codeison-text-muted); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.cds-bag-meta span { font-weight: 600; color: var(--codeison-text); }

.cds-bag-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; flex-wrap: wrap; }
.cds-bag-qty {
  display: inline-flex; border: 1.5px solid var(--codeison-border); border-radius: var(--codeison-radius-sm); overflow: hidden;
}
.cds-bag-qty button {
  background: #fff; border: 0; width: 32px; height: 34px; cursor: pointer;
  font-size: 16px; color: var(--codeison-text); padding: 0;
}
.cds-bag-qty button:hover { background: var(--codeison-bg-soft); }
.cds-bag-qty input {
  width: 44px; border: 0; border-left: 1px solid var(--codeison-border-soft);
  border-right: 1px solid var(--codeison-border-soft);
  text-align: center; font-size: 14px; font-weight: 600; background: #fff;
}
.cds-bag-remove {
  background: none; border: 0; padding: 0;
  color: var(--codeison-text-muted); font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  text-decoration: none; font-family: inherit;
}
.cds-bag-remove:hover { color: #dc2626; }

.cds-bag-warn { color: #92400e; background: #fef3c7; padding: 8px 12px; border-radius: var(--codeison-radius-sm); font-size: 13px; margin: 8px 0 0; }

.cds-bag-prices { text-align: right; white-space: nowrap; }
.cds-bag-line-total { font-size: 17px; font-weight: 700; color: var(--codeison-text); font-family: var(--codeison-font-display); }
.cds-bag-unit { font-size: 12px; color: var(--codeison-text-muted); margin-top: 2px; }

.cds-bag-continue { margin-top: 24px; }
.cds-bag-continue-link { font-size: 13px; color: var(--codeison-text-muted); text-decoration: none; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.cds-bag-continue-link:hover { color: var(--codeison-brand); }

/* Summary */
.cds-bag-summary {
  background: var(--codeison-bg-soft);
  padding: 28px;
  border-radius: var(--codeison-radius);
  position: sticky; top: 100px;
}
@media (max-width: 991px) { .cds-bag-summary { position: static; } }
.cds-bag-summary-title {
  font-family: var(--codeison-font-display);
  font-size: 20px; font-weight: 600;
  margin: 0 0 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--codeison-border);
}
.cds-bag-totals { margin: 0 0 20px; padding: 0; }
.cds-bag-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0; font-size: 14px; color: var(--codeison-text);
}
.cds-bag-total-row dt { margin: 0; font-weight: 400; color: var(--codeison-text-muted); }
.cds-bag-total-row dd { margin: 0; font-weight: 500; }
.cds-bag-total-grand {
  border-top: 1px solid var(--codeison-border);
  padding-top: 14px; margin-top: 6px;
  font-size: 18px !important;
  font-family: var(--codeison-font-display);
  font-weight: 700 !important;
}
.cds-bag-total-grand dt { color: var(--codeison-text) !important; font-weight: 600 !important; }
.cds-bag-total-grand dd { font-weight: 700 !important; }

.cds-bag-summary .cds-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 20px;
}

.cds-bag-trust-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.cds-bag-trust-stack > div { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--codeison-text-muted); }
.cds-bag-trust-stack i { color: var(--codeison-brand); width: 18px; text-align: center; }

.cds-bag-payments { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding-top: 16px; border-top: 1px solid var(--codeison-border); }
.cds-bag-payments span {
  background: #fff; border: 1px solid var(--codeison-border);
  padding: 4px 10px; border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--codeison-text-muted);
}

.cds-bag-modules { margin-top: 48px; padding: 32px 0; border-top: 1px solid var(--codeison-border-soft); }
.cds-bag-modules-title { font-family: var(--codeison-font-display); font-size: 22px; font-weight: 600; margin: 0 0 8px; }

/* ============================================================
   CHECKOUT CONFIRM (order summary in sidebar)
   ============================================================ */
.cds-confirm { margin-bottom: 20px; }
.cds-confirm-title { font-family: var(--codeison-font-display); font-size: 16px; font-weight: 600; margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; color: var(--codeison-text-muted); }
.cds-confirm-items { list-style: none; margin: 0 0 16px; padding: 0; }
.cds-confirm-item {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--codeison-border-soft);
  font-size: 14px;
}
.cds-confirm-qty { font-weight: 700; color: var(--codeison-text); }
.cds-confirm-name a { color: var(--codeison-text); text-decoration: none; font-weight: 500; }
.cds-confirm-name a:hover { color: var(--codeison-accent); }
.cds-confirm-meta { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; color: var(--codeison-text-muted); }
.cds-confirm-total { text-align: right; font-weight: 600; white-space: nowrap; }
.cds-confirm-totals { margin: 0 0 16px; padding: 0; border-top: 1px solid var(--codeison-border); padding-top: 14px; }
.cds-confirm-total-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.cds-confirm-total-row dt, .cds-confirm-total-row dd { margin: 0; }
.cds-confirm-total-row dt { color: var(--codeison-text-muted); }
.cds-confirm-grand {
  font-family: var(--codeison-font-display);
  font-size: 18px !important;
  font-weight: 700 !important;
  border-top: 1px solid var(--codeison-border);
  padding-top: 12px; margin-top: 6px;
}
.cds-confirm-grand dt { color: var(--codeison-text) !important; font-weight: 600; }
.cds-confirm-payment .btn-primary, .cds-confirm-payment button[type="submit"], .cds-confirm-payment .btn {
  width: 100% !important;
  padding: 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background: var(--codeison-brand) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--codeison-radius-sm) !important;
}

/* ============================================================
   CHECKOUT — simplified single-page numbered-step flow
   ============================================================ */
.cds-checkout-page { padding: 32px 0 80px; background: #fafaf9; }
.cds-checkout-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Header */
.cds-checkout-header { text-align: center; margin: 0 0 36px; }
.cds-checkout-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
  color: #6b7280; margin: 0 0 10px;
}
.cds-checkout-eyebrow i { color: #10b981; }
.cds-checkout-header h1 {
  font-family: var(--codeison-font-display);
  font-size: clamp(28px, 4vw, 40px); font-weight: 500;
  margin: 0 0 24px; color: #111; letter-spacing: -0.01em;
}

/* Progress */
.cds-checkout-progress {
  display: inline-flex; align-items: center; gap: 0;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
}
.cds-checkout-progress > span:not(.cds-step-line) {
  display: inline-flex; align-items: center; gap: 8px;
  color: #9ca3af; padding: 0 14px;
}
.cds-checkout-progress .cds-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #e5e7eb; color: #6b7280;
  font-size: 12px; font-weight: 700; letter-spacing: 0;
}
.cds-checkout-progress > span.is-done { color: #111; }
.cds-checkout-progress > span.is-done .cds-step-num { background: #10b981; color: #fff; }
.cds-checkout-progress > span.is-active { color: #111; }
.cds-checkout-progress > span.is-active .cds-step-num { background: #111; color: #fff; }
.cds-checkout-progress .cds-step-line { width: 36px; height: 1px; background: #e5e7eb; }
.cds-checkout-progress .cds-step-line.is-done { background: #10b981; }

/* 2-col layout: form + sticky summary */
.cds-checkout-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 380px); gap: 28px;
  align-items: start;
}
@media (max-width: 991px) { .cds-checkout-grid { grid-template-columns: 1fr; } }

.cds-checkout-form-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Each numbered step card */
.cds-checkout-step {
  background: #fff; border: 1px solid #ebe9e4;
  border-radius: 12px; padding: 28px 32px;
}
@media (max-width: 600px) { .cds-checkout-step { padding: 22px; } }
.cds-checkout-step-head {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 20px; margin-bottom: 22px;
  border-bottom: 1px solid #f3f4f6;
}
.cds-checkout-step-num {
  width: 32px; height: 32px; border-radius: 50%;
  background: #111; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.cds-checkout-step-head h2 {
  font-family: var(--codeison-font-body); /* sans, not serif — cleaner for forms */
  font-size: 15px; font-weight: 700; margin: 0; color: #111; letter-spacing: -0.005em;
  text-transform: none;
  border: 0 !important; padding: 0 !important;
}
.cds-checkout-step-head p {
  font-size: 12px; color: #6b7280; margin: 1px 0 0;
}
.cds-checkout-step-body { /* contains the OC subview */ }

/* Override every legend/h2/h3 inside step bodies — they shouldn't repeat headers */
.cds-checkout-step-body legend,
.cds-checkout-step-body fieldset > h2,
.cds-checkout-step-body fieldset > h3 {
  display: none !important;
}

/* Sticky right column */
.cds-checkout-side { min-width: 0; }
.cds-checkout-side-sticky { position: sticky; top: 100px; }
@media (max-width: 991px) { .cds-checkout-side-sticky { position: static; } }

.cds-checkout-summary-card {
  background: #fff; border: 1px solid #ebe9e4;
  border-radius: 12px; padding: 26px 28px;
}
.cds-checkout-summary-card > div + div { margin-top: 12px; }
.cds-checkout-summary-card .table { width: 100%; font-size: 13px; }
.cds-checkout-summary-card .table td { padding: 8px 0; border: 0; }
.cds-checkout-summary-card .table tr:last-child td {
  font-size: 16px; font-weight: 700; color: #111;
  padding-top: 14px; border-top: 1px solid #f3f4f6; margin-top: 8px;
}
.cds-checkout-summary-card .table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.cds-checkout-summary-card .table td:first-child { color: #6b7280; }
.cds-checkout-summary-card .table tr:last-child td:first-child { color: #111; text-transform: uppercase; font-size: 11px; letter-spacing: .12em; }
.cds-checkout-summary-card h2,
.cds-checkout-summary-card h3,
.cds-checkout-summary-card legend {
  font-family: inherit !important;
  font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .16em !important;
  color: #111 !important; margin: 0 0 16px !important;
  padding: 0 0 14px 0 !important;
  border: 0 !important; border-bottom: 1px solid #f3f4f6 !important;
  background: transparent !important;
}

/* Trust badges */
.cds-checkout-trust {
  margin-top: 16px; padding: 16px 20px;
  background: #fff; border: 1px solid #f3f4f6;
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 12px; color: #374151;
}
.cds-checkout-trust > div { display: flex; align-items: center; gap: 12px; }
.cds-checkout-trust i {
  width: 26px; height: 26px; border-radius: 50%;
  background: #f5f5f0; color: #111;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0;
}

/* === Force ALL form rows inside checkout to be proper grids (kills Bootstrap conflicts) === */
.cds-checkout-step-body .row.mb-3,
.cds-checkout-step-body .form-group,
.cds-checkout-step-body .row {
  display: block !important; margin: 0 0 14px !important; padding: 0 !important;
}
.cds-checkout-step-body .row.mb-3 > .col-form-label,
.cds-checkout-step-body .row.mb-3 > [class*="col-sm-2"],
.cds-checkout-step-body .col-form-label {
  display: block !important; width: 100% !important; max-width: 100% !important;
  text-align: left !important; padding: 0 0 6px 0 !important;
  font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .1em !important;
  color: #374151 !important;
}
.cds-checkout-step-body .row.mb-3 > [class*="col-sm-10"],
.cds-checkout-step-body .row.mb-3 > [class*="col-sm"]:not([class*="col-sm-2"]) {
  display: block !important; width: 100% !important; max-width: 100% !important;
  flex: none !important; padding: 0 !important;
}
.cds-checkout-step-body input[type="text"],
.cds-checkout-step-body input[type="email"],
.cds-checkout-step-body input[type="tel"],
.cds-checkout-step-body input[type="password"],
.cds-checkout-step-body input[type="date"],
.cds-checkout-step-body select,
.cds-checkout-step-body textarea,
.cds-checkout-step-body .form-control,
.cds-checkout-step-body .form-select {
  width: 100% !important; padding: 12px 14px !important;
  border: 1.5px solid #e5e7eb !important; border-radius: 8px !important;
  font-size: 14px !important; font-family: inherit !important; color: #111 !important;
  background: #fff !important; transition: border-color 150ms;
}
.cds-checkout-step-body input:focus, .cds-checkout-step-body select:focus, .cds-checkout-step-body textarea:focus {
  outline: none !important; border-color: #111 !important; box-shadow: 0 0 0 3px rgba(17,17,17,.06) !important;
}
.cds-checkout-step-body .invalid-feedback { font-size: 12px; color: #dc2626; margin-top: 4px; display: block; }
.cds-checkout-step-body .btn,
.cds-checkout-step-body button[type="submit"],
.cds-checkout-step-body button.btn-primary {
  background: #111 !important; color: #fff !important; border: 0 !important;
  padding: 12px 22px !important; border-radius: 8px !important;
  font-size: 12px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .1em !important;
  transition: all 200ms !important; cursor: pointer; font-family: inherit !important;
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
}
.cds-checkout-step-body .btn:hover,
.cds-checkout-step-body button[type="submit"]:hover {
  background: var(--codeison-accent, #d97706) !important;
  transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
/* === Checkout-specific: only chips inside a .cds-pdp-chip-group get the chip treatment.
   Standalone .cds-pdp-chip labels (agree checkbox, newsletter checkbox) stay as normal inline checkboxes. === */
.cds-checkout-step-body .cds-pdp-chip-group .cds-pdp-chip span {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border: 1.5px solid #e5e7eb !important; background: #fff !important;
  padding: 12px 22px !important; min-height: 44px !important;
  font-size: 13px !important; font-weight: 600 !important;
  border-radius: 8px !important; transition: all 180ms !important;
  color: #111 !important;
  position: relative;
}
.cds-checkout-step-body .cds-pdp-chip-group .cds-pdp-chip:hover span { border-color: #111 !important; transform: none !important; box-shadow: none !important; }
.cds-checkout-step-body .cds-pdp-chip-group .cds-pdp-chip input:checked + span { background: #111 !important; color: #fff !important; border-color: #111 !important; }
.cds-checkout-step-body .cds-pdp-chip-group .cds-pdp-chip input:checked + span::after { display: none !important; } /* kill the floating dot */
.cds-checkout-step-body .cds-pdp-chip-group { display: inline-flex !important; gap: 8px !important; padding: 4px !important; background: #fafaf9 !important; border-radius: 10px !important; }

/* Standalone agree/newsletter checkboxes — force small inline look using attribute selectors */
.cds-checkout-step-body .cds-pdp-chip:has(input[type="checkbox"][name="agree"]),
.cds-checkout-step-body .cds-pdp-chip:has(input[type="checkbox"][name="newsletter"]),
.cds-checkout-step-body label:has(> input[type="checkbox"][name="agree"]),
.cds-checkout-step-body label:has(> input[type="checkbox"][name="newsletter"]) {
  display: inline-flex !important; align-items: flex-start !important; gap: 10px !important;
  cursor: pointer; margin: 0 0 10px !important; padding: 0 !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important;
}
.cds-checkout-step-body input[type="checkbox"][name="agree"],
.cds-checkout-step-body input[type="checkbox"][name="newsletter"] {
  position: static !important; opacity: 1 !important; pointer-events: auto !important;
  width: 18px !important; height: 18px !important;
  margin: 2px 0 0 !important; flex-shrink: 0;
  accent-color: #111;
  appearance: auto !important; -webkit-appearance: auto !important;
}
.cds-checkout-step-body input[type="checkbox"][name="agree"] + span,
.cds-checkout-step-body input[type="checkbox"][name="newsletter"] + span {
  display: inline !important; min-height: auto !important;
  padding: 0 !important; border: 0 !important; background: transparent !important;
  font-size: 13px !important; font-weight: 400 !important;
  color: #374151 !important; border-radius: 0 !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
}
.cds-checkout-step-body input[type="checkbox"][name="agree"]:checked + span,
.cds-checkout-step-body input[type="checkbox"][name="newsletter"]:checked + span {
  background: transparent !important; color: #374151 !important; border: 0 !important;
}
.cds-checkout-step-body input[type="checkbox"][name="agree"] + span::after,
.cds-checkout-step-body input[type="checkbox"][name="newsletter"] + span::after,
.cds-checkout-step-body input[type="checkbox"][name="agree"]:checked + span::after,
.cds-checkout-step-body input[type="checkbox"][name="newsletter"]:checked + span::after { display: none !important; }
.cds-checkout-step-body input[type="checkbox"][name="agree"] + span a,
.cds-checkout-step-body input[type="checkbox"][name="newsletter"] + span a {
  color: #111; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; background: transparent !important;
}

/* Tighten overall vertical rhythm — form fields much less gap */
.cds-checkout-step-body { padding: 0 !important; }
.cds-checkout-step-body form,
.cds-checkout-step-body fieldset { gap: 12px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
.cds-checkout-step-body .cds-account-field,
.cds-checkout-step-body .row.mb-3,
.cds-checkout-step-body .form-group { margin-bottom: 10px !important; }
.cds-checkout-step-body .cds-account-form-row { gap: 12px !important; margin-bottom: 10px !important; }
.cds-checkout-step-body input.cds-account-input,
.cds-checkout-step-body input.form-control,
.cds-checkout-step-body .cds-pdp-input,
.cds-checkout-step-body .cds-account-select,
.cds-checkout-step-body .form-select { padding: 10px 12px !important; font-size: 13px !important; }
.cds-checkout-step-body .cds-account-label,
.cds-checkout-step-body .col-form-label { font-size: 10px !important; padding-bottom: 4px !important; }
.cds-checkout-step { padding: 22px 26px !important; }
.cds-checkout-step-head { padding-bottom: 14px !important; margin-bottom: 14px !important; }
.cds-checkout-step-head h2 { font-size: 14px !important; }
.cds-checkout-step-head p { font-size: 11px !important; }
.cds-checkout-step-head .cds-checkout-step-num { width: 28px; height: 28px; font-size: 12px; }
.cds-checkout-form-col { gap: 12px !important; }

/* Generous padding + rhythm inside step bodies */
.cds-checkout-step { padding: 28px 32px !important; }
.cds-checkout-step-body { padding-top: 4px; }
.cds-checkout-step-body > p,
.cds-checkout-step-body > div + div,
.cds-checkout-step-body fieldset > div + div { margin-top: 14px; }
/* Hide the redundant "If you already have an account" line on register chip toggle */
.cds-checkout-step-body p:first-child { font-size: 13px; color: #6b7280; margin: 0 0 18px; }
.cds-checkout-step-body p:first-child a, .cds-checkout-step-body p:first-child strong { color: #111; font-weight: 600; }

/* Address Type select / customer group select wider but cleaner */
.cds-checkout-step-body .form-select,
.cds-checkout-step-body select { padding-right: 40px !important; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23111' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; appearance: none !important; -webkit-appearance: none !important; }

/* Method cards (shipping + payment radio options) */
.cds-method-list { margin: 0; }
.cds-method-loading { padding: 20px; text-align: center; color: #6b7280; font-size: 13px; }
.cds-method-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cds-method-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: #fff; border: 1.5px solid #e5e7eb; border-radius: 10px;
  cursor: pointer; transition: all 180ms;
}
.cds-method-card:hover { border-color: #111; background: #fafaf9; }
.cds-method-card input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; flex-shrink: 0;
  border: 2px solid #d1d5db; border-radius: 50%;
  margin: 0; cursor: pointer; position: relative;
  transition: border-color 150ms;
}
.cds-method-card input[type="radio"]:checked { border-color: #111; }
.cds-method-card input[type="radio"]:checked::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: #111;
}
.cds-method-card:has(input[type="radio"]:checked) {
  border-color: #111; background: #fafaf9;
  box-shadow: 0 0 0 3px rgba(17,17,17,.04);
}
.cds-method-card-body { flex: 1; min-width: 0; }
.cds-method-card-name { display: block; font-size: 14px; font-weight: 600; color: #111; }
.cds-method-card-name i { margin-right: 6px; color: #6b7280; }
.cds-method-card-meta { display: block; font-size: 12px; color: #9ca3af; margin-top: 2px; }
.cds-method-card-price { font-size: 14px; font-weight: 700; color: #111; font-variant-numeric: tabular-nums; }

/* Save method button */
#button-shipping-method-save, #button-payment-method-save {
  background: #111 !important; color: #fff !important; border: 0 !important;
  padding: 12px 22px !important; border-radius: 8px !important;
  font-size: 12px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .1em !important;
  cursor: pointer !important; transition: all 200ms !important;
}
#button-shipping-method-save:hover, #button-payment-method-save:hover {
  background: var(--codeison-accent, #d97706) !important;
}

/* Hide breadcrumb-bar on checkout (page header is already visible) */
body.checkout-page .cds-breadcrumb-bar { display: none; }
/* Force form-row 2-col grid in checkout context */
.cds-checkout-step-body .cds-account-form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin: 0 0 16px !important;
}
@media (max-width: 600px) { .cds-checkout-step-body .cds-account-form-row { grid-template-columns: 1fr !important; } }
.cds-checkout-step-body .cds-account-field { margin-bottom: 16px !important; }
.cds-checkout-step-body .cds-account-form-row + .cds-account-field { margin-top: 0 !important; }
.cds-checkout-step-body .cds-account-form-row .cds-account-field { margin-bottom: 0 !important; }
/* Container around all form content has consistent rhythm */
.cds-checkout-step-body form { display: flex; flex-direction: column; gap: 16px; }
.cds-checkout-step-body form > * { margin: 0 !important; }

/* Auth grid (login) */
.cds-login-container { max-width: 1080px; }
.cds-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 768px) { .cds-auth-grid { grid-template-columns: 1fr; } }
.cds-auth-card { background: #fff; border: 1px solid var(--codeison-border-soft); border-radius: var(--codeison-radius-lg); padding: 40px 36px; }
.cds-auth-new { background: var(--codeison-bg-soft); border: 0; }
.cds-auth-title { font-family: var(--codeison-font-display); font-size: 26px; font-weight: 600; margin: 4px 0 10px; }
.cds-auth-sub { color: var(--codeison-text-muted); margin: 0 0 24px; font-size: 14px; line-height: 1.6; }
.cds-auth-form { display: flex; flex-direction: column; gap: 16px; }
.cds-auth-forgot { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--codeison-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.cds-auth-forgot:hover { color: var(--codeison-brand); }
.cds-auth-benefits { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; }
.cds-auth-benefits li { font-size: 14px; display: flex; align-items: center; gap: 10px; }

/* Register page layout */
.cds-register-container { max-width: 1200px; }
.cds-register-header { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.cds-register-title {
  font-family: var(--codeison-font-display);
  font-size: clamp(32px, 4vw, 44px); font-weight: 500;
  margin: 6px 0 12px; letter-spacing: -0.01em; color: #111;
}
.cds-register-sub { color: #6b7280; font-size: 14px; margin: 0; }
.cds-register-sub a { color: #111; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.cds-register-layout {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px;
  align-items: start;
}
@media (max-width: 991px) { .cds-register-layout { grid-template-columns: 1fr; } }

.cds-register-form { display: flex; flex-direction: column; gap: 16px; }
.cds-register-form .cds-auth-card {
  background: #fff; border: 1px solid #ebe9e4; border-radius: 12px;
  padding: 28px; margin: 0;
}
.cds-register-section-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding-bottom: 18px; margin-bottom: 20px;
  border-bottom: 1px solid #f3f4f6;
}
.cds-register-section-head i {
  width: 38px; height: 38px; border-radius: 50%;
  background: #f5f5f0; color: #111;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.cds-register-section-head h3 {
  font-family: var(--codeison-font-body); font-size: 14px; font-weight: 700;
  margin: 0 0 2px; color: #111; letter-spacing: -0.005em;
}
.cds-register-section-head small { font-size: 12px; color: #6b7280; }
.cds-register-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .cds-register-row { grid-template-columns: 1fr; } }
.cds-register-form .cds-pdp-option + .cds-pdp-option,
.cds-register-form .cds-register-row + .cds-pdp-option { margin-top: 16px; }

.cds-register-footer {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 8px;
}
.cds-register-check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: #374151; line-height: 1.5;
  cursor: pointer;
}
.cds-register-check input { margin-top: 2px; accent-color: #111; }
.cds-register-check span a { color: #111; text-decoration: underline; text-underline-offset: 3px; }
.cds-register-submit { margin-top: 8px; }
.cds-register-signin { text-align: center; margin: 8px 0 0; font-size: 13px; color: #6b7280; }
.cds-register-signin a { color: #111; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Register aside (benefits) */
.cds-register-aside { display: flex; flex-direction: column; gap: 12px; }
.cds-register-benefits-card {
  background: #fafaf9; border: 1px solid #ebe9e4; border-radius: 12px;
  padding: 28px;
}
.cds-register-benefits-card h3 {
  font-family: var(--codeison-font-display); font-size: 22px; font-weight: 500;
  margin: 4px 0 20px; color: #111; letter-spacing: -0.01em;
}
.cds-register-benefits {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.cds-register-benefits li { display: flex; align-items: flex-start; gap: 14px; }
.cds-register-benefits li i {
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff; border: 1px solid #ebe9e4; color: var(--codeison-accent, #d97706);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.cds-register-benefits li div { flex: 1; }
.cds-register-benefits li strong { display: block; font-size: 13px; color: #111; margin-bottom: 2px; font-weight: 600; }
.cds-register-benefits li small { font-size: 12px; color: #6b7280; line-height: 1.5; }

.cds-register-trust {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 20px; background: #fff;
  border: 1px solid #f3f4f6; border-radius: 10px;
  font-size: 12px; color: #6b7280;
}
.cds-register-trust > div { display: flex; align-items: center; gap: 10px; }
.cds-register-trust i { color: #111; font-size: 12px; }

/* Password input toggle + strength meter */
.cds-pwd-wrap { position: relative; }
.cds-pwd-wrap .cds-pdp-input, .cds-pwd-wrap .cds-account-input { padding-right: 42px !important; }
.cds-pwd-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; padding: 8px; cursor: pointer;
  color: #9ca3af; font-size: 14px; transition: color 150ms;
}
.cds-pwd-toggle:hover { color: #111; }
.cds-pwd-meter { margin-top: 8px; }
.cds-pwd-meter-bar {
  display: block; height: 4px; background: #ef4444; border-radius: 2px;
  width: 0%; transition: width 250ms, background 250ms;
}
.cds-pwd-meter-label { display: block; font-size: 11px; font-weight: 600; color: #9ca3af; margin-top: 6px; letter-spacing: .04em; text-transform: uppercase; }
.cds-pwd-meter.is-weak .cds-pwd-meter-bar { background: #ef4444; }
.cds-pwd-meter.is-fair .cds-pwd-meter-bar { background: #f59e0b; }
.cds-pwd-meter.is-good .cds-pwd-meter-bar { background: #eab308; }
.cds-pwd-meter.is-strong .cds-pwd-meter-bar { background: #22c55e; }
.cds-pwd-meter.is-excellent .cds-pwd-meter-bar { background: #16a34a; }
.cds-pwd-meter.is-weak .cds-pwd-meter-label { color: #ef4444; }
.cds-pwd-meter.is-fair .cds-pwd-meter-label { color: #d97706; }
.cds-pwd-meter.is-good .cds-pwd-meter-label,
.cds-pwd-meter.is-strong .cds-pwd-meter-label,
.cds-pwd-meter.is-excellent .cds-pwd-meter-label { color: #16a34a; }

/* ============================================================
   ACCESSIBILITY: skip-link + consistent focus rings
   ============================================================ */
.cds-skip-link {
  position: absolute; top: -80px; left: 20px;
  background: #111; color: #fff !important; padding: 14px 24px;
  border-radius: 8px; text-decoration: none;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  z-index: 99999; transition: top 180ms;
}
.cds-skip-link:focus { top: 20px; outline: 3px solid var(--codeison-accent, #d97706); outline-offset: 2px; }
/* Consistent focus rings for keyboard users */
:focus-visible { outline: 2px solid #111; outline-offset: 2px; border-radius: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [role="button"]:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; box-shadow: 0 0 0 3px rgba(17,17,17,.12); }

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS
   ============================================================ */
.cds-fade-up { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(.25,.46,.45,.94), transform 700ms cubic-bezier(.25,.46,.45,.94); will-change: opacity, transform; }
.cds-fade-up.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cds-fade-up { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   QUICK VIEW (click eye on product card → modal)
   ============================================================ */
.cds-thumb-quickview {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.96); border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; color: #111; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  opacity: 0; transform: scale(.85); z-index: 4;
  transition: opacity 200ms ease, transform 200ms ease, background 200ms ease;
}
.product-thumb:hover .cds-thumb-quickview,
.cds-thumb:hover .cds-thumb-quickview { opacity: 1; transform: scale(1); }
.cds-thumb-quickview:hover { background: #111; color: #fff; }

.cds-qv-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.cds-qv-modal.is-open { display: block; }
.cds-qv-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); animation: cds-qv-fade 280ms; }
.cds-qv-shell {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: #fff; border-radius: 16px; width: calc(100% - 40px); max-width: 920px;
  max-height: 90vh; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.25);
  animation: cds-qv-pop 320ms cubic-bezier(.25,.46,.45,.94);
}
@keyframes cds-qv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cds-qv-pop { from { transform: translate(-50%, -48%) scale(.95); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.cds-qv-close {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.95); border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; color: #111; z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.cds-qv-close:hover { background: #111; color: #fff; }
.cds-qv-loading { padding: 80px; text-align: center; font-size: 28px; color: #9ca3af; }
.cds-qv { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
@media (max-width: 768px) { .cds-qv { grid-template-columns: 1fr; max-height: 90vh; overflow-y: auto; } }
.cds-qv-img { aspect-ratio: 3/4; background: #f5f5f0; overflow: hidden; }
.cds-qv-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cds-qv-info { padding: 36px 40px; overflow-y: auto; max-height: 90vh; display: flex; flex-direction: column; }
@media (max-width: 600px) { .cds-qv-info { padding: 24px; } }
.cds-qv-name {
  font-family: var(--codeison-font-display);
  font-size: 24px; font-weight: 500; color: #111; letter-spacing: -0.01em;
  margin: 0 0 6px; text-decoration: none; display: block; line-height: 1.2;
}
.cds-qv-name:hover { color: var(--codeison-accent, #d97706); }
.cds-qv-model { font-size: 11px; color: #9ca3af; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 16px; }
.cds-qv-price { font-size: 22px; font-weight: 700; color: #111; margin: 8px 0 16px; font-variant-numeric: tabular-nums; }
.cds-qv-price-old { font-size: 16px; color: #9ca3af; text-decoration: line-through; font-weight: 500; margin-right: 10px; }
.cds-qv-desc { font-size: 14px; line-height: 1.7; color: #4b5563; margin: 0 0 20px; }
.cds-qv-option { margin: 0 0 16px; }
.cds-qv-option-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #374151; margin-bottom: 8px; }
.cds-qv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cds-qv-chip { cursor: pointer; }
.cds-qv-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cds-qv-chip span {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid #e5e7eb; background: #fff;
  padding: 8px 14px; min-height: 36px; font-size: 13px; font-weight: 600;
  border-radius: 6px; transition: all 150ms; min-width: 40px;
}
.cds-qv-chip:hover span { border-color: #111; }
.cds-qv-chip input:checked + span { background: #111; color: #fff; border-color: #111; }
.cds-qv-actions { margin-top: auto; padding-top: 16px; border-top: 1px solid #f3f4f6; }
.cds-qv-atc {
  width: 100%; padding: 14px 24px; background: #111; color: #fff; border: 0;
  border-radius: 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; cursor: pointer;
  transition: all 200ms; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit;
}
.cds-qv-atc:hover { background: var(--codeison-accent, #d97706); }
.cds-qv-atc:disabled { opacity: .7; cursor: wait; }
.cds-qv-view { display: block; text-align: center; font-size: 12px; color: #6b7280; text-decoration: none; margin-top: 10px; padding: 8px; }
.cds-qv-view:hover { color: #111; }

/* ============================================================
   CART SLIDE-OUT DRAWER (right-side panel)
   ============================================================ */
.cds-cart-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45); backdrop-filter: blur(2px);
  z-index: 10000; opacity: 0; visibility: hidden;
  transition: opacity 280ms ease, visibility 280ms ease;
}
.cds-cart-drawer-overlay.is-open { opacity: 1; visibility: visible; }
.cds-cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 100vw; background: #fff;
  z-index: 10001; box-shadow: -10px 0 40px rgba(0,0,0,.12);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(.25,.46,.45,.94);
}
.cds-cart-drawer.is-open { transform: translateX(0); }
@media (max-width: 480px) { .cds-cart-drawer { width: 100vw; } }

.cds-cart-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid #f3f4f6;
  flex-shrink: 0;
}
.cds-cart-drawer-head h3 {
  font-family: var(--codeison-font-body); /* sans, not serif — matches modern shopify drawers */
  font-size: 14px; font-weight: 700; margin: 0; color: #111;
  text-transform: uppercase; letter-spacing: .14em;
  display: flex; align-items: center; gap: 10px;
}
.cds-cart-drawer-count {
  background: transparent; color: #6b7280; font-family: var(--codeison-font-body);
  font-size: 12px; font-weight: 500; padding: 0; border-radius: 0;
  letter-spacing: .04em; text-transform: none;
}
.cds-cart-drawer-count::before { content: '('; }
.cds-cart-drawer-count::after { content: ')'; }
.cds-cart-drawer-close {
  background: transparent; border: 0; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #6b7280; font-size: 16px;
  transition: all 150ms;
}
.cds-cart-drawer-close:hover { background: #f5f5f0; color: #111; }

.cds-cart-drawer-body {
  flex: 1; overflow-y: auto;
  padding: 12px 20px;
  scrollbar-width: thin; scrollbar-color: #d1d5db transparent;
}
.cds-cart-drawer-body::-webkit-scrollbar { width: 6px; }
.cds-cart-drawer-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

.cds-cart-drawer-loading {
  text-align: center; padding: 60px 20px; color: #9ca3af; font-size: 24px;
}

.cds-cart-drawer-empty {
  text-align: center; padding: 60px 24px;
}
.cds-cart-drawer-empty i { font-size: 48px; color: #d1d5db; margin-bottom: 16px; }
.cds-cart-drawer-empty h4 {
  font-family: var(--codeison-font-display); font-size: 22px; font-weight: 500;
  margin: 0 0 8px; color: #111;
}
.cds-cart-drawer-empty p { font-size: 14px; color: #6b7280; margin: 0 0 20px; }

/* Slim down the bag list inside the drawer */
.cds-cart-drawer .cds-bag-list { list-style: none; padding: 0; margin: 0; }
.cds-cart-drawer .cds-bag-item {
  display: grid !important;
  grid-template-columns: 70px minmax(0, 1fr) auto !important;
  gap: 14px !important;
  padding: 18px 0 !important; border-bottom: 1px solid #ebe9e4 !important;
  align-items: start !important;
  background: transparent !important;
}
.cds-cart-drawer .cds-bag-item:last-child { border-bottom: 0 !important; }
.cds-cart-drawer .cds-bag-thumb {
  display: block !important;
  width: 70px !important; height: 90px !important;
  border-radius: 6px !important; overflow: hidden !important;
  background: #fafaf9 !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
.cds-cart-drawer .cds-bag-thumb img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; display: block !important;
}
.cds-cart-drawer .cds-bag-info { min-width: 0 !important; overflow: hidden !important; }
.cds-cart-drawer .cds-bag-name {
  font-family: var(--codeison-font-display) !important;
  font-size: 16px !important; font-weight: 500 !important; color: #111 !important;
  line-height: 1.25 !important; letter-spacing: -0.01em !important;
  margin: 0 0 6px !important; text-decoration: none !important; display: block !important;
}
.cds-cart-drawer .cds-bag-name:hover { color: var(--codeison-accent, #d97706) !important; }
.cds-cart-drawer .cds-bag-meta {
  list-style: none !important; padding: 0 !important; margin: 0 0 10px !important;
  font-size: 12px !important; color: #374151 !important;
  display: flex !important; flex-wrap: wrap !important; gap: 2px 14px !important;
  letter-spacing: 0 !important;
}
.cds-cart-drawer .cds-bag-meta li {
  display: inline-flex !important; align-items: baseline !important;
  gap: 5px !important; margin: 0 !important;
  font-weight: 500 !important; color: #374151 !important;
}
.cds-cart-drawer .cds-bag-meta li span {
  color: #9ca3af !important; font-weight: 500 !important;
  text-transform: uppercase !important; font-size: 10px !important; letter-spacing: .08em !important;
}
.cds-cart-drawer .cds-bag-actions { display: flex; align-items: center; gap: 6px; margin: 0; }
.cds-cart-drawer .cds-bag-qty {
  display: inline-flex; align-items: center; border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden;
}
.cds-cart-drawer .cds-bag-qty button { background: #fff; border: 0; width: 28px; height: 28px; cursor: pointer; font-size: 14px; }
.cds-cart-drawer .cds-bag-qty button:hover { background: #f5f5f0; }
.cds-cart-drawer .cds-bag-qty input { width: 36px; height: 28px; border: 0; text-align: center; font-size: 12px; font-weight: 600; }
.cds-cart-drawer .cds-bag-remove {
  background: transparent; border: 0; cursor: pointer;
  color: #9ca3af !important; font-size: 11px !important; font-weight: 500 !important;
  padding: 4px 0 !important; transition: color 150ms;
  text-transform: uppercase; letter-spacing: .08em;
  display: inline-flex; align-items: center; gap: 5px;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: transparent;
}
.cds-cart-drawer .cds-bag-remove i { font-size: 11px; }
.cds-cart-drawer .cds-bag-remove:hover { color: #dc2626 !important; text-decoration-color: #dc2626; }
.cds-cart-drawer .cds-bag-remove span,
.cds-cart-drawer .cds-bag-remove > .cds-bag-remove-text { display: none; }
.cds-cart-drawer .cds-bag-prices { text-align: right; min-width: 80px; }
.cds-cart-drawer .cds-bag-line-total {
  font-family: var(--codeison-font-display) !important;
  font-size: 17px !important; font-weight: 500 !important; color: #111 !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums;
}
.cds-cart-drawer .cds-bag-unit {
  font-size: 10px !important; color: #9ca3af !important; margin-top: 4px !important;
  text-transform: uppercase; letter-spacing: .08em;
}
.cds-cart-drawer .cds-bag-stock { display: inline-block; padding: 2px 8px; background: #fee2e2; color: #991b1b; border-radius: 100px; font-size: 10px; font-weight: 600; margin-bottom: 4px; }
.cds-cart-drawer .cds-bag-warn { font-size: 11px; color: #dc2626; margin: 4px 0 0; }

.cds-cart-drawer-foot {
  flex-shrink: 0; padding: 20px 24px;
  border-top: 1px solid #f3f4f6; background: #fafaf9;
}
.cds-cart-drawer-subtotal {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px; padding-bottom: 14px; border-bottom: 1px solid #ebe9e4;
}
.cds-cart-drawer-subtotal span {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #111;
}
.cds-cart-drawer-subtotal strong {
  font-family: var(--codeison-font-body) !important;
  font-size: 22px; font-weight: 700; color: #111;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.cds-cart-drawer-note {
  font-size: 11px; color: #9ca3af; margin: 12px 0 14px;
  text-align: center; letter-spacing: .02em;
}
.cds-cart-drawer-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 18px; border-radius: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  text-decoration: none; cursor: pointer; transition: all 200ms;
  margin: 8px 0 0; width: 100%;
  font-family: inherit; border: 0;
}
.cds-cart-drawer-btn--primary {
  background: #111; color: #fff !important;
  box-shadow: 0 4px 14px rgba(17,17,17,.15);
}
.cds-cart-drawer-btn--primary:hover {
  background: var(--codeison-accent, #d97706);
  box-shadow: 0 6px 18px rgba(217,119,6,.22);
  transform: translateY(-1px);
}
.cds-cart-drawer-btn--secondary {
  background: #fff; color: #111 !important; border: 1.5px solid #e5e7eb;
}
.cds-cart-drawer-btn--secondary:hover { border-color: #111; background: #fafaf9; }

/* Make the cart icon button look like the original anchor */
button.cds-cart-link {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: inherit; font-family: inherit;
}

/* Inline alerts (errors/success messages within page flow, not floating toasts) */
.cds-inline-alert {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 10px;
  font-size: 14px; line-height: 1.4; font-weight: 500;
  margin: 0 0 20px;
  animation: cds-inline-alert-slide 280ms ease-out;
}
.cds-inline-alert i { flex-shrink: 0; font-size: 16px; }
.cds-inline-alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.cds-inline-alert-danger { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
.cds-inline-alert-info { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }
.cds-inline-alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
@keyframes cds-inline-alert-slide { from { transform: translateY(-6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ============================================================
   ACCOUNT PAGES — Codeison shared shell + components
   All account pages have their own twig overrides; this CSS supports them.
   ============================================================ */

/* Page wrapper */
.cds-account-page {
  max-width: 1200px; margin: 32px auto 64px; padding: 0 24px;
}

/* Breadcrumb */
.cds-account-bc {
  font-size: 13px; color: #6b7280; padding: 0 0 16px; margin: 0 0 24px;
  border-bottom: 1px solid #f3f4f6;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.cds-account-bc a { color: #6b7280; text-decoration: none; transition: color 150ms; }
.cds-account-bc a:hover { color: #111; }
.cds-account-bc-sep { color: #d1d5db; }
.cds-account-bc .is-current { color: #111; font-weight: 600; }

/* Header (title + optional sub) */
.cds-account-head { margin: 0 0 28px; }
.cds-account-head h1 {
  font-family: var(--codeison-font-display);
  font-size: clamp(28px, 4vw, 40px); font-weight: 500;
  letter-spacing: -0.01em; color: #111; margin: 0 0 6px;
}
.cds-account-head p { color: #6b7280; font-size: 14px; margin: 0; }

/* 2-col layout: content + sidebar */
.cds-account-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px;
  align-items: start;
}
@media (max-width: 991px) {
  .cds-account-layout { grid-template-columns: 1fr; }
  .cds-account-sidebar { order: -1; }
}

/* Card */
.cds-account-card {
  background: #fff; border: 1px solid #ebe9e4; border-radius: 12px;
  padding: 28px;
}
@media (max-width: 768px) { .cds-account-card { padding: 20px; } }

/* Section heading inside cards */
.cds-account-section-head {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: #111; margin: 0 0 18px; padding-bottom: 14px;
  border-bottom: 1px solid #f3f4f6;
}

/* Sidebar nav */
.cds-account-sidebar {
  background: #fff; border: 1px solid #ebe9e4; border-radius: 12px;
  padding: 8px;
}
.cds-account-sidebar a {
  display: block; padding: 10px 14px; border-radius: 8px;
  font-size: 13px; color: #374151; text-decoration: none;
  transition: all 150ms; margin: 0 0 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cds-account-sidebar a:hover { background: #f5f5f0; color: #111; padding-left: 18px; }
.cds-account-sidebar a.is-active { background: #111; color: #fff; font-weight: 600; }
.cds-account-sidebar-divider { height: 1px; background: #f3f4f6; margin: 6px 8px; }

/* Form rows */
.cds-account-form { display: flex; flex-direction: column; gap: 16px; }
.cds-account-form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin: 0 !important; /* override Bootstrap .row negative margin if inherited */
}
@media (max-width: 600px) { .cds-account-form-row { grid-template-columns: 1fr !important; } }
.cds-account-field { display: flex !important; flex-direction: column !important; gap: 6px !important; min-width: 0 !important; }
.cds-account-form { display: flex !important; flex-direction: column !important; gap: 16px !important; }
.cds-account-field { display: flex; flex-direction: column; gap: 6px; }
.cds-account-label {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: #374151;
}
.cds-account-label .req { color: #dc2626; margin-left: 4px; }
.cds-account-input,
.cds-account-select,
.cds-account-textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid #e5e7eb; border-radius: 8px;
  font-size: 14px; font-family: inherit; color: #111;
  background: #fff; transition: border-color 150ms, box-shadow 150ms;
  line-height: 1.4;
}
.cds-account-input:focus,
.cds-account-select:focus,
.cds-account-textarea:focus {
  outline: none; border-color: #111; box-shadow: 0 0 0 3px rgba(17,17,17,.06);
}
.cds-account-textarea { min-height: 100px; resize: vertical; }
.cds-account-help { font-size: 12px; color: #6b7280; margin-top: 4px; }
.cds-account-error { font-size: 12px; color: #dc2626; margin-top: 4px; display: block; }

/* Footer with action buttons */
.cds-account-footer {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  padding-top: 24px; margin-top: 24px;
  border-top: 1px solid #f3f4f6;
}
.cds-account-btn-primary {
  background: #111; color: #fff !important; border: 0;
  padding: 14px 28px; border-radius: 8px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  transition: all 200ms; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; text-decoration: none;
}
.cds-account-btn-primary:hover { background: var(--codeison-accent, #d97706); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.12); color: #fff !important; }
.cds-account-btn-secondary {
  background: #fff; color: #111 !important; border: 1.5px solid #e5e7eb;
  padding: 12px 24px; border-radius: 8px;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  text-decoration: none; transition: all 200ms; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit;
}
.cds-account-btn-secondary:hover { border-color: #111; }

/* Tables */
.cds-account-table {
  border-collapse: collapse; width: 100%;
  font-size: 14px;
}
.cds-account-table thead th {
  background: #fafaf9; border: 0; border-bottom: 1px solid #ebe9e4;
  padding: 14px 16px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: #374151;
  text-align: left;
}
.cds-account-table tbody td {
  padding: 14px 16px; border: 0; border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}
.cds-account-table tbody tr:last-child td { border-bottom: 0; }
.cds-account-table tbody tr:hover { background: #fafaf9; }

/* Empty state */
.cds-account-empty {
  text-align: center; padding: 60px 24px;
  background: #fafaf9; border-radius: 10px;
}
.cds-account-empty i { font-size: 40px; color: #d1d5db; margin-bottom: 14px; }
.cds-account-empty h3 { font-family: var(--codeison-font-display); font-size: 22px; font-weight: 500; margin: 0 0 8px; color: #111; }
.cds-account-empty p { color: #6b7280; margin: 0 0 18px; font-size: 14px; }

/* Address book cards */
.cds-account-list-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px; margin-bottom: 20px;
  border-bottom: 1px solid #f3f4f6; gap: 12px;
}
.cds-address-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.cds-address-card {
  background: #fff; border: 1px solid #ebe9e4; border-radius: 12px;
  padding: 22px; display: flex; flex-direction: column; gap: 16px;
  transition: all 200ms; position: relative;
}
.cds-address-card:hover { border-color: #d1d5db; box-shadow: 0 4px 16px rgba(0,0,0,.04); }
.cds-address-body { font-size: 13px; line-height: 1.7; color: #6b7280; }
.cds-address-body strong {
  display: block; font-family: var(--codeison-font-display);
  font-size: 17px; font-weight: 500; color: #111; margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.cds-address-body div { color: #374151; }
.cds-address-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 14px; border-top: 1px solid #f3f4f6; margin-top: auto;
  align-items: center;
}
.cds-address-actions .cds-account-btn-secondary {
  padding: 8px 14px !important; font-size: 11px !important;
}
.cds-address-actions .cds-btn-danger {
  color: #dc2626 !important; border-color: #fca5a5 !important;
}
.cds-address-actions .cds-btn-danger:hover {
  background: #fef2f2 !important; border-color: #dc2626 !important;
}
.cds-address-actions .cds-account-badge {
  margin-left: auto;
}

/* Wishlist card grid */
.cds-wishlist-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
@media (max-width: 480px) { .cds-wishlist-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.cds-wishlist-card {
  background: #fff; border: 1px solid #ebe9e4; border-radius: 12px;
  overflow: hidden; transition: all 200ms;
  display: flex; flex-direction: column;
}
.cds-wishlist-card:hover { border-color: #d1d5db; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.05); }
.cds-wishlist-img {
  display: block; aspect-ratio: 3/4; background: #f5f5f0;
  overflow: hidden; position: relative;
}
.cds-wishlist-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.cds-wishlist-card:hover .cds-wishlist-img img { transform: scale(1.04); }
.cds-wishlist-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cds-wishlist-name {
  font-family: var(--codeison-font-display);
  font-size: 15px; font-weight: 500; color: #111;
  text-decoration: none; line-height: 1.25; letter-spacing: -0.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cds-wishlist-name:hover { color: var(--codeison-accent, #d97706); }
.cds-wishlist-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: #9ca3af; }
.cds-wishlist-stock { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.cds-wishlist-stock--in { color: #059669; }
.cds-wishlist-stock--out { color: #dc2626; }
.cds-wishlist-price { font-size: 16px; font-weight: 700; color: #111; font-variant-numeric: tabular-nums; }
.cds-wishlist-price-old { font-size: 13px; color: #9ca3af; text-decoration: line-through; font-weight: 500; margin-right: 6px; }
.cds-wishlist-price strong { font-weight: 700; }
.cds-wishlist-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; }
.cds-wishlist-form { flex: 1; min-width: 0; }
.cds-wishlist-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; border-radius: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  cursor: pointer; transition: all 180ms; border: 0; font-family: inherit;
  text-decoration: none; line-height: 1; height: 38px;
}
.cds-wishlist-btn--primary {
  background: #111; color: #fff; flex: 1; width: 100%;
}
.cds-wishlist-btn--primary:hover { background: var(--codeison-accent, #d97706); color: #fff; }
.cds-wishlist-btn--remove {
  background: #fff; color: #6b7280; border: 1.5px solid #e5e7eb;
  flex: 0 0 38px; width: 38px; padding: 0;
}
.cds-wishlist-btn--remove:hover { color: #dc2626; border-color: #dc2626; background: #fff; }
.cds-wishlist-btn i { font-size: 12px; }

/* List head row above grid (count + clear) */
.cds-wishlist-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid #f3f4f6;
}
.cds-wishlist-count {
  font-size: 13px; color: #6b7280; font-weight: 600;
}

/* Account dashboard tile grid */
.cds-account-tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 768px) { .cds-account-tile-grid { grid-template-columns: 1fr; } }
.cds-account-tile {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; background: #fff; border: 1px solid #ebe9e4;
  border-radius: 12px; text-decoration: none;
  transition: all 200ms;
}
.cds-account-tile:hover { border-color: #111; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.cds-account-tile-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: #f5f5f0; color: #111;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
  transition: all 200ms;
}
.cds-account-tile:hover .cds-account-tile-icon { background: #111; color: #fff; }
.cds-account-tile-body { flex: 1; min-width: 0; }
.cds-account-tile-body strong { display: block; font-size: 14px; font-weight: 600; color: #111; margin-bottom: 2px; }
.cds-account-tile-body small { font-size: 12px; color: #6b7280; line-height: 1.4; }
.cds-account-tile-arrow { color: #d1d5db; font-size: 12px; transition: all 200ms; }
.cds-account-tile:hover .cds-account-tile-arrow { color: #111; transform: translateX(3px); }

/* Status badges */
.cds-account-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 100px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
.cds-account-badge-pending { background: #fef3c7; color: #92400e; }
.cds-account-badge-complete { background: #d1fae5; color: #065f46; }
.cds-account-badge-shipped { background: #dbeafe; color: #1e40af; }
.cds-account-badge-cancelled { background: #fee2e2; color: #991b1b; }
.cds-auth-benefits li i { color: var(--codeison-accent); font-size: 12px; }
.cds-btn-full { width: 100%; text-align: center; }
/* NOTE: !important on background+border is required to beat theme-scoped
   overrides like body[data-theme="..."] .cds-btn which have higher specificity. */
.cds-btn-outline-dark,
body[data-theme] .cds-btn.cds-btn-outline-dark { background: transparent !important; color: var(--codeison-brand, #111) !important; border: 2px solid var(--codeison-brand, #111) !important; }
.cds-btn-outline-dark:hover,
body[data-theme] .cds-btn.cds-btn-outline-dark:hover { background: var(--codeison-brand, #111) !important; color: #fff !important; border-color: var(--codeison-brand, #111) !important; }

/* Account dashboard tiles */
.cds-account-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 991px) { .cds-account-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cds-account-grid { grid-template-columns: 1fr; } }
.cds-account-tile { display: flex; flex-direction: column; gap: 6px; padding: 24px 20px; background: #fff; border: 1px solid var(--codeison-border-soft); border-radius: var(--codeison-radius); text-decoration: none; color: var(--codeison-text); transition: all var(--codeison-transition); }
.cds-account-tile:hover { border-color: var(--codeison-brand); transform: translateY(-2px); box-shadow: var(--codeison-shadow); color: var(--codeison-text); }
.cds-account-tile-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--codeison-bg-soft); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--codeison-brand); margin-bottom: 8px; }
.cds-account-tile-title { font-size: 15px; font-weight: 600; }
.cds-account-tile-sub { font-size: 12px; color: var(--codeison-text-muted); }

/* ============================================================
   PRODUCT-THUMB CARD (OC core card at .product-thumb)
   OC's category controller pre-renders each product through
   product/thumb.twig, so we style .product-thumb directly. Our
   own override at extension/codeison/catalog/view/template/product/
   thumb.twig produces this same structure + Codeison polish.
   ============================================================ */
.product-thumb, .cds-thumb {
  position: relative;
  background: #fff;
  border: 0;
  padding: 0;
  transition: transform var(--codeison-transition);
}
.product-thumb:hover, .cds-thumb:hover { transform: translateY(-4px); }
.product-thumb .image, .cds-thumb-image {
  position: relative;
  aspect-ratio: 3/4 !important;
  overflow: hidden !important;
  background: var(--codeison-bg-soft);
  border-radius: var(--codeison-radius);
  margin-bottom: 14px !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
}
.product-thumb .image a, .cds-thumb-image a { display: block !important; width: 100% !important; height: 100% !important; position: absolute !important; inset: 0 !important; }
.product-thumb .image img, .cds-thumb-image img,
.product-thumb .image a img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transition: transform 600ms var(--codeison-ease);
  display: block !important;
}
.product-thumb:hover .image img, .cds-thumb:hover .cds-thumb-image img { transform: scale(1.04); }
.product-thumb .content, .cds-thumb-content { padding: 0 4px; }

/* Thumb badges (-17% / New / etc) — flat pill, not a circle */
.cds-thumb-badge {
  position: absolute !important;
  top: 12px; left: 12px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 9px;
  height: auto;
  min-width: 0;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  color: #fff;
  font-family: var(--codeison-font-body) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.cds-thumb-badge-sale { background: #dc2626; }
.cds-thumb-badge-new  { background: var(--codeison-brand); }
.product-thumb .description, .cds-thumb-content .description { margin-bottom: 0 !important; }
.product-thumb .description h4, .cds-thumb-name {
  font-family: var(--codeison-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin: 0 0 4px !important;
  letter-spacing: 0 !important;
}
.product-thumb .description h4 a, .cds-thumb-name a {
  color: var(--codeison-text) !important;
  text-decoration: none !important;
}
.product-thumb .description h4 a:hover, .cds-thumb-name a:hover { color: var(--codeison-accent) !important; }
.product-thumb .description p, .cds-thumb-desc { display: none; }
.product-thumb .price, .cds-thumb-price {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--codeison-text) !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.product-thumb .price .price-new, .cds-thumb-price .price-new { color: var(--codeison-text) !important; font-weight: 600 !important; }
.product-thumb .price .price-old, .cds-thumb-price .price-old {
  color: var(--codeison-text-muted) !important;
  text-decoration: line-through;
  font-weight: 400 !important;
  margin-right: 6px;
  font-size: 13px;
}
.product-thumb .price .price-tax, .cds-thumb-price .price-tax { display: none; }
.product-thumb .rating { color: #f59e0b; font-size: 12px; letter-spacing: 1px; margin-top: 4px; }
/* ============================================================
   Product thumb form — Shopify-style action row.
   Layout: [ ADD TO CART (full width) ] [ heart ] [ compare ]
   On cards narrower than ~240px the primary button shows only the icon
   Full-width "Add to Cart" + icon-only Wishlist / Compare.
   ============================================================ */
.product-thumb form, .cds-thumb-form {
  display: flex !important;
  gap: 6px !important;
  margin-top: 4px !important;
  align-items: stretch !important;
}
/* Compact category card buttons */
.product-thumb form button, .cds-thumb-form button {
  height: 36px !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
  padding: 0 10px !important;
  border-width: 1px !important;
  gap: 5px !important;
}
.product-thumb form button i, .cds-thumb-form button i { font-size: 12px !important; }
.product-thumb form button[data-cds-primary],
.product-thumb form .button button:first-child,
.cds-thumb-form button[data-cds-primary] { padding: 0 10px !important; }
.product-thumb form button:not([data-cds-primary]):not(:first-child),
.product-thumb form .button button:not(:first-child),
.cds-thumb-form button:not([data-cds-primary]) {
  flex: 0 0 36px !important;
  width: 36px !important;
}
.product-thumb form .button { display: contents !important; }

/* Shared base for all 3 buttons */
.product-thumb form button, .cds-thumb-form button {
  border: 1.5px solid var(--codeison-border, #e5e7eb) !important;
  height: 42px !important;
  border-radius: var(--codeison-radius-sm, 6px) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: all 180ms ease;
  font-family: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  background: #fff !important;
  color: var(--codeison-text, #111) !important;
  padding: 0 14px !important;
}
.product-thumb form button i, .cds-thumb-form button i { font-size: 14px !important; flex-shrink: 0; }

/* Primary ATC — takes all available width, dark bg */
.product-thumb form button[data-cds-primary],
.product-thumb form .button button:first-child,
.product-thumb form > button:first-of-type,
.cds-thumb-form button[data-cds-primary] {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  background: var(--codeison-brand, #111) !important;
  color: #fff !important;
  border-color: var(--codeison-brand, #111) !important;
  padding: 0 16px !important;
  overflow: hidden !important;
}
/* Wishlist + Compare — fixed square, icon-only */
.product-thumb form button:not([data-cds-primary]):not(:first-child),
.product-thumb form .button button:not(:first-child),
.product-thumb form .button button ~ button,
.cds-thumb-form button:not([data-cds-primary]) {
  flex: 0 0 42px !important;
  width: 42px !important;
  padding: 0 !important;
  background: #fff !important;
  color: var(--codeison-text, #111) !important;
  border-color: var(--codeison-border, #e5e7eb) !important;
}
.product-thumb form .button button:not(:first-child) i,
.product-thumb form button:not([data-cds-primary]):not(:first-child) i,
.cds-thumb-form button:not([data-cds-primary]) i { font-size: 15px !important; }

/* Hover states */
.product-thumb form button[data-cds-primary]:hover,
.product-thumb form .button button:first-child:hover,
.cds-thumb-form button[data-cds-primary]:hover {
  background: var(--codeison-accent, #d97706) !important;
  border-color: var(--codeison-accent, #d97706) !important;
}
.product-thumb form .button button:not(:first-child):hover,
.product-thumb form button:not([data-cds-primary]):not(:first-child):hover,
.cds-thumb-form button:not([data-cds-primary]):hover {
  background: var(--codeison-brand, #111) !important;
  color: #fff !important;
  border-color: var(--codeison-brand, #111) !important;
}

/* ATC label — shows on most cards, icon-only on tiny screens */
.cds-thumb-btn-label { display: inline; }
@media (max-width: 479px) {
  .cds-thumb-btn-label { display: none !important; }
}
@container (max-width: 220px) {
  .cds-thumb-btn-label { display: none !important; }
}

/* ---------- Category filter sidebar (accordion style) ---------- */
.cds-filter-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; margin-bottom: 4px;
}
.cds-filter-heading { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin: 0; color: #111; }
.cds-filter-clear {
  background: none; border: 0; padding: 4px 10px; font-size: 11px;
  color: #6b7280; cursor: pointer; font-family: inherit;
  border-radius: 4px; transition: all 150ms;
}
.cds-filter-clear:hover { color: #111; background: #f3f4f6; }

.cds-accordion { border-bottom: 1px solid #f3f4f6; padding: 0; }
.cds-accordion-head {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; cursor: pointer;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: #111;
}
.cds-accordion-head::-webkit-details-marker { display: none; }
.cds-accordion-head i { font-size: 10px; color: #9ca3af; transition: transform 200ms; }
.cds-accordion[open] .cds-accordion-head i { transform: rotate(180deg); }
.cds-accordion-body { padding: 0 0 20px; }
.cds-cat-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.cds-cat-nav li a {
  display: block; padding: 8px 12px; border-radius: 6px;
  font-size: 14px; color: #374151; text-decoration: none;
  transition: all 150ms;
}
.cds-cat-nav li a:hover { background: #f5f5f0; color: #111; padding-left: 16px; }

/* Check list (price) — clean square checkbox with brand-colored fill */
.cds-check-list { display: flex; flex-direction: column; gap: 8px; }
.cds-check-row {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; font-size: 14px; color: var(--codeison-text);
  padding: 4px 0;
  user-select: none;
}
.cds-check-row input {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.cds-check-mark {
  width: 16px; height: 16px;
  border: 1.5px solid #d1d5db;
  border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 150ms ease, border-color 150ms ease;
  flex-shrink: 0;
  background: #fff;
  position: relative;
}
.cds-check-mark i {
  font-size: 9px;
  color: #fff;
  opacity: 0;
  transition: opacity 100ms ease;
}
.cds-check-row:hover .cds-check-mark { border-color: var(--codeison-brand); }
.cds-check-row input:checked ~ .cds-check-mark { background: var(--codeison-brand); border-color: var(--codeison-brand); }
.cds-check-row input:checked ~ .cds-check-mark i { opacity: 1; }
.cds-check-label { flex: 1; line-height: 1.4; }

/* Size chip row */
.cds-size-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.cds-size-chip { cursor: pointer; }
.cds-size-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cds-size-chip span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 36px; padding: 0 12px;
  border: 1.5px solid var(--codeison-border); background: #fff;
  font-size: 13px; font-weight: 600;
  border-radius: var(--codeison-radius-sm);
  transition: all var(--codeison-transition);
  color: var(--codeison-text);
}
.cds-size-chip:hover span { border-color: var(--codeison-text); }
.cds-size-chip input:checked ~ span { background: var(--codeison-brand); color: #fff; border-color: var(--codeison-brand); }
/* Load more spinner (infinite scroll) */
.cds-load-more { text-align: center; padding: 32px 0; }
.cds-load-more-spinner { font-size: 14px; color: #6b7280; display: inline-flex; align-items: center; gap: 8px; }

.cds-color-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.cds-color-swatch {
  cursor: pointer; display: inline-block;
  padding: 3px; border: 2px solid transparent; border-radius: 50%;
  transition: border-color 200ms;
  position: relative;
}
.cds-color-swatch input {
  position: absolute !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; border: 0 !important;
  clip: rect(0 0 0 0) !important; overflow: hidden !important;
  pointer-events: none !important;
}
.cds-color-swatch:hover { border-color: #d1d5db; }
.cds-color-swatch input:checked + .cds-color-dot,
.cds-color-swatch input:checked ~ .cds-color-dot { box-shadow: 0 0 0 2px #111; }
.cds-color-dot {
  display: block; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.08); transition: transform 150ms;
}
.cds-color-swatch:hover .cds-color-dot { transform: scale(1.1); }
.cds-color-black { background: #111; }
.cds-color-white { background: #fff; }
.cds-color-beige { background: #d9c9a8; }
.cds-color-grey  { background: #9ca3af; }
.cds-color-navy  { background: #1e3a8a; }
.cds-color-brown { background: #8b6f47; }
.cds-color-pink  { background: #f9a8d4; }
.cds-color-red   { background: #dc2626; }
.cds-color-olive { background: #6b7a3e; }

/* Category grid wrapper — single source of truth, used by both our category.twig and the raw OC loop */
.cds-cat-grid {
  display: grid;
  gap: 28px 20px;
  grid-template-columns: repeat(var(--cds-cols, 4), minmax(0, 1fr));
  margin-bottom: 40px;
}
.cds-cat-grid-item { min-width: 0; container-type: inline-size; align-self: start; }

/* Related products on PDP — OC emits an <h3> + .row.row-cols-* we need to normalize */
.cds-related-wrap > h3 { display: none !important; }
.cds-related-wrap > .row,
.cds-related-wrap .row.row-cols-1 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 28px 20px !important;
  margin: 0 !important;
}
@media (max-width: 1199px) { .cds-related-wrap > .row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (max-width: 768px)  { .cds-related-wrap > .row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 10px !important; } }
.cds-related-wrap > .row > .col,
.cds-related-wrap > .row > [class*="col"] {
  min-width: 0 !important;
  flex: unset !important; max-width: none !important; width: auto !important;
  padding: 0 !important; margin: 0 !important;
  align-self: start;
  container-type: inline-size;
}
.cds-related-wrap > .row > .col > .product-thumb { height: 100%; }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   Desktop-first base; overrides only where needed.
   Tiers: 1200 / 991 / 768 / 480
   ============================================================ */
@media (max-width: 1199px) {
  .cds-container, .cds-header-inner, .cds-topbar-inner, .cds-menu-inner { max-width: 100%; }
  .cds-cat-grid { gap: 24px 16px; }
}

@media (max-width: 991px) {
  /* Header collapses to mobile chrome */
  .cds-search { display: none; }
  .cds-mobile-toggle { display: block; }
  .cds-header-inner { padding: 14px 16px; gap: 12px; }
  .cds-menu-wrap { display: none; }
  .cds-logo { font-size: 22px; }
  .cds-header-tools { gap: 16px; }
  .cds-header-tools a, .cds-header-tools button { font-size: 17px; }
  /* Category: sidebar above products */
  .cds-cat-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
  .cds-cat-sidebar { position: static !important; max-height: none !important; border-bottom: 1px solid var(--codeison-border-soft); padding-bottom: 16px; }
  /* Grid: 3 columns on tablet */
  .cds-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  /* PDP stacks */
  .cds-pdp-inner { grid-template-columns: 1fr !important; gap: 32px !important; }
  .cds-pdp-gallery { position: static !important; }
  /* Sections dial down */
  .cds-section { padding: 56px 0; }
  .cds-aplus { padding: 56px 0 64px; }
}

@media (max-width: 768px) {
  body { font-size: 14px; }
  .cds-container, .cds-section-header, .cds-aplus-header, .cds-page-header, .cds-featured-cats, .cds-lookbook, .cds-tabs, .cds-aplus-features { padding-left: 16px; padding-right: 16px; }
  .cds-topbar-inner { padding: 0 16px; }
  .cds-topbar-side { display: none; }
  .cds-topbar { font-size: 12px; padding: 8px 0; }
  .cds-header-inner { padding: 12px 16px; }
  .cds-logo { font-size: 20px; }
  .cds-logo img { max-height: 36px; }
  .cds-hero { min-height: 440px; }
  .cds-hero-content { padding: 32px 16px; }
  .cds-hero-title { font-size: clamp(28px, 8vw, 44px); }
  .cds-hero-subtitle { font-size: 14px; }
  /* USP: 2-col */
  .cds-usp { grid-template-columns: repeat(2, 1fr); padding: 20px 12px; }
  .cds-usp-item { border-right: 0 !important; border-bottom: 1px solid var(--codeison-border-soft); padding: 12px 8px; }
  .cds-usp-item:nth-child(odd) { border-right: 1px solid var(--codeison-border-soft) !important; }
  .cds-usp-item:nth-last-child(-n+2) { border-bottom: 0; }
  .cds-usp-icon { font-size: 20px; }
  .cds-usp-title { font-size: 13px; }
  .cds-usp-desc { font-size: 12px; }
  /* Featured cats: 2-col */
  .cds-featured-cats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cds-featured-cat-label { font-size: 16px; bottom: 16px; left: 16px; right: 16px; }
  /* Lookbook: 2-col gapless */
  .cds-lookbook { grid-template-columns: repeat(2, 1fr); gap: 2px; padding: 0; }
  /* Product grid: 2-col */
  .cds-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px 10px; }
  .product-thumb .content, .cds-thumb-content { padding: 0; }
  .product-thumb .description h4, .cds-thumb-name { font-size: 13px !important; }
  .product-thumb .price, .cds-thumb-price { font-size: 14px !important; }
  .product-thumb form, .cds-thumb-form { flex-wrap: wrap; gap: 4px; }
  .product-thumb form button[data-cds-primary],
  .product-thumb form .button button:first-child,
  .cds-thumb-form button[data-cds-primary] { flex: 1 1 100% !important; }
  .product-thumb form .button button:not(:first-child),
  .product-thumb form button:not([data-cds-primary]):not(:first-child),
  .cds-thumb-form button:not([data-cds-primary]) { flex: 1 1 calc(50% - 2px) !important; width: auto !important; }
  /* Sections */
  .cds-section { padding: 40px 0; }
  .cds-section-title { font-size: clamp(24px, 5vw, 32px) !important; }
  .cds-section-header { margin-bottom: 24px; }
  /* Cat hero */
  .cds-cat-hero { padding: 32px 16px 24px; }
  .cds-cat-title { font-size: clamp(26px, 7vw, 40px); }
  /* Footer compact */
  .cds-footer { padding: 40px 0 0; margin-top: 40px; }
  .cds-footer-cols { gap: 24px; margin-bottom: 24px; }
  .cds-footer-bottom { flex-direction: column; text-align: center; gap: 14px; padding: 20px 0; }
  /* PDP */
  .cds-pdp { padding: 24px 0 40px; }
  .cds-pdp-inner { padding: 0 16px; }
  .cds-pdp-title { font-size: clamp(22px, 5vw, 30px); }
  .cds-pdp-price-new { font-size: 24px; }
  .cds-pdp-atc { padding: 14px 20px; font-size: 13px; }
  /* Aplus */
  .cds-aplus-features { gap: 32px; }
  .cds-aplus-feature-copy { padding: 24px 20px 28px; }
  .cds-aplus-feature-copy h3 { font-size: 22px; }
  /* Tabs */
  .cds-tabs-nav { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; }
  .cds-tabs-nav button { flex: 0 0 auto; padding: 14px 16px; font-size: 12px; }
  /* Shipping cards */
  .cds-shipping-grid { grid-template-columns: 1fr !important; }
  /* Toolbar wraps */
  .cds-cat-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* Popup */
  .cds-popup-inner { padding: 32px 24px; }
  .cds-popup h3 { font-size: 22px; }
  /* Checkout stacks */
  .cds-checkout-layout { grid-template-columns: 1fr !important; }
  .cds-checkout-summary { position: static !important; }
  /* Login */
  .cds-auth-grid { grid-template-columns: 1fr !important; }
  .cds-auth-card { padding: 28px 24px; }
  /* Account tiles */
  .cds-account-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .cds-hero { min-height: 380px; }
  .cds-hero-title { font-size: clamp(24px, 9vw, 36px); }
  /* Single-col for extreme small */
  .cds-featured-cats { grid-template-columns: 1fr; }
  .cds-account-grid { grid-template-columns: 1fr !important; }
  /* Product grid keep 2-col to not waste space, but tighter */
  .cds-cat-grid { gap: 16px 8px; }
  .cds-btn { padding: 12px 20px; font-size: 12px; }
  .cds-btn-lg { padding: 14px 24px; font-size: 13px; }
  .cds-container { padding: 0 14px; }
}

/* ============================================================
   UNIVERSAL OC BOOTSTRAP OVERRIDES
   Auto-style any OC default page (register, contact, account,
   returns, order info) so it matches the Codeison design system
   without needing a bespoke twig override per route.
   ============================================================ */

/* Wrap OC's default `<div class="container">` pages with sensible padding */
body > #container > main > .container,
body > #container > main > div.container,
body > #container > main > #content { padding: 40px 24px 64px !important; max-width: var(--codeison-max) !important; margin: 0 auto !important; }

/* Default page titles */
#content > h1, main .container > h1, main > h1 {
  font-family: var(--codeison-font-display) !important;
  font-size: clamp(28px, 4vw, 40px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 12px !important;
}
#content > h2, main .container h2 {
  font-family: var(--codeison-font-display) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  margin: 28px 0 14px !important;
}

/* OC breadcrumbs */
ul.breadcrumb {
  background: transparent !important;
  padding: 0 0 20px !important;
  margin: 0 !important;
  font-size: 13px !important;
  list-style: none !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 0 !important;
}
ul.breadcrumb li.breadcrumb-item { list-style: none !important; }
ul.breadcrumb li.breadcrumb-item + li.breadcrumb-item::before {
  content: '/' !important;
  color: var(--codeison-text-subtle) !important;
  padding: 0 10px !important;
}
ul.breadcrumb a { color: var(--codeison-text-muted) !important; text-decoration: none; }
ul.breadcrumb a:hover { color: var(--codeison-brand) !important; }
ul.breadcrumb li:last-child a { color: var(--codeison-text) !important; font-weight: 500; }

/* Bootstrap buttons — Codeison pill */
.btn, a.btn, button.btn, input[type="submit"].btn {
  border-radius: var(--codeison-radius-sm) !important;
  padding: 11px 22px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-family: var(--codeison-font-body) !important;
  transition: all var(--codeison-transition) !important;
  line-height: 1.2 !important;
  border-width: 1.5px !important;
}
.btn-primary, a.btn-primary, button.btn-primary,
.btn-success, .btn-info {
  background: var(--codeison-brand) !important;
  border-color: var(--codeison-brand) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-success:hover, .btn-info:hover {
  background: var(--codeison-accent) !important;
  border-color: var(--codeison-accent) !important;
}
.btn-secondary, .btn-default, .btn-light {
  background: #fff !important;
  border-color: var(--codeison-border) !important;
  color: var(--codeison-text) !important;
}
.btn-secondary:hover, .btn-default:hover, .btn-light:hover {
  background: var(--codeison-brand) !important;
  color: #fff !important;
  border-color: var(--codeison-brand) !important;
}
.btn-danger {
  background: transparent !important;
  border-color: #fecaca !important;
  color: #991b1b !important;
}
.btn-danger:hover { background: #fee2e2 !important; }
.btn-link { color: var(--codeison-brand) !important; background: transparent !important; border: 0 !important; padding: 0 !important; text-decoration: underline !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 500 !important; }

/* Form controls */
.form-control, .form-select, textarea.form-control, input.form-control, select.form-select {
  border: 1.5px solid var(--codeison-border) !important;
  border-radius: var(--codeison-radius-sm) !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  font-family: var(--codeison-font-body) !important;
  background-color: #fff !important;
  color: var(--codeison-text) !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--codeison-brand) !important;
  box-shadow: 0 0 0 3px rgba(17,17,17,.06) !important;
  outline: none !important;
}
.form-label, label.form-label, .col-form-label, label.col-form-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--codeison-text) !important;
  margin-bottom: 6px !important;
}
textarea.form-control { min-height: 120px !important; }

/* Form switches (Bootstrap toggle) */
.form-switch .form-check-input {
  height: 22px !important;
  width: 40px !important;
  border-color: var(--codeison-border) !important;
  background-color: var(--codeison-border-soft) !important;
  border-radius: 100px !important;
  cursor: pointer;
}
.form-switch .form-check-input:checked {
  background-color: var(--codeison-brand) !important;
  border-color: var(--codeison-brand) !important;
}

/* Checkboxes/radios */
.form-check-input {
  border: 1.5px solid var(--codeison-border) !important;
  border-radius: 4px !important;
  width: 18px !important;
  height: 18px !important;
}
.form-check-input[type="radio"] { border-radius: 50% !important; }
.form-check-input:checked {
  background-color: var(--codeison-brand) !important;
  border-color: var(--codeison-brand) !important;
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(17,17,17,.06) !important; outline: none !important; }
.form-check-label { font-size: 14px !important; color: var(--codeison-text) !important; cursor: pointer; }

/* Border / rounded panels (used on login/register) */
.border.rounded, .rounded.border, .card {
  border: 1px solid var(--codeison-border-soft) !important;
  border-radius: var(--codeison-radius) !important;
  background: #fff !important;
  box-shadow: none !important;
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--codeison-border-soft) !important;
  font-family: var(--codeison-font-display) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
}

/* Default alerts — wipe harsh Bootstrap */
.alert {
  padding: 14px 18px !important;
  border-radius: var(--codeison-radius) !important;
  font-size: 14px !important;
  border: 0 !important;
}
.alert-success { background: #d1fae5 !important; color: #065f46 !important; }
.alert-info    { background: #dbeafe !important; color: #1e3a8a !important; }
.alert-warning { background: #fef3c7 !important; color: #92400e !important; }
.alert-danger  { background: #fee2e2 !important; color: #991b1b !important; }

/* Nav-tabs */
.nav-tabs {
  border-bottom: 1px solid var(--codeison-border) !important;
  gap: 4px;
}
.nav-tabs .nav-link {
  background: transparent !important;
  border: 0 !important;
  color: var(--codeison-text-muted) !important;
  padding: 14px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
}
.nav-tabs .nav-link:hover { color: var(--codeison-text) !important; }
.nav-tabs .nav-link.active {
  color: var(--codeison-brand) !important;
  border-bottom-color: var(--codeison-brand) !important;
}

/* Pagination */
.pagination .page-link {
  border: 1px solid var(--codeison-border) !important;
  color: var(--codeison-text) !important;
  border-radius: var(--codeison-radius-sm) !important;
  padding: 8px 14px !important;
  min-width: 38px;
  text-align: center;
  font-size: 13px !important;
  background: #fff !important;
}
.pagination .page-link:hover {
  background: var(--codeison-bg-soft) !important;
  color: var(--codeison-brand) !important;
}
.pagination .page-item.active .page-link {
  background: var(--codeison-brand) !important;
  border-color: var(--codeison-brand) !important;
  color: #fff !important;
}

/* Bootstrap list-group (right-rail nav on account pages) */
.list-group { border-radius: var(--codeison-radius) !important; overflow: hidden; border: 1px solid var(--codeison-border-soft) !important; }
.list-group-item {
  border: 0 !important;
  border-bottom: 1px solid var(--codeison-border-soft) !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  color: var(--codeison-text) !important;
  background: #fff !important;
  text-decoration: none !important;
}
.list-group-item:hover { background: var(--codeison-bg-soft) !important; color: var(--codeison-brand) !important; }
.list-group-item.active {
  background: var(--codeison-brand) !important;
  color: #fff !important;
  border-color: var(--codeison-brand) !important;
}

/* Default tables */
.table th, .table td { padding: 12px 14px !important; vertical-align: middle !important; border-color: var(--codeison-border-soft) !important; }
.table thead th {
  background: transparent !important;
  border-bottom: 1px solid var(--codeison-border) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700 !important;
  color: var(--codeison-text-muted) !important;
}
.table-bordered td, .table-bordered th { border: 1px solid var(--codeison-border-soft) !important; }

/* Input group (search, code entry) */
.input-group-text {
  background: var(--codeison-bg-soft) !important;
  border: 1.5px solid var(--codeison-border) !important;
  color: var(--codeison-text-muted) !important;
  font-size: 13px !important;
  border-radius: var(--codeison-radius-sm) !important;
}
.input-group > .form-control, .input-group > .form-select {
  border-radius: var(--codeison-radius-sm) !important;
}

/* ============= NEWSLETTER SECTION ============= */
.cds-newsletter {
  background: #111; color: #fff;
  padding: 80px 24px;
  text-align: center;
}
.cds-newsletter-inner { max-width: 600px; margin: 0 auto; }
.cds-newsletter-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .2em; color: var(--codeison-accent, #d97706);
  margin-bottom: 16px;
}
.cds-newsletter-title {
  font-family: var(--codeison-font-display);
  font-size: clamp(28px, 4vw, 42px); font-weight: 600;
  line-height: 1.15; letter-spacing: -0.02em;
  margin: 0 0 14px; color: #fff;
}
.cds-newsletter-sub {
  font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.6);
  margin: 0 0 32px;
}
.cds-newsletter-form { margin: 0; }
.cds-newsletter-input-wrap {
  display: flex; gap: 0; max-width: 480px; margin: 0 auto;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px; overflow: hidden;
  transition: border-color 200ms;
}
.cds-newsletter-input-wrap:focus-within { border-color: var(--codeison-accent, #d97706); }
.cds-newsletter-input-wrap input {
  flex: 1; background: transparent; border: 0;
  padding: 16px 20px; font-size: 14px; color: #fff;
  font-family: inherit; outline: none;
}
.cds-newsletter-input-wrap input::placeholder { color: rgba(255,255,255,.4); }
.cds-newsletter-input-wrap button {
  background: var(--codeison-accent, #d97706); color: #fff; border: 0;
  padding: 16px 28px; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 200ms;
  font-family: inherit;
}
.cds-newsletter-input-wrap button:hover { background: #b45309; }
.cds-newsletter-msg {
  font-size: 13px; margin: 12px 0 0; min-height: 20px;
}
.cds-newsletter-msg.is-ok { color: #34d399; }
.cds-newsletter-msg.is-err { color: #f87171; }
.cds-newsletter-privacy {
  font-size: 12px; color: rgba(255,255,255,.35); margin: 20px 0 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
@media (max-width: 480px) {
  .cds-newsletter { padding: 56px 20px; }
  .cds-newsletter-input-wrap { flex-direction: column; }
  .cds-newsletter-input-wrap button { justify-content: center; }
}

/* ============= MERCHANT CUSTOM MENU (Menu Builder) ============= */
/* NOTE: .cds-custom-menu is `position: static` (default) so that `.cds-mega-panel`
   inside a child `<li>` resolves its left:0;right:0 against the outer `.cds-menu-wrap`,
   which is `position: relative`. That makes the panel span the full nav width instead
   of being trapped under a single menu link. */
.cds-custom-menu > ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  list-style: none; margin: 0; padding: 0;
  flex-wrap: wrap;
}
/* IMPORTANT: static (not relative) so the mega panel escapes to `.cds-menu-wrap` */
.cds-custom-menu-item { position: static; }
.cds-custom-menu-item > a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 16px 20px;
  color: var(--codeison-text, #111); text-decoration: none;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  transition: color 150ms;
  position: relative;
}
.cds-custom-menu-item > a .cds-mega-caret { font-size: 8px; opacity: .5; transition: transform 220ms; }
.cds-custom-menu-item:hover > a .cds-mega-caret { transform: rotate(180deg); opacity: 1; }
.cds-custom-menu-item > a::after {
  content: ''; position: absolute; left: 20px; right: 20px; bottom: 10px;
  height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: center;
  transition: transform 250ms cubic-bezier(.25,.46,.45,.94);
}
.cds-custom-menu-item:hover > a::after { transform: scaleX(1); }
.cds-custom-menu-item > a:hover { color: var(--codeison-accent, #d97706); }
.cds-custom-menu-item > .cds-submenu {
  position: absolute; top: 100%; left: 0;
  min-width: 200px; padding: 10px 0; margin: 0;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all 180ms;
  z-index: 100;
}
.cds-custom-menu-item:hover > .cds-submenu { opacity: 1; visibility: visible; transform: none; }
.cds-submenu li a { display: block; padding: 8px 18px; color: #374151; text-decoration: none; font-size: 13px; }
.cds-submenu li a:hover { background: #f9fafb; color: var(--codeison-accent, #d97706); }

/* Full-width mega panel for the merchant-custom menu (Menu Builder).
   Positioned against `.cds-menu-wrap` (outermost relative) so it spans the page. */
.cds-custom-menu-item .cds-mega-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 3px solid var(--codeison-accent, #d97706);
  box-shadow: 0 20px 40px rgba(0,0,0,.1);
  padding: 0;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 220ms, visibility 220ms, transform 220ms;
  z-index: 100;
  pointer-events: none;
}
.cds-custom-menu-item.has-mega:hover > .cds-mega-panel,
.cds-custom-menu-item.has-mega:focus-within > .cds-mega-panel {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
/* Inner wrap respects the site container width so columns line up with the rest of the page */
.cds-custom-menu-item .cds-mega-panel .cds-mega-cols {
  max-width: var(--codeison-max, 1400px);
  margin: 0 auto;
  padding: 32px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
}
.cds-custom-menu-item .cds-mega-col strong {
  display: block;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--codeison-text, #111);
  margin-bottom: 14px;
  font-weight: 700;
  font-family: var(--codeison-font-body);
}
.cds-custom-menu-item .cds-mega-col ul { list-style: none; margin: 0; padding: 0; }
.cds-custom-menu-item .cds-mega-col li a {
  display: block;
  padding: 6px 0;
  font-size: 13px;
  color: #6b7280;
  text-decoration: none;
  transition: color 150ms, padding-left 150ms;
}
.cds-custom-menu-item .cds-mega-col li a:hover {
  color: var(--codeison-accent, #d97706);
  padding-left: 4px;
}

/* ============= NEW BLOCKS (v1.3) ============= */
.cds-block { padding: 60px 0; }
.cds-block-title { font-size: 28px; font-weight: 700; margin: 0 0 30px; text-align: center; }
.cds-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* FAQ + Accordion content blocks (scoped to block containers so they don't hijack .cds-accordion in filter sidebar) */
.cds-faq .cds-faq-list, .cds-accordion-block { max-width: 780px; margin: 0 auto; }
.cds-faq-item, .cds-accordion-item { border-bottom: 1px solid #e5e7eb; padding: 16px 0; }
.cds-faq-item summary, .cds-accordion-item summary {
  cursor: pointer; font-weight: 600; padding: 6px 0;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.cds-faq-item summary::after, .cds-accordion-item summary::after {
  content: '+'; font-size: 22px; color: #6b7280; transition: transform 200ms;
}
.cds-faq-item[open] summary::after, .cds-accordion-item[open] summary::after {
  content: '−'; transform: rotate(0);
}
.cds-faq-answer { padding: 10px 0 4px; color: #4b5563; font-size: 14px; line-height: 1.7; }
.cds-accordion-item > .cds-accordion-body { padding: 10px 0 4px; color: #4b5563; font-size: 14px; line-height: 1.7; }

/* Tabs */
.cds-tab-bar { display: flex; gap: 4px; border-bottom: 2px solid #e5e7eb; margin-bottom: 20px; }
.cds-tab-btn {
  border: 0; background: transparent; padding: 12px 20px;
  font-size: 14px; font-weight: 600; color: #6b7280; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 150ms;
}
.cds-tab-btn.is-active { color: var(--codeison-accent, #d97706); border-bottom-color: currentColor; }
.cds-tab-panel { padding: 20px 0; color: #374151; line-height: 1.8; }

/* Parallax */
.cds-parallax {
  position: relative;
  background-size: cover; background-position: center; background-attachment: fixed;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.cds-parallax-overlay { position: absolute; inset: 0; }
.cds-parallax-inner { position: relative; z-index: 2; text-align: center; padding: 40px 24px; }
.cds-parallax-inner h2 { font-size: 44px; font-weight: 700; margin: 0 0 12px; }
.cds-parallax-inner p { font-size: 18px; opacity: .9; margin: 0 0 20px; }
@media (max-width: 768px) { .cds-parallax { background-attachment: scroll; } }

/* Map */
.cds-map-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; }
@media (max-width: 768px) { .cds-map-grid { grid-template-columns: 1fr; } }
.cds-map-info h2 { margin-top: 0; }
.cds-map-info address { font-style: normal; line-height: 1.7; margin-bottom: 16px; }
.cds-map-frame { border-radius: 8px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.06); }

/* Promo */
.cds-promo-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 360px; }
.cds-promo--full .cds-promo-inner { grid-template-columns: 1fr; }
.cds-promo-image { background-size: cover; background-position: center; }
.cds-promo-copy { padding: 60px 48px; display: flex; flex-direction: column; justify-content: center; }
.cds-promo-copy .cds-eyebrow { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; opacity: .8; margin-bottom: 8px; }
.cds-promo-copy h2 { font-size: 40px; font-weight: 700; margin: 0 0 12px; }
.cds-promo-copy p { font-size: 16px; opacity: .9; margin: 0 0 20px; }
.cds-promo-copy .btn { align-self: flex-start; }
@media (max-width: 768px) { .cds-promo-inner { grid-template-columns: 1fr; } .cds-promo-image { min-height: 220px; } .cds-promo-copy { padding: 40px 24px; } }

/* Marquee */
.cds-marquee { overflow: hidden; padding: 14px 0; }
.cds-marquee-track {
  display: flex; gap: 40px; white-space: nowrap;
  animation: cds-marquee-scroll linear infinite;
}
.cds-marquee-item { font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.cds-marquee-item em { font-style: normal; margin-left: 14px; opacity: .6; }
@keyframes cds-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Video */
.cds-video-wrap { position: relative; background: #000; border-radius: 8px; overflow: hidden; }
.cds-video-wrap iframe, .cds-video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cds-ratio-16x9 { aspect-ratio: 16/9; }
.cds-ratio-4x3  { aspect-ratio: 4/3;  }
.cds-ratio-1x1  { aspect-ratio: 1/1;  }
.cds-video-placeholder { padding: 60px; text-align: center; color: #9ca3af; }

/* Deal of the day */
.cds-deal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 768px) { .cds-deal-grid { grid-template-columns: 1fr; } }
.cds-deal-copy .cds-eyebrow { display: inline-block; padding: 4px 10px; background: var(--codeison-accent, #d97706); color: #fff; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; border-radius: 3px; margin-bottom: 10px; }
.cds-deal-copy h2 { font-size: 36px; margin: 0 0 10px; }
.cds-deal-countdown { display: flex; gap: 10px; margin-top: 20px; }
.cds-deal-countdown div { background: #111; color: #fff; border-radius: 8px; padding: 12px 14px; text-align: center; min-width: 64px; }
.cds-deal-countdown strong { display: block; font-size: 24px; font-weight: 700; }
.cds-deal-countdown small { font-size: 11px; opacity: .7; letter-spacing: .1em; text-transform: uppercase; }
.cds-deal-product img { width: 100%; border-radius: 8px; aspect-ratio: 3/4; object-fit: cover; }
.cds-deal-price { font-size: 20px; margin: 8px 0 16px; }
.cds-deal-price del { color: #9ca3af; margin-right: 8px; }

/* Mega features */
.cds-mega-grid { display: grid; grid-template-columns: repeat(var(--cds-cols, 3), 1fr); gap: 24px; }
@media (max-width: 768px) { .cds-mega-grid { grid-template-columns: 1fr 1fr; } }
.cds-mega-tile { text-align: center; padding: 28px 20px; background: #fafafa; border-radius: 8px; }
.cds-mega-tile i { font-size: 32px; color: var(--codeison-accent, #d97706); margin-bottom: 12px; }
.cds-mega-tile h3 { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.cds-mega-tile p { font-size: 13px; color: #6b7280; margin: 0; line-height: 1.6; }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.cds-contact-hero {
  padding: 72px 0 48px;
  text-align: center;
  background: linear-gradient(180deg, var(--codeison-bg-soft) 0%, #fff 100%);
  border-bottom: 1px solid var(--codeison-border-soft);
}
.cds-contact-hero-title {
  font-family: var(--codeison-font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 8px 0 14px;
}
.cds-contact-hero-sub {
  max-width: 600px; margin: 0 auto;
  color: var(--codeison-text-muted); font-size: 16px; line-height: 1.6;
}

.cds-contact-strip {
  padding: 40px 0;
  border-bottom: 1px solid var(--codeison-border-soft);
}
.cds-contact-strip-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.cds-contact-card-mini {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--codeison-border);
  border-radius: var(--codeison-radius);
  background: #fff;
  text-decoration: none; color: inherit;
  transition: all var(--codeison-transition);
}
.cds-contact-card-mini:hover {
  border-color: var(--codeison-text);
  box-shadow: var(--codeison-shadow);
  transform: translateY(-2px);
}
.cds-contact-card-mini-icon {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--codeison-bg-soft);
  color: var(--codeison-text);
  font-size: 18px;
}
.cds-contact-card-mini-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--codeison-text-muted); font-weight: 600;
  margin-bottom: 2px;
}
.cds-contact-card-mini-value {
  font-size: 14px; font-weight: 500; color: var(--codeison-text);
  line-height: 1.4;
}
@media (max-width: 991px) { .cds-contact-strip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cds-contact-strip-grid { grid-template-columns: 1fr; } }

.cds-contact-grid {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px;
  margin-top: 48px;
}
@media (max-width: 991px) { .cds-contact-grid { grid-template-columns: 1fr; gap: 32px; } }

.cds-contact-form-wrap {
  background: #fff;
  border: 1px solid var(--codeison-border);
  border-radius: var(--codeison-radius-lg);
  padding: 40px;
}
@media (max-width: 768px) { .cds-contact-form-wrap { padding: 28px 20px; } }
.cds-contact-form-head { margin-bottom: 28px; }
.cds-contact-form-title {
  font-family: var(--codeison-font-display);
  font-size: 32px; font-weight: 500;
  letter-spacing: -0.01em; margin: 0 0 8px;
}
.cds-contact-form-sub {
  font-size: 14px; color: var(--codeison-text-muted); margin: 0;
}
.cds-contact-form textarea { resize: vertical; min-height: 140px; }
.cds-contact-form-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px; border-top: 1px solid var(--codeison-border-soft);
  margin-top: 8px;
}
.cds-contact-privacy {
  margin: 0; font-size: 12px; color: var(--codeison-text-muted);
}
.cds-contact-privacy i { color: var(--codeison-accent); margin-right: 4px; }

.cds-contact-side { display: flex; flex-direction: column; gap: 20px; }
.cds-contact-store-card {
  background: var(--codeison-bg-soft);
  border-radius: var(--codeison-radius-lg);
  padding: 32px 28px;
}
.cds-contact-side-title {
  font-family: var(--codeison-font-display);
  font-size: 22px; font-weight: 500; margin: 0 0 16px;
  display: flex; align-items: center; gap: 10px;
}
.cds-contact-side-title i { color: var(--codeison-accent); font-size: 18px; }
.cds-contact-store-img {
  width: 100%; max-width: 140px; border-radius: var(--codeison-radius);
  margin-bottom: 14px;
}
.cds-contact-store-name {
  display: block; font-size: 17px; font-weight: 600; margin-bottom: 4px;
}
.cds-contact-store-addr {
  font-style: normal; color: var(--codeison-text-muted); margin: 0 0 12px;
  font-size: 14px; line-height: 1.6;
}
.cds-contact-store-meta {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  margin: 20px 0 0; padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.cds-contact-store-meta dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--codeison-text-muted); font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 2px;
}
.cds-contact-store-meta dt i { color: var(--codeison-text); }
.cds-contact-store-meta dd { margin: 0; font-size: 14px; color: var(--codeison-text); line-height: 1.5; }
.cds-contact-store-meta dd a { color: var(--codeison-text); font-weight: 500; }
.cds-contact-store-meta dd a:hover { color: var(--codeison-accent); }

.cds-contact-map {
  height: 280px; border-radius: var(--codeison-radius-lg);
  overflow: hidden; border: 1px solid var(--codeison-border);
}
.cds-contact-social {
  background: #111; color: #fff;
  border-radius: var(--codeison-radius-lg);
  padding: 24px 28px;
}
.cds-contact-social-label {
  margin: 0 0 12px; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.1em; color: rgba(255,255,255,.7);
}
.cds-contact-social-links { display: flex; gap: 12px; }
.cds-contact-social-links a {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08); color: #fff;
  font-size: 16px;
  transition: all var(--codeison-transition);
}
.cds-contact-social-links a:hover {
  background: var(--codeison-accent);
  transform: translateY(-2px);
}

.cds-contact-locations {
  margin-top: 72px;
  padding-top: 56px;
  border-top: 1px solid var(--codeison-border-soft);
}
.cds-contact-locations-head { text-align: center; margin-bottom: 32px; }
.cds-contact-locations-title {
  font-family: var(--codeison-font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500; letter-spacing: -0.01em; margin: 6px 0 0;
}
.cds-contact-locations-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
}
.cds-contact-location-card {
  background: #fff; border: 1px solid var(--codeison-border);
  border-radius: var(--codeison-radius);
  overflow: hidden;
  transition: all var(--codeison-transition);
}
.cds-contact-location-card:hover {
  border-color: var(--codeison-text);
  box-shadow: var(--codeison-shadow);
}
.cds-contact-location-img {
  width: 100%; height: 160px; object-fit: cover;
}
.cds-contact-location-body { padding: 20px; }
.cds-contact-location-name {
  display: block; font-size: 17px; font-weight: 600;
  margin-bottom: 6px; font-family: var(--codeison-font-display);
}
.cds-contact-location-addr {
  font-style: normal; color: var(--codeison-text-muted);
  font-size: 13px; line-height: 1.5; margin: 0 0 10px;
}
.cds-contact-location-row {
  margin: 6px 0; font-size: 13px; color: var(--codeison-text);
  display: flex; align-items: center; gap: 8px;
}
.cds-contact-location-row i { color: var(--codeison-accent); width: 14px; }
.cds-contact-location-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding-top: 12px;
  border-top: 1px solid var(--codeison-border-soft);
  font-size: 13px; font-weight: 600; color: var(--codeison-text);
}
.cds-contact-location-link:hover { color: var(--codeison-accent); }

.cds-contact-faq-strip {
  margin-top: 64px;
  background: linear-gradient(135deg, var(--codeison-bg-soft), #fff);
  border: 1px solid var(--codeison-border);
  border-radius: var(--codeison-radius-lg);
  padding: 40px;
}
.cds-contact-faq-strip-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
.cds-contact-faq-title {
  font-family: var(--codeison-font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500; letter-spacing: -0.01em; margin: 4px 0 8px;
}
.cds-contact-faq-sub { margin: 0; color: var(--codeison-text-muted); font-size: 14px; }
.cds-contact-faq-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #111;
  color: #fff !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 6px;
  border: 2px solid #111;
  transition: all 180ms ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.cds-contact-faq-btn:hover {
  background: var(--codeison-accent);
  border-color: var(--codeison-accent);
  color: #fff !important;
  transform: translateX(2px);
}
.cds-contact-faq-btn i { font-size: 12px; }

/* ============================================================
   COMPARE PAGE
   ============================================================ */
.cds-compare-wrap {
  overflow-x: auto;
  border: 1px solid var(--codeison-border);
  border-radius: var(--codeison-radius-lg);
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.cds-compare-table {
  width: 100%; min-width: 800px;
  border-collapse: collapse;
  font-size: 14px;
}
.cds-compare-table thead th {
  background: var(--codeison-bg-soft);
  padding: 14px 16px;
  text-align: left;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 700; color: var(--codeison-text-muted);
  border-bottom: 1px solid var(--codeison-border);
}
.cds-compare-table tbody th {
  width: 180px;
  padding: 16px; text-align: left;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600; color: var(--codeison-text-muted);
  background: var(--codeison-bg-soft);
  border-bottom: 1px solid var(--codeison-border-soft);
  vertical-align: top;
}
.cds-compare-table tbody td {
  padding: 16px;
  border-bottom: 1px solid var(--codeison-border-soft);
  border-left: 1px solid var(--codeison-border-soft);
  color: var(--codeison-text); vertical-align: top;
}
.cds-compare-product-head {
  padding: 24px 16px !important;
  text-align: center !important;
  border-bottom: 1px solid var(--codeison-border) !important;
}
.cds-compare-thumb {
  display: block;
  width: 140px; height: 180px;
  margin: 0 auto 12px;
  object-fit: cover;
  border-radius: var(--codeison-radius-sm);
  background: var(--codeison-bg-soft);
}
.cds-compare-name {
  display: block; font-family: var(--codeison-font-display);
  font-size: 16px; font-weight: 600; color: var(--codeison-text);
  margin-bottom: 6px; line-height: 1.3;
}
.cds-compare-name:hover { color: var(--codeison-accent); }
.cds-compare-price { font-size: 15px; font-weight: 600; color: var(--codeison-text); }
.cds-compare-price .price-old { color: var(--codeison-text-muted); text-decoration: line-through; font-weight: 400; margin-right: 6px; }
.cds-compare-price .price-new { color: #e11d48; }
.cds-compare-rating { color: #f59e0b; font-size: 13px; }
.cds-compare-rating .cds-compare-reviews { display: block; color: var(--codeison-text-muted); font-size: 12px; margin-top: 4px; }
.cds-compare-desc {
  max-width: 260px;
  font-size: 13px; line-height: 1.5; color: var(--codeison-text-muted);
}
.cds-compare-actions {
  display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  padding: 16px !important;
}
.cds-compare-actions .cds-btn {
  width: 100%; justify-content: center;
}

/* ============================================================
   WISHLIST — tighter grid + cleaner card
   ============================================================ */
.cds-wishlist-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 20px; margin-bottom: 20px;
  border-bottom: 1px solid var(--codeison-border-soft);
  flex-wrap: wrap; gap: 12px;
}
.cds-wishlist-count {
  font-family: var(--codeison-font-display);
  font-size: 20px; font-weight: 500;
  color: var(--codeison-text);
}
.cds-wishlist-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}
.cds-wishlist-card {
  position: relative;
  background: #fff; border: 1px solid var(--codeison-border);
  border-radius: var(--codeison-radius);
  overflow: hidden;
  transition: all var(--codeison-transition);
  display: flex; flex-direction: column;
}
.cds-wishlist-card:hover {
  border-color: var(--codeison-text);
  box-shadow: var(--codeison-shadow);
  transform: translateY(-2px);
}
.cds-wishlist-img {
  display: block; aspect-ratio: 3/4;
  background: var(--codeison-bg-soft);
  overflow: hidden;
}
.cds-wishlist-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 500ms var(--codeison-ease);
}
.cds-wishlist-card:hover .cds-wishlist-img img { transform: scale(1.05); }
.cds-wishlist-body {
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.cds-wishlist-name {
  font-family: var(--codeison-font-display);
  font-size: 16px; font-weight: 500;
  color: var(--codeison-text); line-height: 1.3;
  text-decoration: none;
}
.cds-wishlist-name:hover { color: var(--codeison-accent); }
.cds-wishlist-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--codeison-text-muted);
  flex-wrap: wrap;
}
.cds-wishlist-stock {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.cds-wishlist-stock--in { color: #16a34a; }
.cds-wishlist-stock--out { color: #b45309; }
.cds-wishlist-price {
  font-size: 16px; font-weight: 600; color: var(--codeison-text);
  font-variant-numeric: tabular-nums;
}
.cds-wishlist-price-old {
  color: var(--codeison-text-muted); text-decoration: line-through;
  font-weight: 400; font-size: 13px; margin-right: 6px;
}
.cds-wishlist-actions {
  display: flex; gap: 6px; margin-top: auto; padding-top: 10px;
}
.cds-wishlist-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; border-radius: var(--codeison-radius-sm);
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  border: 1px solid var(--codeison-border); background: #fff;
  color: var(--codeison-text); cursor: pointer;
  transition: all var(--codeison-transition);
  text-decoration: none;
}
.cds-wishlist-btn--primary {
  background: var(--codeison-text); color: #fff;
  border-color: var(--codeison-text); flex: 1;
}
.cds-wishlist-btn--primary:hover {
  background: #000; color: #fff; transform: translateY(-1px);
}
.cds-wishlist-btn--remove {
  flex: 0 0 auto; padding: 10px 12px; color: var(--codeison-text-muted);
}
.cds-wishlist-btn--remove:hover {
  background: #fef2f2; color: #e11d48; border-color: #fecaca;
}
.cds-wishlist-form { flex: 1; display: flex; margin: 0; }
.cds-wishlist-form button { width: 100%; }
@media (max-width: 480px) {
  .cds-wishlist-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cds-wishlist-body { padding: 10px 12px 12px; gap: 6px; }
  .cds-wishlist-name { font-size: 14px; }
}