/* ==========================================================================
   M3 Sound / Lighting / Staging — shared design system
   ========================================================================== */

:root {
  /* Brand palette */
  --color-bg: #0d0f12;
  --color-bg-alt: #14171c;
  --color-surface: #1b1f26;
  --color-surface-2: #232832;
  --color-border: #2c313b;
  --color-text: #eef0f3;
  --color-text-muted: #a7adba;
  --color-text-faint: #767d8c;
  --color-accent: #3aa0ff;
  --color-accent-hover: #6cbaff;
  --color-accent-2: #1f6fb8;
  --color-success: #3fbf7f;
  --color-danger: #e6584f;

  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin: 0 0 16px;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 16px; color: var(--color-text-muted); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
section { padding: 80px 0; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-accent);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--color-accent); display: inline-block; }

.section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section-head p { margin-bottom: 0; }

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

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--color-accent); color: #ffffff; }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-outline { border-color: var(--color-text); color: var(--color-text); background: transparent; }
.btn-outline:hover { border-color: var(--color-accent); color: var(--color-accent); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 18px; font-size: 0.82rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Header / nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13,15,18,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.nav {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text);
}
.brand .mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  color: #ffffff;
  font-weight: 800;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.brand small { color: var(--color-text-faint); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-body); font-weight: 500; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; margin-left: auto; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--color-text); margin: 4px 0; }
.nav-links {
  list-style: none;
  display: flex;
  gap: 26px;
  margin: 0 auto 0 12px;
  padding: 0;
}
.nav-links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-text-muted);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-links a:hover { color: var(--color-text); }
.nav-links a.active { color: var(--color-text); border-color: var(--color-accent); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.cart-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
}
.cart-link:hover { border-color: var(--color-accent); color: var(--color-accent); }
.cart-count {
  background: var(--color-accent);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.72rem;
  border-radius: 50%;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.cart-link.active { border-color: var(--color-accent); color: var(--color-accent); }

/* Page hero (interior pages) */
.page-hero { padding: 60px 0 50px; border-bottom: 1px solid var(--color-border); background: var(--color-bg-alt); }
.breadcrumb { color: var(--color-text-faint); font-size: 0.85rem; margin-bottom: 18px; }
.breadcrumb a { color: var(--color-text-faint); }
.breadcrumb a:hover { color: var(--color-accent); }
.page-hero h1 { margin-bottom: 14px; }
.page-hero .lead { max-width: 640px; font-size: 1.05rem; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }

/* Home hero */
.hero {
  position: relative;
  padding: 110px 0 90px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(255,255,255,0.10), transparent 55%),
    radial-gradient(ellipse at 90% 10%, rgba(58,160,255,0.18), transparent 50%),
    linear-gradient(180deg, var(--color-bg-alt), var(--color-bg));
  border-bottom: 1px solid var(--color-border);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: center;
}
.hero p.lead {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 540px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.hero-visual {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.14), rgba(58,160,255,0.24)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 14px);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-faint);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  text-align: center;
  padding: 24px;
}

/* Stats bar */
.stats-bar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 36px 0;
}
.stats-bar .grid-4 { text-align: center; }
.stat-num { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; color: var(--color-accent); }
.stat-label { color: var(--color-text-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* Cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 28px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover { border-color: var(--color-accent); transform: translateY(-4px); }
.card .icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(58,160,255,0.14);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 18px;
  font-size: 1.2rem;
}
.card h3 { margin-bottom: 10px; }
.card p { margin-bottom: 0; font-size: 0.95rem; }
.card a.card-link { color: var(--color-accent); font-size: 0.88rem; font-weight: 600; display: inline-block; margin-top: 14px; }

.service-area-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px 40px;
}
.service-area-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted);
}
.service-area-list li::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.cta-banner {
  background: linear-gradient(120deg, #1b1f26, #232832);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-banner h2 { margin-bottom: 8px; }
.cta-banner p { margin-bottom: 0; max-width: 480px; }

/* Footer */
.site-footer { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding: 56px 0 24px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; }
.footer-grid h4 { font-size: 0.85rem; color: var(--color-text); margin-bottom: 16px; }
.footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-grid a { color: var(--color-text-muted); font-size: 0.9rem; }
.footer-grid a:hover { color: var(--color-accent); }
.footer-grid p { font-size: 0.88rem; }
.social-row { display: flex; gap: 10px; margin-top: 16px; }
.social-row a {
  width: 34px; height: 34px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.social-row a:hover { border-color: var(--color-accent); }
.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--color-text-faint);
  font-size: 0.82rem;
}
.footer-bottom a { color: var(--color-text-faint); }
.footer-bottom a:hover { color: var(--color-accent); }

/* Forms */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); }
.form-field input, .form-field select, .form-field textarea {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.form-field textarea { resize: vertical; }
.cart-note { font-size: 0.8rem; color: var(--color-text-faint); margin-top: 12px; }

/* Shop layout */
.shop-layout { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.filter-chip {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.filter-chip.active, .filter-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.product-thumb {
  aspect-ratio: 4/3;
  background: linear-gradient(150deg, rgba(255,255,255,0.10), rgba(58,160,255,0.20));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-faint);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--color-border);
}
.product-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-cat { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent-2); }
.product-name { font-weight: 700; font-size: 1rem; }
.product-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--color-text-faint); }
.product-price { color: var(--color-text); font-weight: 700; }
.stock-badge { font-size: 0.75rem; padding: 3px 9px; border-radius: 999px; }
.stock-badge.in { background: rgba(63,191,127,0.15); color: var(--color-success); }
.stock-badge.low { background: rgba(167,173,186,0.18); color: var(--color-text-muted); }
.product-actions { margin-top: auto; display: flex; gap: 8px; align-items: center; }
.qty-input {
  width: 54px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  padding: 10px;
  text-align: center;
}

.cart-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
  position: sticky;
  top: 96px;
}
.cart-panel h3 { margin-bottom: 6px; }
.cart-sub { font-size: 0.85rem; margin-bottom: 18px; }
.cart-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; max-height: 320px; overflow-y: auto; }
.cart-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.9rem; }
.cart-item-name { font-weight: 600; }
.cart-item-meta { color: var(--color-text-faint); font-size: 0.78rem; }
.cart-item-remove { background: none; border: none; color: var(--color-text-faint); cursor: pointer; font-size: 1rem; }
.cart-item-remove:hover { color: var(--color-danger); }
.cart-total-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid var(--color-border); margin-bottom: 16px; }
.cart-total-row .amount { color: var(--color-accent); font-size: 1.2rem; }

/* Checkout modal */
.checkout-modal-overlay {
  position: fixed; inset: 0; background: rgba(6,7,9,0.75);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.checkout-modal-overlay.open { opacity: 1; pointer-events: auto; }
.checkout-modal {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-lg);
}
.close-x {
  position: absolute; top: 18px; right: 18px;
  background: none; border: none; color: var(--color-text-faint);
  font-size: 1.6rem; cursor: pointer; line-height: 1;
}
.close-x:hover { color: var(--color-text); }
.confirm-box { text-align: center; margin-bottom: 24px; }
.check-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(63,191,127,0.15); color: var(--color-success);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin: 0 auto 18px;
}

/* Responsive */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .shop-layout { grid-template-columns: 1fr; }
  .cart-panel { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    padding: 16px 24px;
    display: none;
    margin: 0;
    gap: 16px;
  }
  .nav-links.open { display: flex; }
  .nav-cta { margin-left: auto; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .cta-banner { flex-direction: column; align-items: flex-start; }
  .form-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Stage Plot Builder
   ========================================================================== */

#print-area { padding-bottom: 40px; }

/* ==========================================================================
   Flattened export theme — shared by BOTH print/PDF and "Download as Image".
   Toggled onto <body> right before either one captures the page (print via
   the beforeprint/afterprint events, image export via JS around the
   html2canvas call) so the two outputs are defined by ONE ruleset instead of
   two that have to be kept in sync by hand — that's what caused the export
   drifting out of sync with print earlier.

   Styled after a real hand-drawn stage plot: plain black on white, a single
   page border, no boxed-in sections, no grid lines — gear floats on the
   page with a plain icon + caption, like a printed document a crew would
   actually read, not a screenshot of the web app's dark editing UI. */
/* Base override: everything inherits var(--color-text), a near-white tone
   meant for the dark editing UI. Force black as the baseline so any text
   not given its own color rule below (headings, etc.) is still legible on
   the white export page instead of silently near-invisible. */
body.stageplot-flat { background: #fff; color: #000; }
body.stageplot-flat .plot-toolbar,
body.stageplot-flat .plot-palette,
body.stageplot-flat .item-controls,
body.stageplot-flat .no-print { display: none !important; }
body.stageplot-flat .plot-layout { display: block !important; }

body.stageplot-flat #print-area {
  background: #fff;
  border: 1px solid #000;
  padding: 20px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Header: plain stacked "Label: value" text, not a boxed form. */
body.stageplot-flat .plot-meta-form { border: none; background: none; padding: 0; margin-bottom: 16px; }
body.stageplot-flat .plot-meta-form h3,
body.stageplot-flat .plot-meta-form .sub { display: none; }
body.stageplot-flat .plot-meta-grid { display: block !important; }
body.stageplot-flat .plot-meta-grid .form-field {
  display: flex; flex-direction: row; align-items: baseline; gap: 6px; margin-bottom: 2px;
}
body.stageplot-flat .plot-meta-grid .form-field label {
  font-weight: 600; white-space: nowrap; margin-bottom: 0; color: #000; font-size: 0.78rem;
}
body.stageplot-flat .plot-meta-grid .full { margin-top: 4px; }
body.stageplot-flat .form-field input,
body.stageplot-flat .form-field textarea,
body.stageplot-flat .form-field select {
  border: none; background: none; padding: 0; color: #000; font-size: 0.85rem; border-radius: 0;
}
body.stageplot-flat .plot-meta-grid textarea { min-height: 16px; resize: none; }

/* Plain-text stand-ins for form fields during "Download as Image" capture
   (see flattenFormFields() in stageplot.js) — html2canvas can't paint live
   input/textarea text reliably, so these render in their place. Styled to
   match the input/textarea rules just above. */
body.stageplot-flat .stageplot-flat-value {
  color: #000;
  font-size: 0.85rem;
  white-space: pre-wrap;
}

/* Stage area: no frame, no grid lines — just the gear on the page. */
body.stageplot-flat .stage-wrap { border: none; padding: 0; background: none; }
body.stageplot-flat .stage-canvas { border: none; background: #fff !important; aspect-ratio: 2.2 / 1; }
body.stageplot-flat .stage-edge-label { color: #555; font-style: italic; }

/* Icons: drop the chip/box background, just the glyph and its caption.
   The base theme colors icons var(--color-text), a near-white tone meant
   for the dark editing UI — force plain black so they're visible on a
   white printed/exported page. */
body.stageplot-flat .item-icon { background: none; border: none; box-shadow: none; color: #000; }
body.stageplot-flat .item-icon svg { width: 34px; height: 34px; }
body.stageplot-flat .item-icon.type-riser { width: auto; }
body.stageplot-flat .stage-item.selected .item-icon { border: none !important; box-shadow: none !important; }
body.stageplot-flat .item-label { background: none; color: #000; font-weight: 500; }

/* Input list: plain text columns, no table chrome — just a rule under the
   header row to separate it from the data. */
body.stageplot-flat table.input-list,
body.stageplot-flat table.input-list th,
body.stageplot-flat table.input-list td { background: none; border: none; }
body.stageplot-flat table.input-list th { border-bottom: 1.5px solid #000; color: #000; }
body.stageplot-flat table.input-list td { color: #000; border-bottom: 1px solid #ddd; }
body.stageplot-flat table.input-list tr:last-child td { border-bottom: none; }
body.stageplot-flat table.input-list input,
body.stageplot-flat table.input-list select { color: #000; }

.plot-meta-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  margin-bottom: 28px;
}
.plot-meta-form h3 { margin-bottom: 4px; }
.plot-meta-form .sub { font-size: 0.85rem; color: var(--color-text-faint); margin-bottom: 18px; }
.plot-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plot-meta-grid .form-field { margin-bottom: 0; }
.plot-meta-grid .full { grid-column: 1 / -1; }

.plot-layout { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; }

.plot-palette {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
  position: sticky;
  top: 96px;
}
.plot-palette h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-faint); margin-bottom: 14px; }
.palette-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.palette-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 6px;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 0.68rem;
  text-align: center;
  line-height: 1.2;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.palette-btn:hover { border-color: var(--color-accent); color: var(--color-text); }
.palette-btn svg { width: 26px; height: 26px; stroke: currentColor; fill: none; }
.palette-note { font-size: 0.76rem; color: var(--color-text-faint); margin-top: 14px; line-height: 1.5; }

.plot-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; align-items: center; }
.plot-toolbar .save-indicator { margin-left: auto; font-size: 0.78rem; color: var(--color-text-faint); }

.stage-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
}
.stage-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    var(--color-bg);
  background-size: 5% 10%, 5% 10%;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  touch-action: none;
  user-select: none;
}
.stage-edge-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  color: var(--color-text-faint);
  pointer-events: none;
}
.stage-edge-label.front { bottom: 6px; }
.stage-edge-label.back { top: 6px; }

.stage-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 74px;
  transform: translate(-50%, -50%);
  cursor: grab;
  z-index: 2;
}
.stage-item.dragging { cursor: grabbing; z-index: 5; }
.stage-item.selected .item-icon { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(58,160,255,0.25); }
.item-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: transform 0.15s ease;
}
.item-icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; }
.item-icon.type-riser { width: 90px; background: rgba(58,160,255,0.10); border-style: dashed; }
.item-label {
  font-size: 0.68rem;
  color: var(--color-text-muted);
  background: rgba(13,15,18,0.7);
  padding: 1px 6px;
  border-radius: 4px;
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-label[contenteditable="true"] {
  white-space: normal;
  overflow: visible;
  cursor: text;
  outline: 1px dashed var(--color-accent);
}
.item-controls {
  position: absolute;
  top: -14px;
  right: -10px;
  display: none;
  gap: 4px;
}
.stage-item.selected .item-controls { display: flex; }
.item-controls button {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
  font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.item-controls button:hover { border-color: var(--color-accent); color: var(--color-text); }
.item-controls .del-btn:hover { border-color: var(--color-danger); color: var(--color-danger); }

.input-list-wrap { margin-top: 28px; }
.input-list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
table.input-list { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
table.input-list th, table.input-list td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); text-align: left; font-size: 0.85rem; }
table.input-list th { color: var(--color-text-faint); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.06em; background: var(--color-surface-2); }
table.input-list input, table.input-list select { width: 100%; background: transparent; border: none; color: var(--color-text); font-size: 0.85rem; padding: 4px; }
table.input-list input:focus, table.input-list select:focus { outline: 1px solid var(--color-accent); border-radius: 4px; }
table.input-list td.ch-num { color: var(--color-text-faint); width: 46px; }
table.input-list td.row-del { width: 36px; text-align: center; }
table.input-list td.row-del button { background: none; border: none; color: var(--color-text-faint); cursor: pointer; font-size: 1rem; }
table.input-list td.row-del button:hover { color: var(--color-danger); }
table.input-list tr:last-child td { border-bottom: none; }

@media (max-width: 860px) {
  .plot-layout { grid-template-columns: 1fr; }
  .plot-palette { position: static; }
  .palette-grid { grid-template-columns: repeat(4, 1fr); }
  .plot-meta-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .palette-grid { grid-template-columns: repeat(3, 1fr); }
  .plot-meta-grid { grid-template-columns: 1fr; }
  .stage-canvas { aspect-ratio: 4 / 3; }
  .stage-edge-label { font-size: 0.62rem; }
}

/* Print — stage plot only.
   All the visual redesign (border, plain header, boxless stage, plain input
   list) lives in body.stageplot-flat above, toggled on by beforeprint/
   afterprint in stageplot.js — the exact same ruleset "Download as Image"
   uses. This block keeps ONLY the mechanics that a plain class can't
   express: page setup, pagination/page-breaks, and hiding the site chrome
   that sits outside #print-area (so isn't reached by stageplot-flat's
   descendant selectors). */
@media print {
  /* A stage plot is wide, not tall — print it landscape by default instead
     of leaving that to the person to notice and pick in the print dialog. */
  @page { size: landscape; margin: 0.35in; }

  .site-header, .site-footer, .page-hero { display: none !important; }
  /* Belt-and-suspenders: stageplot-flat already hides these via JS, but if
     beforeprint somehow doesn't fire in time, still hide them here. */
  .plot-palette, .plot-toolbar, .item-controls, .no-print { display: none !important; }

  /* Landscape pages are much shorter than portrait — compact the base type
     size so the layout actually fits the reduced page height at 100% print
     scale, not just relying on the browser's own page-fit/shrink setting. */
  body { font-size: 0.92rem; }

  /* Input list always starts on its own page, so the stage plot page above
     never has to compete with it for room. */
  .input-list-wrap { margin-top: 0; break-before: page; page-break-before: always; padding-top: 4px; }
  /* Break between rows, never through the middle of one, and keep the
     header glued to at least its first row instead of stranding it alone
     at the bottom of a page. */
  table.input-list tr { break-inside: avoid; }
  table.input-list thead { break-after: avoid; }

  .container { max-width: 100%; padding: 0; }
  /* !important because the wrapping <section> carries an inline
     style="padding-top:40px" in the HTML, which otherwise beats this rule
     regardless of specificity and silently eats into the page budget. */
  section { padding: 4px 0 !important; }
}

.product-desc { font-size: 0.85rem; line-height: 1.45; color: var(--color-text-muted, #9aa3ad); margin: 0 0 12px; }

/* ==========================================================================
   Rental Shop (store layout): light content area under the dark site header
   ========================================================================== */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.store {
  --s-bg: #f3f4f6;
  --s-surface: #ffffff;
  --s-border: #dde1e7;
  --s-text: #14181f;
  --s-muted: #556070;
  --s-accent: #1f6fb8;
  --s-accent-dark: #17568f;
  background: var(--s-bg);
  color: var(--s-text);
  padding: 28px 0 72px;
}
.store .breadcrumb { margin-bottom: 6px; color: var(--s-muted); }
.store .breadcrumb a { color: var(--s-muted); }
.store .breadcrumb a:hover { color: var(--s-accent); }
.store-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.store-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0; color: var(--s-text); }
.store-help { margin: 0; color: var(--s-muted); font-size: 0.92rem; }
.store-help a { color: var(--s-accent); font-weight: 600; }
.store-help a:hover { text-decoration: underline; }

.store-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr) 320px; gap: 28px; align-items: start; }

/* Category list */
.store-cats { position: sticky; top: 84px; }
.store-cats ul { list-style: none; display: flex; flex-direction: column; gap: 2px; background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--radius-md); padding: 6px; }
.cat-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 12px; border: 0; border-radius: var(--radius-sm); background: transparent;
  font: inherit; font-size: 0.93rem; color: var(--s-text); cursor: pointer; text-align: left;
}
.cat-btn:hover:not(:disabled) { background: #eef2f7; }
.cat-btn.active { background: var(--s-accent); color: #fff; font-weight: 600; }
.cat-btn:disabled { color: #9aa3af; cursor: default; }
.cat-count { font-size: 0.8rem; color: var(--s-muted); }
.cat-btn.active .cat-count { color: #dbeaf8; }
.cat-btn:focus-visible, .store input:focus-visible, .store select:focus-visible, .store .btn:focus-visible {
  outline: 3px solid #f5a524; outline-offset: 2px;
}

/* Toolbar */
.store-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.store-toolbar .search { flex: 1; }
.store-toolbar input[type="search"], .store-toolbar select {
  width: 100%; height: 44px; padding: 0 14px; font: inherit; font-size: 0.95rem;
  color: var(--s-text); background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--radius-sm);
}
.store-toolbar .sort { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--s-muted); white-space: nowrap; }
.store-toolbar select { width: auto; }
.store-count { margin: 0 0 14px; font-size: 0.85rem; color: var(--s-muted); }

/* Product rows */
.store .group { padding: 0; margin: 0 0 26px; background: transparent; }
.store .group-title {
  font-family: var(--font-body); text-transform: none; letter-spacing: 0;
  font-size: 1.05rem; font-weight: 700; color: var(--s-text); margin: 0 0 8px; padding: 0 2px 8px;
  border-bottom: 2px solid var(--s-text);
}
.store .row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 18px; align-items: center;
  background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--radius-md);
  padding: 14px 16px; margin-bottom: 8px;
}
.store .row-name { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 600; margin: 0; color: var(--s-text); line-height: 1.3; }
.store .row-desc { margin: 4px 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--s-muted); max-width: 70ch; }
.store .row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.store .row-price { font-weight: 700; font-size: 1.05rem; white-space: nowrap; text-align: right; color: var(--s-text); }
.store .row-price.is-quote { color: var(--s-muted); font-weight: 600; font-size: 0.95rem; }
.store .row-actions { display: flex; gap: 8px; align-items: center; }
.store .qty-input { width: 58px; height: 40px; padding: 0 8px; text-align: center; font: inherit; color: var(--s-text); background: #fff; border: 1px solid var(--s-border); border-radius: var(--radius-sm); }
.store .btn-primary { background: var(--s-accent); color: #fff; min-width: 92px; }
.store .btn-primary:hover { background: var(--s-accent-dark); }
.store .btn-primary.added { background: #1d7a4d; }
.store .btn-primary:disabled { background: #b9c2cd; color: #fff; cursor: not-allowed; }
.store .btn-outline { border-color: var(--s-text); color: var(--s-text); }
.store .btn-outline:hover { border-color: var(--s-accent); color: var(--s-accent); }
.store .empty { background: var(--s-surface); border: 1px dashed var(--s-border); border-radius: var(--radius-md); padding: 28px; text-align: center; }
.store .empty p { color: var(--s-muted); }

/* Cart panel */
.store .cart-panel { position: sticky; top: 84px; background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--radius-md); padding: 20px; box-shadow: none; }
.store .cart-panel h2 { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 1.1rem; margin: 0 0 4px; color: var(--s-text); }
.store .cart-sub, .store .cart-note { color: var(--s-muted); }
.store .cart-item-name { color: var(--s-text); }
.store .cart-item-meta { color: var(--s-muted); }
.store .cart-item-remove { color: #6b7686; font-size: 1.2rem; padding: 4px 8px; }
.store .cart-total-row { border-top: 1px solid var(--s-border); color: var(--s-text); }
.store .cart-total-row .amount { color: var(--s-text); font-weight: 700; }

.mobile-cartbar { display: none; }

@media (max-width: 1080px) {
  .store-grid { grid-template-columns: 190px minmax(0, 1fr); }
  .store .cart-panel { grid-column: 1 / -1; position: static; }
}
@media (max-width: 780px) {
  .store { padding-bottom: 96px; }
  .store-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .store-cats { position: static; margin: 0 -24px; padding: 0 24px; }
  .store-cats ul { flex-direction: row; overflow-x: auto; gap: 6px; padding: 6px; -webkit-overflow-scrolling: touch; }
  .cat-btn { width: auto; white-space: nowrap; gap: 10px; }
  .store-toolbar { flex-wrap: wrap; }
  .store-toolbar .sort { width: 100%; }
  .store-toolbar select { flex: 1; }
  .store .row { grid-template-columns: 72px minmax(0, 1fr); gap: 10px 12px; }
  .store .row-side { grid-column: 1 / -1; }
  .store .row-side { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
  .store .row-price { text-align: left; flex: 1 1 auto; }
  .store .row-actions { margin-left: auto; }
  .mobile-cartbar {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    background: #14181f; color: #fff; font-weight: 600; font-size: 0.95rem;
    box-shadow: 0 -6px 18px rgba(0,0,0,0.25);
  }
}
@media print { .mobile-cartbar { display: none !important; } }

.store .cat-heading { margin: 10px 8px 2px; padding-top: 10px; border-top: 1px solid var(--s-border); font-size: 0.8rem; font-weight: 600; color: var(--s-muted); list-style: none; }
.store .section-split { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 1.3rem; font-weight: 700; color: var(--s-text); margin: 34px 0 14px; }
.store .group-note { margin: -2px 2px 10px; font-size: 0.85rem; color: var(--s-muted); }
.store .row-tag { font-size: 0.78rem; font-weight: 600; color: var(--s-accent); margin-bottom: 2px; }
@media (max-width: 780px) { .store .cat-heading { display: none; } }

.store .row-thumb { width: 96px; height: 96px; background: #f1f3f6; border-radius: var(--radius-sm); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.store .row-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
@media (max-width: 780px) { .store .row-thumb { width: 72px; height: 72px; } }

/* ==========================================================================
   Item detail page (inside the store layout)
   ========================================================================== */
.store .row-thumb a { display: block; width: 100%; height: 100%; }
.store .row-name a { color: inherit; }
.store .row-name a:hover { color: var(--s-accent); text-decoration: underline; }
.store .row-more { display: inline-block; margin-top: 2px; font-size: 0.82rem; font-weight: 600; color: var(--s-accent); }
.store .row-more:hover { text-decoration: underline; }

.store .detail-back { margin: 0 0 14px; }
.store .detail-back a { font-size: 0.9rem; font-weight: 600; color: var(--s-accent); }
.store .detail-back a:hover { text-decoration: underline; }
.store .detail-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.store .detail-photo { background: #fff; border: 1px solid var(--s-border); border-radius: var(--radius-md); padding: 16px; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; }
.store .detail-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.store .detail-title { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.2; margin: 2px 0 6px; color: var(--s-text); }
.store .detail-headline { margin: 0 0 14px; color: var(--s-muted); font-size: 1rem; }
.store .detail-price { font-size: 1.7rem; font-weight: 700; color: var(--s-text); }
.store .detail-pricenote { margin: 2px 0 16px; font-size: 0.82rem; color: var(--s-muted); }
.store .detail-qtyrow { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.store .detail-qtyrow label { font-size: 0.9rem; font-weight: 600; color: var(--s-text); }
.store .detail-addons { border: 1px solid var(--s-border); border-radius: var(--radius-sm); background: var(--s-surface); padding: 10px 14px 12px; margin: 0 0 16px; }
.store .detail-addons legend { padding: 0 6px; font-size: 0.82rem; font-weight: 600; color: var(--s-muted); }
.store .addon { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; cursor: pointer; font-size: 0.93rem; color: var(--s-text); }
.store .addon + .addon { border-top: 1px solid var(--s-border); }
.store .addon input { width: 20px; height: 20px; accent-color: var(--s-accent); }
.store .addon-price { font-weight: 600; color: var(--s-muted); font-size: 0.88rem; white-space: nowrap; }
.store .detail-help { margin: 12px 0 0; font-size: 0.85rem; color: var(--s-muted); }
.store .detail-help a { color: var(--s-accent); font-weight: 600; }
.store .detail-body { margin-top: 34px; display: grid; gap: 26px; max-width: 760px; }
.store .detail-body h3, .store .detail-pairs h3 { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 1.15rem; font-weight: 700; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--s-text); color: var(--s-text); }
.store .detail-body p { color: var(--s-text); margin: 0 0 12px; line-height: 1.65; }
.store .detail-list { padding-left: 20px; margin: 0; color: var(--s-text); line-height: 1.7; }
.store .spec-table { width: 100%; border-collapse: collapse; background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--radius-sm); overflow: hidden; }
.store .spec-table th, .store .spec-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--s-border); font-size: 0.92rem; vertical-align: top; color: var(--s-text); }
.store .spec-table th { width: 34%; font-weight: 600; color: var(--s-muted); background: #f8f9fb; }
.store .spec-table tr:last-child th, .store .spec-table tr:last-child td { border-bottom: 0; }
.store .detail-pairs { margin-top: 38px; }
.store .pairs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.store .pair { display: flex; flex-direction: column; gap: 4px; text-align: left; font: inherit; color: var(--s-text); background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--radius-md); padding: 10px; cursor: pointer; }
.store .pair:hover { border-color: var(--s-accent); }
.store .pair-img { aspect-ratio: 1 / 1; background: #fff; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.store .pair-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.store .pair-name { font-size: 0.85rem; font-weight: 600; line-height: 1.3; }
.store .pair-price { font-size: 0.78rem; color: var(--s-muted); }
@media (max-width: 1080px) { .store .pairs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 780px) { .store .detail-top { grid-template-columns: minmax(0, 1fr); gap: 18px; } .store .detail-photo { aspect-ratio: 4 / 3; } }
.store .detail-body section, .store .detail-pairs { padding: 0; }

.brand-logo { display:block; height:44px; width:auto; }
@media (max-width:600px){ .brand-logo{ height:38px; } }

/* ---- Cart page ---- */
.store-grid.cart-mode { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.store-grid.cart-mode .store-cats, .store-grid.cart-mode .cart-panel { display: none; }
body.cart-mode .mobile-cartbar { display: none !important; }
.store .cart-page-title { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 1.5rem; font-weight: 700; margin: 0 0 16px; color: var(--s-text); }
.store .cart-rows { display: flex; flex-direction: column; gap: 8px; }
.store .cart-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 84px 32px; gap: 14px; align-items: center; background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--radius-md); padding: 12px 14px; }
.store .cart-row-img { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.store .cart-row-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.store .cart-row-name { font-weight: 600; color: var(--s-text); line-height: 1.3; }
.store .cart-row-meta { font-size: 0.85rem; color: var(--s-muted); margin-top: 2px; }
.store .cart-row-qty { display: flex; align-items: center; gap: 4px; }
.store .qty-btn { width: 34px; height: 34px; border: 1px solid var(--s-border); background: #fff; border-radius: var(--radius-sm); font-size: 1.1rem; line-height: 1; cursor: pointer; color: var(--s-text); }
.store .qty-btn:hover { border-color: var(--s-accent); color: var(--s-accent); }
.store .qty-val { min-width: 32px; text-align: center; font-weight: 600; color: var(--s-text); }
.store .cart-row-total { text-align: right; font-weight: 700; color: var(--s-text); }
.store .cart-page-total { display: flex; justify-content: space-between; align-items: center; padding: 18px 4px 6px; font-size: 1.1rem; color: var(--s-text); border-top: 2px solid var(--s-text); margin-top: 16px; }
.store .cart-page-total strong { font-size: 1.35rem; }
.store .cart-page-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.store .cart-viewlink { display: block; margin: 0 0 10px; font-size: 0.9rem; font-weight: 600; color: var(--s-accent); text-align: center; }
@media (max-width: 640px) {
  .store .cart-row { grid-template-columns: 52px minmax(0, 1fr) 32px; }
  .store .cart-row-img { width: 52px; height: 52px; }
  .store .cart-row-qty { grid-column: 2; }
  .store .cart-row-total { grid-column: 2 / 3; text-align: left; }
  .store .cart-row .cart-item-remove { grid-row: 1; grid-column: 3; }
  .store .cart-page-actions .btn { flex: 1; }
}

/* ---- Request form modal: light theme to match the shop ---- */
.checkout-modal-overlay { background: rgba(20, 24, 31, 0.55); }
.checkout-modal { background: #ffffff; color: #14181f; border: 1px solid #dde1e7; box-shadow: 0 24px 60px rgba(20, 24, 31, 0.28); }
.checkout-modal h2 { font-family: var(--font-body); text-transform: none; letter-spacing: 0; color: #14181f; font-weight: 700; }
.checkout-modal p { color: #556070; }
.checkout-modal .eyebrow { color: #1f6fb8; }
.checkout-modal .eyebrow::before { background: #1f6fb8; }
.checkout-modal .form-field label { color: #14181f; }
.checkout-modal .form-field input, .checkout-modal .form-field select, .checkout-modal .form-field textarea { background: #ffffff; color: #14181f; border: 1px solid #c9d0d9; }
.checkout-modal .form-field input:focus, .checkout-modal .form-field select:focus, .checkout-modal .form-field textarea:focus { border-color: #1f6fb8; outline: 2px solid rgba(31, 111, 184, 0.2); }
.checkout-modal textarea[readonly] { background: #f3f4f6; }
.checkout-modal .btn-primary { background: #1f6fb8; color: #fff; }
.checkout-modal .btn-primary:hover { background: #17568f; }
.checkout-modal .btn-outline { border-color: #14181f; color: #14181f; }
.checkout-modal .btn-outline:hover { border-color: #1f6fb8; color: #1f6fb8; }
.checkout-modal .close-x { color: #556070; }
.checkout-modal .close-x:hover { color: #14181f; }
.checkout-modal .check-icon { background: rgba(29, 122, 77, 0.12); color: #1d7a4d; }
.checkout-modal .form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.checkout-modal .form-field { min-width: 0; }
.checkout-modal .form-field input, .checkout-modal .form-field select, .checkout-modal .form-field textarea { width: 100%; box-sizing: border-box; min-width: 0; }
@media (max-width: 560px) { .checkout-modal { padding: 28px 20px; } .checkout-modal .form-row { grid-template-columns: minmax(0, 1fr); } }

/* ---- Stage builder ---- */
.store .stage-promo { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; padding: 12px 16px; background: #fff; border: 1px solid var(--s-border); border-left: 4px solid var(--s-accent); border-radius: var(--radius-sm); color: var(--s-text); }
.store .stage-promo[hidden] { display: none; }
.store .stage-promo span { color: var(--s-muted); font-size: 0.9rem; }
.store .stage-promo u { color: var(--s-accent); font-weight: 600; text-decoration: none; }
.store .stage-intro { color: var(--s-muted); margin: 0 0 18px; max-width: 60ch; }
.store .stage-builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.store .stage-controls, .store .stage-preview { background: #fff; border: 1px solid var(--s-border); border-radius: var(--radius-md); padding: 18px; min-width: 0; }
.store .stage-controls .form-field label { color: var(--s-muted); }
.store .stage-controls select { width: 100%; height: 42px; padding: 0 10px; font: inherit; color: var(--s-text); background: #fff; border: 1px solid var(--s-border); border-radius: var(--radius-sm); }
.store .stage-svg { width: 100%; height: auto; max-height: 340px; display: block; margin: 0 auto 12px; }
.store .stage-preview .detail-list { margin: 0 0 14px; }
@media (max-width: 800px) { .store .stage-builder { grid-template-columns: minmax(0, 1fr); } }
.store .stage-bigger { margin: 0 0 18px; padding: 12px 16px; background: #eaf3fc; border: 1px solid #b9d6f0; border-left: 4px solid var(--s-accent); border-radius: var(--radius-sm); color: var(--s-text); }
.store .stage-bigger strong { font-weight: 700; }
.store .stage-lectern { display: flex; align-items: center; gap: 10px; border: 1px solid var(--s-border); border-radius: var(--radius-sm); padding: 10px 14px; background: #fff; }

.row-also { margin: 2px 0 4px; font-weight: 600; color: var(--s-ink, #1b2330); font-size: .92em; }

/* Wider shop layout (desktop only); nav matches so edges line up */
@media (min-width: 981px) {
  .store .container { max-width: 1440px; padding: 0 32px; }
  body:has(.store) .nav { max-width: 1440px; padding: 16px 32px; }
  .store-grid { gap: 32px; }
}

/* Breathing room under the category list (desktop) */
@media (min-width: 781px) {
  .store-cats { padding-bottom: 48px; }
}

/* Short windows: let the category list scroll with the page so its bottom is never pinned to the screen edge */
@media (min-width: 781px) and (max-height: 820px) {
  .store-cats { position: static; }
}

.store .addon-link { color: var(--s-accent); font-weight: 600; text-decoration: none; }
.store .addon-link:hover { text-decoration: underline; }

/* Quote form: error message and spam trap */
.form-error { margin: 0 0 14px; padding: 10px 12px; border-left: 4px solid #c0392b; background: #fdecea; color: #7a1c12; font-size: 0.9rem; border-radius: 4px; }
.form-error[hidden] { display: none; }
.form-error a { color: inherit; text-decoration: underline; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }