/* ──────────────────────────────────────────────────────────────────────────────
   MembersOnlyShopSupplies.com — Design System
   Brand: Industrial Black · Brand Red · Hazard Yellow
   "The Only Factory Direct Warehouse Serving Auto Body Shops and Technicians"
   ────────────────────────────────────────────────────────────────────────────── */

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

/* ── CSS Custom Properties ───────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:        #F8F8F8;
  --surface:   #FFFFFF;
  --surface-2: #F2F2F2;

  /* Text */
  --text:      #111111;
  --muted:     #555555;
  --border:    #CCCCCC;

  /* Brand Black (header, footer, badges) */
  --brand-black:       #111111;
  --brand-black-hover: #222222;

  /* Brand Red (primary actions, links) */
  --primary:       #CC1F1F;
  --primary-hover: #A81A1A;

  /* Hazard Yellow (savings, member pricing, CTAs) */
  --accent:        #F5C518;
  --accent-hover:  #D4AC10;
  --accent-text:   #111111; /* text on yellow backgrounds */

  /* Status */
  --success: #15803D;
  --warning: #D97706;
  --danger:  #DC2626;
  --info:    #0369A1;

  /* Radius — slightly sharper for industrial feel */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Layout */
  --container: 1280px;
  --transition: 150ms ease;
}

/* ── Reset ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

/* ── Typography ──────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); }
h4 { font-size: 1.125rem; }
p { color: var(--muted); }
.text-sm     { font-size: 0.875rem; }
.text-xs     { font-size: 0.8125rem; }
.text-muted  { color: var(--muted); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-white  { color: #fff; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold   { font-weight: 700; }
.font-black  { font-weight: 900; }
.sku         { font-size: 0.8125rem; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.uppercase   { text-transform: uppercase; letter-spacing: 0.06em; }

/* ── Container & Layout ──────────────────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 640px) { .container { padding: 0 16px; } }

/* ── Responsive 2-column grid — stacks on mobile ─────────────────────────────── */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .grid-2col { grid-template-columns: 1fr; } }

.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-1  { gap: 4px; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.gap-6  { gap: 24px; }
.gap-8  { gap: 32px; }

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

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* Spacing */
.mt-2 { margin-top: 8px; }   .mt-4 { margin-top: 16px; }   .mt-6 { margin-top: 24px; }   .mt-8 { margin-top: 32px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; }
.p-4  { padding: 16px; }  .p-6  { padding: 24px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }
.py-8 { padding-top: 32px; padding-bottom: 32px; }
.py-12{ padding-top: 48px; padding-bottom: 48px; }
.py-16{ padding-top: 64px; padding-bottom: 64px; }
.py-20{ padding-top: 80px; padding-bottom: 80px; }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 0.9375rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  text-decoration: none;
  /* Long labels ("PLACE ORDER & CHARGE $30.85 (INCL. CARD FEE)") must wrap
     inside the button, not spill out of it — especially in narrow cards and
     on mobile/app WebView. Table action buttons re-add nowrap below. */
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
  max-width: 100%;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.875rem;
}
/* Action buttons must NEVER wrap — a squeezed flex row (flex-wrap:nowrap +
   shrink) would otherwise break the label one-letter-per-line. Covers small
   buttons everywhere AND any button inside a table cell, regardless of whether
   the table carries the .admin-table/.table-actions class (the memberships,
   orders, and other admin lists use plain styled <table>s). The table wrappers
   already scroll horizontally (overflow-x:auto), so nowrap buttons overflow
   into the scroll area instead of collapsing vertically. */
.table-actions .btn,
.admin-table td .btn,
td .btn,
.btn-sm { white-space: nowrap; }
.btn-sm { padding: 7px 14px; font-size: 0.8125rem; flex-shrink: 0; }
.btn-lg { padding: 14px 28px; font-size: 0.9375rem; }

/* Primary = Brand Red */
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }

/* Accent = Hazard Yellow */
.btn-accent { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); }

/* Black */
.btn-dark { background: var(--brand-black); color: #fff; border-color: var(--brand-black); }
.btn-dark:hover { background: #333; border-color: #333; color: #fff; }

/* Secondary = white/outlined */
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--surface-2); border-color: #aaa; color: var(--text); }

/* Ghost */
.btn-ghost { background: transparent; color: var(--primary); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); }

.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { opacity: 0.9; }

/* Force white text on red-background buttons (anchors inherit color: var(--primary) otherwise) */
a.btn-primary, a.btn-primary:hover, a.btn-primary:focus,
a.btn-danger, a.btn-danger:hover, a.btn-danger:focus { color: #fff; }
a.btn-dark, a.btn-dark:hover, a.btn-dark:focus { color: #fff; }

/* Utility: red background sections — ensures all nested text is white */
.bg-primary { background: var(--primary); color: #fff; }
.bg-primary a:not(.btn) { color: #fff; text-decoration: underline; }
.bg-primary p, .bg-primary li, .bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary span { color: inherit; }

/* ── Cards ───────────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
.card-body   { padding: 24px; overflow-wrap: break-word; word-break: break-word; }
.card-header { padding: 14px 24px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: .9375rem; }
.card-footer { padding: 14px 24px; border-top: 1px solid var(--border); background: var(--surface-2); }

/* ── Badges ──────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-primary { background: #FEE2E2; color: var(--primary); }
.badge-accent  { background: var(--accent); color: var(--accent-text); }
.badge-success { background: #F0FDF4; color: var(--success); }
.badge-warning { background: #FFFBEB; color: var(--warning); }
.badge-danger  { background: #FEF2F2; color: var(--danger); }
.badge-dark    { background: var(--brand-black); color: #fff; }
.badge-muted   { background: var(--surface-2); color: var(--muted); }
.badge-savings { background: var(--accent); color: var(--accent-text); border: 1px solid var(--accent-hover); }
.badge-member  { background: var(--primary); color: #fff; }

/* ── Form Inputs ─────────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.form-label { font-size: 0.875rem; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .04em; }
.form-label .required { color: var(--primary); margin-left: 2px; }

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
  line-height: 1.5;
}
/* Shorthand .input alias used in admin view forms */
.input {
  display: block;
  width: 100%;
  padding: 9px 13px;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
  line-height: 1.5;
}
.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(204,31,31,.1);
}
select.input { appearance: auto; }
textarea.input { resize: vertical; min-height: 80px; }

/* .form-control — the Bootstrap-shaped alias.
   It was used in admin views but had NO rule anywhere, so every field carrying
   it fell back to the browser default: 1px grey box, ~2px padding, text
   touching the border. Defined here rather than renamed in the views so the
   next person who reaches for the familiar name gets the design system. */
.form-control {
  display: block;
  width: 100%;
  padding: 9px 13px;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
  line-height: 1.5;
}
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(204,31,31,.1);
}
.form-control::placeholder { color: var(--muted); opacity: .75; }
.form-control:disabled, .form-control[readonly] { background: var(--surface-2); color: var(--muted); }
select.form-control { appearance: auto; }
textarea.form-control { resize: vertical; min-height: 80px; padding: 12px 14px; }

.form-textarea { resize: vertical; min-height: 100px; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(204, 31, 31, 0.12);
}
.form-input.error, .form-select.error, .form-textarea.error { border-color: var(--danger); }
.form-help  { font-size: 0.8125rem; color: var(--muted); }
.form-error { font-size: 0.8125rem; color: var(--danger); font-weight: 600; }

/* Toggle switch */
.toggle { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; cursor: pointer; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute; inset: 0;
  background: #9CA3AF;
  border: 2px solid #6B7280;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 2px; top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition);
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.toggle input:checked + .toggle-slider { background: var(--primary); border-color: var(--primary-hover); }
.toggle input:checked + .toggle-slider::before { transform: translateX(22px); }
.toggle:focus-within .toggle-slider { outline: 2px solid var(--primary); outline-offset: 2px; }
.toggle-wrap { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.toggle-label { font-size: .9375rem; font-weight: 600; color: var(--text); }

/* ── Flash / Alerts ──────────────────────────────────────────────────────────── */
.alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  border-left: 4px solid;
}
.alert-success { background: #F0FDF4; color: var(--success); border-color: var(--success); }
.alert-error   { background: #FEF2F2; color: var(--danger);  border-color: var(--danger); }
.alert-warning { background: #FFFBEB; color: var(--warning); border-color: var(--warning); }
.alert-info    { background: #EFF6FF; color: var(--info);    border-color: var(--info); }
.alert-dismiss {
  margin-left: auto; background: none; border: none;
  color: inherit; opacity: .5; cursor: pointer; padding: 0; font-size: 1.2rem; line-height: 1;
}
.alert-dismiss:hover { opacity: 1; }

/* ── HEADER — White with dark text ──────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 2px 0 var(--primary);
}

/* Desktop grid: logo | nav (1fr) | actions | kas apple.
   Actions get their OWN column so the nav can never slide underneath the
   account/cart icons + Join Free — that overlap is what broke when the 6th
   nav item (Buy & Sell) was added. */
.header-grid {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 24px;
}

/* Logo — spans both rows */
.site-header .site-logo {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  padding: 6px 0;
}

/* Mobile hamburger — hidden on desktop, positioned by mobile media query */
.site-header .mobile-menu-btn { display: none; }

/* Nav — center column, row 1 on desktop */
.site-header .site-nav {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

/* Row 2: shop + search — spans nav + actions columns, row 2 */
.header-row2 {
  grid-column: 2 / 4;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 0 8px;
  border-top: 1px solid #e0e0e0;
}
.header-row2__shop {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--primary);
  background: none;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--transition);
}
.header-row2__shop:hover { color: #111; }
.header-row2__shop.active { color: #111; }
.header-row2__shop svg { stroke: currentColor; }
.header-row2 .header-search--big { flex: 1; max-width: calc(100% - 200px); }
.header-row2 .header-search--big input { padding: 8px 16px 8px 40px; font-size: .9rem; }

/* Kas Apple branding — spans both rows, stacked vertically */
.kas-apple-header {
  grid-column: 4;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 2px;
  padding: 6px 0;
}
.kas-apple-header img { height: 68px; width: auto; }
.kas-apple-header span {
  font-size: .6rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  line-height: 1;
}

/* Hide mobile-only Shop link on desktop (it's in row 2) */
.site-nav .mobile-only-shop { display: none; }

/* Logo image */
.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  color: var(--brand-black);
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}
.site-logo span { color: var(--primary); }
.site-logo img {
  height: 76px;
  width: auto;
  object-fit: contain;
}
/* Fallback text logo if image missing */
.site-logo-text {
  font-size: 1rem;
  font-weight: 900;
  color: var(--brand-black);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: uppercase;
}
.site-logo-text .only { color: var(--accent); }
.site-logo-text .sub  { display: block; font-size: .6rem; font-weight: 600; color: var(--primary); letter-spacing: .1em; margin-top: 1px; }

/* Top bar above nav (tagline strip) */
.header-tagline {
  background: var(--primary);
  color: #fff;
  text-align: center;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 0;
}

/* Nav */
.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav a {
  padding: 7px 10px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
/* Slightly tighten nav links on mid-size desktops so the 6th item (Buy & Sell)
   never slides under the header icons/JOIN FREE. */
@media (min-width: 981px) and (max-width: 1200px) {
  .site-nav a { padding: 7px 7px; letter-spacing: .01em; font-size: 0.82rem; }
  .header-grid { column-gap: 14px; }
}
.site-nav a:hover {
  color: var(--primary);
  background: rgba(0,0,0,.04);
}
.site-nav a.active {
  color: #fff;
  background: var(--primary);
}

/* Search */
/* Mobile nav search — hidden on desktop, shown only inside the open mobile menu */
.mobile-nav-search { display: none; }
.header-search { flex: 1; max-width: 380px; position: relative; }
.header-search input {
  width: 100%;
  padding: 8px 14px 8px 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--transition), background var(--transition);
}
.header-search input::placeholder { color: var(--muted); }
.header-search input:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
}
.header-search .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }

/* Header actions — own grid column (3), between nav and kas apple */
.header-actions {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  align-self: center;
}
.header-icon-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: background var(--transition), color var(--transition);
  text-decoration: none;
}
.header-icon-btn:hover { background: rgba(0,0,0,.05); color: var(--primary); }
.header-icon-btn--active { color: var(--primary); }
.user-online-dot {
  position: absolute; bottom: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #16a34a; border: 2px solid #fff;
  box-sizing: content-box;
}
.header-icon-btn .badge-count {
  position: absolute; top: 4px; right: 4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--primary); color: #fff;
  font-size: .6875rem; font-weight: 700;
  border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
}

.mobile-menu-btn { display: none; background: none; border: none; color: var(--text); padding: 8px; }

@media (max-width: 900px) {
  /* Switch from grid to simple flexbox on mobile */
  .header-grid {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    flex-wrap: nowrap;
  }
  .site-nav { display: none; }
  .header-row2 { display: none; }
  .kas-apple-header { display: none !important; }
  .site-header .mobile-menu-btn { display: flex; order: 4; }
  .site-header .site-logo { order: 1; flex: 1; padding: 0; }
  .site-logo img { height: 48px; }
  /* Actions visible on mobile — icons + Join Free */
  .header-actions {
    display: flex; order: 3; margin-left: auto;
    grid-column: unset; grid-row: unset; justify-self: unset;
  }
  .header-actions .btn-secondary { display: none; }
  .site-nav.open {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff;
    border-top: 2px solid var(--primary);
    padding: 12px 16px; gap: 4px;
    box-shadow: var(--shadow-md);
    z-index: 99;
  }
  .site-nav.open a { width: 100%; }
  .site-nav.open .mobile-only-shop { display: block !important; }
  .site-nav.open .mobile-nav-search { display: block; width: 100%; }
}

@media (max-width: 600px) {
  .site-logo img { height: 40px; }
  .header-actions .btn-primary { display: none; }
}

/* ── HERO — Bright Split Layout ──────────────────────────────────────────────── */
.hero {
  background: #FFFFFF;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
/* When hero has a background image: dark overlay + white text */
.hero.hero-has-image {
  background-size: cover;
  background-position: center;
  border-bottom: none;
}
.hero.hero-has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--hero-overlay-opacity, 0.55));
  z-index: 1;
}
.hero.hero-has-image .container { position: relative; z-index: 2; }
.hero.hero-has-image h1 { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.hero.hero-has-image .hero-sub { color: rgba(255,255,255,.9); text-shadow: 0 1px 4px rgba(0,0,0,.3); }
.hero.hero-has-image .hero-eyebrow { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.3); }
.hero.hero-has-image .hero-trust { border-top-color: rgba(255,255,255,.2); }
.hero.hero-has-image .hero-trust-item { color: rgba(255,255,255,.9); }
.hero.hero-has-image .hero-trust-item svg { color: var(--accent, #F5C518); }

.hero-split {
  display: grid;
  grid-template-columns: 1fr 400px;
  min-height: 460px;
  align-items: stretch;
}

.hero-content {
  padding: 72px 48px 72px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Red accent side panel */
.hero-panel {
  background: var(--primary);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.hero-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(0,0,0,.08) 0px,
    rgba(0,0,0,.08) 10px,
    transparent 10px,
    transparent 20px
  );
}

.hero-panel-title {
  font-size: 1.125rem;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .04em;
  position: relative;
  z-index: 1;
}

.hero-price-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 20px;
  position: relative;
  z-index: 1;
}
.hero-price-card .hpc-label {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 14px;
}
.hero-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
}
.hero-price-row.member-row {
  background: #FFF0F0;
  border: 1.5px solid #FFBCBC;
}
.hero-price-row.retail-row {
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.hero-price-row.savings-row {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
}
.hpr-label { font-size: .8rem; font-weight: 700; }
.hpr-label.red { color: var(--primary); }
.hpr-label.muted { color: var(--muted); }
.hpr-label.yellow { color: #92600A; }
.hpr-price { font-size: 1.25rem; font-weight: 900; }
.hpr-price.red { color: var(--primary); }
.hpr-price.muted { color: var(--muted); font-size: 1rem; text-decoration: line-through; }
.hpr-price.yellow { color: #92600A; }
.hero-panel-cta { position: relative; z-index: 1; }
.hero-panel-cta a {
  display: block; text-align: center;
  background: var(--accent); color: var(--accent-text);
  font-weight: 800; font-size: .875rem; text-transform: uppercase; letter-spacing: .05em;
  padding: 12px 20px; border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}
.hero-panel-cta a:hover { background: var(--accent-hover); transform: translateY(-1px); }
.hero-panel-note { font-size: .75rem; color: rgba(255,255,255,.7); text-align: center; position: relative; z-index: 1; }

/* Content side */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: #FFF0F0;
  color: var(--primary);
  border: 1.5px solid #FFBCBC;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 20px;
  width: fit-content;
}

.hero h1 {
  color: var(--text);
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.1;
  max-width: 560px;
  margin-bottom: 16px;
}
.hero h1 .highlight { color: var(--primary); }

.hero-sub {
  color: var(--muted);
  font-size: clamp(.9375rem, 1.5vw, 1.0625rem);
  max-width: 480px;
  margin-bottom: 28px;
  line-height: 1.7;
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }

/* Where the shop is — address + phone under the hero CTA (323).
   Sits between the actions and the trust bar, so the actions lose their
   bottom margin only when it is present (the rule below), never when the
   address is unset and the block does not render at all. */
.hero-loc { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: -18px 0 30px; }
.hero-loc-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .875rem; font-weight: 600; color: var(--muted);
  text-decoration: none; line-height: 1.4;
}
.hero-loc-item svg { color: var(--primary); flex-shrink: 0; }
.hero-loc-item:hover { color: var(--primary); text-decoration: underline; }
.hero.hero-has-image .hero-loc-item { color: rgba(255,255,255,.92); text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.hero.hero-has-image .hero-loc-item svg { color: var(--accent, #F5C518); }
.hero.hero-has-image .hero-loc-item:hover { color: #fff; }
@media (max-width: 640px) { .hero-loc { gap: 8px 16px; margin: -14px 0 24px; } }

/* Trust bar below actions */
.hero-trust {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.hero-trust-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.875rem; color: var(--muted); font-weight: 600;
}
.hero-trust-item svg { color: var(--primary); flex-shrink: 0; }

@media (max-width: 1024px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-panel  { display: none; }
  .hero-content { padding: 48px 0; }
}
@media (max-width: 640px) {
  .hero-actions .btn { flex: 1; justify-content: center; min-width: 140px; }
  .hero-trust { gap: 12px; }
}

/* ── Hazard stripe divider ───────────────────────────────────────────────────── */
.hazard-stripe {
  height: 8px;
  background: repeating-linear-gradient(
    -45deg,
    var(--accent) 0px,
    var(--accent) 10px,
    var(--brand-black) 10px,
    var(--brand-black) 20px
  );
}

/* ── Section headers ─────────────────────────────────────────────────────────── */
.section-header { margin-bottom: 40px; }
.section-header h2 { margin-bottom: 10px; }
.section-header p  { font-size: 1.0625rem; max-width: 600px; }
.section-header.center { text-align: center; }
.section-header.center p { margin: 0 auto; }

/* Section label (uppercase red) */
.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--primary);
  margin-bottom: 8px;
  border-left: 3px solid var(--primary);
  padding-left: 10px;
}

/* ── Product card ────────────────────────────────────────────────────────────── */
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: #bbb;
}

.product-card-image {
  aspect-ratio: 1;
  background: var(--surface-2);
  overflow: hidden;
  position: relative;
}
.product-card-image img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 12px;
}
.product-card-image .card-badges {
  position: absolute;
  top: 10px; left: 10px;
  display: flex; flex-direction: column; gap: 4px;
}

.product-card-body { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.product-card-brand { font-size: 0.7rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.product-card-title { font-size: 0.9rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.product-card-sku   { font-size: 0.75rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.product-card-desc  { font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }

.product-card-pricing {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--surface-2);
}

.price-member-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.price-label    { font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.price-member   { font-size: 1.125rem; font-weight: 900; color: var(--primary); }
.price-regular  { font-size: 0.8125rem; color: var(--muted); text-decoration: line-through; }
.price-savings  { font-size: 0.75rem; font-weight: 800; background: var(--accent); color: var(--accent-text); padding: 1px 7px; border-radius: var(--radius-pill); }

.product-card-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  background: var(--surface-2);
}
.product-card-footer .btn { flex: 1; justify-content: center; font-size: .8125rem; padding: 8px 12px; }

/* Stock badges */
.stock-in  { color: var(--success); font-size: .8125rem; font-weight: 700; }
.stock-out { color: var(--danger);  font-size: .8125rem; font-weight: 700; }
.stock-low { color: var(--warning); font-size: .8125rem; font-weight: 700; }

/* ── Category card — bright with red left accent ─────────────────────────────── */
.category-card {
  background: #FFFFFF;
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  align-items: center;
  min-height: 90px;
  padding: 20px 20px 20px 18px;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.category-card:hover {
  border-color: var(--primary);
  border-left-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.category-card .cat-name {
  font-size: .9375rem;
  font-weight: 800;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.2;
}
.category-card .cat-count {
  font-size: .8rem;
  color: var(--muted);
  font-weight: 500;
  margin-top: 4px;
}
.category-card .cat-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  opacity: 0.15;
}

/* ── Tables ──────────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th {
  background: var(--brand-black);
  color: rgba(255,255,255,.8);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 10px 16px;
  text-align: left;
  white-space: nowrap;
}
td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #FAFAFA; }

/* Admin data cells don't wrap by default — headers already don't (above).
   Without this, a wide actions column squeezes short columns (dates, amounts)
   until "May 21, 2026" wraps onto 3 lines. Admin tables sit in horizontal-
   scroll containers, so a wide table just scrolls instead of squishing.
   Opt a genuinely long free-text cell back into wrapping with class="wrap". */
.admin-content table td { white-space: nowrap; }
.admin-content table td.wrap,
.admin-content table th.wrap { white-space: normal; min-width: 180px; }

/* ── Breadcrumb ──────────────────────────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: .8125rem; color: var(--muted);
  margin-bottom: 16px; flex-wrap: wrap;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { color: var(--border); }
.breadcrumb .current { color: var(--text); font-weight: 600; }

/* ── Pricing compare block ───────────────────────────────────────────────────── */
.pricing-compare { display: flex; flex-direction: column; gap: 6px; }
.pricing-member-row { display: flex; align-items: baseline; gap: 8px; }
.savings-tag {
  display: inline-flex; align-items: center;
  padding: 2px 10px;
  background: var(--accent); color: var(--accent-text);
  border-radius: var(--radius-pill);
  font-size: 0.75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
}

/* ── Membership banner ───────────────────────────────────────────────────────── */
.membership-banner {
  background: var(--brand-black);
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.membership-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 6px; height: 100%;
  background: repeating-linear-gradient(-45deg, var(--accent) 0, var(--accent) 6px, var(--brand-black) 6px, var(--brand-black) 12px);
}
.membership-banner .banner-content { flex: 1; padding-left: 8px; }
.membership-banner .banner-title { font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: 4px; }
.membership-banner .banner-desc  { font-size: 0.875rem; color: rgba(255,255,255,.7); }

/* ── Filters sidebar ─────────────────────────────────────────────────────────── */
.shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; padding-top: 40px; padding-bottom: 60px; }

@media (max-width: 900px) {
  .shop-layout { grid-template-columns: 1fr; padding-top: 24px; padding-bottom: 24px; gap: 16px; }

  /* Slide-in sidebar filter panel */
  .shop-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px; z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto; background: #fff;
    border-right: 1px solid var(--border);
    border-radius: 0;
    max-height: none;
  }
  .shop-sidebar.open { transform: translateX(0); }

  /* Filter toggle button — shown only on mobile */
  .shop-filter-toggle {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: .875rem; font-weight: 700;
    cursor: pointer; margin-top: 4px; margin-bottom: 12px;
  }
}
.shop-sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:199; }
.shop-sidebar-backdrop.active { display:block; }
@media (min-width: 901px) {
  .shop-filter-toggle { display: none; }
}

.filter-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: sticky;
  top: 84px;
}
.filter-panel-header {
  background: var(--brand-black);
  color: #fff;
  padding: 12px 16px;
  font-size: .875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex; justify-content: space-between; align-items: center;
}
.filter-section { padding: 16px; border-bottom: 1px solid var(--border); }
.filter-section:last-child { border-bottom: none; }
.filter-section-title { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text); margin-bottom: 10px; }
.filter-option { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .875rem; color: var(--text); cursor: pointer; }
.filter-option input { accent-color: var(--primary); width: 15px; height: 15px; }

/* ── Footer ──────────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--brand-black);
  color: rgba(255,255,255,.75);
  padding: 48px 0 0;
  border-top: 4px solid var(--primary);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: 0; margin-bottom: 16px; }
  .site-footer { padding: 24px 0 0; }
  .footer-brand { margin-bottom: 8px; }
  .footer-brand p { font-size: .8125rem; }
  .footer-bottom { font-size: .75rem; padding: 12px 0; }

  /* Accordion footer columns on mobile */
  .footer-col--accordion { border-bottom: 1px solid rgba(255,255,255,.1); }
  .footer-col--accordion h4.footer-col__toggle {
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; padding: 14px 0; margin: 0; border-bottom: none;
    font-size: .9rem; color: #fff; font-weight: 700;
    text-transform: none; letter-spacing: 0;
  }
  .footer-col__plus { font-size: 1.25rem; font-weight: 400; color: rgba(255,255,255,.6); transition: transform .2s; }
  .footer-col--accordion.open .footer-col__plus { transform: rotate(45deg); }
  .footer-col--accordion .footer-col__links { display: none; padding-bottom: 12px; }
  .footer-col--accordion.open .footer-col__links { display: block; }
}
@media (min-width: 769px) {
  /* Always show footer links on desktop */
  .footer-col--accordion .footer-col__links { display: block !important; }
  .footer-col--accordion h4.footer-col__toggle { cursor: default; }
  .footer-col__plus { display: none; }
}

.footer-brand .footer-logo { display: block; margin-bottom: 14px; }
.footer-brand .footer-logo img { height: 44px; width: auto; }
.footer-brand .footer-logo-text { font-size: 1.1rem; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: -.01em; }
.footer-brand .footer-logo-text span { color: var(--accent); }
.footer-brand p { font-size: .875rem; line-height: 1.6; color: rgba(255,255,255,.6); }

.footer-col h4 {
  color: var(--accent);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-col a { display: block; color: rgba(255,255,255,.65); font-size: .875rem; padding: 3px 0; transition: color var(--transition); }
/* Footer contact row */
.footer-contact-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.footer-contact-row > span { white-space: nowrap; }
@media (max-width: 480px) {
  .footer-contact-row { flex-direction: column; align-items: flex-start; text-align: left; }
  .footer-contact-row > span { white-space: normal; }
}
/* On desktop: always show links, hide accordion plus icon */
.footer-col__plus { display: none; }
.footer-col__links { display: block; }
@media (max-width: 480px) { .footer-col__plus { display: inline; } }
.footer-col a:hover { color: var(--accent); }

.hazard-footer-stripe {
  height: 8px;
  background: repeating-linear-gradient(-45deg, var(--accent) 0, var(--accent) 10px, var(--brand-black) 10px, var(--brand-black) 20px);
  margin-bottom: 0;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 16px 0;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; font-size: .8125rem; color: rgba(255,255,255,.4);
}

/* ── Admin sidebar ───────────────────────────────────────────────────────────── */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 256px;
  background: var(--brand-black);
  color: rgba(255,255,255,.85);
  display: flex; flex-direction: column;
  flex-shrink: 0;
  position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
  border-right: 3px solid var(--primary);
}
.admin-sidebar-logo {
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.admin-sidebar-logo img { height: 40px; width: auto; margin-bottom: 4px; }
.admin-sidebar-logo a { font-size: 1rem; font-weight: 900; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: -.01em; }
.admin-sidebar-logo a span { color: var(--accent); }
.admin-sidebar-logo .sub { font-size: .65rem; font-weight: 700; color: rgba(255,255,255,.35); letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }

.admin-nav { padding: 10px 10px; flex: 1; }
.admin-nav-section-label { font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.3); padding: 14px 10px 5px; }
.admin-nav a {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 14px;
  font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.65);
  border-radius: 6px; transition: background var(--transition), color var(--transition);
  margin-bottom: 2px; text-decoration: none;
}
.admin-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.admin-nav a.active {
  background: rgba(220, 38, 38, .14);
  color: var(--accent);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--accent);
}
.admin-nav a svg { flex-shrink: 0; opacity: .7; }
.admin-nav a.active svg, .admin-nav a:hover svg { opacity: 1; }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-topbar {
  height: 60px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 24px; gap: 16px;
  position: sticky; top: 0; z-index: 50;
}
.admin-topbar h1 { font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.admin-topbar .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.admin-topbar .topbar-user  { font-size: .875rem; color: var(--muted); }
.admin-content { padding: 24px; flex: 1; }

.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; }
.stat-card .stat-label { font-size: .75rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.stat-card .stat-value { font-size: 2rem; font-weight: 900; color: var(--text); line-height: 1; }
.stat-card .stat-change { font-size: .8125rem; color: var(--muted); margin-top: 6px; }
.stat-card.stat-primary { border-left: 4px solid var(--primary); }
.stat-card.stat-accent  { border-left: 4px solid var(--accent); }

.admin-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.admin-page-header h1 { font-size: 1.375rem; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }

/* Settings tabs */
.settings-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--border); margin-bottom: 28px; flex-wrap: wrap; }
.settings-tab {
  padding: 10px 16px; font-size: .8125rem; font-weight: 700;
  color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px;
  text-decoration: none; transition: color var(--transition);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.settings-tab:hover { color: var(--primary); }
.settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.settings-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 24px; }
.settings-section-header { padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.settings-section-header h3 { font-size: .9375rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.settings-section-header p  { font-size: .8125rem; color: var(--muted); margin-top: 4px; }
.settings-row { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.settings-row:last-child { border-bottom: none; }
.settings-row-info { flex: 1; }
.settings-row-info .label { font-size: .9375rem; font-weight: 600; color: var(--text); }
.settings-row-info .desc  { font-size: .8125rem; color: var(--muted); margin-top: 3px; }
.settings-row-control { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; min-width: 80px; }

/* ── Pagination ──────────────────────────────────────────────────────────────── */
.pagination { display: flex; align-items: center; gap: 4px; justify-content: center; padding: 24px 0; }
.pagination a, .pagination span {
  display: flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px;
  border-radius: 6px; font-size: .875rem; font-weight: 700;
  color: var(--muted); border: 2px solid var(--border);
  transition: all var(--transition);
}
.pagination a:hover { background: var(--surface-2); color: var(--primary); border-color: var(--primary); }
.pagination .active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pagination .disabled { opacity: .4; pointer-events: none; }

/* ── Empty state ─────────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 64px 24px; color: var(--muted); }
.empty-state svg { margin: 0 auto 16px; opacity: .3; }
.empty-state h3 { font-size: 1.125rem; color: var(--text); margin-bottom: 8px; }
.empty-state p  { font-size: .9375rem; margin-bottom: 24px; }

/* ── Utility ─────────────────────────────────────────────────────────────────── */
.hidden   { display: none !important; }
.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; }
.divider  { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-full   { width: 100%; }

/* ── Mobile compact sections ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero-content { padding: 32px 0; }
  .hero h1 { font-size: 1.5rem; }
  .py-16 { padding-top: 32px; padding-bottom: 32px; }
}
@media (max-width: 480px) {
  .container { padding: 0 12px; }
  .py-16 { padding-top: 24px; padding-bottom: 24px; }
}

/* ── Sticky bottom navigation bar (mobile app-like) ────────────────────────── */
.mobile-bottom-nav { display: none; }
@media (max-width: 900px) {
  /* ── Safe-area: push header below notch/Dynamic Island ── */
  .site-header {
    padding-top: env(safe-area-inset-top, 0);
  }
  .mobile-bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    height: calc(56px + env(safe-area-inset-bottom, 0));
    background: #fff; border-top: 1px solid var(--border);
    box-shadow: 0 -2px 8px rgba(0,0,0,.06); z-index: 100;
    justify-content: space-around; align-items: flex-start;
    padding: 4px 8px env(safe-area-inset-bottom, 0);
  }
  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: .625rem; font-weight: 700; color: var(--muted);
    text-decoration: none; padding: 4px 0; transition: color var(--transition);
    flex: 1;
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }
  .mobile-bottom-nav a.active,
  .mobile-bottom-nav button.active { color: var(--primary); }
  .mobile-bottom-nav a:hover,
  .mobile-bottom-nav button:hover { color: var(--primary); }
  .mobile-bottom-nav svg { width: 22px; height: 22px; }
  /* Add padding to main content and footer so bottom nav doesn't overlap */
  main, .site-footer { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); }
}

/* ── Shop sidebar close button (mobile) ─────────────────────────────────────── */
.shop-sidebar-close {
  display: none;
  padding: 12px 16px;
  background: var(--brand-black); color: #fff;
  font-size: .875rem; font-weight: 700;
  border: none; width: 100%; text-align: left; cursor: pointer;
  text-transform: uppercase; letter-spacing: .04em;
}
@media (max-width: 900px) {
  .shop-sidebar-close { display: flex; align-items: center; justify-content: space-between; }
}

/* ── Van product picker ──────────────────────────────────────────────────────
   Shared by the van page and the inventory page's "load a rep's van" box.
   Defined once: two copies of an autocomplete drift, and the second one is
   always the one nobody notices is broken. */
/* Move stock — one product picker driving two actions. */
/* ⚠️ `hidden` LOSES to a class that sets display. The UA stylesheet's
   [hidden]{display:none} is beaten by .vanmove-chosen{display:flex}, so the
   "chosen product" panel showed as an empty bordered box the moment the page
   loaded — before anything had been picked. Any component here that toggles
   with `hidden` needs this, and it must come first so nothing later re-shows it. */
.vanmove [hidden] { display: none !important; }

/* The dropdown must escape the card. .card is overflow:hidden, so without this
   the list is sliced off at the card's bottom edge. */
.vanmove-card { overflow: visible !important; position: relative; z-index: 30; }

.vanmove { display:flex; gap:20px; flex-wrap:wrap; align-items:flex-end; }
.vanmove-label { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
  font-weight:700; color:var(--muted,#6b7280); margin-bottom:5px; line-height:1.2; }
/* Every control is label-above-input in its own column, so the boxes sit on one
   baseline no matter how long a label is. */
.vanmove-field { display:flex; flex-direction:column; }
.vanmove-search { position:relative; flex:1 1 340px; min-width:260px; display:flex; flex-direction:column; }
.vanmove-actions { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.vanmove-form { margin:0; }
/* Match the buttons to the input height so the row reads as one strip. */
.vanmove .form-control { height:42px; }
.vanmove-actions .btn { height:42px; display:inline-flex; align-items:center; }

/* The dropdown sits over the page, so a long list cannot push the buttons
   around while you are reading it. */
.vanmove-results { position:absolute; z-index:60; left:0; right:0; top:100%; margin-top:4px;
  background:var(--surface,#fff); border:1.5px solid var(--border,#e5e7eb); border-radius:8px;
  box-shadow:0 12px 28px rgba(0,0,0,.13); max-height:290px; overflow-y:auto; }
.vanmove-hit { display:flex; gap:10px; align-items:baseline; width:100%; text-align:left;
  padding:9px 13px; background:none; border:none; cursor:pointer; font:inherit;
  border-bottom:1px solid var(--border,#eee); }
.vanmove-hit:last-child { border-bottom:none; }
.vanmove-hit:hover, .vanmove-hit.is-on { background:var(--surface-2,#f6f6f6); }
.vanmove-hit code { font-size:.78rem; color:var(--primary,#CC1F1F); }
.vanmove-hit-name { flex:1; font-size:.875rem; }
.vanmove-hit-qty { font-size:.75rem; color:var(--muted,#6b7280); white-space:nowrap; }
/* A case in the picker. It loads a MULTIPLE of what the typed number says, so
   it must never be mistaken for the loose product sitting next to it. */
.vanmove-hit.is-case { background:var(--surface-2,#f6f6f6); }
.vanmove-hit.is-case:hover, .vanmove-hit.is-case.is-on { background:#EEF2FF; }
.vanmove-hit-tag { font-size:.62rem; font-weight:700; letter-spacing:.05em; padding:1px 6px;
  border-radius:999px; background:#E0E7FF; color:#3730A3; margin-left:6px; vertical-align:middle; }
.vanmove-none { padding:12px 13px; font-size:.85rem; color:var(--muted,#6b7280); }

/* Companion options for the picked product — the hardener that physically
   travels with a clearcoat. Styled like the order screen's "choose one" so the
   same kit reads the same way wherever you are loading it. */
.vanmove-options { margin-top:10px; padding:11px 13px; border-radius:8px;
  background:var(--surface-2,#f9fafb); border:1px solid var(--border,#e5e7eb);
  border-left:3px solid #F59E0B; }
.vanmove-fixed { font-size:.83rem; margin-bottom:6px; }
.vanmove-fixed code, .vanmove-opt code { font-size:.76rem; color:var(--muted,#6b7280); }
.vanmove-optgroup { margin-top:8px; }
.vanmove-optgroup:first-child { margin-top:0; }
.vanmove-optgroup-t { font-size:.83rem; font-weight:700; margin-bottom:4px; }
.vanmove-optgroup-t .req { color:var(--danger,#dc2626); }
.vanmove-opt { display:inline-flex; align-items:center; gap:5px; margin:0 14px 4px 0;
  font-size:.84rem; cursor:pointer; }

/* Once chosen, the box is replaced by the answer — you should not have to read
   a SKU back to check you picked the right thing. */
.vanmove-chosen { display:flex; gap:10px; align-items:center; padding:9px 12px;
  border:1.5px solid var(--brand-black,#111); border-radius:8px; background:var(--surface,#fff); }
.vanmove-chosen-name { font-weight:700; font-size:.9rem; }
.vanmove-chosen-meta { font-size:.78rem; color:var(--muted,#6b7280); flex:1; }
.vanmove-clear { border:none; background:none; cursor:pointer; font-size:1rem;
  color:var(--muted,#6b7280); padding:0 4px; }
.vanmove-clear:hover { color:var(--primary,#CC1F1F); }
@media (max-width:640px) { .vanmove-actions { width:100%; } .vanmove-form { flex:1; } .vanmove-form .btn { width:100%; } }

/* ── Print ───────────────────────────────────────────────────────────────────── */
/* Shown only on paper. Kept out of the screen flow entirely so a print header
   (title, filter, date, count) can exist without cluttering the page. */
.print-only { display: none !important; }

/* ⚠️ A print-only TABLE needs more than `.print-only` to stay hidden.
   The mobile card layout sets `display: block !important` on
   `.admin-content table.admin-table` and its cells — a two-class-plus-element
   selector, which BEATS a bare `.print-only`. Without this, a print sheet
   built as an .admin-table pops into view on any narrow screen, stacked as
   cards, directly under the real table. Same trap as `[hidden]` losing to a
   class that sets display.
   The @media print rules win these back by id, which outranks all of it. */
.admin-content table.admin-table.print-only,
.admin-content table.admin-table.print-only thead,
.admin-content table.admin-table.print-only tbody,
.admin-content table.admin-table.print-only tfoot,
.admin-content table.admin-table.print-only tr,
.admin-content table.admin-table.print-only td,
.admin-content table.admin-table.print-only th { display: none !important; }

@media print {
  .site-header, .site-footer, .admin-sidebar, .admin-topbar, .no-print { display: none !important; }
  .print-only { display: block !important; }
  /* Rows the operator did not tick. Applied by JS just before printing so a
     selection prints as a selection, not as the whole page with ink wasted. */
  .print-skip { display: none !important; }
  body { font-size: 12px; }

  /* ⚠️ THE PRINTED PAGE MUST NOT ASK FOR A FONT CHROME CANNOT EMBED.
     `body` is 'Inter', pulled from Google Fonts as a VARIABLE font — and
     Chrome's PDF backend cannot embed one of those. It does not quietly fall
     back to a system face either: it writes the glyphs as **Type3** fonts,
     little drawing procedures with no font program behind them at all
     (`/BaseFont` is absent from the file entirely). Every screen renders that
     perfectly, which is exactly why the print PREVIEW looks right and the
     paper does not.

     A printer's own PDF interpreter is not a screen. The Brother MFC-L5800DW
     is on the Microsoft IPP Class Driver — a driverless queue that hands the
     printer the PDF and makes its firmware parse it — and that firmware has
     no Type3 support, so it printed one line: "Unsupported PDF data for
     Direct Print:1000" and nothing else. Measured with Chrome's own
     --print-to-pdf against a 125-row copy of the customers sheet: with Inter
     the file carries {"Type3":4} and no BaseFont; with this rule it carries
     {"Type0":2,"CIDFontType2":2} as AAAAAA+ArialMT / BAAAAA+Arial-BoldMT —
     and 13 sheets of paper become 10.

     ⚠️ IT HAS TO REACH `html, body`, not just the sheet. Scoping the override
     to the print table alone was measured and STILL produced Type3, which
     would have read as a fix that changed nothing.
     ⚠️ AND IT IS GLOBAL, never per page. Every Chrome printout on this site
     draws from the same webfont — both list sheets, the invoice, the pick
     slip, the truck sheets, the public `?t=` invoice — so a per-page fix is
     how one of them gets missed and comes out blank on somebody's printer
     months later, with nothing on screen ever looking wrong. */
  html, body,
  .admin-content, .admin-content table, .admin-content th, .admin-content td,
  .admin-content caption, .print-only, .print-only *,
  table.admin-table, table.admin-table th, table.admin-table td,
  table.admin-table caption { font-family: Arial, Helvetica, sans-serif !important; }

  /* Deliberate monospace survives, pinned to a named face rather than left to
     `ui-monospace`. Measured: on this machine that resolves to Consolas and
     Consolas embeds cleanly (DAAAAA+Consolas), so it is NOT a second source of
     the Type3 bug today — the pin is here because `ui-monospace` resolves to
     whatever a given machine happens to have, and this rule exists precisely
     to stop the printed page depending on that. ⚠️ Specificity has to beat
     `table.admin-table td` (0,1,2) above, or these cells silently flatten to
     Arial instead. */
  code, kbd, pre, samp, [style*="monospace"],
  .admin-content [style*="monospace"],
  table.admin-table td[style*="monospace"],
  table.admin-table th[style*="monospace"] { font-family: "Courier New", Courier, monospace !important; }

  /* Cards are screen furniture — on paper they become boxes around boxes. */
  .admin-content .card { border: none !important; box-shadow: none !important; padding: 0 !important; }
  .admin-content { padding: 0 !important; margin: 0 !important; }
  /* A long table must repeat its headings on every sheet, or page 2 is a wall
     of numbers with nothing saying which column is which. */
  .admin-table thead { display: table-header-group !important; }
  .admin-table tr { page-break-inside: avoid; }
  .admin-table th { background: #000 !important; color: #fff !important;
                    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .badge { border: 1px solid #999 !important; color: #000 !important; background: none !important; }
  a[href]:after { content: none !important; }   /* no URLs sprayed after every link */
  /* Restore native <table> layout when printing — undoes the mobile
     card layout in case admin prints from a phone-sized viewport. */
  .admin-content table.admin-table,
  .admin-content table.admin-table thead,
  .admin-content table.admin-table tbody,
  .admin-content table.admin-table tfoot,
  .admin-content table.admin-table tr,
  .admin-content table.admin-table td,
  .admin-content table.admin-table th { display: revert !important; width: auto !important; margin: 0 !important; padding: revert !important; }
  .admin-content table.admin-table thead { display: table-header-group !important; }
  .admin-content table.admin-table tbody { display: table-row-group !important; }
  .admin-content table.admin-table tfoot { display: table-footer-group !important; }
  .admin-content table.admin-table tr { display: table-row !important; border-radius: 0 !important; }
  .admin-content table.admin-table td,
  .admin-content table.admin-table th { display: table-cell !important; }
  .admin-content table.admin-table tbody td::before { content: none !important; }

  /* ⚠️ THESE MUST COME AFTER THE RULES ABOVE.
     `display: revert !important` on every th/td beat `.no-print`, so hidden
     columns printed anyway — checkboxes and edit boxes appeared on the paper.
     And `padding: revert !important` stripped the cell padding, which is why
     headings ran together as "ON HANDRESERVEDAVAILABLE". Same specificity, so
     order decides; these win by being last. */
  .admin-content table.admin-table th.no-print,
  .admin-content table.admin-table td.no-print,
  .no-print { display: none !important; }

  /* ⚠️ And the TABLE itself. The rule above covers cells but not the element
     carrying both classes: `.admin-content table.admin-table` (0,2,1) still
     outranks a bare `.no-print` (0,1,0), so a whole table marked no-print
     printed anyway. That is how the orders sheet came out TWICE — the rich
     screen table, then the flat print table underneath it. Needs its own
     selector at matching specificity. */
  .admin-content table.admin-table.no-print,
  .admin-content table.admin-table.no-print thead,
  .admin-content table.admin-table.no-print tbody,
  .admin-content table.admin-table.no-print tfoot,
  .admin-content table.admin-table.no-print tr,
  .admin-content table.admin-table.no-print td,
  .admin-content table.admin-table.no-print th { display: none !important; }

  /* Print the table like a spreadsheet: tight rows, ruled cells, numbers right
     aligned. The default admin spacing is built for a mouse, and on paper it
     wastes half the sheet. */
  .admin-content table.admin-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 9pt !important;
    table-layout: auto !important;
  }
  .admin-content table.admin-table th,
  .admin-content table.admin-table td {
    padding: 3px 6px !important;
    border: 1px solid #999 !important;
    line-height: 1.25 !important;
    vertical-align: top !important;
  }
  .admin-content table.admin-table th {
    font-size: 8pt !important;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
  }
  /* Quantities read as a column of figures, not as prose. Marked with a class,
     not nth-child — a hidden column still counts structurally, so positional
     rules silently shift by one the moment a column is added or hidden. */
  .admin-content table.admin-table th.num,
  .admin-content table.admin-table td.num { text-align: right !important; }
  .admin-content table.admin-table code { font-size: 8.5pt !important; color: #000 !important; }
  /* Row striping and hover are screen affordances; on paper they are grey ink. */
  .admin-content table.admin-table tr:hover td,
  .admin-content table.admin-table tbody tr:nth-child(even) td { background: none !important; }
  @page { margin: 12mm 10mm; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PHASE 2 — CATALOG / SHOP STYLES
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Shop layout (sidebar + main) ────────────────────────────────────────────── */
@media (min-width: 901px) {
  .shop-sidebar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
}
.sidebar-section { padding: 16px; border-bottom: 1px solid var(--border); }
.sidebar-section:last-child { border-bottom: none; }
.sidebar-title {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 10px;
}
.sidebar-list { list-style: none; padding: 0; margin: 0; }
.sidebar-list li { margin: 0; }
.sidebar-link {
  display: block; padding: 5px 8px; border-radius: 4px;
  font-size: .875rem; color: var(--text); text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.sidebar-link:hover { background: var(--surface-2); color: var(--primary); }
.sidebar-link.active { background: var(--primary); color: #fff; font-weight: 700; }
.sidebar-link--sub { padding-left: 20px; font-size: .8125rem; }
.sidebar-sublist { list-style: none; padding: 0; margin: 2px 0 0 0; }

.shop-main { min-width: 0; }
.shop-header-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 12px;
}
.shop-page-title { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
.shop-count { font-size: .875rem; color: var(--muted); margin-top: 2px; }
.shop-sort select { font-size: .875rem; }

/* ── Product grid ────────────────────────────────────────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.product-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) { .product-grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .product-grid--4 { grid-template-columns: repeat(2, 1fr); } .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) {
  .product-grid, .product-grid--4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .product-card__body { padding: 10px; }
  .product-card__name { font-size: .8125rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .product-card__price { font-size: .9375rem; }
  .product-card__desc { display: none; }
  .product-card-footer .btn { font-size: .75rem; padding: 6px 8px; }
}
body { overflow-x: hidden; }

/* ── Product card (new component) ───────────────────────────────────────────── */
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.product-card:hover { box-shadow: var(--shadow-md); border-color: #bbb; transform: translateY(-2px); }

.product-card__image-wrap {
  display: block; position: relative;
  aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--surface-2);
}
.product-card__image {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.35s ease;
}
.product-card:hover .product-card__image { transform: scale(1.04); }

.product-card__badge {
  position: absolute; top: 8px; left: 8px;
  font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 8px; border-radius: var(--radius-pill);
}
.product-card__badge--featured { background: var(--accent); color: var(--accent-text); }
.product-card__badge--oos      { background: var(--danger); color: #fff; }
.product-card__badge--low      { background: var(--warning); color: #fff; }

.product-card__body { padding: 14px; display: flex; flex-direction: column; flex: 1; }
.product-card__brand { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.product-card__name { font-size: .9375rem; font-weight: 700; line-height: 1.35; margin-bottom: 6px; }
.product-card__name a { color: var(--text); text-decoration: none; }
.product-card__name a:hover { color: var(--primary); }
.product-card__desc { font-size: .8125rem; color: var(--muted); line-height: 1.5; margin-bottom: 10px; flex: 1; }

.product-card__pricing { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--surface-2); display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.product-card__price { font-size: 1.125rem; font-weight: 900; color: var(--text); }
.product-card__price--member { color: var(--primary); }
.product-card__compare { font-size: .8125rem; color: var(--muted); text-decoration: line-through; }
.product-card__save { font-size: .7rem; font-weight: 800; background: var(--accent); color: var(--accent-text); padding: 2px 7px; border-radius: var(--radius-pill); text-transform: uppercase; }
.product-card__member-tease { font-size: .75rem; color: var(--muted); margin-top: 5px; }
.product-card__member-tease a { color: var(--primary); font-weight: 700; }
.product-card__unit { font-size: .75rem; color: var(--muted); margin-top: 4px; }

/* ── Product detail page ─────────────────────────────────────────────────────── */
.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-bottom: 2rem;
  align-items: start;
}
@media (max-width: 768px) { .product-detail-grid { grid-template-columns: 1fr; } }

.product-gallery__main { margin-bottom: 12px; }
.product-gallery__main-img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: var(--radius-md); border: 1px solid var(--border);
}
.product-gallery__thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.gallery-thumb {
  width: 72px; height: 72px; padding: 0; border: 2px solid var(--border);
  border-radius: 6px; overflow: hidden; cursor: pointer; background: none;
  transition: border-color var(--transition);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.active, .gallery-thumb:hover { border-color: var(--primary); }

/* ── Product gallery slider arrows (detail page) ────────────────────────────── */
.gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.45); color: #fff; border: none; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%; font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  z-index: 2; transition: background .15s;
}
.gallery-arrow:hover { background: rgba(0,0,0,.7); }
.gallery-arrow--prev { left: 8px; }
.gallery-arrow--next { right: 8px; }
.product-gallery__main { position: relative; }

/* ── Product card multi-image slider ────────────────────────────────────────── */
.pc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.4); color: #fff; border: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%; font-size: 1.1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; z-index: 3;
  opacity: 0; transition: opacity .15s;
}
.product-card__image-wrap:hover .pc-arrow { opacity: 1; }
.pc-arrow--prev { left: 6px; }
.pc-arrow--next { right: 6px; }
.pc-dots {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; z-index: 3;
}
.pc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.5); cursor: pointer; transition: background .15s;
}
.pc-dot.active { background: #fff; }

.product-brand { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.product-brand a { color: var(--muted); }
.product-brand a:hover { color: var(--primary); }
.product-name { font-size: 1.75rem; font-weight: 900; line-height: 1.2; margin-bottom: 8px; }
.product-sku { font-size: .8125rem; color: var(--muted); margin-bottom: 16px; }

.product-price-block { margin-bottom: 16px; }
.product-price { font-size: 2rem; font-weight: 900; display: flex; align-items: center; gap: 10px; }
.product-price--member { color: var(--primary); }
.member-badge {
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  background: var(--primary); color: #fff; padding: 3px 8px; border-radius: var(--radius-pill);
}
.product-compare { font-size: .9375rem; color: var(--muted); margin-top: 4px; }
.product-savings { font-size: .875rem; font-weight: 800; color: var(--success); margin-top: 6px; }
.product-member-tease {
  background: var(--brand-black); color: #fff; border-radius: 6px;
  padding: 10px 14px; font-size: .875rem; margin-top: 8px;
}
.product-member-tease strong { color: var(--accent); }
.product-member-tease a { color: var(--accent); font-weight: 700; }

.product-stock { margin-bottom: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stock-badge { font-size: .8125rem; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill); }
.stock-badge--in  { background: #D1FAE5; color: var(--success); }
.stock-badge--out { background: #FEE2E2; color: var(--danger); }
.stock-unit { font-size: .8125rem; color: var(--muted); }

.product-short-desc { font-size: 1rem; line-height: 1.6; color: var(--text); margin-bottom: 20px; }

.atc-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.qty-input { display: flex; align-items: center; border: 2px solid var(--border); border-radius: 6px; overflow: hidden; }
.qty-btn { background: var(--surface-2); border: none; width: 36px; height: 44px; font-size: 1.125rem; font-weight: 700; cursor: pointer; color: var(--text); transition: background var(--transition); }
.qty-btn:hover { background: var(--border); }
.qty-input .input { border: none; border-radius: 0; width: 56px; text-align: center; font-weight: 700; font-size: 1rem; }
.btn-lg { padding: 0.75rem 2rem; font-size: 1rem; }

.product-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.tag { display: inline-block; padding: 3px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: .75rem; color: var(--muted); text-decoration: none; transition: border-color var(--transition), color var(--transition); }
.tag:hover { border-color: var(--primary); color: var(--primary); }

.product-tabs { border-top: 2px solid var(--border); padding-top: 1.5rem; }
.tab-header { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; }
.tab-btn { padding: 10px 20px; background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; color: var(--muted); transition: color var(--transition); }
.tab-btn.active, .tab-btn:hover { color: var(--primary); border-bottom-color: var(--primary); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.product-description.prose { font-size: 1rem; line-height: 1.7; color: var(--text); white-space: pre-wrap; }

.related-products .section-title { font-size: 1.25rem; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 1rem; }

/* ── Search page ─────────────────────────────────────────────────────────────── */
.search-form-large { display: flex; gap: 8px; }
.search-form-large .input { flex: 1; font-size: 1rem; padding: .75rem 1rem; }

/* ── Admin page sub-header ───────────────────────────────────────────────────── */
.admin-page-title { font-size: 1.375rem; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
.admin-page-sub { font-size: .8125rem; color: var(--muted); margin-top: 2px; }
.table-actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
/* Wide admin tables scroll horizontally instead of being clipped — on desktop
   too (mobile already scrolled). :has() targets only cards/wraps that actually
   contain a table, and !important overrides the legacy inline `overflow:hidden`
   some table cards still carry. Nothing is hidden; everything stays one click away. */
.admin-content .card:has(table.admin-table),
.admin-content .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
.admin-table th { background: var(--brand-black); color: rgba(255,255,255,.8); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 10px 16px; text-align: left; white-space: nowrap; }
.admin-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--surface-2); }
.btn-sm { padding: .3rem .75rem; font-size: .8rem; }
.form-group { margin-bottom: 1rem; }
.muted { color: var(--muted); }

/* ── Cart icon badge ─────────────────────────────────────────────────────────── */
.cart-icon-btn { position: relative; }
.cart-badge { position: absolute; top: 2px; right: 2px; background: var(--primary); color: #fff; font-size: .65rem; font-weight: 800; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; pointer-events: none; box-shadow: 0 0 0 2px #fff; }

/* ── Checkout layout ─────────────────────────────────────────────────────────── */
.checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; align-items: start; }
@media(max-width: 900px) { .checkout-layout { grid-template-columns: 1fr; } }
.checkout-main { min-width: 0; }
.checkout-sidebar { position: sticky; top: 1.5rem; }

/* ── Checkout step indicator ─────────────────────────────────────────────────── */
.checkout-steps { display: flex; align-items: center; margin-bottom: 1.75rem; }
.checkout-step { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap; }
.checkout-step.active { color: var(--primary); }
.checkout-step.done { color: var(--success); }
.step-num { width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 900; flex-shrink: 0; }
.checkout-step.done .step-num { background: var(--success); border-color: var(--success); color: #fff; }
.checkout-step.active .step-num { background: var(--primary); border-color: var(--primary); color: #fff; }
.checkout-step-line { flex: 1; height: 2px; background: var(--border); margin: 0 10px; }
.checkout-step-line.done { background: var(--success); }
@media(max-width: 480px) { .checkout-step { font-size: .6875rem; gap: 5px; letter-spacing: 0; } .checkout-step-line { margin: 0 4px; } }

/* ── Checkout section titles ─────────────────────────────────────────────────── */
.checkout-section-title { font-size: 1.0625rem; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 1.25rem; }
.checkout-section-sub { font-size: .8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 1.25rem 0 .75rem; }

/* ── Form row helpers ────────────────────────────────────────────────────────── */
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 2fr 1fr 1.25fr; gap: 12px; }
@media(max-width: 600px) { .form-row-2 { grid-template-columns: 1fr; } .form-row-3 { grid-template-columns: 1fr; } }
.req { color: var(--primary); }

/* ── Fulfillment method options ──────────────────────────────────────────────── */
.fulfillment-options { display: flex; gap: 10px; flex-wrap: wrap; }
.fulfillment-option { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 180px; border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; cursor: pointer; transition: border-color .15s, background .15s; }
.fulfillment-option input[type="radio"] { margin-top: 3px; accent-color: var(--primary); flex-shrink: 0; }
.fulfillment-option strong { display: block; font-size: .9375rem; font-weight: 700; }
.fulfillment-option p { font-size: .8125rem; color: var(--muted); margin: 2px 0 0; }
/* Selected fulfillment = GREEN (positive confirmation), not brand red. */
.fulfillment-option.active, .fulfillment-option:has(input:checked) { border-color: #16A34A; background: #F0FDF4; }
.fulfillment-option input[type="radio"]:checked { accent-color: #16A34A; }

/* ── Payment method option cards ─────────────────────────────────────────────── */
.payment-option-label { display: flex; align-items: flex-start; gap: 12px; border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; cursor: pointer; transition: border-color .15s, background .15s; }
.payment-option-label input[type="radio"] { margin-top: 4px; accent-color: var(--primary); flex-shrink: 0; }
.payment-option-body strong { display: block; font-size: .9375rem; font-weight: 700; }
.payment-option-body p { font-size: .8125rem; color: var(--muted); margin: 3px 0 0; }
.payment-option-label:has(input:checked) { border-color: var(--primary); background: #FFF5F5; }

/* ── Breadcrumb ──────────────────────────────────────────────────────────────── */
.breadcrumb { font-size: .8125rem; color: var(--muted); margin-bottom: 1.25rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
.breadcrumb span { color: var(--text); font-weight: 600; }

/* ── Badge color variants ────────────────────────────────────────────────────── */
.badge-success  { background: #DCFCE7; color: #15803D; }
.badge-warning  { background: #FEF9C3; color: #A16207; }
.badge-danger   { background: #FEE2E2; color: #DC2626; }
.badge-info     { background: #DBEAFE; color: #1D4ED8; }
.badge-primary  { background: #FFF0F0; color: var(--primary); }
.badge-muted    { background: var(--surface-2); color: var(--muted); }

/* ── Account page cards ──────────────────────────────────────────────────────── */
.card:hover { box-shadow: var(--shadow-md); }

/* ── Form helpers ────────────────────────────────────────────────────────────── */
.form-hint { font-size: .8125rem; color: var(--muted); margin: 4px 0 0; }
.form-group { margin-bottom: 1.125rem; }
.form-label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 5px; }
.req { color: var(--primary); }

/* ── Alert boxes ─────────────────────────────────────────────────────────────── */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: .9rem; border: 1px solid transparent; }
.alert-success { background: #DCFCE7; color: #15803D; border-color: #BBF7D0; }
.alert-danger  { background: #FEE2E2; color: #DC2626; border-color: #FECACA; }
.alert-warning { background: #FEF9C3; color: #A16207; border-color: #FEF08A; }
.alert-info    { background: #DBEAFE; color: #1D4ED8; border-color: #BFDBFE; }

/* ── Badge pill variant ──────────────────────────────────────────────────────── */
.badge-pill { border-radius: 999px; display: inline-block; padding: 4px 14px; font-size: .8125rem; font-weight: 600; }

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE SEARCH OVERLAY
   ════════════════════════════════════════════════════════════════════════════ */

.mobile-search-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: #fff; z-index: 10000;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0);
}

.mobile-search-overlay__header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  background: var(--surface);
  min-width: 0; /* lets the form shrink instead of overflowing the row */
}

.mobile-search-overlay__form {
  flex: 1 1 0; min-width: 0; /* shrinks if needed; lets input ellipsize cleanly */
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 10px 14px;
}

.mobile-search-overlay__form input {
  flex: 1 1 0; min-width: 0; /* input shrinks instead of overflowing form */
  border: none; background: transparent; outline: none;
  font-size: 1.0625rem; color: var(--text);
  width: 100%; /* iOS WKWebView fix — without this <input type=search> can ignore flex */
}

.mobile-search-overlay__close {
  background: none; border: none; font-size: 2rem; line-height: 1;
  color: var(--muted); padding: 4px 8px; cursor: pointer;
}
.mobile-search-overlay__close:hover { color: var(--text); }

/* Header back button — left of the search bar, like Google / App Store / Amazon.
   Generous tap target (44×44 = WCAG/iOS HIG minimum) so users don't miss it. */
.mobile-search-overlay__back {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0;
  width: 44px; height: 44px; flex-shrink: 0;
  cursor: pointer; color: var(--text);
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition);
}
.mobile-search-overlay__back:hover,
.mobile-search-overlay__back:active { background: rgba(0,0,0,.08); }
.mobile-search-overlay__back svg { display: block; }
.mobile-search-overlay__search-icon { color: var(--muted); flex-shrink: 0; }

.mobile-search-overlay__results {
  flex: 1; overflow-y: auto; padding: 16px;
}

.mobile-search-overlay__results .search-result-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none; color: var(--text);
  transition: background var(--transition);
}
.mobile-search-overlay__results .search-result-item:hover {
  background: var(--surface-2);
}
.mobile-search-overlay__results .search-result-item img {
  width: 48px; height: 48px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.mobile-search-overlay__results .search-result-item .result-info {
  flex: 1;
}
.mobile-search-overlay__results .search-result-item .result-name {
  font-weight: 600; font-size: .9375rem;
}
.mobile-search-overlay__results .search-result-item .result-price {
  font-size: .875rem; color: var(--primary); font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════════════
   ADVISORY COUNCIL SLIDER
   ════════════════════════════════════════════════════════════════════════════ */

.council-slider {
  overflow: hidden; width: 100%;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.council-slider__track {
  display: flex; gap: 32px; width: max-content;
  animation: council-scroll 60s linear infinite;
}
.council-slider:hover .council-slider__track {
  animation-play-state: paused;
}

.council-slider__item {
  flex-shrink: 0; display: flex; flex-direction: column;
  align-items: center; gap: 8px; width: 120px;
}
.council-slider__item img {
  width: 80px; height: 80px; object-fit: contain;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: #fff; padding: 6px;
}
.council-slider__placeholder {
  width: 80px; height: 80px; border-radius: var(--radius-sm);
  background: var(--brand-black); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 900;
}
.council-slider__name {
  font-size: .75rem; font-weight: 600; color: var(--muted);
  text-align: center; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 120px;
}

@keyframes council-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION LABEL
   ════════════════════════════════════════════════════════════════════════════ */

.section-label {
  display: inline-block;
  font-size: .6875rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--primary);
}

/* ════════════════════════════════════════════════════════════════════════════
   QUEUE PAGE — mobile first
   ════════════════════════════════════════════════════════════════════════════ */

/* No additional styles needed — queue page uses existing card/btn classes */

/* ════════════════════════════════════════════════════════════════════════════
   PREDICTIVE SEARCH DROPDOWN
   ════════════════════════════════════════════════════════════════════════════ */

.predictive-search-wrap { position: relative; }

.predictive-search-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  z-index: 1000; background: #fff;
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  max-height: 420px; overflow-y: auto;
  display: none;
}
.predictive-search-dropdown.active { display: block; }

.predictive-search-dropdown__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; cursor: pointer;
  text-decoration: none; color: var(--text);
  border-bottom: 1px solid var(--surface-2);
  transition: background var(--transition);
}
.predictive-search-dropdown__item:last-child { border-bottom: none; }
.predictive-search-dropdown__item:hover,
.predictive-search-dropdown__item--active {
  background: var(--surface-2);
}
.predictive-search-dropdown__item img {
  width: 44px; height: 44px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--border);
  flex-shrink: 0;
}
.predictive-search-dropdown__info { flex: 1; min-width: 0; }
.predictive-search-dropdown__name {
  font-weight: 600; font-size: .9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.predictive-search-dropdown__sku {
  font-size: .75rem; color: var(--muted); letter-spacing: .03em;
}
.predictive-search-dropdown__price {
  font-weight: 700; font-size: .875rem; color: var(--primary);
  white-space: nowrap; flex-shrink: 0;
}

.predictive-search-dropdown__footer {
  padding: 10px 14px; text-align: center;
  font-size: .8125rem; font-weight: 600;
  color: var(--primary); border-top: 1px solid var(--border);
  cursor: pointer;
}
.predictive-search-dropdown__footer:hover { background: var(--surface-2); }

.predictive-search-dropdown__empty {
  padding: 20px 14px; text-align: center;
  color: var(--muted); font-size: .875rem;
}

/* On mobile, make dropdown full width and raise z-index */
@media (max-width: 900px) {
  .predictive-search-dropdown { max-height: 320px; }
  .site-nav .predictive-search-dropdown {
    position: fixed; left: 0; right: 0; top: auto;
    border-radius: 0; max-height: 50vh;
  }
}

/* ── Admin Order Create ────────────────────────────────────────────────────── */
.admin-order-create .card-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}

.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #ccc);
  border-top: none;
  border-radius: 0 0 6px 6px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* Order create/edit — product search dropdown.
   The Line Items card is forced to overflow-x:auto above (wide-table scrolling),
   which also clipped this dropdown so only ~1 result showed. Let any card that
   holds a product-search field overflow visibly, and make the product dropdown
   tall + wide so it floats OVER the Order Details below — more products visible
   without scrolling. Global on purpose: every admin/rep who can create orders. */
/* Higher specificity than the wide-table `.card:has(table.admin-table)` rule
   above (two :has() clauses) so the order line-items card stops clipping. */
.admin-content .card:has(table.admin-table):has(.product-search) {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}
.product-dropdown {
  max-height: 60vh;
  min-width: 460px;
  max-width: 680px;
  right: auto;
  z-index: 1200;
}
@media (max-width: 640px) {
  .product-dropdown { min-width: 0; left: 0; right: 0; max-width: none; }
}

.autocomplete-dropdown.autocomplete-loading::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  margin: 12px auto;
  border: 2px solid var(--border, #ccc);
  border-top-color: var(--primary, #CC1F1F);
  border-radius: 50%;
  animation: ac-spin .6s linear infinite;
}
@keyframes ac-spin { to { transform: rotate(360deg); } }

.autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border, #eee);
  font-size: .875rem;
  transition: background .15s;
}

.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover,
.autocomplete-item.active,
.autocomplete-item--active { background: var(--surface-2, #f2f2f2); }
.autocomplete-item--empty { cursor: default; color: var(--muted); font-style: italic; }

/* A category heading inside a picker dropdown, when "Group by category" is on
   for that box. It is a plain sibling of the rows, never a wrapper: the
   keyboard cursor walks .autocomplete-item / .vanmove-hit, and nesting the rows
   inside sections would break that walk. */
.autocomplete-group,
.vanmove-group {
  padding: 6px 12px 4px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #6B7280);
  background: var(--surface-2, #f7f7f8);
  border-bottom: 1px solid var(--border, #e5e7eb);
  position: sticky;
  top: 0;
}

.admin-order-create .line-item-row td { vertical-align: middle; padding: 6px 8px; }
.admin-order-create .line-item-row .input { margin: 0; }
.admin-order-create .table-overflow-visible { overflow: visible !important; }
.admin-order-create .line-item-row td { position: relative; }

/* Order source badges */
.badge-source-online  { background: #DBEAFE; color: #1D4ED8; font-size: .7rem; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
.badge-source-phone   { background: #D1FAE5; color: #047857; font-size: .7rem; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
.badge-source-walk_in { background: #FFEDD5; color: #C2410C; font-size: .7rem; padding: 2px 8px; border-radius: 4px; font-weight: 600; }

@media (max-width: 768px) {
  .admin-order-create [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── In-App (Capacitor) overrides ──────────────────────────────────────────── */

/* ── Global width safety for Capacitor WebView ──────────────────────────────── */
body.in-capacitor { width: 100vw; max-width: 100%; overflow-x: hidden; }
body.in-capacitor .container { max-width: 100%; }

/* Hide website footer on ALL mobile — bottom nav replaces it */
@media (max-width: 900px) { .site-footer { display: none !important; } }

/* (Also kept for explicitness inside Capacitor) */
body.in-capacitor .site-footer { display: none !important; }

/* ── PCI DSS Compliance Site Seal ───────────────────────────────────────── */
.pci-siteseal {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.pci-siteseal img {
  max-width: 110px;
  height: auto;
  display: block;
  transition: transform .2s ease;
}
.pci-siteseal img:hover { transform: scale(1.04); }

/* Mobile drawer variant — centered, a bit smaller */
.pci-siteseal--mobile {
  display: flex;
  justify-content: center;
  padding: 14px 0 8px;
  margin-top: 4px;
}
.pci-siteseal--mobile img {
  max-width: 110px;
}

/* Footer bottom row — seal left, phone/address right (stacks on mobile) */
@media (max-width: 640px) {
  .footer-contact-row { justify-content: center !important; text-align: center; }
  .footer-contact-info { justify-content: center !important; }
}

/* Hamburger nav → left side drawer in-app (not full-width dropdown) */
body.in-capacitor .site-nav.open {
  position: fixed !important;
  top: 0 !important; bottom: 0 !important;
  left: 0 !important; right: auto !important;
  width: min(85vw, 320px) !important;
  height: 100dvh !important;
  background: #fff !important;
  flex-direction: column !important;
  padding: calc(env(safe-area-inset-top, 0) + 64px) 0 80px !important;
  box-shadow: 4px 0 24px rgba(0,0,0,.18) !important;
  border-top: none !important;
  border-right: 1px solid var(--border) !important;
  overflow-y: auto !important;
  z-index: 9999 !important;
  transform: translateX(-110%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
}
body.in-capacitor .site-nav.open.drawer-visible {
  transform: translateX(0) !important;
}
body.in-capacitor .site-nav.open a {
  padding: 14px 24px !important;
  font-size: .95rem !important;
  border-bottom: 1px solid var(--border) !important;
  width: 100% !important;
}
/* Overlay behind side drawer */
body.in-capacitor #nav-drawer-overlay {
  display: block;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9998;
  backdrop-filter: blur(1px);
}
/* Remove bottom padding that was reserved for footer */
body.in-capacitor main { padding-bottom: 72px; }

/* When on-screen keyboard is open, hide the bottom nav so it doesn't float
   above the keyboard. Triggered from JS via visualViewport resize. */
body.kb-open .mobile-bottom-nav { display: none !important; }
body.kb-open.in-capacitor main { padding-bottom: 16px; }

/* "More" tab — hidden on web, visible only in Capacitor */
.app-more-tab {
  display: none;
  background: none; border: none; cursor: pointer;
  font-family: inherit;
}
.app-more-tab svg { width: 22px; height: 22px; }
body.in-capacitor .app-more-tab { display: flex; }
body.in-capacitor .app-more-tab:hover,
body.in-capacitor .app-more-tab.active { color: var(--primary); }

/* More drawer overlay */
#app-more-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 9990;
  backdrop-filter: blur(2px);
}
#app-more-overlay.open { display: block; }

/* More drawer — slides up from bottom */
#app-more-drawer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9991;
  background: #fff; border-radius: 20px 20px 0 0;
  padding: 0 0 env(safe-area-inset-bottom, 0);
  max-height: 82vh; overflow-y: auto;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
  -webkit-overflow-scrolling: touch;
}
#app-more-drawer.open { transform: translateY(0); }

.app-more-handle {
  width: 36px; height: 4px; background: #ddd; border-radius: 2px;
  margin: 12px auto 4px;
}

.app-more-section { padding: 8px 0 4px; border-bottom: 1px solid var(--border); }
.app-more-section:last-of-type { border-bottom: none; }

.app-more-section-title {
  font-size: .7rem; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 8px 20px 4px;
}

#app-more-drawer a {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; font-size: .9rem; font-weight: 500;
  color: var(--text); text-decoration: none;
  transition: background .1s;
}
#app-more-drawer a:active { background: var(--surface-2); }
#app-more-drawer a svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--muted); }

.app-more-contact {
  padding: 12px 20px 8px; display: flex; flex-direction: column; gap: 10px;
}
.app-more-contact a,
.app-more-contact span {
  display: flex; align-items: center; gap: 10px;
  font-size: .85rem; color: var(--muted); text-decoration: none;
}
.app-more-contact svg { width: 16px; height: 16px; flex-shrink: 0; }

.app-more-footer {
  text-align: center; font-size: .75rem; color: var(--muted);
  padding: 12px 20px 20px;
}

/* ── Accounting KPI Grid ───────────────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px)  { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px)  { .kpi-grid { grid-template-columns: 1fr; } }

.kpi-card { border-left: 4px solid var(--primary); transition: box-shadow .15s; }
.kpi-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }

/* ── Statement Table (P&L formatting) ──────────────────────────────────────── */
.statement-table td { padding: 10px 16px; }
.statement-table tr:hover td { background: var(--surface-2); }

/* ── Adjustment type badges ────────────────────────────────────────────────── */
.badge-info { background: #EFF6FF; color: #2563EB; }

/* ════════════════════════════════════════════════════════════════════════════
 * ADMIN — RESPONSIVE / MOBILE LAYER
 * Adds a slide-in drawer sidebar, hamburger toggle, and condensed layouts
 * for < 1024px viewports. Desktop (>= 1024px) keeps the original layout.
 * ════════════════════════════════════════════════════════════════════════════ */

/* Hamburger button — visible only on mobile */
.admin-hamburger {
  display: none;
  width: 40px; height: 40px;
  border: none; background: transparent;
  cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
}
.admin-hamburger:hover { background: var(--surface-2); }
.admin-hamburger svg { width: 22px; height: 22px; color: var(--text); }

/* Backdrop overlay when drawer is open */
.admin-sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 90;
  opacity: 0;
  transition: opacity .25s;
}
.admin-sidebar-backdrop.is-open {
  display: block;
  opacity: 1;
}

@media (max-width: 1023px) {
  /* Sidebar becomes a slide-in drawer */
  .admin-sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: 280px;
    max-width: 85vw;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 4px 0 16px rgba(0, 0, 0, .15);
  }
  .admin-sidebar.is-open { transform: translateX(0); }

  /* Content fills full width (no sidebar gutter) */
  .admin-layout { display: block; }
  .admin-main   { width: 100%; }

  /* Hamburger appears in topbar */
  .admin-hamburger { display: inline-flex; }

  /* Topbar tighter on mobile */
  .admin-topbar {
    padding: 0 14px;
    gap: 10px;
  }
  .admin-topbar h1 {
    font-size: .875rem;
    /* Truncate long page titles */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }
  .admin-topbar .topbar-right { gap: 8px; }
  .admin-topbar .topbar-user  { display: none; } /* hide email on mobile */

  /* Prevent body scroll under drawer */
  body.admin-drawer-open { overflow: hidden; }

  /* Content padding tighter */
  .admin-content { padding: 16px 12px; }
  .admin-page-header { margin-bottom: 16px; }
  .admin-page-header h1 { font-size: 1.125rem; }
}

@media (max-width: 640px) {
  /* Settings rows stack vertically on phones */
  .settings-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 16px;
  }
  .settings-row-control {
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
  }
  .settings-row-control input[type="text"],
  .settings-row-control input[type="number"],
  .settings-row-control input[type="email"],
  .settings-row-control input[type="password"],
  .settings-row-control textarea,
  .settings-row-control select {
    width: 100%;
    max-width: 100%;
  }
  .settings-section-header { padding: 12px 16px; }
  .settings-tabs {
    /* Horizontal scroll for tab strip on phones */
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -12px 16px;
    padding: 0 12px;
  }
  .settings-tabs::-webkit-scrollbar { display: none; }
  .settings-tab { padding: 8px 12px; font-size: .75rem; }

  /* Stat cards single column */
  .stat-card { padding: 16px; }
  .stat-card .stat-value { font-size: 1.5rem; }

  /* Form labels and inputs */
  .admin-content form .form-row { flex-direction: column; gap: 8px; }
  .admin-content .form-input,
  .admin-content .form-textarea,
  .admin-content .form-select { width: 100%; }

  /* Tables convert to stacked label/value cards on mobile — see the
     @media (max-width: 640px) block below for the full card rules. The
     desktop default (.admin-table) at the top of the file already sets
     width:100% so no additional sizing needed here. */
  .admin-content > .card,
  .admin-content > div > .card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Cards and grid containers */
  .grid-2col, .grid-3col, .grid-4col { grid-template-columns: 1fr !important; }

  /* Buttons stretch full width when stacked in actions row */
  .admin-content .actions-row .btn,
  .admin-content .btn-row .btn {
    width: 100%;
  }

  /* Page header buttons stack on phone */
  .admin-page-header {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-page-header .btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .admin-content { padding: 12px 10px; }
  .admin-topbar { height: 54px; }
}

/* Sidebar internal sizing on mobile (taller touch targets) */
@media (max-width: 1023px) {
  .admin-nav a {
    padding: 12px 14px;
    font-size: .95rem;
  }
  .admin-nav-section-label { padding: 16px 14px 6px; }
  .admin-sidebar-logo { padding: 18px 16px; }
}

/* ════════════════════════════════════════════════════════════════════════════
 * AGGRESSIVE MOBILE OVERRIDES — INLINE STYLE NORMALIZATION
 *
 * Many admin views use inline styles like `style="display:flex;width:160px"`
 * that pre-date the responsive layer. CSS attribute selectors can't override
 * inline `style=` without `!important`. These rules use `!important` to
 * normalize the most common mobile-hostile patterns on phones (< 640px).
 *
 * Scoped to `.admin-content` so they never affect public-facing pages.
 * ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Flex containers wrap by default */
  .admin-content [style*="display:flex"],
  .admin-content [style*="display: flex"] {
    flex-wrap: wrap !important;
  }
  /* Grid containers collapse to single column */
  .admin-content [style*="display:grid"],
  .admin-content [style*="display: grid"],
  .admin-content [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Force narrow widths to fill available space — overrides
     style="width:160px" / style="width:240px" etc. that crowd a phone row. */
  .admin-content input[style*="width:"]:not([type="checkbox"]):not([type="radio"]),
  .admin-content select[style*="width:"],
  .admin-content textarea[style*="width:"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Min-widths > viewport break wrap — neutralize on mobile */
  .admin-content [style*="min-width:"] {
    min-width: 0 !important;
  }

  /* Max-width:400/500/600 containers shouldn't exceed viewport */
  .admin-content > div[style*="max-width:"],
  .admin-content .card[style*="max-width:"],
  .admin-content form[style*="max-width:"] {
    max-width: 100% !important;
  }

  /* Page headers built inline (the `display:flex;justify-content:space-between`
     pattern at the top of many admin views) — wrap and stack their buttons */
  .admin-content > div[style*="justify-content:space-between"]:not(.no-mobile-stack),
  .admin-content > div[style*="justify-content: space-between"]:not(.no-mobile-stack) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .admin-content > div[style*="justify-content:space-between"] .btn,
  .admin-content > div[style*="justify-content: space-between"] .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  /* Inputs in admin always full-width on phone */
  .admin-content .input,
  .admin-content .form-input,
  .admin-content input[type="text"],
  .admin-content input[type="email"],
  .admin-content input[type="tel"],
  .admin-content input[type="number"],
  .admin-content input[type="password"],
  .admin-content input[type="search"],
  .admin-content input[type="url"],
  .admin-content input[type="date"],
  .admin-content select,
  .admin-content textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Inline "flex:1" doesn't help when min-width forces overflow — already
     handled above, but emphasize for filter rows */
  .admin-content form[style*="display:flex"] > * {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Card padding tighter on phones */
  .admin-content .card,
  .admin-content .stat-card {
    padding: 14px !important;
  }

  /* Specific page-header pattern used in many admin views */
  .admin-page-title { font-size: 1.125rem !important; }
  .admin-page-sub   { font-size: .8rem !important; }

  /* Tables — scroll horizontally on phone. We put overflow-x on the
     CONTAINER (.card) rather than on the <table> itself, because
     `display:block` on a <table> cascades and breaks thead/tbody/tr
     alignment (cells stack vertically as block elements). Keeping the
     table as `display:table` preserves row alignment; the scroll
     wrapper handles overflow. */
  /* ═══════════════════════════════════════════════════════════════════
     RESPONSIVE TABLES — convert .admin-table to one-card-per-row at
     mobile. Each <td> stacks vertically inside its row "card" with the
     column label (from data-label attribute, or the matching <th> text
     via CSS counter — fallback) shown on the left and the value right.
     Opt-in: any table with class .admin-table gets the card treatment.
     For best UX, add data-label="ColumnName" to each <td>. Tables
     without data-label still convert to vertical stacks (just no label
     captions).
     ═══════════════════════════════════════════════════════════════════ */
  .admin-content .card {
    overflow: visible !important; /* allow tfoot summary rows to break out cleanly */
  }
  .admin-content table.admin-table,
  .admin-content table.admin-table thead,
  .admin-content table.admin-table tbody,
  .admin-content table.admin-table tfoot,
  .admin-content table.admin-table tr,
  .admin-content table.admin-table td,
  .admin-content table.admin-table th {
    display: block !important;
    width: auto !important;
    white-space: normal !important;
  }
  .admin-content table.admin-table thead { display: none !important; }
  .admin-content table.admin-table tbody tr {
    border: 1px solid var(--border, #e5e7eb) !important;
    border-radius: 6px;
    padding: 10px 12px !important;
    margin: 10px 12px !important;
    background: var(--surface, #fff);
  }
  .admin-content table.admin-table tbody td {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 12px;
    padding: 4px 0 !important;
    text-align: left !important;
    border: none !important;
    font-size: .9rem;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .admin-content table.admin-table tbody td[data-label]::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--muted, #6b7280);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
  }
  /* tfoot summary rows stay compact label-value lines */
  .admin-content table.admin-table tfoot tr {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 12px !important;
    margin: 0 !important;
    background: var(--surface-2, #f9fafb);
    border-top: 1px solid var(--border, #e5e7eb) !important;
    border-radius: 0;
  }
  .admin-content table.admin-table tfoot tr td {
    display: inline !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: .9rem;
  }

  /* Cron/test forms with field+label inline — stack them */
  .admin-content form[style*="align-items:flex-end"] > *,
  .admin-content form[style*="align-items: flex-end"] > * {
    width: 100% !important;
  }

  /* Footer button rows */
  .admin-content [style*="justify-content:flex-end"][style*="gap"] {
    flex-direction: column-reverse !important;
  }
  .admin-content [style*="justify-content:flex-end"][style*="gap"] .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Storefront rails (homepage sections + /shop rails) ──────────────────── */
.rail-new-badge{position:absolute;top:10px;right:10px;z-index:3;background:#16a34a;color:#fff;
  font-size:.65rem;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:999px;}
.rail-qty-badge{position:absolute;top:10px;left:10px;z-index:3;background:rgba(17,17,17,.82);color:#fff;
  font-size:.62rem;font-weight:700;letter-spacing:.03em;padding:3px 8px;border-radius:999px;}

.rail-list{display:flex;flex-direction:column;}
.rail-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border-top:1px solid var(--border);}
.rail-list .rail-row:first-child{border-top:0;}
.rail-row__img{flex:0 0 64px;width:64px;height:64px;border:1px solid var(--border);border-radius:8px;
  overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;}
.rail-row__img img{max-width:100%;max-height:100%;object-fit:contain;}
.rail-row__body{flex:1 1 auto;min-width:0;}
.rail-row__name{display:block;font-weight:600;font-size:.92rem;color:var(--text);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
a.rail-row__name:hover{color:var(--primary);}
.rail-row__meta{display:flex;gap:10px;font-size:.76rem;color:var(--muted);margin-top:3px;}
.rail-row__oos{color:#b45309;font-weight:600;font-size:.76rem;}
.rail-row__price{flex:0 0 auto;text-align:right;white-space:nowrap;font-weight:700;font-size:.95rem;}
.rail-row__price .is-member{color:var(--primary);}
.rail-row__price small{display:block;font-size:.66rem;font-weight:600;color:var(--muted);}
.rail-row__login{font-size:.78rem;font-weight:600;color:var(--primary);text-decoration:none;}
.rail-row__atc{flex:0 0 auto;display:flex;gap:6px;align-items:center;}
.rail-row__atc input[type=number]{width:64px;padding:.32rem .4rem;text-align:center;}
.rail-row--gone{opacity:.62;}
.product-card--gone{opacity:.62;}

/* A rail sits on a tinted, outlined card so it reads as a separate block.
   Without this the last rail runs straight into the main product grid and
   looks like that rail is listing the entire catalogue. */
.shop-rail{margin-bottom:22px;padding:16px 16px 18px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:10px;}
.shop-rail .section-header{margin-bottom:12px;}
.shop-rail .section-header h2{position:relative;padding-left:11px;}
.shop-rail .section-header h2::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;
  width:3px;border-radius:2px;background:var(--primary);}
.shop-rail .section-header p{font-size:.83rem;margin:0;}
.shop-grid-header{margin:26px 0 14px;padding-top:18px;border-top:2px solid var(--border);}
.shop-grid-header h2{font-size:1.15rem;margin-bottom:2px;}
.shop-grid-header p{font-size:.83rem;margin:0;}

@media (max-width:640px){
  .rail-row{flex-wrap:wrap;gap:10px;}
  .rail-row__body{flex:1 1 calc(100% - 78px);}
  .rail-row__price{flex:1 1 auto;text-align:left;}
  .rail-row__atc{flex:0 0 auto;margin-left:auto;}
}

/* ── Autosave (320) ────────────────────────────────────────────────────
   The quiet status line. It must never cover a control or move the page:
   fixed, bottom-right, above the content, and pointer-events off while it is
   hidden so an invisible pill cannot swallow a click. */
.autosave-pill{position:fixed;right:18px;bottom:18px;z-index:1200;
  display:flex;align-items:center;gap:10px;
  background:#111827;color:#f9fafb;border-radius:8px;
  padding:8px 12px;font-size:12.5px;line-height:1.35;
  box-shadow:0 6px 20px rgba(0,0,0,.28);max-width:min(420px,calc(100vw - 36px));
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease}
.autosave-pill.is-on{opacity:1;transform:none;pointer-events:auto}
.autosave-pill-x{background:transparent;border:1px solid rgba(255,255,255,.35);
  color:#f9fafb;border-radius:6px;padding:3px 9px;font-size:12px;cursor:pointer}
.autosave-pill-x:hover{background:rgba(255,255,255,.12)}

/* The offer, on a blank screen. Amber, because it is a question and not a
   confirmation — the same colour the merged-customer notice uses. */
.autosave-offer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#fffbeb;border:1px solid #fcd34d;border-left:4px solid #f59e0b;
  border-radius:8px;padding:12px 14px;margin:0 0 16px;font-size:14px;color:#78350f}
.autosave-offer > span{flex:1 1 240px}

/* Live-field ticks sit beside their card heading. */
.autosave-live{display:inline-block;margin-left:10px;font-size:12px;
  color:#059669;opacity:0;transition:opacity .15s ease}
.autosave-live.is-on{opacity:1}
.autosave-live.is-bad{color:#b91c1c;font-weight:600}

/* ⚠ None of it is ever printed. It is screen chrome, and the orders sheet
   already cost us a printout with a flash message at the top of it. */
@media print{.autosave-pill,.autosave-offer,.autosave-live{display:none !important}}

/* ── Deals (359): promoted coupons on product pages, tiles, cart, banner ── */
.deal-pill { display:inline-block; background:var(--primary,#CC1F1F); color:#fff; font-size:.68rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.deal-card { margin:14px 0; padding:14px 16px; border:2px dashed var(--primary,#CC1F1F); border-radius:12px; background:#FFF6F6; }
.deal-card.is-pulse { animation:dealPulse .6s ease; }
@keyframes dealPulse { 0% { transform:scale(1); } 40% { transform:scale(1.015); background:#FFE9E9; } 100% { transform:scale(1); } }
.deal-card__top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.deal-card__headline { font-size:1rem; font-weight:800; color:var(--text,#111); line-height:1.35; }
.deal-card__sub { margin:6px 0 10px; font-size:.82rem; color:var(--muted,#6b7280); }
.deal-card__msg { margin:8px 0 0; font-size:.9rem; color:var(--text,#111); }
.deal-ok { color:#15803D; font-weight:800; margin-right:4px; }
.deal-progress { height:9px; background:#F3D4D4; border-radius:999px; overflow:hidden; }
.deal-progress__bar { height:100%; background:var(--primary,#CC1F1F); border-radius:999px; transition:width .45s ease; }
.deal-progress__bar.is-done { background:#16A34A; }
.deal-card__adds { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.deal-card__adds form { margin:0; }
.deal-add__btn { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700; padding:7px 12px; border:1.5px solid var(--primary,#CC1F1F); background:#fff; color:var(--primary,#CC1F1F); border-radius:999px; cursor:pointer; transition:background .15s, color .15s; }
.deal-add__btn:hover { background:var(--primary,#CC1F1F); color:#fff; }
.deal-add__btn.is-this { background:var(--primary,#CC1F1F); color:#fff; }
.deal-add__btn:disabled { opacity:.6; cursor:wait; }
.deal-add__n { background:#fff; color:var(--primary,#CC1F1F); border-radius:999px; font-size:.7rem; padding:0 6px; line-height:1.4; }
.deal-add__btn:not(.is-this) .deal-add__n { background:var(--primary,#CC1F1F); color:#fff; }
.product-card__deal { position:absolute; top:8px; right:8px; z-index:2; background:var(--primary,#CC1F1F); color:#fff; font-size:.65rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:999px; text-decoration:none; box-shadow:0 2px 6px rgba(204,31,31,.35); }
.product-card__deal:hover { color:#fff; background:var(--primary-hover,#A81A1A); }
.product-card__deal-line { margin:4px 0 0; font-size:.75rem; font-weight:800; color:var(--primary,#CC1F1F); }
.deal-nudges { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.deal-nudges.is-compact { margin:10px 0 0; gap:8px; }
.deal-nudge { border:1px solid #E5E7EB; background:#fff; border-radius:10px; padding:12px 14px; font-size:.875rem; }
.deal-nudge.is-close { border-color:#FCA5A5; background:#FFF6F6; }
.deal-nudge.is-ok { border-color:#86EFAC; background:#F0FDF4; color:#166534; }
.deal-nudge__title { font-weight:800; margin-bottom:6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.deal-nudge .deal-progress { margin:6px 0 8px; }
.deal-nudges.is-compact .deal-nudge { padding:8px 10px; font-size:.8rem; }
.deal-section { margin-bottom:2.5rem; }
.deal-card--wide { margin-top:0; }
.deals-banner { background:var(--primary,#CC1F1F); color:#fff; font-size:.875rem; }
.deals-banner[hidden] { display:none !important; }
.deals-banner__inner { max-width:1280px; margin:0 auto; padding:7px 44px 7px 16px; display:flex; align-items:center; gap:10px; position:relative; }
.deals-banner__tag { background:#fff; color:var(--primary,#CC1F1F); font-weight:900; font-size:.65rem; letter-spacing:.08em; padding:2px 8px; border-radius:999px; flex-shrink:0; }
.deals-banner__msgs { position:relative; flex:1; min-width:0; color:#fff; text-decoration:none; font-weight:700; min-height:1.3em; }
.deals-banner__msg { display:none; }
.deals-banner__msg.is-on { display:block; animation:dealSlide .4s ease; }
@keyframes dealSlide { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.deals-banner__cta { color:#fff; font-weight:800; white-space:nowrap; text-decoration:underline; flex-shrink:0; }
.deals-banner__x { position:absolute; right:10px; top:50%; transform:translateY(-50%); width:28px; height:28px; border:none; background:transparent; color:#fff; font-size:1.3rem; line-height:1; cursor:pointer; border-radius:999px; }
.deals-banner__x:hover { background:rgba(255,255,255,.18); }
/* The site-wide a:hover is red — on a red strip the text vanished. Stay white; underline is the cue. */
.deals-banner a:hover, .deals-banner a:focus-visible { color:#fff; }
.deals-banner .deals-banner__msgs:hover, .deals-banner .deals-banner__msgs:focus-visible { text-decoration:underline; text-underline-offset:3px; }
.deals-banner a:focus-visible { outline:2px solid #fff; outline-offset:2px; border-radius:3px; }
@media (max-width:640px) {
  .deals-banner__inner { padding:7px 40px 7px 12px; font-size:.8rem; flex-wrap:wrap; row-gap:4px; }
  .deals-banner__cta { font-size:.78rem; }
  .product-card__deal { font-size:.6rem; padding:3px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .deal-card.is-pulse, .deals-banner__msg.is-on { animation:none; }
  .deal-progress__bar { transition:none; }
}