:root {
  color-scheme: dark;
  --bg: #090806;
  --surface: #15120e;
  --surface-2: #211b15;
  --ink: #fff9ef;
  --muted: #c9bca7;
  --soft: rgba(255, 249, 239, .12);
  --line: rgba(255, 249, 239, .17);
  --accent: #d8b56d;
  --accent-2: #f7e2a4;
  --danger: #c86f5d;
  --success: #8fc7a0;
  --shadow: 0 28px 80px rgba(0, 0, 0, .45);
  --radius: 8px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 82% 12%, rgba(141, 29, 43, .28), transparent 22rem),
    radial-gradient(circle at 8% 74%, rgba(14, 96, 63, .22), transparent 20rem),
    radial-gradient(circle at 20% 0%, rgba(216, 181, 109, .18), transparent 30rem),
    linear-gradient(135deg, #090806 0%, #15100d 45%, #080807 100%);
  color: var(--ink);
  font-family: var(--font);
  letter-spacing: 0;
}

body.theme-porcelain {
  --bg: #f6f0ea;
  --surface: #fffaf5;
  --surface-2: #efe1d8;
  --ink: #241713;
  --muted: #705f56;
  --soft: rgba(36, 23, 19, .09);
  --line: rgba(36, 23, 19, .16);
  color-scheme: light;
  background: linear-gradient(135deg, #f6f0ea 0%, #fdf8f2 48%, #eadbd2 100%);
}

body.theme-emerald {
  --bg: #07130f;
  --surface: #0e221b;
  --surface-2: #162f25;
  --ink: #f2fff8;
  --muted: #bdd4c6;
  --soft: rgba(242, 255, 248, .11);
  --line: rgba(242, 255, 248, .17);
  background: linear-gradient(135deg, #06110d 0%, #10261e 50%, #050807 100%);
}

button, input, textarea, select, a { font: inherit; }

button { cursor: pointer; }

input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 82%, black);
  color: var(--ink);
  padding: .76rem .85rem;
  outline: none;
}

textarea { resize: vertical; }

input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 3px;
}

label {
  display: grid;
  gap: .45rem;
  color: var(--muted);
  font-size: .88rem;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 20;
  background: var(--accent);
  color: #16110b;
  padding: .7rem 1rem;
  border-radius: var(--radius);
}

.skip-link:focus { top: 1rem; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem clamp(1rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(22px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 760;
  white-space: nowrap;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #17110a;
  border-radius: 50%;
  font-family: Georgia, serif;
}

.nav-tabs {
  display: flex;
  gap: .35rem;
  flex: 1;
  justify-content: center;
}

.nav-tab, .segment {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius);
  padding: .65rem .8rem;
}

.nav-tab.active, .segment.active {
  border-color: var(--line);
  background: var(--soft);
  color: var(--ink);
}

.primary-button, .ghost-button, .danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: .78rem 1rem;
  text-decoration: none;
  font-weight: 740;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.primary-button {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #17110a;
}

.ghost-button {
  border-color: var(--line);
  background: var(--soft);
  color: var(--ink);
}

.danger-button {
  border-color: color-mix(in srgb, var(--danger) 60%, transparent);
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: var(--ink);
}

.primary-button:hover, .ghost-button:hover, .danger-button:hover { transform: translateY(-1px); }
.compact { min-height: 2.35rem; padding: .55rem .8rem; font-size: .9rem; }

main { padding: clamp(1rem, 3vw, 2.4rem); }

.route { display: none; }
.route.active { display: block; }

.hero-shell {
  min-height: calc(100vh - 8.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(19rem, .95fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}

.route-landing::before {
  content: "";
  position: fixed;
  inset: 4.5rem 0 auto 0;
  height: 5rem;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255,236,184,.9) 0 .12rem, transparent .14rem) 3% 20% / 4.8rem 2.4rem,
    radial-gradient(circle, rgba(188,45,58,.75) 0 .1rem, transparent .12rem) 8% 60% / 5.2rem 2.6rem,
    radial-gradient(circle, rgba(50,145,91,.75) 0 .1rem, transparent .12rem) 14% 35% / 5.4rem 2.4rem;
  opacity: .5;
}

.hero-copy h1, .section-heading h1 {
  margin: .2rem 0 .8rem;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 520;
  line-height: .98;
}

.hero-copy h1 { font-size: clamp(3rem, 7vw, 6.6rem); }
.section-heading h1 { font-size: clamp(2rem, 5vw, 4.6rem); }

.hero-text, .section-heading p, .feature-band p, .modal-copy p {
  color: var(--muted);
  line-height: 1.65;
}

.hero-text { max-width: 38rem; font-size: 1.1rem; }
.offer-strip {
  display: grid;
  grid-template-columns: auto auto;
  gap: .15rem 1rem;
  align-items: end;
  width: min(100%, 30rem);
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}

.offer-strip span {
  color: var(--accent-2);
  font-weight: 820;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
}

.offer-strip strong {
  grid-row: span 2;
  font-family: Georgia, serif;
  font-size: clamp(2.7rem, 5vw, 4.2rem);
  line-height: .88;
  color: var(--accent-2);
}

.offer-strip small {
  color: var(--muted);
  line-height: 1.45;
}

.bundle-template-card {
  display: grid;
  grid-template-columns: 1fr minmax(12rem, .72fr);
  gap: 1rem;
  width: min(100%, 38rem);
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 85% 20%, rgba(255,122,26,.16), transparent 9rem),
    radial-gradient(circle at 15% 100%, rgba(23,101,67,.18), transparent 9rem),
    color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 16px 45px rgba(0,0,0,.25);
}

.bundle-template-copy {
  display: grid;
  gap: .25rem;
  align-content: center;
}

.bundle-template-copy span {
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  font-weight: 830;
}

.bundle-template-copy strong {
  font-family: Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.08;
}

.bundle-template-copy small {
  color: var(--muted);
  line-height: 1.45;
}

.bundle-template-preview {
  display: grid;
  grid-template-columns: .72fr 1fr;
  gap: .55rem;
  min-height: 8rem;
}

.bundle-halloween-mini,
.bundle-christmas-mini {
  display: grid;
  gap: .35rem;
  padding: .45rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
}

.bundle-halloween-mini {
  grid-template-columns: 1fr;
  background: linear-gradient(145deg, #16071d, #401657 58%, #7b2d11);
}

.bundle-christmas-mini {
  grid-template-columns: repeat(2, 1fr);
  background: linear-gradient(145deg, #080706, #302515 62%, #0c1912);
}

.bundle-halloween-mini span,
.bundle-christmas-mini span {
  display: grid;
  place-items: center;
  min-height: 1.9rem;
  border: 1px solid rgba(255,232,162,.2);
  border-radius: 4px;
  color: #fff3bf;
  background: rgba(0,0,0,.24);
  font-family: Georgia, serif;
  font-weight: 760;
}
.eyebrow {
  margin: 0;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .74rem;
  font-weight: 840;
}

.hero-actions, .admin-actions, .modal-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.hero-visual {
  min-height: 34rem;
  display: grid;
  place-items: center;
  perspective: 1000px;
}

.lux-card {
  width: min(100%, 31rem);
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,236,184,.16), transparent 12rem),
    radial-gradient(circle at 88% 70%, rgba(23,101,67,.18), transparent 10rem),
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 34%),
    linear-gradient(145deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow);
  padding: 1.1rem;
  transform: rotateY(-7deg) rotateX(4deg);
}

.lux-card-top, .widget-head, .panel-title-row, .split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .55rem;
  margin: 1rem 0;
}

.mini-grid span {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}

.mini-grid span:nth-child(6) {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 35px color-mix(in srgb, var(--accent) 35%, transparent);
}

.hero-offer {
  display: grid;
  gap: .25rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, .18);
}

.hero-offer::before {
  content: "";
  height: .25rem;
  width: 6rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #9d1e2f, var(--accent-2), #176543);
}

.spark { color: var(--accent-2); font-size: .8rem; text-transform: uppercase; }

.feature-band, .metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1180px;
  margin: 0 auto 1rem;
}

.feature-band article, .panel, .metric {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .22);
}

.feature-band article { padding: 1.2rem; }
.feature-band h2, .panel h2, .metric strong { margin: .35rem 0; }
.feature-icon { color: var(--accent-2); font-weight: 840; }

.pricing-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
  gap: 1rem;
  max-width: 1180px;
  margin: 1rem auto 0;
}

.pricing-band article {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 10% 0%, rgba(157,30,47,.18), transparent 10rem),
    radial-gradient(circle at 95% 100%, rgba(23,101,67,.2), transparent 10rem),
    color-mix(in srgb, var(--surface) 88%, transparent);
  padding: 1.1rem;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .22);
}

.pricing-band h2 {
  margin: .35rem 0;
  font-family: Georgia, serif;
  font-size: clamp(2.1rem, 4vw, 3.5rem);
  color: var(--accent-2);
}

.pricing-band p:not(.eyebrow) {
  flex: 1;
  color: var(--muted);
  line-height: 1.58;
}

.checkout-note {
  max-width: 1180px;
  margin: .9rem auto 0;
  color: var(--muted);
  font-size: .92rem;
}

.featured-price {
  border-color: color-mix(in srgb, var(--accent) 58%, transparent) !important;
  box-shadow: 0 18px 60px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

.season-home-grid,
.campaign-range,
.template-workspace,
.campaign-sell-grid {
  max-width: 1180px;
  margin: 1rem auto 0;
  display: grid;
  gap: 1rem;
}

.season-home-grid {
  grid-template-columns: 1fr 1fr;
}

.season-home-card,
.campaign-product {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 16px 50px rgba(0,0,0,.22);
  padding: 1.15rem;
}

.season-home-card.live {
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
}

.season-home-card span {
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  font-weight: 830;
}

.season-home-card h2,
.campaign-product h2,
.template-preview h2,
.sell-panel h2 {
  margin: .45rem 0;
  font-family: Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
}

.season-home-card p,
.campaign-product p,
.sell-panel p {
  color: var(--muted);
  line-height: 1.58;
}

.campaign-range {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.campaign-product {
  display: grid;
  align-content: start;
  gap: .75rem;
}

.campaign-preview-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
  min-height: 9rem;
  padding: .65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.02));
}

.campaign-preview-mini.tall {
  grid-template-columns: repeat(7, 1fr);
}

.campaign-preview-mini span {
  display: grid;
  place-items: center;
  min-height: 3.1rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px;
  color: var(--accent-2);
  font-weight: 820;
  font-size: .78rem;
  text-align: center;
  background: rgba(0,0,0,.2);
}

.christmas-product .campaign-preview-mini { background: linear-gradient(145deg, #100c09, #392915); }
.halloween-product .campaign-preview-mini { background: linear-gradient(145deg, #120719, #341449 55%, #692b11); }
.valentines-product .campaign-preview-mini { background: linear-gradient(145deg, #42131f, #c77d8a); }
.easter-product .campaign-preview-mini { background: linear-gradient(145deg, #164f45, #e5c989); }
.summer-product .campaign-preview-mini { background: linear-gradient(145deg, #075d73, #f0b85b); }
.blackfriday-product .campaign-preview-mini { background: linear-gradient(145deg, #030303, #292929 55%, #d8b56d); }

.campaign-tabs {
  max-width: 1180px;
  margin: 0 auto 1rem;
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  padding: .3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.campaign-tab {
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  padding: .7rem .9rem;
  min-width: max-content;
}

.campaign-tab.active {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  background: var(--soft);
  color: var(--ink);
}

.campaign-tab-panel {
  display: none;
}

.campaign-tab-panel.active {
  display: block;
}

.campaign-tabs-page .section-heading:not(:first-child) {
  margin-top: .75rem;
}

.campaign-sell-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sell-panel textarea {
  width: 100%;
  margin-top: .7rem;
  color: var(--accent-2);
}

.template-workspace {
  grid-template-columns: 1.15fr .85fr;
  align-items: start;
}

.template-preview {
  min-height: 31rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.template-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  font-weight: 820;
  margin-bottom: 1rem;
}

.template-door-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
  min-height: 24rem;
}

.template-door-grid button {
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px 8px 4px 4px;
  color: #fff9ef;
  background: rgba(0,0,0,.25);
  font-weight: 820;
}

.love-front { background: radial-gradient(circle at 80% 15%, rgba(255,235,235,.24), transparent 13rem), linear-gradient(145deg, #32111d, #8d3446); }
.easter-front { background: radial-gradient(circle at 78% 18%, rgba(255,255,255,.32), transparent 13rem), linear-gradient(145deg, #0e554e, #d9c27f); }
.summer-front { background: radial-gradient(circle at 80% 18%, rgba(255,243,185,.55), transparent 10rem), linear-gradient(145deg, #07576f, #e6a94b); }
.blackfriday-front { background: radial-gradient(circle at 70% 16%, rgba(216,181,109,.24), transparent 12rem), linear-gradient(145deg, #050505, #242424); }

.calendar-template-gallery {
  max-width: 1180px;
  margin: 1rem auto;
}

.template-gallery-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
}

.template-gallery-heading h2 {
  margin: .2rem 0 0;
  font-family: Georgia, serif;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
}

.template-gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .85rem;
}

.calendar-template-card {
  position: relative;
  min-height: 16rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: var(--radius);
  padding: .85rem;
  text-align: left;
  color: var(--ink);
  background: var(--template-bg);
  box-shadow: 0 18px 48px rgba(0,0,0,.24);
}

button.calendar-template-card {
  font: inherit;
  cursor: pointer;
}

.calendar-template-card::before {
  content: "";
  position: absolute;
  inset: .55rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  pointer-events: none;
}

.calendar-template-card::after {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.86), rgba(255,255,255,.18) 42%, transparent 68%);
  opacity: .42;
}

.calendar-template-card:hover,
.calendar-template-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
}

.calendar-template-card.active {
  border-color: color-mix(in srgb, var(--accent) 82%, white);
  box-shadow: 0 18px 58px color-mix(in srgb, var(--accent) 22%, transparent);
}

.template-card-top {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .2rem;
}

.template-card-top span {
  font-family: Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.05;
  color: #fff8e7;
}

.template-card-top strong {
  color: color-mix(in srgb, var(--accent-2) 88%, white);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .68rem;
}

.template-mini-doors {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .42rem;
  align-content: end;
}

.template-mini-doors.seven {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.template-mini-doors.ten {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.template-mini-doors.twenty-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.template-mini-doors span {
  display: grid;
  place-items: center;
  min-height: 2.25rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 5px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 42%),
    rgba(0,0,0,.28);
  color: #fff9ea;
  font-size: .72rem;
  font-weight: 820;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.template-haunted-house { --template-bg: radial-gradient(circle at 72% 16%, #f6d084 0 1.1rem, transparent 1.2rem), linear-gradient(160deg, #120617, #3a1238 52%, #0b0508); }
.template-pumpkin-luxe { --template-bg: radial-gradient(circle at 20% 78%, rgba(255,122,26,.46), transparent 6rem), linear-gradient(145deg, #1a0b08, #5b2410 56%, #c8621d); }
.template-midnight-moon { --template-bg: radial-gradient(circle at 78% 18%, rgba(224,224,255,.76), transparent 3.8rem), linear-gradient(145deg, #060814, #181a47 58%, #4b2770); }
.template-sweet-shop { --template-bg: radial-gradient(circle at 15% 15%, rgba(255,189,108,.38), transparent 7rem), linear-gradient(145deg, #26100f, #6f2233 48%, #d56f2e); }
.template-gothic-gold { --template-bg: radial-gradient(circle at 70% 13%, rgba(216,181,109,.32), transparent 8rem), linear-gradient(145deg, #050505, #20151d 60%, #76552d); }

.template-rose-atelier { --template-bg: radial-gradient(circle at 82% 16%, rgba(255,214,221,.36), transparent 8rem), linear-gradient(145deg, #2b0d18, #88405a 58%, #d98aa0); }
.template-date-night { --template-bg: radial-gradient(circle at 16% 70%, rgba(255,239,207,.28), transparent 6rem), linear-gradient(145deg, #12070a, #4e1522 55%, #b65055); }
.template-jewel-heart { --template-bg: radial-gradient(circle at 74% 18%, rgba(255,255,255,.32), transparent 6rem), linear-gradient(145deg, #120c17, #5e173f 52%, #c89a64); }
.template-blush-boutique { --template-bg: linear-gradient(90deg, rgba(255,255,255,.12), transparent 20% 80%, rgba(255,255,255,.1)), linear-gradient(145deg, #4c1727, #c88794 58%, #f1d3cf); }
.template-secret-admirer { --template-bg: radial-gradient(circle at 54% 34%, rgba(255,255,255,.22), transparent 6rem), linear-gradient(145deg, #10080d, #702041 58%, #2b0c1b); }

.template-garden-hunt { --template-bg: radial-gradient(circle at 18% 18%, rgba(255,255,255,.34), transparent 7rem), linear-gradient(145deg, #0b3f34, #77a96f 54%, #f0d98c); }
.template-chocolate-shop { --template-bg: radial-gradient(circle at 74% 15%, rgba(255,217,154,.34), transparent 7rem), linear-gradient(145deg, #23110a, #6b3b21 55%, #d8b66a); }
.template-pastel-arcade { --template-bg: linear-gradient(135deg, rgba(255,255,255,.2), transparent 30%), linear-gradient(145deg, #5a9a94, #efd3d9 52%, #f3e59b); }
.template-spring-market { --template-bg: radial-gradient(circle at 80% 80%, rgba(255,241,175,.34), transparent 7rem), linear-gradient(145deg, #173f36, #43896d 55%, #e7c778); }
.template-bunny-trail { --template-bg: radial-gradient(circle at 77% 18%, rgba(255,255,255,.5), transparent 5rem), linear-gradient(145deg, #33564a, #d6b3c6 58%, #f0e5b0); }

.template-coastal-club { --template-bg: radial-gradient(circle at 78% 20%, rgba(255,242,176,.62), transparent 6rem), linear-gradient(145deg, #04566d, #1494a8 56%, #f6b85b); }
.template-poolside-glow { --template-bg: linear-gradient(145deg, #06334b, #58c0bd 54%, #f7d88a); }
.template-festival-drop { --template-bg: radial-gradient(circle at 25% 20%, rgba(255,255,255,.26), transparent 7rem), linear-gradient(145deg, #20124d, #d9588b 56%, #f3b84d); }
.template-gelato-lane { --template-bg: linear-gradient(145deg, #2f7771, #ffc0aa 50%, #ffe29a); }
.template-sunset-studio { --template-bg: radial-gradient(circle at 50% 20%, rgba(255,248,198,.55), transparent 7rem), linear-gradient(145deg, #193f68, #da6b58 56%, #f1b858); }

.template-vip-vault { --template-bg: radial-gradient(circle at 70% 16%, rgba(216,181,109,.26), transparent 7rem), linear-gradient(145deg, #030303, #1b1b1b 55%, #846233); }
.template-midnight-sale { --template-bg: linear-gradient(135deg, rgba(255,255,255,.1), transparent 28%), linear-gradient(145deg, #050505, #111827 60%, #383c4a); }
.template-gold-rush { --template-bg: radial-gradient(circle at 18% 82%, rgba(250,202,91,.35), transparent 8rem), linear-gradient(145deg, #070605, #32200f 55%, #c7943e); }
.template-luxe-outlet { --template-bg: radial-gradient(circle at 75% 20%, rgba(255,255,255,.16), transparent 6rem), linear-gradient(145deg, #090909, #3b3030 52%, #8a5a54); }
.template-flash-grid { --template-bg: linear-gradient(90deg, rgba(255,255,255,.08), transparent 18% 82%, rgba(255,255,255,.08)), linear-gradient(145deg, #050505, #311111 52%, #a52727); }

.template-townhouse { --template-bg: linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.62)), url("assets/townhouse-front.png") center / cover; }
.template-boutique { --template-bg: linear-gradient(rgba(46,16,26,.35), rgba(46,16,26,.62)), url("assets/boutique-front.png") center / cover; }
.template-chateau { --template-bg: linear-gradient(rgba(11,24,34,.32), rgba(11,24,34,.64)), url("assets/chateau-front.png") center / cover; }
.template-jewellery { --template-bg: linear-gradient(rgba(0,13,8,.35), rgba(0,13,8,.68)), url("assets/jewellery-front.png") center / cover; }
.template-candlelight { --template-bg: radial-gradient(circle at 52% 18%, rgba(216,181,109,.34), transparent 9rem), linear-gradient(145deg, #080605, #1e1812 58%, #6d4c23); }

.template-admin {
  display: grid;
  gap: .9rem;
}

.seo-content-band,
.faq-band {
  max-width: 1180px;
  margin: 1rem auto 0;
  display: grid;
  gap: 1rem;
}

.seo-content-band {
  grid-template-columns: 1.1fr .9fr;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 88% 16%, rgba(216,181,109,.16), transparent 13rem),
    color-mix(in srgb, var(--surface) 88%, transparent);
  padding: clamp(1rem, 3vw, 1.4rem);
  box-shadow: 0 16px 50px rgba(0,0,0,.2);
}

.seo-content-band h2,
.faq-band h2 {
  margin: .35rem 0;
  font-family: Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.08;
}

.seo-content-band p,
.faq-band p {
  color: var(--muted);
  line-height: 1.6;
}

.seo-keyword-list {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.seo-keyword-list span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--accent-2);
  padding: .55rem .75rem;
  font-size: .86rem;
}

.faq-band {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.faq-band article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  padding: 1rem;
  box-shadow: 0 16px 50px rgba(0,0,0,.18);
}

.seo-entry-page {
  min-height: 100vh;
  display: grid;
  align-content: center;
  gap: 1rem;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(1rem, 5vw, 4rem);
}

.seo-entry-page h1 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(2.4rem, 7vw, 5.2rem);
  line-height: .98;
}

.seo-entry-page p {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.62;
}

.halloween-route {
  --halloween-accent: #ff7a1a;
}

.halloween-status strong {
  color: var(--halloween-accent);
}

.halloween-stage {
  max-width: 1180px;
  margin: 0 auto;
}

.halloween-house {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--halloween-accent) 48%, var(--line));
  border-radius: var(--radius);
  min-height: 38rem;
  padding: clamp(1rem, 3vw, 2rem);
  background:
    radial-gradient(circle at 82% 8%, rgba(255, 207, 92, .9) 0 3.6rem, transparent 3.7rem),
    radial-gradient(circle at 20% 22%, rgba(116, 37, 143, .34), transparent 18rem),
    linear-gradient(145deg, #09020b, #24102d 46%, #080407);
  box-shadow: var(--shadow);
}

.halloween-house::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background:
    linear-gradient(135deg, transparent 0 47%, rgba(255,122,26,.2) 48% 52%, transparent 53%) 0 0 / 6rem 5rem,
    linear-gradient(180deg, transparent, rgba(0,0,0,.42));
  pointer-events: none;
}

.moon {
  position: absolute;
  right: 8%;
  top: 8%;
  width: 5.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffd166;
  box-shadow: 0 0 50px rgba(255, 209, 102, .6);
}

.moon::after {
  content: "";
  position: absolute;
  right: -.5rem;
  top: -.2rem;
  width: 5.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #1d0c24;
}

.halloween-heading {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.2rem;
  color: #ffd166;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  font-weight: 850;
}

.halloween-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(.55rem, 1vw, .9rem);
  align-items: stretch;
}

.halloween-door {
  position: relative;
  min-height: clamp(12rem, 18vw, 18rem);
  border: 1px solid rgba(255, 209, 102, .24);
  border-radius: 48% 48% 7px 7px;
  padding: .85rem .65rem;
  background:
    radial-gradient(circle at 50% 32%, rgba(255,122,26,.26), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.02)),
    linear-gradient(180deg, #20102b, #080407);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 14px 34px rgba(0,0,0,.35);
  overflow: hidden;
}

.halloween-door::before {
  content: "";
  position: absolute;
  inset: .55rem;
  border: 1px solid rgba(255,209,102,.18);
  border-radius: 48% 48% 5px 5px;
}

.halloween-door-number {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,209,102,.42);
  color: #ffd166;
  font-family: Georgia, serif;
  font-size: 1.1rem;
}

.halloween-door-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 5rem;
  margin: 1.1rem 0 .8rem;
  color: #ffd166;
  font-weight: 850;
}

.halloween-door strong,
.halloween-door small {
  position: relative;
  z-index: 1;
  display: block;
}

.halloween-door strong {
  font-size: .95rem;
  line-height: 1.16;
}

.halloween-door small {
  margin-top: .45rem;
  color: #d9b7e5;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .68rem;
}

.halloween-door.available {
  border-color: rgba(255,122,26,.72);
  box-shadow: 0 0 0 1px rgba(255,122,26,.35), 0 0 36px rgba(255,122,26,.28);
}

.halloween-door.opened {
  background:
    radial-gradient(circle at 50% 32%, rgba(255,209,102,.28), transparent 28%),
    linear-gradient(145deg, rgba(255,122,26,.28), rgba(255,255,255,.04)),
    linear-gradient(180deg, #271134, #080407);
}

.halloween-door.locked {
  opacity: .62;
}


.section-heading {
  max-width: 1180px;
  margin: 0 auto 1.2rem;
}

.status-panel {
  min-width: 13rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
  padding: .9rem;
  text-align: right;
}

.status-panel strong {
  display: block;
  font-size: 1.5rem;
  color: var(--accent-2);
}

.calendar-toolbar {
  max-width: 1180px;
  margin: 0 auto .9rem;
  display: flex;
  justify-content: space-between;
  gap: .75rem;
}

.toolbar-actions {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
}

.segmented {
  display: inline-flex;
  gap: .25rem;
  padding: .25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
}

.preview-frame {
  max-width: 1180px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(.7rem, 2vw, 1.3rem);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  transition: max-width .25s ease;
}

.preview-frame.mobile { max-width: 430px; }

.calendar-widget {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(155deg, var(--surface), color-mix(in srgb, var(--surface-2) 88%, black));
  padding: clamp(1rem, 3vw, 1.8rem);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), var(--shadow);
}

.calendar-widget::before {
  content: "";
  position: absolute;
  inset: .75rem;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 6px;
  box-shadow: inset 0 0 46px rgba(0,0,0,.22);
}

.calendar-widget::after {
  content: "";
  position: absolute;
  left: 50%;
  top: .8rem;
  width: min(44%, 26rem);
  height: .26rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
  opacity: .9;
}

.widget-head { margin-bottom: 1rem; }
.widget-head h2 { margin: .15rem 0 0; font-family: Georgia, serif; font-size: clamp(1.7rem, 4vw, 3rem); }
.widget-kicker { color: var(--accent-2); text-transform: uppercase; font-size: .72rem; letter-spacing: .12em; }
.widget-subtitle {
  max-width: 48rem;
  color: var(--muted);
  line-height: 1.55;
  margin: -.25rem 0 1rem;
}
.claim-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .45rem .75rem;
  color: var(--muted);
  white-space: nowrap;
}

.door-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(.5rem, 1.2vw, .9rem);
  position: relative;
  z-index: 1;
  padding: clamp(.35rem, 1.2vw, .8rem);
}

.door-grid.image-map-grid {
  display: block;
  padding: 0;
}

.calendar-front-stage {
  position: relative;
  width: min(100%, 980px);
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
}

.calendar-front-image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

.image-door {
  position: absolute;
  z-index: 2;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #fff3bf;
  padding: 0;
  overflow: hidden;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.image-door:focus {
  outline: none;
}

.image-door::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 999px rgba(0,0,0,0);
  transition: box-shadow .18s ease, border-color .18s ease;
}

.image-door:hover,
.image-door:focus-visible {
  background: rgba(216,181,109,.07);
  box-shadow: 0 0 22px rgba(216,181,109,.28);
  transform: translateY(-1px);
}

.image-door:hover::before,
.image-door:focus-visible::before {
  border-color: transparent;
  box-shadow: inset 0 0 0 999px rgba(216,181,109,.045);
}

.image-door.available {
  border-color: transparent;
  box-shadow: none;
}

.image-door.opened {
  background: rgba(22, 17, 10, .08);
}

.image-door.locked,
.image-door.expired {
  cursor: not-allowed;
}

.image-door.locked::before,
.image-door.expired::before {
  box-shadow: none;
}

.image-door-label {
  position: absolute;
  left: .28rem;
  top: .2rem;
  width: 1.65rem;
  height: 1.65rem;
  display: none;
  place-items: center;
  border-radius: 50%;
  background: rgba(0,0,0,.52);
  color: #fff3bf;
  font-family: Georgia, serif;
  font-size: .88rem;
}

.image-door-state {
  position: absolute;
  left: .25rem;
  right: .25rem;
  bottom: .25rem;
  display: none;
  color: #fff3bf;
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-shadow: 0 1px 5px rgba(0,0,0,.75);
}

.image-door:hover .image-door-state,
.image-door:focus-visible .image-door-state,
.image-door.available .image-door-state,
.image-door.opened .image-door-state {
  display: none;
}

.preview-frame.mobile .calendar-front-stage { width: 100%; }
.preview-frame.mobile .image-door-state { display: none !important; }
.preview-frame.mobile .door-grid.image-map-grid { display: block; padding: 0; }

.preview-frame.mobile .door-grid { grid-template-columns: repeat(3, 1fr); gap: .45rem; padding: .2rem; }

.door {
  position: relative;
  min-height: clamp(8.6rem, 13vw, 12.8rem);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 94%, white), var(--surface));
  color: var(--ink);
  padding: .55rem;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045), 0 10px 24px rgba(0,0,0,.2);
  transform-style: preserve-3d;
}

.preview-frame.mobile .door { min-height: 7.4rem; padding: .42rem; }

.door::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 48.5%, rgba(255,255,255,.12) 50%, transparent 51.5%),
    linear-gradient(180deg, transparent 49%, rgba(255,255,255,.06) 50%, transparent 51%);
  opacity: .62;
  z-index: -1;
}

.door::after {
  content: "";
  position: absolute;
  inset: .35rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  pointer-events: none;
}

.door-art {
  display: block;
  width: 100%;
  height: clamp(4.1rem, 7.2vw, 6.5rem);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 4px;
  background: var(--door-image);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 -32px 38px rgba(0,0,0,.18);
}

.door-number {
  position: absolute;
  left: .55rem;
  top: .55rem;
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent-2);
  font-family: Georgia, serif;
  font-size: 1.1rem;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
}

.door-title {
  display: block;
  margin-top: .55rem;
  font-weight: 760;
  font-size: clamp(.78rem, 1vw, .95rem);
  line-height: 1.18;
}

.door-state {
  position: absolute;
  left: .55rem;
  right: .55rem;
  bottom: .5rem;
  color: color-mix(in srgb, var(--ink) 78%, var(--muted));
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.door.available {
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), 0 16px 46px color-mix(in srgb, var(--accent) 16%, transparent);
}

.door.available .door-art { filter: saturate(1.16) brightness(1.08); }
.door.opened {
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 26%, var(--surface-2)), var(--surface));
  transform: perspective(800px) rotateY(-1.5deg);
}
.door.opened .door-art { opacity: .72; }
.door.locked, .door.expired { opacity: .62; }
.door[disabled] { cursor: not-allowed; }

.art-velvet {
  --door-image:
    radial-gradient(circle at 66% 34%, rgba(255,255,255,.55) 0 8%, transparent 9%),
    radial-gradient(circle at 45% 48%, rgba(216,181,109,.92) 0 13%, transparent 14%),
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 36%),
    linear-gradient(145deg, #2c1020, #7a334a 55%, #d8b56d);
}
.art-gold {
  --door-image:
    radial-gradient(ellipse at 50% 44%, rgba(255,255,255,.62) 0 12%, transparent 13%),
    linear-gradient(90deg, transparent 32%, rgba(90,56,13,.32) 33% 67%, transparent 68%),
    linear-gradient(145deg, #38240c, #b4863e 52%, #fff0b8);
}
.art-rose {
  --door-image:
    radial-gradient(circle at 37% 40%, rgba(255,245,242,.68) 0 12%, transparent 13%),
    radial-gradient(circle at 62% 55%, rgba(126,47,64,.42) 0 18%, transparent 19%),
    linear-gradient(145deg, #6c3a3f, #ddb5aa 58%, #f8eee7);
}
.art-onyx {
  --door-image:
    radial-gradient(circle at 52% 36%, rgba(255,255,255,.42) 0 9%, transparent 10%),
    linear-gradient(90deg, transparent 43%, rgba(216,181,109,.6) 44% 56%, transparent 57%),
    linear-gradient(145deg, #050505, #343238 58%, #d8b56d);
}
.art-emerald {
  --door-image:
    radial-gradient(circle at 55% 48%, rgba(255,255,255,.48) 0 10%, transparent 11%),
    radial-gradient(circle at 34% 42%, rgba(216,181,109,.7) 0 11%, transparent 12%),
    linear-gradient(145deg, #052319, #17644c 58%, #d8b56d);
}

.calendar-widget.frontage-townhouse {
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background:
    linear-gradient(rgba(7,6,5,.58), rgba(7,6,5,.74)),
    url("assets/townhouse-front.png") center / cover no-repeat,
    linear-gradient(180deg, transparent 0 6.8rem, rgba(0,0,0,.18) 6.8rem 7rem, transparent 7rem),
    linear-gradient(90deg, transparent 0 6%, rgba(255,255,255,.055) 6% 7%, transparent 7% 93%, rgba(255,255,255,.055) 93% 94%, transparent 94%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 18%),
    linear-gradient(155deg, var(--surface), color-mix(in srgb, var(--surface-2) 90%, black));
}

.calendar-widget.frontage-jewellery {
  background:
    linear-gradient(rgba(4,7,5,.5), rgba(4,7,5,.72)),
    url("assets/jewellery-front.png") center / cover no-repeat,
    radial-gradient(ellipse at 50% 5%, rgba(255,255,255,.12), transparent 20rem),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 26rem),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4.5rem),
    linear-gradient(155deg, color-mix(in srgb, var(--surface-2) 86%, black), var(--surface));
}

.calendar-widget.frontage-jewellery .door {
  border-radius: 2px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, #111 70%, var(--surface-2)), var(--surface));
}

.calendar-widget.frontage-chateau {
  background:
    linear-gradient(rgba(23,28,26,.4), rgba(23,28,26,.68)),
    url("assets/chateau-front.png") center / cover no-repeat,
    radial-gradient(circle at 10% 12%, rgba(255,255,255,.22) 0 .12rem, transparent .13rem),
    radial-gradient(circle at 76% 18%, rgba(255,255,255,.2) 0 .1rem, transparent .11rem),
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 22%),
    repeating-linear-gradient(90deg, transparent 0 5rem, rgba(255,255,255,.045) 5rem 5.1rem),
    linear-gradient(145deg, color-mix(in srgb, var(--surface) 70%, #ffffff), var(--surface-2));
}

.calendar-widget.frontage-chateau .door {
  border-radius: 48% 48% 5px 5px;
}

.calendar-widget.frontage-boutique {
  background:
    linear-gradient(rgba(45,10,25,.48), rgba(45,10,25,.7)),
    url("assets/boutique-front.png") center / cover no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 28%, transparent) 0 1.15rem, transparent 1.15rem),
    linear-gradient(90deg, rgba(255,255,255,.07), transparent 18% 82%, rgba(255,255,255,.07)),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%),
    linear-gradient(155deg, var(--surface), color-mix(in srgb, var(--surface-2) 88%, black));
}

.calendar-widget.frontage-boutique .door-art {
  border-radius: 42% 42% 4px 4px;
}

.calendar-widget.shape-arch .door { border-radius: 48% 48% 8px 8px; }
.calendar-widget.shape-arch .door-art { border-radius: 42% 42% 4px 4px; }
.calendar-widget.shape-window .door {
  border-radius: 4px;
  border-width: 2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.calendar-widget.shape-window .door::before {
  background:
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.18) 50%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(255,255,255,.16) 50%, transparent 52%),
    radial-gradient(circle at 78% 34%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 28%);
}
.calendar-widget.shape-drawer .door {
  min-height: 7.7rem;
  border-radius: 5px;
}
.calendar-widget.shape-drawer .door-art { height: 3.6rem; }
.calendar-widget.shape-drawer .door::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1rem;
  width: 1.1rem;
  height: .32rem;
  border-radius: 999px;
  background: var(--accent-2);
  transform: translateX(-50%);
}

.editor-layout, .embed-layout {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 1rem;
  align-items: start;
}

.panel { padding: 1rem; }
.settings-panel, .door-panel, .embed-options { display: grid; gap: .9rem; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.checkbox-label input { width: auto; }
.compact-label { min-width: 8rem; }
.muted { color: var(--muted); font-size: .9rem; }
.save-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
}
.save-status {
  color: var(--success);
  font-size: .88rem;
}

.front-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
}

.front-card {
  display: grid;
  gap: .45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
  color: var(--ink);
  padding: .45rem;
  text-align: left;
}

.front-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--line);
}

.front-card span {
  font-size: .78rem;
  color: var(--muted);
}

.front-card.active {
  border-color: color-mix(in srgb, var(--accent) 66%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric { padding: 1rem; }
.metric span { color: var(--muted); }
.metric strong { display: block; font-size: 2.35rem; color: var(--accent-2); }

.chart-panel {
  max-width: 1180px;
  margin: 0 auto;
}

.door-bars { display: grid; gap: .65rem; margin-top: 1rem; }
.bar-row {
  display: grid;
  grid-template-columns: 7rem 1fr 8rem;
  gap: .8rem;
  align-items: center;
}
.bar-track {
  height: .75rem;
  border-radius: 999px;
  background: var(--soft);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.code-panel pre {
  overflow: auto;
  min-height: 15rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0,0,0,.28);
  color: var(--accent-2);
  white-space: pre-wrap;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(14px);
}

.modal-backdrop[hidden] { display: none; }

.reveal-modal {
  position: relative;
  width: min(100%, 58rem);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 1rem;
  animation: revealIn .32s ease both;
}

@keyframes revealIn {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.close-button {
  position: absolute;
  right: .7rem;
  top: .7rem;
  z-index: 1;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--ink);
  font-size: 1.4rem;
}

.product-art {
  min-height: 25rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--art-bg, linear-gradient(145deg, #2d1b1c, #d8b56d));
  position: relative;
  overflow: hidden;
}

.product-art::before {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 45% 45% 8px 8px;
  border: 1px solid rgba(255,255,255,.35);
  background: linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.05));
  box-shadow: 0 22px 80px rgba(0,0,0,.35);
}

.product-art::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 18%;
  height: 22%;
  border-radius: 50%;
  background: rgba(0,0,0,.22);
  filter: blur(18px);
}

.modal-copy { padding: 1rem; }
.modal-copy h2 { font-family: Georgia, serif; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1; margin: .35rem 0; }
.offer-row { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; margin: 1rem 0; }
.offer-row span, .offer-row code {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .55rem .7rem;
  background: var(--soft);
}

.email-form {
  display: grid;
  gap: .7rem;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: .8rem 0;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 40;
  transform: translateX(-50%) translateY(150%);
  opacity: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  padding: .8rem 1rem;
  transition: .2s ease;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#confettiCanvas {
  position: fixed;
  inset: 0;
  z-index: 35;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  #confettiCanvas { display: none; }
}

@media (max-width: 900px) {
  .topbar { align-items: stretch; flex-wrap: wrap; }
  .nav-tabs { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; }
  .hero-shell, .editor-layout, .embed-layout, .reveal-modal, .season-home-grid, .template-workspace, .campaign-sell-grid, .seo-content-band { grid-template-columns: 1fr; }
  .hero-shell { min-height: auto; padding-top: 1rem; }
  .hero-visual { min-height: 24rem; }
  .feature-band, .metric-grid, .pricing-band, .campaign-range, .faq-band { grid-template-columns: 1fr 1fr; }
  .template-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .halloween-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .halloween-door { min-height: 12rem; }
  .split { align-items: flex-start; flex-direction: column; }
  .status-panel { width: 100%; text-align: left; }
}

@media (max-width: 620px) {
  main { padding: .85rem; }
  .brand { width: 100%; }
  .topbar > .primary-button { display: none; }
  .hero-copy h1 { font-size: 3rem; }
  .feature-band, .metric-grid, .pricing-band, .field-grid, .campaign-range, .template-door-grid, .faq-band { grid-template-columns: 1fr; }
  .template-gallery-heading { display: block; }
  .template-gallery-grid { grid-template-columns: 1fr; }
  .calendar-template-card { min-height: 14rem; }
  .halloween-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-strip { grid-template-columns: 1fr; }
  .offer-strip strong { grid-row: auto; }
  .bundle-template-card, .bundle-template-preview { grid-template-columns: 1fr; }
  .calendar-toolbar { flex-direction: column; }
  .door-grid, .preview-frame.mobile .door-grid { grid-template-columns: repeat(2, 1fr); }
  .door { min-height: 7.8rem; }
  .bar-row { grid-template-columns: 1fr; gap: .35rem; }
  .product-art { min-height: 17rem; }
}