/* ============================================================
   FLANDERS SCIENTIFIC INC. — STOREFRONT
   Premium Ecommerce Theme

   Color Tokens (Monochromatic):
     --bg-primary:    #0a0a0a
     --bg-card:       #111111
     --bg-surface:    #1a1a1a
     --bg-white:      #ffffff  (product cards/images)
     --accent:        #ffffff  (monochromatic — white)
     --text-primary:  #f5f5f5
     --text-secondary:#a1a1aa
     --text-on-light: #1a1a1a  (dark text on white cards)
     --border:        #27272a
   ============================================================ */

/* ----------------------------------------------------------
   0. CUSTOM PROPERTIES
   ---------------------------------------------------------- */
:root {
  /* backgrounds */
  --bg-primary: #0a0a0a;
  --bg-card: #111111;
  --bg-surface: #1a1a1a;
  --bg-elevated: #222222;

  /* product / light areas — for product cards, images, showcases */
  --bg-white: #ffffff;
  --bg-light: #f5f5f5;
  --bg-light-hover: #ebebeb;

  /* accent — monochromatic, no color */
  --accent: #ffffff;
  --accent-hover: #d4d4d8;
  --accent-light: rgba(255, 255, 255, 0.08);
  --accent-glow: rgba(255, 255, 255, 0.12);

  /* premium — same monochromatic */
  --premium: #d4d4d8;
  --premium-hover: #a1a1aa;
  --premium-light: rgba(255, 255, 255, 0.06);

  /* text */
  --text-primary: #f5f5f5;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --text-inverse: #0a0a0a;
  --text-on-light: #1a1a1a;
  --text-on-light-secondary: #52525b;

  /* borders */
  --border: #27272a;
  --border-light: #3f3f46;

  /* status — keep functional colors for badges */
  --success: #22c55e;
  --success-bg: rgba(34, 197, 94, 0.1);
  --warning: #eab308;
  --warning-bg: rgba(234, 179, 8, 0.1);
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.1);
  --info: #a1a1aa;
  --info-bg: rgba(161, 161, 170, 0.1);

  /* radii */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
  --shadow-glow: none;

  /* timing */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration: 0.2s;
  --duration-md: 0.3s;
  --duration-lg: 0.5s;

  /* typography */
  --font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas,
    monospace;

  /* layout */
  --container-max: 1320px;
  --header-height: 72px;
  --sidebar-width: 280px;
  --nav-sub-bar-h: 56px;
}

/* ----------------------------------------------------------
   1. RESET & BASE
   ---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

img {
  max-width: 100%;
  height: auto;
  /* display: block; */
}

a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}

a:hover {
  color: var(--accent-hover);
}

/* Body-text links: blue, no underline. The global `a {}` rule above is
   muted-grey for chrome (nav, header, cards, footer); inline links inside
   body copy on storefront pages need a different treatment so they're
   visibly distinguishable from black body text.
   Selectors:
     .site-prose   — wrap body content of any hand-written .php static
                     page (lut-converter, compare, etc.) in
                     <div class="site-prose"> and inline links go blue.
     .cb-rich-text — CMS-authored content rendered through render_blocks().
   :not(.btn) excludes anchors styled as buttons. */
.site-prose a:not(.btn),
.cb-rich-text a:not(.btn),
.cb-table a:not(.btn),
.cb-calguide__table a:not(.btn),
.product-description a:not(.btn),
.product-feature-block__body a:not(.btn) {
  color: #2563eb;
  text-decoration: none;
}
.site-prose a:not(.btn):hover,
.cb-rich-text a:not(.btn):hover,
.cb-table a:not(.btn):hover,
.cb-calguide__table a:not(.btn):hover,
.product-description a:not(.btn):hover,
.product-feature-block__body a:not(.btn):hover {
  color: #1d4ed8;
}

/* Remove number input spinners globally */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

ul,
ol {
  list-style: none;
}

/* ...but admin-authored rich-text content opts BACK IN to real list markers.
   The reset above intentionally strips bullets site-wide (menus, nav, footer,
   cards all rely on that), so instead of killing it globally we restore proper
   bullets/numbers only inside content containers — product & bundle
   descriptions, feature blocks, CMS rich-text, and static prose. Menus etc.
   stay clean. Add a container here if a new rich-text surface needs list markers. */
.product-description ul,
.product-feature-block__body ul,
.cb-rich-text ul,
.site-prose ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 0.75rem 0;
}
.product-description ol,
.product-feature-block__body ol,
.cb-rich-text ol,
.site-prose ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin: 0.75rem 0;
}
.product-description li,
.product-feature-block__body li,
.cb-rich-text li,
.site-prose li {
  margin: 0.25rem 0;
}
/* Nested lists get the conventional marker progression + no double top margin. */
.product-description ul ul,
.product-feature-block__body ul ul,
.cb-rich-text ul ul,
.site-prose ul ul {
  list-style: circle;
  margin: 0.25rem 0;
}

::selection {
  background: #52525b;
  color: #fff;
}

:focus-visible {
  outline: 2px solid #71717a;
  outline-offset: 2px;
}

/* ----------------------------------------------------------
   2. UTILITY / LAYOUT
   ---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 24px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content link — hidden until focused by keyboard. First thing in
   the DOM so Tab from page load lands on it. WCAG 2.4.1 bypass blocks. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 9999;
  padding: 10px 16px;
  background: var(--accent, #3b82f6);
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.18s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}
#main-content:focus { outline: none; }

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-sm {
  gap: 8px;
}

.gap-md {
  gap: 16px;
}

.gap-lg {
  gap: 24px;
}

.gap-xl {
  gap: 32px;
}

.text-center {
  text-align: center;
}
/* Block-level <img> ignores text-align on its parent (storefront's global
   `img { display: block }` rule). Pair text-center with auto side margins so
   wrapping a `<p class="text-center"><img></p>` actually centers the image. */
.text-center > img,
.text-center img { margin-left: auto; margin-right: auto; }

/* ----------------------------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

.section-title {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 32px;
  position: relative;
}

.text-muted {
  color: var(--text-secondary);
}

.text-small {
  font-size: 0.875rem;
}

.price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.price--large {
  font-size: 1.75rem;
}

.price--original {
  text-decoration: line-through;
  color: var(--text-muted);
  font-weight: 400;
}

/* ----------------------------------------------------------
   4. BUTTONS
   ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--radius);
  transition: all var(--duration) var(--ease);
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(255, 255, 255, 0.1),
    transparent
  );
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}

.btn:hover::after {
  opacity: 1;
}

.btn:active {
  transform: scale(0.98);
}

/* primary — white on dark */
.btn-primary {
  background: #ffffff;
  color: #0a0a0a;
  font-weight: 600;
}

.btn-primary:hover {
  background: #e4e4e7;
  color: #0a0a0a;
}

/* secondary */
.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-light);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

/* premium / featured — subtle grey */
.btn-premium {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
}

.btn-premium:hover {
  background: var(--border-light);
  color: var(--text-primary);
}

/* outline */
.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.btn-outline:hover {
  background: var(--accent);
  color: #fff;
}

/* danger */
.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-danger:hover {
  background: #dc2626;
  color: #fff;
}

/* sizes */
.btn-sm {
  padding: 8px 16px;
  font-size: 0.8125rem;
  border-radius: var(--radius-sm);
}

.btn-lg {
  padding: 16px 32px;
  font-size: 1.0625rem;
  border-radius: var(--radius-lg);
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius);
}

.btn-icon.btn-sm {
  width: 32px;
  height: 32px;
}

.btn:disabled,
.btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-block {
  display: flex;
  width: 100%;
}

/* ----------------------------------------------------------
   5. FORMS & INPUTS
   ---------------------------------------------------------- */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.form-label--required::after {
  content: " *";
  color: var(--danger);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: 0.9375rem;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
  appearance: none;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--border-light);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.form-input::placeholder {
  color: var(--text-muted);
}

.form-input--error {
  border-color: var(--danger);
}

.form-input--error:focus {
  box-shadow: 0 0 0 3px var(--danger-bg);
}

.form-error {
  font-size: 0.8125rem;
  color: var(--danger);
  margin-top: 4px;
}

.form-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Password requirement checklist — paired with [data-pw-checklist-for]
   on the <ul> and assets/js/password-checklist.js. Two-column grid so
   six items fit beneath the input without taking a wall of vertical
   space. Each <li> starts muted with an open circle; .is-valid toggles
   green text + a filled circle with a white check (SVG data URL). */
.pw-checklist {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem 1.25rem;
  font-size: 0.825rem;
  color: var(--text-muted);
}
.pw-checklist li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.3;
  transition: color 0.18s ease;
}
.pw-checklist li::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.pw-checklist li.is-valid {
  color: #16a34a;
}
.pw-checklist li.is-valid::before {
  background-color: #16a34a;
  border-color: #16a34a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 8 7 12 13 4'/%3E%3C/svg%3E");
}

@media (max-width: 480px) {
  .pw-checklist { grid-template-columns: 1fr; }
}

/* ── Info tip (the "(i)" next to a form label) ────────────────────
   Pair an inline circle-i icon with a hover-revealed bubble. Keyboard
   accessible: span has tabindex="0" so :focus also reveals the bubble.
   Markup:
     <span class="info-tip" tabindex="0" role="button" aria-label="…">
       <svg class="info-tip__icon">…</svg>
       <span class="info-tip__bubble" role="tooltip">Why we ask…</span>
     </span>
*/
.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
  width: 16px;
  height: 16px;
  color: var(--text-muted, #6e7681);
  cursor: help;
  outline: none;
  vertical-align: middle;
}
.info-tip:hover,
.info-tip:focus-visible {
  color: var(--text-primary, #0a0a0a);
}
.info-tip__icon {
  width: 16px;
  height: 16px;
  display: block;
}
.info-tip__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  width: max-content;
  max-width: 260px;
  background: #111;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.005em;
  text-transform: none;
  padding: 0.5rem 0.7rem;
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 50;
}
.info-tip__bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #111;
}
.info-tip:hover .info-tip__bubble,
.info-tip:focus .info-tip__bubble,
.info-tip:focus-within .info-tip__bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 520px) {
  /* On narrow screens, anchor the bubble's right edge to the icon so
     it doesn't overflow off the left/right viewport edge. */
  .info-tip__bubble {
    left: auto;
    right: -4px;
    transform: translateY(2px);
    max-width: 240px;
  }
  .info-tip__bubble::after {
    left: auto;
    right: 8px;
    transform: none;
  }
  .info-tip:hover .info-tip__bubble,
  .info-tip:focus .info-tip__bubble,
  .info-tip:focus-within .info-tip__bubble {
    transform: translateY(0);
  }
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a1a1aa' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-checkbox,
.form-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9375rem;
}

.form-checkbox input,
.form-radio input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ----------------------------------------------------------
   6. HEADER / NAVBAR
   ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-height);
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--duration-md) var(--ease);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 32px;
}

/* logo */
.header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-logo img {
  height: 32px;
  width: auto;
}

.header-logo img {
  height: 36px;
  width: auto;
}

/* navigation */
.header-nav {
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
}

.header-nav__link {
  padding: 8px 16px;
  font-size: 0.9375rem;
  font-weight: 450;
  color: var(--text-secondary);
  border-radius: var(--radius);
  transition: color var(--duration) var(--ease),
              background var(--duration) var(--ease);
}

.header-nav__link:hover,
.header-nav__link--active {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.header-nav__link--active {
  color: var(--accent);
}

/* header category nav buttons */
.header-cat__link {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 100%;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;                /* explicit so <button> and <a> top-level items align identically */
  color: var(--text-secondary);
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  transition: color var(--duration) var(--ease);
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.header-cat__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: #ffffff;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.header-cat__link:hover,
.header-cat__link--active {
  color: var(--text-primary);
}

.header-cat__link:hover::after,
.header-cat__link--active::after {
  transform: scaleX(1);
}

/* search flyout — slides down from header */
.search-flyout {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
}

.search-flyout--open {
  max-height: 80px;
  opacity: 1;
}

.search-flyout__form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.search-flyout__icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.search-flyout__input {
  flex: 1;
  padding: 10px 0;
  font-size: 1.125rem;
  color: var(--text-primary);
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
}

.search-flyout__input::placeholder {
  color: var(--text-muted);
}

.search-flyout__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: var(--radius);
  flex-shrink: 0;
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
}

.search-flyout__close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

/* search bar — hidden, using flyout instead */
.header-search {
  display: none;
}

.header-search__input {
  width: 100%;
  padding: 10px 16px 10px 40px;
  font-size: 0.875rem;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease),
              width var(--duration-md) var(--ease);
}

.header-search__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

.header-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.header-search__shortcut {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6875rem;
  color: var(--text-muted);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-family: var(--font-mono);
}

/* header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.header-actions__btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  border-radius: var(--radius);
  transition: color var(--duration) var(--ease),
              background var(--duration) var(--ease);
}

.header-actions__btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

/* Cart icon empty/filled state — outline when empty, filled when it has items
   (toggled by .header-cart--has-items). Replaces the count badge. */
.header-cart__icon--filled { display: none; }
.header-cart--has-items .header-cart__icon--empty { display: none; }
.header-cart--has-items .header-cart__icon--filled { display: inline-block; }

/* cart badge (legacy — no longer rendered) */
.cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  color: #fff;
  background: var(--accent);
  border-radius: var(--radius-sm);
  pointer-events: none;
  animation: badge-pop 0.3s var(--ease-spring);
}

@keyframes badge-pop {
  0% { transform: scale(0); }
  100% { transform: scale(1); }
}

/* account dropdown */
.account-dropdown {
  position: relative;
}

.account-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--duration) var(--ease),
              transform var(--duration) var(--ease),
              visibility var(--duration) var(--ease);
}

.account-dropdown:hover .account-dropdown__menu,
.account-dropdown:focus-within .account-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.account-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  border-radius: var(--radius);
  transition: background var(--duration) var(--ease),
              color var(--duration) var(--ease);
}

.account-dropdown__item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.account-dropdown__divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}

/* mobile menu toggle */
.mobile-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  border-radius: var(--radius);
}

/* Hamburger → X morph (the "spin" variant, ported from the 2017 FSI news page). */
.mobile-menu-toggle__box {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 16px;
}
.mobile-menu-toggle__inner {
  top: 50%;
  margin-top: -1px;
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition-property: transform;
}
.mobile-menu-toggle__inner,
.mobile-menu-toggle__inner::before,
.mobile-menu-toggle__inner::after {
  position: absolute;
  width: 22px;
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
  display: block;
}
.mobile-menu-toggle__inner::before,
.mobile-menu-toggle__inner::after {
  content: "";
}
.mobile-menu-toggle__inner::before {
  top: -7px;
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.mobile-menu-toggle__inner::after {
  bottom: -7px;
  transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.mobile-menu-toggle.is-active .mobile-menu-toggle__inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.mobile-menu-toggle.is-active .mobile-menu-toggle__inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.mobile-menu-toggle.is-active .mobile-menu-toggle__inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* ----------------------------------------------------------
   7. HERO BANNER
   ---------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 520px;
  overflow: hidden;
  background: linear-gradient(135deg, #0a0a0a 0%, #161618 40%, #1a1a1c 60%, #0a0a0a 100%);
}

.hero--large {
  min-height: 640px;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.5;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 10, 10, 0.95) 0%,
    rgba(10, 10, 10, 0.7) 50%,
    rgba(10, 10, 10, 0.4) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  padding: 64px 0;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 16px;
}

.hero__title {
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 20px;
}

.hero__description {
  font-size: 1.125rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 520px;
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* animated gradient accent line */
.hero__accent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #71717a,
    #d4d4d8,
    transparent
  );
  background-size: 200% 100%;
  animation: accent-sweep 4s ease infinite;
}

@keyframes accent-sweep {
  0%, 100% { background-position: -200% 0; }
  50% { background-position: 200% 0; }
}

/* ----------------------------------------------------------
   8. BREADCRUMBS
   ---------------------------------------------------------- */
.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 16px 0;
  font-size: 0.8125rem;
}

.breadcrumbs__item {
  color: var(--text-muted);
  transition: color var(--duration) var(--ease);
}

.breadcrumbs__item:hover {
  color: var(--accent);
}

.breadcrumbs__separator {
  color: var(--text-muted);
  margin: 0 4px;
  user-select: none;
}

.breadcrumbs__current {
  color: var(--text-secondary);
  font-weight: 500;
}

/* ----------------------------------------------------------
   9. PRODUCT GRID
   ---------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}


/* ----------------------------------------------------------
   10. PRODUCT CARD
   ---------------------------------------------------------- */
.product-card {
  position: relative;
  border-radius: 6px;
  border: 2px solid var(--border);
  background: var(--bg-card);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}

.product-card-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.product-card:hover {
  transform: translateY(-1px);
  border-color: var(--text-secondary);
}

/* image area */
.product-card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #ffffff;
  overflow: hidden;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* badges on card image */
.product-card__badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

/* quick-add overlay */
.product-card__quick-add {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  transform: translateY(100%);
  opacity: 0;
  transition: transform var(--duration-md) var(--ease),
              opacity var(--duration-md) var(--ease);
}

.product-card:hover .product-card__quick-add {
  transform: translateY(0);
  opacity: 1;
}

/* card body — flex column so we can pin price-row to the bottom regardless
   of title length, giving every card a consistent price baseline. */
.product-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.product-card__category {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.product-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--duration) var(--ease);
  /* Reserve two lines worth so single-line titles don't collapse the body —
     the stock + price rows below stay at the same vertical position across cards. */
  min-height: calc(1rem * 1.3 * 2);
}

.product-card:hover .product-card__title {
  color: var(--text-primary);
}

.product-card__title a {
  color: inherit;
}

.product-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Stock / availability text — sub-grey to mute against the title + price. */
.product-card__stock {
  font-size: 0.85rem;
  color: #52525b;
  line-height: 1.3;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  /* Auto top margin pushes the price row to the bottom of the body so every
     card's price sits at the same baseline regardless of title height. */
  margin-top: auto;
}

.product-card__price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
}

.product-card__price--sale {
  color: var(--danger);
}

.product-card__price--original {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: line-through;
}

/* Bundle card "Save $X" pill — green to flag the discount, sized to sit
   inline in the price row next to the bundle price. */
.product-card__bundle-savings {
  font-size: 0.75rem;
  font-weight: 600;
  color: #15803d;
  background: #dcfce7;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* Bundle composite imagery inside a normal product-card image slot. The grid
   fills the 4:3 image area so bundle cards line up with product cards. Two
   items render side-by-side; three or four render as a 2×2 quad. */
.product-card__image .bundle-card-grid {
  display: grid;
  gap: 2px;
  width: 100%;
  height: 100%;
  /* No outer padding — the grey background only shows through the gap, so the
     dividing lines read as a crosshair between the 4 cells, not a frame. */
  background: var(--border, #d4d4d8);
}
.product-card__image .bundle-card-grid--2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}
.product-card__image .bundle-card-grid--3,
.product-card__image .bundle-card-grid--4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.bundle-card-grid__cell {
  position: relative;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card__image .bundle-card-grid__cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}
.bundle-card-grid__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Featured card variant — purple/blue accent */
.product-card--featured {
  border-color: rgba(139, 92, 246, 0.3);
}

.product-card--featured:hover {
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.15);
}

.product-card--featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #8b5cf6, #3b82f6);
  z-index: 2;
}

/* ----------------------------------------------------------
   11. STOCK STATUS BADGES
   ---------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.badge--in-stock {
  color: var(--success);
  background: var(--success-bg);
}

.badge--low-stock {
  color: var(--warning);
  background: var(--warning-bg);
}

.badge--out-of-stock {
  color: var(--danger);
  background: var(--danger-bg);
}

.badge--preorder {
  color: var(--info);
  background: var(--info-bg);
}

.badge--sale {
  color: #fff;
  background: var(--danger);
}

.badge--new {
  color: #fff;
  background: var(--accent);
}

.badge--premium {
  color: #fff;
  background: linear-gradient(135deg, var(--premium), var(--accent));
}

/* dot indicator for inline status */
.stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stock-dot--in-stock {
  background: var(--success);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

.stock-dot--low-stock {
  background: var(--warning);
  box-shadow: 0 0 6px rgba(234, 179, 8, 0.4);
}

.stock-dot--out-of-stock {
  background: var(--danger);
}

.stock-dot--preorder {
  background: var(--info);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
}

/* ----------------------------------------------------------
   12. PRODUCT BANNER (full-width hero image)
   ---------------------------------------------------------- */
.product-banner {
  width: 100%;
  max-height: 480px;
  overflow: hidden;
  line-height: 0;
}

.product-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Admin edit flyout tab */
.admin-edit-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 8px 14px;
  background: var(--text-primary, #111);
  color: #fff;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 6px 0 0 6px;
  transition: padding-right 0.2s ease;
  opacity: 0.7;
}
.admin-edit-tab:hover {
  opacity: 1;
  padding-right: 18px;
  color: #fff;
}
.admin-edit-tab svg {
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   12. PRODUCT LAYOUT
   ---------------------------------------------------------- */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 40px 0;
}

/* gallery */
.product-gallery {
  min-width: 0;
  position: sticky;
  top: calc(var(--header-height) + 24px);
  align-self: start;
}

.product-gallery__main {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #ffffff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 12px;
}

.product-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 24px;
  transition: transform var(--duration-md) var(--ease);
}

.product-gallery__main:hover img {
  transform: none;
}

/* ── Bundle composite gallery ─────────────────────────────────────────
   When a bundle has no explicit gallery image, the hero renders a 2×2
   (or 1×2 for two-item bundles) composite of the included items' primary
   images. .bundle-gallery-grid lives ON the same node as
   .product-gallery__main, so we override the descendant img rules with
   higher specificity. */
.product-gallery__main.bundle-gallery-grid {
  display: grid;
  gap: 2px;
  /* No outer padding — grey shows only through the gap, so the dividers read
     as a crosshair between cells, not a frame. The container's border-radius +
     overflow:hidden rounds the outer corners. */
  background: var(--border, #d4d4d8);
}
.product-gallery__main.bundle-gallery-grid--2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}
.product-gallery__main.bundle-gallery-grid--3,
.product-gallery__main.bundle-gallery-grid--4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.bundle-gallery-grid__cell {
  position: relative;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-gallery__main.bundle-gallery-grid .bundle-gallery-grid__cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  transition: none;
}
.bundle-gallery-grid__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.product-gallery__thumbs-wrap {
  position: relative;
}
.product-gallery__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.product-gallery__thumbs::-webkit-scrollbar {
  display: none;
}
.product-gallery__thumbs-nav {
  position: absolute;
  top: 0;
  bottom: 4px; /* matches .product-gallery__thumbs padding-bottom */
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a1a;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  padding: 0 0 2px 0;
  transition: background var(--duration) var(--ease);
}
.product-gallery__thumbs-nav:hover {
  background: #ffffff;
}
.product-gallery__thumbs-nav[hidden] {
  display: none;
}
.product-gallery__thumbs-nav--prev {
  left: 0;
  border-right: 1px solid var(--border);
}
.product-gallery__thumbs-nav--next {
  right: 0;
  border-left: 1px solid var(--border);
}

.product-gallery__thumb {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 72px;
  height: 72px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease),
              opacity var(--duration) var(--ease);
}

.product-gallery__thumb:hover {
  border-color: var(--border-light);
}

.product-gallery__thumb--active {
  border-color: var(--accent);
}

.product-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

/* product info panel */
.product-info {
  padding-top: 8px;
}

/* Sparse products (no variants / add-ons / bundles) leave a tall empty gap
   below the Add to Cart row beside the much-taller gallery. Vertically center
   the info column to balance the page. Desktop two-column layout only — on the
   stacked mobile layout the column height equals its content, so centering is
   a no-op there anyway, but we scope it to be safe. */
@media (min-width: 768px) {
  .product-detail--balanced .product-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
  }
}

.product-info__eyebrow {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 8px;
}

.product-info__title {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 2px;
  line-height: 1.1;
}

/* Availability text — matches title font, tight spacing under title */
.product-info .product-availability {
  margin-bottom: 1.5rem;
}
.product-info .availability-text {
  font-family: inherit;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  font-weight: 600;
}
.product-info .availability-text--in-stock,
.product-info .availability-text--low-stock,
.product-info .availability-text--out-of-stock,
.product-info .availability-text--preorder,
.product-info .availability-text--discontinued {
  color: var(--text-secondary);
}

.product-info__excerpt {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 28px;
}

.product-price-note {
  margin: -0.75rem 0 1.25rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* quantity selector */
.qty-selector {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-surface);
}

.qty-selector__btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  color: var(--text-secondary);
  background: transparent;
  transition: background var(--duration) var(--ease),
              color var(--duration) var(--ease);
}

.qty-selector__btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.qty-selector__input {
  width: 52px;
  height: 40px;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  -moz-appearance: textfield;
}

.qty-selector__input::-webkit-outer-spin-button,
.qty-selector__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* add-to-cart area */
.product-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 32px;
}

.product-actions .btn-primary {
  flex: 1;
}

/* full-width add to cart */
.btn-add-to-cart {
  width: 100%;
  background: var(--text-primary);
  color: #fff;
  border: none;
}
.btn-add-to-cart:hover {
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.15);
}
.btn-add-to-cart:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* variant selectors */
.product-variant-selectors {
  margin-bottom: 1.5rem;
}
.variant-selector-group {
  margin-bottom: 0.75rem;
}
.variant-selector-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.variant-selector-select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text-primary);
  appearance: auto;
  cursor: pointer;
}
.variant-selector-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 0,0,0), 0.1);
}

/* button-style variant selectors (pill buttons) */
.variant-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.variant-btn {
  padding: 8px 20px;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  background: #fff;
  color: #1a1a1a;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.4;
}
.variant-btn:hover {
  border-color: #0a0a0a;
}
.variant-btn--selected {
  background: #0a0a0a;
  color: #fff;
  border-color: #0a0a0a;
}

/* swatch-style variant selectors (round, colored circles) */
.variant-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.variant-swatch {
  /* override .variant-btn pill defaults */
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #d4d4d8;
  background-clip: padding-box;
  position: relative;
  overflow: visible;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.variant-swatch:hover {
  transform: scale(1.08);
  border-color: #0a0a0a;
}
.variant-swatch.variant-btn--selected {
  /* override the dark fill from .variant-btn--selected — swatches keep the
     hex_color background and signal selection via outer ring + inner stroke. */
  background-color: inherit;
  border-color: #fff;
  box-shadow: 0 0 0 2px #0a0a0a;
}
.variant-swatch__label {
  /* visually hide the color name; assistive tech still reads aria-label */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* addon note below price */
.addon-note {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* availability text (plain, no badge) */
.availability-text {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.availability-text--in-stock {
  color: var(--success, #16a34a);
}
.availability-text--low-stock {
  color: var(--warning, #ca8a04);
}
.availability-text--out-of-stock {
  color: var(--danger, #dc2626);
}
.availability-text--preorder {
  color: var(--info, #2563eb);
}
.availability-text--discontinued {
  color: var(--text-muted);
}

/* short description below columns */
.product-short-description {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  max-width: 800px;
}

/* key specs mini-table */
.product-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 32px;
}

.product-highlights__item {
  padding: 14px 16px;
  background: var(--bg-card);
}

.product-highlights__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.product-highlights__value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* product tabs */
.product-tabs {
  margin-top: 40px;
}
/* Full-bleed top + bottom rules drawn by sibling <hr> elements in the
   markup (placed before __nav and between __nav and the panels). Negative
   margins extend the line to the viewport edges; body has overflow-x:hidden
   so this never triggers a horizontal scrollbar. */
.product-tabs__rule {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.product-tabs__nav {
  display: flex;
  gap: 0;
  overflow-x: auto;
}

.product-tabs__tab {
  padding: 16px 24px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
  white-space: nowrap;
  cursor: pointer;
  background: none;
}

.product-tabs__tab:hover {
  color: var(--text-primary);
}

.product-tabs__tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* External "Compare" link styled as a tab (monitors only) — an <a>, so kill the
   underline. */
.product-tabs__tab--link {
  text-decoration: none;
}

.product-tabs__panel {
  /* No bottom padding — the docked buy bar provides the visual closure
     beneath the last visible tab content. Otherwise this 32px showed as
     a white band between the tab content and the footer dock. */
  padding: 0;
  display: none;
}

/* Specs + videos need breathing room below the tab rule; features doesn't
   (feature blocks already carry their own section padding).
   Bottom padding handles products without a docked accessory strip — those
   pages have no permanent footer dock, so without this the tab content butts
   against the site footer. The `.product-page--has-strip` rules below win
   on specificity and replace this with the larger strip-clearance value. */
#tab-specs.product-tabs__panel,
#tab-videos.product-tabs__panel {
  padding-top: 24px;
  padding-bottom: 3rem;
}

.product-tabs__panel--active {
  display: block;
}

.product-tabs__panel p {
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 16px;
}

/* product description */
.product-description {
  font-size: 1rem;
  line-height: 1.8;
}

.product-description p { margin-bottom: 1rem; }
.product-description h2, .product-description h3 { margin: 1.5rem 0 0.75rem; }
.product-description img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1rem 0; }
.product-description ul, .product-description ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.product-description li { margin-bottom: 0.25rem; }

/* Editor-pasted tables in prose contexts (product descriptions, feature
   block bodies, hand-written static pages). Browser default for td/th is
   0 padding which renders WYSIWYG tables squished on the front-end.
   Scoped so the rule never reaches .specs-table/.cart-table/.orders-table/
   .data-table or admin tables, which manage their own padding. */
.product-description table,
.product-feature-block__body table,
.site-prose table {
  margin: 1rem 0;
}
.product-description th,
.product-description td,
.product-feature-block__body th,
.product-feature-block__body td,
.site-prose th,
.site-prose td {
  padding: 10px 14px;
  vertical-align: top;
}

/* ── Bundle & Save chip (product buy panel) ──────────────────────────────
   Sits directly below the Add to Cart row. Vertical stack:
   thumbs row → bundle name → price + strikethrough → SAVE pill. */
.bundle-chips {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 1.25rem 0 0;
}
.bundle-chip {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.bundle-chip:hover {
    border-color: var(--border-light, var(--text-secondary));
    background: var(--bg-surface, #f5f5f5);
}
.bundle-chip__thumbs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    flex: 0 0 auto;
}
.bundle-chip__thumb {
    width: 48px;
    height: 48px;
    border-radius: 3px;
    background: #ffffff;
    border: 1px solid var(--border);
    overflow: hidden;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bundle-chip__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}
.bundle-chip__plus {
    align-self: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    flex: 0 0 auto;
}
.bundle-chip__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    text-align: right;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}
.bundle-chip__name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.bundle-chip__price-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.bundle-chip__price {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}
.bundle-chip__compare {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text-muted);
    text-decoration: line-through;
    margin-right: 6px;
}
.bundle-chip__savings {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #16a34a;
    background: rgba(22,163,74,0.1);
    padding: 3px 8px;
    border-radius: 3px;
    white-space: nowrap;
}

@media (max-width: 1199.98px) {
    .bundle-chip__thumbs {
        display: grid;
        grid-template-columns: repeat(2, 48px);
        grid-auto-rows: 48px;
        gap: 4px;
    }
    .bundle-chip__plus {
        display: none;
    }
}

@media (max-width: 600px) {
    /* Addon row "SHIPS IN 1 WEEK" was wrapping to 3 lines because mono +
       0.11em letter-spacing made it wider than the narrow body column.
       Lock it to one line and tighten the spacing. */
    .addon-row__stock {
        white-space: nowrap;
        letter-spacing: 0.06em;
    }
}

@media (max-width: 479px) {
    /* When .product-actions stacks (column at this breakpoint) the qty stepper
       goes full-width. Make it three EQUAL segments (− | qty | +) so the
       buttons don't balloon around a tiny fixed number field. Taller for touch. */
    .qty-selector {
        width: 100%;
    }
    .qty-selector__btn {
        flex: 1;
        height: 48px;
        font-size: 1.25rem;
    }
    .qty-selector__input {
        flex: 1;
        width: auto;
        height: 48px;
        font-size: 1.0625rem;
    }
}

/* specs table — grouped tech specs, full width */
.specs-table {
  width: 100%;
  padding-top: 2em;
  padding-bottom: 4em;
}

/* Section heading — larger, sentence-case, high-contrast (was a small muted
   all-caps label). Flush-left so spec labels align beneath it. */
.specs-table__group-heading {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 2.75rem 0 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.3;
}

.specs-table__group-heading:first-child {
  margin-top: 0;
}

.specs-table__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 0.5rem;
}

.specs-table__row--even,
.specs-table__row--odd {
  background: transparent;
}

.specs-table__label,
.specs-table__value {
  padding: 22px 0 0;
  font-size: 0.9375rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

/* Label column — flush-left under the heading, a touch wider so longer spec
   names wrap less, medium weight and gentler than the value text. */
.specs-table__label {
  width: 34%;
  padding-right: 28px;
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 1.4;
}

.specs-table__value {
  color: var(--text-primary);
  line-height: 1.65;
}

/* Format specifics — framerate / qualifier detail in parentheses renders
   smaller + muted, like the old site's <span class="framerate">. Wrap just
   that detail in <span class="fr">…</span> inside the spec value. */
.specs-table__value .fr {
  font-size: 0.78em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Same small-type for sub-lines in the label column (e.g. SMPTE-425M-AB's
   "- Level A & Level B supported" rows). Wraps freely — no nowrap. */
.specs-table__label .fr {
  font-size: 0.82em;
  color: var(--text-muted);
}

.specs-table__value a {
  color: #2563eb;
  text-decoration: none;
}
.specs-table__value a:hover {
  color: #1d4ed8;
}

.specs-table__value img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 0.5rem 0;
}

/* ----------------------------------------------------------
   13. CATEGORY SIDEBAR
   ---------------------------------------------------------- */
.shop-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  gap: 32px;
  padding: 32px 0;
}

.category-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  align-self: start;
  max-height: calc(100vh - var(--header-height) - 48px);
  overflow-y: auto;
}

.category-sidebar::-webkit-scrollbar {
  width: 4px;
}

.category-sidebar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.sidebar-section {
  margin-bottom: 28px;
}

.sidebar-section__title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.sidebar-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  border-radius: var(--radius);
  transition: background var(--duration) var(--ease),
              color var(--duration) var(--ease);
}

.sidebar-nav__item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}

.sidebar-nav__item--active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 500;
}

.sidebar-nav__item--parent {
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 8px;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sidebar-nav__item--child {
  padding-left: 20px;
  font-size: 0.8125rem;
}

.sidebar-nav__count {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-surface);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  min-width: 24px;
  text-align: center;
}

/* price range filter */
.price-range {
  display: flex;
  gap: 8px;
  align-items: center;
}

.price-range__input {
  flex: 1;
  padding: 8px 10px;
  font-size: 0.8125rem;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.price-range__separator {
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* filter tags */
.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.8125rem;
  color: var(--accent);
  background: var(--accent-light);
  border-radius: var(--radius-sm);
}

.filter-tag__remove {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--accent);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--duration) var(--ease);
}

.filter-tag__remove:hover {
  opacity: 1;
}

/* ----------------------------------------------------------
   13b. STOREFRONT CONTENT — LIGHT THEME (white bg, dark text)
   Applied to <main> so all page content between header and
   footer is light. Header/footer stay dark.
   ---------------------------------------------------------- */
main {
  --bg-primary: #ffffff;
  --bg-card: #ffffff;
  --bg-surface: #f5f5f5;
  --bg-elevated: #ebebeb;
  --text-primary: #0a0a0a;
  --text-secondary: #52525b;
  --text-muted: #71717a;
  --border: #e4e4e7;
  --border-light: #d4d4d8;
  --accent: #0a0a0a;
  --accent-hover: #27272a;
  --accent-light: rgba(0, 0, 0, 0.06);
  background: #ffffff;
  color: #1a1a1a;
}

main a { color: #52525b; }
main a:hover { color: #0a0a0a; }

/* Primary button on light pages: dark bg, white text */
main .btn-primary {
  background: #0a0a0a;
  color: #ffffff;
}
main .btn-primary:hover {
  background: #27272a;
  color: #ffffff;
}

/* Secondary button on light pages */
main .btn-secondary {
  border-color: #d4d4d8;
  color: #1a1a1a;
}
main .btn-secondary:hover {
  background: #f5f5f5;
  border-color: #a1a1aa;
}

/* Description text */
main .product-description,
main .product-tabs__panel { color: #2f2f2f; }

/* Badges on light bg */
main .badge--in-stock { background: rgba(34,197,94,0.1); color: #16a34a; }
main .badge--low-stock { background: rgba(234,179,8,0.1); color: #ca8a04; }
main .badge--out-of-stock { background: rgba(239,68,68,0.1); color: #dc2626; }
main .badge--preorder { background: rgba(99,102,241,0.1); color: #4f46e5; }

/* Bundle cards keep dark look */
main .bundle-card {
  --bg-card: #111111;
  --text-primary: #f5f5f5;
  --text-muted: #71717a;
  --border: #27272a;
}

/* ----------------------------------------------------------
   14. BUNDLE CARDS
   ---------------------------------------------------------- */
.bundle-card {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.bundle-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--premium), var(--accent));
}

.bundle-card__header {
  padding: 24px 24px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.bundle-card__title {
  font-size: 1.25rem;
  font-weight: 700;
}

.bundle-card__savings {
  display: inline-flex;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--success);
  background: var(--success-bg);
  border-radius: var(--radius-sm);
}

.bundle-card__items {
  padding: 0 24px;
}

.bundle-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.bundle-item__image {
  width: 56px;
  height: 56px;
  background: var(--bg-surface);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}

.bundle-item__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.bundle-item__name {
  flex: 1;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.bundle-item__price {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
}

.bundle-card__footer {
  padding: 20px 24px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.bundle-card__total {
  display: flex;
  flex-direction: column;
}

.bundle-card__total-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.bundle-card__total-price {
  font-size: 1.5rem;
  font-weight: 700;
}

/* In-grid variant — bundle cards sitting in /products?category=… grid next to
   product cards. Tighter padding + smaller thumbs so the card fits a similar
   visual weight to a product card, with all 4 item rows still visible.
   White surface + the SAME outline and hover treatment as .product-card so
   the two card types feel like one set. Override the dark-theme cascade from
   `main .bundle-card` by re-binding the card vars on the element. */
main .bundle-card.bundle-card--in-grid,
.bundle-card.bundle-card--in-grid {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #111111;
  text-decoration: none;
  border: 2px solid var(--border);
  border-radius: 6px;
  transition: transform 0.2s ease, border-color 0.2s ease;
  --bg-card: #ffffff;
  --text-primary: #111111;
  --text-secondary: #3f3f46;
  --text-muted: #6b7280;
  --border: #e5e7eb;
}
.bundle-card.bundle-card--in-grid:hover {
  transform: translateY(-1px);
  border-color: #9ca3af;
  box-shadow: none;
}
/* Kill the gradient stripe that `main .bundle-card::before` paints across the
   top — looks like a dark shadow under the white in-grid surface. */
.bundle-card.bundle-card--in-grid::before {
  display: none;
}
.bundle-card--in-grid .bundle-card__header {
  padding: 16px 18px 12px;
  gap: 10px;
}
.bundle-card--in-grid .bundle-card__title {
  font-size: 1rem;
  line-height: 1.3;
}
.bundle-card--in-grid .bundle-card__savings {
  padding: 4px 10px;
  font-size: 0.72rem;
  white-space: nowrap;
  align-self: flex-start;
  color: #166534;
  background: rgba(34, 197, 94, 0.18);
}
.bundle-card--in-grid .bundle-card__items {
  padding: 0 18px;
}
.bundle-card--in-grid .bundle-item {
  padding: 8px 0;
  gap: 10px;
}
.bundle-card--in-grid .bundle-item__image {
  width: 40px;
  height: 40px;
  background: #ffffff;
}
.bundle-card--in-grid .bundle-item__image img {
  padding: 3px;
}
.bundle-card--in-grid .bundle-item__name,
.bundle-card--in-grid .bundle-item__price {
  font-size: 0.78rem;
}
.bundle-card--in-grid .bundle-item--more {
  border-top: 1px solid var(--border);
  padding: 8px 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bundle-card--in-grid .bundle-card__footer {
  padding: 14px 18px 18px;
  margin-top: auto;
}
.bundle-card--in-grid .bundle-card__footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.bundle-card--in-grid .bundle-card__total-label {
  font-size: 0.68rem;
}
.bundle-card--in-grid .bundle-card__total-price {
  font-size: 1.2rem;
}

/* ----------------------------------------------------------
   15. SHOPPING CART
   ---------------------------------------------------------- */
.cart-page {
  padding: 40px 0;
}

.cart-page__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  align-items: start;
}

.cart-table {
  width: 100%;
  border-collapse: collapse;
}

.cart-table thead th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.cart-table tbody tr {
  border-bottom: 1px solid var(--border);
}

.cart-table td {
  padding: 20px 0;
  vertical-align: middle;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cart-item__image {
  width: 80px;
  height: 80px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}

.cart-item__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.cart-item__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-item__name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.9375rem;
}

.cart-item__sku {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.cart-item__remove {
  font-size: 0.8125rem;
  color: var(--danger);
  cursor: pointer;
  transition: opacity var(--duration) var(--ease);
}

.cart-item__remove:hover {
  opacity: 0.7;
}

.cart-table .cart-price {
  font-weight: 600;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.cart-table .cart-subtotal {
  font-weight: 700;
  font-size: 1rem;
}

/* Itemized cart table (order confirmation): right-align the TOTAL column so
   the line totals stack vertically with the right-aligned totals block below.
   Give the Item column the extra width so Total reaches the right edge, and
   add a column gutter so SKU/Qty/Price/Total don't squish together (base
   .cart-table cells have no horizontal padding). */
.cart-table--itemized th:last-child,
.cart-table--itemized td.cart-subtotal,
.cart-table--itemized td.cart-price,
.cart-table--itemized td[data-label="Discount"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cart-table--itemized th:first-child,
.cart-table--itemized td:first-child {
  width: 100%;
}
.cart-table--itemized th + th,
.cart-table--itemized td + td {
  padding-left: 40px;
}

/* cart summary sidebar */
.cart-summary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

.cart-summary__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.9375rem;
}

.cart-summary__row--label {
  color: var(--text-secondary);
}

.cart-summary__row--value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cart-summary__divider {
  height: 1px;
  background: var(--border);
  margin: 12px 0;
}

.cart-summary__total {
  display: flex;
  justify-content: space-between;
  padding: 16px 0 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.cart-summary__actions {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-summary__promo {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.cart-summary__promo-label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.cart-summary__promo-row {
  display: flex;
  gap: 8px;
}
.cart-summary__promo-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  font-size: 0.9rem;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.cart-summary__promo-btn {
  flex: 0 0 auto;
}
.cart-summary__promo-error {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--danger, #ef4444);
}

/* ── Price-editable products ──────────────────────────────────────────────
   Products marked is_price_editable swap the static price for an input the
   customer types into. Visible on the product page, on cart lines, in the
   flyout, and on the checkout summary — same affordance everywhere. */

.product-price-editable {
  background: var(--bg-surface, #f5f5f5);
  border: 1px solid var(--border, #e4e4e7);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.product-price-editable__label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.product-price-editable__row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
}
.product-price-editable__currency {
  font-weight: 600;
  color: var(--text-secondary);
}
.product-price-editable__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1.1rem;
  color: var(--text-primary);
  padding: 4px 0;
}
.product-price-editable__hint {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Inline price editor used on cart lines + checkout summary. */
.cart-price-editable {
  display: inline-block;
  margin: 0;
}
.cart-price-editable__row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
}
.cart-price-editable__currency {
  font-weight: 600;
  color: var(--text-secondary);
}
.cart-price-editable__input {
  width: 90px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.95rem;
  color: var(--text-primary);
  text-align: right;
  padding: 2px 0;
}
.cart-price-editable__btn {
  background: var(--accent, #0a0a0a);
  color: #ffffff;
  border: 0;
  border-radius: 3px;
  padding: 3px 8px;
  font-size: 0.78rem;
  cursor: pointer;
}
.cart-price-editable__btn:hover { opacity: 0.85; }

/* Flyout editable price — same compact footprint as the static
   price div, no Update button (the input commits on blur / Enter). */
.cart-flyout-item__price-editable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  padding: 3px 6px;
  width: max-content;
}
.cart-flyout-item__price-editable-currency {
  color: #52525b;
  font-weight: 600;
  font-size: 0.9rem;
}
.cart-flyout-item__price-editable-input {
  width: 70px;
  border: none;
  outline: none;
  background: transparent;
  color: #0a0a0a;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: right;
  padding: 1px 0;
  /* Hide the number-input spinner so the box stays tight. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.cart-flyout-item__price-editable-input::-webkit-outer-spin-button,
.cart-flyout-item__price-editable-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


.cart-summary__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 12px;
}

/* ----------------------------------------------------------
   16. CHECKOUT
   ---------------------------------------------------------- */
.checkout-page {
  padding: 40px 0;
}

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 48px;
  align-items: start;
}

/* checkout steps */
.checkout-steps {
  display: flex;
  gap: 0;
  margin-bottom: 40px;
  position: relative;
}

.checkout-steps::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 32px;
  right: 32px;
  height: 2px;
  background: var(--border);
}

.checkout-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}

.checkout-step__number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 2px solid var(--border);
  border-radius: 50%;
  z-index: 1;
  transition: all var(--duration-md) var(--ease);
}

.checkout-step--active .checkout-step__number {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.checkout-step--completed .checkout-step__number {
  color: #fff;
  background: var(--success);
  border-color: var(--success);
}

.checkout-step__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
}

.checkout-step--active .checkout-step__label {
  color: var(--text-primary);
}

.checkout-step--completed .checkout-step__label {
  color: var(--success);
}

/* checkout form sections */
.checkout-section {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 12px 12px 0;
  margin-bottom: 24px;
}

.checkout-section__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 20px;
}

/* ----------------------------------------------------------
   Checkout stepper (3-stage: Address → Delivery → Payment)
   ---------------------------------------------------------- */
.checkout-stage {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  overflow: hidden;
}

.checkout-stage__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg-soft, #f4f4f4);
}

.checkout-stage--current > .checkout-stage__header {
  background: var(--bg-soft-strong, #ececec);
}

.checkout-stage--locked > .checkout-stage__header {
  opacity: 0.55;
}

.checkout-stage__num {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
}

.checkout-stage__head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.checkout-stage__title {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  margin: 0;
}

.checkout-stage__summary {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 4px 0 0;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.checkout-stage__summary-block {
  min-width: 0;
}

.checkout-stage__summary-block > strong {
  display: block;
  color: var(--text);
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 2px;
}

.checkout-stage__summary-rows {
  line-height: 1.4;
}

.checkout-stage__edit {
  flex: 0 0 auto;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.checkout-stage__edit:hover { text-decoration: underline; }

.checkout-stage__body {
  padding: 20px 20px 8px;
  /* Animate the collapse so picking a shipping method / advancing stages
     doesn't snap content out of view. max-height + padding both animate;
     the upper bound is generous so tall stages still fully reveal. */
  max-height: 6000px;
  overflow: hidden;
  transition: max-height .32s ease-out, padding .32s ease-out;
}

.checkout-stage--locked .checkout-stage__body,
.checkout-stage--collapsed .checkout-stage__body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* ── FLATTENED CHECKOUT (2026-07-08) ─────────────────────────────────────────
   Render the 4-step wizard as one continuous page. The stage DOM + all the
   payment/rate/tax JS stay intact — we only neutralize the step chrome (numbers,
   Edit + advance buttons, collapsed summaries) and force every stage body open,
   so nothing collapses or gates as you fill it out. The .checkout-section cards
   inside supply the visual grouping; the stage title stays as a group heading.
   This kills the collapse/advance jerkiness at the source. */
.checkout-stage { background: transparent; border-radius: 0; margin-bottom: 0; overflow: visible; }
/* Stage headers are hidden entirely — after the section reorder their titles
   ("Address Information" over the Delivery toggle, etc.) no longer match their
   contents. Each .checkout-section carries its own title instead. */
.checkout-stage__header { display: none !important; }
.checkout-stage__num,
.checkout-stage__edit,
.checkout-stage__summary,
.checkout-stage__advance { display: none !important; }
.checkout-stage__body,
.checkout-stage--current .checkout-stage__body,
.checkout-stage--locked .checkout-stage__body,
.checkout-stage--collapsed .checkout-stage__body {
  max-height: none !important;
  overflow: visible;
  padding: 0 !important;
  transition: none;
}

/* "+ Add an address" text link (logged-in shipping address) + its modal, and
   tighter delivery→content spacing so the address/pickup sits snug under the
   toggle (kills the label + the gap Andrew flagged). */
.checkout-addr-add {
  display: inline-block; background: none; border: 0; padding: 2px 0 0;
  color: #2f6bff; font-weight: 600; font-size: 0.9rem; cursor: pointer; font-family: inherit;
}
.checkout-addr-add:hover { text-decoration: underline; }
.checkout-addr-modal { max-width: 520px; width: calc(100% - 32px); padding: 0; }
.checkout-addr-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--border); }
.checkout-addr-modal__head h3 { margin: 0; font-size: 1.1rem; }
.checkout-addr-modal__x { background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 4px; }
.checkout-addr-modal__body { padding: 1.1rem 1.25rem; max-height: 62vh; overflow: auto; }
.checkout-addr-modal__body .form-group { margin-bottom: 0.6rem; }
.checkout-addr-modal__foot { display: flex; gap: 0.75rem; justify-content: flex-end; padding: 0.9rem 1.25rem; border-top: 1px solid var(--border); }
/* ── DELIVERY DETAILS: one coordinated collapse (2026-07-08 rebuild) ──────────
   The pickup/own options, shipping address, and shipping method are SIBLING panes
   inside #delivery-details, directly under the Ship|Pickup toggle. They toggle
   instantly via .dd-hide (display:none) while the container's height eases as ONE
   unit (JS animateDeliveryDetails) — so Ship↔Pickup moves in a single direction
   instead of three sections collapsing different ways (pickup used to open DOWN
   inside the card while the address rolled UP outside it: Andrew's root cause).

   display:flow-root makes the container a BFC so child margins are contained and
   the JS height measurement is exact. Every gap in the delivery area is 0.5rem so
   the whole block reads as one consistently-grouped unit. */
.dd-hide { display: none !important; }
.checkout-page #delivery-details { display: flow-root; margin: 0; }
/* One 0.5rem gap everywhere: toggle→details, pane→pane, choice→choice. */
.checkout-page .checkout-section--delivery { margin-bottom: 0.5rem !important; }
.checkout-page #delivery-details > #delivery-alt-pane,
.checkout-page #delivery-details > #shipping-address-section,
.checkout-page #delivery-details > #shipping-method-section { margin: 0 0 0.5rem !important; }
/* Carrier sub-form snaps open; the container height animation carries the reveal
   (a nested max-height transition would desync the height measurement). */
.checkout-page #delivery-details .choice-card__body,
.checkout-page #delivery-details .choice-card.is-open > .choice-card__body { transition: none !important; }

/* ── COMPACT CHECKOUT (2026-07-08) ───────────────────────────────────────────
   Tighten the flattened page so it reads as one quick form (Shopify density)
   instead of a big multi-screen process. Everything is scoped under
   .checkout-page so no other form on the site changes. */
.checkout-page { padding: 20px 0 40px; }
.checkout-layout { gap: 32px; }
.checkout-page .checkout-section { padding: 14px 16px; margin-bottom: 12px; }
.checkout-page .checkout-section__title { font-size: 1rem; margin-bottom: 10px; }
.checkout-page .form-group { margin-bottom: 10px; }
.checkout-page .form-label { margin-bottom: 3px; font-size: 0.8rem; }
.checkout-page .form-input,
.checkout-page .form-select,
.checkout-page .form-textarea { padding: 8px 10px; }
/* Delivery toggle: shorter buttons */
.checkout-page .delivery-tab { padding: 0.6rem 0.75rem; }
.checkout-page .delivery-tab svg { width: 18px; height: 18px; }
/* Saved-address radio cards carry INLINE padding/margins — override with
   !important, scoped to the address sections so payment/delivery cards keep
   their own sizing. */
#shipping-address-section .form-radio,
#billing_fields .form-radio,
#shipping-method-section .rates-list .form-radio {
  padding: 0.6rem 0.85rem !important;
  margin-bottom: 0.45rem !important;
}
/* A collapsed section must fully disappear. With the section padding I added,
   a collapsed .checkout-collapse (e.g. Shipping Address/Method while Pickup is
   selected) was leaving a padding sliver that clipped the title. The wizard
   never showed this because it hid the whole stage. */
.checkout-page .checkout-section.checkout-collapse.is-collapsed {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Alt-pane choice-card gap (Pickup In Store ↔ Provide My Own): same 0.5rem as
   every other delivery-area gap. The pane's own top/bottom margin is set by the
   unified #delivery-details > * rule above. */
.checkout-page #delivery-alt-pane .choice-card { margin-bottom: 0.5rem; }
.checkout-page #delivery-alt-pane .choice-card:last-child { margin-bottom: 0; }

/* Generic collapse utility for stage-internal sections that toggle
   visibility (shipping address, shipping method, billing fields, the
   delivery alt-pane). Replaces inline display:none/'' snaps so toggling
   delivery method / "same as shipping" eases instead of jumping. */
.checkout-collapse {
  max-height: 4000px;
  overflow: hidden;
  transition: max-height .3s ease-out, opacity .22s ease-out, margin .3s ease-out;
}
.checkout-collapse.is-collapsed {
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
  pointer-events: none;
}

/* (The old per-section delivery collapses — #shipping-address/method-section and
   #delivery-alt-pane each animating their own max-height via animateCollapse —
   were retired 2026-07-08. They now sit inside #delivery-details and share ONE
   height animation as a single unit; see the DELIVERY DETAILS block above.) */

/* Guest checkout: top "returning customer" CTA + the inline login box revealed
   when the entered email matches an existing account. */
.checkout-login-cta {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.checkout-login-cta a { font-weight: 600; }
.checkout-inline-login__box {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
}
/* When collapsed, the inline-login fields must leave the tab order too — the
   base .checkout-collapse only zeroes size/opacity/pointer-events, which still
   lets keyboard focus land on the hidden password/buttons (5 phantom tab stops
   between the email field and shipping name). visibility:hidden removes them. */
#checkout-inline-login.is-collapsed { visibility: hidden; }
/* Expanded: keep the gap to the "Continue" button consistent with the email
   field's spacing (form-group margin-bottom) — the box has no bottom margin of
   its own, so without this the button crowds it. Animates via .checkout-collapse's
   margin transition; .is-collapsed zeroes it back to 0. */
#checkout-inline-login:not(.is-collapsed) { margin-bottom: 20px; }

/* Post-purchase "create an account" offer on the order confirmation page. */
.confirm-account-offer {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 0 auto 2rem;
  max-width: 640px;
}
.confirm-account-offer__title { font-size: 1.1rem; margin: 0 0 0.35rem; }
.confirm-account-offer__lead { color: var(--text-secondary); font-size: 0.92rem; margin: 0 0 0.9rem; }
.confirm-account-offer__row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.confirm-account-offer__row .form-input { flex: 1 1 180px; }
@media (max-width: 560px) {
  .confirm-account-offer__row { flex-direction: column; }
  .confirm-account-offer__row .btn { width: 100%; }
}

/* Rates-list collapse: same max-height pattern as the stage body so picking
   a shipping method doesn't snap the page. Margins zero out so collapsed
   state takes no visual space at all. */
.rates-list {
  max-height: 1500px;
  overflow: hidden;
  transition: max-height .28s ease-out, margin .28s ease-out, opacity .2s ease-out;
}
.rates-list.is-collapsed {
  max-height: 0;
  margin: 0;
  opacity: 0;
}
/* Summary slides in cleanly instead of snapping with display:flex.
   Asymmetric transition: animates IN when .is-visible is added (slow ease),
   but vanishes INSTANTLY when removed. Why: when the customer clicks Change
   the rates-list unfurls over 280ms — if the summary also fades over 280ms,
   the chosen one-liner briefly appears below the expanding options and reads
   as a "5th option" flashing in. Instant hide on the un-visible state means
   only the list animates during expand. */
.rates-summary {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}
.rates-summary.is-visible {
  max-height: 80px;
  opacity: 1;
  transition: max-height .28s ease-out, opacity .2s ease-out .08s, margin .28s ease-out;
}

.checkout-stage__advance {
  margin-top: 8px;
}

/* order summary sidebar */
.order-summary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

/* Order confirmation page — linear flow (Addresses → Items → Totals → Buttons)
   instead of checkout's 2-column "main + sidebar" grid. Shipping + Billing sit
   side-by-side in their own grid that collapses to stacked on mobile. */
.order-confirmation {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* Match .checkout-section's default 24px bottom margin so spacing between
     every block in the flow is identical (addresses ↔ items ↔ totals ↔ btns). */
  gap: 24px;
}
.order-confirmation > .checkout-section,
.order-confirmation > .checkout-buttons-row {
  margin: 0;
}
.order-confirmation__addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.order-confirmation__addresses .checkout-section {
  margin-bottom: 0;
}
/* Order Totals tucked into the bottom of the Order Summary card, right-aligned
   so the line items and totals read as one receipt. The little status/payment
   meta block sits below in muted text. */
.order-confirmation__totals {
  max-width: 360px;
  margin-left: auto;
  margin-top: 1.5rem;
}
.order-confirmation__meta {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-muted, var(--border));
  font-size: 0.875rem;
}

.order-summary__title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.order-summary__item {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.order-summary__item-image {
  width: 56px;
  height: 56px;
  background: var(--bg-surface);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.order-summary__item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.order-summary__item-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
}

.order-summary__item-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.order-summary__item-name {
  font-size: 0.875rem;
  font-weight: 500;
}

.order-summary__item-price {
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* coupon */
.coupon-field {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}

.coupon-field input {
  flex: 1;
}

/* ----------------------------------------------------------
   17. LOGIN / REGISTER
   ---------------------------------------------------------- */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-height) - 200px);
  padding: 40px 0;
}

.auth-card {
  width: 100%;
  max-width: 480px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-lg);
}

.auth-card__logo {
  text-align: center;
  margin-bottom: 28px;
}

.auth-card__logo img {
  height: 40px;
  margin-inline: auto;
}

.auth-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 4px;
}

.auth-card__subtitle {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 28px;
}

/* tabbed layout */
.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
}

.auth-tabs__tab {
  flex: 1;
  padding: 12px;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
  background: none;
}

.auth-tabs__tab:hover {
  color: var(--text-primary);
}

.auth-tabs__tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* ----------------------------------------------------------
   18. CUSTOMER ACCOUNT PAGES
   ---------------------------------------------------------- */
.account-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 40px 0;
}

.account-nav {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px;
  position: sticky;
  top: calc(var(--header-height) + 24px);
  align-self: start;
}

.account-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  border-radius: var(--radius);
  transition: background var(--duration) var(--ease),
              color var(--duration) var(--ease);
}

.account-nav__item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}

.account-nav__item--active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 500;
}

.account-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.account-section__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

/* orders table */
.orders-table {
  width: 100%;
  border-collapse: collapse;
}

.orders-table thead th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.orders-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--duration) var(--ease);
}

.orders-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.orders-table td {
  padding: 14px 12px;
  font-size: 0.875rem;
  vertical-align: middle;
}

/* Mobile: the 5-column tables are wider than the viewport (they force the whole
   account page to drift sideways). Stack each row into a label:value card. */
@media (max-width: 600px) {
  .orders-table thead { display: none; }
  .orders-table,
  .orders-table tbody,
  .orders-table tr,
  .orders-table td { display: block; width: 100%; }
  .orders-table tbody tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 12px;
  }
  .orders-table tbody tr:hover { background: transparent; }
  .orders-table td {
    padding: 5px 0;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    text-align: right;
  }
  /* Column name (from data-label) on the left, value on the right. */
  .orders-table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
  }
  /* Label-less cell (the View button) → full-width action under the details. */
  .orders-table td:not([data-label]) {
    display: block;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .orders-table td:not([data-label]) .btn { width: 100%; }
}

.order-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.order-status--processing {
  color: var(--warning);
  background: var(--warning-bg);
}

.order-status--shipped {
  color: var(--info);
  background: var(--info-bg);
}

.order-status--delivered {
  color: var(--success);
  background: var(--success-bg);
}

.order-status--cancelled {
  color: var(--danger);
  background: var(--danger-bg);
}

/* address cards */
.address-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.address-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  transition: border-color var(--duration) var(--ease);
}

.address-card:hover {
  border-color: var(--border-light);
}

.address-card--default {
  border-color: var(--accent);
}

.address-card__default-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.address-card__name {
  font-weight: 600;
  margin-bottom: 8px;
}

.address-card__details {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}

.address-card__actions {
  display: flex;
  gap: 12px;
}

/* add new address placeholder */
.address-card--add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  border-style: dashed;
  cursor: pointer;
  color: var(--text-muted);
  transition: color var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}

.address-card--add:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ----------------------------------------------------------
   19. FOOTER
   ---------------------------------------------------------- */
.site-footer {
  background: #000;
  border-top: 1px solid var(--border);
  /* Reserve space at the top for the docked buy bar. The bar sits INSIDE
     this padded area when the footer is in view (its top edge aligns with
     the footer's top edge), so footer content is not covered. */
  padding-top: 64px;
  /* Stacking order: strip (49) sits BELOW the footer so its collapse-slide
     hides behind the footer; buy bar (51) sits ABOVE the footer so when it
     docks inside the footer's padded top its body remains visible. */
  position: relative;
  z-index: 50;
}

.footer-main {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 48px;
  padding: 56px 0 32px;
}

.footer-brand {
  /* No max-width — let the brand column fill its grid cell so the content
     ranges land at the same horizontal as the header logo / nav. */
}

.footer-brand__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 18px;
}

.footer-brand__logo img {
  height: 32px;
}

/* Social row in the brand column — bare SVGs, no chip background. They
   lighten on hover only. */
.footer-brand__social {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.footer-brand__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: color .15s ease;
}
.footer-brand__social-link:hover { color: #fff; }

/* Contact block — phone + emails. Lives under the social row in the
   brand column for tight scannability. */
.footer-brand__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.875rem;
}
.footer-brand__contact a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color .15s ease;
}
.footer-brand__contact a:hover { color: var(--text-primary); }
.footer-brand__phone {
  color: var(--text-primary) !important;
  font-weight: 500;
  margin-bottom: 4px;
}

/* Regional storefront links — sit below the contact block with a small
   gap so they read as a distinct group rather than another email. */
.footer-brand__regional {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
  font-size: 0.875rem;
}
.footer-brand__regional a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color .15s ease;
}
.footer-brand__regional a:hover { color: var(--text-primary); }

.footer-column__title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.footer-column__link {
  /* Shrink the clickable box to the link's text width so each item reads
     as a tight chip instead of stretching across the full grid cell. */
  display: block;
  width: fit-content;
  padding: 5px 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  transition: color var(--duration) var(--ease),
              padding-left var(--duration) var(--ease);
}

.footer-column__link:hover {
  color: var(--text-primary);
  padding-left: 4px;
}

/* Payment row — sits above the bottom divider, right-aligned so the
   cards stack visually over the Privacy / Terms / Accessibility line.
   Real brand colors, fixed 38×24 box so the icons read as a tight set. */
.footer-payments-row {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 14px;
}
.footer-payments {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-pay {
  display: inline-block;
  width: 38px;
  height: 24px;
  /* The SVGs ship with a 7%-opacity black outer corner that reads as a
     soft card edge on light backgrounds. On our black footer we add a
     subtle white shoulder so they don't disappear into the bg. */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
  border-radius: 4px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.footer-bottom > p { margin: 0; }
/* Mobile: stack copyright + links vertically; payments row stays where
   it is (centered via the row's own justify-content on mobile). */
@media (max-width: 720px) {
  .footer-payments-row { justify-content: center; }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

.footer-bottom__links {
  display: flex;
  gap: 24px;
}

.footer-bottom__links a {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.footer-bottom__links a:hover {
  color: var(--text-primary);
}

/* ----------------------------------------------------------
   20. PAGINATION
   ---------------------------------------------------------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 32px 0;
}

.pagination__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: all var(--duration) var(--ease);
}

.pagination__btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
}

.pagination__btn--active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.pagination__btn--disabled {
  opacity: 0.35;
  pointer-events: none;
}

.pagination__ellipsis {
  color: var(--text-muted);
  padding: 0 4px;
}

/* ----------------------------------------------------------
   21. FLASH MESSAGES / TOASTS
   ---------------------------------------------------------- */
.flash-container {
  position: fixed;
  top: calc(var(--header-height) + 16px);
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  width: 100%;
  pointer-events: none;
}

.flash {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: flash-in 0.4s var(--ease-spring);
}

.flash--exiting {
  animation: flash-out 0.3s var(--ease) forwards;
}

@keyframes flash-in {
  0% {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes flash-out {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
  }
}

.flash__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.flash__content {
  flex: 1;
}

.flash__title {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.flash__message {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.flash__close {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  cursor: pointer;
  transition: color var(--duration) var(--ease);
}

.flash__close:hover {
  color: var(--text-primary);
}

/* variants */
.flash--success {
  border-left: 3px solid var(--success);
}

.flash--success .flash__icon {
  color: var(--success);
}

.flash--error {
  border-left: 3px solid var(--danger);
}

.flash--error .flash__icon {
  color: var(--danger);
}

.flash--warning {
  border-left: 3px solid var(--warning);
}

.flash--warning .flash__icon {
  color: var(--warning);
}

.flash--info {
  border-left: 3px solid var(--info);
}

.flash--info .flash__icon {
  color: var(--info);
}

/* inline alert variant */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}

.alert--success {
  color: var(--success);
  background: var(--success-bg);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.alert--error {
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert--warning {
  color: var(--warning);
  background: var(--warning-bg);
  border: 1px solid rgba(234, 179, 8, 0.2);
}

.alert--info {
  color: var(--info);
  background: var(--info-bg);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ----------------------------------------------------------
   22. LOADING SPINNERS
   ---------------------------------------------------------- */
.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.spinner--lg {
  width: 40px;
  height: 40px;
  border-width: 3px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* full-page loading overlay */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(8px);
}

.loading-overlay__text {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* skeleton loading */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-surface) 25%,
    var(--bg-elevated) 50%,
    var(--bg-surface) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease infinite;
  border-radius: var(--radius);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton--text {
  height: 14px;
  margin-bottom: 8px;
  width: 100%;
}

.skeleton--text-short {
  width: 60%;
}

.skeleton--title {
  height: 24px;
  width: 70%;
  margin-bottom: 12px;
}

.skeleton--image {
  aspect-ratio: 4/3;
  width: 100%;
}

.skeleton--button {
  height: 44px;
  width: 140px;
}

.skeleton--avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* button loading state */
.btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn--loading::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ----------------------------------------------------------
   23. EMPTY STATES
   ---------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
  min-height: 320px;
}

.empty-state__icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  margin-bottom: 24px;
  color: var(--text-muted);
  font-size: 2rem;
}

.empty-state__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.empty-state__description {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  max-width: 400px;
  margin-bottom: 24px;
  line-height: 1.6;
}

/* ----------------------------------------------------------
   24. SEARCH RESULTS
   ---------------------------------------------------------- */
.search-results {
  padding: 32px 0;
}

.search-results__header {
  margin-bottom: 28px;
}

.search-results__query {
  font-size: 1.5rem;
  font-weight: 700;
}

.search-results__query span {
  color: var(--accent);
}

.search-results__count {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 4px;
}

.search-results__tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

.search-results__tab {
  padding: 12px 20px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: none;
  transition: color var(--duration) var(--ease);
}

.search-results__tab:hover {
  color: var(--text-primary);
}

.search-results__tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* search result item (list view) */
.search-result-item {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  transition: background var(--duration) var(--ease);
}

.search-result-item:hover {
  background: rgba(255, 255, 255, 0.02);
}

.search-result-item__image {
  width: 120px;
  height: 120px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}

.search-result-item__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.search-result-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.search-result-item__title {
  font-size: 1.0625rem;
  font-weight: 600;
}

.search-result-item__title a {
  color: var(--text-primary);
  transition: color var(--duration) var(--ease);
}

.search-result-item__title a:hover {
  color: var(--accent);
}

.search-result-item__excerpt {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result-item__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
}

.search-result-item__price {
  font-size: 1.125rem;
  font-weight: 700;
}

/* search suggestions dropdown */
.search-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 100;
  max-height: 400px;
  overflow-y: auto;
}

.search-suggestion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--duration) var(--ease);
}

.search-suggestion:hover,
.search-suggestion--highlighted {
  background: rgba(255, 255, 255, 0.05);
}

.search-suggestion__image {
  width: 40px;
  height: 40px;
  background: var(--bg-surface);
  border-radius: var(--radius);
  overflow: hidden;
  flex-shrink: 0;
}

.search-suggestion__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.search-suggestion__text {
  flex: 1;
  font-size: 0.875rem;
}

.search-suggestion__text mark {
  color: var(--accent);
  background: none;
  font-weight: 600;
}

.search-suggestion__price {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ----------------------------------------------------------
   25. MODALS
   ---------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-md) var(--ease),
              visibility var(--duration-md) var(--ease);
}

.modal-backdrop--active {
  opacity: 1;
  visibility: visible;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9991;
  transform: translate(-50%, -50%) scale(0.95);
  width: 90%;
  max-width: 560px;
  max-height: 90vh;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-md) var(--ease),
              transform var(--duration-md) var(--ease),
              visibility var(--duration-md) var(--ease);
}

.modal--active {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.modal__title {
  font-size: 1.125rem;
  font-weight: 700;
}

.modal__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: var(--radius);
  transition: background var(--duration) var(--ease),
              color var(--duration) var(--ease);
}

.modal__close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.modal__body {
  padding: 24px;
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

/* ----------------------------------------------------------
   26. TOOLTIPS
   ---------------------------------------------------------- */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration) var(--ease),
              transform var(--duration) var(--ease),
              visibility var(--duration) var(--ease);
  z-index: 100;
}

[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ----------------------------------------------------------
   27. TABLES (generic)
   ---------------------------------------------------------- */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 12px 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}

.data-table thead th:first-child {
  border-radius: var(--radius) 0 0 0;
}

.data-table thead th:last-child {
  border-radius: 0 var(--radius) 0 0;
}

.data-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--duration) var(--ease);
}

.data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.data-table td {
  padding: 14px 16px;
  font-size: 0.875rem;
  vertical-align: middle;
}

/* ----------------------------------------------------------
   28. CARDS (generic)
   ---------------------------------------------------------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration-md) var(--ease);
}

.card:hover {
  border-color: var(--border-light);
}

.card__header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.card__body {
  padding: 24px;
}

.card__footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
}

/* ----------------------------------------------------------
   29. MISCELLANEOUS COMPONENTS
   ---------------------------------------------------------- */

/* divider */
.divider {
  height: 1px;
  background: var(--border);
  margin: 32px 0;
}

/* tag list */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* progress bar */
.progress {
  height: 6px;
  background: var(--bg-surface);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
  transition: width var(--duration-lg) var(--ease);
}

/* rating stars */
.rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--warning);
  font-size: 0.875rem;
}

.rating__count {
  margin-left: 6px;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* back-to-top */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-secondary);
  box-shadow: var(--shadow);
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--duration) var(--ease),
              transform var(--duration) var(--ease),
              visibility var(--duration) var(--ease),
              background var(--duration) var(--ease),
              color var(--duration) var(--ease);
}

.back-to-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* sort/view controls */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.toolbar__info {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* Category intro copy — the category's description, shown under the title bar
   on its storefront listing page. */
.category-intro {
  margin: -8px 0 24px;
  max-width: 70ch;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
}

.toolbar__controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toolbar__sort {
  padding: 8px 12px;
  font-size: 0.8125rem;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a1a1aa' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.view-toggle__btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  background: transparent;
  transition: background var(--duration) var(--ease),
              color var(--duration) var(--ease);
}

.view-toggle__btn:hover {
  color: var(--text-primary);
}

.view-toggle__btn--active {
  background: var(--bg-surface);
  color: var(--accent);
}

/* newsletter */
.newsletter {
  background: linear-gradient(135deg, var(--bg-surface), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 48px;
  text-align: center;
  margin: 48px 0;
}

.newsletter__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.newsletter__text {
  color: var(--text-secondary);
  margin-bottom: 24px;
  max-width: 480px;
  margin-inline: auto;
}

.newsletter__form {
  display: flex;
  gap: 8px;
  max-width: 440px;
  margin-inline: auto;
}

.newsletter__form input {
  flex: 1;
}

/* trust badges / payment icons */
.trust-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 0;
  opacity: 0.6;
}

.trust-badges img {
  height: 28px;
  filter: grayscale(1) brightness(1.5);
  transition: filter var(--duration) var(--ease),
              opacity var(--duration) var(--ease);
}

.trust-badges img:hover {
  filter: none;
  opacity: 1;
}

/* ----------------------------------------------------------
   30. MOBILE NAV DRAWER
   ---------------------------------------------------------- */
/* Full-width overlay menu (Atomos-style): covers everything BELOW the sticky
   header. Starts at --header-height and sits under the header's z-index so the
   morphing hamburger/X in the header stays live to close it. */
.mobile-nav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 990;                 /* below .site-header (1000) */
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear var(--duration-md);  /* hold visible through the fade-out */
}

.mobile-nav--open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s linear 0s;
}

/* The drawer is a full-bleed opaque surface, so no separate scrim is needed. */
.mobile-nav__backdrop {
  display: none;
}

.mobile-nav__drawer {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  background: var(--bg-primary);
  border-left: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--duration-md) var(--ease), transform var(--duration-md) var(--ease);
}

.mobile-nav--open .mobile-nav__drawer {
  opacity: 1;
  transform: translateY(0);
}

.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.mobile-nav__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.mobile-nav__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  border-radius: var(--radius);
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

.mobile-nav__close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.mobile-nav__search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 20px;
  padding: 12px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
}

.mobile-nav__search svg {
  color: var(--text-muted);
  flex-shrink: 0;
}

.mobile-nav__search-input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 0.9375rem;
  outline: none;
}

.mobile-nav__search-input::placeholder {
  color: var(--text-muted);
}

.mobile-nav__links {
  flex: 1;
  padding: 8px 0;
}

.mobile-nav__link {
  display: block;
  padding: 14px 24px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: background var(--duration) var(--ease);
}

.mobile-nav__link:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}

.mobile-nav__heading {
  display: block;
  padding: 16px 24px 6px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}

/* Collapsible top-level section toggle (mobile drawer accordion) */
.mobile-nav__heading--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  /* match .mobile-nav__heading type */
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}

.mobile-nav__caret {
  flex-shrink: 0;
  transition: transform var(--duration) var(--ease);
}

.mobile-nav__heading--toggle[aria-expanded="true"] .mobile-nav__caret {
  transform: rotate(180deg);
}

.mobile-nav__group {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--duration) var(--ease);
}

/* Heading-styled top-level that is itself a link (no sub-menu, e.g. BoxIO) —
   sits at the same visual level as the collapsible section headings. */
.mobile-nav__heading--link {
  padding-bottom: 16px;
  cursor: pointer;
}

.mobile-nav__heading--link:hover {
  color: var(--text-secondary);
}

/* Second-level (sub) accordion toggle — looks like a sub link but reveals a caret. */
.mobile-nav__subtoggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.mobile-nav__link--sub {
  padding-left: 40px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
}

.mobile-nav__link--sub:hover {
  color: var(--accent);
}

.mobile-nav__footer {
  padding: 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   31. RESPONSIVE — TABLET (max-width: 1199px)
   ---------------------------------------------------------- */
@media (max-width: 1199px) {
  :root {
    --container-max: 960px;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }

  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .shop-layout {
    grid-template-columns: 240px 1fr;
    gap: 24px;
  }

  .product-detail {
    gap: 32px;
  }

  .footer-main {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .cart-page__layout {
    grid-template-columns: 1fr 320px;
    gap: 24px;
  }

  .checkout-layout {
    grid-template-columns: 1fr 360px;
    gap: 32px;
  }

  .hero__title {
    font-size: 2.5rem;
  }

  .header-search {
    flex: 0 1 260px;
  }
}

/* ----------------------------------------------------------
   32. RESPONSIVE — MOBILE (max-width: 767px)
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --header-height: 60px;
  }

  .container {
    padding-inline: 16px;
  }

  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }

  /* header */
  .header-nav {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  /* Search + Sign In/Account live in the drawer on mobile — drop them from the
     top bar and pull the cart in close to the hamburger. */
  #searchToggle,
  .account-dropdown,
  .header-actions__btn[aria-label="Sign In"] {
    display: none;
  }
  .header-inner { gap: 12px; }
  .header-actions { margin-left: auto; }

  /* hero */
  .hero {
    min-height: 400px;
  }

  .hero--large {
    min-height: 480px;
  }

  .hero__title {
    font-size: 2rem;
  }

  .hero__description {
    font-size: 1rem;
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
  }

  /* product grid */
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* product card */
  .product-card__quick-add {
    transform: translateY(0);
    opacity: 1;
    position: static;
    background: transparent;
    padding: 0 16px 16px;
  }

  /* shop layout */
  .shop-layout {
    grid-template-columns: 1fr;
  }

  .category-sidebar {
    position: static;
    max-height: none;
  }

  /* product detail */
  .product-detail {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .product-gallery {
    position: static;
  }

  .product-info__title {
    font-size: 2rem;
  }

  .product-highlights {
    grid-template-columns: 1fr;
  }

  /* cart */
  .cart-page__layout {
    grid-template-columns: 1fr;
  }

  .cart-summary {
    position: static;
  }

  .cart-table thead {
    display: none;
  }

  .cart-table,
  .cart-table tbody,
  .cart-table tr,
  .cart-table td {
    display: block;
    width: 100%;
  }

  .cart-table tr {
    padding: 16px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  /* Order-confirmation table: turn each row into a card with the item name on
     top and labeled key/value rows beneath. data-label attributes on each td
     drive the label via ::before. Scoped via .cart-table--itemized so the
     richer cart.php cells (image + qty selector + remove btn) aren't affected. */
  .cart-table--itemized tr {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--border-muted, #e5e7eb);
    border-radius: 8px;
    margin-bottom: 12px;
  }
  .cart-table--itemized td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    width: auto;
    padding: 4px 0;
    border: none;
    text-align: left;
  }
  .cart-table--itemized td::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary, #6e7681);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  /* First cell is the item name — show prominently with no label, separated
     from the key/value rows by a divider. */
  .cart-table--itemized td:first-child {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    padding: 0 0 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-muted, #e5e7eb);
    padding-left: 0 !important; /* override the bundle-indent inline style on mobile */
  }
  .cart-table--itemized td:first-child::before {
    display: none;
  }
  /* Bundle header rows span the row and shouldn't get label/value treatment. */
  .cart-table--itemized tr.cart-table__bundle-row {
    padding: 10px 16px;
    background: var(--bg-secondary, rgba(0,0,0,0.04)) !important;
  }
  .cart-table--itemized tr.cart-table__bundle-row td {
    display: block;
    text-align: center;
  }
  .cart-table--itemized tr.cart-table__bundle-row td::before {
    display: none;
  }
  /* Highlight the running total row at the bottom of the card. */
  .cart-table--itemized td.cart-subtotal {
    font-weight: 700;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border-muted, #e5e7eb);
  }

  /* Order confirmation: addresses collapse from 2-col to stacked on mobile,
     and the inline totals block goes full width. */
  .order-confirmation__addresses {
    grid-template-columns: 1fr;
  }
  .order-confirmation__totals {
    max-width: none;
  }

  /* checkout */
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .order-summary {
    position: static;
    order: -1;               /* summary on top on mobile (grid item reorder) */
    margin-bottom: 24px;
  }

  .checkout-steps {
    gap: 0;
  }

  .checkout-step__label {
    font-size: 0.6875rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
  /* Checkout: when a .form-row collapses to one column on mobile, drop the 16px
     grid gutter so the ONLY vertical rhythm is the form-group's 10px margin-
     bottom. Otherwise within-row fields (Card Number/CVV, the MM/YY/Name trio)
     sat 26px apart while between-row + standalone fields sat 10px apart — the
     uneven gaps Andrew flagged. Now every field gap is a uniform 10px. */
  .checkout-page .form-row { gap: 0; }

  /* account */
  .account-layout {
    grid-template-columns: 1fr;
  }

  .account-nav {
    position: static;
    display: flex;
    overflow-x: auto;
    gap: 0;
    padding: 4px;
  }

  .account-nav__item {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* orders table responsive */
  .table-wrapper {
    margin: 0 -16px;
    padding: 0 16px;
  }

  /* auth */
  .auth-card {
    padding: 28px 20px;
  }

  /* footer */
  .footer-main {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-brand {
    max-width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* bundle */
  .bundle-card__header {
    flex-direction: column;
    gap: 12px;
  }

  /* toolbar */
  .toolbar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .toolbar__controls {
    justify-content: space-between;
  }

  /* newsletter */
  .newsletter {
    padding: 32px 20px;
  }

  .newsletter__form {
    flex-direction: column;
  }

  /* flash messages */
  .flash-container {
    right: 16px;
    left: 16px;
    max-width: none;
  }

  /* pagination */
  .pagination {
    gap: 2px;
  }

  .pagination__btn {
    min-width: 36px;
    height: 36px;
    font-size: 0.8125rem;
  }
}

/* ----------------------------------------------------------
   33. RESPONSIVE — SMALL MOBILE (max-width: 479px)
   ---------------------------------------------------------- */
@media (max-width: 479px) {
  .container {
    padding-inline: 12px;
  }

  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.375rem; }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .product-card__image {
    aspect-ratio: 16 / 10;
  }

  .hero {
    min-height: 340px;
  }

  .hero__title {
    font-size: 1.625rem;
  }

  .hero__content {
    padding: 40px 0;
  }

  .product-gallery__thumbs {
    gap: 6px;
  }

  .product-gallery__thumb {
    width: 56px;
    height: 56px;
  }

  .product-actions {
    flex-direction: column;
  }

  .btn-lg {
    padding: 14px 24px;
    font-size: 1rem;
  }

  .address-grid {
    grid-template-columns: 1fr;
  }

  .checkout-steps::before {
    display: none;
  }

  .checkout-steps {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .checkout-step {
    flex-direction: row;
    gap: 12px;
  }

  .section-title {
    font-size: 1.375rem;
  }
}

/* ----------------------------------------------------------
   34. PRINT STYLES
   ---------------------------------------------------------- */
@media print {
  .site-header,
  .site-footer,
  .breadcrumbs,
  .header-actions,
  .product-card__quick-add,
  .back-to-top,
  .mobile-menu-toggle,
  .flash-container {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .container {
    max-width: 100%;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-detail {
    grid-template-columns: 1fr 1fr;
  }
}

/* ----------------------------------------------------------
   35a. ANNOUNCEMENT BANNERS
   ---------------------------------------------------------- */
.announcement-banners {
  position: relative;
  z-index: 90;
}

.announcement-bar {
  padding: 10px 0;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-align: center;
  transition: background 0.3s var(--ease);
}

.announcement-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.announcement-bar__text {
  display: inline;
}

.announcement-bar__link {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  opacity: 0.9;
  transition: opacity 0.2s var(--ease);
}

.announcement-bar__link:hover {
  opacity: 1;
}

/* ----------------------------------------------------------
   35b. CAROUSEL (HERO)
   ---------------------------------------------------------- */
.carousel {
  position: relative;
  width: 100%;
  height: 75vh;
  min-height: 600px;
  max-height: 900px;
  overflow: hidden;
  /* Pure black so the staggered fade below dips through black, not the
     light hero images, between slides. */
  background: #000;
}

.carousel__track {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  /* Outgoing slide fades OUT immediately (no delay), revealing the black
     carousel background; the incoming slide (rule below) waits, then fades
     IN — so every transition dips through black instead of cross-blending
     two light images. */
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
  z-index: 0;
}

.carousel__slide--active {
  opacity: 1;
  visibility: visible;
  /* Hold black for the outgoing fade, then fade in. */
  transition: opacity 0.4s var(--ease) 0.4s, visibility 0s linear 0s;
  z-index: 1;
}

.carousel__overlay {
  position: absolute;
  inset: 0;
  background: #000000;
  pointer-events: none;
}

.carousel__content {
  /* Sits inside .container (page-wide max 1320px). Its own max-width caps
     the readable text block at ~640px; margin rules anchor it to the
     correct edge of the surrounding .container per the slide's
     data-text-align. */
  max-width: 640px;
  padding: 80px 0;
  margin-left: 0;
  margin-right: auto;
}
.carousel__slide[data-text-align="center"] .carousel__content {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.carousel__slide[data-text-align="center"] .carousel__subtitle {
  margin-left: auto;
  margin-right: auto;
}
.carousel__slide[data-text-align="center"] .carousel__actions {
  justify-content: center;
}
.carousel__slide[data-text-align="right"] .carousel__content {
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}
.carousel__slide[data-text-align="right"] .carousel__subtitle {
  margin-left: auto;
  margin-right: 0;
}
.carousel__slide[data-text-align="right"] .carousel__actions {
  justify-content: flex-end;
}

/* Vertical anchor — center is the default flex behaviour and needs no
   override. Top tucks content under the header padding; bottom keeps it
   clear of the carousel arrows/dots via the existing 80px content padding. */
.carousel__slide[data-text-vertical-align="top"]    { align-items: flex-start; }
.carousel__slide[data-text-vertical-align="bottom"] { align-items: flex-end; }


.carousel__title {
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  /* Inherit from .carousel__content's inline color (per-slide text_color)
     — without this the global h1 rule wins and locks the title to
     --text-primary regardless of the slide setting. */
  color: inherit;
}

.carousel__subtitle {
  font-size: 1.125rem;
  opacity: 0.85;
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 520px;
  color: inherit;
}

.carousel__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* Colour-neutral wrapper: the slide's per-row inline style provides both
   background-color and color. We pair this with .btn so the box / padding /
   :hover overlay come from the shared button kit, without .btn-primary's
   white-on-dark default fighting the inline colours. */
.carousel__btn {
  font-weight: 600;
}

/* Arrows */
/* Match the product hero down-arrow exactly — same PNG asset, just
   rotated 90deg so it points left (prev) or right (next). PNG carries
   anti-aliasing baked in, avoiding the jaggy edges that CSS border-radius
   + SVG strokes produced. Translates + drop-shadow mirror the hero. */
.carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 60px;
  height: 60px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.carousel__arrow img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
.carousel__arrow:hover { opacity: 1; }
.carousel__arrow:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
  border-radius: 50%;
}
/* Prev points left (rotate 90deg from down). Next points right (-90deg).
   The translateY(-50%) wins because it follows the rotation in the
   shorthand. */
.carousel__arrow--prev { transform: translateY(-50%) rotate(90deg); }
.carousel__arrow--next { transform: translateY(-50%) rotate(-90deg); }

.carousel__arrow--prev {
  left: 24px;
}

.carousel__arrow--next {
  right: 24px;
}

/* Dots */
.carousel__dots {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 10px;
}

.carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.carousel__dot:hover {
  border-color: rgba(255, 255, 255, 0.8);
}

.carousel__dot--active {
  background: #ffffff;
  border-color: #ffffff;
  transform: scale(1.2);
}

/* Tablet carousel adjustments */
@media (max-width: 1024px) {
  .carousel__arrow {
    width: 40px;
    height: 40px;
  }
  .carousel__arrow--prev { left: 16px; }
  .carousel__arrow--next { right: 16px; }
  .carousel__title { font-size: 2.5rem; }
}

/* Mobile carousel adjustments */
@media (max-width: 767px) {
  .carousel {
    /* Fill the screen below the header + announcement banner(s) so the CTA and
       dots sit near the bottom of the viewport. --hero-offset (header + banner
       heights) is measured in JS; svh keeps it right while the browser chrome
       is showing. */
    height: calc(100vh - var(--hero-offset, 120px));
    height: calc(100svh - var(--hero-offset, 120px));
    min-height: 360px;
  }
  .carousel__title {
    font-size: 2rem;
  }
  .carousel__subtitle {
    font-size: 1rem;
  }
  /* Standardize every hero slide on mobile regardless of its desktop
     placement: text + CTA clustered at the bottom, centered, with the copy
     sitting directly above the button. Readable over the busy lower third of
     most hero images and consistent across every slide. */
  .carousel__slide {
    align-items: stretch !important;   /* let the container fill the slide height */
  }
  .carousel__slide > .container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .carousel__content {
    max-width: none;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;         /* cluster copy + button at the bottom */
    flex: 1 1 auto;
  }
  .carousel__subtitle {
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  /* Lift the centered copy off busy/light image areas without a space-eating scrim. */
  .carousel__title,
  .carousel__subtitle {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 18px rgba(0, 0, 0, 0.5);
  }
  .carousel__arrow {
    width: 36px;
    height: 36px;
  }
  .carousel__arrow--prev { left: 12px; }
  .carousel__arrow--next { right: 12px; }
  .carousel__arrow svg {
    width: 18px;
    height: 18px;
  }
  .carousel__dots {
    bottom: 20px;
  }
  .carousel__dot {
    width: 8px;
    height: 8px;
  }
  .carousel__actions {
    flex-direction: column;
    width: 100%;
    margin-top: 24px;                  /* gap between the copy and the button */
    margin-bottom: 44px;               /* clear the dots */
    justify-content: center !important;
  }
  .carousel__actions .btn {
    width: 100%;
  }
  .announcement-bar {
    font-size: 0.75rem;
    padding: 8px 0;
  }
}

/* ----------------------------------------------------------
   35. REDUCED MOTION
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------------------------------------------
   36. HIGH CONTRAST ADJUSTMENTS
   ---------------------------------------------------------- */
@media (prefers-contrast: high) {
  :root {
    --border: #52525b;
    --border-light: #71717a;
    --text-secondary: #d4d4d8;
    --text-muted: #a1a1aa;
  }

  .product-card,
  .card,
  .checkout-section,
  .cart-summary,
  .order-summary,
  .auth-card,
  .account-section {
    border-width: 2px;
  }
}

/* ================================================================
   Add-on Groups — editorial/catalog treatment on the dark chrome.
   Numbered sections, product thumbnails, monospace technical details.
   ================================================================ */
.addons-block {
  margin: 4px 0 24px;
  padding: 0;
}

.addon-group {
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(6px);
  animation: addonGroupIn 0.5s var(--ease, cubic-bezier(.16,1,.3,1)) forwards;
  animation-delay: var(--addon-group-delay, 0ms);
}
.addon-group:last-child {
  margin-bottom: 0;
}

@keyframes addonGroupIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Editorial header: BATTERY PLATE ────────────────────── */
.addon-group__header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 2px;
}
.addon-group__title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-primary, #f5f5f5);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Info icon next to the addon group title. Click to toggle the popover;
   click outside (handled in feature-blocks.js) to dismiss. Hover also
   reveals on devices that have hover. */
.addon-group__info {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.addon-group__info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text-muted, #71717a);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.15s ease;
}
.addon-group__info-btn:hover,
.addon-group__info[aria-expanded="true"] .addon-group__info-btn,
.addon-group__info-btn[aria-expanded="true"] { color: var(--text-primary); }
.addon-group__info-pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: max-content;
  max-width: 320px;
  padding: 10px 12px;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
  color: var(--text-primary);
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e4e4e7);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.addon-group__info-pop[hidden] { display: none; }
@media (hover: hover) {
  .addon-group__info:hover .addon-group__info-pop { display: block !important; }
}
.addon-group__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--border, #27272a), transparent);
  align-self: center;
  margin: 0 4px;
}

.addon-group__rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Row ── */
.addon-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px 10px 10px;
  background: var(--bg-card, #111);
  border: 1px solid var(--border, #27272a);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  user-select: none;
  transition:
    border-color 0.25s var(--ease, cubic-bezier(.16,1,.3,1)),
    background-color 0.25s var(--ease, cubic-bezier(.16,1,.3,1)),
    transform 0.25s var(--ease, cubic-bezier(.16,1,.3,1));

  /* staggered entry */
  opacity: 0;
  transform: translateY(4px);
  animation: addonRowIn 0.45s var(--ease, cubic-bezier(.16,1,.3,1)) forwards;
  animation-delay: var(--addon-row-delay, 0ms);
}

@keyframes addonRowIn {
  to { opacity: 1; transform: translateY(0); }
}

.addon-row:hover {
  border-color: var(--border-light, #3f3f46);
  background: var(--bg-surface, #1a1a1a);
}

.addon-row__input {
  /* visually hidden, keyboard-accessible */
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

/* ── Thumbnail (light product card, echoes main gallery) ── */
.addon-row__thumb {
  width: 56px;
  height: 56px;
  background: var(--bg-white, #fff);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
  transition: box-shadow 0.25s ease;
}
.addon-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.addon-row__thumb-placeholder {
  width: 20px;
  height: 20px;
  border: 1px dashed rgba(0,0,0,0.2);
  border-radius: 1px;
}

/* ── Body ── */
.addon-row__body {
  min-width: 0;
}
.addon-row__name {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text-primary, #f5f5f5);
  line-height: 1.35;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.addon-row__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}
.addon-row__sku {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted, #71717a);
  letter-spacing: 0.02em;
  background: transparent;
  padding: 0;
  border: 0;
}
.addon-row__dot {
  color: var(--text-muted, #71717a);
  font-size: 0.7rem;
}
.addon-row__stock {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-secondary, #a1a1aa);
}
.addon-row__stock--ready  { color: var(--text-secondary, #a1a1aa); }
.addon-row__stock--soon   { color: var(--text-muted, #71717a); }
.addon-row__stock--later  { color: var(--text-muted, #71717a); }
.addon-row__stock--neutral{ color: var(--text-muted, #71717a); }

/* ── Right side: price + state ── */
.addon-row__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}
.addon-row__price {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary, #f5f5f5);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.addon-row__state {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1;
  min-height: 0.7rem;
}
.addon-row__state-default {
  color: var(--text-muted, #71717a);
}
.addon-row__state-selected {
  display: none;
  color: var(--text-primary, #f5f5f5);
}

/* ── Selected state ── */
.addon-row--selected {
  border-color: var(--accent, #fff);
  background: var(--bg-surface, #1a1a1a);
  box-shadow: 0 0 0 1px var(--accent, #fff), 0 0 24px -12px var(--accent-glow, rgba(255,255,255,0.12));
}
.addon-row--selected:hover {
  border-color: var(--accent, #fff);
  background: var(--bg-surface, #1a1a1a);
}
.addon-row--selected .addon-row__thumb {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
.addon-row--selected .addon-row__state-default { display: none; }
.addon-row--selected .addon-row__state-selected { display: inline; }

/* ── Unavailable ── */
.addon-row--unavailable {
  opacity: 0.4;
  cursor: not-allowed;
}
.addon-row--unavailable:hover {
  border-color: var(--border, #27272a);
  background: var(--bg-card, #111);
}

/* ── Inline variant picker (addon whose accessory product has variants) ── */
/* Spans the full row width on a new grid line; shown only once the row is
   checked (toggled via the [hidden] attribute in JS). */
.addon-row__variant-wrap {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #27272a);
}
.addon-row__variant {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text-primary, #f5f5f5);
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-light, #d4d4d8);
  border-radius: 4px;
  cursor: pointer;
}
.addon-row__variant:focus {
  outline: none;
  border-color: var(--accent, #0a0a0a);
}
/* Forced-choice flag: a checked variant addon submitted without a pick. */
.addon-row--needs-choice .addon-row__variant {
  border-color: var(--danger, #dc2626);
  box-shadow: 0 0 0 1px var(--danger, #dc2626);
}

/* ── Responsive: tighten on small screens ── */
@media (max-width: 480px) {
  .addon-row {
    /* These rows never render a thumbnail, so the old 48px thumb column just
       crushed the name into ~6 characters ("Core …"). Two columns: body | price. */
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 10px 12px;
  }
  .addon-row__name {
    font-size: 0.88rem;
    /* Show the full add-on name (up to 2 lines) instead of truncating it. */
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .addon-group__header {
    gap: 10px;
  }
}

/* ================================================================
   Side-by-side Add to Cart button — label left, total right
   ================================================================ */
.btn-add-to-cart--side-by-side {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
  line-height: 1.15;
}
.btn-add-to-cart__label {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.btn-add-to-cart__total {
  font-size: 1.1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.btn-add-to-cart__total:empty {
  display: none;
}
.btn-add-to-cart__compare {
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: line-through;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
  margin-left: 0.4rem;
}
.btn-add-to-cart__compare:empty { display: none; }
.btn-add-to-cart--side-by-side:hover .btn-add-to-cart__total {
  opacity: 1;
}

/* ================================================================
   Cart Flyout Sidebar
   ================================================================ */
.cart-flyout-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.cart-flyout-overlay--open {
  opacity: 1;
  visibility: visible;
}

.cart-flyout {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 90vw;
  z-index: 9999;
  background: #ffffff;
  color: #111;
  border-left: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.cart-flyout--open {
  transform: translateX(0);
}

.cart-flyout__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 22px;
  border-bottom: 1px solid #e5e5e5;
  flex-shrink: 0;
}
.cart-flyout__title {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
}
.cart-flyout__close {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s ease;
}
.cart-flyout__close:hover {
  color: #111;
}

/* Scrollable items area */
.cart-flyout__items {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
}

/* Individual cart item */
.cart-flyout-item {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  align-items: flex-start;
}
.cart-flyout-item:last-child {
  margin-bottom: 0;
}

.cart-flyout-item__image {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
}
.cart-flyout-item__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-flyout-item__info {
  flex: 1;
  min-width: 0;
}
a.cart-flyout-item__image {
  display: block;
  flex-shrink: 0;
}
.cart-flyout-item__name {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 2px;
  line-height: 1.3;
  color: #111;
}
.cart-flyout-item__sku {
  color: #999;
  font-size: 0.75rem;
  margin-bottom: 8px;
}
.cart-flyout-item__bundle {
  list-style: none;
  margin: 0 0 8px;
  padding: 6px 0 0 10px;
  border-left: 2px solid #e4e4e7;
  font-size: 0.75rem;
  color: #71717a;
  line-height: 1.5;
}
.cart-flyout-item__bundle li { margin: 0; padding: 0; }

/* Qty controls */
.cart-flyout-item__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}
.cart-flyout-item__qty button {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 0.8rem;
  font-family: inherit;
  transition: color 0.15s ease;
}
.cart-flyout-item__qty button:hover {
  color: #111;
}
.cart-flyout-item__qty span {
  padding: 4px 10px;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  font-size: 0.8rem;
  min-width: 28px;
  text-align: center;
  color: #111;
}

/* Right column: price + trash */
.cart-flyout-item__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.cart-flyout-item__price {
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.3;
  white-space: nowrap;
  color: #111;
}

/* Empty state — must use [hidden] to toggle */
.cart-flyout__empty[hidden] {
  display: none !important;
}
.cart-flyout__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #666;
  font-size: 0.9rem;
  padding: 40px 22px;
}

/* Footer */
.cart-flyout__footer {
  padding: 16px 22px;
  border-top: 1px solid #e5e5e5;
  flex-shrink: 0;
}
.cart-flyout__note {
  color: #999;
  font-size: 0.72rem;
  text-align: center;
  margin-bottom: 12px;
}
.cart-flyout__checkout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 18px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.cart-flyout__checkout:hover {
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* ═══ Product detail — long-scroll sections ═══ */
.product-section {
    margin-top: 2rem;
    border-top: 1px solid var(--border-default);
}
.product-section:first-of-type {
    border-top: none;
}
.product-section__title {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
    color: var(--text-primary);
}
.product-section--features .product-description,
.product-section--description .product-description {
    line-height: 1.7;
    font-size: 1rem;
    color: var(--text-primary);
}

/* ═══ Product feature blocks ═══ */
.product-feature-block {
    display: grid;
    gap: 2rem;
}
.product-feature-block--with-image {
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .product-feature-block--with-image {
        /* Column widths are driven by --fb-col-1 (left) / --fb-col-2 (right)
           on the section element so the admin's "image column width" control
           can rebalance the ratio. PHP assigns the image-side's fr to whichever
           variable corresponds to the column the image actually sits in, so
           the slider behaves identically regardless of left/right. Defaults to
           1fr 1fr (50/50). Single-column mobile still wins below 768px via
           the rule above. */
        grid-template-columns: var(--fb-col-1, 1fr) var(--fb-col-2, 1fr);
        align-items: center;
    }
    /* Image is LAST in the DOM so the natural grid placement puts it in the
       right column; --image-left bumps it to order -1, dropping it into the
       left column. */
    .product-feature-block--image-left .product-feature-block__image {
        order: -1;
    }
}
.product-feature-block__image img {
    width: 100%;
    height: auto;
    display: block;
}
.product-feature-block__body .product-section__title {
    margin-top: 0;
}

/* ═══ Product videos ═══ */
.product-video-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    /* Reserve enough height that the videos tab always extends the page far
       enough for the sticky buy bar to dock correctly against the footer.
       Without this, a product with only one video (e.g. XMP651) leaves the
       page so short the bar lands in the middle of the footer rather than
       at its top edge. Roughly matches the height of a 2-row video grid. */
    min-height: 60vh;
}
@media (min-width: 768px) {
    .product-video-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.product-video-card__embed {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
}
.product-video-card__embed iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 1px solid #000;
}
.product-video-card__title {
    margin-top: 0.6rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}

/* Bottom-of-page clearance for the docked accessory strip lives INSIDE the last
   visible section so a dark feature-block / bundles section's background extends
   through the cleared area to the strip's top edge. A standalone spacer div would
   show as a white band against dark variants and break visual continuity. Only
   applied when the strip is rendered (.product-page--has-strip). */

/* ── Short product pages (no features / specs / videos / bundles) ──────────
   The sticky strip + buy bar combo is designed for content-rich pages where
   the footer is well below the fold. On a tiny replacement-part page the
   footer sits at the viewport bottom and the strip's z-49 vs footer's z-50
   leaves the strip hidden. For these pages we drop the buy bar entirely and
   park the strip statically as the last child of .product-page, just above
   the footer. min-height: 90vh keeps the page feeling intentional rather
   than letting the footer crowd the content. */
.product-page--short {
    min-height: 90vh;
    display: flex;
    flex-direction: column;
}
.product-page--short > * {
    flex: 0 0 auto;  /* don't let children stretch — content stays at top */
}
.product-page--short .product-sticky-accessories,
.product-page--short .product-sticky-accessories[data-collapsed="true"] {
    position: static;
    transform: none;
    z-index: auto;
    bottom: auto;
    margin-top: auto;                 /* pushes the strip to the bottom of .product-page */
    /* Break out of the .container max-width so the grey strip spans edge-to-edge
       like its fixed-positioned cousin. .container on .__inner keeps the card
       row aligned with the rest of the page content. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    transition: none;
    /* Guarantee breathing room between the content and the grey strip even when
       the content is tall enough that margin-top:auto collapses to 0 (e.g.
       MRTPLATE2). A transparent top border + padding-box clip shows the page
       background through it, reading as a 2rem gap above the strip while it
       stays pinned to the bottom. */
    border-top: 2rem solid transparent;
    background-clip: padding-box;
}
.product-page--short .product-sticky-buybar,
.product-page--short .product-sticky-accessory-drawer,
.product-page--short .product-sticky-accessory-drawer-backdrop {
    display: none !important;  /* short pages don't get the buy bar / drawer */
}
@media (max-width: 767px) {
    /* Override the mobile-only display:none on the strip so short-page
       mobile users still see accessories (no drawer is rendered for them). */
    .product-page--short .product-sticky-accessories { display: flex; }
    /* The __inner shorthand padding (0.5rem 0) zeroes the .container side
       padding, so the "Accessories" label sat against the screen edge — restore
       it to line up with the page content. */
    .product-page--short .product-sticky-accessories__inner {
        padding-left: 16px;
        padding-right: 16px;
    }
}


.product-page--has-strip .product-bundles { padding-bottom: 5.5rem; }
.product-page--has-strip .product-feature-blocks > .product-feature-block:last-child {
    padding-bottom: 8.5rem;
}
.product-page--has-strip .product-feature-blocks > .product-feature-block--variant-image-hero:last-child {
    padding-bottom: 12.5rem; /* preserves the variant's 4rem internal padding-bottom */
}
.product-page--has-strip .product-tabs__panel#tab-specs,
.product-page--has-strip .product-tabs__panel#tab-videos {
    padding-bottom: 5.5rem;
}
@media (max-width: 767px) {
    /* On mobile the strip is replaced by a chip + drawer; only the buy bar stays
       docked so the bottom clearance can drop to bar-height. */
    .product-page--has-strip .product-bundles,
    .product-page--has-strip .product-feature-blocks > .product-feature-block:last-child,
    .product-page--has-strip .product-tabs__panel#tab-specs,
    .product-page--has-strip .product-tabs__panel#tab-videos { padding-bottom: 4rem; }
    .product-page--has-strip .product-feature-blocks > .product-feature-block--variant-image-hero:last-child {
        padding-bottom: 8rem;
    }
}

/* ═══ Sticky buy bar ═══ */
/* Sticky buy bar — theme-independent dark treatment to match the site header (rgba(0,0,0,0.92)).
   Pairs with the lighter accessory strip above; together they read as a coherent dark command frame. */
.product-sticky-buybar {
    position: fixed;
    /* JS lifts the bar when the footer scrolls into view; the dock target
       puts the bar's TOP edge flush with the footer's top edge so the bar
       sits inside the footer's reserved padding-top area. */
    bottom: var(--bar-offset, 0px);
    left: 0;
    right: 0;
    background: #000;
    border-top: 1px solid #262626;
    border-bottom: 1px solid #262626;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    /* Above the footer (z-index 50) so the docked bar body shows on the
       footer's reserved padded area. */
    z-index: 51;
}
.product-sticky-buybar--visible {
    transform: translateY(0);
}
/* When the bar is NOT in its visible state, pin it to the true bottom so
   transform: translateY(100%) fully tucks it off-screen. `--bar-offset` is a
   footer-dock LIFT meant for the visible bar (and the accessories strip); on a
   short page the footer is already on screen, so the JS sets a large offset
   while the bar is still hidden — which lifts the translated-down bar back up
   into the viewport as an inert, z-51 ghost that covers content and blocks
   Add to Cart. Ignoring the offset until the bar is actually visible keeps the
   hidden bar reliably off-screen (no effect on long pages, where the offset is
   0 while hidden anyway). */
.product-sticky-buybar:not(.product-sticky-buybar--visible) {
    bottom: 0;
}
.product-sticky-buybar__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Was 0.75rem (12px) top+bottom. Adding 2px top / 4px bottom compensates
       for the 2px the accessory strip tucks into the bar's top edge — without
       it the visible content sat slightly low after the strip overlap landed. */
    padding: 14px 0 16px;
}
.product-sticky-buybar__name {
    font-weight: 600;
    color: #f5f5f5;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 1rem;
    border-right: 1px solid #fff;
}
.product-sticky-buybar__actions {
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;
}
/* Single CTA (Back-to-top was removed) — on products with variants or add-ons
   it reads "Choose Options & Add to Cart" and scrolls to the buy area; on simple
   products it's a direct "Add to Cart". Sized to match the Accessories chip
   (overrides the larger default .btn metrics; 1px border matches the chip's box
   so heights line up under border-box). */
.product-sticky-buybar .product-sticky-buybar__cta {
    white-space: nowrap;
    padding: 8px 16px;
    font-size: 0.8125rem;
    /* Match the Accessories chip: it's a <button> with no line-height rule, so
       it uses the UA default (normal, ~15px content). .btn forces line-height:1,
       so override back to normal or the CTA renders ~6px taller. */
    line-height: normal;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}
/* Section nav that replaced the price in the buy bar — the tab strip lives here
   once it scrolls off the top, so the links stay reachable. Takes the free space
   between the name and the right-hand chip/CTA. */
.product-sticky-buybar__tabs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-right: auto;
    min-width: 0;
    overflow: hidden;
}
.product-sticky-buybar__spacer { margin-right: auto; }
.product-sticky-buybar__tablink {
    background: none;
    border: none;
    color: #d4d4d4;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
}
.product-sticky-buybar__tablink:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}
.product-sticky-buybar__tablink--active {
    color: #ffffff;
    font-weight: 600;
}
/* External "Compare" link in the buy bar (monitors only) — an <a>, so no
   underline. */
.product-sticky-buybar__tablink--ext {
    text-decoration: none;
}
/* Price-in-button for the buy bar's Add to Cart (no-options products) — mirrors
   the top Add to Cart button but scaled to the compact bar metrics. */
.product-sticky-buybar__cta--atc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.product-sticky-buybar__cta--atc .btn-add-to-cart__label {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.product-sticky-buybar__cta--atc .btn-add-to-cart__total {
    font-size: 0.8125rem;
    font-weight: 600;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}
.product-sticky-buybar__cta--atc .btn-add-to-cart__total:empty { display: none; }
.product-sticky-buybar__cta--atc .btn-add-to-cart__compare {
    font-size: 0.7rem;
    font-weight: 500;
    text-decoration: line-through;
    opacity: 0.55;
    margin-left: 0.3rem;
    font-variant-numeric: tabular-nums;
}
.product-sticky-buybar__cta--atc .btn-add-to-cart__compare:empty { display: none; }
/* Button + chip overrides scoped to the dark buy bar so global .btn-primary / .btn-secondary stay theme-aware. */
.product-sticky-buybar .btn-primary {
    background: #ffffff;
    color: #0a0a0a;
    border-color: #ffffff;
}
.product-sticky-buybar .btn-primary:hover {
    background: #e5e5e5;
    border-color: #e5e5e5;
    color: #0a0a0a;
}
.product-sticky-buybar .btn-secondary {
    background: transparent;
    color: #f5f5f5;
    border-color: #4a4a4a;
}
.product-sticky-buybar .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-color: #6a6a6a;
}
.product-sticky-buybar .product-sticky-accessories__chip {
    color: #f5f5f5;
    border-color: #4a4a4a;
}
.product-sticky-buybar .product-sticky-accessories__chip:hover {
    background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 768px) {
    /* Too cramped for the section nav on phones — hide it (the tabs are still
       a short scroll away) and let the name take the free space so the chip +
       CTA stay pinned right. */
    .product-sticky-buybar__tabs { display: none; }
    .product-sticky-buybar__name {
        margin-right: auto;
        border-right: none;
        padding-right: 0;
    }
}
@media (max-width: 600px) {
    .product-sticky-buybar__name {
        font-size: 0.9rem;
    }
}

/* ═══ Mobile: collapse the buy bar to [name | ▲] + a full-height tray ═══ */
@media (max-width: 767px) {
    /* Drop the crowded bits — the ▲ opens the tray where they now live. */
    .product-sticky-buybar__actions,
    .product-sticky-buybar .product-sticky-accessories__chip {
        display: none;
    }
    /* The desktop per-frame footer-dock jitters on mobile (the URL bar resizes
       the viewport mid-scroll). Instead: pin to the bottom, and HIDE the bar
       when the footer scrolls in — a discrete IntersectionObserver toggle, no
       jump. */
    .product-sticky-buybar {
        bottom: var(--cookie-banner-height, 0px) !important;
        cursor: pointer;               /* the whole bar opens the tray */
    }
    /* Hidden / docked-at-footer states slide down far enough to also tuck away
       the arrow that protrudes above the bar's top edge. */
    .product-sticky-buybar:not(.product-sticky-buybar--visible),
    .product-sticky-buybar--visible.product-sticky-buybar--at-footer {
        transform: translateY(calc(100% + 34px));
    }
    /* Centered stack: the circular arrow floats above the top edge (a pull-tab),
       the product name sits centered beneath it. */
    .product-sticky-buybar__inner {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        /* The shorthand padding on __inner zeroes the .container side padding. */
        padding: 8px 16px 12px;
    }
    .product-sticky-buybar__tray-toggle {
        order: -1;                     /* arrow above the name */
        margin-top: -28px;             /* straddle the bar's top edge */
    }
    .product-sticky-buybar__name {
        font-size: 1rem;
        max-width: 100%;
        margin: 0;
        text-align: center;
        border-right: none;
        padding-right: 0;
    }
    /* The old bottom-sheet drawer is superseded by the tray on mobile. */
    .product-sticky-accessory-drawer,
    .product-sticky-accessory-drawer-backdrop {
        display: none !important;
    }
    /* Stop horizontal page drift — overflowing content was widening the page and
       dragging the fixed bar/tray controls off the right edge. Fixed elements
       aren't clipped by body (no containing-block change), so they stay put. */
    body { overflow-x: clip; }
    /* The frame-rate detail in <span class="fr"> is nowrap on desktop, so the long
       2K signal-format value (".../29.97PsF/25p/...") ran off the page on a phone.
       Let it — and any long spec token — wrap. */
    .specs-table__value .fr { white-space: normal; }
    .specs-table__label,
    .specs-table__value { overflow-wrap: anywhere; }
    /* The AutoCal matrix rows reuse the stock class for a full sentence — let it
       wrap (the short-hint nowrap rule below was forcing overflow). */
    #matrix-config-block .addon-row__stock { white-space: normal; }
    /* Tab strip: fill the row in equal segments so there's no 5px phantom
       horizontal scroll. Ellipsis guards against a long label on tiny screens. */
    .product-tabs__nav { overflow-x: hidden; }
    .product-tabs__tab {
        flex: 1 1 0;
        min-width: 0;
        padding-left: 6px;
        padding-right: 6px;
        text-align: center;
        font-size: 0.85rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Tray toggle — the themed circular scroll arrow (as used on the hero + carousel),
   pointing up. Centered in the bar. Shown on mobile, hidden on desktop (see the
   min-width:768px rule below). Default to flex so source order can't zero it out. */
.product-sticky-buybar__tray-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    /* Solid black disc matching the bar so the protruding half reads as a tab
       bump off the bar rather than a control floating over the page. */
    background: #000;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}
.product-sticky-buybar__tray-toggle img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
    transform: rotate(180deg);         /* scroll-down.png → point up */
}

/* Full-height product tray — mirrors the header drawer: covers everything below
   the site header, opaque, fades + slides in. */
.product-mobile-tray {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 980;                 /* covers page content, but sits BELOW the main
                                     site menu (990) and cart flyout (9998) — the
                                     product flyups are the lowest of the three. */
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear 0.25s;
}
.product-mobile-tray[data-open="true"] {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s linear 0s;
}
.product-mobile-tray__panel {
    position: absolute;
    inset: 0;
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.product-mobile-tray[data-open="true"] .product-mobile-tray__panel {
    opacity: 1;
    transform: translateY(0);
}
.product-mobile-tray__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}
.product-mobile-tray__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product-mobile-tray__close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius);
}
.product-mobile-tray__close:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); }
.product-mobile-tray__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 8px 0 16px;
}
.product-mobile-tray__links {
    display: flex;
    flex-direction: column;
}
.product-mobile-tray__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 1.0625rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
}
.product-mobile-tray__link:hover { background: rgba(255, 255, 255, 0.04); }
.product-mobile-tray__link-arrow { flex: 0 0 auto; color: var(--text-muted); }
.product-mobile-tray__section-label {
    padding: 20px 20px 12px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
}
/* Accessories in the tray are full-width rows (reusing .product-sticky-accessory-row)
   that scroll vertically with the rest of the tray — more legible than a
   horizontal card rail and it fills the space. */
.product-mobile-tray__accessories .product-sticky-accessory-row {
    padding-left: 20px;
    padding-right: 20px;
}
.product-mobile-tray__footer {
    flex: 0 0 auto;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: var(--bg-primary);
}
.product-mobile-tray__cta { width: 100%; }

/* Tray + its toggle are mobile-only. */
@media (min-width: 768px) {
    .product-mobile-tray { display: none !important; }
    .product-sticky-buybar__tray-toggle { display: none; }
}

/* ═══ Sticky accessories — strip (desktop) + chip + drawer (mobile) ═══ */

/* Strip wrapper — docked at bottom; pushed up by buy bar when bar is visible.
   Theme-independent dark "command bar" — stands out against light pages, blends with dark.
   Cards inside are explicitly white so they pop as product tiles on the dark shelf. */
.product-sticky-accessories {
    position: fixed;
    left: 0;
    right: 0;
    /* Same footer-dock offset the buy bar uses; the strip sits one tier
       above the buy bar via the translateY below. */
    bottom: var(--bar-offset, 0px);
    background: #404040;
    border-top: 1px solid #262626;
    /* Pushed up by the buy-bar's effective height, plus a 1px overshoot that
       tucks the strip's bottom edge INTO the bar's top. The bar (z-index 51)
       paints over the overlap so any sub-pixel mismatch between the layout-
       positioned `bottom` and the compositor `transform` is absorbed instead
       of letting the page background leak through as a hairline on light
       pages. The bar's padding-top is bumped 2px to keep its content visually
       centered despite the 1px the strip eats from the top. */
    transform: translateY(calc(-1 * var(--buybar-h, 0px) + 1px));
    /* Slower, eased slide so the collapse into the buy bar reads as a smooth
       tuck rather than an abrupt snap. */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 49;
}
.product-sticky-accessories[data-collapsed="true"] {
    /* Collapsed: slide off-screen below. 100% + buybar-h hides it past the
       buy bar; adding bar-offset accounts for the footer dock so the strip
       tucks behind/below the footer instead of sliding ON TOP of it. */
    transform: translateY(calc(100% + var(--buybar-h, 0px) + var(--bar-offset, 0px)));
}
.product-sticky-accessories__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    min-height: 72px;
}
.product-sticky-accessories__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #a1a1aa;
    flex: 0 0 auto;
    padding-right: 0.5rem;
}
.product-sticky-accessories__scroll {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    flex: 1 1 auto;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}
.product-sticky-accessories__scroll::-webkit-scrollbar {
    display: none; /* WebKit */
}

.product-sticky-accessory-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 220px;
    width: 220px;
    padding: 0.4rem 0.5rem;
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 6px;
    scroll-snap-align: start;
}
.product-sticky-accessory-card__thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: block;
    overflow: hidden;
    border-radius: 4px;
    background: #fff;
}
.product-sticky-accessory-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.product-sticky-accessory-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.product-sticky-accessory-card__name {
    font-size: 0.78rem;
    line-height: 1.25;
    color: #0a0a0a;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-sticky-accessory-card__name:hover { text-decoration: underline; }
.product-sticky-accessory-card__price {
    font-size: 0.8rem;
    font-weight: 600;
    color: #0a0a0a;
}
.product-sticky-accessory-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.15rem;
}
.product-sticky-accessory-card__add,
.product-sticky-accessory-card__view {
    flex: 0 0 auto;
    font-size: 0.75rem;
    padding: 0.3rem 0.55rem;
    white-space: nowrap;
}
.product-sticky-accessory-card__add[data-state="added"] {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}
.product-sticky-accessory-card__add[data-state="error"] {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

/* Chip — appears on the buy bar when strip is collapsed (desktop) or always on mobile */
.product-sticky-accessories__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    font-size: 0.8125rem;
    cursor: pointer;
    flex: 0 0 auto;
}
.product-sticky-accessories__chip:hover {
    background: var(--border);
}
.product-sticky-accessories__chip[aria-expanded="true"] .product-sticky-accessories__chip-chevron {
    transform: rotate(0deg);
}
.product-sticky-accessories__chip[aria-expanded="false"] .product-sticky-accessories__chip-chevron {
    transform: rotate(180deg);
}
.product-sticky-accessories__chip-chevron {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 0.65rem;
}

/* Hide the strip on mobile — drawer takes over */
@media (max-width: 767px) {
    .product-sticky-accessories {
        display: none;
    }
}

/* Compact buy-bar chip text on narrow screens */
@media (max-width: 480px) {
    .product-sticky-accessories__chip-label { display: none; }
}

/* Mobile drawer (bottom sheet) — only renders behavior on <=767px */
.product-sticky-accessory-drawer-backdrop {
    /* Stops at the top of the buy bar so the bar stays visible and tappable */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(var(--buybar-h, 64px));
    background: rgba(0, 0, 0, 0.45);
    z-index: 60; /* above strip (49); bar at 50 is not covered (see `bottom`) */
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.product-sticky-accessory-drawer-backdrop[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
}

.product-sticky-accessory-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--buybar-h, 64px));
    max-height: 60vh;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.5);
    transform: translateY(110%);
    transition: transform 0.25s ease;
    z-index: 61;
    display: flex;
    flex-direction: column;
}
.product-sticky-accessory-drawer[data-open="true"] {
    transform: translateY(0);
}

.product-sticky-accessory-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}
.product-sticky-accessory-drawer__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.product-sticky-accessory-drawer__close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    border-radius: 4px;
    min-height: 44px;
    min-width: 44px;
}
.product-sticky-accessory-drawer__close:hover {
    color: var(--text-primary);
    background: var(--border);
}

.product-sticky-accessory-drawer__list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.product-sticky-accessory-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border);
}
.product-sticky-accessory-row:last-child { border-bottom: none; }
.product-sticky-accessory-row__thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: block;
    overflow: hidden;
    border-radius: 4px;
    background: #fff;
}
.product-sticky-accessory-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.product-sticky-accessory-row__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.product-sticky-accessory-row__name {
    font-size: 0.9rem;
    line-height: 1.3;
    color: var(--text-primary);
    text-decoration: none;
}
.product-sticky-accessory-row__price {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}
.product-sticky-accessory-row__add,
.product-sticky-accessory-row__view {
    flex: 0 0 auto;
    white-space: nowrap;
}
.product-sticky-accessory-row__add[data-state="added"] {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}
.product-sticky-accessory-row__add[data-state="error"] {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

/* Drawer is mobile-only */
@media (min-width: 768px) {
    .product-sticky-accessory-drawer,
    .product-sticky-accessory-drawer-backdrop {
        display: none !important;
    }
}

.product-card--highlight {
    box-shadow: 0 0 0 3px var(--accent, #d4a017);
    transition: box-shadow 0.3s ease;
}

/* ─── Sticky accessories: prev/next scroll-arrow nav buttons ─── */
/* Always visible — disabled when there's nothing to scroll to. */
.product-sticky-accessories__nav {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid #404040;
    color: #f5f5f5;
    border-radius: var(--radius-sm);
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    align-self: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.product-sticky-accessories__nav:hover:not(:disabled) {
    background: #262626;
}
.product-sticky-accessories__nav:disabled {
    color: #71717a;
    border-color: #262626;
    cursor: default;
}

/* ═══ CMS-driven sub-nav bars ═══ */
.nav-sub-bar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 998;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(.16,1,.3,1), opacity 0.25s ease;
    pointer-events: none;
}
.nav-sub-bar--open {
    max-height: var(--nav-sub-bar-h, 56px);
    opacity: 1;
    pointer-events: auto;
}
.nav-sub-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    height: var(--nav-sub-bar-h, 56px);
}
.nav-sub-bar__link {
    color: var(--text-secondary, var(--text-muted));
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s ease;
    letter-spacing: 0.3px;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    padding: 0;
}
.nav-sub-bar__link:hover { color: var(--text-primary); }
.nav-sub-bar__link--has-children::after {
    content: ' ▾';
    font-size: 0.6em;
    opacity: 0.5;
}

.nav-sub-sub-bar {
    position: absolute;
    top: calc(100% + var(--nav-sub-bar-h, 56px));
    left: 0;
    right: 0;
    z-index: 997;
    background: var(--bg-elevated, #1a1a1a);
    border-bottom: 1px solid var(--border);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    pointer-events: none;
}
.nav-sub-sub-bar--open {
    max-height: 48px;
    opacity: 1;
    pointer-events: auto;
}
.nav-sub-sub-bar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    height: 48px;
}
.nav-sub-sub-bar__link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.15s ease;
    letter-spacing: 0.3px;
}
.nav-sub-sub-bar__link:hover { color: var(--text-primary); }

/* ── Mega-menu variant ─────────────────────────────────────────────────────
   Used by top-level nav items whose admin display_mode is "mega". Shares
   .nav-sub-bar's open/close lifecycle (same data-nav-bar attribute, same
   .nav-sub-bar--open class) but replaces the single-row layout with a
   multi-column grid panel. Override max-height so the taller panel can
   actually expand — the dropdown variant's 56px would clip everything. */
.nav-sub-bar--mega.nav-sub-bar--open {
    max-height: 80vh;
    overflow: auto;
}
.nav-mega {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px 40px;
    padding-block: 28px 32px;
    align-items: start;
}
.nav-mega__column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.nav-mega__column-header {
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding-bottom: 8px;
    text-decoration: none;
}
.nav-mega__image {
    display: block;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-card);
    text-decoration: none;
    line-height: 0;
}
.nav-mega__image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.32s ease;
}
a.nav-mega__image:hover img {
    transform: scale(1.02);
}
.nav-mega__image-caption {
    position: absolute;
    left: 10px;
    bottom: 8px;
    right: 10px;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.nav-mega__column-header--link:hover {
    color: var(--accent, var(--text-primary));
}
.nav-mega__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.nav-mega__link {
    display: block;
    color: var(--text-secondary, var(--text-muted));
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1.4;
    padding: 2px 0;
    transition: color 0.15s ease;
}
.nav-mega__link:hover { color: var(--text-primary); }

/* ── Bundle detail page extras ───────────────────────────────────────── */
/* "Save $X" line under the bundle Add-to-Cart button. Centered, bold caps,
   green. Tracks (savings_per_unit × qty) — addons don't change per-unit
   savings since they apply at full price to both the price and the strike. */
.product-actions__cta {
    flex: 1;
    position: relative;
}
.bundle-page-savings {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #16a34a;
    pointer-events: none;
}
.bundle-page-savings:empty { display: none; }

.bundle-included {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 1rem;
}
.bundle-included__card {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-card);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.bundle-included__card:hover {
    border-color: var(--text-secondary, var(--text-muted));
    transform: translateY(-1px);
}
.bundle-included__thumb {
    aspect-ratio: 4 / 3;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.bundle-included__thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 8px;
}
.bundle-included__body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Fill the card's residual height so the price row's margin-top: auto
       can pin it to the bottom of every card uniformly, regardless of how
       many lines the product name wraps to. */
    flex: 1;
}
.bundle-included__name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
    line-height: 1.3;
}
.bundle-included__price {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    /* Anchor to the bottom-right of the card body — every card's price
       lines up horizontally across the row even when names wrap to a
       different number of lines. */
    margin-top: auto;
    text-align: right;
}
.bundle-included__qty {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* ── "What's Included" list variant ───────────────────────────────────
   Stacked rows: fixed thumb on the left, name + quick description (product
   Meta Description) in the middle, price pinned right. Reads top-to-bottom
   so you can scan how the bundle fits together. */
.bundle-included--list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bundle-included__row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.bundle-included__row:hover {
    border-color: var(--text-secondary, var(--text-muted));
    transform: translateY(-1px);
}
/* Fixed thumb — never stretches to match the text block's height. */
.bundle-included--list .bundle-included__thumb {
    flex: 0 0 120px;
    width: 120px;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
}
.bundle-included__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bundle-included__desc {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-muted);
    /* Two-line clamp keeps every row a quick read and uniform height. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bundle-included--list .bundle-included__price {
    flex: 0 0 auto;
    margin-top: 0;
    align-self: center;
    white-space: nowrap;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}
@media (max-width: 560px) {
    .bundle-included__row {
        flex-wrap: wrap;
        gap: 12px;
    }
    .bundle-included__main { flex: 1 1 60%; }
    .bundle-included--list .bundle-included__price {
        align-self: flex-start;
        margin-left: auto;
    }
}

/* Mobile drawer sub-sub — deeper indent + a small step down in size/tone so
   nested (accordion) children read as one level in, while staying legible. */
.mobile-nav__link--subsub {
    padding-left: 3.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* ═══ Feature block section variants — full-bleed alternating bands ═══
   The product detail container constrains feature blocks to its width by
   default. The variant rules below break out to full viewport width using
   negative margins, then re-pad inwards so content stays at container width.
   --variant-default keeps the existing layout untouched. */

/* Shared full-bleed envelope for non-default variants */
.product-feature-block--variant-light,
.product-feature-block--variant-silver,
.product-feature-block--variant-grey,
.product-feature-block--variant-black,
.product-feature-block--variant-black-hero,
.product-feature-block--variant-image-hero {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(1rem, calc(50vw - 50%));
    padding-right: max(1rem, calc(50vw - 50%));
    padding-top: 4rem;
    padding-bottom: 4rem;
    /* Cancel the default margin between sections so bands butt up */
    margin-top: 0;
}

/* Light shelf — pure white */
.product-feature-block--variant-light {
    background: #ffffff;
}

/* Silver shelf — mid-light slab between light and grey */
.product-feature-block--variant-silver {
    background: #e9e9e9;
}

/* Grey slab — between light and black for mid-tone bands */
.product-feature-block--variant-grey {
    background: #222222;
}

/* Black slab */
.product-feature-block--variant-black {
    background: #000000;
}

/* Text overrides inside dark variants (grey, black, black-hero) — body is the
   wrapping div for the title + body_html, so casting all common prose elements
   is enough. Use specificity that beats global storefront.css color rules. */
.product-feature-block--variant-grey .product-section__title,
.product-feature-block--variant-black .product-section__title,
.product-feature-block--variant-black-hero .product-section__title,
.product-feature-block--variant-grey .product-feature-block__body,
.product-feature-block--variant-black .product-feature-block__body,
.product-feature-block--variant-black-hero .product-feature-block__body,
.product-feature-block--variant-grey .product-feature-block__body p,
.product-feature-block--variant-black .product-feature-block__body p,
.product-feature-block--variant-black-hero .product-feature-block__body p,
.product-feature-block--variant-grey .product-feature-block__body h2,
.product-feature-block--variant-black .product-feature-block__body h2,
.product-feature-block--variant-black-hero .product-feature-block__body h2,
.product-feature-block--variant-grey .product-feature-block__body h3,
.product-feature-block--variant-black .product-feature-block__body h3,
.product-feature-block--variant-black-hero .product-feature-block__body h3,
.product-feature-block--variant-grey .product-feature-block__body h4,
.product-feature-block--variant-black .product-feature-block__body h4,
.product-feature-block--variant-black-hero .product-feature-block__body h4,
.product-feature-block--variant-grey .product-feature-block__body h5,
.product-feature-block--variant-black .product-feature-block__body h5,
.product-feature-block--variant-black-hero .product-feature-block__body h5,
.product-feature-block--variant-grey .product-feature-block__body li,
.product-feature-block--variant-black .product-feature-block__body li,
.product-feature-block--variant-black-hero .product-feature-block__body li {
    color: #f5f5f5;
}

/* Slightly muted secondary prose (italic notes, captions) inside dark variants */
.product-feature-block--variant-grey .product-feature-block__body em,
.product-feature-block--variant-black .product-feature-block__body em,
.product-feature-block--variant-black-hero .product-feature-block__body em,
.product-feature-block--variant-grey .product-feature-block__body small,
.product-feature-block--variant-black .product-feature-block__body small,
.product-feature-block--variant-black-hero .product-feature-block__body small {
    color: #a1a1aa;
}

/* Inline links in dark variants — a bright blue that stays legible on the dark
   (#222 / #000) backgrounds, no underline, lighter on hover. */
.product-feature-block--variant-grey .product-feature-block__body a,
.product-feature-block--variant-black .product-feature-block__body a,
.product-feature-block--variant-black-hero .product-feature-block__body a {
    color: #60a5fa;
    text-decoration: none;
}
.product-feature-block--variant-grey .product-feature-block__body a:hover,
.product-feature-block--variant-black .product-feature-block__body a:hover,
.product-feature-block--variant-black-hero .product-feature-block__body a:hover {
    color: #93c5fd;
}

/* Black hero — the block image is set as background via inline-style. Add a
   gradient overlay for legibility, and lay content over it. */
.product-feature-block--variant-black-hero {
    background-color: #000000;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    isolation: isolate; /* keep the overlay scoped to this section */
}
.product-feature-block--variant-black-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 100%);
    z-index: 0;
}
.product-feature-block--variant-black-hero > * {
    position: relative;
    z-index: 1;
}

/* Image hero — like black-hero but full viewport-height with a fixed-attachment
   background, producing a "scroll-over" parallax effect. Content centers
   vertically inside the 100vh slab. Falls back to scroll-attachment on mobile
   since iOS Safari has known issues with fixed backgrounds. */
.product-feature-block--variant-image-hero {
    min-height: 100vh;
    background-color: #000000;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.product-feature-block--variant-image-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.65) 100%);
    z-index: 0;
}
.product-feature-block--variant-image-hero > * {
    position: relative;
    z-index: 1;
}
@media (max-width: 768px) {
    .product-feature-block--variant-image-hero {
        background-attachment: scroll;
    }
}

/* Image-hero inherits the dark-variant text + link colors */
.product-feature-block--variant-image-hero .product-section__title,
.product-feature-block--variant-image-hero .product-feature-block__body,
.product-feature-block--variant-image-hero .product-feature-block__body p,
.product-feature-block--variant-image-hero .product-feature-block__body h2,
.product-feature-block--variant-image-hero .product-feature-block__body h3,
.product-feature-block--variant-image-hero .product-feature-block__body h4,
.product-feature-block--variant-image-hero .product-feature-block__body h5,
.product-feature-block--variant-image-hero .product-feature-block__body li {
    color: #f5f5f5;
}
.product-feature-block--variant-image-hero .product-feature-block__body em,
.product-feature-block--variant-image-hero .product-feature-block__body small {
    color: #a1a1aa;
}
.product-feature-block--variant-image-hero .product-feature-block__body a {
    color: #60a5fa;
    text-decoration: none;
}
.product-feature-block--variant-image-hero .product-feature-block__body a:hover {
    color: #93c5fd;
}

/* Disable the inline-image grid layout for non-default variants when the
   block also happens to have an image — the image is rendered inline as
   normal in default/light/grey/black, but for black-hero / image-hero it's
   the background and the inline image is suppressed by product.php anyway. */

/* ═══ Product detail hero layout ═══
   When products.use_hero_layout = 1, the product detail wrapper gets the
   --hero modifier and an inline background-image. This rule restructures
   the existing gallery + info markup into a full-viewport hero with content
   over top/bottom gradients. Mobile shrinks to a fixed-height banner. */

.product-hero-splash {
    /* Break out of the page container — full viewport width. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(2rem, calc(50vw - 50%));
    padding-right: max(2rem, calc(50vw - 50%));
    margin-bottom: 2.5rem;

    /* Image background, fixed for parallax-style scroll-over */
    background-color: #000;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    /* Subtract the fixed header so the splash fills exactly the visible
       viewport (and the scroll-down arrow at the bottom is on-screen). */
    min-height: calc(100vh - var(--header-height));
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    box-sizing: border-box;

    color: #f5f5f5;
    position: relative;
    isolation: isolate;
}

/* Top gradient — keeps the breadcrumb legible against any image */
.product-hero-splash::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 35%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 0;
    pointer-events: none;
}

/* Bottom gradient — soft transition into the standard product detail below */
.product-hero-splash::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 0;
    pointer-events: none;
}

.product-hero-splash > * {
    position: relative;
    z-index: 1;
}

/* Breadcrumb sits at the top of the splash, white-on-image */
.product-hero-splash > .breadcrumbs {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
}
.product-hero-splash > .breadcrumbs .breadcrumbs__item {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}
.product-hero-splash > .breadcrumbs .breadcrumbs__item:hover {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.product-hero-splash > .breadcrumbs .breadcrumbs__separator {
    color: rgba(255, 255, 255, 0.4);
}
.product-hero-splash > .breadcrumbs .breadcrumbs__current {
    color: rgba(255, 255, 255, 0.95);
}

/* Scroll-down indicator — pinned to the bottom center of the splash. Click
   smooth-scrolls to the product detail; fades out as the user scrolls. */
.product-hero-splash__scroll {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 400ms ease, transform 400ms ease;
    z-index: 2;
    animation: product-hero-splash-bounce 2.4s ease-in-out infinite;
}
.product-hero-splash__scroll img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
.product-hero-splash__scroll:hover {
    opacity: 1;
}
.product-hero-splash__scroll:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
    border-radius: 50%;
}
.product-hero-splash__scroll--hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 12px);
}

@keyframes product-hero-splash-bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 8px); }
}
.product-hero-splash__scroll--hidden { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .product-hero-splash__scroll { animation: none; }
}

@media (max-width: 768px) {
    .product-hero-splash {
        min-height: calc(70vh - var(--header-height));
        padding-top: 1rem;
        padding-bottom: 1.5rem;
        margin-bottom: 1.5rem;
        background-attachment: scroll;
    }
    .product-hero-splash__scroll {
        width: 48px;
        height: 48px;
        bottom: 1rem;
    }
}

/* Hero pages on phones: drop the full-bleed hero splash entirely (it crops
   poorly on narrow screens) and lead with the white product content, exactly
   like a non-hero page. The breadcrumb rendered on the white area replaces the
   one that lived inside the splash. Desktop keeps the hero unchanged. */
.product-hero-mobile-crumb { display: none; }

@media (max-width: 767px) {
    .product-hero-splash { display: none; }
    .product-hero-mobile-crumb {
        display: block;
        padding-top: 1.25rem;
    }
}

/* iOS Safari (iPad + iPhone) cannot render `background-attachment: fixed` — it
   paints the hero BLACK. The width-based `scroll` overrides above only catch
   ≤768px, so iPad at 810/820/834 (portrait) and 1024+ (landscape) still got
   `fixed` → black screen. Force `scroll` on every touch/no-hover device
   regardless of width; real desktops (fine pointer + hover) keep the parallax. */
@media (hover: none) and (pointer: coarse) {
    .product-hero-splash,
    .product-feature-block--variant-image-hero {
        background-attachment: scroll;
    }
}

/* ── Design modals (HDR, Dolby Vision, etc.) — opened by [data-modal=slug] ── */
body.design-modal-open { overflow: hidden; }

.design-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.design-modal[hidden] { display: none; }

.design-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    cursor: pointer;
}

.design-modal__panel {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: 85vh;
    overflow-y: auto;
    background: #fafafa;
    color: #2f2f2f;
    border-radius: 8px;
    padding: 32px 36px 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    line-height: 1.6;
}

.design-modal__close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: transparent;
    border: 0;
    font-size: 32px;
    line-height: 1;
    color: #777;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 4px;
}
.design-modal__close:hover { color: #000; background: rgba(0, 0, 0, 0.05); }

.design-modal__title {
    margin: 0 0 16px;
    font-size: 1.5rem;
    color: #1a1a1a;
}

.design-modal__body h5 {
    margin: 1.25em 0 0.4em;
    font-size: 1.1rem;
    color: #1a1a1a;
    font-weight: 600;
}
.design-modal__body p { margin: 0 0 0.85em; }
.design-modal__body a { color: #0066b8; text-decoration: underline; }
.design-modal__body a:hover { color: #003a6b; }

/* Inline trigger link (also used by token expansion). Authors can style with
   any of their own classes; this is a minimal default. */
a[data-modal] {
    cursor: pointer;
}

/* ----------------------------------------------------------------------
   Delivery-method tabs (checkout). Two-card horizontal strip — Ship vs.
   Pickup or Provide My Own Courier. Active card is bright/highlighted,
   inactive is muted. Mirrors the familiar checkout pattern from Shopify
   and similar — the entire card is the click target.
   ---------------------------------------------------------------------- */
.delivery-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0;
}

.delivery-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1rem 0.75rem;
    background: var(--bg-secondary, rgba(255,255,255,0.04));
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md, 8px);
    color: var(--text-secondary, #888);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
}

.delivery-tab svg {
    stroke: currentColor;
    flex-shrink: 0;
}

.delivery-tab:hover {
    color: var(--text-primary, #fff);
    border-color: var(--text-secondary, #888);
}

.delivery-tab.is-active {
    color: var(--text-primary, #fff);
    border-color: var(--accent, #c00);
    background: var(--bg-primary, transparent);
    box-shadow: 0 0 0 1px var(--accent, #c00) inset;
}

/* While the cookie banner is open, lift any fixed-bottom UI off the
   banner so they don't collide. --cookie-banner-height is set by the
   consent script in footer.php from the banner's actual rendered height
   (varies with mobile wrap). The sticky strips already use --bar-offset
   for the footer-dock effect, so we add to it rather than replacing. */
body.has-cookie-banner .product-sticky-buybar,
body.has-cookie-banner .product-sticky-accessories {
    bottom: calc(var(--bar-offset, 0px) + var(--cookie-banner-height, 0px));
}
/* Short product pages park the accessories strip IN FLOW (position:static), so
   the `bottom` lift above does nothing for them — the fixed cookie banner
   (z-9999) ends up covering the strip's nav arrows / Add buttons and you can't
   click them. Reserve page-bottom space equal to the banner height so the
   in-flow strip + footer can scroll clear of the banner. No-op once the banner
   is dismissed (--cookie-banner-height is removed → falls back to 0). */
body.has-cookie-banner {
    padding-bottom: var(--cookie-banner-height, 0px);
}

@media (max-width: 540px) {
    .delivery-tabs { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------
   Choice cards (checkout). A "choice card" is a radio option with an
   optional unfurling body of related fields (e.g. PO number, customer-
   carrier form). The body lives OUTSIDE the <label> click target so
   clicks inside the form don't bubble back into the radio. .is-open on
   the parent fuses the head and body visually — the head loses its
   bottom border-radius and bottom-border color while the body's INNER
   picks up the matching border + radius. max-height transition gives
   a reliable open/close animation (the grid-template-rows trick wasn't
   collapsing cleanly in all browsers, leaving residual padding).
   ---------------------------------------------------------------------- */
.choice-card {
    margin-bottom: 0.5rem;
}

.choice-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    background: transparent;
    transition: border-radius 0.2s ease, border-bottom-color 0.2s ease;
}

/* Accepted-card brand row in the Credit Card header + live-detected brand echo
   inside the number field. Icons dim to spotlight the detected network. */
.cc-brands { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; }
.cc-brand { display: inline-flex; transition: opacity .15s ease; }
.cc-brand svg { display: block; width: 34px; height: 22px; }
.cc-brand.is-dim { opacity: 0.25; }
.cc-num-wrap { position: relative; }
.cc-num-wrap .cc-number-input { padding-right: 52px; }
.cc-num-brand { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: inline-flex; pointer-events: none; }
.cc-num-brand svg { display: block; width: 34px; height: 22px; }
@media (max-width: 480px) {
    .cc-brands .cc-brand:nth-child(n+4) { display: none; } /* keep the header tidy on phones */
}

.choice-card__head input[type="radio"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

/* Outer body is a pure clipping container — max-height: 0 + overflow: hidden
   collapses it to 0 height with no residual padding/border showing through.
   All visual styling (border, radius, padding) lives on the inner so the
   outer's box is literally invisible when closed. 600px is a generous cap
   that covers every form we currently render into a choice-card body. */
.choice-card__body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
}

.choice-card.is-open > .choice-card__body {
    max-height: 600px;
    transition: max-height 0.35s ease;
}

.choice-card__body-inner {
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
}

.choice-card.is-open > .choice-card__head {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}