/* ═══════════════════════════════════════════════════════════════
   CERTIVO — Digital Certificate Generator UI  (AAT-1)
   style.css — single shared stylesheet for all four pages.
   Design language: "the registrar's office" — parchment, deep
   green ink and gold foil, because the product IS certificates.
   The reusable .cert component is sized entirely in em units so
   one component renders at any scale (see section 12).
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────── 1. Design tokens ───────────────────────── */
:root {
  /* palette */
  --parchment: #f9f5ea;      /* page background                */
  --panel: #fffdf6;          /* raised surfaces                */
  --ink: #1d2a22;            /* primary text (green-black)     */
  --muted: #6d7268;          /* secondary text                 */
  --line: #e4dcc6;           /* hairlines                      */
  --green: #0e3b2e;          /* deep registry green            */
  --green-soft: #e7efe9;     /* green tint                     */
  --gold: #b8912f;           /* gold foil                      */
  --gold-hi: #e9cd7e;        /* gold highlight                 */
  --gold-lo: #8a6a1f;        /* gold shadow                    */
  --wax: #a33b2e;            /* wax-seal red (also errors)     */
  --ok: #1d7a4f;

  /* type */
  --font-ui: "Archivo", "Segoe UI", Arial, sans-serif;
  --font-cert: "Cormorant Garamond", Georgia, serif;
  --font-script: "Pinyon Script", cursive;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  /* geometry */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(29, 42, 34, 0.1);
  --shadow-lift: 0 18px 44px rgba(29, 42, 34, 0.16);
}

/* ───────────────────────── 2. Reset & base ───────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-ui);
  background: var(--parchment);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.container { width: min(1140px, 92%); margin-inline: auto; }

/* eyebrow: small caps flanked by a gold diamond — a nod to engraved labels */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-lo);
}
.eyebrow::before { content: "\2726"; color: var(--gold); font-size: 0.9em; } /* ✦ */

.section { padding: 92px 0; }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head h2, .page-head h1, .hero h1 {
  font-family: var(--font-ui);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-top: 10px; }
.section-head p { color: var(--muted); margin-top: 12px; }

/* double-rule divider — the certificate-border motif used between sections */
.rule {
  border: none;
  border-top: 3px double var(--gold);
  opacity: 0.55;
  width: min(1140px, 92%);
  margin: 0 auto;
}

/* ───────────────────────── 3. Buttons ───────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.82em 1.6em;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--green);
  color: var(--parchment);
  box-shadow: 0 8px 20px rgba(14, 59, 46, 0.3);
}
.btn-primary:hover { background: #145341; }
.btn-gold {
  background: linear-gradient(135deg, var(--gold-hi), var(--gold));
  color: #3a2c08;
  box-shadow: 0 8px 20px rgba(184, 145, 47, 0.35);
}
.btn-gold:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--parchment); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* ───────────────────────── 4. Navbar ───────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(249, 245, 234, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; }
.brand {
  font-weight: 800;
  font-size: 1.28rem;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.brand-mark {
  width: 27px; height: 27px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
  color: rgba(58, 44, 8, 0.85);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 2px 6px rgba(138, 106, 31, 0.4);
}
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a {
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--muted);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); border-bottom-color: var(--gold); }
.cart-link { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.cart-badge {
  min-width: 21px; height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--green);
  color: var(--parchment);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
}
.burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; }

/* ───────────────────────── 5. Hero ───────────────────────── */
.hero { padding: 80px 0 88px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 4.8vw, 3.4rem); margin-top: 16px; }
.hero h1 .accent {
  background: linear-gradient(120deg, var(--gold-lo), var(--gold), var(--gold-hi));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub { color: var(--muted); font-size: 1.08rem; max-width: 480px; margin-top: 18px; }
.hero-actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.hero-note { margin-top: 26px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.hero-note b { color: var(--ink); }

.hero-stage { position: relative; display: flex; justify-content: center; }
.hero-stage .cert { transform: rotate(-2deg); box-shadow: var(--shadow-lift); }
.float-chip {
  position: absolute;
  bottom: -14px;
  right: 6px;
  background: var(--green);
  color: var(--parchment);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 7px 12px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  transform: rotate(2deg);
}
@keyframes drift { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-7px); } }
.hero-stage .cert { animation: drift 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .hero-stage .cert { animation: none; }
  html { scroll-behavior: auto; }
}

/* ───────────────────────── 6. Generator (signature section) ───────────────────────── */
.generator {
  background: var(--panel);
  border-top: 1.5px solid var(--line);
  border-bottom: 1.5px solid var(--line);
}
.gen-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 36px;
  align-items: start;
}
.gen-panel {
  background: var(--parchment);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
}
.gen-panel h3 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-lo);
  padding-bottom: 12px;
  border-bottom: 3px double var(--gold);
  margin-bottom: 18px;
}
.gen-field { display: flex; flex-direction: column; margin-bottom: 14px; }
.gen-field label { font-size: 0.83rem; font-weight: 700; margin-bottom: 6px; }
.gen-field input, .gen-field select {
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 0.93rem;
}
.gen-field input:focus, .gen-field select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 145, 47, 0.18);
}
.template-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.tchip {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--muted);
  transition: all 0.15s ease;
}
.tchip:hover { border-color: var(--gold); color: var(--gold-lo); }
.tchip.active { background: var(--green); border-color: var(--green); color: var(--parchment); }

.gen-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.gen-preview-hint { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }

/* ───────────────────────── 7. Stats strip ───────────────────────── */
.stat-strip { background: var(--green); color: var(--parchment); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 44px 0; }
.stat-item { padding: 6px 28px; border-left: 1px solid rgba(249, 245, 234, 0.22); }
.stat-item:first-child { border-left: none; }
.stat-item b {
  display: block;
  font-family: var(--font-cert);
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--gold-hi);
  line-height: 1.15;
}
.stat-item span { font-size: 0.85rem; color: rgba(249, 245, 234, 0.75); }

/* ───────────────────────── 8. Features ───────────────────────── */
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feature {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--gold); }
.feature-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  display: grid;
  place-items: center;
  font-family: var(--font-cert);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 16px;
}
.feature h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 6px; }
.feature p { font-size: 0.9rem; color: var(--muted); }

/* ───────────────────────── 9. CTA band ───────────────────────── */
.cta-band {
  border: 3px double var(--gold);
  border-radius: 20px;
  background: var(--panel);
  padding: 52px 40px;
  text-align: center;
}
.cta-band h2 { font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.cta-band p { color: var(--muted); margin: 10px 0 24px; }

/* ───────────────────────── 10. Page head (inner pages) ───────────────────────── */
.page-head { padding: 58px 0 8px; }
.page-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-top: 12px; }
.page-head p { color: var(--muted); margin-top: 10px; max-width: 560px; }

/* ───────────────────────── 11. Product grid ───────────────────────── */
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 30px 0 34px; }
.chip {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  transition: all 0.15s ease;
}
.chip:hover { border-color: var(--gold); color: var(--gold-lo); }
.chip.active { background: var(--green); border-color: var(--green); color: var(--parchment); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 24px;
  padding-bottom: 96px;
}
.product {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.product:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }

.product-stage {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(184, 145, 47, 0.1), transparent 62%),
    var(--parchment);
  border-bottom: 1.5px solid var(--line);
  padding: 26px 14px;
  display: flex;
  justify-content: center;
}
/* gold-foil sheen sweeps across on hover */
.product-stage::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 252, 240, 0.65), transparent);
  transform: skewX(-18deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.product:hover .product-stage::after { left: 135%; }

.product-info { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-info h3 { font-size: 1.08rem; font-weight: 700; }
.product-info .tagline { font-size: 0.88rem; color: var(--muted); flex: 1; }
.product-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.price { font-family: var(--font-mono); font-weight: 600; font-size: 1.08rem; }
.add-btn {
  background: var(--green);
  color: var(--parchment);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.68em 1.25em;
  font-weight: 700;
  font-size: 0.88rem;
  transition: background 0.15s ease, transform 0.15s ease;
}
.add-btn:hover { background: var(--gold-lo); }
.add-btn.added { background: var(--ok); }
.add-btn:active { transform: scale(0.96); }

/* ═══════════════════════════════════════════════════════════════
   12. THE CERTIFICATE COMPONENT  (.cert)
   One reusable component, sized entirely in em units — changing
   the container's font-size rescales the WHOLE certificate:
     .cert-lg → generator preview   .cert-md → hero
     .cert-sm → product thumbnails
   Alignment, spacing, borders and dimensions do all the work.
   ═══════════════════════════════════════════════════════════════ */
.cert {
  position: relative;
  width: 46em;
  max-width: 100%;
  aspect-ratio: 1.414 / 1;          /* A4 landscape proportion   */
  background: #fdfaf1;
  color: #2a2418;
  border: 1px solid #ddd2b4;
  box-shadow: var(--shadow);
  font-family: var(--font-cert);
  overflow: hidden;
}
.cert-lg { font-size: clamp(7.5px, 2.05vw, 15px); }
.cert-md { font-size: clamp(6.5px, 1.55vw, 11.5px); }
.cert-sm { font-size: 6.6px; }

/* inner frame: inset + border + padding = the box model on display */
.cert-inner {
  position: absolute;
  inset: 0.9em;                     /* margin from the outer edge */
  border: 0.22em double var(--gold);/* default frame style        */
  padding: 1.5em 2.2em 1.3em;       /* breathing room inside      */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cert-org {
  font-family: var(--font-ui);
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.85;
}
.cert-title {
  font-size: 2.05em;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 0.45em;
  color: var(--gold-lo);
}
.cert-sub { font-size: 0.9em; font-style: italic; margin-top: 0.7em; opacity: 0.8; }
.cert-name {
  font-family: var(--font-script);
  font-size: 2.7em;
  line-height: 1.2;
  margin-top: 0.12em;
  overflow-wrap: anywhere;
}
.cert-course { font-size: 0.95em; margin-top: 0.4em; max-width: 34em; }
.cert-course b { font-weight: 700; }

.cert-footer {
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1em;
}
.cert-sig { display: flex; flex-direction: column; align-items: center; min-width: 9em; }
.cert-sig .script { font-family: var(--font-script); font-size: 1.5em; line-height: 1.1; }
.cert-sig .plain { font-size: 0.95em; }
.cert-sig .lbl {
  font-family: var(--font-ui);
  font-size: 0.58em;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-top: 1px solid currentColor;
  margin-top: 0.5em;
  padding-top: 0.55em;
  width: 100%;
  opacity: 0.75;
}

/* the gold seal — pure CSS medallion */
.cert-seal {
  --seal-hi: var(--gold-hi);
  --seal-md: var(--gold);
  --seal-lo: var(--gold-lo);
  position: relative;
  width: 5.4em; height: 5.4em;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--seal-hi), var(--seal-md) 55%, var(--seal-lo));
  box-shadow: 0 0.3em 0.8em rgba(0, 0, 0, 0.25), inset 0 0 0 0.12em rgba(255, 255, 255, 0.3);
  display: grid;
  place-items: center;
  color: rgba(58, 44, 8, 0.7);
  font-size: 1em;
  flex-shrink: 0;
}
.cert-seal::before {
  content: "";
  position: absolute;
  inset: 0.55em;
  border: 1px solid rgba(255, 253, 246, 0.55);
  border-radius: 50%;
}
.cert-seal span { font-size: 1.7em; }

/* — theme 1 · Classic Gold — (the base look, plus corner ticks) */
.t-classic .cert-inner { border-style: double; }

/* — theme 2 · Royal Navy — */
.t-royal { background: #14264a; color: #ead9a6; border-color: #0d1b38; }
.t-royal .cert-inner { border: 0.14em solid #c9a24b; box-shadow: inset 0 0 0 0.4em #14264a, inset 0 0 0 0.48em rgba(201, 162, 75, 0.55); }
.t-royal .cert-title { color: #f0dfa8; }
.t-royal .cert-sig .lbl { opacity: 0.85; }

/* — theme 3 · Modern Minimal — */
.t-minimal { background: #ffffff; color: #16181a; border-color: #e6e6e6; }
.t-minimal .cert-inner { border: 0.1em solid #16181a; }
.t-minimal .cert-title { font-family: var(--font-ui); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 1.35em; margin-top: 0.9em; color: #16181a; }
.t-minimal .cert-name { font-family: var(--font-ui); font-weight: 800; font-size: 2em; margin-top: 0.35em; }
.t-minimal .cert-seal { --seal-hi: #3a3a3a; --seal-md: #1c1c1c; --seal-lo: #000; color: #f2f2f2; }

/* — theme 4 · Emerald Executive — */
.t-emerald { background: #0f3b2d; color: #e7efe4; border-color: #0a2b21; }
.t-emerald .cert-inner { border: 0.16em groove #c9a24b; }
.t-emerald .cert-title { color: #e9cd7e; }

/* — theme 5 · Hackathon Tech — */
.t-tech { background: #0d1520; color: #cde3f2; border-color: #0a101a; font-family: var(--font-mono); }
.t-tech .cert-inner { border: 0.1em dashed #37536e; }
.t-tech .cert-title { font-family: var(--font-mono); font-size: 1.3em; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 0.9em; color: #55d6e8; }
.t-tech .cert-sub { font-style: normal; }
.t-tech .cert-name { font-family: var(--font-mono); font-weight: 600; font-size: 1.8em; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.5em; color: #7fe3f0; }
.t-tech .cert-sig .script { font-family: var(--font-mono); font-size: 1em; }
.t-tech .cert-seal { --seal-hi: #7fe3f0; --seal-md: #2ba9bd; --seal-lo: #14586a; color: #06222b; }

/* — theme 6 · Playful Pop — */
.t-playful { background: #fffdf5; border: 0.28em dashed #f2a03d; }
.t-playful .cert-inner { border: 0.22em dotted #4fb0ae; }
.t-playful .cert-title { color: #e2574c; }
.t-playful .cert-name { color: #3e8e7e; }
.t-playful .cert-seal { --seal-hi: #ffc46b; --seal-md: #f2884b; --seal-lo: #c95a2a; color: #5d2508; }

/* — theme 7 · Academic Ivory — */
.t-ivory { background: #fffdf7; color: #33251f; }
.t-ivory .cert-inner { border: 0.2em double #7a1f1f; }
.t-ivory .cert-title { color: #7a1f1f; }
.t-ivory .cert-seal { --seal-hi: #d96a56; --seal-md: var(--wax); --seal-lo: #6e2318; color: #ffe9e2; }

/* — theme 8 · Elegant Blush — */
.t-blush { background: #fbeff0; color: #5c3a40; border-color: #eed6d8; }
.t-blush .cert-inner { border: 0.08em solid #c9969c; box-shadow: inset 0 0 0 0.35em #fbeff0, inset 0 0 0 0.42em rgba(184, 145, 47, 0.5); }
.t-blush .cert-title { color: #8c4a52; }
.t-blush .cert-name { color: #b26671; }
.t-blush .cert-seal { --seal-hi: #f3c1c7; --seal-md: #cb8891; --seal-lo: #96525c; color: #5c2730; }

/* ───────────────────────── 13. Cart page ───────────────────────── */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 28px;
  align-items: start;
  padding: 34px 0 96px;
}
.cart-list { background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cart-row {
  display: grid;
  grid-template-columns: 74px 1fr auto auto auto;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1.5px solid var(--line);
}
.cart-row:last-child { border-bottom: none; }

/* swatches = miniature border samples of each template */
.swatch { width: 70px; height: 50px; border-radius: 6px; border: 1px solid var(--line); position: relative; }
.swatch::after { content: ""; position: absolute; inset: 5px; }
.sw-classic  { background: #fdfaf1; } .sw-classic::after  { border: 2px double var(--gold); }
.sw-royal    { background: #14264a; } .sw-royal::after    { border: 1.5px solid #c9a24b; }
.sw-minimal  { background: #ffffff; } .sw-minimal::after  { border: 1.5px solid #16181a; }
.sw-emerald  { background: #0f3b2d; } .sw-emerald::after  { border: 2px groove #c9a24b; }
.sw-tech     { background: #0d1520; } .sw-tech::after     { border: 1.5px dashed #37536e; }
.sw-playful  { background: #fffdf5; border: 2px dashed #f2a03d; } .sw-playful::after { border: 2px dotted #4fb0ae; }
.sw-ivory    { background: #fffdf7; } .sw-ivory::after    { border: 2px double #7a1f1f; }
.sw-blush    { background: #fbeff0; } .sw-blush::after    { border: 1.5px solid #c9969c; }

.cart-item-name { font-weight: 700; font-size: 0.98rem; }
.cart-item-price { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }

.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
.qty button { width: 32px; height: 32px; border: none; background: transparent; font-size: 1rem; font-weight: 700; color: var(--ink); }
.qty button:hover { background: var(--green-soft); color: var(--green); }
.qty output { min-width: 30px; text-align: center; font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; }
.line-total { font-family: var(--font-mono); font-weight: 600; min-width: 74px; text-align: right; }
.remove-btn { width: 32px; height: 32px; border: 1.5px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); font-size: 0.95rem; }
.remove-btn:hover { border-color: var(--wax); color: var(--wax); background: #fbeeec; }

.summary {
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  position: sticky;
  top: 92px;
}
.summary h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-lo);
  padding-bottom: 12px;
  border-bottom: 3px double var(--gold);
  margin-bottom: 16px;
}
.summary-line { display: flex; justify-content: space-between; font-size: 0.92rem; color: var(--muted); margin-bottom: 10px; }
.summary-line span:last-child { font-family: var(--font-mono); color: var(--ink); }
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 3px double var(--gold);
  padding-top: 14px;
  margin: 14px 0 20px;
  font-weight: 800;
}
.summary-total span:last-child { font-family: var(--font-mono); font-size: 1.3rem; }
.summary-note { margin-top: 14px; font-size: 0.78rem; color: var(--muted); text-align: center; }

.empty-state {
  border: 3px double var(--gold);
  border-radius: 20px;
  background: var(--panel);
  text-align: center;
  padding: 76px 30px;
  margin: 34px 0 96px;
}
.empty-mark {
  width: 70px; height: 70px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--gold-hi), var(--gold) 55%, var(--gold-lo));
  display: grid;
  place-items: center;
  color: rgba(58, 44, 8, 0.7);
  font-size: 1.5rem;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.3);
}
.empty-state h2 { font-weight: 800; font-size: 1.5rem; }
.empty-state p { color: var(--muted); margin: 8px 0 24px; }

/* ───────────────────────── 14. Payment page ───────────────────────── */
.pay-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 28px; align-items: start; padding: 34px 0 96px; }
.pay-form { background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 30px 28px; }
.pay-form fieldset { border: none; margin-bottom: 26px; }
.pay-form legend {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-lo);
  margin-bottom: 16px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; }
.field input {
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184, 145, 47, 0.18); }
.field input.mono { font-family: var(--font-mono); letter-spacing: 0.04em; }
.field input.invalid { border-color: var(--wax); background: #fdf4f2; }
.err { font-size: 0.76rem; color: var(--wax); margin-top: 5px; min-height: 1em; visibility: hidden; }
.err.show { visibility: visible; }
.accepted { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.08em; margin-top: -6px; margin-bottom: 16px; }

.mini-item { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 0.9rem; }
.mini-item .swatch { width: 52px; height: 38px; }
.mini-item .m-name { flex: 1; font-weight: 700; }
.mini-item .m-qty { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); }
.mini-item .m-price { font-family: var(--font-mono); font-weight: 600; }

/* ───────────────────────── 15. Toast & modal ───────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 80px);
  background: var(--green);
  color: var(--parchment);
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  z-index: 90;
  pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 24, 0.6);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-overlay.show { display: flex; }
.modal {
  background: var(--panel);
  border: 3px double var(--gold);
  border-radius: 20px;
  padding: 44px 38px;
  max-width: 430px;
  width: 100%;
  text-align: center;
  animation: pop 0.3s ease;
}
@keyframes pop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.wax-mark {
  width: 74px; height: 74px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #d96a56, var(--wax) 55%, #6e2318);
  color: #ffe9e2;
  font-size: 2rem;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.25), 0 6px 16px rgba(163, 59, 46, 0.4);
}
.modal h2 { font-weight: 800; font-size: 1.5rem; }
.modal .order-id {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background: var(--parchment);
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  display: inline-block;
  padding: 6px 14px;
  margin: 14px 0 8px;
}
.modal p { color: var(--muted); font-size: 0.92rem; margin-bottom: 22px; }

/* ───────────────────────── 16. Footer ───────────────────────── */
.footer { border-top: 1.5px solid var(--line); background: var(--panel); padding: 56px 0 0; margin-top: 20px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; padding-bottom: 44px; }
.footer-blurb { color: var(--muted); font-size: 0.9rem; max-width: 320px; margin-top: 12px; }
.footer h4 {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-lo);
  margin-bottom: 14px;
}
.footer ul { list-style: none; }
.footer li { margin-bottom: 9px; }
.footer li a { font-size: 0.92rem; }
.footer li a:hover { color: var(--gold-lo); }
.footer-bottom {
  border-top: 1.5px solid var(--line);
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--muted);
}

/* ───────────────────────── 17. Print: certificate only ─────────────────────────
   The "Print / Save as PDF" button prints just the generator preview,
   full-page on A4 landscape. */
@page { size: A4 landscape; margin: 0; }
@media print {
  body * { visibility: hidden; }
  #printArea, #printArea * { visibility: visible; }
  #printArea {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
  }
  #printArea .cert { font-size: 19px; box-shadow: none; max-width: none; }
}

/* ───────────────────────── 18. Responsive ───────────────────────── */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .gen-layout { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .cart-layout, .pay-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
}
@media (max-width: 820px) {
  .burger { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--panel);
    border-bottom: 1.5px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 10px 4%;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 13px 4px; width: 100%; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .stat-item:nth-child(3) { border-left: none; }
}
@media (max-width: 620px) {
  .section { padding: 64px 0; }
  .features-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .cart-row {
    grid-template-columns: 70px 1fr auto;
    grid-template-areas:
      "sw name remove"
      "sw qty  total";
    row-gap: 12px;
  }
  .swatch { grid-area: sw; }
  .cart-item-info { grid-area: name; }
  .qty { grid-area: qty; justify-self: start; }
  .line-total { grid-area: total; }
  .remove-btn { grid-area: remove; justify-self: end; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .stat-item { padding: 6px 16px; }
  .stat-item b { font-size: 1.7rem; }
  .gen-panel { padding: 20px 16px; }
}