/* ===========================================================================
   Configurator — Phase 1A
   Tokens mirrored from css/admin-base.css :root (per CLAUDE.md).
   Full-bleed layout (.cfg-wrap width:100%, no centered max-width container).
   =========================================================================== */

:root {
  /* Brand */
  --brand: #7c3aed;
  --primary: #7c3aed;
  --primary-light: #ede9fe;
  --primary-dark: #5b21b6;

  /* Neutrals */
  --bg: #faf8ff;
  --card: #ffffff;
  --text: #1e1b2e;
  --text-2: #1a1625;
  --subtext: #6b7280;
  --muted: #9ca3af;
  --border: #e5e7eb;
  --border-light: #f3f4f6;

  /* Semantic */
  --green: #059669;
  --green-dark: #047857;
  --green-light: #ecfdf5;
  --red: #dc2626;
  --red-dark: #b91c1c;
  --amber: #d97706;
  --blue: #0284c7;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-brand: 0 4px 14px rgba(124,58,237,0.35);
  --shadow-modal: 0 25px 50px -12px rgba(0,0,0,0.25);

  /* Radius + spacing */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Type weights */
  --weight-med: 500;
  --weight-semi: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* Font sizes */
  --size-xs: 11px;
  --size-sm: 13px;
  --size-md: 14px;
  --size-lg: 18px;

  /* Tier colors (mirrored from delivery-config) */
  --tier-early-bg:     #ecfdf5; --tier-early-fg:     #047857; --tier-early-bd:     #6ee7b7;
  --tier-standard-bg:  #dbeafe; --tier-standard-fg:  #1e40af; --tier-standard-bd:  #93c5fd;
  --tier-rush-bg:      #fef3c7; --tier-rush-fg:      #92400e; --tier-rush-bd:      #fcd34d;
  --tier-urgent-bg:    #ffedd5; --tier-urgent-fg:    #c2410c; --tier-urgent-bd:    #fdba74;
  --tier-critical-bg:  #fecaca; --tier-critical-fg:  #b91c1c; --tier-critical-bd:  #f87171;
  --tier-lastminute-bg:#ede9fe; --tier-lastminute-fg:#5b21b6; --tier-lastminute-bd:#c4b5fd;

  /* Card sizing — viewport-relative clamp; same value in landscape + portrait
     so orient flip is a rotation, not a resize. */
  --card-long:      clamp(420px, min(50vw, 70vh), 1400px);
  --card-long-wide: clamp(460px, min(56vw, 75vh), 1500px);
  --card-bs-long:      clamp(360px, min(34vw, 65vh), 1300px);
  --card-bs-long-wide: clamp(400px, min(38vw, 70vh), 1400px);
}

/* Full-bleed wrap — no centered container */
.cfg-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Hero SEO intro — admin-editable copy that renders above the build
   stage on the storefront landing. Collapses to a single-line summary
   via <details> so returning customers can dismiss it after first view. */
.cfg-seo-intro {
  margin: 0 24px 18px;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.cfg-seo-intro-summary {
  cursor: pointer;
  font-weight: var(--weight-bold);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--text-2);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cfg-seo-intro-summary::-webkit-details-marker { display: none; }
.cfg-seo-intro-summary::after {
  content: '▾';
  font-size: 10px;
  color: var(--subtext);
  transition: transform 0.18s;
}
.cfg-seo-intro:not([open]) .cfg-seo-intro-summary::after { transform: rotate(-90deg); }
.cfg-seo-intro-body { margin-top: 10px; }
.cfg-seo-intro-body p { margin: 0 0 10px; }
.cfg-seo-intro-body p:last-child { margin-bottom: 0; }
.cfg-seo-intro-body h2 { font-size: 16px; font-weight: var(--weight-bold); color: var(--text-2); margin: 12px 0 6px; }
.cfg-seo-intro-body h3 { font-size: 13px; font-weight: var(--weight-semi); color: var(--text-2); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.cfg-seo-intro-body ul { margin: 0 0 10px 22px; padding: 0; }
.cfg-seo-intro-body li { margin: 0 0 4px; }
.cfg-seo-intro-body strong { color: var(--text-2); }

/* Stage-main grid: build rail (300px) + hero (1fr).
   When body.proof-active is set, a 3rd 380px column appears for the analysis rail. */
.cfg-stage-main {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 620px;
  transition: grid-template-columns 0.4s cubic-bezier(0.2,0.8,0.2,1);
}
body.cfg-proof-active .cfg-stage-main {
  grid-template-columns: 300px 1fr 380px;
}

/* === Nav (3-tier) === */
.cfg-nav-utility {
  background: var(--border-light);
  border-bottom: 1px solid var(--border);
  padding: 7px 24px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--size-xs); color: var(--subtext);
}
.cfg-nu-right { display: flex; gap: 18px; }
.cfg-nu-right a {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--subtext); text-decoration: none; cursor: pointer;
  font-weight: var(--weight-med);
}
.cfg-nu-right a:hover { color: var(--primary); }

.cfg-nav-main {
  background: white;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 20px;
  border-bottom: 1px solid var(--border);
}
.cfg-nm-hamburger {
  background: none; border: 0; cursor: pointer; padding: 8px;
  color: var(--text-2); font-size: 18px;
}
.cfg-nm-search {
  flex: 1;
  display: flex; align-items: center;
  border: 2px solid var(--primary);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: white;
  height: 44px;
  max-width: 680px;
}
.cfg-nm-search input {
  flex: 1; border: 0; padding: 0 18px;
  font-family: inherit; font-size: var(--size-md);
  color: var(--text);
  outline: none; background: transparent;
}
.cfg-nm-search .cat-sel {
  background: transparent; border: 0;
  border-left: 1px solid var(--border);
  padding: 0 14px; font-family: inherit;
  font-size: var(--size-sm); color: var(--text);
  cursor: pointer; height: 100%;
}
.cfg-nm-search .search-btn {
  background: var(--primary); color: white; border: 0;
  width: 60px; height: 100%; cursor: pointer;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.cfg-nm-icons { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.cfg-nm-icon-btn {
  position: relative; background: none; border: 0; cursor: pointer;
  padding: 6px; color: var(--text-2); font-size: 18px;
  display: flex; align-items: center; gap: 5px;
}
.cfg-nm-icon-btn .badge {
  position: absolute; top: -2px; right: -6px;
  background: var(--primary); color: white;
  font-size: 9px; font-weight: var(--weight-bold);
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.cfg-nm-icon-btn .cart-amt {
  font-size: var(--size-sm); font-weight: var(--weight-bold);
  margin-left: 3px;
}

.cfg-nav-categories {
  background: var(--primary);
  padding: 0 24px;
  display: flex; align-items: center; gap: 0;
}
.cfg-nav-categories a {
  color: white; text-decoration: none;
  padding: 13px 18px;
  font-size: var(--size-sm); font-weight: var(--weight-semi);
}
.cfg-nav-categories a:hover,
.cfg-nav-categories a.active { background: var(--primary-dark); }

/* === Breadcrumb === */
.cfg-breadcrumb {
  padding: 14px 24px;
  font-size: var(--size-xs);
  color: var(--subtext);
  display: flex; align-items: center; gap: 8px;
}
.cfg-breadcrumb a { color: var(--subtext); text-decoration: none; }
.cfg-breadcrumb a:hover { color: var(--primary); }
.cfg-bc-sep { color: var(--muted); }
.cfg-bc-current { color: var(--text-2); font-weight: var(--weight-semi); }

/* === Style Picker === */
.cfg-style-picker {
  display: flex; gap: 12px; padding: 0 24px 14px;
  overflow-x: auto;
}
.cfg-style-card {
  flex: 0 0 auto;
  min-width: 180px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  position: relative;
  transition: all 0.18s;
}
.cfg-style-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.cfg-style-card.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}
.cfg-style-popular {
  position: absolute; top: 8px; right: 8px;
  background: var(--text-2); color: white;
  font-size: 9px; font-weight: var(--weight-bold);
  padding: 2px 8px; border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
}
.cfg-style-label { font-size: var(--size-md); font-weight: var(--weight-black); color: var(--text-2); }
.cfg-style-sub { font-size: var(--size-xs); color: var(--subtext); }
.cfg-style-price { font-size: var(--size-xs); color: var(--primary); font-weight: var(--weight-bold); margin-top: 4px; }

/* === Build Rail === */
/* Height accounts for the dock area via the --cfg-dock-h CSS variable
   that initDockSync updates with the current dock total height. Falls
   back to 280px (rough dock estimate) if JS hasn't run yet. This keeps
   the artwork zone above the docked swap-wrap instead of letting it
   slip under the dock. */
.cfg-build-rail {
  /* Bottom padding removed so the artwork zone sits flush against the
     swap-wrap (which lives directly below the rail). The grid's natural
     stretch handles vertical sizing — no explicit height calc needed. */
  padding: 24px 18px 0;
  display: flex; flex-direction: column;
  min-height: 520px;
  background: transparent;
}
.cfg-page-title { font-family: 'Montserrat', sans-serif; font-size: 30px; margin: 0 0 4px; letter-spacing: -0.02em; }
.cfg-rail-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.cfg-rail-meta-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--subtext); font-weight: var(--weight-bold); }
.cfg-rail-meta-tag { display: inline-block; background: #fff; border-radius: var(--radius-pill); padding: 3px 10px; font-size: 10px; color: var(--text-2); font-weight: var(--weight-semi); }
/* Column-layout toggle — small icon-pair to flip the build grid between
   2-up and 1-up. Sits at the right end of the rail meta row. */
.cfg-cols-toggle {
  margin-left: auto;
  display: inline-flex; gap: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1px;
}
.cfg-cols-btn {
  background: transparent; border: 0; cursor: pointer;
  padding: 3px 5px;
  border-radius: calc(var(--radius-md) - 2px);
  color: var(--subtext);
  display: inline-flex; align-items: center; justify-content: center;
}
.cfg-cols-btn:hover { color: var(--text-2); background: var(--border-light); }
.cfg-build-rail:not(.cols-1) .cfg-cols-btn[data-build-cols="2"],
.cfg-build-rail.cols-1 .cfg-cols-btn[data-build-cols="1"] {
  background: var(--text-2); color: #fff;
}
/* 1-up layout — single-column build grid */
.cfg-build-rail.cols-1 .cfg-build-grid { grid-template-columns: 1fr; }
.cfg-build-rail.cols-1 .cfg-build-card { min-height: 90px; }

/* ============================================================
   Artwork Workspace — 4-mode tabbed pane that takes over the swap
   carousel when the user clicks an artwork alt-button. Phase 1A:
   UI complete with mocked actions (templates, AI, designer). Real
   wiring lands in 1C with the Proof View backend.
   ============================================================ */
.cfg-artwork-ws { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.cfg-aw-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.cfg-aw-tab {
  background: transparent; border: 0; cursor: pointer;
  padding: 8px 12px 10px;
  font-family: inherit; font-size: 11px; font-weight: var(--weight-semi);
  color: var(--subtext);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 6px;
}
.cfg-aw-tab:hover { color: var(--text-2); }
.cfg-aw-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.cfg-aw-tab-icon { font-size: 14px; }
.cfg-aw-body { display: flex; flex-direction: column; gap: 12px; }

/* Shared workspace button */
.cfg-aw-ws-btn {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 7px 14px;
  font-family: inherit; font-size: 11px; font-weight: var(--weight-semi);
  color: var(--text-2);
  cursor: pointer;
}
.cfg-aw-ws-btn:hover { border-color: var(--primary); color: var(--primary); }
.cfg-aw-ws-btn-primary {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.cfg-aw-ws-btn-primary:hover { background: var(--primary-dark, #6d28d9); color: #fff; }
.cfg-aw-ws-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cfg-aw-ws-btn-ghost {
  background: transparent; border-color: transparent;
  color: var(--primary); padding-left: 4px; padding-right: 4px;
}
.cfg-aw-ws-btn-ghost:hover { text-decoration: underline; }

/* DESIGNER BRIEF MODE — Hire-a-designer intake form */
.cfg-aw-brief-form { display: flex; flex-direction: column; gap: 10px; }
.cfg-aw-brief-intro { font-size: 11px; color: var(--subtext); line-height: 1.5; margin-bottom: 4px; }
.cfg-aw-brief-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cfg-aw-brief-field { display: flex; flex-direction: column; gap: 3px; }
.cfg-aw-brief-lbl   { font-size: 10px; font-weight: var(--weight-semi); color: var(--text-2); letter-spacing: 0.02em; }
.cfg-aw-brief-opt   { color: var(--subtext); font-weight: var(--weight-medium); }
.cfg-aw-brief-form input,
.cfg-aw-brief-form select,
.cfg-aw-brief-form textarea {
  font-family: inherit; font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff; color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cfg-aw-brief-form input:focus,
.cfg-aw-brief-form select:focus,
.cfg-aw-brief-form textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-focus, rgba(124,58,237,0.16));
}
.cfg-aw-brief-form textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.cfg-aw-brief-err {
  background: #fef2f2; color: #991b1b;
  padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 11px; border-left: 3px solid #dc2626;
}
.cfg-aw-brief-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.cfg-aw-brief-promise { font-size: 10px; color: var(--subtext); }
.cfg-aw-brief-promise strong { color: var(--text-2); }

.cfg-aw-brief-success {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border: 1px solid #a7f3d0;
  border-radius: var(--radius-md);
  padding: 18px 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.cfg-aw-brief-success-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: #059669; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
}
.cfg-aw-brief-success-title { font-size: 13px; font-weight: 700; color: #065f46; }
.cfg-aw-brief-success-body  { font-size: 11px; color: #047857; line-height: 1.5; max-width: 280px; }

/* UPLOAD MODE */
.cfg-aw-bigdrop {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  text-align: center;
  background: #fafaf8;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: all 0.15s;
}
.cfg-aw-bigdrop:hover { border-color: var(--primary); background: var(--primary-light, #ede9fe); }
.cfg-aw-bigdrop-icon { font-size: 28px; }
.cfg-aw-bigdrop-title { font-size: 13px; font-weight: var(--weight-semi); color: var(--text-2); margin-top: 4px; }
.cfg-aw-bigdrop-sub   { font-size: 11px; color: var(--subtext); margin-bottom: 6px; }
.cfg-aw-bigdrop .cfg-aw-ws-btn { margin-top: 4px; }
.cfg-aw-tips {
  background: #fafaf8;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 11px; color: var(--text);
}
.cfg-aw-tips ul { margin: 4px 0 0; padding-left: 18px; line-height: 1.6; }
.cfg-aw-tips strong { color: var(--text-2); font-size: 11px; }
.cfg-aw-uploaded {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--green-light, #d1fae5);
  border: 1px solid #6ee7b7;
  border-radius: var(--radius-md);
}
.cfg-aw-uploaded-icon { font-size: 22px; }
.cfg-aw-uploaded-meta { flex: 1; min-width: 0; }
.cfg-aw-uploaded-name { font-size: 12px; font-weight: var(--weight-semi); color: var(--text-2); }
.cfg-aw-uploaded-stats { font-size: 10px; color: var(--subtext); margin-top: 1px; }
.cfg-aw-validation {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.cfg-aw-vrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
}
.cfg-aw-vrow.ok { color: #166534; }
.cfg-aw-vrow.warn { color: #92400e; }
.cfg-aw-vmark { font-weight: var(--weight-bold); width: 14px; }

/* TEMPLATES MODE */
.cfg-aw-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.cfg-aw-filter {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  font-family: inherit; font-size: 10px; font-weight: var(--weight-semi);
  color: var(--subtext); cursor: pointer;
}
.cfg-aw-filter:hover { color: var(--primary); border-color: var(--primary); }
.cfg-aw-filter.active { background: var(--text-2); color: #fff; border-color: var(--text-2); }
.cfg-aw-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.cfg-aw-tpl-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px;
  font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  text-align: left;
}
.cfg-aw-tpl-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.cfg-aw-tpl-thumb {
  height: 60px; border-radius: var(--radius-sm);
  position: relative;
}
.cfg-aw-tpl-cat {
  position: absolute; top: 5px; right: 5px;
  background: rgba(255,255,255,0.85); color: var(--text-2);
  padding: 1px 6px; border-radius: var(--radius-pill);
  font-size: 8px; font-weight: var(--weight-semi);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.cfg-aw-tpl-name { font-size: 11px; font-weight: var(--weight-semi); color: var(--text-2); padding: 0 4px; }
.cfg-aw-tpl-cta { font-size: 9px; color: var(--primary); padding: 0 4px 2px; }
.cfg-aw-empty { color: var(--subtext); font-size: 11px; padding: 14px; text-align: center; }
.cfg-aw-tpl-card[disabled] { cursor: not-allowed; opacity: 0.6; }
.cfg-aw-tpl-card[disabled]:hover { border-color: var(--border); transform: none; }
.cfg-aw-tpl-card.cfg-aw-tpl-loading { pointer-events: none; }
.cfg-aw-tpl-card.cfg-aw-tpl-loading .cfg-aw-tpl-thumb,
.cfg-aw-tpl-card.cfg-aw-tpl-loading::after {
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
  background-size: 200% 100%;
  animation: cfg-tpl-shimmer 1.2s linear infinite;
}
.cfg-aw-tpl-card.cfg-aw-tpl-loading::after { content: ''; display: block; height: 12px; border-radius: 4px; margin: 6px 4px 4px; }
@keyframes cfg-tpl-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* AI BRIEF MODE */
.cfg-aw-ai-form { display: flex; flex-direction: column; gap: 8px; }
.cfg-aw-ai-lbl { font-size: 11px; font-weight: var(--weight-semi); color: var(--text-2); }
.cfg-aw-ai-input {
  width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 8px 10px;
  font-family: inherit; font-size: 12px;
  color: var(--text-2);
  resize: vertical;
  min-height: 56px;
}
.cfg-aw-ai-input:focus { outline: none; border-color: var(--primary); }
.cfg-aw-ai-form .cfg-aw-ws-btn { align-self: flex-start; }
.cfg-aw-variations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.cfg-aw-var {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 5px; cursor: pointer; font-family: inherit;
}
.cfg-aw-var:hover { border-color: var(--primary); }
.cfg-aw-var-thumb { height: 70px; border-radius: var(--radius-sm); }
.cfg-aw-var-name { font-size: 10px; color: var(--subtext); padding: 4px 2px 0; font-weight: var(--weight-semi); }
.cfg-aw-var-loading {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  height: 96px;
  background: linear-gradient(90deg, #f4f4f5 25%, #e4e4e7 50%, #f4f4f5 75%);
  background-size: 200% 100%;
  animation: cfg-aw-shimmer 1.2s linear infinite;
}
@keyframes cfg-aw-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* DESIGNER MODE */
.cfg-aw-designers { display: flex; flex-direction: column; gap: 8px; }
.cfg-aw-designer {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.cfg-aw-designer-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #a78bfa);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}
.cfg-aw-designer-meta { flex: 1; min-width: 0; }
.cfg-aw-designer-name { font-size: 12px; font-weight: var(--weight-semi); color: var(--text-2); }
.cfg-aw-designer-bio  { font-size: 10px; color: var(--text); }
.cfg-aw-designer-stats { font-size: 10px; color: var(--subtext); margin-top: 1px; }
.cfg-aw-designer-note { font-size: 11px; color: var(--subtext); padding-top: 6px; }
.cfg-aw-designer-link { color: var(--primary); text-decoration: none; font-weight: var(--weight-semi); }
.cfg-aw-designer-link:hover { text-decoration: underline; }

/* Quick picks — vertical stack of preset chips. Click snaps style +
   quantity to a popular configuration. Dashed divider below separates
   from the build grid. Selected chip stays highlighted (.selected). */
.cfg-quick-picks {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
.cfg-qp-label {
  font-size: 9px; font-weight: var(--weight-semi);
  letter-spacing: 0.12em; color: var(--subtext);
  margin-bottom: 8px;
}
.cfg-qp-grid {
  display: flex; flex-direction: column;
  gap: 6px;
}
.cfg-qp-chip {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.18s;
  display: flex; align-items: center; gap: 10px;
}
.cfg-qp-chip:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}
.cfg-qp-chip.selected {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 2px var(--primary-light);
}
.cfg-qp-badge {
  background: var(--text-2); color: #fff;
  font-size: 8px; font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
}
.cfg-qp-badge-green  { background: #059669; }
.cfg-qp-badge-violet { background: #7c3aed; }
.cfg-qp-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cfg-qp-name { font-size: 12px; font-weight: var(--weight-semi); color: var(--text-2); }
.cfg-qp-sub  { font-size: 10px; color: var(--subtext); font-weight: var(--weight-med); }

/* Incompatible chip mark — drawn in the corner of paper/finish chips
   inside the swap carousel when the chip would conflict with the
   current state. Still clickable; picking it triggers the conflict
   banner with a one-click fix. Visual is a small amber triangle so
   compat is communicated before the user commits. */
.cfg-swap-item.cfg-swap-incompat { opacity: 0.78; }
.cfg-swap-item.cfg-swap-incompat:hover { opacity: 1; }
.cfg-swap-incompat-mark {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 13px;
  line-height: 1;
  color: #b45309;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 50%;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  pointer-events: none;
}

/* ============================================================
   BELOW-THE-FOLD CONTENT (p1-product-desc)
   ============================================================
   Long-form copy + specs table rendered under the configurator.
   Two-column grid: copy on the left (60%), specs sidebar on the
   right (40%). Stacks on narrow viewports. */
.cfg-below-fold {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 48px;
  max-width: 1080px;
  margin: 48px auto 64px;
  padding: 0 24px;
}
@media (max-width: 880px) {
  .cfg-below-fold { grid-template-columns: 1fr; gap: 32px; }
}
.cfg-below-fold-copy { color: var(--text-2); font-size: 15px; line-height: 1.7; }
.cfg-below-fold-copy h2 { font-size: 22px; font-weight: var(--weight-semi); color: var(--text); margin: 32px 0 12px; letter-spacing: -0.01em; }
.cfg-below-fold-copy h2:first-child { margin-top: 0; }
.cfg-below-fold-copy h3 { font-size: 17px; font-weight: var(--weight-semi); color: var(--text); margin: 24px 0 10px; }
.cfg-below-fold-copy p { margin: 0 0 14px; }
.cfg-below-fold-copy ul, .cfg-below-fold-copy ol { margin: 0 0 14px; padding-left: 22px; }
.cfg-below-fold-copy li { margin: 4px 0; }
.cfg-below-fold-copy strong { font-weight: var(--weight-semi); color: var(--text); }
.cfg-below-fold-copy a { color: var(--primary); text-decoration: underline; text-decoration-color: rgba(124,58,237,0.4); }
.cfg-below-fold-copy a:hover { text-decoration-color: var(--primary); }

.cfg-below-fold-specs {
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  height: max-content;
  position: sticky;
  top: 90px;
}
@media (max-width: 880px) { .cfg-below-fold-specs { position: static; } }
.cfg-below-fold-specs-title { font-size: 12px; font-weight: var(--weight-semi); color: var(--subtext); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 14px; }
.cfg-specs-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cfg-specs-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-light); }
.cfg-specs-row:last-child { border-bottom: 0; }
.cfg-specs-row dt { font-size: 12px; color: var(--subtext); font-weight: var(--weight-med); margin: 0; }
.cfg-specs-row dd { font-size: 14px; color: var(--text); font-weight: var(--weight-semi); margin: 0; }

/* ============================================================
   RELATED PRODUCTS (p1-related)
   ============================================================
   Same-category cross-sell row. Auto-fit grid of styled cards that
   collapses to fewer columns on narrower screens. Each card is a
   single <a> so the whole tile is clickable (good for touch). */
.cfg-related {
  max-width: 1080px;
  margin: 24px auto 64px;
  padding: 0 24px;
}
.cfg-related-title {
  font-size: 22px;
  font-weight: var(--weight-semi);
  color: var(--text);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.cfg-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.cfg-related-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 16px 18px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  gap: 6px;
}
.cfg-related-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.cfg-related-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.cfg-related-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 9px;
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--primary);
  color: #fff;
  padding: 3px 7px;
  border-radius: 4px;
}
.cfg-related-icon {
  font-size: 28px;
  line-height: 1;
  margin: 4px 0 6px;
  color: var(--primary);
}
.cfg-related-label {
  font-size: 14px;
  font-weight: var(--weight-semi);
  color: var(--text);
  line-height: 1.3;
}
.cfg-related-sub {
  font-size: 11px;
  color: var(--subtext);
  font-weight: var(--weight-med);
  line-height: 1.3;
}
.cfg-related-price {
  font-size: 12px;
  font-weight: var(--weight-semi);
  color: var(--primary);
  margin-top: 4px;
}

/* ============================================================
   FAQ ACCORDION (p1-faq)
   ============================================================
   Native <details>/<summary> for keyboard + screen-reader
   accessibility. Subtle hover state on the question, rotates the
   default disclosure triangle into a + → × visual using ::marker. */
.cfg-faq {
  max-width: 1080px;
  margin: 24px auto 64px;
  padding: 0 24px;
}
.cfg-faq-title {
  font-size: 22px;
  font-weight: var(--weight-semi);
  color: var(--text);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.cfg-faq-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
}
.cfg-faq-item {
  border-bottom: 1px solid var(--border-light);
}
.cfg-faq-item:last-child { border-bottom: 0; }
.cfg-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: var(--weight-semi);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: background 0.12s;
  user-select: none;
}
.cfg-faq-item summary::-webkit-details-marker { display: none; }
.cfg-faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 14px; height: 14px;
  background: linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat,
              linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat;
  color: var(--primary);
  transition: transform 0.2s;
}
.cfg-faq-item[open] summary::after {
  background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat;
  transform: rotate(180deg);
}
.cfg-faq-item summary:hover { background: var(--primary-light); color: var(--primary); }
.cfg-faq-item summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.cfg-faq-a {
  padding: 0 20px 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-2);
}

/* ============================================================
   ACCESSIBILITY (p1-a11y)
   ============================================================
   Global focus indicators meeting WCAG 2.4.7 (visible focus) and
   1.4.11 (3:1 contrast against background). :focus-visible is the
   modern keyboard-only ring; mouse clicks don't trigger it so the
   visual noise stays low. Override sparingly in component CSS — when
   you must, keep the 2px ring + brand color rule. */
:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
  border-radius: 4px;
}
.cfg-pill:focus-visible,
.cfg-vt-btn:focus-visible,
.cfg-zoom-btn:focus-visible,
.cfg-cols-btn:focus-visible,
.cfg-swap-close:focus-visible,
.cfg-build-card:focus-visible,
.cfg-swap-item:focus-visible,
.cfg-qp-chip:focus-visible,
.cfg-aw-alt-btn:focus-visible,
.cfg-hotspot:focus-visible,
.cfg-restore-btn:focus-visible,
.cfg-cb-btn:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}
/* Visually-hidden text for screen-reader-only labels (e.g. icon-only
   indicators where the icon conveys meaning by color). Standard a11y
   utility class — text is excluded from the visual flow but read out. */
.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;
}
/* Honour prefers-reduced-motion — disable the 3D card flip, tilt, and
   carousel scrolling animation for users who get vestibular triggers
   from continuous motion. */
@media (prefers-reduced-motion: reduce) {
  .cfg-card-3d, .cfg-card-3d * {
    transition: none !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .acct-tl-line, .cfg-build-card, .cfg-swap-item { transition: none !important; }
}

/* Restore banner — shown when localStorage has an auto-saved build
   from a previous visit (abandoned cart recovery). Purple-tinted to
   signal "good news" rather than "warning". */
.cfg-restore-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 0 12px;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: var(--radius-md);
  font-size: 12px;
  color: #5b21b6;
}
.cfg-restore-banner[hidden] { display: none; }
.cfg-restore-icon { font-size: 15px; line-height: 1; color: #7c3aed; flex-shrink: 0; }
.cfg-restore-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.cfg-restore-body strong { font-weight: var(--weight-semi); font-size: 12.5px; color: #5b21b6; }
.cfg-restore-body span { font-size: 11.5px; color: #7c3aed; }
.cfg-restore-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cfg-restore-btn {
  background: #fff;
  border: 1px solid #c4b5fd;
  color: #5b21b6;
  font-family: inherit;
  font-size: 11px;
  font-weight: var(--weight-semi);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.cfg-restore-btn.cfg-restore-restore { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.cfg-restore-btn.cfg-restore-restore:hover { background: #6d28d9; }
.cfg-restore-btn.cfg-restore-dismiss { background: transparent; border-color: #e5e7eb; color: #6b7280; }
.cfg-restore-btn.cfg-restore-dismiss:hover { background: #f9fafb; }

/* Sourcing notice — Custom Build mode only. Calm slate-blue pill that
   appears when the matrix allows the combo but no curated entry stocks
   it. Distinct from the amber conflict banner so customers don't think
   they did anything wrong — they just picked an off-the-menu combo. */
.cfg-sourcing-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 0 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-md);
  font-size: 12px;
  color: #1e3a8a;
}
.cfg-sourcing-notice[hidden] { display: none; }
.cfg-sn-icon { font-size: 15px; line-height: 1; color: #2563eb; flex-shrink: 0; }
.cfg-sn-body { display: flex; flex-direction: column; gap: 2px; }
.cfg-sn-body strong { font-weight: var(--weight-semi); font-size: 12.5px; color: #1e3a8a; }
.cfg-sn-body span { font-size: 11.5px; color: #2563eb; }

/* Continue-CTA in quote mode — replaces the dollar amount with a free
   quote-request label. Visual cue: switches to the neutral primary so
   it doesn't feel transactional. */
.cfg-primary-cta.cfg-cta-quote {
  background: #1e3a8a;
  color: #fff;
}
.cfg-primary-cta.cfg-cta-quote:hover { background: #1e40af; }

/* Conflict resolution banner — Custom Build mode only. Renders above the
   build grid with a one-click "Switch X" action + Cancel-to-revert. */
.cfg-conflict-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 0 12px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: var(--radius-md);
  font-size: 12px;
  color: #78350f;
}
.cfg-conflict-banner[hidden] { display: none; }
.cfg-cb-icon { font-size: 16px; line-height: 1; flex-shrink: 0; color: #b45309; }
.cfg-cb-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.cfg-cb-title { font-weight: var(--weight-semi); font-size: 12.5px; color: #78350f; }
.cfg-cb-detail { font-size: 11.5px; color: #92400e; }
.cfg-cb-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: flex-start; }
.cfg-cb-btn {
  background: #fff;
  border: 1px solid #d97706;
  color: #b45309;
  font-family: inherit;
  font-size: 11px;
  font-weight: var(--weight-semi);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.cfg-cb-btn:hover { background: #fef3c7; }
.cfg-cb-btn.cfg-cb-btn-cancel {
  background: transparent;
  border-color: #d6d3d1;
  color: #78716c;
}
.cfg-cb-btn.cfg-cb-btn-cancel:hover { background: #fafaf9; }

.cfg-build-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

/* Style mode hides Paper + Finish; Custom Build mode reveals them.
   Toggled by configurator.js renderBuildCards() based on style_slug. */
.cfg-build-card-custom-only { display: none; }
.cfg-build-grid.is-custom .cfg-build-card-custom-only { display: flex; }

/* Paper + finish thumbnails — colored swatches mirroring the hero card
   finish overlays (cfg-face-front variants), but at thumb scale. Falls
   back to neutral surface when the slug isn't matched. */
.cfg-paper-thumb, .cfg-finish-thumb {
  display: block; width: 100%; height: 100%;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
}
.cfg-paper-thumb.paper-silk_16pt,
.cfg-paper-thumb.paper-silk_14pt     { background: linear-gradient(135deg, #f9fafb, #e7e5e4); }
.cfg-paper-thumb.paper-uncoated_16pt,
.cfg-paper-thumb.paper-uncoated_14pt { background: linear-gradient(135deg, #fefce8, #fef3c7); }
.cfg-paper-thumb.paper-cotton_38pt   { background: linear-gradient(135deg, #fef9c3, #fde68a); }
.cfg-paper-thumb.paper-layered_48pt  {
  background:
    linear-gradient(180deg, #fff 0%, #fff 33%, #7c3aed 33%, #7c3aed 50%, #fff 50%, #fff 83%, #1a1625 83%, #1a1625 100%);
}
.cfg-finish-thumb.finish-gloss      { background: linear-gradient(135deg, #fff 0%, #cbd5e1 45%, #fff 60%, #94a3b8 100%); }
.cfg-finish-thumb.finish-matte      { background: linear-gradient(135deg, #e5e7eb, #cbd5e1); }
.cfg-finish-thumb.finish-silk       { background: linear-gradient(135deg, #f1f5f9, #cbd5e1 60%, #f1f5f9); }
.cfg-finish-thumb.finish-soft_touch { background: linear-gradient(135deg, #f3e8ff, #c4b5fd); }
.cfg-finish-thumb.finish-spot_uv    {
  background:
    radial-gradient(circle at 35% 35%, #fff 0 14%, transparent 15%),
    radial-gradient(circle at 65% 65%, #fff 0 10%, transparent 11%),
    linear-gradient(135deg, #1a1625, #4c1d95);
}
.cfg-finish-thumb.finish-uncoated   { background: linear-gradient(135deg, #fefce8, #fef3c7); }

.cfg-build-card {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  min-height: 118px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  font-family: inherit;
  text-align: left;
  transition: all 0.18s;
  position: relative;
}
.cfg-build-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.cfg-build-card.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}
.cfg-bc-label { font-size: 9px; font-weight: var(--weight-semi); color: var(--subtext); letter-spacing: 0.12em; }
.cfg-bc-thumb { display: block; width: 100%; height: 36px; background: var(--border-light); border-radius: var(--radius-sm); margin: 4px 0; }
.cfg-bc-value { font-size: var(--size-sm); font-weight: var(--weight-semi); color: var(--text-2); }
.cfg-bc-sub { font-size: 10px; color: var(--subtext); font-weight: var(--weight-med); }

.cfg-rail-spacer { flex: 1 1 auto; min-height: 14px; }

/* Artwork zone */
.cfg-artwork-zone {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  flex-shrink: 0;
  margin-top: auto;
}
.cfg-aw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cfg-aw-label { font-size: 10px; font-weight: var(--weight-semi); color: var(--subtext); letter-spacing: 0.12em; }
.cfg-aw-helper { font-size: var(--size-xs); color: var(--subtext); margin: 0 0 10px; }

.cfg-aw-drop {
  border: 1.5px dashed var(--primary);
  border-radius: var(--radius-md);
  padding: 18px 12px;
  text-align: center;
  font-size: var(--size-xs);
  color: var(--subtext);
  background: var(--primary-light);
  cursor: pointer;
  transition: all 0.18s;
}
.cfg-aw-drop:hover { transform: scale(1.01); }
/* Drag-over state — light up the drop zone when a file is being dragged
   onto it so the customer knows it's a valid drop target. */
.cfg-aw-drop.drag,
.cfg-aw-drop.drag-over {
  background: var(--primary-light, #ede9fe);
  border-color: var(--primary, #7c3aed);
  transform: scale(1.02);
}
.cfg-aw-drop strong { display: block; color: var(--text-2); font-size: var(--size-sm); margin: 6px 0 3px; }
.cfg-aw-drop small { display: block; }
.cfg-aw-drop-icon { font-size: 22px; }

.cfg-aw-alt { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.cfg-aw-alt-btn {
  display: grid; grid-template-columns: 28px 1fr 16px;
  align-items: center; gap: 8px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.18s;
}
.cfg-aw-alt-btn:hover { border-color: var(--primary); }
.cfg-aw-alt-btn .ic { display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); }
/* Lucide icon sizing — 24x24 by default, smaller in tight contexts */
.cfg-lucide { width: 20px; height: 20px; display: block; flex-shrink: 0; }
.cfg-lucide-arr { width: 14px; height: 14px; color: var(--subtext); }
.cfg-aw-drop-icon .cfg-lucide { width: 28px; height: 28px; color: var(--primary); margin: 0 auto; }
.cfg-aw-alt-btn .txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cfg-aw-alt-btn .nm { font-size: var(--size-xs); font-weight: var(--weight-bold); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-aw-alt-btn .sub { display: block; font-size: 10px; color: var(--subtext); font-weight: var(--weight-med); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-aw-alt-btn .arr { color: var(--subtext); text-align: right; }

.cfg-aw-proof {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--green-light);
  border: 1.5px solid #a7f3d0;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.cfg-aw-proof input[type="checkbox"] { accent-color: var(--green); margin-top: 2px; }
.cfg-aw-proof strong { font-size: var(--size-xs); color: var(--green-dark); display: block; }
.cfg-aw-proof small { display: block; font-size: 10px; color: var(--subtext); }

/* === Hero Stage === */
/* The card preview centers both horizontally AND vertically on the stage.
   Using min-height (not height) so the stage stretches to match the
   build rail's grid track on tall viewports — otherwise the stage gets
   capped at 1100px while the build rail (calc(100vh - 380px)) keeps
   growing, leaving ~400px of empty space below the stage that makes
   the card look top-aligned in the visible right column. */
.cfg-hero-stage {
  /* Sticky so the product preview stays in view while the user scrolls
     the build rail (artwork zone, quick picks, etc.) on shorter screens.
     `align-self: start` lets the stage sit at the top of its grid row
     instead of stretching to match the rail. */
  position: sticky;
  top: 12px;
  align-self: start;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 48px; perspective: 1800px; overflow: hidden;
  /* Stage fills the leftover viewport between top chrome and the fixed
     bottom dock. Both --cfg-stage-top (top-of-stage in viewport coords)
     and --cfg-dock-h (bottom dock height) are set by initDockSync().
     max-height clamps the stage so card centering can't push the card
     behind the dock. */
  --cfg-stage-fit: calc(100vh - var(--cfg-dock-h, 380px) - var(--cfg-stage-top, 180px) - 16px);
  min-height: clamp(280px, var(--cfg-stage-fit), 1100px);
  max-height: clamp(280px, var(--cfg-stage-fit), 1100px);
  container-type: size; container-name: stage;
  background: transparent;
}

/* Card preview */
.cfg-card-3d {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2,0.8,0.2,1),
              width 0.5s cubic-bezier(0.2,0.8,0.2,1),
              height 0.5s cubic-bezier(0.2,0.8,0.2,1);
  transform-origin: center center;
  container-type: size; container-name: card;
  width: var(--card-long);
  aspect-ratio: 1.75/1;
  /* Pan offset applied via CSS variables so it's independent of the
     card's flip / orient rotation transforms (which JS sets inline).
     At rest, when no inline transform is set, this rule applies. */
  transform: translate(var(--pan-x, 0px), var(--pan-y, 0px));
}
/* Pannable cursor — only when zoomed in past 100%. */
.cfg-card-3d.cfg-pannable { cursor: grab; touch-action: none; }
.cfg-card-3d.cfg-pannable.panning { cursor: grabbing; }
/* Drag should feel instant — kill the 0.6s transform transition while
   the user is actively dragging. */
.cfg-card-3d.panning { transition: none !important; }
.cfg-card-3d.size-std.portrait    { width: auto; height: var(--card-long); aspect-ratio: 1/1.75; }
.cfg-card-3d.size-sq              { width: var(--card-long); aspect-ratio: 1/1; }
.cfg-card-3d.size-slim            { width: var(--card-long-wide); aspect-ratio: 3/1; }
.cfg-card-3d.size-slim.portrait   { width: auto; height: var(--card-long-wide); aspect-ratio: 1/3; }

.cfg-hero-card {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.2,0.8,0.2,1);
}
.cfg-hero-card.flipped { transform: rotateY(180deg); }

.cfg-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  box-shadow: 0 30px 60px -12px rgba(0,0,0,0.4), 0 12px 24px -8px rgba(0,0,0,0.18);
  transition: border-radius 0.4s;
  border-radius: 0; overflow: hidden;
  background: linear-gradient(135deg, #fff, #fafaf8);
}
.cfg-face.back { background: var(--text-2); color: white; transform: rotateY(180deg); }
.cfg-face-content { position: absolute; inset: 0; padding: 7cqmin 8cqmin; display: flex; flex-direction: column; justify-content: space-between; }
.cfg-face.back .cfg-face-content { align-items: center; justify-content: center; padding: 10cqmin 8cqmin; }
.cfg-bc-name { font-size: 7cqmin; font-weight: var(--weight-black); color: var(--text-2); letter-spacing: -0.02em; line-height: 1; }
.cfg-bc-role { font-size: 2.4cqmin; color: var(--subtext); margin-top: 1cqmin; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
.cfg-bc-contact { font-size: 2.6cqmin; color: #52525b; line-height: 1.6; }
.cfg-bc-contact strong { color: var(--text-2); font-weight: 600; }
.cfg-bc-logo { font-weight: var(--weight-black); font-size: 10cqmin; letter-spacing: 0.08em; }
.cfg-bc-tag  { font-size: 2.4cqmin; color: rgba(255,255,255,0.7); letter-spacing: 0.25em; margin-top: 2cqmin; }

/* 2D mode — flat resting, but flip still uses 3D rotateY for un-mirrored back */
.cfg-card-3d.view-2d { perspective: 1800px; }
.cfg-card-3d.view-2d .cfg-hero-card { transform-style: preserve-3d; }
.cfg-card-3d.view-2d .cfg-hero-card:not(.flipped) { transform: none !important; }
.cfg-card-3d.view-2d .cfg-hero-card.flipped       { transform: rotateY(180deg) !important; }

/* 3D mode (default — no .view-2d class): baseline tilt makes the card
   feel volumetric. JS adds mouse-tracked tilt on top while the cursor
   is over the stage. Ported from v49 line 1374-1395. */
.cfg-card-3d:not(.view-2d) .cfg-hero-card:not(.flipped) {
  transform: rotateX(6deg) rotateY(-7deg);
  transition: transform 0.7s cubic-bezier(0.2,0.8,0.2,1);
}
.cfg-card-3d:not(.view-2d) .cfg-hero-card.flipped {
  transform: rotateX(6deg) rotateY(-187deg);
}
/* Snappier transition while cursor is actively tilting the card. */
.cfg-card-3d.mouse-tilting .cfg-hero-card { transition: transform 80ms linear !important; }
.cfg-card-3d.view-2d .cfg-face { box-shadow: var(--shadow-md); }

/* Photographic crop views — replace the 3D card preview when a hot spot is
   clicked. Hidden by default, faded in via .active. Mirrors v49 line 1050. */
.cfg-crop-view {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  padding: 30px;
  z-index: 9;
}
.cfg-crop-view.active {
  display: flex;
  animation: cfg-cropFade 0.5s ease;
}
.cfg-crop-view svg { max-width: 100%; max-height: 100%; }
.cfg-crop-caption {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: rgba(26,22,37,0.92); color: #fff;
  padding: 8px 16px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: var(--weight-semi);
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
}
@keyframes cfg-cropFade {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* When a crop is active, hide the 3D card preview */
.cfg-card-3d.cfg-hidden {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s;
}

/* Reset view pill — now lives in the bottom controls bar (always visible
   alongside Flip / Both sides / 3D-2D-Proof / Zoom). Resets crop view +
   zoom level in one click. */
.cfg-reset-pill {
  background: rgba(255,255,255,0.95);
  color: var(--text-2);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-size: var(--size-xs); font-weight: var(--weight-semi);
  box-shadow: var(--shadow-sm);
  border: 0; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.cfg-reset-pill:hover { background: #fff; }
.cfg-reset-pill.show { display: inline-flex; align-items: center; gap: 5px; }
.cfg-reset-pill:hover { background: #fff; box-shadow: var(--shadow-md); }

/* Hot spots */
.cfg-hotspot {
  position: absolute;
  width: 18px; height: 18px;
  background: rgba(255,255,255,0.95);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 0 4px rgba(255,255,255,0.4);
  cursor: pointer;
  animation: cfg-pulse 2.4s ease-in-out infinite;
  z-index: 5;
}
.cfg-hotspot::after { content: ''; position: absolute; inset: 5px; background: var(--text-2); border-radius: 50%; }
@keyframes cfg-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Placeholder banner — overlays the hero card itself (centered), not
   floating above. Reads like a friendly "this is where your design will
   land" hint sitting on top of the sample card, with a soft frosted
   backdrop so it's legible against any card-front content underneath. */
.cfg-placeholder-banner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--primary-dark);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: var(--size-xs);
  font-weight: var(--weight-semi);
  border: 1px dashed var(--primary);
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.12);
  max-width: calc(100% - 32px);
  text-align: center;
  z-index: 8;
  pointer-events: none;
  line-height: 1.4;
}
.cfg-placeholder-banner.hidden { display: none; }
@media (max-width: 760px) {
  .cfg-placeholder-banner {
    padding: 8px 14px;
    font-size: 11px;
    max-width: calc(100% - 24px);
  }
}

/* Both-sides view */
.cfg-both-sides-view {
  width: 100%;
  display: flex; gap: 48px;
  align-items: center; justify-content: center;
  perspective: 1400px;
}
.cfg-both-sides-view.layout-side-by-side { flex-direction: row; }
.cfg-both-sides-view.layout-stacked      { flex-direction: column; }
.cfg-bsv-card {
  background: linear-gradient(135deg, #fff, #fafaf8);
  border-radius: 0;  /* default matches Square; applyCornerRadius overrides */
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.35), 0 8px 20px -6px rgba(0,0,0,0.15);
  /* Padding handled by inner .cfg-face-content so back/front share the
     same vertical-centered vs space-between layout as the single card. */
  container-type: size; container-name: bsvcard;
  position: relative;
  transform-style: preserve-3d;
  flex-shrink: 0;
  transition: box-shadow 0.4s, border-radius 0.4s,
              transform 0.5s cubic-bezier(0.2,0.8,0.2,1),
              width 0.5s cubic-bezier(0.2,0.8,0.2,1),
              height 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
.cfg-bsv-card.back { background: var(--text-2); color: white; }
/* Bsv card content wrapper — back centers like the single-card back. */
.cfg-bsv-card.back .cfg-face-content {
  align-items: center; justify-content: center; padding: 10cqmin 8cqmin;
}
.cfg-bsv-card::after {
  content: attr(data-label);
  position: absolute; top: -26px; left: 2px;
  font-size: 10px; font-weight: var(--weight-black);
  color: var(--subtext); letter-spacing: 0.12em;
}
.cfg-both-sides-view.view-2d .cfg-bsv-card { box-shadow: var(--shadow-md); transform: none !important; }

/* === Proof View === */
.cfg-proof-view {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  gap: 18px;
}
.cfg-proof-stage {
  display: flex; align-items: center; justify-content: center;
  flex: 1; width: 100%;
  padding: 30px 0;
}
.cfg-proof-stage.row    { flex-direction: row;    gap: 60px; }
.cfg-proof-stage.column { flex-direction: column; gap: 48px; }
.cfg-proof-card {
  position: relative;
  background: linear-gradient(135deg, #fff, #fafaf8);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card-hover);
  container-type: size;
  overflow: visible;
  transition: border-radius 0.4s;
}
.cfg-proof-side-label {
  position: absolute; top: -26px; left: 2px;
  font-size: 10px; font-weight: var(--weight-black);
  color: var(--subtext); letter-spacing: 0.12em;
  z-index: 3;
}
.cfg-proof-art {
  position: absolute;
  inset: var(--ty, 5.56%) var(--tx, 3.33%);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 6%;
}
.cfg-proof-art.back-art { background: var(--text-2); color: white; align-items: center; justify-content: center; }
.cfg-proof-art .pa-name { font-size: 7cqmin; font-weight: var(--weight-black); color: var(--text-2); letter-spacing: -0.02em; }
.cfg-proof-art .pa-role { font-size: 2.4cqmin; color: var(--subtext); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 1cqmin; }
.cfg-proof-art .pa-contact { font-size: 2.6cqmin; color: #52525b; line-height: 1.6; }
.cfg-proof-art .pa-logo { font-weight: var(--weight-black); font-size: 10cqmin; letter-spacing: 0.08em; }
.cfg-proof-art .pa-tag  { font-size: 2.4cqmin; color: rgba(255,255,255,0.7); letter-spacing: 0.25em; margin-top: 2cqmin; }

.cfg-ovr-bleed { position: absolute; inset: 0; border: 1.5px dashed var(--red); pointer-events: none; border-radius: inherit; }
.cfg-ovr-trim  { position: absolute; inset: var(--ty, 5.56%) var(--tx, 3.33%); border: 1.5px solid var(--text-2); pointer-events: none; }
.cfg-ovr-safe  { position: absolute; inset: var(--sy, 11.11%) var(--sx, 6.67%); border: 1.5px dashed var(--green); pointer-events: none; }

.cfg-proof-legend-bar {
  display: flex; gap: 18px;
  font-size: var(--size-xs); color: var(--subtext); font-weight: var(--weight-semi);
}
.cfg-proof-legend-bar span { display: inline-flex; align-items: center; gap: 5px; }
.cfg-proof-legend-bar i { display: inline-block; width: 14px; height: 2px; border-radius: 1px; }

/* Proof analysis panel — 3rd grid column */
.cfg-proof-analysis-panel {
  display: none;
  background: white;
  border-left: 1px solid var(--border);
  flex-direction: column;
  overflow: hidden;
}
body.cfg-proof-active .cfg-proof-analysis-panel { display: flex; }

.cfg-pap-header {
  flex: 0 0 auto;
  background: white;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
.cfg-pap-title { font-size: var(--size-lg); font-weight: var(--weight-black); color: var(--text-2); letter-spacing: -0.01em; }
.cfg-pap-subtitle { font-size: var(--size-xs); color: var(--subtext); margin-top: 3px; }
.cfg-pap-close { background: var(--border-light); border: 0; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }

.cfg-pap-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.cfg-pap-item {
  display: flex; gap: 10px;
  font-size: var(--size-sm); line-height: 1.5;
  padding: 11px 13px; border-radius: var(--radius-md);
}
.cfg-pap-item.pf-ok    { background: var(--green-light); }
.cfg-pap-item.pf-ok    strong { color: var(--green-dark); }
.cfg-pap-item.pf-warn  { background: #fffbeb; }
.cfg-pap-item.pf-warn  strong { color: #92400e; }
.cfg-pap-item .pf-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.cfg-pap-item .pf-icon svg { width: 100%; height: 100%; display: block; }
.cfg-pap-item.pf-ok   .pf-icon { color: var(--green-dark); }
.cfg-pap-item.pf-warn .pf-icon { color: #92400e; }
.cfg-pap-item div { flex: 1; }

/* === Bottom Controls === */
.cfg-stage-controls-bottom {
  display: flex; gap: 14px; align-items: center; justify-content: center;
  padding: 14px 0;
  background: transparent;
}
/* Bottom controls align with the hero stage (which starts at the 300px
   rail edge), not the viewport. Otherwise the centered Flip/Both/3D-2D
   pills sit off-center from the product preview they control. */
.cfg-stage-controls-bottom.docked-top {
  position: fixed; left: 300px; right: 0;
  z-index: 24;
  background: transparent;
}
body.cfg-proof-active .cfg-stage-controls-bottom.docked-top {
  right: 380px;
}
/* Zoom control — minus button + range slider + plus button + % readout.
   Themed to match the other pills (rounded, light, subtle shadow). */
.cfg-zoom-control {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.92);
  border-radius: var(--radius-pill);
  padding: 4px 10px 4px 8px;
  box-shadow: var(--shadow-sm);
}
.cfg-zoom-btn {
  width: 22px; height: 22px;
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 14px; line-height: 1;
  color: var(--text-2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.cfg-zoom-btn:hover { background: var(--border-light); }
.cfg-zoom-slider {
  -webkit-appearance: none; appearance: none;
  width: 110px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.cfg-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  cursor: grab;
}
.cfg-zoom-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  cursor: grab;
}
.cfg-zoom-val {
  font-size: 10px; font-weight: var(--weight-semi);
  color: var(--subtext);
  min-width: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cfg-pill {
  background: rgba(255,255,255,0.92);
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  font-size: var(--size-xs); font-weight: var(--weight-bold);
  color: var(--text-2);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; font-family: inherit;
}
.cfg-pill:hover { background: white; box-shadow: var(--shadow-md); }
.cfg-pill.active { background: var(--text-2); color: white; }
.cfg-face-side {
  margin-left: 6px;
  padding: 2px 7px;
  background: var(--primary-light);
  color: var(--primary-dark);
  border-radius: var(--radius-sm);
  font-size: 9px; font-weight: var(--weight-black);
  letter-spacing: 0.06em;
}
.cfg-ctl-divider { width: 1px; height: 22px; border-right: 1.5px dashed var(--border); }

.cfg-view-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,0.92);
  border-radius: var(--radius-pill);
  padding: 3px;
  box-shadow: var(--shadow-sm);
}
.cfg-vt-btn {
  background: transparent; border: 0;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-family: inherit; font-size: var(--size-xs); font-weight: var(--weight-bold);
  color: var(--subtext);
  cursor: pointer;
}
.cfg-vt-btn:not(:disabled):hover { color: var(--text-2); }
.cfg-vt-btn.active { background: var(--primary); color: white; }
.cfg-vt-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* === Swap wrap === */
.cfg-swap-wrap {
  background: white;
  border-top: 1px solid var(--border);
  /* Top padding kept generous so YOUR PRICE TODAY pill + bracket banner
     don't clip. The build rail above drops its own padding-bottom so the
     artwork zone sits flush against this border. */
  padding: 20px 24px 16px;
}
.cfg-swap-wrap.docked-top {
  position: fixed; left: 0; right: 0;
  z-index: 25;
  box-shadow: 0 -2px 8px -4px rgba(0,0,0,0.08);
}
/* Collapsed state — hidden entirely. Hero stage reclaims the vertical
   space via the --cfg-dock-h CSS var which excludes the swap height. */
.cfg-swap-wrap.cfg-swap-collapsed { display: none; }
/* Close button — pinned to top-right of the swap-wrap. */
.cfg-swap-close {
  position: absolute;
  top: 6px; right: 10px;
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  font-family: inherit; font-size: 22px; line-height: 1;
  color: var(--subtext);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  z-index: 6;
}
.cfg-swap-close:hover {
  background: var(--border-light);
  color: var(--text-2);
  border-color: var(--border);
}
.cfg-swap-breadcrumb { font-size: var(--size-xs); color: var(--subtext); margin-bottom: 6px; }
.cfg-swap-carousel { min-height: 40px; }

/* === Totals === */
.cfg-totals-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 30;
  padding: 18px 30px 22px;
  display: flex; gap: 24px; align-items: center;
  background: white; border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px -8px rgba(0,0,0,0.15);
}
.cfg-total-block { flex: 1; }
.cfg-total-lbl { font-size: var(--size-xs); color: var(--subtext); letter-spacing: 0.04em; }
.cfg-total-val { font-size: 26px; font-weight: var(--weight-bold); color: var(--text-2); transition: color 0.3s; }
/* Total price flashes color when it changes. v49 uses reversed semantics
   per Rory's anchoring principle: cost-up = green (upgrade), save = red
   (downgrade warning). The customer's mental model is "more = better". */
.cfg-total-val.flash-up { color: #059669; }
.cfg-total-val.flash-dn { color: #dc2626; }
/* Inline delta chip next to the total (e.g., "+$4.00") */
.cfg-delta-inline {
  margin-left: 8px;
  font-size: var(--size-sm);
  font-weight: var(--weight-bold);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.25s, transform 0.25s;
  display: inline-block;
}
.cfg-delta-inline.show { opacity: 1; transform: translateY(0); }
.cfg-delta-inline.cost { color: #059669; }
.cfg-delta-inline.save { color: #dc2626; }

/* Pulse glow on the build card that triggered the change */
.cfg-build-card.pulse-cost {
  box-shadow: 0 0 0 2px #86efac, 0 4px 14px rgba(5,150,105,0.18);
  transition: box-shadow 0.3s;
}
.cfg-build-card.pulse-save {
  box-shadow: 0 0 0 2px #fecaca, 0 4px 14px rgba(220,38,38,0.18);
  transition: box-shadow 0.3s;
}
/* Tiny impact chip inside the pulsed build card */
.cfg-impact-chip {
  position: absolute; bottom: 6px; right: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px; font-weight: var(--weight-bold);
  opacity: 0; transform: translateY(2px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.cfg-impact-chip.show { opacity: 1; transform: translateY(0); }
.cfg-impact-chip.cost { background: #dcfce7; color: #166534; }
.cfg-impact-chip.save { background: #fee2e2; color: #991b1b; }
/* Per-unit cost inline beside the price — smaller + muted so the total
   stays the dominant element. */
.cfg-total-per {
  display: inline-block;
  margin-left: 10px;
  font-size: 12px; font-weight: var(--weight-semi);
  color: var(--subtext);
  vertical-align: middle;
}
.cfg-delta-inline { margin-left: 8px; font-size: var(--size-sm); color: var(--green-dark); }
.cfg-total-sub {
  font-size: var(--size-xs); color: var(--text-2);
  font-weight: var(--weight-med);
  line-height: 1.45; max-width: 720px;
  margin-top: 2px;
}
.cfg-break-teaser { font-size: var(--size-xs); color: var(--green-dark); margin-top: 4px; }
.cfg-break-teaser strong { color: var(--text-2); }

.cfg-ghost-cta {
  background: transparent;
  border: 0;
  color: var(--text-2);
  font-weight: var(--weight-semi);
  font-size: var(--size-sm);
  cursor: pointer;
  padding: 10px 18px;
}
.cfg-primary-cta {
  background: var(--text-2);
  color: white;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 14px 32px;
  font-size: var(--size-md); font-weight: var(--weight-bold);
  cursor: pointer;
}
.cfg-primary-cta:hover { background: var(--primary); }

body { padding-bottom: 96px; }  /* will be overridden by JS to exact totals height */

/* === Swap wrap layout — label LEFT, chips RIGHT, vertically centered === */
.cfg-swap-wrap {
  display: flex; align-items: center; gap: 18px;
}
.cfg-swap-lbl-col {
  flex: 0 0 auto;
  min-width: 76px;
  padding-right: 14px;
  border-right: 1px dashed var(--border);
}
.cfg-swap-lbl {
  display: block;
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
}
/* Style swap's "Learn more →" link sits under the swap label. Opens
   the combined styles encyclopedia (all entries in one slideout). */
.cfg-swap-learn-link {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: var(--weight-semi);
  color: var(--primary);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.cfg-swap-learn-link:hover { text-decoration: underline; }
/* Styles-index slideout entry — visual separation between style sections */
.cfg-styles-index-entry { padding: 14px 0; border-top: 1px solid var(--border-light); }
.cfg-styles-index-entry:first-of-type { border-top: 0; padding-top: 0; }
.cfg-styles-index-title { font-size: 15px !important; text-transform: none !important; letter-spacing: -0.005em !important; color: var(--text-2) !important; font-weight: var(--weight-semi) !important; margin: 0 0 6px !important; }
.cfg-styles-paper-pill {
  display: inline-block;
  background: var(--primary-light, #ede9fe);
  color: var(--primary, #7c3aed);
  font-size: 10px;
  font-weight: var(--weight-semi);
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}

/* Style chip hover tooltip — short description + paper-weight conversion.
   Positioned above the chip with a small arrow. Pointer-events: none so
   it doesn't interfere with click-throughs on the chip itself. */
.cfg-chip-tip {
  position: absolute;
  bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: 220px;
  background: var(--text-2);
  color: #fff;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.4;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 50;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}
.cfg-chip-tip::after {
  content: ''; position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--text-2);
}
.cfg-chip-tip-desc {
  display: block;
  font-weight: var(--weight-semi);
  margin-bottom: 4px;
}
.cfg-chip-tip-spec {
  display: block;
  font-size: 10px;
  font-weight: var(--weight-med);
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.01em;
}
.cfg-swap-item.cfg-swap-style:hover .cfg-chip-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* === Swap items — unified chip style ===
   All chip variants (swap-item, tier-chip, qty) share the same baseline:
   shadow-md in normal state, lift + shadow-card-hover on hover, strong
   primary highlight when selected. Title font-weight intentionally
   moderate (semi/600) — chips shouldn't shout. */
.cfg-swap-carousel {
  /* Single horizontal-scroll row — NOT wrap. With many options (e.g. 21
     business-card styles or 21 booklet quantities) flex-wrap:wrap blew the
     carousel into a tall multi-row grid, which ballooned the fixed bottom
     dock and made it overlap the page content below. Scroll sideways. */
  display: flex; flex-wrap: nowrap; gap: 10px; align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.cfg-swap-item {
  position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-family: inherit;
  font-size: var(--size-sm);
  font-weight: var(--weight-semi);
  color: var(--text-2);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
  flex-direction: column; text-align: center;
}
.cfg-swap-item strong {
  font-weight: var(--weight-semi);
  color: var(--text-2);
}
.cfg-swap-item:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
/* Selected state — primary border + light bg tint + halo (no extra
   transform on selected to keep the active card stable while you pick) */
.cfg-swap-item.selected {
  border-color: var(--primary);
  border-width: 2px;
  background: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(124,58,237,0.18), 0 6px 16px -4px rgba(124,58,237,0.25);
}
.cfg-swap-item.selected strong { color: var(--primary-dark); font-weight: var(--weight-bold); }
/* (sub-option rules moved below the .with-thumb base so they win the
   cascade on the shared properties — see end of swap-item block.) */
.cfg-swap-item small {
  font-size: 10px; color: var(--subtext);
  font-weight: var(--weight-med);
}
.cfg-swap-placeholder { color: var(--subtext); font-size: var(--size-xs); }
/* Orientation sub-control — labeled wrap so it doesn't get stretched
   to the height of neighboring chips by the carousel's align-items:stretch */
.cfg-swap-orient-wrap {
  align-self: center;
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  margin-left: 10px;
}
.cfg-swap-orient-label {
  font-size: 9px; font-weight: var(--weight-bold);
  color: var(--subtext);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cfg-swap-orient {
  display: inline-flex; gap: 2px;
  background: white;
  border: 1px solid var(--border);
  padding: 2px;
  border-radius: var(--radius-pill);
}
.cfg-swap-orient button {
  background: transparent; border: 0;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: inherit; font-size: 10px; font-weight: var(--weight-semi);
  color: var(--subtext); cursor: pointer;
  line-height: 1.2;
}
.cfg-swap-orient button.sel { background: var(--text-2); color: white; }

/* Orientation toggle injected into the SIZE swap label column. Stacks
   the two pills vertically under the "SIZE" label. Reuses the same
   button styling as the inline orient row. */
.cfg-orient-toggle {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 10px;
  width: 100%;
}
.cfg-orient-toggle button {
  background: #fff;
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 10px; font-weight: var(--weight-semi);
  color: var(--subtext);
  cursor: pointer;
  line-height: 1.2;
  transition: all 0.15s;
}
.cfg-orient-toggle button:hover { border-color: var(--primary); color: var(--primary); }
.cfg-orient-toggle button.sel {
  background: var(--text-2); border-color: var(--text-2); color: #fff;
}

/* Sub-option group — Rounded's three radii slide out together as a
   single grouped reveal (no per-child stagger), with a left+right
   dashed divider hugging them. Bottom padding gives drop-shadows
   (including hover lift) room to render without clipping. */
.cfg-swap-sub-group {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 12px;
  align-self: center;
  animation: cfg-sub-slide-group 0.32s cubic-bezier(0.2,0.8,0.2,1) both;
  transform-origin: left center;
}
.cfg-swap-sub-group::before,
.cfg-swap-sub-group::after {
  content: '';
  position: absolute;
  top: 18px; bottom: 22px;
  border-left: 1.5px dashed var(--primary);
  opacity: 0.45;
}
.cfg-swap-sub-group::before { left: 0; }
.cfg-swap-sub-group::after  { right: 0; }
@keyframes cfg-sub-slide-group {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* === Drop overlay === */
.cfg-drop-overlay {
  position: absolute; inset: 0;
  background: var(--primary-light);
  border: 2px dashed var(--primary);
  border-radius: var(--radius-lg);
  display: none;
  align-items: center; justify-content: center;
  font-size: var(--size-md); font-weight: var(--weight-bold);
  color: var(--primary-dark);
  z-index: 12;
  pointer-events: none;
}
.cfg-drop-overlay.show { display: flex; }
.cfg-drop-overlay::after { content: '\01F4E5  Drop your artwork here'; }

/* === Hero card — name + role grouped at top, contact at bottom (v49 parity) === */
.cfg-bc-name-block { display: block; }

/* Front-face finish overlays — visible on hero card preview when a finish-
   bearing style is selected. Gloss = diagonal white gleam (light reflection),
   Soft-touch = subtle dark gradient (suede-like depth). Matte/silk/spot_uv
   inherit the base white linear-gradient — no overlay. Ported from v49. */
.cfg-face.gloss::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0.55) 0%, transparent 25%, transparent 75%, rgba(255,255,255,0.45) 100%);
  border-radius: inherit;
  transition: opacity 0.4s;
}
.cfg-face.soft_touch::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), transparent);
  border-radius: inherit;
}

/* Back-face blank — sides=4_0 (front only) means the back is unprinted
   so it shows as light beige instead of the dark branded back. */
.cfg-face.back.blank {
  background: #f4f1ea;
  color: #a1a1aa;
}
.cfg-face.back.blank .cfg-bc-logo,
.cfg-face.back.blank .cfg-bc-tag { opacity: 0.3; }

/* === Build card thumbs — visual mini-icons (ported from v49) === */
.cfg-bc-thumb {
  margin: 8px 0;
  height: 42px;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 5px;
  background: transparent;
  border-radius: 0;
}

/* STYLE — icon tile */
.cfg-style-thumb-mini {
  width: 48px; height: 34px;
  border: 1px solid var(--border); border-radius: 6px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}

/* SIZE — mini card-shape */
.cfg-sz-card {
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  border-radius: 2px;
}
.cfg-sz-card.std  { width: 48px; height: 28px; }
.cfg-sz-card.sq   { width: 34px; height: 34px; }
.cfg-sz-card.slim { width: 50px; height: 16px; }

/* COLOR & SIDES — two mini rectangles, color-coded */
.cfg-sides-thumb { display: flex; gap: 5px; }
.cfg-sides-thumb .cfg-mini {
  width: 36px; height: 22px;
  background: #fff;
  border-radius: 2.5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.cfg-sides-thumb .cfg-mini.bw {
  background: linear-gradient(180deg, #fff 50%, var(--text-2) 50%);
}
.cfg-sides-thumb .cfg-mini.empty {
  background: #f4f1ea;
  box-shadow: none;
  border: 1px dashed #c4c4c8;
}

/* CORNERS — mini card (rounded by radius class) */
.cfg-mini-card {
  width: 36px; height: 22px;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
/* Radii proportional to actual 1/8″ : 1/4″ : 3/8″ ratio (1:2:3).
   At a true scale (36px ≈ 3.5″) the strict value for 1/8″ would be ~1.3px
   which is nearly invisible — these are scaled up ~2× so the difference
   reads clearly while preserving the 1:2:3 ratio. */
.cfg-mini-card.round-s { border-radius: 2px; }
.cfg-mini-card.round-m { border-radius: 4px; }
.cfg-mini-card.round-l { border-radius: 6px; }

/* QUANTITY — number-in-box */
.cfg-qty-num-box {
  width: 54px; height: 34px;
  border: 2px solid var(--text-2); border-radius: 4px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 13px; font-weight: var(--weight-black);
  color: var(--text-2); letter-spacing: -0.02em;
}

/* Generic option-group thumb (Stage 1c) — simple lettered tile for
   product-specific groups (Stock/Cover/Binding/Pages/…) that have no
   bespoke business-card thumb. */
.cfg-og-thumb {
  width: 34px; height: 34px;
  border-radius: 7px;
  background: var(--border-light);
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 14px; font-weight: var(--weight-bold, 700);
  color: var(--subtext, #6b7280);
}
/* Size shape thumb — a mini rectangle drawn at the option's true aspect ratio
   (aspect-ratio set inline by renderOgSwap). Reads the size row as shapes. */
.cfg-og-sz {
  display: block;
  height: 30px; max-width: 56px; min-width: 12px;
  background: #fff;
  border: 1.5px solid var(--text-2, #374151);
  border-radius: 3px;
}
.cfg-swap-item.selected .cfg-og-sz { border-color: var(--primary, #7c3aed); }

/* === Cart drawer (Stage 2a) === */
.cfg-nm-icon-btn { position: relative; }
.cart-count {
  display: none; align-items: center; justify-content: center;
  position: absolute; top: -4px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--primary, #7c3aed); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 999px;
}
.cfg-cart-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.35); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 60; }
.cfg-cart-backdrop.open { opacity: 1; pointer-events: auto; }
.cfg-cart-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: 380px; max-width: 92vw;
  background: #fff; box-shadow: -8px 0 32px -12px rgba(0,0,0,.25);
  transform: translateX(100%); transition: transform .25s cubic-bezier(.2,.8,.2,1);
  z-index: 61; display: flex; flex-direction: column;
}
.cfg-cart-drawer.open { transform: translateX(0); }
.cfg-cart-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border, #e5e7eb); font-size: 1.05rem; }
.cfg-cart-close { background: none; border: 0; font-size: 24px; line-height: 1; cursor: pointer; color: var(--subtext, #6b7280); }
.cfg-cart-items { flex: 1; overflow-y: auto; padding: 8px 0; }
.cfg-cart-empty { padding: 40px 20px; text-align: center; color: var(--subtext, #6b7280); }
.cfg-cart-item { display: flex; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border-light, #f1f1f4); }
.cfg-cart-item-main { flex: 1; min-width: 0; }
.cfg-cart-item-name { font-weight: 600; font-size: 0.9rem; color: var(--text, #1a1625); }
.cfg-cart-item-spec { font-size: 0.78rem; color: var(--subtext, #6b7280); margin-top: 3px; }
.cfg-cart-item-art { font-size: 0.72rem; margin-top: 5px; font-weight: 600; }
.cfg-cart-item-art.ok  { color: var(--success, #059669); }
.cfg-cart-item-art.due { color: #b45309; }
/* Artwork attached badge on the hero face (non-image files: PDF/AI/etc). */
.cfg-art-badge { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; color: var(--text, #1a1625); }
.cfg-art-badge span { font-weight: 700; font-size: 1.05rem; color: var(--success, #059669); }
.cfg-art-badge small { font-size: 0.8rem; color: var(--subtext, #6b7280); max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-cart-item-side { text-align: right; flex: 0 0 auto; }
.cfg-cart-item-price { font-weight: 700; font-size: 0.9rem; }
.cfg-cart-item-rm { background: none; border: 0; color: var(--subtext, #6b7280); font-size: 0.72rem; text-decoration: underline; cursor: pointer; margin-top: 6px; padding: 0; }
.cfg-cart-foot { border-top: 1px solid var(--border, #e5e7eb); padding: 18px 20px; }
.cfg-cart-subtotal { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 12px; }
.cfg-cart-checkout { width: 100%; padding: 13px; background: var(--text, #1a1625); color: #fff; border: 0; border-radius: 10px; font-weight: 700; font-size: 0.95rem; cursor: pointer; font-family: inherit; }
.cfg-cart-checkout:disabled { opacity: .4; cursor: not-allowed; }
.cfg-cart-note { text-align: center; font-size: 0.72rem; color: var(--subtext, #6b7280); margin-top: 8px; }

/* IN HAND BY — calendar with date number + tier-colored top stripe */
.cfg-cal-thumb {
  width: 42px; height: 42px;
  border: 1.5px solid var(--text-2); border-radius: 5px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 16px; font-weight: var(--weight-black);
  color: var(--text-2);
  position: relative;
  padding-top: 6px;
}
.cfg-cal-thumb::before {
  content: ''; position: absolute; top: -3px; left: 0; right: 0;
  height: 7px; background: var(--text-2); border-radius: 3px 3px 0 0;
  transition: background 0.3s;
}
.cfg-cal-thumb.tier-sameday::before  { background: #7c3aed; }
.cfg-cal-thumb.tier-nextday::before  { background: #dc2626; }
.cfg-cal-thumb.tier-urgent::before   { background: #ea580c; }
.cfg-cal-thumb.tier-rush::before     { background: #ca8a04; }
.cfg-cal-thumb.tier-standard::before { background: #2563eb; }
.cfg-cal-thumb.tier-early::before    { background: #059669; }

/* Style picker (swap-carousel) "Learn more" link for info-only entries */
.cfg-swap-item.info-only { cursor: default; }
.cfg-swap-item .cfg-swap-from {
  display: inline-block; margin-top: 4px;
  font-size: var(--size-xs); font-weight: var(--weight-bold);
  color: var(--green-dark);
}
.cfg-swap-item .cfg-swap-learn-more {
  display: inline-block; margin-top: 4px;
  font-size: var(--size-xs); font-weight: var(--weight-semi);
  color: var(--primary); cursor: pointer;
  background: transparent; border: 0; padding: 0;
  font-family: inherit;
}
/* Parent (non-sub) chips share min-height + min-width across STYLE /
   SIZE / COLOR & SIDES / CORNERS / QUANTITY. Sub-options override
   below. Sized down from earlier values so the dock doesn't dominate
   the viewport at 1080p. */
.cfg-swap-item.with-thumb { padding-top: 10px; min-width: 122px; min-height: 110px; justify-content: flex-start; }
.cfg-swap-item.cfg-swap-qty { min-height: 110px; min-width: 122px; justify-content: center; }
.cfg-swap-item .cfg-swap-thumb { height: 32px; }
/* Style chip — no icon, more compact since we're just showing label + sub + price */
.cfg-swap-item.cfg-swap-style { min-height: 96px; padding-top: 14px; }

/* Even more compact on viewports ≤ 1200px tall — covers all common
   laptops and 1080p desktops (which give ~960px inner viewport after
   browser chrome). */
@media (max-height: 1200px) {
  .cfg-swap-item.with-thumb,
  .cfg-swap-item.cfg-swap-qty {
    min-height: 84px; min-width: 112px;
    padding-top: 8px;
  }
  .cfg-swap-item.cfg-swap-style { min-height: 76px; padding-top: 10px; }
  .cfg-swap-item .cfg-swap-thumb { height: 24px; margin-bottom: 3px; }
  .cfg-swap-item strong { font-size: 12px; }
  .cfg-swap-item small  { font-size: 10px; }
  .cfg-swap-qty .cfg-swap-qty-big { font-size: 15px; }
  .cfg-swap-qty .cfg-swap-qty-per { font-size: 9px; }
  .cfg-swap-mod { font-size: 9px; padding: 1px 6px; margin-top: 3px; }
  .cfg-swap-wrap { padding-top: 12px; padding-bottom: 10px; }
}
.cfg-swap-item .cfg-swap-thumb {
  width: 100%; height: 42px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}

/* Sub-option overrides — placed AFTER .with-thumb so they win the
   cascade on shared properties (min-width, padding, thumb height).
   Visibly smaller than parent options so they read as a sub-row. */
.cfg-swap-item.sub,
.cfg-swap-item.sub.with-thumb {
  font-size: var(--size-xs);
  padding: 6px 10px 8px;
  min-width: 64px;
  min-height: 78px;
  align-self: center;
  border-radius: 9px;
}
.cfg-swap-item.sub .cfg-swap-thumb { height: 18px; margin-bottom: 2px; }
.cfg-swap-item.sub .cfg-mini-card  { width: 20px; height: 13px; }
.cfg-swap-item.sub strong { font-size: var(--size-xs); font-weight: var(--weight-semi); }
.cfg-swap-item.sub small  { font-size: 9px; margin-top: 0; }

/* Price-modifier chip (sides/corners). Default = green/light "incl.",
   `up` = orange/red premium, `down` = green discount badge. Mirrors v49
   line 1742-1758. */
.cfg-swap-mod {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px; font-weight: var(--weight-bold);
  background: var(--green-light); color: var(--green-dark);
  border: 1px solid #a7f3d0;
}
.cfg-swap-mod.up   { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.cfg-swap-mod.down { background: var(--green-light); color: var(--green-dark); border-color: #6ee7b7; }

/* Quantity chips have NO thumb — pure text layout per v49 line 3236-3242.
   Big number on top, "X cards" sub, "$Y/ea" footer. */
.cfg-swap-item.cfg-swap-qty {
  padding: 10px 16px;
  min-width: 132px;
  text-align: center;
}
.cfg-swap-qty .cfg-swap-qty-big {
  display: block;
  font-size: 18px; font-weight: var(--weight-bold);
  color: var(--text-2);
  line-height: 1.1;
}
.cfg-swap-qty small {
  font-size: 9px; color: var(--subtext); font-weight: var(--weight-med);
  letter-spacing: 0.04em;
  margin-top: 2px;
  text-transform: lowercase;
}
.cfg-swap-qty .cfg-swap-qty-per {
  display: block;
  margin-top: 4px;
  font-size: 10px; font-weight: var(--weight-semi);
  color: var(--green-dark);
}

/* Style picker POPULAR badge — purple gradient pill that sits ABOVE the
   chip (top: -8px) so it doesn't overlap the chip's title text. */
.cfg-swap-item .cfg-swap-popular {
  position: absolute;
  top: -8px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  color: #fff;
  font-size: 8px; font-weight: var(--weight-semi);
  padding: 3px 8px; border-radius: var(--radius-pill);
  letter-spacing: 0.08em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(124,58,237,0.25);
  z-index: 2;
}

/* === Slideout encyclopedia — right-anchored side panel for "Learn more" === */
.cfg-slideout-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.cfg-slideout-backdrop.show {
  opacity: 1; pointer-events: auto;
}
.cfg-slideout {
  position: fixed; top: 0; right: -440px; bottom: 0;
  width: 420px;
  background: #fff;
  z-index: 9999;
  box-shadow: var(--shadow-modal);
  transition: right 0.45s cubic-bezier(0.2,0.8,0.2,1);
  overflow-y: auto;
}
.cfg-slideout.open { right: 0; }
.cfg-slideout-close {
  position: sticky; top: 0; right: 0; float: right;
  background: var(--border-light); border: 0;
  width: 34px; height: 34px; border-radius: 50%;
  margin: 14px; cursor: pointer; font-size: 18px;
  font-family: inherit;
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
}
.cfg-slideout-close:hover { background: var(--border); }
.cfg-slideout-body { padding: 14px 28px 28px; clear: both; }
.cfg-slideout-body h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px; font-weight: var(--weight-black);
  margin: 0 0 10px; letter-spacing: -0.01em;
  color: var(--text-2);
}
.cfg-slideout-body h3 {
  font-size: var(--size-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--subtext); font-weight: var(--weight-bold);
  margin: 18px 0 8px;
}
.cfg-slideout-body p {
  font-size: var(--size-md); line-height: 1.65; color: var(--text);
  margin: 0 0 12px;
}
.cfg-slideout-body .spec-row {
  display: flex; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border-light);
  font-size: var(--size-sm);
}
.cfg-slideout-body .spec-row .sr-label { color: var(--subtext); }
.cfg-slideout-body .spec-row .sr-value {
  font-weight: var(--weight-semi); color: var(--text-2);
}

/* === Tier breakdown — v49 "Need it in-hand by" panel === */
.cfg-tier-breakdown {
  width: 100%;
}
.cfg-tier-breakdown-head strong {
  font-size: 18px; font-weight: var(--weight-bold);
  color: var(--text-2);
  letter-spacing: -0.01em;
}

/* Wraps the date display + the calendar dropdown anchored under it */
.cfg-date-display-wrap { position: relative; display: block; margin: 8px 0; }

/* Calendar dropdown — lives as a grid cell between the left meta panel
   and the right pricing chart. When open, the parent grid adds a middle
   column (via :has() — see .cfg-in-hand-by-grid below) which pushes the
   pricing chart right, so the calendar reads as part of the swap layout
   instead of overlapping it. */
.cfg-cal-dropdown {
  position: relative;
  z-index: 5;
  box-shadow: 0 6px 24px rgba(0,0,0,0.14);
  border-radius: 11px;
  background: #fff;
  align-self: center;
  transform-origin: left center;
  animation: cfg-cal-slide-right 0.28s cubic-bezier(0.2,0.8,0.2,1) both;
}
.cfg-cal-dropdown[hidden] { display: none; }
@keyframes cfg-cal-slide-right {
  from { opacity: 0; transform: translateX(-22px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0)     scale(1); }
}

/* "Need it faster?" panel — same grid-cell slideout pattern as the
   calendar. Mutually exclusive with the calendar via JS. */
.cfg-need-faster {
  position: relative;
  z-index: 5;
  width: 320px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 18px 20px 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.14);
  align-self: center;
  animation: cfg-cal-slide-right 0.28s cubic-bezier(0.2,0.8,0.2,1) both;
}
.cfg-need-faster[hidden] { display: none; }
.cfg-nf-head {
  font-size: 11px; font-weight: var(--weight-black);
  letter-spacing: 0.1em; color: var(--text-2);
  margin-bottom: 8px;
}
.cfg-nf-body {
  font-size: 12.5px; line-height: 1.5; color: var(--text);
  margin: 0 0 14px;
}
.cfg-nf-actions { display: flex; flex-direction: column; gap: 6px; }
.cfg-nf-btn {
  display: block;
  text-align: center;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  font-family: inherit;
  font-size: 12px; font-weight: var(--weight-semi);
  color: var(--text-2);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.cfg-nf-btn:hover { border-color: var(--primary); color: var(--primary); }
.cfg-nf-btn-primary {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.cfg-nf-btn-primary:hover { background: var(--primary-dark, #6d28d9); color: #fff; }
.cfg-nf-close {
  position: absolute; top: 8px; right: 8px;
  background: transparent; border: 0; cursor: pointer;
  width: 26px; height: 26px;
  font-size: 18px; line-height: 1;
  color: var(--subtext);
  border-radius: 50%;
}
.cfg-nf-close:hover { background: var(--border-light); color: var(--text-2); }

/* Date display — v49 line 716-728 */
.cfg-date-display {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #d4d4d8;
  border-radius: 10px;
  min-width: 200px;
  font-family: inherit; font-size: 13px; font-weight: var(--weight-semi);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.cfg-date-display:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.cfg-date-display .dd-icon { font-size: 14px; }
.cfg-date-display .dd-text { flex: 1; text-align: left; }
.cfg-date-display .dd-arrow { font-size: 10px; color: var(--subtext); }

.cfg-tier-breakdown-sub {
  font-size: 11px; color: var(--subtext); font-style: italic;
  margin-bottom: 4px;
}

/* IN HAND BY left panel — two stacked blocks separated by a thin
   divider. Block 1 = WHEN (date display + time pills, tightly grouped).
   Block 2 = HOW (delivery method). Generous vertical spacing so nothing
   feels crammed. */
.cfg-ihb-block {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
.cfg-ihb-block:last-of-type {
  border-bottom: 0;
  margin-bottom: 8px;
  padding-bottom: 0;
}
.cfg-ihb-block-lbl {
  font-size: 10px; font-weight: var(--weight-black);
  letter-spacing: 0.12em; color: var(--subtext);
  text-transform: uppercase;
}

.cfg-ihb-chip-group { display: flex; gap: 6px; flex-wrap: wrap; }
.cfg-ihb-chip {
  border: 1px solid var(--border);
  background: #fff;
  padding: 7px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 11px; font-weight: var(--weight-semi);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  min-width: 0;
  white-space: nowrap;
}
.cfg-ihb-chip:hover { border-color: var(--primary); color: var(--primary); }
.cfg-ihb-chip.selected {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 2px 6px rgba(124,58,237,0.18);
}
/* Time row — 3 chips, evenly fill row */
.cfg-ihb-chip-group.cfg-ihb-time .cfg-ihb-chip { flex: 1 1 0; text-align: center; }
/* Method row — chips wrap; balanced sizing. With 3-4 methods in a
   240px column, 2-per-row reads cleanest. */
.cfg-ihb-chip-group.cfg-ihb-method .cfg-ihb-chip {
  flex: 1 1 calc(50% - 6px);   /* 2 per row */
  text-align: center;
}
/* Two-line chip — main label on top, smaller sub label below. Used
   for delivery method chips so the user sees the buffer-day cost at
   a glance (e.g., "Ground ship / +2–3 days"). */
.cfg-ihb-chip-2line {
  padding: 6px 10px 7px;
  line-height: 1.15;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.cfg-ihb-chip-2line .cfg-ihb-chip-main { font-size: 11px; font-weight: var(--weight-semi); }
.cfg-ihb-chip-2line .cfg-ihb-chip-sub  {
  font-size: 9px; font-weight: var(--weight-med);
  color: var(--subtext); letter-spacing: 0.02em;
}
.cfg-ihb-chip-2line.selected .cfg-ihb-chip-sub { color: rgba(255,255,255,0.85); }

/* IN HAND BY 2-column layout — LEFT: heading + date picker stack
   (vertically centered against the chart); RIGHT: pricing chart.
   Vertical dashed divider separates them. */
.cfg-swap-wrap.cfg-in-hand-by-active .cfg-swap-lbl-col { display: none; }
.cfg-in-hand-by-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: center;
  width: 100%;
  transition: grid-template-columns 0.28s cubic-bezier(0.2,0.8,0.2,1);
}
/* When the calendar dropdown is open, expand to a 3-column layout so the
   calendar slots between the left meta panel and the right pricing chart.
   The pricing chart shifts right via the natural grid flow. Requires CSS
   :has() (Safari 15.4+, Chrome 105+, Firefox 121+). */
.cfg-in-hand-by-grid:has(.cfg-cal-dropdown:not([hidden])),
.cfg-in-hand-by-grid:has(.cfg-need-faster:not([hidden])) {
  grid-template-columns: 240px auto 1fr;
}
.cfg-in-hand-by-left {
  align-self: center;
  padding-right: 24px;
  border-right: 1px dashed var(--border);  /* Fix 2: dashed divider before first card */
}
.cfg-in-hand-by-right { min-width: 0; overflow: visible; }

/* === 3-row CSS grid (v49 line 564-570) ===
   Bracket, tier cards, and lock-timer share the same column template
   so they align by column. Cards use fixed-ish width (`minmax(120px,
   150px)`) so they don't stretch to fill the screen. */
.cfg-pricing-chart-wrap {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 18px;  /* room for YOUR PRICE TODAY pill */
}
/* All three rows use SAME fixed 140px columns so cards are
   identical width regardless of viewport. Gap bumped to 16px so the
   vertical dashed dividers around the active card have breathing
   room without needing margins (margins were shrinking the active +
   first-later cards below 140px). */
.cfg-bracket-row,
.cfg-pricing-chart,
.cfg-timer-row {
  display: grid;
  grid-template-columns: repeat(var(--cfg-tier-count, 6), 140px);
  gap: 22px;
  justify-content: start;
}
.cfg-bracket-row-empty { height: 24px; }

/* Horizontal bracket spanning later-tier columns (v49 line 572-591).
   Dashed arms with downward "pin" ticks at each end. */
.cfg-bracket {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: var(--weight-bold);
  color: var(--subtext);
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 0;
}
.cfg-bracket-arm {
  flex: 1; height: 1px; background: #d4d4d8;
  position: relative;
}
/* End pins point DOWN toward the cards being bracketed.
   The right-of-active divider lives at column_M_left - 9px (since
   first-later::before is at left:-9px within the 16px gap before
   first-later). Bracket grid-column starts at column M, so the
   left pin uses `left: -9px` to land on that divider. */
/* Left pin is drawn as an L-shape via border-left + border-top so the
   horizontal arm extension and the descending vertical pin form one
   continuous stroke that lands exactly on the dashed divider between
   the active card and the first-later card (-11px in a 22px gap). */
.cfg-bracket-arm:first-child::before {
  content: ''; position: absolute; left: -11px; top: 0;
  width: 11px; height: 12px;
  border-left: 1px solid #d4d4d8;
  border-top: 1px solid #d4d4d8;
}
/* Right pin is a simple 1px-wide descender flush with the bracket's
   right edge (no dashed divider on this side to align to). */
.cfg-bracket-arm:last-child::after {
  content: ''; position: absolute; right: 0; top: 0;
  width: 1px; height: 12px; background: #d4d4d8;
}
.cfg-bracket-text { white-space: nowrap; }

/* === Tier card (v49 line 739-790) ===
   Every card stays the same size — selection uses only box-shadow.
   All body text center-aligned (user preference). */
.cfg-tier-card {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  display: flex; flex-direction: column;
  font-family: inherit; text-align: center;
  transition: all 0.18s;
  padding: 0;
}
.cfg-tier-card:hover:not(.expired):not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.cfg-tier-card.current { transform: translateY(-3px); }
.cfg-tier-card.current.tier-early    { box-shadow: 0 0 0 2px #059669, 0 8px 22px rgba(5,150,105,0.30); }
.cfg-tier-card.current.tier-standard { box-shadow: 0 0 0 2px #2563eb, 0 8px 22px rgba(37,99,235,0.30); }
.cfg-tier-card.current.tier-3days    { box-shadow: 0 0 0 2px #eab308, 0 8px 22px rgba(234,179,8,0.30); }
.cfg-tier-card.current.tier-2days    { box-shadow: 0 0 0 2px #ea580c, 0 8px 22px rgba(234,88,12,0.30); }
.cfg-tier-card.current.tier-nextday  { box-shadow: 0 0 0 2px #dc2626, 0 8px 22px rgba(220,38,38,0.30); }
.cfg-tier-card.current.tier-sameday  { box-shadow: 0 0 0 2px #7c3aed, 0 8px 22px rgba(124,58,237,0.30); }

.cfg-tier-card.expired { opacity: 0.45; cursor: not-allowed; }
.cfg-tier-card.expired .cfg-tc-header { opacity: 0.7; }
.cfg-tier-card.later .cfg-tc-header { opacity: 0.85; }

/* YOUR PRICE TODAY pill — sits higher above the active card so it
   doesn't crowd the colored header. */
.cfg-tc-tag-above {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  color: white;
  font-size: 9.5px; font-weight: var(--weight-black);
  letter-spacing: 0.06em;
  padding: 4px 11px; border-radius: var(--radius-pill);
  white-space: nowrap;
  z-index: 3;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}
.cfg-tc-tag-above.tier-early-tag    { background: #059669; }
.cfg-tc-tag-above.tier-standard-tag { background: #2563eb; }
.cfg-tc-tag-above.tier-3days-tag    { background: #ca8a04; }
.cfg-tc-tag-above.tier-2days-tag    { background: #ea580c; }
.cfg-tc-tag-above.tier-nextday-tag  { background: #dc2626; }
.cfg-tc-tag-above.tier-sameday-tag  { background: #7c3aed; }

/* Colored header — tier name + days inside. Some tier names are long
   ("We'll Get It Done") so we let the label wrap. */
.cfg-tc-header {
  border-radius: 8.5px 8.5px 0 0;
  padding: 6px 8px;
  font-size: 10px; font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  min-height: 32px;
  display: flex; flex-direction: column; justify-content: center;
  line-height: 1.15;
}
.cfg-tc-header small {
  display: block;
  font-size: 8px; font-weight: var(--weight-semi);
  opacity: 0.75; letter-spacing: 0.04em;
  margin-top: 1px;
}
.cfg-tier-card.tier-early    .cfg-tc-header { background: #059669; }
.cfg-tier-card.tier-standard .cfg-tc-header { background: #2563eb; }
.cfg-tier-card.tier-3days    .cfg-tc-header { background: #eab308; color: #3f2a04; }
.cfg-tier-card.tier-2days    .cfg-tc-header { background: #ea580c; }
.cfg-tier-card.tier-nextday  .cfg-tc-header { background: #dc2626; }
.cfg-tier-card.tier-sameday  .cfg-tc-header { background: #7c3aed; }

/* Body — band layout (ORDER BY band / date stack / price band).
   Full-bleed bands span card edge-to-edge; date stack stays white. */
.cfg-tc-body {
  padding: 0;
  text-align: center;
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: stretch;
}
.cfg-tc-band {
  padding: 5px 8px 6px;
  text-align: center;
}
.cfg-tc-date-block {
  padding: 10px 8px 12px;
  background: #fff;
  display: flex; flex-direction: column; align-items: center;
  flex: 1 1 auto;
}
.cfg-tc-order-by {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: var(--weight-semi);
}
/* New date stack: small month / big day-number / day-of-week */
.cfg-tc-month {
  font-size: 11px; font-weight: var(--weight-bold);
  color: var(--subtext);
  letter-spacing: 0.06em;
  line-height: 1;
}
.cfg-tc-daynum {
  font-family: 'Montserrat', sans-serif;
  font-size: 36px; font-weight: var(--weight-bold);
  color: var(--text-2);
  line-height: 1; margin: 2px 0 0;
  letter-spacing: -0.02em;
}
.cfg-tc-dow {
  font-size: 11px; font-weight: var(--weight-semi);
  color: var(--subtext);
  margin-top: 2px;
}
.cfg-tc-expired {
  font-size: 16px; font-weight: var(--weight-bold);
  color: var(--muted);
  letter-spacing: 0.1em;
  margin: 24px 0 8px;
}
.cfg-tc-price {
  font-family: inherit;
  font-size: 19px; font-weight: var(--weight-bold);
  color: var(--text-2);
  line-height: 1;
  letter-spacing: -0.01em;
}
.cfg-tc-band-price .cfg-tc-price { margin-top: 0; }
.cfg-tc-ppe {
  font-size: 10px; color: var(--subtext);
  font-weight: var(--weight-med); margin-top: 3px;
}
.cfg-tc-loss {
  font-size: 10px; font-weight: var(--weight-semi);
  color: #92400e;
  margin-top: 4px;
  font-style: italic;
}
.cfg-tc-loss.savings {
  color: #166534; font-weight: var(--weight-bold);
  font-style: normal;
}

/* Tier-tinted bands — soft tint matching tier color */
.cfg-tier-card.tier-early    .cfg-tc-band { background: #ecfdf5; color: #14532d; }
.cfg-tier-card.tier-standard .cfg-tc-band { background: #eff6ff; color: #1e3a8a; }
.cfg-tier-card.tier-3days    .cfg-tc-band { background: #fefce8; color: #713f12; }
.cfg-tier-card.tier-2days    .cfg-tc-band { background: #fff7ed; color: #7c2d12; }
.cfg-tier-card.tier-nextday  .cfg-tc-band { background: #fef2f2; color: #7f1d1d; }
.cfg-tier-card.tier-sameday  .cfg-tc-band { background: #f5f3ff; color: #5b21b6; }
/* Price text always reads dark for legibility (overrides tier-tinted color) */
.cfg-tc-band-price .cfg-tc-price { color: var(--text-2); }
.cfg-tc-band-orderby { border-bottom: 1px solid rgba(0,0,0,0.04); }
.cfg-tc-band-price   { border-top: 1px solid rgba(0,0,0,0.04); }

/* EXPIRED state — v49 line 616-617, 632. */
.cfg-expired-text  { color: var(--muted); font-weight: var(--weight-bold); letter-spacing: 0.06em; }
.cfg-expired-price { color: var(--muted); text-decoration: line-through; }
.cfg-tier-card.expired .cfg-tc-cutoff { background: transparent; color: var(--muted); }

/* Cut-off footer — single-line, no wrap. Bold so it's not missed. */
.cfg-tc-cutoff {
  border-radius: 0 0 8.5px 8.5px;
  padding: 6px 8px;
  background: #fafaf8;
  border-top: 1px solid var(--border);
  font-size: 10px; color: var(--text-2);
  font-weight: var(--weight-semi);
  text-align: center; letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cfg-tc-cutoff b { font-weight: var(--weight-black); color: var(--text-2); }
.cfg-tc-cutoff-empty { visibility: hidden; }
/* All body lines stay single-line so card widths don't drift. */
.cfg-tc-order-by,
.cfg-tc-month,
.cfg-tc-daynum,
.cfg-tc-dow,
.cfg-tc-price,
.cfg-tc-ppe,
.cfg-tc-loss,
.cfg-tc-expired { white-space: nowrap; }

/* Vertical dashed dividers on BOTH SIDES of the active card.
   NO margin on the cards (that was shrinking them). Divider lives
   in the 16px gap via ::before at left: -9px (centered in the gap). */
.cfg-tier-card.current,
.cfg-tier-card.first-later {
  position: relative;
}
.cfg-tier-card.current::before,
.cfg-tier-card.first-later::before {
  content: ''; position: absolute;
  left: -11px; top: 8px; bottom: 8px;
  border-left: 1.5px dashed #c4c4c8;
}
/* Current as the very first column has no preceding card to separate
   from — skip the left divider. */
.cfg-tier-card.current:first-child::before { display: none; }

/* Lock-timer — v49 line 658-713. Sits in row 3 aligned to active
   tier's column. Up-arrow triangle pointing at the active card. */
.cfg-lock-timer-cell {
  display: flex; justify-content: center;
  padding-top: 14px;
}
/* Edge tiers — anchor bar to column edge so it doesn't overflow off-canvas.
   Arrow position is shifted via per-tier overrides below so it still points
   at the card's center (140px column ⇒ 70px from bar edge). */
.cfg-lock-timer-cell.first-tier { justify-content: flex-start; padding-left: 0; }
.cfg-lock-timer-cell.last-tier  { justify-content: flex-end;   padding-right: 0; }
.cfg-lock-timer-cell.first-tier .cfg-lock-timer::before,
.cfg-lock-timer-cell.first-tier .cfg-lock-timer::after {
  left: 70px;
}
.cfg-lock-timer-cell.last-tier .cfg-lock-timer::before,
.cfg-lock-timer-cell.last-tier .cfg-lock-timer::after {
  left: auto; right: 70px;
  /* right-anchored ⇒ undo translateX since translation flips with right anchor */
  transform: translateX(50%);
}
.cfg-lock-timer {
  display: inline-block;
  padding: 11px 18px;
  border-radius: 9px;
  border-width: 1.5px; border-style: solid;
  font-size: 13px;
  position: relative;
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1e3a8a;
  white-space: nowrap;
}
.cfg-lock-timer::before {
  content: ''; position: absolute;
  top: -9px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #93c5fd;
}
.cfg-lock-timer::after {
  content: ''; position: absolute;
  top: -7px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #eff6ff;
}
.cfg-lock-timer .lt-clock {
  font-weight: var(--weight-black);
  font-variant-numeric: tabular-nums;
}

.cfg-lock-timer.tier-sameday-border  { background: #f5f3ff; border-color: #c4b5fd; color: #5b21b6; }
.cfg-lock-timer.tier-sameday-border::before  { border-bottom-color: #c4b5fd; }
.cfg-lock-timer.tier-sameday-border::after   { border-bottom-color: #f5f3ff; }
.cfg-lock-timer.tier-nextday-border  { background: #fef2f2; border-color: #fca5a5; color: #7f1d1d; }
.cfg-lock-timer.tier-nextday-border::before  { border-bottom-color: #fca5a5; }
.cfg-lock-timer.tier-nextday-border::after   { border-bottom-color: #fef2f2; }
.cfg-lock-timer.tier-2days-border    { background: #fff7ed; border-color: #fdba74; color: #7c2d12; }
.cfg-lock-timer.tier-2days-border::before    { border-bottom-color: #fdba74; }
.cfg-lock-timer.tier-2days-border::after     { border-bottom-color: #fff7ed; }
.cfg-lock-timer.tier-3days-border    { background: #fefce8; border-color: #fde047; color: #713f12; }
.cfg-lock-timer.tier-3days-border::before    { border-bottom-color: #fde047; }
.cfg-lock-timer.tier-3days-border::after     { border-bottom-color: #fefce8; }
.cfg-lock-timer.tier-standard-border { background: #eff6ff; border-color: #93c5fd; color: #1e3a8a; }
.cfg-lock-timer.tier-standard-border::before { border-bottom-color: #93c5fd; }
.cfg-lock-timer.tier-standard-border::after  { border-bottom-color: #eff6ff; }
.cfg-lock-timer.tier-early-border    { background: #ecfdf5; border-color: #86efac; color: #14532d; }
.cfg-lock-timer.tier-early-border::before    { border-bottom-color: #86efac; }
.cfg-lock-timer.tier-early-border::after     { border-bottom-color: #ecfdf5; }

/* === Calendar (color-coded date grid, Google Flights pattern) === */
.cfg-cal-widget {
  background: #fff;
  border-radius: 11px;
  padding: 14px;
  border: 1px solid var(--border);
  min-width: 360px;
  max-width: 420px;
  flex-shrink: 0;
}
/* 2-month side-by-side variant — wider, shared nav arrows on the outside,
   single legend at the bottom. Min width sized to comfortably fit 4-digit
   prices in every cell ($9,999) across both months. */
.cfg-cal-widget-2col {
  position: relative;
  min-width: 720px;
  max-width: 760px;
  padding: 14px 32px 12px;
}
/* `minmax(0, 1fr)` forces strict 50/50 split regardless of inner content
   — without it, the panel with longer prices (3- or 4-digit) bullies the
   other panel narrower. */
.cfg-cal-months {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.cfg-cal-month-panel { display: flex; flex-direction: column; }
.cfg-cal-month-title {
  text-align: center;
  font-weight: var(--weight-bold); font-size: 13px;
  color: var(--text-2);
  margin-bottom: 10px;
}
.cfg-cal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  font-weight: var(--weight-bold); font-size: 13px;
  color: var(--text-2);
}
.cfg-cal-nav {
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  width: 24px; height: 24px; cursor: pointer;
  font-family: inherit; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
}
.cfg-cal-nav:hover:not(:disabled) {
  background: var(--text-2); color: #fff; border-color: var(--text-2);
}
.cfg-cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
/* Nav arrows pinned to the widget edges so they read as shared controls
   that shift BOTH month panels together. */
.cfg-cal-widget-2col .cfg-cal-nav-left,
.cfg-cal-widget-2col .cfg-cal-nav-right {
  position: absolute;
  top: 14px;
}
.cfg-cal-widget-2col .cfg-cal-nav-left  { left: 8px; }
.cfg-cal-widget-2col .cfg-cal-nav-right { right: 8px; }
/* `minmax(44px, 1fr)` gives every date cell a uniform minimum width that
   accommodates 4-digit prices ($9,999 ≈ 38px at 9px font + padding). Both
   months share the same minimum so cell widths stay consistent regardless
   of which month has bigger prices. */
.cfg-cal-weekdays {
  display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 3px;
  font-size: 9px; color: var(--subtext); text-align: center;
  margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--weight-bold);
}
.cfg-cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); gap: 3px;
}
.cfg-cal-date {
  min-height: 38px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4px 2px;
  border-radius: 6px; cursor: pointer;
  background: #fafaf8; color: #a1a1aa;
  border: 1px solid transparent;
  transition: transform 0.1s;
  font-family: inherit;
}
.cfg-cal-date .cfg-cal-num { font-size: 12px; font-weight: var(--weight-bold); line-height: 1; }
.cfg-cal-date .cfg-cal-price {
  font-size: 9px; font-weight: var(--weight-semi);
  color: var(--subtext);
  margin-top: 2px; line-height: 1; letter-spacing: -0.01em;
}
.cfg-cal-date .cfg-cal-price.cheap { color: var(--green-dark); font-weight: var(--weight-bold); }
.cfg-cal-date:hover:not(.past):not(.weekend) { transform: scale(1.06); }
/* Selected — heavier dark ring, permanent scale-up, and a chevron below
   the cell pointing at the tier panel so it reads as "this is the day
   I'm pricing for". Z-index lifts above neighbors so the ring isn't
   clipped by the next cell's box. */
.cfg-cal-date.selected {
  position: relative;
  box-shadow: 0 0 0 3px var(--text-2);
  transform: scale(1.08);
  z-index: 2;
}
.cfg-cal-date.selected::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 50%;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--text-2);
  transform: translateX(-50%);
}
.cfg-cal-date.past,
.cfg-cal-date.weekend {
  background: transparent; color: #d4d4d8; cursor: not-allowed;
}
/* Unreachable — too soon for any tier. Stays clickable (opens the
   "Need it faster" panel) but visually muted so it doesn't read as a
   normal price option. */
.cfg-cal-date.unreachable {
  background: transparent;
  color: #a1a1aa;
  border: 1px dashed #d4d4d8;
  cursor: help;
}
.cfg-cal-date.unreachable:hover { background: #fafaf8; color: #71717a; }
.cfg-cal-date.tier-sameday  { background: #ede9fe; color: #5b21b6; border-color: #c4b5fd; }
.cfg-cal-date.tier-nextday  { background: #fee2e2; color: #7f1d1d; border-color: #fca5a5; }
.cfg-cal-date.tier-2days    { background: #ffedd5; color: #7c2d12; border-color: #fdba74; }
.cfg-cal-date.tier-3days    { background: #fef9c3; color: #713f12; border-color: #fde047; }
.cfg-cal-date.tier-standard { background: #dbeafe; color: #1e3a8a; border-color: #93c5fd; }
.cfg-cal-date.tier-early    { background: #dcfce7; color: #14532d; border-color: #86efac; }
.cfg-cal-empty { background: transparent; min-height: 38px; }

.cfg-cal-legend {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding-top: 10px; margin-top: 10px;
  border-top: 1px dashed var(--border);
  font-size: 9px; color: var(--subtext);
}
.cfg-cal-legend-item {
  display: flex; align-items: center; gap: 3px;
  padding: 2px 5px; border-radius: 4px;
}
.cfg-cal-legend-swatch {
  width: 9px; height: 9px; border-radius: 2px; border: 1px solid;
}
.cfg-cal-legend-swatch.tier-sameday  { background: #ede9fe; border-color: #c4b5fd; }
.cfg-cal-legend-swatch.tier-nextday  { background: #fee2e2; border-color: #fca5a5; }
.cfg-cal-legend-swatch.tier-2days    { background: #ffedd5; border-color: #fdba74; }
.cfg-cal-legend-swatch.tier-3days    { background: #fef9c3; border-color: #fde047; }
.cfg-cal-legend-swatch.tier-standard { background: #dbeafe; border-color: #93c5fd; }
.cfg-cal-legend-swatch.tier-early    { background: #dcfce7; border-color: #86efac; }

/* Also add the missing tier classes to .cfg-cal-thumb (calendar build card thumb)
   so the colored stripe matches the calendar tier when the user picks a date. */
.cfg-cal-thumb.tier-2days::before { background: #ea580c; }
.cfg-cal-thumb.tier-3days::before { background: #ca8a04; }

/* === Hint flash — bottom-center toast for one-off confirmations === */
.cfg-hint {
  background: var(--text-2); color: #fff;
  padding: 8px 14px; border-radius: var(--radius-md);
  font-size: var(--size-sm);
  position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%);
  box-shadow: var(--shadow-card-hover);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
  z-index: 1000;
}
.cfg-hint.show { opacity: 1; }


/* ╔═════════════════════════════════════════════════════════════════════╗
   ║                    MOBILE REFLOW  ≤ 760 px                          ║
   ║                                                                     ║
   ║  The configurator's desktop layout (300px left rail + 1fr hero +    ║
   ║  3rd analysis column when proof active) doesn't fit on a phone —    ║
   ║  300px + minimum hero width pushes the page past 600px wide and the ║
   ║  whole document scrolls horizontally. This block collapses the      ║
   ║  layout into a single vertical column, shrinks display chrome,      ║
   ║  enlarges touch targets, and reflows the bottom dock + swap         ║
   ║  carousel for phones.                                               ║
   ╚═════════════════════════════════════════════════════════════════════╝ */
@media (max-width: 760px) {
  /* Stop horizontal scroll. The page-level scroll lives on body. */
  .cfg-wrap { overflow-x: hidden; }
  html, body { overflow-x: hidden; }

  /* TOP NAV — utility bar collapses to icon-only, main bar drops the
     search field to keep header height reasonable, category nav becomes
     horizontally-scrollable so it stops wrapping into multi-line chaos. */
  .cfg-nav-utility { padding: 6px 12px !important; font-size: 11px !important; }
  .cfg-nu-left { display: none !important; }      /* "Custom print, delivered fast…" */
  .cfg-nu-right { gap: 12px !important; }
  .cfg-nu-right a { font-size: 11px !important; }

  /* Main nav: logo + hamburger + cart row only. Drop search + wishlist;
     the hamburger reveals nav, the cart stays visible. */
  .cfg-nav-main {
    padding: 8px 12px !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  .cfg-nm-search { display: none !important; }
  .cfg-nm-icons .cfg-nm-icon-btn[aria-label="Wishlist"] { display: none !important; }
  .cfg-nm-icon-btn { padding: 8px !important; min-width: 40px; min-height: 40px; }
  .cfg-nm-icon-btn .cart-amt,
  .cfg-nm-icon-btn .badge { font-size: 10px !important; }
  .cfg-nm-logo img { height: 28px !important; }

  /* Category nav: single-line horizontal scroll. */
  .cfg-nav-categories {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    padding: 0 12px !important;
    scrollbar-width: none;
  }
  .cfg-nav-categories::-webkit-scrollbar { display: none; }
  .cfg-nav-categories a {
    flex: 0 0 auto !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* SEO intro: tighter side margins; no longer needs to compete with rail. */
  .cfg-seo-intro { margin: 0 12px 12px; padding: 12px 14px; font-size: 13px; }

  /* PRIMARY GRID — collapse 2-col to single column, hero first then rail. */
  .cfg-stage-main {
    grid-template-columns: 1fr !important;
    min-height: 0;
  }
  body.cfg-proof-active .cfg-stage-main {
    grid-template-columns: 1fr !important;
  }
  /* Reorder so the hero shows above the build rail (matches mental model:
     see the product first, then pick options below). */
  .cfg-stage-main > .cfg-stage,        /* hero area */
  .cfg-stage-main > .cfg-hero-stage,
  .cfg-stage-main > .cfg-stage-hero    { order: 1; }
  .cfg-stage-main > .cfg-build-rail    { order: 2; }
  .cfg-stage-main > .cfg-proof-rail    { order: 3; }

  /* HERO STAGE — smaller default, no sticky on mobile (frees scroll). */
  .cfg-stage,
  .cfg-hero-stage,
  .cfg-stage-hero {
    --cfg-stage-fit: clamp(220px, 38vh, 340px);
    min-height: var(--cfg-stage-fit);
    max-height: var(--cfg-stage-fit);
    position: static !important;
    padding: 16px 12px !important;
  }
  /* Hero card itself — let it size naturally inside the smaller stage. */
  .cfg-card-3d, .cfg-hero-card { max-width: 100% !important; }

  /* HERO bottom controls (Flip / Both / view-toggle / zoom) — wrap onto
     two lines, smaller targets but still ≥40px tall for thumbs. */
  .cfg-stage-controls-bottom,
  .cfg-stage-controls-bottom.docked-top {
    left: 0 !important; right: 0 !important;
    flex-wrap: wrap; gap: 6px !important;
    padding: 6px 10px !important;
    justify-content: center;
  }
  .cfg-stage-controls-bottom button,
  .cfg-stage-controls-bottom .cfg-stage-ctrl {
    min-height: 40px; padding: 7px 12px !important; font-size: 12px !important;
  }

  /* BUILD RAIL — full-width, no sticky positioning that would steal the
     scroll. Pad in line with the stage. */
  .cfg-build-rail {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 12px 24px !important;
    position: static !important;
    border-right: 0 !important;
    border-top: 1px solid var(--border-light);
  }
  /* 2-col build grid stays — fits at 375px (each card ~165px). */
  .cfg-build-grid { gap: 8px !important; }
  .cfg-build-card { min-height: 90px !important; }
  /* Bigger tap target on the build-card title + value rows. */
  .cfg-bc-name { font-size: 11px !important; }
  .cfg-bc-value { font-size: 13px !important; line-height: 1.2 !important; }

  /* ARTWORK ZONE — full-width card; drop zone is already touch-friendly. */
  .cfg-artwork-zone { padding: 12px !important; }
  .cfg-aw-bigdrop { padding: 22px 14px !important; }

  /* BOTTOM DOCK — sticky to viewport bottom on mobile so the customer can
     always see the running total + Continue button without scrolling. */
  .cfg-bottom-dock,
  .cfg-stage-bottom-dock {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    width: 100% !important;
    z-index: 90;
    box-shadow: 0 -2px 14px rgba(0,0,0,0.08);
    padding: 10px 12px env(safe-area-inset-bottom, 10px) !important;
  }
  /* Reserve bottom space so dock doesn't cover the artwork zone / details. */
  .cfg-wrap { padding-bottom: 160px; }

  /* SWAP CAROUSEL — when active, render as a true bottom sheet that
     overlays the page (slides up from the dock) instead of squeezing
     between the hero and the build cards. */
  .cfg-swap-wrap {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; max-width: 100% !important;
    background: #fff;
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 28px rgba(0,0,0,0.15);
    z-index: 100;
    padding: 14px 12px env(safe-area-inset-bottom, 14px) !important;
    max-height: 70vh; overflow-y: auto;
    animation: cfg-swap-rise 0.22s ease-out;
  }
  @keyframes cfg-swap-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .cfg-swap-wrap.cfg-swap-collapsed { display: none !important; }
  /* Add a drag-affordance handle above the swap content. */
  .cfg-swap-wrap::before {
    content: '';
    display: block;
    width: 38px; height: 4px;
    background: #d4d4d8; border-radius: 999px;
    margin: -4px auto 10px;
  }
  /* Bigger close button for thumbs. */
  .cfg-swap-close { width: 36px !important; height: 36px !important; font-size: 18px !important; }
  /* Swap chip rows — keep horizontal scroll for size/qty pickers, more
     padding for thumbs. */
  .cfg-swap-chip { min-height: 44px !important; padding: 8px 14px !important; font-size: 13px !important; }
  .cfg-swap-chip-row { gap: 8px !important; }

  /* TIER CARDS in the IN HAND BY drawer — full width on mobile so they're
     readable. */
  .cfg-tier-carousel { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* HOT SPOTS on the hero card — bigger touch targets (44px Apple HIG min). */
  .cfg-hotspot { width: 44px !important; height: 44px !important; }
  .cfg-hotspot svg { width: 22px !important; height: 22px !important; }

  /* BELOW-THE-FOLD: details + faqs + related products already collapse to
     single column at 880px (existing rule). No change needed. */

  /* Hint toast — lift above the sticky dock. */
  .cfg-hint { bottom: calc(170px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Extra-narrow phones (≤ 380 px): tighten further so 375 px iPhones don't
   feel cramped on chip rows. */
@media (max-width: 380px) {
  .cfg-stage-controls-bottom button,
  .cfg-stage-controls-bottom .cfg-stage-ctrl { padding: 6px 10px !important; font-size: 11px !important; }
  .cfg-build-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .cfg-build-card { padding: 8px !important; min-height: 84px !important; }
}