/* ═══════════════════════════════════════
   1. FONTS
   @font-face GoudyTitling regular + bold
═══════════════════════════════════════ */

@font-face {
  font-family: 'TrajanPro';
  font-weight: 400;
  font-style: normal;
  src: url('shared/fonts/TrajanPro-Regular.woff2') format('woff2'),
       url('shared/fonts/TrajanPro-Regular.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'TrajanPro';
  font-weight: 700;
  font-style: normal;
  src: url('shared/fonts/TrajanPro-Bold.woff2') format('woff2'),
       url('shared/fonts/TrajanPro-Bold.otf') format('opentype');
  font-display: swap;
}

/* ═══════════════════════════════════════
   2. DESIGN TOKENS
   :root — all CSS variables
   --shell-white, --pearl, --silver,
   --abalone, --text, --sand etc.
═══════════════════════════════════════ */

:root {
  --gold: #b8963e;
  --gold-light: #d4af6a;
  --dark: #1a1612;
  --charcoal: #2d2820;
  --cream: #f8f4ee;
  --warm-white: #fdfaf6;
  --border: #ddd5c4;
  --text: #3a3028;
  --muted: #8a7d6e;
  --available: #4a7c59;
  --warning: #c0392b;
  --warning-bg: #fdf0ee;
  --warning-border: #e8b4ae;
  --abalone:       #7ba7a0;
  --abalone-hover: #5d8f8a;
  --silver:        #a8b4be;
  --silver-light:  #d4dde3;
  --text-on-dark:  rgba(253,252,250,0.95);
  --muted-on-dark: rgba(168,180,190,0.65);
}

/* ═══════════════════════════════════════
   3. RESET & BASE
   *, html, body
═══════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Josefin Sans', sans-serif; background: var(--cream); color: var(--text); font-size: 13px; }
h2 { font-family: 'TrajanPro', 'Palatino Linotype', serif; }
*::before, *::after { box-sizing: border-box; }

/* ═══════════════════════════════════════
   4. TYPOGRAPHY
   headings, taglines, labels, ornaments
═══════════════════════════════════════ */

/* ── LOGO ORNAMENT & WORDMARK ── */
.logo-ornament {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
  gap: 0;
}
.orn-line {
  height: 1px; width: 48px;
  background: linear-gradient(to right, transparent, rgba(168,180,190,0.45));
}
.orn-line.r {
  background: linear-gradient(to left, transparent, rgba(168,180,190,0.45));
}
.orn-diamond {
  width: 7px; height: 7px;
  border: 1px solid rgba(168,180,190,0.5);
  transform: rotate(45deg);
  margin: 0 16px;
  flex-shrink: 0;
}

.logo-name {
  font-family: 'TrajanPro', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  font-size: clamp(30px, 4.8vw, 56px);
  font-weight: 400;
  letter-spacing: 0.24em;
  color: rgba(253,252,250,0.97);
  text-transform: uppercase;
  line-height: 1;
}

.logo-rule {
  width: min(300px, 80%);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(168,180,190,0.32), transparent);
  margin: 20px auto;
}

.logo-tagline {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.36em;
  color: rgba(168,180,190,0.6);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════
   5. LAYOUT
   .page, .container, .header,
   .customer-bar, .filter-bar
═══════════════════════════════════════ */

/* ── HEADER ── */
.header {
  background: var(--dark); color: var(--cream);
  padding: 36px 48px 28px;
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 2px solid var(--gold);
}
.header-left h1 { font-family: 'TrajanPro', 'Palatino Linotype', serif !important; font-size: 38px; font-weight: 300; letter-spacing: 3px; color: var(--gold-light); }
.header-left .subtitle { font-size: 10px; letter-spacing: 4px; color: var(--muted); margin-top: 4px; text-transform: uppercase; white-space: nowrap; }
.header-right { text-align: right; font-family: 'TrajanPro', 'Palatino Linotype', serif; font-size: 11px; color: #ffffff; line-height: 1.4; letter-spacing: 1px; }
.header-right strong { color: var(--cream); display: block; font-size: 12px; letter-spacing: 2px; margin-bottom: 4px; }

/* ── CUSTOMER BAR ── */
.customer-bar {
  background: var(--warm-white); border-bottom: 1px solid var(--border);
  padding: 20px 48px; display: flex; gap: 32px; align-items: flex-end; flex-wrap: wrap;
}
.customer-bar label { font-size: 10px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; display: block; margin-bottom: 5px; }
.customer-bar input[type="text"] {
  border: none; border-bottom: 1px solid var(--border); background: transparent;
  font-family: 'Josefin Sans', sans-serif; font-size: 13px; padding: 4px 0;
  color: var(--text); width: 180px; outline: none;
}
.customer-bar input:focus { border-bottom-color: var(--gold); }
.date-field { margin-left: auto; font-size: 11px; color: var(--muted); letter-spacing: 1px; }

/* ── MAIN ── */
.container { padding: 0 24px 20px; width: 100%; max-width: 100%; box-sizing: border-box; }
.category-section { margin-top: 36px; overflow-x: auto; }
.category-section > .category-header,
.category-section > table { min-width: 1200px; }
.category-header {
  background: var(--charcoal); color: var(--gold-light);
  padding: 12px 20px;
  font-family: 'TrajanPro', 'Palatino Linotype', serif;
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; box-sizing: border-box;
}
.category-header .cat-totals { font-size: 11px; color: var(--muted); letter-spacing: 1px; }
.category-header span { font-family: 'TrajanPro', 'Palatino Linotype', serif; }

/* ── NOTES ── */
.notes-section { background: var(--warm-white); border: 1px solid var(--border); margin: 0 48px 30px; padding: 24px; }
.notes-section label { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 10px; }
.notes-section textarea { width: 100%; border: none; border-bottom: 1px solid var(--border); background: transparent; font-family: 'Cormorant Garamond', serif; font-size: 15px; color: var(--text); resize: none; outline: none; height: 60px; line-height: 1.6; }

/* ── ACTION BAR ── */
.action-bar { padding: 0 48px 50px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn { font-family: 'Josefin Sans', sans-serif; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; padding: 14px 36px; cursor: pointer; border-radius: 2px; transition: all 0.2s; }
.btn-primary { background: var(--gold); color: white; border: none; }
.btn-primary:hover { background: var(--gold-light); }
.btn-secondary { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.btn-secondary:hover { background: var(--gold); color: white; }
.btn-email { background: var(--dark); color: var(--gold-light); border: 1px solid var(--gold); }
.btn-email:hover { background: var(--charcoal); }

/* ── VALIDATION BANNER ── */
.validation-banner {
  display: none; margin: 0 48px 20px; padding: 16px 24px;
  background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: 2px;
  color: var(--warning); font-size: 11px; letter-spacing: 1px;
}
.validation-banner.visible { display: block; }

/* ── LOGIN PAGE LAYOUT ── */
.page {
  position: relative; z-index: 10;
  height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 24px;
  gap: 0;
}

.connector {
  width: 1px; height: 38px;
  background: linear-gradient(to bottom, rgba(168,180,190,0.35) 0%, rgba(168,180,190,0) 100%);
  margin: 38px 0 36px;
  opacity: 0;
  animation: fadeIn 0.5s ease 1.0s forwards;
}

.page-footer {
  position: fixed; bottom: 26px; left: 0; right: 0;
  text-align: center;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 9px; font-weight: 300;
  letter-spacing: 0.24em;
  color: rgba(168,180,190,0.3);
  text-transform: uppercase;
  opacity: 0;
  animation: fadeIn 0.8s ease 1.5s forwards;
}

/* ═══════════════════════════════════════
   6. OCEAN BACKGROUND (Login)
   .ocean, .ocean-base, .ocean-pools,
   .ocean-shimmer, .ocean-vignette,
   .ocean-grain + @keyframes
═══════════════════════════════════════ */

/* Login page full-screen body setup */
html, body {
  height: 100%; overflow: hidden;
  margin: 0; padding: 0;
  font-family: 'Josefin Sans', sans-serif;
  background: #061820;
  color: var(--text-on-dark);
}

/* ── OCEAN SCENE — simulates drone video bg ── */
.ocean {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
}

/* Deep volcanic ocean base */
.ocean-base {
  position: absolute; inset: -5%;
  background: linear-gradient(
    168deg,
    #040d14 0%,
    #07202e 28%,
    #0d3c4a 55%,
    #092632 78%,
    #040c12 100%
  );
  animation: slowPan 32s ease-in-out infinite alternate;
}

/* Reef light pools — shifting light through water */
.ocean-pools {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 95% 70% at 38% 36%, rgba(18,74,92,0.68) 0%, transparent 62%),
    radial-gradient(ellipse 65% 85% at 74% 70%, rgba(12,52,66,0.52) 0%, transparent 58%),
    radial-gradient(ellipse 45% 38% at 12% 82%, rgba(6,28,36,0.75) 0%, transparent 48%);
  animation: poolDrift 22s ease-in-out infinite alternate;
}

/* Abalone iridescence — faint teal shimmer */
.ocean-shimmer {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 42% 32% at 60% 26%, rgba(123,167,160,0.10) 0%, transparent 100%),
    radial-gradient(ellipse 28% 42% at 26% 70%, rgba(100,152,148,0.07) 0%, transparent 100%);
  mix-blend-mode: screen;
  animation: shimmerBreathe 14s ease-in-out infinite alternate;
}

/* Edge vignette — deepens corners like real ocean footage */
.ocean-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(
    ellipse 88% 88% at 50% 48%,
    transparent 32%,
    rgba(2,7,12,0.72) 100%
  );
}

/* Film grain — very subtle, adds tactile depth */
.ocean-grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.76' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════
   7. LOGIN FORM
   .login-form, .enter-btn,
   .form-error, .connector
═══════════════════════════════════════ */

.logo-block {
  text-align: center;
  opacity: 0;
  animation: logoIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

@keyframes logoIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-form {
  width: 100%; max-width: 310px;
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform: translateY(20px);
  animation: riseIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}

.login-form input {
  display: block; width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(168,180,190,0.26);
  padding: 14px 18px;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px; font-weight: 300;
  letter-spacing: 0.14em;
  color: rgba(253,252,250,0.92);
  outline: none;
  transition: border-color 0.22s, background 0.22s;
  -webkit-appearance: none; border-radius: 0;
}
.login-form input::placeholder {
  color: rgba(168,180,190,0.42);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10px;
}
.login-form input:focus {
  border-color: rgba(123,167,160,0.6);
  background: rgba(123,167,160,0.06);
}

.enter-btn {
  display: block; width: 100%;
  margin-top: 4px;
  padding: 15px 18px;
  background: var(--abalone);
  border: none; border-radius: 0;
  color: #fdfcfa;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 10.5px; font-weight: 400;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  -webkit-appearance: none;
}
.enter-btn:hover:not(.loading) { background: var(--abalone-hover); }
.enter-btn:active:not(.loading) { transform: scale(0.99); }
.enter-btn.loading {
  background: rgba(123,167,160,0.5);
  cursor: default; pointer-events: none;
  letter-spacing: 0.28em;
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.form-error {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: rgba(220,120,100,0.85);
  text-align: center;
  height: 14px;
  transition: opacity 0.2s;
}
.form-error.hidden { opacity: 0; }

/* ═══════════════════════════════════════
   8. PRODUCT GRID & CARDS
   .product-grid, .product-card,
   .thumb-main, .thumb-swatches,
   .stock-badge, .style-num
═══════════════════════════════════════ */

table { width: 100%; border-collapse: collapse; background: var(--warm-white); }
thead th {
  background: #f0ebe2; padding: 10px 14px; font-size: 9px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--muted); text-align: left;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
thead th.num { text-align: right; }
thead th:nth-child(1)  { width: 90px; }
thead th:nth-child(2)  { width: 100px; }
thead th:nth-child(3)  { min-width: 280px; }
thead th:nth-child(4)  { width: 70px; }
thead th:nth-child(5)  { width: 60px; }
thead th:nth-child(6)  { width: 90px; }
thead th:nth-child(7)  { width: 90px; }
thead th:nth-child(8)  { width: 80px; }
thead th:nth-child(9)  { width: 100px; min-width: 100px; }
thead th:nth-child(10) { width: 100px; min-width: 100px; }
tbody tr { border-bottom: 1px solid #ede8df; transition: background 0.15s; }
tbody tr:hover { background: #f9f5ee; }
td { padding: 14px 14px; vertical-align: middle; }

.style-num { font-weight: 600; font-size: 11px; letter-spacing: 1px; color: var(--gold); white-space: nowrap; }
.item-desc { font-family: 'Cormorant Garamond', serif; font-size: 14px; font-style: italic; line-height: 1.5; color: var(--text); max-width: 300px; max-height: calc(1.5em * 4); overflow: hidden; }
.item-tag { font-size: 9px; letter-spacing: 1.5px; color: var(--muted); margin-top: 4px; text-transform: uppercase; }

.thumb-cell { width: 100px; padding: 8px 10px !important; text-align: center; }
.thumb-main { width: 80px; height: 80px; object-fit: cover; border-radius: 2px; border: 1px solid var(--border); display: block; cursor: zoom-in; }
.thumb-swatches { display: flex; gap: 3px; margin-top: 5px; justify-content: center; flex-wrap: wrap; }
.thumb-swatch { width: 26px; height: 26px; object-fit: cover; border-radius: 1px; border: 1px solid var(--border); cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.thumb-swatch:hover { border-color: var(--gold); transform: scale(1.15); }

.stock-badge {
  display: inline-block; background: #eef5f0; color: var(--available);
  border: 1px solid #c8dece; border-radius: 3px; padding: 6px 12px;
  font-size: 14px; font-weight: bold; white-space: nowrap; text-align: center; line-height: 1.2;
}
.stock-num { font-size: 18px; font-weight: bold; display: block; }
.stock-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; display: block; }

td.price { text-align: right; font-size: 15px; white-space: nowrap; }
td.price .wholesale { color: var(--text); font-weight: 600; }
td.price label { font-size: 8px; letter-spacing: 2px; color: var(--muted); display: block; text-transform: uppercase; margin-bottom: 3px; }
.silver-col { font-size: 11px; text-align: center; width: 70px; color: var(--muted); }
.col-sub { font-size: 8px; font-style: italic; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }

td.line-total { text-align: right; white-space: nowrap; }
.lt-wholesale { font-size: 13px; font-weight: 600; color: var(--text); }
.lt-retail { font-size: 11px; color: var(--muted); margin-top: 2px; }
.lt-label { font-size: 8px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; display: block; margin-bottom: 3px; }

.subtotal-row td {
  background: #f0ebe2; border-top: 2px solid var(--border);
  padding: 12px 14px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted);
}
.subtotal-row td.st-val { text-align: right; color: var(--text); font-weight: 600; }
.subtotal-row td.st-label { color: var(--gold); letter-spacing: 2px; }


/* ── WEIGHT COLUMN — hidden from customer views; data still calculates for email ── */
.weight-col { display: none; }

/* ═══════════════════════════════════════
   9. SIDE PANEL
   .side-panel, .panel-master-img,
   .panel-thumbs, .panel-thumb,
   .panel-details, .panel-close
═══════════════════════════════════════ */

/* ── LIGHTBOX ── */
#lightbox {
  display: none; position: fixed; inset: 0; z-index: 9000;
  background: rgba(20,16,12,0.88);
  align-items: center; justify-content: center;
  animation: lbFadeIn 0.2s ease;
}
#lightbox.open { display: flex; }
#lightbox-img {
  max-width: 80vw; max-height: 80vh;
  border-radius: 4px; border: 1px solid rgba(184,150,62,0.4);
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  display: block; object-fit: contain;
  animation: lbImgIn 0.2s ease;
}
#lightbox-close {
  position: absolute; top: 20px; right: 28px;
  font-size: 28px; line-height: 1; color: rgba(253,250,246,0.7);
  cursor: pointer; background: none; border: none;
  font-family: 'Josefin Sans', sans-serif; font-weight: 300;
  transition: color 0.15s;
}
#lightbox-close:hover { color: var(--gold-light); }


/* ═══════════════════════════════════════
   10. ORDER / QTY CONTROLS
   .qty-input, .qty-wrapper,
   .stock-warning, .over-stock
═══════════════════════════════════════ */

/* QTY INPUT */
td.qty-cell { text-align: center; position: relative; }
.qty-wrapper { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.qty-input {
  width: 60px; text-align: center; border: 1px solid var(--border); background: white;
  font-family: 'Josefin Sans', sans-serif; font-size: 14px; font-weight: 600;
  padding: 6px 4px; color: var(--text); outline: none; border-radius: 2px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.qty-input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(184,150,62,0.15); }
.qty-input.over-stock {
  border-color: var(--warning) !important;
  background: var(--warning-bg) !important;
  color: var(--warning) !important;
  box-shadow: 0 0 0 2px rgba(192,57,43,0.15) !important;
  animation: shake 0.3s ease;
}
.stock-warning {
  display: none; background: var(--warning-bg); border: 1px solid var(--warning-border);
  border-radius: 3px; padding: 4px 8px; font-size: 9px; letter-spacing: 1px;
  color: var(--warning); text-transform: uppercase; white-space: nowrap; text-align: center;
  animation: fadeIn 0.2s ease;
}
.stock-warning.visible { display: block; }

/* ═══════════════════════════════════════
   11. SUMMARY BAR (pinned bottom)
   .grand-total, .gt-block,
   .gt-label, .gt-value
═══════════════════════════════════════ */

/* ── GRAND TOTAL ── */
.grand-total {
  background: var(--dark); color: var(--cream); padding: 28px 48px;
  display: flex; justify-content: flex-end; gap: 60px; align-items: center;
  border-top: 2px solid var(--gold);
}
.gt-block { text-align: right; }
.gt-label { font-size: 9px; letter-spacing: 3px; color: var(--muted); text-transform: uppercase; margin-bottom: 6px; }
.gt-value { font-family: 'TrajanPro', 'Palatino Linotype', serif; font-size: 28px; font-weight: 300; color: var(--gold-light); letter-spacing: 1px; }
.gt-pieces .gt-value { color: var(--cream); }


/* ══════════════════════════════════════
   SUMMARY PAGE
══════════════════════════════════════ */
#summary-page { display: none; }
#summary-page.visible { display: block; }

.summary-header {
  background: var(--dark); color: var(--cream); padding: 36px 48px 28px;
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 2px solid var(--gold);
}
.summary-header h2 { font-family: 'TrajanPro', 'Palatino Linotype', serif; font-size: 32px; font-weight: 300; letter-spacing: 3px; color: var(--gold-light); }
.summary-header .summary-meta { text-align: right; font-size: 11px; color: #9a8d7e; line-height: 2; letter-spacing: 1px; }

.summary-customer-block {
  background: var(--warm-white); border-bottom: 1px solid var(--border);
  padding: 20px 48px; display: flex; gap: 48px; flex-wrap: wrap;
}
.scb-field label { font-size: 9px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; display: block; margin-bottom: 4px; }
.scb-field span { font-size: 14px; color: var(--text); font-family: 'Cormorant Garamond', serif; }

.summary-container { padding: 32px 48px; }
.summary-container h3 {
  font-family: 'Josefin Sans', sans-serif; font-size: 9px; letter-spacing: 4px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 16px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}

.summary-table { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
.summary-table th {
  background: #f0ebe2; padding: 10px 16px; font-size: 9px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--muted); text-align: left; border-bottom: 1px solid var(--border);
}
.summary-table th.r { text-align: right; }
.summary-table td { padding: 14px 16px; border-bottom: 1px solid #ede8df; vertical-align: top; }
.summary-table td.r { text-align: right; font-weight: 600; }
.summary-table .s-style { font-size: 11px; font-weight: 600; color: var(--gold); letter-spacing: 1px; }
.summary-table .s-desc { font-family: 'Cormorant Garamond', serif; font-size: 14px; font-style: italic; line-height: 1.4; }
.summary-table .s-qty { font-size: 16px; font-weight: 600; text-align: center; color: var(--text); }
.summary-table .cat-divider td { background: #f7f2ea; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); padding: 8px 16px; font-weight: 600; }
.summary-table .cat-subtotal td { background: #f0ebe2; font-size: 11px; letter-spacing: 1px; color: var(--muted); padding: 10px 16px; }
.summary-table .cat-subtotal td.r { color: var(--text); font-weight: 600; }

.summary-grand {
  background: var(--dark); padding: 28px 48px;
  display: flex; justify-content: flex-end; gap: 60px;
  border-top: 2px solid var(--gold);
}
.summary-grand .gt-block { text-align: right; }

.summary-notes { padding: 24px 48px; background: var(--warm-white); border-top: 1px solid var(--border); }
.summary-notes label { font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 8px; }
.summary-notes p { font-family: 'Cormorant Garamond', serif; font-size: 15px; line-height: 1.6; color: var(--text); min-height: 40px; }

.summary-footer { padding: 20px 48px 16px; text-align: center; font-size: 10px; letter-spacing: 2px; color: var(--muted); border-top: 1px solid var(--border); }

/* ═══════════════════════════════════════
   12. MOBILE — BOTTOM NAV
   .mobile-nav, .nav-icon,
   .bottom-sheet
═══════════════════════════════════════ */


/* ═══════════════════════════════════════
   13. FILTER PILLS & SEARCH
   .filter-pill, .filter-group,
   .filter-search-wrap
═══════════════════════════════════════ */

/* ── FILTER BAR ── */
#filter-bar {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding: 12px 48px; background: #f2ede4; border-bottom: 1px solid var(--border);
}
.filter-search-wrap input {
  font-family: 'Josefin Sans', sans-serif; font-size: 11px; letter-spacing: 1px;
  border: 1px solid var(--border); background: var(--warm-white);
  padding: 5px 12px; width: 220px; outline: none; color: var(--text);
}
.filter-search-wrap input:focus { border-color: var(--gold); }
.filter-search-wrap input::placeholder { color: var(--muted); }
.filter-groups { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.filter-group { display: flex; flex-wrap: wrap; gap: 5px; }
.filter-pill {
  font-family: 'Josefin Sans', sans-serif; font-size: 9px; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 3px 10px;
  border: 1px solid var(--border); background: var(--warm-white); color: var(--muted);
  cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}
.filter-pill:hover { border-color: var(--gold); color: var(--gold); }
.filter-pill.active { background: var(--gold); border-color: var(--gold); color: #fff; }
.filter-reset-btn {
  font-family: 'Josefin Sans', sans-serif; font-size: 9px; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 3px 10px;
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  cursor: pointer; transition: border-color 0.15s, color 0.15s; white-space: nowrap;
  align-self: flex-start; margin-top: 1px;
}
.filter-reset-btn:hover { border-color: var(--muted); color: var(--text); }

/* ═══════════════════════════════════════
   14. ANIMATIONS & KEYFRAMES
   all @keyframes collected here
═══════════════════════════════════════ */

@keyframes shake {
  0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)}
}
@keyframes fadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
@keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbImgIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes slowPan {
  0%   { transform: scale(1.04) translate(0%, 0%); }
  40%  { transform: scale(1.06) translate(-1.2%, 0.7%); }
  100% { transform: scale(1.04) translate(1.0%, -0.5%); }
}
@keyframes poolDrift {
  0%   { opacity: 0.85; transform: translate(0%, 0%) scale(1); }
  50%  { opacity: 1; }
  100% { opacity: 0.88; transform: translate(1.8%, 1.2%) scale(1.03); }
}
@keyframes shimmerBreathe {
  0%   { opacity: 0.5; }
  60%  { opacity: 1; }
  100% { opacity: 0.55; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════
   15. PRINT
   @media print overrides
═══════════════════════════════════════ */

/* ── PRINT ── */
@media print {
  .action-bar, .btn, #order-form-page { display: none !important; }
  #lightbox { display: none !important; }
  #summary-page { display: block !important; }
  body { background: white; }
  .summary-header { padding: 24px 32px 20px; }
  .summary-container { padding: 24px 32px; }
  .summary-customer-block { padding: 16px 32px; }
  .summary-grand { padding: 20px 32px; }
  .summary-notes { padding: 16px 32px; }
  @page { margin: 12mm; size: A4; }
  .summary-table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
}

/* ═══════════════════════════════════════
   16. RESPONSIVE
   @media (max-width: 768px)
═══════════════════════════════════════ */

/* ── MOBILE SAFETY NET ── */
@media (max-width: 768px) {
  /* Header — stack vertically, hide contact block */
  .header { flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 20px; }
  .header-right { display: none; }

  /* Customer bar — stack inputs */
  .customer-bar { flex-direction: column; gap: 16px; padding: 16px 20px; }
  .customer-bar input[type="text"] { width: 100%; box-sizing: border-box; }

  /* Order form table — horizontal scroll */
  .container { padding-bottom: 20px; }
  .container table { min-width: 900px; }

  /* Grand total bar — stack blocks */
  .grand-total { flex-direction: column; align-items: flex-start; gap: 20px; padding: 20px; }
  .gt-block { text-align: left; }

  /* Action bar — stack buttons full width */
  .action-bar { flex-direction: column; align-items: stretch; padding: 0 20px 40px; }
  .btn { text-align: center; width: 100%; box-sizing: border-box; }

  /* Notes — side margins reduced */
  .notes-section { margin: 0 12px 24px; }
}

/* ═══════════════════════════════════════
   APP LOADING PLACEHOLDER
═══════════════════════════════════════ */

.app-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  letter-spacing: .2em;
  color: #8a6e52;
  text-transform: uppercase;
}