/* Ganesh Chathurthi order form — embedded section (see index.html).
   Reverted 2026-08-25 back to "Botanical Elegance" (see
   docs/DESIGN-botanical-elegance.md) — the light cream/green system
   admin.html/reports.html/settings.html already use — undoing the
   "Heritage & Craft" dark emerald/gold redesign from 2026-08-24 (the
   user didn't like it). No git history and no pre-redesign Netlify
   deploy existed to restore verbatim, so this was rebuilt from the
   documented Botanical Elegance color/type spec plus the working
   reference already live in css/admin.css and js/tailwind-config.js —
   not a byte-for-byte restore, but the same documented system. Every
   selector below is unchanged from the dark version — only the values
   changed — so none of js/ganesh-chathurthi.js needed touching.
   Icons stay FontAwesome, same as before. */

html { scroll-behavior: smooth; }

/* Header/footer chrome — NOT scoped to #ganesh-chathurthi below, since
   .site-header lives outside that section as a page-level element. No
   override here at all now — back to the shared light-cream frosted
   header in css/header.css, same as every other page, since the page
   body below is light again too and needs no special treatment for the
   real Logo.PNG (which was the whole reason it got a dark override in
   the first place). */

#ganesh-chathurthi {
  --primary:         #2D5A43; /* Botanical Green — headings, icons, primary CTAs */
  --primary-dark:    #1A3326; /* Deep Forest — hover/pressed states */
  --primary-light:   #E8F3EE; /* Tertiary Green-White — subtle tints, hover bg */
  --secondary:       #F4C2C2; /* Soft Floral Pink — secondary buttons, placeholder bg */
  --secondary-bg:    #FCECEC; /* Petal Blush */
  --secondary-bg-hover: #f8d9d9;
  --surface-card:    #ffffff; /* card backgrounds (Level 1) */
  --surface-alt:     #F4F3F1; /* stepper pills, thumb placeholders, variant rows */
  --outline:         #b9c9c0;
  --outline-variant: #E8F3EE;
  --text:            #1a1c1a;
  --text-muted:      #414943;
  --error:           #ba1a1a;
  --error-bg:        #ffdad6;
  --limited:         #e8470c; /* warm orange-red "vibrant pop" for stock badges — unchanged, not theme-dependent */
  --on-primary:      #ffffff;
  --on-secondary:    #1A3326; /* Deep Forest text on the soft-pink secondary button, per DESIGN spec */
  --on-error:        #93000a;
  --font-serif: 'EB Garamond', Georgia, serif;
  --font-sans:  'Hanken Grotesk', sans-serif;
  --font-label: 'Hanken Grotesk', sans-serif;
}

#ganesh-chathurthi { font-family: var(--font-sans); color: var(--text); background: #FAF9F6; }

/* Page title — Botanical Green + italic. */
#ganesh-chathurthi .poe-title { color: var(--primary); font-style: italic; }

#ganesh-chathurthi button,
#ganesh-chathurthi .step-label,
#ganesh-chathurthi .prod-add-btn,
#ganesh-chathurthi .q-field label {
  font-family: var(--font-label);
}

/* ── WIZARD WRAPPER ─────────────────────────────── */
#ganesh-chathurthi .wizard-wrap { max-width: 1200px; margin: 12px auto 0; }

/* ── STEP PROGRESS ──────────────────────────────── */
#ganesh-chathurthi .quote-steps {
  display: flex; align-items: center;
  background: var(--surface-card); border: 1px solid var(--outline-variant);
  border-radius: 0.5rem 0.5rem 0 0; padding: 22px 24px 0;
}
#ganesh-chathurthi .quote-step-item { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; position: relative; cursor: pointer; }
#ganesh-chathurthi .quote-step-item.done { cursor: pointer; }
#ganesh-chathurthi .quote-step-item:not(.active):not(.done) { cursor: default; }
#ganesh-chathurthi .quote-step-item:not(:last-child)::after {
  content: ""; position: absolute; top: 14px; left: calc(50% + 14px); right: calc(-50% + 14px);
  height: 1px; background: var(--outline-variant);
}
#ganesh-chathurthi .quote-step-item.done:not(:last-child)::after { background: var(--primary); opacity: 0.4; }
#ganesh-chathurthi .step-bubble {
  width: 28px; height: 28px; border-radius: 50%; position: relative;
  background: var(--surface-alt); display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--text-muted); transition: all 0.25s; z-index: 1;
  border: 1px solid var(--outline-variant);
}
#ganesh-chathurthi .quote-step-item.active .step-bubble {
  background: var(--primary); color: var(--on-primary); border-color: var(--primary);
  box-shadow: 0 2px 10px rgba(45,90,67,0.35);
}
#ganesh-chathurthi .quote-step-item.done .step-bubble { background: var(--primary); border-color: var(--primary); color: transparent; }
#ganesh-chathurthi .quote-step-item.done .step-bubble::after {
  content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--on-primary); font-size: 14px; font-weight: 700;
}
#ganesh-chathurthi .step-label { font-size: 10px; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }
#ganesh-chathurthi .quote-step-item.active .step-label { color: var(--primary); font-weight: 700; }
#ganesh-chathurthi .quote-step-item.done .step-label { color: var(--text); }

/* ── PANEL CARD ─────────────────────────────────── */
#ganesh-chathurthi .quote-card { background: var(--surface-card); border: 1px solid var(--outline-variant); border-top: none; border-radius: 0 0 0.5rem 0.5rem; padding: 44px 48px 36px; }
#ganesh-chathurthi .quote-panel { display: none; }
#ganesh-chathurthi .quote-panel.active { display: block; }
#ganesh-chathurthi .quote-panel h4 { font-family: var(--font-serif); font-size: 27px; font-weight: 600; color: var(--primary); margin-bottom: 6px; }
#ganesh-chathurthi .quote-panel .panel-hint { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
#ganesh-chathurthi .step-quote { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; font-style: italic; }

/* ── FIELDS ─────────────────────────────────────── */
#ganesh-chathurthi .q-field-group { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
#ganesh-chathurthi .q-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#ganesh-chathurthi .q-field { display: flex; flex-direction: column; gap: 5px; }
#ganesh-chathurthi .q-field label { font-size: 11.5px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
#ganesh-chathurthi .q-field input, #ganesh-chathurthi .q-field select, #ganesh-chathurthi .q-field textarea {
  border: 1px solid var(--outline-variant); border-radius: 0.5rem; padding: 10px 14px; font-size: 14px;
  color: var(--text); background: #ffffff; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit; width: 100%; min-width: 0; max-width: 100%;
}
#ganesh-chathurthi .q-field input:focus, #ganesh-chathurthi .q-field select:focus, #ganesh-chathurthi .q-field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(45,90,67,0.12);
}
#ganesh-chathurthi .q-field input::placeholder, #ganesh-chathurthi .q-field textarea::placeholder { color: var(--text-muted); opacity: 0.7; }
#ganesh-chathurthi .q-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ── CUSTOM DATE PICKER ──────────────────────────── */
#ganesh-chathurthi .q-datepicker { position: relative; }
#ganesh-chathurthi .q-date-trigger {
  border: 1px solid var(--outline-variant); border-radius: 0.5rem; padding: 10px 14px; font-size: 14px;
  color: var(--text); background: #ffffff; width: 100%; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#ganesh-chathurthi .q-date-trigger .placeholder { color: var(--text-muted); }
#ganesh-chathurthi .q-date-trigger:focus, #ganesh-chathurthi .q-date-trigger.open {
  border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 3px rgba(45,90,67,0.12);
}
#ganesh-chathurthi .q-date-trigger i { color: var(--primary); font-size: 15px; }
#ganesh-chathurthi .q-date-panel {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  width: 280px; max-width: 90vw; background: #ffffff; border: 1px solid var(--outline-variant); border-radius: 0.5rem;
  padding: 14px; box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}
#ganesh-chathurthi .q-date-panel.open { display: block; }
#ganesh-chathurthi .q-date-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 700; color: var(--primary); margin-bottom: 10px;
}
#ganesh-chathurthi .q-date-nav {
  background: none; border: none; font-size: 18px; line-height: 1; color: var(--primary);
  cursor: pointer; padding: 2px 10px; border-radius: 0.5rem;
}
#ganesh-chathurthi .q-date-nav:hover { background: var(--primary-light); }
#ganesh-chathurthi .q-date-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); font-size: 10px; color: var(--text-muted);
  text-transform: uppercase; text-align: center; margin-bottom: 4px;
}
#ganesh-chathurthi .q-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
#ganesh-chathurthi .q-date-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; color: var(--text); border-radius: 0.5rem; cursor: pointer;
}
#ganesh-chathurthi .q-date-cell:hover:not(.disabled):not(.empty) { background: var(--primary-light); }
#ganesh-chathurthi .q-date-cell.empty { visibility: hidden; cursor: default; }
#ganesh-chathurthi .q-date-cell.disabled { color: var(--outline); cursor: not-allowed; }
#ganesh-chathurthi .q-date-cell.blocked { text-decoration: line-through; text-decoration-color: var(--error); }
#ganesh-chathurthi .q-date-cell.today:not(.selected) { box-shadow: inset 0 0 0 1.5px var(--primary); }
#ganesh-chathurthi .q-date-cell.batch-open:not(.selected) { background: #fdf0cf; border: 1.5px solid #e0a91c; font-weight: 600; color: #4a3a00; }
#ganesh-chathurthi .q-date-cell.batch-open:not(.selected):hover { background: #fbe3a8; }
#ganesh-chathurthi .q-date-cell.selected { background: var(--primary); color: var(--on-primary); font-weight: 700; }
#ganesh-chathurthi .q-required { color: var(--error); font-weight: 700; }
#ganesh-chathurthi .q-intro-note {
  background: var(--primary-light); border: 1.5px solid var(--outline-variant); border-radius: 0.5rem;
  padding: 12px 14px; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); margin-bottom: 18px;
}
#ganesh-chathurthi .q-intro-note strong { color: var(--primary); }

/* ── CONTACT METHOD TILES ───────────────────────── */
#ganesh-chathurthi .q-method-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#ganesh-chathurthi .q-method-tile {
  border: 1.5px solid var(--outline-variant); border-radius: 0.5rem; padding: 12px; text-align: center;
  cursor: pointer; background: var(--surface-card); transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px;
}
#ganesh-chathurthi .q-method-tile:hover { border-color: var(--primary); }
#ganesh-chathurthi .q-method-tile.selected { border-color: var(--primary); background: var(--primary-light); }
#ganesh-chathurthi .q-method-tile i { font-size: 15px; color: var(--primary); }
#ganesh-chathurthi .q-method-tile span { font-size: 13px; font-weight: 600; }

/* ── PRODUCT CATALOG ────────────────────────────── */
/* Plain stacked card — image on top, content below, no overlap. Card
   structure in the DOM (.prod-img / .prod-card-body as plain siblings)
   is unchanged from before; this is just simpler, non-overlapping CSS
   for them, matching the documented spec's "Level 1" card treatment
   rather than the dark redesign's overlapping-panel mockup look. */
#ganesh-chathurthi .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px 18px; }
#ganesh-chathurthi .prod-card {
  border: 1px solid var(--outline-variant); border-radius: 1rem;
  background: var(--surface-card); transition: box-shadow 0.2s, border-color 0.2s; position: relative; cursor: pointer;
  overflow: hidden;
}
#ganesh-chathurthi .prod-card:hover { box-shadow: 0 8px 24px rgba(45,90,67,0.12); }
#ganesh-chathurthi .prod-card.in-cart { border-color: var(--primary); }
#ganesh-chathurthi .prod-img {
  width: 100%; aspect-ratio: 4 / 5; background: var(--secondary);
  display: flex; align-items: center; justify-content: center; font-size: 36px; position: relative;
  overflow: hidden;
}
#ganesh-chathurthi .prod-img img { width: 100%; height: 100%; object-fit: cover; }
#ganesh-chathurthi .prod-card-body { padding: 16px 18px 18px; text-align: left; position: relative; }
#ganesh-chathurthi .prod-name-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--outline-variant);
}
#ganesh-chathurthi .prod-name { font-family: var(--font-serif); font-size: 17px; font-weight: 600; color: var(--text); }
#ganesh-chathurthi .prod-price { font-size: 13.5px; font-weight: 700; color: var(--primary); white-space: nowrap; font-family: var(--font-label); letter-spacing: 0.02em; }
#ganesh-chathurthi .prod-unit { font-size: 11px; color: var(--primary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-label); }
#ganesh-chathurthi .prod-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: 2px 0 8px; font-style: italic; }
#ganesh-chathurthi .prod-cart-badge {
  position: absolute; top: 8px; right: 8px; z-index: 2; background: var(--primary); color: var(--on-primary);
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; display: none;
}
#ganesh-chathurthi .prod-card.in-cart .prod-cart-badge { display: block; }

#ganesh-chathurthi .prod-stock-badge {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: var(--limited); color: #fff;
  text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 0.01em; padding: 5px 8px;
  box-shadow: 0 -2px 8px rgba(232,71,12,0.3);
  animation: poe-stock-pulse 1.8s ease-in-out infinite, poe-stock-jiggle 3s ease-in-out infinite;
}
#ganesh-chathurthi .prod-stock-badge.depleted {
  background: var(--outline); color: var(--text-muted); box-shadow: none; animation: none;
}
@keyframes poe-stock-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,71,12,0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(232,71,12,0); }
}
@keyframes poe-stock-jiggle {
  0%, 80%, 100% { transform: translateX(0); }
  83%  { transform: translateX(-4px); }
  86%  { transform: translateX(4px); }
  89%  { transform: translateX(-3px); }
  92%  { transform: translateX(2px); }
  95%  { transform: translateX(-1px); }
  98%  { transform: translateX(0); }
}

#ganesh-chathurthi .prod-actions-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
#ganesh-chathurthi .prod-stepper { display: none; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface-alt); border-radius: 0.5rem; padding: 4px 6px; }
#ganesh-chathurthi .prod-card.expanded .prod-stepper { display: flex; }
#ganesh-chathurthi .qty-btn {
  width: 26px; height: 26px; border-radius: 50%; border: none;
  background: transparent; color: var(--primary); font-size: 16px; font-weight: 700; cursor: pointer; line-height: 1;
}
#ganesh-chathurthi .qty-btn:hover { background: var(--primary-light); }
#ganesh-chathurthi .qty-btn:disabled { color: var(--outline); cursor: not-allowed; background: none; }
#ganesh-chathurthi .qty-val { font-size: 14px; font-weight: 700; min-width: 18px; text-align: center; color: var(--text); }
#ganesh-chathurthi .prod-tap-hint { font-size: 10.5px; color: var(--text-muted); margin-top: 6px; }
/* Secondary button — Soft Pink with Deep Forest text, per DESIGN spec's
   Components section ("Secondary buttons use the Soft Pink with Deep
   Forest text"). Filled solid green once actually added. */
#ganesh-chathurthi .prod-add-btn {
  display: none; border: none; background: var(--secondary); color: var(--on-secondary);
  border-radius: 0.5rem; padding: 8px 20px; font-size: 11px; font-weight: 700; cursor: pointer;
  white-space: nowrap; transition: background 0.2s, color 0.2s; text-transform: uppercase; letter-spacing: 0.08em;
}
#ganesh-chathurthi .prod-add-btn:hover:not(:disabled) { background: #eeb3b3; }
#ganesh-chathurthi .prod-add-btn.added { background: var(--primary); color: var(--on-primary); }
#ganesh-chathurthi .prod-add-btn:disabled { background: var(--surface-alt); color: var(--outline); cursor: not-allowed; }
#ganesh-chathurthi .prod-card.prod-contact { cursor: default; }
#ganesh-chathurthi .prod-card.prod-contact .prod-name-row { flex-wrap: wrap; }
#ganesh-chathurthi .prod-card.prod-contact .prod-price { color: var(--primary); font-size: 11.5px; font-weight: 600; line-height: 1.3; white-space: normal; flex: 1 1 100%; }

#ganesh-chathurthi .prod-variant-list { display: none; flex-direction: column; gap: 8px; margin-top: 8px; text-align: left; }
#ganesh-chathurthi .prod-card.expanded .prod-variant-list { display: flex; }
#ganesh-chathurthi .variant-row {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  border: 1px solid var(--outline-variant); border-radius: 0.5rem; padding: 6px 8px; background: var(--surface-alt);
}
#ganesh-chathurthi .variant-label { font-size: 11.5px; font-weight: 600; color: var(--text); }
#ganesh-chathurthi .variant-row .prod-stepper { display: flex; margin-top: 0; gap: 6px; background: transparent; padding: 0; }
#ganesh-chathurthi .variant-row .qty-btn { width: 22px; height: 22px; font-size: 13px; }
#ganesh-chathurthi .variant-row .qty-val { font-size: 12.5px; min-width: 14px; }
/* Pill-shaped, light Botanical Green bg + dark green text — the
   "Chips/Tags" treatment from the DESIGN spec. */
#ganesh-chathurthi .variant-stock-badge {
  display: inline-block; margin-left: 6px; background: var(--limited); color: #fff;
  font-size: 9.5px; font-weight: 800; border-radius: 999px; padding: 2px 7px; vertical-align: middle;
}
#ganesh-chathurthi .variant-stock-badge.depleted { background: var(--outline-variant); color: var(--text-muted); }

#ganesh-chathurthi .prod-card-oos .prod-img { filter: grayscale(65%); opacity: 0.7; }
#ganesh-chathurthi .prod-card-oos .prod-name,
#ganesh-chathurthi .prod-card-oos .prod-price { color: var(--text-muted); }
#ganesh-chathurthi .prod-oos-badge {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: var(--error); color: #fff;
  text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 0.03em; padding: 5px 8px;
  text-transform: uppercase;
}
#ganesh-chathurthi .variant-row-oos { opacity: 0.6; }
#ganesh-chathurthi .variant-row-oos .variant-label { text-decoration: line-through; text-decoration-color: var(--text-muted); }
#ganesh-chathurthi .variant-oos-badge {
  display: inline-block; margin-left: 6px; background: var(--error); color: #fff;
  font-size: 9.5px; font-weight: 800; border-radius: 0.5rem; padding: 2px 7px; vertical-align: middle;
  text-decoration: none; text-transform: uppercase;
}

/* ── ORDER SUMMARY ──────────────────────────────── */
#ganesh-chathurthi .order-summary {
  margin-top: 26px; border: 1px solid var(--outline-variant); border-radius: 0.5rem; overflow: hidden; background: var(--surface-card);
}
#ganesh-chathurthi .order-summary-title {
  background: var(--primary); color: var(--on-primary); font-family: var(--font-serif); font-size: 16px; font-weight: 600;
  letter-spacing: 0.02em; padding: 12px 18px;
}
#ganesh-chathurthi .order-list { padding: 4px 18px; }
#ganesh-chathurthi .order-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--outline-variant); }
#ganesh-chathurthi .order-row:last-child { border-bottom: none; }
#ganesh-chathurthi .order-row-thumb {
  width: 48px; height: 48px; border-radius: 0.6rem; overflow: hidden; background: var(--secondary);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px;
}
#ganesh-chathurthi .order-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
#ganesh-chathurthi .order-row-body { flex: 1; min-width: 0; }
#ganesh-chathurthi .order-row-name { font-family: var(--font-serif); font-size: 14.5px; font-weight: 600; color: var(--text); }
#ganesh-chathurthi .order-row-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
#ganesh-chathurthi .order-row-amount { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; }
#ganesh-chathurthi .order-empty-row { text-align: center; color: var(--text-muted); padding: 24px 0; font-style: italic; }
#ganesh-chathurthi .order-total-row {
  display: flex; justify-content: space-between; align-items: center; padding: 14px 18px;
  border-top: 2px solid var(--text); font-weight: 700; font-size: 15px;
}
/* ── REVIEW STEP ─────────────────────────────────── */
#ganesh-chathurthi .review-block { border: 1px solid var(--outline-variant); border-radius: 0.5rem; padding: 14px 16px; margin-bottom: 14px; }
#ganesh-chathurthi .review-block h5 { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); margin-bottom: 8px; font-weight: 700; }
#ganesh-chathurthi .review-row { display: flex; justify-content: space-between; font-size: 13.5px; padding: 3px 0; }
#ganesh-chathurthi .review-row span:first-child { color: var(--text-muted); }
#ganesh-chathurthi .review-row span:last-child { font-weight: 600; text-align: right; }

/* ── CONFIRMATION ───────────────────────────────── */
#ganesh-chathurthi .quote-confirm { text-align: center; padding: 16px 0 8px; }
#ganesh-chathurthi .quote-confirm .confirm-icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--primary);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 30px; color: var(--on-primary);
}
#ganesh-chathurthi .quote-confirm h4 { font-family: var(--font-serif); font-size: 24px; color: var(--primary); margin-bottom: 8px; }
#ganesh-chathurthi .quote-confirm p { font-size: 14px; color: var(--text-muted); line-height: 1.6; max-width: 380px; margin: 0 auto; font-style: italic; }
#ganesh-chathurthi .quote-confirm .order-num-big { font-size: 22px; font-weight: 700; color: var(--text); margin: 14px 0; }
#ganesh-chathurthi #submitOrderBtn:disabled { opacity: 0.6; cursor: default; }
#ganesh-chathurthi .confirm-info-block {
  margin: 26px auto 0; max-width: 380px; text-align: left; background: var(--primary-light);
  border: 1.5px solid var(--outline-variant); border-radius: 0.5rem; padding: 16px 18px;
}
#ganesh-chathurthi .confirm-info-block p { font-size: 13px; color: var(--text-muted); line-height: 1.6; max-width: none; margin: 0 0 10px; }
#ganesh-chathurthi .confirm-info-block p:last-of-type { margin-bottom: 8px; }
#ganesh-chathurthi .confirm-info-title { font-weight: 700; color: var(--primary); }
#ganesh-chathurthi .confirm-links { display: flex; flex-direction: column; gap: 8px; }
#ganesh-chathurthi .confirm-links a {
  display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600;
  color: var(--primary); text-decoration: none;
}
#ganesh-chathurthi .confirm-links a:hover { text-decoration: underline; }
#ganesh-chathurthi .confirm-links i { font-size: 14px; }

/* ── CELEBRATION OVERLAY ────────────────────────── */
#ganesh-chathurthi .celebration-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(26,51,38,0.45);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
  overflow: hidden;
}
#ganesh-chathurthi .celebration-overlay.show { opacity: 1; pointer-events: auto; }
#ganesh-chathurthi .celebration-card {
  background: var(--surface-card); border: 1px solid var(--primary); border-radius: 0.5rem;
  padding: 36px 32px; text-align: center; max-width: 320px;
  transform: scale(0.7); transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
#ganesh-chathurthi .celebration-overlay.show .celebration-card { transform: scale(1); }
#ganesh-chathurthi .celebration-card .celebration-icon {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary); display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px; font-size: 32px;
  animation: poe-celebrate-pop 0.5s cubic-bezier(.34,1.56,.64,1) 0.1s both;
}
#ganesh-chathurthi .celebration-card h4 { font-family: var(--font-serif); font-size: 20px; color: var(--primary); margin-bottom: 6px; }
#ganesh-chathurthi .celebration-card p  { font-size: 13px; color: var(--text-muted); font-style: italic; }
@keyframes poe-celebrate-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
#ganesh-chathurthi .confetti-piece {
  position: absolute; top: -10px; width: 8px; height: 14px;
  opacity: 0; animation: poe-confetti-fall 1.4s ease-in forwards;
}
@keyframes poe-confetti-fall {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0.9; transform: translateY(100vh) rotate(540deg); }
}

/* ── ERROR MODAL ─────────────────────────────────── */
#ganesh-chathurthi .error-overlay {
  position: fixed; inset: 0; z-index: 210; background: rgba(26,51,38,0.45);
  display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease; padding: 20px;
}
#ganesh-chathurthi .error-overlay.show { opacity: 1; pointer-events: auto; }
#ganesh-chathurthi .error-card {
  background: var(--surface-card); border: 1px solid var(--error); border-radius: 0.5rem; padding: 32px 28px;
  text-align: center; max-width: 340px; transform: scale(0.8); transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
#ganesh-chathurthi .error-overlay.show .error-card { transform: scale(1); }
#ganesh-chathurthi .error-card .error-icon {
  width: 60px; height: 60px; border-radius: 50%; background: var(--error-bg); border: 1px solid var(--error);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 28px; color: var(--error);
}
#ganesh-chathurthi .error-card h4 { font-family: var(--font-serif); font-size: 19px; color: var(--error); margin-bottom: 8px; }
#ganesh-chathurthi .error-card p { font-size: 14px; color: var(--text-muted); line-height: 1.55; margin-bottom: 20px; }
#ganesh-chathurthi .error-card button {
  background: var(--error); color: #fff; border: none; border-radius: 0.5rem; padding: 10px 28px;
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--font-label);
}
#ganesh-chathurthi .error-card button:hover { background: #93000a; }

/* ── WIZARD FOOTER ──────────────────────────────── */
#ganesh-chathurthi .quote-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
#ganesh-chathurthi .btn-q-back {
  background: transparent; border: 1px solid var(--outline-variant); color: var(--text-muted);
  padding: 12px 26px; border-radius: 0.5rem; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s;
  text-transform: uppercase; letter-spacing: 0.06em;
}
#ganesh-chathurthi .btn-q-back:hover { border-color: var(--primary); color: var(--primary); }
#ganesh-chathurthi .btn-q-back:disabled { opacity: 0.35; cursor: default; }
/* Solid Botanical Green "NEXT STEP" CTA — the DESIGN spec's Primary
   button treatment. */
#ganesh-chathurthi .btn-q-next {
  background: var(--primary); border: 1px solid var(--primary); color: var(--on-primary);
  padding: 12px 32px; border-radius: 0.5rem; font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.2s;
  text-transform: uppercase; letter-spacing: 0.06em;
}
#ganesh-chathurthi .btn-q-next:hover { background: var(--primary-dark); }
#ganesh-chathurthi .btn-q-next:disabled { opacity: 0.5; cursor: default; }

/* ── Festival countdown banner ─────────────────────
   A slim announcement strip above the wizard, only shown while
   renderFestivalCountdown() (js/ganesh-chathurthi.js) has a real future
   date to count down to — set from settings.html, defaults to hidden
   (inline style="display:none" in index.html) so there's never a flash
   of empty/wrong content before the real date loads. */
.festival-countdown-banner {
  background: linear-gradient(90deg, var(--secondary-bg), var(--primary-light));
  color: var(--primary-dark);
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-bottom: 1px solid var(--outline-variant);
}
.festival-countdown-banner strong { color: var(--primary); }

/* ── Share with a friend ───────────────────────────
   Sits right under the page intro — deliberately quiet (a bordered
   pill, not a filled button) so it doesn't compete with the actual
   "start your order" flow below it, but it's still an obvious,
   one-tap action for someone who already likes what they see. */
.share-friend-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 7px 16px;
  border: 1px solid var(--outline);
  border-radius: 999px;
  background: var(--surface-card);
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.share-friend-btn:hover { background: var(--primary-light); border-color: var(--primary); }
.share-friend-btn i { font-size: 12px; }

/* ── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 640px) {
  #ganesh-chathurthi .quote-card { padding: 22px 16px 18px; }
  #ganesh-chathurthi .q-row-2 { grid-template-columns: 1fr; }
  #ganesh-chathurthi .q-field input, #ganesh-chathurthi .q-field select, #ganesh-chathurthi .q-field textarea { font-size: 16px; }
  #ganesh-chathurthi .step-label { display: none; }

  #ganesh-chathurthi .cat-grid { grid-template-columns: 1fr; gap: 14px; }
  #ganesh-chathurthi .prod-img { aspect-ratio: 16 / 10; }
  #ganesh-chathurthi .prod-stepper { display: flex !important; }
  #ganesh-chathurthi .prod-add-btn { display: inline-flex; align-items: center; justify-content: center; }
  #ganesh-chathurthi .prod-tap-hint { display: none; }
  #ganesh-chathurthi .prod-variant-list { display: flex !important; }
  #ganesh-chathurthi .order-row-thumb { width: 40px; height: 40px; }
  #ganesh-chathurthi .order-row-name { font-size: 13.5px; }
  #ganesh-chathurthi .order-row-meta { font-size: 10.5px; }
}