/* Base reset — the published site has no globals.css to inherit from. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; display: block; }
.siteSkip {
  position: fixed;
  z-index: 999;
  top: 10px;
  left: 10px;
  translate: 0 -160%;
  padding: 11px 16px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(9, 25, 18, 0.22);
  color: #10291f;
  font: 700 0.86rem/1.2 var(--font-body);
  transition: translate 0.16s ease;
}
.siteSkip:focus { translate: 0; outline: 3px solid #b7df3b; outline-offset: 2px; }
:root {
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);
}

/* ---------- Generated preview ---------- */
.previewFrame {
  /* Default tokens mirror the "ivy" palette; the live palette's inline
     vars (set in SitePreview via PALETTE_VARS) override every one of
     these, so switching palettes restyles the entire generated site. */
  --bg: #f9f6ed;
  --bg-raised: #fffef8;
  --bg-sunken: #efe9d9;
  --text: #182018;
  --text-soft: #445043;
  --text-faint: #707b6c;
  --line: rgba(24, 32, 24, 0.12);
  --line-strong: rgba(24, 32, 24, 0.24);
  --gen-bg: #16382a;
  --gen-text: #f4f1e4;
  --gen-text-soft: #c8d5c2;
  --gen-accent: #d9a43e;
  --gen-accent-2: #7fb069;
  --gen-accent-ink: #251b03;
  --gen-ink: #16382a;

  border-radius: var(--gen-radius-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--bg);
  /* Explicit color is load-bearing: without it, descendants that rely on
     inheritance get the *app's* text color (computed at body level), not
     the palette's — invisible text on the dark "midnight" palette. */
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: normal;
  /* The generated site must respond to the *canvas* width, not the browser
     viewport — in the device preview the canvas is 390px while the viewport
     is still ~1440px, so plain media queries would never fire and the
     mobile layout would render as desktop. */
  container-type: inline-size;
  container-name: site;
}
.previewFrameFullPage {
  border-radius: 0;
  border: none;
  box-shadow: none;
  min-height: 100%;
}


/* ---------- Shared hero text elements (positioned by each theme's wrapper) ---------- */
.siteName {
  font-family: var(--theme-font-display, var(--font-display));
  font-size: clamp(1.6rem, 3cqw, 2.2rem);
  font-weight: 600;
}
.tagline {
  margin-top: 10px;
  font-family: var(--theme-font-display, var(--font-display));
  font-size: 1.15rem;
  font-weight: 500;
  max-width: 46ch;
}
.subheadline {
  margin-top: 8px;
  font-size: 0.95rem;
  max-width: 50ch;
}
.ctaRow {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ctaPrimary,
.ctaGhost {
  padding: 12px 24px;
  border-radius: var(--gen-radius-pill);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.ctaPrimary {
  background: var(--gen-accent);
  color: var(--gen-accent-ink);
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--gen-accent) 65%, transparent);
}
.ctaGhost {
  border: 1.5px solid color-mix(in srgb, var(--gen-text) 32%, transparent);
  color: var(--gen-text);
}

/* ---------- Hero: Editorial (magazine) ---------- */
.heroEditorial {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5cqw, 56px);
  align-items: center;
  padding: clamp(44px, 8cqw, 80px) clamp(24px, 6cqw, 64px);
  background:
    radial-gradient(ellipse 60% 70% at 100% 0%, color-mix(in srgb, var(--gen-accent) 9%, transparent), transparent 60%),
    var(--bg-raised);
  color: var(--text);
}
.heroEditorial.heroNoImage {
  grid-template-columns: 1fr;
}
.heroEditorial .heroEyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gen-ink);
  border-bottom: 2px solid var(--gen-accent);
  padding-bottom: 4px;
  margin-bottom: 16px;
}
.heroEditorial .siteName {
  font-size: clamp(2.1rem, 5.4cqw, 3.4rem);
  line-height: 1.04;
  color: var(--text);
}
.heroEditorial .tagline {
  color: var(--text);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2cqw, 1.4rem);
}
.heroEditorial .subheadline {
  color: var(--text-soft);
}
.heroEditorial .ctaGhost {
  border-color: var(--line-strong);
  color: var(--text);
}
.heroEditorialImageWrap {
  position: relative;
}
/* Offset accent frame behind the photo — the layered magazine look. */
.heroEditorialImageWrap::before {
  content: "";
  position: absolute;
  inset: 14px -12px -14px 12px;
  border-radius: var(--gen-radius-lg);
  background: color-mix(in srgb, var(--gen-accent) 32%, transparent);
  transform: rotate(-2deg);
}
.heroEditorialImage {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--gen-radius-lg);
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  transform: rotate(2deg);
  box-shadow: 0 24px 50px -22px color-mix(in srgb, var(--gen-bg) 55%, transparent);
  filter: saturate(1.05) contrast(1.02);
}
@container site (max-width: 700px) {
  .heroEditorial {
    grid-template-columns: 1fr;
  }
}

/* ---------- Hero: Precision (SaaS) ---------- */
.heroPrecision {
  text-align: center;
  padding: clamp(52px, 9cqw, 92px) clamp(24px, 5cqw, 44px);
  /* Duotone wash: primary accent from one corner, secondary from the other. */
  background:
    radial-gradient(ellipse 70% 60% at 18% 0%, color-mix(in srgb, var(--gen-accent) 15%, transparent), transparent 62%),
    radial-gradient(ellipse 60% 55% at 85% 6%, color-mix(in srgb, var(--gen-accent-2, var(--gen-accent)) 13%, transparent), transparent 62%),
    var(--bg);
  color: var(--text);
}
.heroPrecision .heroEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gen-ink);
  background: color-mix(in srgb, var(--gen-accent) 16%, var(--bg-raised));
  border: 1px solid color-mix(in srgb, var(--gen-accent) 30%, var(--line));
  padding: 5px 14px;
  border-radius: var(--gen-radius-pill);
  margin-bottom: 20px;
}
.heroPrecision .siteName {
  font-size: clamp(1.5rem, 2.6cqw, 1.9rem);
  font-weight: 600;
  color: var(--text-soft);
}
.heroPrecision .tagline {
  margin: 8px auto 0;
  font-size: clamp(1.6rem, 3.4cqw, 2.4rem);
  font-weight: 600;
  color: var(--text);
  max-width: 26ch;
  letter-spacing: -0.01em;
}
.heroPrecision .subheadline {
  margin: 14px auto 0;
  color: var(--text-soft);
  max-width: 44ch;
}
.heroPrecision .ctaRow {
  justify-content: center;
}
.heroPrecision .ctaGhost {
  border-color: var(--line-strong);
  color: var(--text);
}
.heroPrecisionCard {
  margin: 40px auto 0;
  width: min(520px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: var(--gen-radius-lg);
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  border: 1px solid color-mix(in srgb, var(--gen-accent) 28%, var(--line));
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--bg-raised) 55%, transparent),
    0 28px 60px -26px color-mix(in srgb, var(--gen-bg) 55%, transparent);
  filter: saturate(1.05);
}

/* ---------- Hero: Lifestyle (full-bleed + glass) ---------- */
.heroLifestyle {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  padding: clamp(24px, 5cqw, 44px);
  background-color: var(--gen-bg);
  background-size: cover;
  background-position: center;
}
.heroLifestyle::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Palette-tinted cinematic wash instead of plain black. */
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--gen-bg) 82%, black) 0%,
    color-mix(in srgb, var(--gen-bg) 30%, transparent) 42%,
    transparent 68%
  );
}
.heroGlassCard {
  position: relative;
  z-index: 1;
  /* Dark frosted glass, not light — a light tint leaves white headline text
     washed out over bright photography. */
  background: color-mix(in srgb, black 46%, transparent);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid color-mix(in srgb, white 22%, transparent);
  border-radius: var(--gen-radius-lg);
  padding: clamp(20px, 3cqw, 30px) clamp(24px, 4cqw, 34px);
  max-width: 480px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.45);
}
.heroGlassCard .siteName,
.heroGlassCard .tagline,
.heroGlassCard .subheadline {
  color: #f6f4ef;
}
.heroGlassCard .subheadline {
  color: rgba(246, 244, 239, 0.82);
}
.heroGlassCard .ctaGhost {
  border-color: rgba(246, 244, 239, 0.4);
  color: #f6f4ef;
}

/* ---------- Hero: Noir (dark cinematic luxury) ---------- */
.heroLuxe {
  text-align: center;
  padding: clamp(56px, 10cqw, 104px) clamp(24px, 5cqw, 44px) clamp(44px, 7cqw, 72px);
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, color-mix(in srgb, var(--gen-accent) 14%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 40% at 8% 100%, color-mix(in srgb, var(--gen-accent-2, var(--gen-accent)) 8%, transparent), transparent 60%),
    color-mix(in srgb, black 58%, var(--gen-bg));
  color: var(--gen-text);
}
.heroLuxe .heroEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gen-accent);
  margin-bottom: 22px;
}
.heroLuxe .heroEyebrow::before,
.heroLuxe .heroEyebrow::after {
  content: "";
  width: 36px;
  height: 1px;
  background: color-mix(in srgb, var(--gen-accent) 55%, transparent);
}
.heroLuxe .siteName {
  font-size: clamp(2.2rem, 5cqw, 3.6rem);
  font-weight: 600;
  color: var(--gen-text);
}
.heroLuxe .tagline {
  margin: 14px auto 0;
  font-style: italic;
  font-size: 1.25rem;
  color: color-mix(in srgb, var(--gen-text) 88%, transparent);
  max-width: 36ch;
}
.heroLuxe .subheadline {
  margin: 10px auto 0;
  color: color-mix(in srgb, var(--gen-text) 66%, transparent);
}
.heroLuxe .ctaRow {
  justify-content: center;
}
.heroLuxe .ctaGhost {
  border-color: color-mix(in srgb, var(--gen-text) 35%, transparent);
  color: var(--gen-text);
}
.heroLuxeImage {
  margin: 44px auto 0;
  max-width: 780px;
  aspect-ratio: 21 / 9;
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  border: 1px solid color-mix(in srgb, var(--gen-accent) 45%, transparent);
  border-radius: var(--gen-radius-sm);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
  filter: saturate(0.92) contrast(1.05);
}

/* ---------- Hero: Pop (chunky, sticker energy) ---------- */
.heroPlayful {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 36px;
  align-items: center;
  padding: clamp(40px, 7cqw, 72px) clamp(28px, 5cqw, 48px);
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--gen-accent) 26%, transparent), transparent 42%),
    radial-gradient(circle at 4% 92%, color-mix(in srgb, var(--gen-accent-2, var(--gen-accent)) 20%, transparent), transparent 38%),
    color-mix(in srgb, var(--gen-accent) 12%, var(--bg));
  color: var(--text);
}
.heroPlayful.heroNoImage {
  grid-template-columns: 1fr;
}
.heroPlayful .heroEyebrow {
  display: inline-block;
  background: var(--bg-raised);
  border: 2px solid var(--text);
  border-radius: var(--gen-radius-pill);
  padding: 6px 14px;
  font-weight: 700;
  font-size: 0.78rem;
  box-shadow: 3px 3px 0 var(--text);
  margin-bottom: 18px;
}
.heroPlayful .siteName {
  font-size: clamp(2.1rem, 4.6cqw, 3.2rem);
  line-height: 1.02;
  font-weight: 700;
}
.heroPlayful .tagline {
  font-size: 1.3rem;
  font-weight: 600;
}
.heroPlayful .subheadline {
  color: var(--text-soft);
}
.heroPlayful .ctaPrimary {
  border: 2px solid var(--text);
  border-radius: var(--gen-radius-md);
  font-weight: 700;
  box-shadow: 4px 4px 0 var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.heroPlayful .ctaPrimary:hover {
  transform: translate(-1px, -2px);
  box-shadow: 6px 7px 0 var(--text);
}
.heroPlayful .ctaGhost {
  border: 2px solid var(--text);
  border-radius: var(--gen-radius-md);
  background: var(--bg-raised);
  color: var(--text);
  font-weight: 700;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--text) 25%, transparent);
}
.heroPlayfulImageWrap {
  position: relative;
}
.heroPlayfulImage {
  aspect-ratio: 4 / 3.4;
  border-radius: var(--gen-radius-lg);
  border: 3px solid var(--text);
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  transform: rotate(2.5deg);
  box-shadow: 10px 10px 0 var(--gen-accent);
  filter: saturate(1.12);
}
@container site (max-width: 700px) {
  .heroPlayful {
    grid-template-columns: 1fr;
  }
  .heroLuxeImage {
    aspect-ratio: 16 / 10;
  }
}

.siteSection {
  padding: clamp(56px, 9cqw, 96px) clamp(24px, 6cqw, 80px);
}
.siteAbout p {
  color: var(--text-soft);
  line-height: 1.7;
  font-size: 1.02rem;
  max-width: 62ch;
}

/* ---------- Real section headings ---------- */
.sectionHeading {
  margin-bottom: 38px;
}
.sectionHeading h2 {
  font-family: var(--theme-font-display, var(--font-display));
  font-size: clamp(1.65rem, 3.4cqw, 2.4rem);
  font-weight: 600;
  line-height: 1.12;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.015em;
}
.sectionHeading p {
  margin-top: 10px;
  color: var(--text-faint);
  font-size: 1rem;
}
.previewFrame[data-theme-layout="minimal"] .sectionHeading {
  text-align: center;
}
.previewFrame[data-theme-layout="minimal"] .sectionHeading p {
  margin-left: auto;
  margin-right: auto;
  max-width: 46ch;
}
.previewFrame[data-theme-layout="editorial"] .sectionHeading h2 {
  padding-bottom: 14px;
  border-bottom: 2px solid var(--gen-accent);
  display: inline-block;
}
.previewFrame[data-theme-layout="luxe"] .sectionHeading {
  text-align: center;
}
.previewFrame[data-theme-layout="luxe"] .sectionHeading h2 {
  font-size: clamp(1.35rem, 2.3cqw, 1.8rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.previewFrame[data-theme-layout="luxe"] .sectionHeading h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: var(--gen-accent);
  margin: 14px auto 0;
}
.previewFrame[data-theme-layout="luxe"] .sectionHeading p {
  margin-left: auto;
  margin-right: auto;
  max-width: 46ch;
}
.previewFrame[data-theme-layout="playful"] .sectionHeading h2 {
  display: inline;
  font-weight: 700;
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--gen-accent) 45%, transparent) 62%);
}

/* ---------- About section (full) ---------- */
.aboutLayout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(36px, 6cqw, 56px);
  align-items: center;
}
.aboutImage {
  aspect-ratio: 4 / 3;
  border-radius: var(--gen-radius-lg);
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
  box-shadow: 0 22px 48px -24px color-mix(in srgb, var(--gen-bg) 50%, transparent);
}
.previewFrame[data-theme-layout="playful"] .aboutImage {
  border: 3px solid var(--text);
  border-radius: var(--gen-radius-lg);
  box-shadow: 8px 8px 0 var(--gen-accent);
  transform: rotate(-1.5deg);
}
.previewFrame[data-theme-layout="luxe"] .aboutImage {
  border-radius: var(--gen-radius-sm);
  border: 1px solid color-mix(in srgb, var(--gen-accent) 40%, transparent);
  filter: saturate(0.92) contrast(1.04);
}

/* ---------- About teaser ---------- */
.aboutTeaser {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(36px, 6cqw, 56px);
  align-items: center;
  background: color-mix(in srgb, var(--gen-accent) 7%, var(--bg-sunken));
}
.aboutTeaserImage {
  aspect-ratio: 5 / 4;
  border-radius: var(--gen-radius-lg);
  background-color: var(--bg);
  background-size: cover;
  background-position: center;
  box-shadow: 0 22px 48px -24px color-mix(in srgb, var(--gen-bg) 50%, transparent);
}
.previewFrame[data-theme-layout="playful"] .aboutTeaserImage {
  border: 3px solid var(--text);
  border-radius: var(--gen-radius-lg);
  box-shadow: 8px 8px 0 var(--gen-accent);
  transform: rotate(1.5deg);
}
.previewFrame[data-theme-layout="luxe"] .aboutTeaserImage {
  border-radius: var(--gen-radius-sm);
  border: 1px solid color-mix(in srgb, var(--gen-accent) 40%, transparent);
}
.aboutTeaserText {
  color: var(--text-soft);
  line-height: 1.7;
  max-width: 54ch;
}
.textLink {
  display: inline-block;
  margin-top: 20px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--gen-ink);
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.textLink:hover {
  opacity: 0.7;
  transform: translateX(2px);
}

/* ---------- Gallery strip ---------- */
.galleryStrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.galleryStripTile {
  aspect-ratio: 3 / 2;
  border-radius: var(--gen-radius-md);
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
  transition: transform 0.25s ease;
}
.galleryStripTile:hover {
  transform: scale(1.02);
}
.previewFrame[data-theme-layout="playful"] .galleryStripTile {
  border: 3px solid var(--text);
  border-radius: var(--gen-radius-lg);
}
.previewFrame[data-theme-layout="playful"] .galleryStripTile:nth-child(odd) {
  transform: rotate(-1.2deg);
}
.previewFrame[data-theme-layout="playful"] .galleryStripTile:nth-child(even) {
  transform: rotate(1.2deg);
}
.previewFrame[data-theme-layout="luxe"] .galleryStripTile {
  border-radius: var(--gen-radius-sm);
  filter: saturate(0.92) contrast(1.04);
}

.testimonialSection {
  background: var(--bg-sunken);
}
.previewFrame[data-theme-layout="minimal"] .testimonialSection {
  background: transparent;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

@container site (max-width: 760px) {
  .aboutLayout,
  .aboutTeaser {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .siteSection {
    padding: 44px 24px;
  }
  .galleryStrip {
    grid-template-columns: 1fr;
  }
  .galleryGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Offerings: Editorial (asymmetric magazine grid) ---------- */
.offeringsEditorial {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.offeringEditorialCard.offeringFeatured {
  grid-column: 1 / -1;
}
.offeringEditorialCard.offeringFeatured .offeringEditorialImage {
  aspect-ratio: 21 / 9;
}
.offeringEditorialImage {
  aspect-ratio: 4 / 3;
  border-radius: var(--gen-radius-md);
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  margin-bottom: 16px;
  filter: saturate(1.05) contrast(1.02);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.offeringEditorialCard:hover .offeringEditorialImage {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -20px color-mix(in srgb, var(--gen-bg) 55%, transparent);
}
.offeringEditorialHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.priceBadge {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gen-ink);
  white-space: nowrap;
  flex: none;
}
.offeringEditorialName {
  font-family: var(--theme-font-display, var(--font-display));
  font-weight: 600;
  font-size: 1.02rem;
}
.offeringEditorialDesc {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.55;
}
@container site (max-width: 640px) {
  .offeringsEditorial {
    grid-template-columns: 1fr;
  }
}

/* ---------- Offerings: Precision (list rows) ---------- */
.offeringsPrecision {
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--gen-radius-lg);
  padding: 10px 20px;
  box-shadow: 0 20px 44px -30px color-mix(in srgb, var(--gen-bg) 50%, transparent);
}
.offeringPrecisionRow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 6px;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.offeringPrecisionRow:last-child {
  border-bottom: none;
}
.offeringPrecisionRow:hover {
  background: color-mix(in srgb, var(--gen-accent) 6%, transparent);
  padding-left: 12px;
}
.offeringPrecisionThumb {
  width: 52px;
  height: 52px;
  border-radius: var(--gen-radius-md);
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  flex: none;
}
.offeringPrecisionBody {
  flex: 1;
  min-width: 0;
}
.offeringPrecisionName {
  font-weight: 600;
  font-size: 0.96rem;
}
.offeringPrecisionDesc {
  margin-top: 3px;
  font-size: 0.86rem;
  color: var(--text-soft);
}
.offeringPrecisionPrice {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
  flex: none;
}

/* ---------- Offerings: Lifestyle (staggered glass cards) ---------- */
.offeringsLifestyle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 18px;
}
.offeringLifestyleCard {
  border-radius: var(--gen-radius-lg);
  overflow: hidden;
  background: var(--bg-raised);
  box-shadow: 0 14px 34px -22px color-mix(in srgb, var(--gen-bg) 60%, transparent);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.offeringLifestyleCard.offeringStagger {
  margin-top: 26px;
}
.offeringLifestyleCard:hover {
  transform: translateY(-5px) scale(1.012);
  box-shadow: 0 24px 48px -20px color-mix(in srgb, var(--gen-bg) 60%, transparent);
}
.offeringLifestyleImage {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 10px;
  filter: saturate(1.08) contrast(1.02);
}
.offeringLifestylePrice {
  /* Dark glass, not light — a light tint reads fine over dark photos but
     goes invisible over light/white product shots. Darkening the backdrop
     before blurring keeps white text legible regardless of the photo. */
  background: color-mix(in srgb, black 45%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: white;
  padding: 5px 11px;
  border-radius: var(--gen-radius-pill);
  font-size: 0.76rem;
  font-weight: 600;
  font-family: var(--font-mono);
}
.offeringLifestyleBody {
  padding: 16px 18px 18px;
}
.offeringLifestyleName {
  font-family: var(--theme-font-display, var(--font-display));
  font-weight: 600;
  font-size: 1rem;
}
.offeringLifestyleDesc {
  margin-top: 6px;
  font-size: 0.88rem;
  color: var(--text-soft);
  line-height: 1.5;
}
@container site (max-width: 640px) {
  .offeringsLifestyle {
    grid-template-columns: 1fr;
  }
  .offeringLifestyleCard.offeringStagger {
    margin-top: 0;
  }
}

/* ---------- Offerings: Noir (numbered ledger rows) ---------- */
.offeringsLuxe {
  display: flex;
  flex-direction: column;
  max-width: 760px;
  margin: 0 auto;
}
.offeringLuxeRow {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--gen-accent) 32%, var(--line));
  transition: background 0.15s ease;
}
.offeringLuxeRow:hover {
  background: color-mix(in srgb, var(--gen-accent) 6%, transparent);
}
.offeringLuxeRow:last-child {
  border-bottom: none;
}
.offeringLuxeNum {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--gen-accent);
  flex: none;
}
.offeringLuxeThumb {
  width: 64px;
  height: 64px;
  border-radius: var(--gen-radius-sm);
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  flex: none;
  filter: saturate(0.9) contrast(1.05);
}
.offeringLuxeBody {
  flex: 1;
  min-width: 0;
}
.offeringLuxeName {
  font-family: var(--theme-font-display, var(--font-display));
  font-size: 1.12rem;
  font-weight: 600;
}
.offeringLuxeDesc {
  margin-top: 4px;
  font-size: 0.88rem;
  color: var(--text-soft);
  line-height: 1.55;
}
.offeringLuxePrice {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--gen-ink);
  flex: none;
}

/* ---------- Offerings: Pop (chunky sticker cards) ---------- */
.offeringsPlayful {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 20px;
}
.offeringPlayfulCard {
  background: var(--bg-raised);
  border: 2.5px solid var(--text);
  border-radius: var(--gen-radius-lg);
  overflow: hidden;
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--gen-accent) 75%, transparent);
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}
.offeringPlayfulCard:nth-child(even) {
  transform: rotate(0.6deg);
}
.offeringPlayfulCard:nth-child(odd) {
  transform: rotate(-0.4deg);
}
.offeringPlayfulCard:hover {
  transform: translate(-2px, -4px) rotate(0deg);
  box-shadow: 10px 12px 0 color-mix(in srgb, var(--gen-accent) 75%, transparent);
}
.offeringPlayfulImage {
  aspect-ratio: 16 / 10;
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  border-bottom: 2.5px solid var(--text);
  filter: saturate(1.12);
}
.offeringPlayfulBody {
  padding: 14px 16px 18px;
}
.offeringPlayfulHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.offeringPlayfulName {
  font-family: var(--theme-font-display, var(--font-display));
  font-weight: 700;
  font-size: 1.05rem;
}
.offeringPlayfulPrice {
  background: var(--gen-accent);
  color: var(--gen-accent-ink);
  padding: 3px 10px;
  border-radius: var(--gen-radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
}
.offeringPlayfulDesc {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.5;
}
@container site (max-width: 640px) {
  .offeringsPlayful {
    grid-template-columns: 1fr;
  }
}

.contactRow {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  font-size: 0.92rem;
}
.contactRow div {
  display: grid;
  gap: 3px;
}
.label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.resultActions {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.secondaryBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: var(--gen-radius-pill);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s ease, color 0.15s ease;
}
.secondaryBtn:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.secondaryBtn:active {
  transform: scale(0.96);
}

/* ---------- Gallery section ---------- */
.galleryGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.galleryTile {
  aspect-ratio: 4 / 3;
  border-radius: var(--gen-radius-md);
  background-color: var(--bg-sunken);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  padding: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  filter: saturate(1.05) contrast(1.02);
}
.galleryTile:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--gen-bg) 55%, transparent);
}
.galleryCaption {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--bg-raised) 72%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: var(--gen-radius-pill);
}

/* ---------- CTA banner section ---------- */
.ctaBanner {
  padding: clamp(32px, 5cqw, 44px) clamp(28px, 6cqw, 56px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* A rich brand moment: deep block color sweeping toward its accent. */
  background: linear-gradient(
    100deg,
    var(--gen-bg) 0%,
    color-mix(in srgb, var(--gen-accent) 30%, var(--gen-bg)) 100%
  );
}
.ctaBanner span {
  font-family: var(--theme-font-display, var(--font-display));
  font-size: clamp(1.1rem, 2.4cqw, 1.4rem);
  font-weight: 600;
  color: var(--gen-text);
}
.ctaBannerBtn {
  padding: 12px 24px;
  border-radius: var(--gen-radius-pill);
  background: var(--gen-accent);
  color: var(--gen-accent-ink);
  font-size: 0.9rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  box-shadow: 0 10px 26px -10px color-mix(in srgb, black 45%, transparent);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.ctaBannerBtn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.previewFrame[data-theme-layout="playful"] .ctaBannerBtn {
  border: 2px solid var(--text);
  border-radius: var(--gen-radius-md);
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--text);
}


/* ---------- Theme layout variants (gallery — hero/offerings are branched in JS) ---------- */
.previewFrame[data-theme-layout="bold"] .galleryGrid {
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.previewFrame[data-theme-layout="bold"] .galleryTile {
  border-radius: var(--gen-radius-sm);
  border: none;
}
.previewFrame[data-theme-layout="minimal"] .galleryGrid {
  grid-template-columns: repeat(2, 1fr);
}
.previewFrame[data-theme-layout="minimal"] .galleryTile {
  background-color: transparent;
  border: 1px solid var(--line);
}
.previewFrame[data-theme-layout="luxe"] .galleryGrid {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.previewFrame[data-theme-layout="luxe"] .galleryTile {
  border-radius: var(--gen-radius-sm);
  border: 1px solid color-mix(in srgb, var(--gen-accent) 35%, transparent);
  filter: saturate(0.92) contrast(1.04);
}
.previewFrame[data-theme-layout="playful"] .galleryGrid {
  gap: 16px;
}
.previewFrame[data-theme-layout="playful"] .galleryTile {
  border: 3px solid var(--text);
  border-radius: var(--gen-radius-lg);
}
.previewFrame[data-theme-layout="playful"] .galleryTile:nth-child(odd) {
  transform: rotate(-1deg);
}
.previewFrame[data-theme-layout="playful"] .galleryTile:nth-child(even) {
  transform: rotate(1deg);
}
.previewFrame[data-theme-layout="playful"] .galleryTile:hover {
  transform: translateY(-3px) rotate(0deg);
}

/* ---------- Testimonials section ---------- */
.testimonialGrid {
  display: grid;
  gap: 14px;
}
@container site (min-width: 640px) {
  .testimonialGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.testimonialCard {
  border: 1px solid var(--line);
  border-radius: var(--gen-radius-lg);
  padding: 22px 24px;
  background: var(--bg-raised);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.testimonialCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -18px color-mix(in srgb, var(--gen-bg) 45%, transparent);
}
.testimonialQuote {
  font-family: var(--theme-font-display, var(--font-display));
  font-size: 1.02rem;
  font-style: italic;
  color: var(--text);
  line-height: 1.55;
}
.testimonialQuote::before {
  content: "“ ";
  color: var(--gen-accent);
  font-size: 1.6em;
  line-height: 0;
  vertical-align: -0.28em;
  margin-right: 2px;
  font-style: normal;
}
.testimonialAuthor {
  display: block;
  margin-top: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-soft);
}

/* ---------- FAQ section ---------- */
.faqList {
  display: grid;
  gap: 10px;
}
.faqItem {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--gen-radius-md);
  padding: 16px 20px;
  transition: border-color 0.15s ease;
}
.faqItem:hover {
  border-color: color-mix(in srgb, var(--gen-accent) 45%, var(--line));
}
.faqItem summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--text);
  list-style: none;
}
.faqItem summary::-webkit-details-marker {
  display: none;
}
.faqItem summary::before {
  content: "+";
  display: inline-block;
  width: 1em;
  color: var(--gen-ink);
  font-weight: 700;
}
.faqItem[open] summary::before {
  content: "\2212";
}
.faqItem p {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--text-soft);
  line-height: 1.55;
  padding-left: 1em;
}

.previewFrame[data-theme-layout="minimal"] .testimonialCard {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 16px 0;
}
.previewFrame[data-theme-layout="minimal"] .testimonialGrid {
  grid-template-columns: 1fr;
}
.previewFrame[data-theme-layout="bold"] .testimonialCard {
  border: none;
  border-radius: var(--gen-radius-sm);
  background: color-mix(in srgb, var(--gen-bg) 8%, var(--bg));
}
.previewFrame[data-theme-layout="luxe"] .testimonialCard {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--gen-accent) 30%, var(--line));
  border-radius: var(--gen-radius-sm);
}
.previewFrame[data-theme-layout="luxe"] .testimonialQuote::before {
  content: "“";
  display: block;
  font-size: 2rem;
  line-height: 0.6;
  color: var(--gen-accent);
  margin-bottom: 8px;
}
.previewFrame[data-theme-layout="playful"] .testimonialCard {
  border: 2.5px solid var(--text);
  border-radius: var(--gen-radius-lg);
  box-shadow: 5px 5px 0 color-mix(in srgb, var(--gen-accent) 65%, transparent);
}
.previewFrame[data-theme-layout="playful"] .testimonialCard:hover {
  transform: translate(-1px, -3px);
  box-shadow: 7px 8px 0 color-mix(in srgb, var(--gen-accent) 65%, transparent);
}
.previewFrame[data-theme-layout="playful"] .faqItem {
  border: 2.5px solid var(--text);
  border-radius: var(--gen-radius-lg);
}
.previewFrame[data-theme-layout="luxe"] .faqItem {
  background: transparent;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gen-accent) 30%, var(--line));
  border-radius: 0;
}
.previewFrame[data-theme-layout="luxe"] .genFooter {
  background: linear-gradient(180deg, color-mix(in srgb, black 58%, var(--gen-bg)) 0%, #0a0908 100%);
}


/* ---------- Generated site: header ---------- */
.genHeader {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 20px clamp(28px, 5cqw, 72px);
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
  /* Each section sits in a Reveal wrapper whose transform creates a
     stacking context, so a static header would be painted *under* the
     following section — the Editorial hero's rotated image then overlaps
     the nav and swallows its clicks. */
  position: relative;
  z-index: 5;
}
.genWordmark {
  font-family: var(--theme-font-display, var(--font-display));
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
/* Accent full-stop after the wordmark — a small, confident brand touch. */
.genWordmark::after {
  content: ".";
  color: var(--gen-accent);
}
.genNav {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
  flex-wrap: wrap;
}
.genNavLink {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--text-soft);
  cursor: pointer;
  transition: color 0.15s ease;
}
.genNavLink:hover {
  color: var(--text);
}
.genNavLinkActive {
  color: var(--text);
  font-weight: 600;
}
.genHeaderCta {
  padding: 9px 18px;
  border-radius: var(--gen-radius-pill);
  background: var(--gen-bg);
  color: var(--gen-text);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}
.genNav + .genHeaderCta {
  margin-left: 0;
}
.genHeader > .genWordmark + .genHeaderCta {
  margin-left: auto;
}
.previewFrame[data-theme-layout="minimal"] .genHeader {
  justify-content: center;
  background: var(--bg);
}
.previewFrame[data-theme-layout="bold"] .genHeaderCta {
  background: var(--gen-accent);
  color: var(--gen-accent-ink);
}
.previewFrame[data-theme-layout="luxe"] .genHeader {
  background: color-mix(in srgb, black 58%, var(--gen-bg));
  border-bottom: 1px solid color-mix(in srgb, var(--gen-accent) 35%, transparent);
}
.previewFrame[data-theme-layout="luxe"] .genWordmark,
.previewFrame[data-theme-layout="luxe"] .genNavLink {
  color: color-mix(in srgb, var(--gen-text) 80%, transparent);
}
.previewFrame[data-theme-layout="luxe"] .genWordmark,
.previewFrame[data-theme-layout="luxe"] .genNavLinkActive {
  color: var(--gen-text);
}
.previewFrame[data-theme-layout="luxe"] .genHeaderCta {
  background: transparent;
  border: 1px solid var(--gen-accent);
  color: var(--gen-accent);
  border-radius: var(--gen-radius-sm);
}
.previewFrame[data-theme-layout="playful"] .genHeader {
  border-bottom: 2.5px solid var(--text);
}
.previewFrame[data-theme-layout="playful"] .genHeaderCta {
  background: var(--gen-accent);
  color: var(--gen-accent-ink);
  border: 2px solid var(--text);
  border-radius: var(--gen-radius-md);
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--text);
}

/* ---------- Generated site: footer ---------- */
.genFooter {
  padding: 60px clamp(24px, 6cqw, 80px) 28px;
  background: linear-gradient(180deg, var(--gen-bg) 0%, color-mix(in srgb, black 24%, var(--gen-bg)) 100%);
  border-top: 3px solid var(--gen-accent);
  color: var(--gen-text);
}
.genFooterTop {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid color-mix(in srgb, var(--gen-text) 18%, transparent);
}
.genFooterName {
  font-family: var(--theme-font-display, var(--font-display));
  font-size: 1.2rem;
  font-weight: 600;
}
.genFooterBlurb {
  margin-top: 10px;
  color: var(--gen-text-soft);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 40ch;
}
.genFooterCol {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.genFooterColTitle {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gen-accent);
  font-weight: 600;
  margin-bottom: 2px;
}
.genFooterLink {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--gen-text-soft);
  cursor: pointer;
  transition: color 0.15s ease;
}
.genFooterLink:hover {
  color: var(--gen-text);
}
.genFooterItem {
  font-size: 0.9rem;
  color: var(--gen-text-soft);
}
.genFooterBottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding-top: 22px;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--gen-text) 62%, transparent);
}
.genFooterCredit {
  color: var(--gen-accent);
  font-weight: 600;
}
@container site (max-width: 760px) {
  .genFooterTop {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Stack the header rather than letting it wrap. A wordmark + 5 nav links +
   CTA already overflows a 834px tablet (dropping "Contact" onto its own
   line), and at 390px wrapping puts every link on a separate row and the
   header swallows the screen. Breakpoint is deliberately wider than the
   other layout rules for that reason. */
@container site (max-width: 900px) {
  .genHeader {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
  }
  .genNav {
    margin-left: 0;
    gap: 18px;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    justify-content: center;
  }
  .genNavLink {
    font-size: 0.85rem;
    white-space: nowrap;
  }
  .genHeader > .genWordmark + .genHeaderCta {
    margin-left: 0;
  }
}
@container site (max-width: 470px) {
  /* Below phone width the CTA can't sit alongside a scrolling nav without
     crowding it — the hero CTAs carry the action instead. */
  .genHeaderCta {
    display: none;
  }
}




/* Photo slots keep a palette-tinted ground under the image, so a slot that is
   still loading (or has no photo) reads as a colour block rather than a blank
   rectangle. Set as background-color: the inline background-image the renderer
   writes overrides the image layer but not the colour. */
.heroEditorialImage,
.heroLuxeImage,
.heroPlayfulImage,
.heroPrecisionCard,
.offeringEditorialImage,
.offeringLuxeThumb,
.offeringPlayfulImage,
.offeringPrecisionThumb,
.galleryTile,
.galleryStripTile,
.aboutImage,
.aboutTeaserImage {
  background-color: color-mix(in srgb, var(--gen-accent) 22%, var(--bg-sunken));
  background-size: cover;
  background-position: center;
}

/* ===========================================================================
   Generated-site quality pass
   ---------------------------------------------------------------------------
   Appended deliberately: these are cross-cutting rules that lift all five
   themes at once, and later rules win, so each theme's own layout stays intact
   while its buttons, cards and contact block pick up one consistent treatment.
   =========================================================================== */

/* ---------- Buttons ----------
   The pattern people expect from a button they trust: a solid fill, a real
   press, and motion that acknowledges the click. Every one of these was static
   — no hover, no active state — which reads as a picture of a button. */
.ctaRow a,
.ctaRow button,
.ctaBannerBtn,
.genHeaderCta {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease,
    filter 0.15s ease;
}
.ctaRow a:hover,
.ctaRow button:hover,
.ctaBannerBtn:hover,
.genHeaderCta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--gen-accent) 70%, transparent);
  filter: saturate(1.06);
}
.ctaRow a:active,
.ctaRow button:active,
.ctaBannerBtn:active,
.genHeaderCta:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}
/* Keyboard users get the same affordance as the mouse, in the site's own
   accent rather than the browser's default blue ring. */
.ctaRow a:focus-visible,
.ctaBannerBtn:focus-visible,
.genHeaderCta:focus-visible {
  outline: 2px solid var(--gen-accent);
  outline-offset: 3px;
}

/* ---------- Cards ----------
   Lift, deepen, and push the photo in slightly. The image zoom is what makes a
   card feel alive rather than merely animated: the frame stays put and the
   content moves, so the grid never shifts. Requires overflow: hidden on the
   card, which each theme already sets. */
.offeringEditorialCard,
.offeringLifestyleCard,
.offeringPlayfulCard,
.offeringPrecisionRow,
.offeringLuxeRow,
.testimonialCard,
.galleryTile,
.galleryStripTile {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease,
    border-color 0.22s ease;
}
.offeringEditorialCard:hover,
.offeringLifestyleCard:hover,
.offeringPlayfulCard:hover,
.testimonialCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--gen-ink) 55%, transparent);
}
.offeringEditorialImage,
.offeringPlayfulImage,
.offeringPrecisionThumb,
.offeringLuxeThumb,
.galleryTile,
.galleryStripTile {
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.offeringEditorialCard:hover .offeringEditorialImage,
.offeringPlayfulCard:hover .offeringPlayfulImage,
.offeringPrecisionRow:hover .offeringPrecisionThumb,
.offeringLuxeRow:hover .offeringLuxeThumb {
  transform: scale(1.05);
}
.galleryTile:hover,
.galleryStripTile:hover {
  transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .ctaRow a,
  .ctaRow button,
  .ctaBannerBtn,
  .genHeaderCta,
  .offeringEditorialCard,
  .offeringLifestyleCard,
  .offeringPlayfulCard,
  .testimonialCard,
  .offeringEditorialImage,
  .offeringPlayfulImage,
  .galleryTile,
  .galleryStripTile {
    transition: none;
    transform: none;
  }
}

/* ---------- Contact ----------
   Was four label/value pairs in a flex row — the least designed part of the
   site, and the one a customer reaches when they've already decided. Now a
   card grid: an icon to scan by, the label above the value, and (on the
   published site) the whole card is a tel:/mailto: link. */
.contactRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.contactCard {
  display: grid;
  gap: 3px;
  padding: 16px 18px;
  border-radius: var(--gen-radius-md);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease,
    box-shadow 0.2s ease;
}
a.contactCard:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--gen-accent) 55%, var(--line));
  box-shadow: 0 16px 32px -20px color-mix(in srgb, var(--gen-ink) 60%, transparent);
}
.contactIcon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 6px;
  border-radius: var(--gen-radius-md);
  background: color-mix(in srgb, var(--gen-accent) 15%, transparent);
  color: var(--gen-ink);
}
.contactValue {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ---------- About ----------
   Body copy was running the full width of the column. A measure this long is
   the single most common reason a generated page reads as a wall of text. */
.siteAbout p,
.aboutTeaserBody {
  max-width: 68ch;
  line-height: 1.72;
}

/* ===========================================================================
   Rhythm, scale and grid density
   ---------------------------------------------------------------------------
   Three faults that showed up together on a full-page render: a four-item
   offerings section ran about three screens, the vertical gaps between sections
   were uniform so nothing read as more important than anything else, and the
   section headings were undersized for the whitespace around them. Appended so
   each theme's own layout survives — only the measurements change.
   =========================================================================== */

/* 1. The offerings grid stops sprawling.
      The featured card spanned the full width *and* kept a 21/9 image, so the
      first item alone was most of a screen before any content. It now spans
      two columns of a three-column grid and shares the same 16/10 crop as its
      neighbours — still clearly the hero item, without the scroll. */
.offeringsEditorial {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.offeringEditorialCard.offeringFeatured {
  grid-column: span 2;
}
.offeringEditorialCard.offeringFeatured .offeringEditorialImage,
.offeringEditorialImage {
  aspect-ratio: 16 / 10;
}
@media (max-width: 720px) {
  .offeringsEditorial {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .offeringEditorialCard.offeringFeatured {
    grid-column: 1 / -1;
  }
}

/* Gallery tiles were free-height too, which is what made a four-photo gallery
   scroll like a slideshow. */
.galleryTile,
.galleryStripTile {
  aspect-ratio: 4 / 3;
}

/* 2. Section rhythm. Every band had the same padding, so a page read as one
      long column with colour changes. Bands that carry a tinted background get
      more air than bands sitting on the page ground, which is what makes a
      section feel like a section. */
.siteSection {
  padding: clamp(64px, 8cqw, 104px) clamp(24px, 6cqw, 80px);
}
.siteAbout,
.testimonialSection,
.gallerySection {
  padding-block: clamp(76px, 10cqw, 128px);
}
/* The band immediately before the closing CTA shouldn't butt against it. */
.ctaBanner {
  margin-top: clamp(8px, 2cqw, 24px);
}

/* 3. Heading scale. A 1.65rem heading above 100px of whitespace reads as a
      caption; the eye needs the jump to know a new section started. */
.sectionHeading {
  margin-bottom: clamp(28px, 4cqw, 46px);
}
.sectionHeading h2 {
  font-size: clamp(2rem, 4.6cqw, 3.1rem);
  letter-spacing: -0.025em;
  line-height: 1.06;
}
.sectionHeading p {
  margin-top: 12px;
  font-size: 1.06rem;
  max-width: 56ch;
  line-height: 1.6;
}

/* ---------- Section layout variants ----------
   Chosen per section in the builder's Styles tab and applied entirely here,
   so the two renderers only have to agree on one attribute. Bare attribute
   selectors rather than a wrapper class, because the published site wraps
   sections in .sectionBlock and the preview wraps them in its own editing
   chrome — the attribute is the one thing both are guaranteed to carry. */
[data-variant="centred"] .siteSection,
[data-variant="centred"] .sectionHeading {
  text-align: center;
}
[data-variant="centred"] .sectionHeading p,
[data-variant="centred"] .siteAbout p {
  margin-left: auto;
  margin-right: auto;
}
[data-variant="centred"] .ctaRow,
[data-variant="centred"] .contactRow {
  justify-content: center;
}
[data-variant="centred"] .aboutLayout {
  grid-template-columns: 1fr;
}

[data-variant="compact"] .siteSection {
  padding-top: clamp(26px, 4.5cqw, 46px);
  padding-bottom: clamp(26px, 4.5cqw, 46px);
}
[data-variant="compact"] .sectionHeading {
  margin-bottom: 18px;
}

[data-variant="wide"] .siteSection {
  padding-left: clamp(10px, 2cqw, 28px);
  padding-right: clamp(10px, 2cqw, 28px);
}

[data-variant="panel"] .siteSection {
  background: color-mix(in srgb, var(--gen-accent) 8%, transparent);
  border-radius: var(--gen-radius-lg);
  margin: 14px clamp(12px, 3cqw, 44px);
}

/* ---------- Contact form ----------
   The section that converts: someone has decided, and this is the cheapest
   way for them to act on it without leaving the page. */
.contactForm {
  margin-top: 34px;
  display: grid;
  gap: 14px;
  max-width: 620px;
}
.contactFormRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 560px) {
  .contactFormRow { grid-template-columns: 1fr; }
}
.contactField {
  display: grid;
  gap: 6px;
  font-size: 0.86rem;
  color: var(--text-soft);
}
.contactField input,
.contactField textarea,
.contactField select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--gen-text) 18%, transparent);
  border-radius: var(--gen-radius-md);
  background: color-mix(in srgb, var(--gen-bg) 92%, transparent);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--gen-text);
  resize: vertical;
}
.contactField input:focus,
.contactField textarea:focus,
.contactField select:focus {
  outline: none;
  border-color: var(--gen-accent);
}
.contactSend {
  justify-self: start;
  padding: 13px 26px;
  border: none;
  border-radius: var(--gen-radius-pill);
  background: var(--gen-accent);
  color: var(--gen-accent-ink);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}
.contactSend:disabled { opacity: 0.65; cursor: default; }
.contactFormNote {
  margin: 0;
  font-size: 0.82rem;
  color: var(--gen-text-soft);
  min-height: 1.2em;
}
.bookingPayment { display: block; margin-top: 8px; font-weight: 650; }
.bookingPayment a { color: var(--gen-accent); text-decoration: underline; text-underline-offset: 3px; }
/* Off-screen rather than display:none — a bot reading the DOM sees a normal
   field, which is the entire point of a honeypot. */
.contactHp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Type and rhythm system ----------
   The five themes had drifted into one layout in five palettes: every hero
   landed near 3.2rem, every section used the same padding, and the jump from
   body to heading to display was under 1.5x, so nothing on the page led. The
   numbers now come from THEME_TOKENS (lib/themeTokens.ts) and arrive as inline
   custom properties, which is also what stops this block and its twin in
   builder.module.css from drifting again.

   Scoped through [data-theme-layout] deliberately. The per-theme rules above
   are written as .heroEditorial .siteName and
   .previewFrame[data-theme-layout="luxe"] .sectionHeading h2, which outrank a
   bare .siteName — the first version of this block was simply ignored and
   every theme kept its old size. This matches their specificity and comes
   later, so it wins. */
.previewFrame[data-theme-layout] .siteName {
  font-size: var(--t-display);
  font-weight: var(--t-display-weight);
  letter-spacing: var(--t-display-tracking);
  line-height: var(--t-display-leading);
}
.previewFrame[data-theme-layout] .tagline {
  font-size: var(--t-tagline);
  font-weight: var(--t-tagline-weight);
  line-height: 1.24;
  letter-spacing: -0.012em;
}
.previewFrame[data-theme-layout] .subheadline {
  font-size: var(--t-body);
  line-height: var(--t-body-leading);
  max-width: var(--t-measure);
}
.previewFrame[data-theme-layout] .heroEyebrow {
  font-size: var(--t-eyebrow-size);
  letter-spacing: var(--t-eyebrow-tracking);
  text-transform: uppercase;
  font-weight: 600;
}
.previewFrame[data-theme-layout] .siteSection {
  padding: var(--t-section-y) var(--t-section-x);
}
.previewFrame[data-theme-layout] .sectionHeading {
  margin-bottom: var(--t-heading-gap);
}
.previewFrame[data-theme-layout] .sectionHeading h2 {
  font-size: var(--t-h2);
  font-weight: var(--t-h2-weight);
  letter-spacing: var(--t-h2-tracking);
  line-height: 1.06;
}
.previewFrame[data-theme-layout] .sectionHeading p {
  font-size: var(--t-body);
  line-height: var(--t-body-leading);
  max-width: var(--t-measure);
}
/* Measure. Running text set the full width of a section is the single most
   reliable way to make a page look untended. */
.previewFrame[data-theme-layout] .siteAbout p,
.previewFrame[data-theme-layout] .offeringEditorialDesc,
.previewFrame[data-theme-layout] .offeringPrecisionDesc,
.previewFrame[data-theme-layout] .offeringLuxeDesc {
  font-size: var(--t-body);
  line-height: var(--t-body-leading);
  max-width: var(--t-measure);
}
/* The hero photograph gets a proportion chosen per theme rather than whatever
   height the text beside it happened to produce. */
.previewFrame[data-theme-layout] .heroEditorialImage,
.previewFrame[data-theme-layout] .heroPlayfulImage,
.previewFrame[data-theme-layout] .heroLuxeImage,
.previewFrame[data-theme-layout] .heroPrecisionCard {
  aspect-ratio: var(--t-hero-ratio);
  height: auto;
}

/* ---------- Composition pass ----------
   The type system fixed scale; this fixes what the sections do with it. Same
   [data-theme-layout] scoping and same reason: the per-theme rules above are
   more specific than a bare class, so an unscoped block here is silently
   ignored. */

/* Offerings. The grid declared three columns while the featured card spanned
   two, so a business with three services got a wide card, one beside it, and
   the third stranded on its own row next to two empty cells — the single
   ugliest thing on a generated page. Auto-fit means any number of services
   fills its row, and the featured card takes the full width it was always
   meant to. */
/* Editorial has a full-width featured card, so it needs explicit columns.
   auto-fit only collapses tracks that are *empty*, and the featured card
   spanning 1/-1 keeps every track occupied — which is why a 1280px canvas
   built four columns and left the two remaining services huddled at 285px
   against the left edge. Two columns means whatever follows the featured card
   always fills its row. */
.previewFrame[data-theme-layout] .offeringsEditorial {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4cqw, 30px);
}
/* Playful has no featured card, so auto-fit behaves: empty tracks collapse and
   however many services there are share the row evenly. Forcing two columns
   here orphaned the third onto a row of its own. */
.previewFrame[data-theme-layout] .offeringsPlayful {
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: clamp(16px, 2.4cqw, 30px);
}
@container site (max-width: 620px) {
  .previewFrame[data-theme-layout] .offeringsEditorial {
    grid-template-columns: 1fr;
  }
}
.previewFrame[data-theme-layout] .offeringEditorialCard.offeringFeatured {
  grid-column: 1 / -1;
}
.previewFrame[data-theme-layout] .offeringEditorialCard.offeringFeatured .offeringEditorialImage {
  aspect-ratio: 21 / 9;
}
.previewFrame[data-theme-layout] .offeringEditorialImage,
.previewFrame[data-theme-layout] .offeringPlayfulImage {
  aspect-ratio: 4 / 3;
}

/* Testimonials. One quote sat in a two-column grid as a small bordered card,
   leaving half the band empty — it read as an afterthought rather than the
   proof it is. A lone testimonial becomes a pull-quote. */
.previewFrame[data-theme-layout] .testimonialGrid {
  gap: clamp(16px, 2.4cqw, 28px);
}
.previewFrame[data-theme-layout] .testimonialGrid:has(.testimonialCard:only-child) {
  grid-template-columns: 1fr;
}
.previewFrame[data-theme-layout] .testimonialCard:only-child {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  max-width: 46ch;
  margin: 0 auto;
  text-align: center;
}
.previewFrame[data-theme-layout] .testimonialCard:only-child .testimonialQuote {
  font-size: clamp(1.35rem, 3.1cqw, 2.15rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
}
.previewFrame[data-theme-layout] .testimonialCard:only-child .testimonialAuthor {
  margin-top: 18px;
  display: block;
}
.previewFrame[data-theme-layout] .testimonialQuote {
  font-size: clamp(1.02rem, 1.6cqw, 1.18rem);
  line-height: 1.6;
}

/* The closing banner was a thin strip carrying the page's last instruction.
   It gets the presence of a section. */
.previewFrame[data-theme-layout] .ctaBanner {
  padding: clamp(52px, 7.5cqw, 96px) clamp(28px, 6cqw, 72px);
}
.previewFrame[data-theme-layout] .ctaBanner > span {
  font-size: clamp(1.5rem, 3.4cqw, 2.4rem);
  font-weight: var(--t-h2-weight);
  letter-spacing: var(--t-h2-tracking);
  line-height: 1.1;
  max-width: 20ch;
}

/* Gallery. Fixed three columns squeezed tiles on a phone and stretched them on
   a wide canvas; a portrait crop also suits the work most of these businesses
   photograph. */
.previewFrame[data-theme-layout] .galleryGrid {
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
  gap: clamp(10px, 1.6cqw, 18px);
}
.previewFrame[data-theme-layout] .galleryTile {
  aspect-ratio: 3 / 4;
}

/* The deck under a section heading was body-sized and the same colour as the
   copy below it, so it read as a stray first paragraph. */
.previewFrame[data-theme-layout] .sectionHeading p {
  font-size: clamp(1.02rem, 1.55cqw, 1.2rem);
  color: var(--text-faint);
  max-width: 46ch;
}

/* About teaser. A 68ch measure beside a small image is a wall of text with a
   stamp next to it; the image earns its half of the composition. */
.previewFrame[data-theme-layout] .aboutTeaserBody {
  max-width: var(--t-measure);
}
.previewFrame[data-theme-layout] .aboutTeaserImage {
  aspect-ratio: 4 / 5;
  height: auto;
}


/* >>> shared-tail:start — mirrored into builder.module.css by scripts/sync-preview-css.mjs <<< */
/* ===========================================================================
   Composition pass 2 — container, bands, and per-section identity
   ---------------------------------------------------------------------------
   A full-page render of all five themes showed the same three faults on every
   one of them, none of which is a theme's own fault:

   1. Nothing capped the content width. Each section inset itself by its own
      padding and then ran to the canvas edge, so on a 1440px screen a FAQ
      question sat alone on a 1270px bar, a four-card grid stretched to fill
      the row, and no two sections shared a left edge. This is the single
      biggest reason a finished page read as untended.

   2. Section grounds were assigned ad hoc — testimonials took --bg-sunken, the
      about teaser took an accent mix, everything else was transparent — so the
      colour changes down a page were noise rather than rhythm.

   3. The five themes differed in their hero and their offerings, and nowhere
      else. Testimonials, FAQ, gallery and contact rendered near-identically in
      all of them, which is most of why the themes read as one layout in five
      palettes even after the type system fixed the scale.

   Appended, and scoped through [data-theme-layout] to match the specificity of
   the per-theme rules above, for the reason the block before this one gives:
   an unscoped rule here is outranked by .heroEditorial .siteName and silently
   does nothing.
   =========================================================================== */

/* ---------- 1. The container ----------
   max() rather than a wrapper element, because the two renderers build their
   markup separately (staticSite/render.ts writes HTML strings, SitePreview.tsx
   writes JSX) and a new wrapper would have to be added to both, for every
   section, and kept in step. This needs no markup at all: below --t-container
   the term goes negative and the theme's own inset wins, which is why the
   phone preview and the published mobile layout are untouched. */
.previewFrame[data-theme-layout] .siteSection,
.previewFrame[data-theme-layout] .ctaBanner,
.previewFrame[data-theme-layout] .genHeader,
.previewFrame[data-theme-layout] .genFooter,
.previewFrame[data-theme-layout] .heroEditorial,
.previewFrame[data-theme-layout] .heroPrecision,
.previewFrame[data-theme-layout] .heroLuxe,
.previewFrame[data-theme-layout] .heroPlayful,
.previewFrame[data-theme-layout] .heroLifestyle {
  padding-inline: max(var(--t-section-x), (100% - var(--t-container)) / 2);
}

/* A published site is the whole document, not a card sitting on a page. The
   frame's rounded corners, hairline border and clipping belong to the builder
   preview; on a real domain they clipped the top corners of the site and
   boxed it in. Inert in the builder, where .previewFrame is never a direct
   child of <body> — which is what lets this rule live in the shared block. */
body > .previewFrame {
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-height: 100vh;
  /* Not visible: the Editorial hero's offset frame and Pop's sticker shadows
     deliberately sit outside their own boxes, and unclipped they gave a phone
     80px of sideways scroll. Not hidden either — that makes the frame a scroll
     container, and a sticky header inside a box that never scrolls is a static
     header. Clipping one axis does neither. */
  overflow: visible;
  overflow-x: clip;
}

/* ---------- 2. Section grounds ----------
   Positional, not semantic. Assigning grounds by section type meant every new
   page bundle had to be checked by hand for two tinted bands landing next to
   each other (the About page put a tinted about directly above a tinted
   testimonials block, and the pair read as one enormous band). Alternating by
   position cannot produce that: the hero is always first, so odd bands sit on
   the page ground and even bands take the tint, on every page of every bundle.

   Only section wrappers are <div>s among .previewFrame's children — the header
   is a <header> and the footer a <footer> — so nth-of-type counts sections. */
.previewFrame[data-theme-layout] > div[data-variant]:nth-of-type(even) {
  background: var(--gen-tint);
}
/* These two painted their own grounds, which is what the alternation replaces. */
.previewFrame[data-theme-layout] .testimonialSection,
.previewFrame[data-theme-layout] .aboutTeaser {
  background: transparent;
}

/* Precision states structure with rules rather than fills — a tinted band is
   already more decoration than this theme wants. */
.previewFrame[data-theme-layout="minimal"] > div[data-variant]:nth-of-type(even) {
  background: transparent;
}
.previewFrame[data-theme-layout="minimal"] > div[data-variant] + div[data-variant] {
  border-top: 1px solid var(--line);
}
.previewFrame[data-theme-layout="minimal"] .testimonialSection {
  border-top: none;
  border-bottom: none;
}
/* Noir's bands lift toward the light instead of down into it: on a dark page a
   darker band reads as a hole in the page rather than a section. */
.previewFrame[data-theme-layout="luxe"] > div[data-variant]:nth-of-type(even) {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--gen-accent) 7%, transparent), transparent 70%),
    var(--gen-tint);
}
/* Pop leans into it — the colour blocks are the theme. */
.previewFrame[data-theme-layout="playful"] > div[data-variant]:nth-of-type(even) {
  background: color-mix(in srgb, var(--gen-accent) 14%, var(--bg));
}

/* ---------- 3. Grid rhythm ----------
   One gap token per theme, so the offerings, gallery and testimonial grids on
   a page are measurably the same grid rather than three that happen to look
   alike. */
.previewFrame[data-theme-layout] .offeringsEditorial,
.previewFrame[data-theme-layout] .offeringsPlayful,
.previewFrame[data-theme-layout] .offeringsLifestyle,
.previewFrame[data-theme-layout] .testimonialGrid,
.previewFrame[data-theme-layout] .galleryStrip {
  gap: var(--t-grid-gap);
}
.previewFrame[data-theme-layout] .galleryGrid {
  gap: calc(var(--t-grid-gap) * 0.6);
}

/* Cards in a row end at the same baseline. Photos already share a ratio; it
   was the bodies underneath, each as tall as its own description, that left
   the ragged bottom edge. */
.previewFrame[data-theme-layout] .offeringsLifestyle,
.previewFrame[data-theme-layout] .offeringsPlayful,
.previewFrame[data-theme-layout] .offeringsEditorial,
.previewFrame[data-theme-layout] .testimonialGrid {
  align-items: stretch;
}
.previewFrame[data-theme-layout] .offeringLifestyleCard,
.previewFrame[data-theme-layout] .offeringPlayfulCard,
.previewFrame[data-theme-layout] .testimonialCard {
  display: flex;
  flex-direction: column;
}
.previewFrame[data-theme-layout] .offeringLifestyleBody,
.previewFrame[data-theme-layout] .offeringPlayfulBody {
  flex: 1;
}
/* The author line sits on the floor of the card rather than under the quote,
   so a two-line quote and a five-line quote still rhyme. */
.previewFrame[data-theme-layout] .testimonialAuthor {
  margin-top: auto;
  padding-top: 14px;
}

/* ---------- 3b. Column counts ----------
   Every card grid used auto-fit, which picks a column count from the canvas
   width and then leaves the last row short. Four services on a 1160px canvas
   became three across and one stranded underneath; four photographs on a
   1280px canvas became five tracks with the fifth empty. auto-fit only
   collapses tracks that no item claims, and it has no way to know that the
   items are indivisible.

   The number of items is known and small — the generator's schema asks for 3
   to 5 offerings and 3 to 4 photographs — so the column count is chosen from
   the count instead of from the width, and every row comes out full. The
   auto-fit fallback is kept for the counts outside that range, which is what a
   customer who keeps adding services will eventually produce.

   Written narrow-first and inside min-width queries rather than as a base rule
   with max-width overrides. A count rule carries the specificity of its own
   :has() and :not(), which outranks any plain override however far down the
   file it sits — the first version of this block left a phone showing three
   columns of 90px cards, because the max-width rule meant to collapse them
   simply lost. Under a min-width query there is nothing to outrank: below the
   breakpoint the rule does not exist. */
.previewFrame[data-theme-layout] .offeringsEditorial,
.previewFrame[data-theme-layout] .offeringsPlayful,
.previewFrame[data-theme-layout] .offeringsLifestyle {
  grid-template-columns: minmax(0, 1fr);
}
@container site (min-width: 620px) {
  .previewFrame[data-theme-layout] .offeringsEditorial,
  .previewFrame[data-theme-layout] .offeringsPlayful,
  .previewFrame[data-theme-layout] .offeringsLifestyle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container site (min-width: 900px) {
  /* Editorial: the feature card takes the whole first row, so the columns have
     to divide the *remainder* — two after a feature of three, three after four,
     four after five. */
  .previewFrame[data-theme-layout="editorial"] .offeringsEditorial {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .previewFrame[data-theme-layout="editorial"] .offeringsEditorial:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Pop and Lifestyle have no feature card, so the columns divide the count
     itself: three across, or two-by-two, with a fifth taking the full width and
     the wide crop that makes it read as deliberate rather than left over. */
  .previewFrame[data-theme-layout="playful"] .offeringsPlayful,
  .previewFrame[data-theme-layout="bold"] .offeringsLifestyle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .previewFrame[data-theme-layout="playful"] .offeringsPlayful:has(> :nth-child(4)),
  .previewFrame[data-theme-layout="bold"] .offeringsLifestyle:has(> :nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .previewFrame[data-theme-layout="playful"] .offeringsPlayful:has(> :nth-child(5)) > :last-child,
  .previewFrame[data-theme-layout="bold"] .offeringsLifestyle:has(> :nth-child(5)) > :last-child {
    grid-column: 1 / -1;
  }
  .previewFrame[data-theme-layout="playful"] .offeringsPlayful:has(> :nth-child(5)) > :last-child .offeringPlayfulImage,
  .previewFrame[data-theme-layout="bold"] .offeringsLifestyle:has(> :nth-child(5)) > :last-child .offeringLifestyleImage {
    aspect-ratio: 2.6 / 1;
  }
  /* Six or more is past what the generator writes and past what these column
     counts were chosen for; width decides again. */
  .previewFrame[data-theme-layout] .offeringsPlayful:has(> :nth-child(6)),
  .previewFrame[data-theme-layout] .offeringsLifestyle:has(> :nth-child(6)),
  .previewFrame[data-theme-layout] .offeringsEditorial:has(> :nth-child(7)) {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  }
  .previewFrame[data-theme-layout] .offeringsPlayful:has(> :nth-child(6)) > :last-child,
  .previewFrame[data-theme-layout] .offeringsLifestyle:has(> :nth-child(6)) > :last-child {
    grid-column: auto;
  }
}

/* ---------- 4. Heroes ----------
   Each theme's hero had one specific thing wrong with it at desktop width. */

/* Editorial: with no eyebrow (the "General" business type prints none) the
   text column began with nothing, and the masthead floated. A rule gives the
   column a top edge to hang from. */
.previewFrame[data-theme-layout="editorial"] .heroEditorial > div:first-child:not(:has(.heroEyebrow))::before {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: var(--gen-accent);
  margin-bottom: 26px;
}
/* Guarded, like the card grids: this outranks the existing max-width rule that
   collapses the hero to one column, so unguarded it kept the hero two-up on a
   phone with the photograph reduced to a stamp. */
@container site (min-width: 760px) {
  .previewFrame[data-theme-layout="editorial"] .heroEditorial {
    grid-template-columns: 1.02fr 0.98fr;
    gap: clamp(32px, 5cqw, 72px);
  }
}
/* The offset frame behind the photograph was the accent at 32%, which on a
   cream ground is cream: the layered magazine effect it exists to produce was
   invisible on the palette the theme ships with. */
.previewFrame[data-theme-layout="editorial"] .heroEditorialImageWrap::before {
  background: var(--gen-accent);
  inset: 18px -14px -18px 14px;
  transform: rotate(-1.6deg);
}
.previewFrame[data-theme-layout="editorial"] .heroEditorialImage {
  transform: rotate(1.6deg);
}

/* Precision: the business name was set at display size and the tagline — the
   sentence that says what the business actually does — at body size, so the
   hero led with a proper noun and buried its own promise. The theme was
   written the other way round; the type system's .siteName rule outranked it.
   Restored, and the photograph widened from a 520px card adrift in a 1440px
   band to a real piece of the composition. */
.previewFrame[data-theme-layout="minimal"] .heroPrecision .siteName {
  font-size: clamp(0.94rem, 1.5cqw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gen-accent-deep);
  line-height: 1.4;
}
.previewFrame[data-theme-layout="minimal"] .heroPrecision .tagline {
  margin-top: 18px;
  font-size: var(--t-display);
  font-weight: 600;
  letter-spacing: var(--t-display-tracking);
  line-height: 1.08;
  max-width: 18ch;
}
.previewFrame[data-theme-layout="minimal"] .heroPrecision .subheadline {
  margin-inline: auto;
  max-width: 52ch;
}
.previewFrame[data-theme-layout="minimal"] .heroPrecisionCard {
  width: min(920px, 100%);
  margin-top: clamp(40px, 6cqw, 64px);
  border-radius: var(--gen-radius-lg);
}

/* Lifestyle: a 480px letterbox with the glass card wedged into the corner, so
   the business name broke across three lines inside a 480px box while the
   photograph had no room to be a photograph. */
.previewFrame[data-theme-layout="bold"] .heroLifestyle {
  min-height: min(660px, 78cqh);
  padding-block: clamp(48px, 8cqw, 88px);
}
/* Frosted in the brand colour rather than in neutral black, which over a
   bright photograph came out as a grey slab with the type sitting on it. */
.previewFrame[data-theme-layout="bold"] .heroGlassCard {
  max-width: min(620px, 100%);
  padding: clamp(26px, 3.4cqw, 40px) clamp(28px, 3.8cqw, 44px);
  background: color-mix(in srgb, var(--gen-bg) 66%, transparent);
  border-color: color-mix(in srgb, white 26%, transparent);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
}
.previewFrame[data-theme-layout="bold"] .heroLifestyle::before {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--gen-bg) 88%, black) 0%,
    color-mix(in srgb, var(--gen-bg) 38%, transparent) 52%,
    transparent 82%
  );
}

/* Noir: the cinematic theme was showing its photograph at 780px with the page
   dark all around it, which is a slide, not a scene. */
.previewFrame[data-theme-layout="luxe"] .heroLuxeImage {
  max-width: 100%;
  aspect-ratio: 2.4 / 1;
  margin-top: clamp(44px, 6cqw, 72px);
  position: relative;
}
.previewFrame[data-theme-layout="luxe"] .heroLuxe {
  padding-bottom: 0;
}

/* Pop: the sticker shadow on the hero photo was throwing the grid off balance
   at wide widths, where the image column got the larger share. */
@container site (min-width: 760px) {
  .previewFrame[data-theme-layout="playful"] .heroPlayful {
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(32px, 4.5cqw, 60px);
  }
}

/* ---------- 5. Offerings ----------
   The two list-shaped themes rendered a service at 52px and 64px square with
   0.86rem type — the proportions of a settings screen, on the section a
   customer came to read. */
.previewFrame[data-theme-layout="minimal"] .offeringsPrecision {
  max-width: 860px;
  margin-inline: auto;
  padding: 6px clamp(18px, 2.4cqw, 30px);
  background: var(--bg-raised);
}
.previewFrame[data-theme-layout="minimal"] .offeringPrecisionRow {
  gap: clamp(18px, 2.4cqw, 26px);
  padding-block: clamp(20px, 2.4cqw, 26px);
}
.previewFrame[data-theme-layout="minimal"] .offeringPrecisionThumb {
  width: clamp(72px, 8cqw, 92px);
  height: clamp(72px, 8cqw, 92px);
}
.previewFrame[data-theme-layout="minimal"] .offeringPrecisionName {
  font-size: 1.06rem;
  letter-spacing: -0.01em;
}
.previewFrame[data-theme-layout="minimal"] .offeringPrecisionPrice {
  font-size: 0.94rem;
  color: var(--gen-accent-deep);
}

.previewFrame[data-theme-layout="luxe"] .offeringsLuxe {
  max-width: 980px;
}
.previewFrame[data-theme-layout="luxe"] .offeringLuxeRow {
  gap: clamp(20px, 2.8cqw, 32px);
  padding-block: clamp(26px, 3cqw, 36px);
}
.previewFrame[data-theme-layout="luxe"] .offeringLuxeThumb {
  width: clamp(88px, 9cqw, 116px);
  height: clamp(88px, 9cqw, 116px);
}
.previewFrame[data-theme-layout="luxe"] .offeringLuxeNum {
  font-size: 0.8rem;
  align-self: flex-start;
  padding-top: 4px;
}
.previewFrame[data-theme-layout="luxe"] .offeringLuxeName {
  font-size: clamp(1.15rem, 1.9cqw, 1.4rem);
}
.previewFrame[data-theme-layout="luxe"] .offeringLuxePrice {
  font-size: 0.92rem;
  color: var(--gen-accent);
}

/* Editorial's featured card kept a 21/9 crop, so the first service alone was
   most of a screen before the second one appeared. */
.previewFrame[data-theme-layout="editorial"] .offeringEditorialCard.offeringFeatured .offeringEditorialImage {
  aspect-ratio: 2.3 / 1;
}
.previewFrame[data-theme-layout="editorial"] .offeringEditorialName {
  font-size: clamp(1.1rem, 1.7cqw, 1.3rem);
}
.previewFrame[data-theme-layout="editorial"] .priceBadge {
  color: var(--gen-accent-deep);
  font-size: 0.82rem;
}

/* Lifestyle's stagger pushed every second card down by a fixed 26px, which at
   three-up meant the row never resolved into a row. Kept as an offset on the
   middle of a three-column row only — that reads as composition; applied to
   half the cards it read as a bug. */
.previewFrame[data-theme-layout="bold"] .offeringsLifestyle {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.previewFrame[data-theme-layout="bold"] .offeringLifestyleCard.offeringStagger {
  margin-top: 0;
}
.previewFrame[data-theme-layout="bold"] .offeringLifestyleName {
  font-size: 1.12rem;
}
.previewFrame[data-theme-layout="bold"] .offeringLifestyleBody {
  padding: clamp(18px, 2cqw, 24px) clamp(18px, 2.2cqw, 26px) clamp(20px, 2.4cqw, 26px);
}

.previewFrame[data-theme-layout="playful"] .offeringPlayfulName {
  font-size: 1.14rem;
}

/* ---------- 5b. About ----------
   Both about layouts gave the photograph the smaller share of a container that
   is now capped, so the text ran out at its measure and left a gap while the
   photograph shrank to a stamp. An even split reads as a composition. */
.previewFrame[data-theme-layout] .aboutLayout,
.previewFrame[data-theme-layout] .aboutTeaser {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5cqw, 72px);
}
.previewFrame[data-theme-layout] .aboutImage,
.previewFrame[data-theme-layout] .aboutTeaserImage {
  aspect-ratio: 3 / 2;
}
@container site (min-width: 760px) {
  .previewFrame[data-theme-layout] .aboutLayout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
  }
  .previewFrame[data-theme-layout] .aboutTeaser {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  }
  .previewFrame[data-theme-layout] .aboutImage {
    aspect-ratio: 4 / 5;
  }
  .previewFrame[data-theme-layout] .aboutTeaserImage {
    aspect-ratio: 4 / 5;
  }
}

/* ---------- 6. Gallery ----------
   One 3/4 grid in every theme. The caption pill sat on top of the photograph
   in all of them, obscuring the thing it captioned. */
.previewFrame[data-theme-layout] .galleryTile {
  position: relative;
  align-items: flex-end;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
.previewFrame[data-theme-layout] .galleryCaption {
  position: relative;
  width: 100%;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  padding: 34px 16px 14px;
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* The scrim is the caption's own backdrop, drawn only where the words are, so
   the top three-quarters of the photograph stays untouched. */
.previewFrame[data-theme-layout] .galleryCaption::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent);
}

/* Column count from the number of photographs, for the reason the offerings
   grids give above — and min-width-first for the same specificity reason. */
.previewFrame[data-theme-layout] .galleryGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@container site (min-width: 900px) {
  .previewFrame[data-theme-layout] .galleryGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .previewFrame[data-theme-layout] .galleryGrid:has(> :nth-child(4)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .previewFrame[data-theme-layout] .galleryGrid:has(> :nth-child(5)) {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  }

  /* Editorial prints one photograph large and stacks the rest beside it — the
     whole argument of a magazine layout. Only at exactly three, where a feature
     spanning two columns and two rows fills a 3x2 grid exactly; at four the
     same mosaic leaves a hole, so four run as a row of portraits instead. */
  .previewFrame[data-theme-layout="editorial"] .galleryGrid:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
    grid-auto-rows: minmax(0, 1fr);
    aspect-ratio: 16 / 9;
  }
  .previewFrame[data-theme-layout="editorial"] .galleryGrid:has(> :nth-child(3)):not(:has(> :nth-child(4))) > .galleryTile {
    aspect-ratio: auto;
  }
  .previewFrame[data-theme-layout="editorial"] .galleryGrid:has(> :nth-child(3)):not(:has(> :nth-child(4))) > .galleryTile:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
  .previewFrame[data-theme-layout="editorial"] .galleryGrid:has(> :nth-child(4)) > .galleryTile {
    aspect-ratio: 3 / 4;
  }
}
/* Lifestyle: edge to edge, no gaps, the photographs doing the talking. */
.previewFrame[data-theme-layout="bold"] .galleryGrid {
  gap: 6px;
}
.previewFrame[data-theme-layout="bold"] .galleryTile {
  aspect-ratio: 1 / 1;
}
/* Precision: fewer, larger, wide crops with the caption set quietly below. */
.previewFrame[data-theme-layout="minimal"] .galleryGrid {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.previewFrame[data-theme-layout="minimal"] .galleryTile {
  aspect-ratio: 3 / 2;
  border: none;
}
.previewFrame[data-theme-layout="minimal"] .galleryCaption {
  padding: 26px 14px 12px;
  font-weight: 500;
}
/* Noir: hairline frames and a colder grade. */
.previewFrame[data-theme-layout="luxe"] .galleryTile {
  aspect-ratio: 4 / 5;
}

/* ---------- 7. Testimonials ----------
   Three quotes in a two-column grid left the third alone on the second row,
   under half a band of nothing — the most common shape a small business has,
   and the worst thing this section did. */
.previewFrame[data-theme-layout] .testimonialGrid {
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}
.previewFrame[data-theme-layout] .testimonialCard {
  padding: clamp(24px, 2.8cqw, 32px);
}
.previewFrame[data-theme-layout] .testimonialAuthor {
  color: var(--text-faint);
  letter-spacing: 0.01em;
}

/* Precision sets them as three columns of plain text divided by rules, which
   is the closest this theme comes to decoration. */
@container site (min-width: 760px) {
  .previewFrame[data-theme-layout="minimal"] .testimonialGrid {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 0;
  }
  .previewFrame[data-theme-layout="minimal"] .testimonialCard {
    border-bottom: none;
    border-left: 1px solid var(--line);
    padding: 4px clamp(22px, 2.6cqw, 34px);
  }
  .previewFrame[data-theme-layout="minimal"] .testimonialCard:first-child {
    border-left: none;
    padding-left: 0;
  }
}
/* Noir hangs an oversized quote mark off the top of each card, and the cards
   need a ground: a transparent card with a 30%-accent hairline, on a band that
   is itself nearly black, was three quotes floating in the dark. */
.previewFrame[data-theme-layout="luxe"] .testimonialCard {
  padding-top: clamp(30px, 3.4cqw, 40px);
  background: color-mix(in srgb, white 5%, transparent);
  border-color: color-mix(in srgb, var(--gen-accent) 24%, transparent);
}
.previewFrame[data-theme-layout="luxe"] .testimonialQuote {
  font-style: italic;
}
/* Lifestyle's cards were an 8% brand wash on the page ground, which on a
   tinted band is the band again. Cards should sit on the page, not in it. */
.previewFrame[data-theme-layout="bold"] .testimonialCard {
  background: var(--bg-raised);
  box-shadow: 0 12px 30px -20px color-mix(in srgb, var(--gen-ink) 60%, transparent);
}

/* ---------- 8. FAQ ----------
   Full-width bars carrying five words, and a marker that was the "+" character
   set in the body font. */
.previewFrame[data-theme-layout] .faqList {
  max-width: 780px;
  gap: 12px;
}
.previewFrame[data-theme-layout] .faqItem {
  padding: clamp(16px, 1.8cqw, 22px) clamp(18px, 2cqw, 24px);
}
.previewFrame[data-theme-layout] .faqItem summary {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: clamp(0.98rem, 1.4cqw, 1.1rem);
  line-height: 1.35;
}
/* Drawn from two gradients rather than typed, so it is the same glyph at every
   font, and the vertical bar is what disappears on open — a "+" that becomes a
   "−" is the one control nobody has to learn. */
.previewFrame[data-theme-layout] .faqItem summary::before {
  content: "";
  order: 2;
  flex: none;
  width: 26px;
  height: 26px;
  margin-left: auto;
  border-radius: var(--gen-radius-pill);
  border: 1px solid color-mix(in srgb, var(--gen-ink) 28%, transparent);
  color: var(--gen-ink);
  background:
    linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 11px no-repeat;
  transition: transform 0.25s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.previewFrame[data-theme-layout] .faqItem[open] summary::before {
  background:
    linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat;
  transform: rotate(180deg);
  border-color: color-mix(in srgb, var(--gen-accent) 60%, transparent);
}
.previewFrame[data-theme-layout] .faqItem p {
  padding-left: 0;
  padding-right: 44px;
  margin-top: 12px;
  font-size: var(--t-body);
  line-height: var(--t-body-leading);
  max-width: 62ch;
}
/* Progressive enhancement: browsers without ::details-content simply open with
   no animation, which is what they did before. */
@supports selector(::details-content) {
  .previewFrame[data-theme-layout] .faqItem::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.28s ease, content-visibility 0.28s;
    transition-behavior: allow-discrete;
  }
  .previewFrame[data-theme-layout] .faqItem[open]::details-content {
    block-size: auto;
  }
}
.previewFrame[data-theme-layout="minimal"] .faqList,
.previewFrame[data-theme-layout="luxe"] .faqList {
  margin-inline: auto;
}

/* The left-aligned themes put the heading beside the questions rather than
   above them. Capping the list at a readable 780px inside a 1180px band left a
   column of nothing down the right of the page; this is the column that fills
   it, and the heading stays in view while the questions are read. */
@container site (min-width: 900px) {
  .previewFrame[data-theme-layout="editorial"] .siteSection:has(> .faqList),
  .previewFrame[data-theme-layout="bold"] .siteSection:has(> .faqList),
  .previewFrame[data-theme-layout="playful"] .siteSection:has(> .faqList) {
    display: grid;
    grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr);
    column-gap: clamp(40px, 6cqw, 88px);
    align-items: start;
  }
  .previewFrame[data-theme-layout="editorial"] .siteSection:has(> .faqList) > .sectionHeading,
  .previewFrame[data-theme-layout="bold"] .siteSection:has(> .faqList) > .sectionHeading,
  .previewFrame[data-theme-layout="playful"] .siteSection:has(> .faqList) > .sectionHeading {
    margin-bottom: 0;
    position: sticky;
    /* Clears the sticky header. */
    top: 104px;
  }
  .previewFrame[data-theme-layout="editorial"] .siteSection:has(> .faqList) > .faqList,
  .previewFrame[data-theme-layout="bold"] .siteSection:has(> .faqList) > .faqList,
  .previewFrame[data-theme-layout="playful"] .siteSection:has(> .faqList) > .faqList {
    max-width: none;
  }
}

/* ---------- 9. Contact ----------
   The form's fields were filled with --gen-bg and set in --gen-text: colours
   for a dark section, on a section that sits on the page ground in thirteen of
   the fourteen palettes. On every light palette the enquiry form — the thing
   the whole page is asking the visitor to use — rendered as four dark blocks. */
.previewFrame[data-theme-layout] .contactField {
  color: var(--text-soft);
}
.previewFrame[data-theme-layout] .contactField input,
.previewFrame[data-theme-layout] .contactField textarea,
.previewFrame[data-theme-layout] .contactField select {
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.previewFrame[data-theme-layout] .contactField input::placeholder,
.previewFrame[data-theme-layout] .contactField textarea::placeholder {
  color: var(--text-faint);
}
.previewFrame[data-theme-layout] .contactField input:focus,
.previewFrame[data-theme-layout] .contactField textarea:focus,
.previewFrame[data-theme-layout] .contactField select:focus {
  border-color: var(--gen-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gen-accent) 22%, transparent);
}
.previewFrame[data-theme-layout] .contactFormNote {
  color: var(--text-faint);
}
.previewFrame[data-theme-layout] .contactIcon {
  color: var(--gen-accent-deep);
}
.previewFrame[data-theme-layout] .label {
  color: var(--text-faint);
}

/* The scheduler is deliberately an appointment request, not a fake live
   calendar. It collects everything the owner needs to confirm one slot while
   keeping the conversion path inside the generated site. */
.previewFrame[data-theme-layout] .bookingForm {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3cqw, 38px);
  border: 1px solid color-mix(in srgb, var(--gen-accent) 26%, var(--line));
  border-radius: var(--gen-radius-lg);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--gen-accent-2) 14%, transparent), transparent 34%),
    linear-gradient(145deg, var(--bg-raised), color-mix(in srgb, var(--gen-tint) 68%, var(--bg-raised)));
  box-shadow:
    0 30px 80px -48px color-mix(in srgb, var(--gen-ink) 56%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 66%, transparent);
}
.previewFrame[data-theme-layout="luxe"] .bookingForm,
.previewFrame[data-theme-layout="midnight"] .bookingForm {
  box-shadow:
    0 32px 90px -48px rgba(0, 0, 0, 0.92),
    inset 0 1px 0 color-mix(in srgb, white 10%, transparent);
}
.previewFrame[data-theme-layout] .bookingIntro {
  display: grid;
  gap: 7px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.previewFrame[data-theme-layout] .bookingIntro h3 {
  max-width: 20ch;
  font-family: var(--theme-font-display, var(--font-display));
  font-size: clamp(1.45rem, 2.8cqw, 2.05rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.previewFrame[data-theme-layout] .bookingIntro p {
  max-width: 54ch;
  color: var(--text-soft);
  font-size: 0.94rem;
  line-height: 1.6;
}
.previewFrame[data-theme-layout] .bookingKicker {
  color: var(--gen-accent-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.previewFrame[data-theme-layout] .contactField > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
}
.previewFrame[data-theme-layout] .contactField em {
  color: var(--text-faint);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 500;
}
.previewFrame[data-theme-layout] .contactField select {
  min-height: 49px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-soft) 50%),
    linear-gradient(135deg, var(--text-soft) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 21px,
    calc(100% - 13px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.previewFrame[data-theme-layout] .contactField input,
.previewFrame[data-theme-layout] .contactField textarea,
.previewFrame[data-theme-layout] .contactField select {
  min-height: 49px;
  padding: 13px 15px;
  border-radius: var(--gen-radius-md);
}
.previewFrame[data-theme-layout] .contactField textarea {
  min-height: 112px;
}
.previewFrame[data-theme-layout] .fieldHint {
  color: var(--text-faint);
  font-size: 0.76rem;
}
.previewFrame[data-theme-layout] .bookingAssurance {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, var(--gen-accent-2) 32%, var(--line));
  border-radius: var(--gen-radius-md);
  background: color-mix(in srgb, var(--gen-accent-2) 8%, transparent);
  color: var(--text-soft);
  font-size: 0.8rem;
  line-height: 1.5;
}
.previewFrame[data-theme-layout] .bookingAssurance > span {
  display: grid;
  flex: none;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--gen-accent-2);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
}
.previewFrame[data-theme-layout] .bookingForm .contactSend {
  width: 100%;
  justify-self: stretch;
  min-height: 52px;
  box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--gen-accent) 88%, transparent);
}

/* Details beside the form rather than above it. Four cards in a row followed
   by a 620px form left the right half of the band empty and pushed the send
   button most of a screen below the phone number. */
@container site (min-width: 900px) {
  .previewFrame[data-theme-layout] .siteSection:has(> .contactForm) {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    column-gap: clamp(36px, 5cqw, 76px);
    align-items: start;
  }
  .previewFrame[data-theme-layout] .siteSection:has(> .contactForm) > .sectionHeading {
    grid-column: 1 / -1;
  }
  .previewFrame[data-theme-layout] .siteSection:has(> .contactForm) > .contactRow {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0;
  }
  .previewFrame[data-theme-layout] .siteSection:has(> .contactForm) > .contactForm {
    margin-top: 0;
    max-width: none;
  }
}

/* ---------- 10. Header and footer ----------
   The nav is how a five-page site is a five-page site; it scrolled away on the
   first screen and never came back. */
.previewFrame[data-theme-layout] .genHeader {
  position: sticky;
  top: 0;
  padding-block: 16px;
  background: color-mix(in srgb, var(--bg-raised) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.previewFrame[data-theme-layout="luxe"] .genHeader {
  background: color-mix(in srgb, color-mix(in srgb, black 58%, var(--gen-bg)) 88%, transparent);
}
.previewFrame[data-theme-layout="minimal"] .genHeader {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}
/* An underline that grows from the link, so the active page is marked by
   something other than half a font weight. */
.previewFrame[data-theme-layout] .genNavLink {
  position: relative;
  padding-block: 4px;
}
.previewFrame[data-theme-layout] .genNavLink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--gen-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.previewFrame[data-theme-layout] .genNavLink:hover::after,
.previewFrame[data-theme-layout] .genNavLinkActive::after {
  transform: scaleX(1);
}

.previewFrame[data-theme-layout] .genFooter {
  border-top: 1px solid color-mix(in srgb, var(--gen-accent) 45%, transparent);
  padding-block: clamp(56px, 7cqw, 88px) 26px;
}
.previewFrame[data-theme-layout] .genFooterTop {
  gap: clamp(32px, 4cqw, 56px);
  padding-bottom: clamp(30px, 3.6cqw, 44px);
}
/* Guarded for the same reason as the card grids — unguarded this held the
   footer at three columns on a phone, and "Ring Road Parklands, Westlands,
   Nairobi" in a 100px column gave the whole page 80px of sideways scroll. */
@container site (min-width: 760px) {
  .previewFrame[data-theme-layout] .genFooterTop {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1.2fr);
  }
}
/* A column that cannot be narrower than its longest word is a column that
   pushes the page wider. Addresses and email addresses are both long enough
   to do it on a phone. */
.previewFrame[data-theme-layout] .genFooterCol {
  min-width: 0;
}
.previewFrame[data-theme-layout] .genFooterItem,
.previewFrame[data-theme-layout] .genFooterLink {
  overflow-wrap: anywhere;
}
.previewFrame[data-theme-layout] .genFooterName {
  font-size: clamp(1.25rem, 2cqw, 1.55rem);
}
.previewFrame[data-theme-layout] .genFooterLink {
  position: relative;
}
.previewFrame[data-theme-layout] .genFooterLink:hover {
  color: var(--gen-accent);
}

/* ---------- 10b. Premium composition ----------
   These are original, reusable design-system treatments informed by common
   high-end editorial/booking patterns: layered depth, restrained gradients,
   one decisive action and generous hierarchy. No third-party layout or asset
   is copied into the generated output. */
.previewFrame[data-theme-layout] {
  background:
    radial-gradient(70cqw 34cqw at 8% -4%, color-mix(in srgb, var(--gen-accent) 7%, transparent), transparent 68%),
    var(--bg);
}
.previewFrame[data-theme-layout] .sectionHeading {
  position: relative;
  max-width: 760px;
}
.previewFrame[data-theme-layout] .sectionHeading::before {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  margin-bottom: 17px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gen-accent), var(--gen-accent-2));
}
.previewFrame[data-theme-layout] .sectionHeading h2 {
  text-wrap: balance;
}
.previewFrame[data-theme-layout] .heroEditorial,
.previewFrame[data-theme-layout] .heroPrecision,
.previewFrame[data-theme-layout] .heroLuxe,
.previewFrame[data-theme-layout] .heroPlayful,
.previewFrame[data-theme-layout] .heroLifestyle {
  position: relative;
  isolation: isolate;
}
.previewFrame[data-theme-layout] .tagline,
.previewFrame[data-theme-layout] .subheadline {
  text-wrap: balance;
}
.previewFrame[data-theme-layout] .ctaPrimary,
.previewFrame[data-theme-layout] .ctaGhost,
.previewFrame[data-theme-layout] .genHeaderCta,
.previewFrame[data-theme-layout] .ctaBannerBtn,
.previewFrame[data-theme-layout] .contactSend {
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.22s ease, filter 0.22s ease;
}
.previewFrame[data-theme-layout] .ctaPrimary:hover,
.previewFrame[data-theme-layout] .genHeaderCta:hover,
.previewFrame[data-theme-layout] .ctaBannerBtn:hover,
.previewFrame[data-theme-layout] .contactSend:not(:disabled):hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
}
.previewFrame[data-theme-layout] .ctaGhost:hover {
  transform: translateY(-2px);
}
.previewFrame[data-theme-layout] .offeringEditorialCard,
.previewFrame[data-theme-layout] .offeringLifestyleCard,
.previewFrame[data-theme-layout] .offeringPlayfulCard,
.previewFrame[data-theme-layout] .testimonialCard,
.previewFrame[data-theme-layout] .contactCard,
.previewFrame[data-theme-layout] .faqItem {
  border-color: color-mix(in srgb, var(--gen-ink) 12%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, white 72%, transparent) inset,
    0 24px 54px -42px color-mix(in srgb, var(--gen-ink) 72%, transparent);
}
.previewFrame[data-theme-layout] .offeringEditorialCard,
.previewFrame[data-theme-layout] .offeringLifestyleCard,
.previewFrame[data-theme-layout] .offeringPlayfulCard {
  overflow: hidden;
}
.previewFrame[data-theme-layout] .offeringEditorialImage,
.previewFrame[data-theme-layout] .offeringLifestyleImage,
.previewFrame[data-theme-layout] .offeringPlayfulImage,
.previewFrame[data-theme-layout] .galleryTile,
.previewFrame[data-theme-layout] .galleryStripTile,
.previewFrame[data-theme-layout] .aboutImage,
.previewFrame[data-theme-layout] .aboutTeaserImage {
  background-position: center;
  background-size: cover;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.4s ease;
}
.previewFrame[data-theme-layout] .offeringEditorialCard:hover .offeringEditorialImage,
.previewFrame[data-theme-layout] .offeringLifestyleCard:hover .offeringLifestyleImage,
.previewFrame[data-theme-layout] .offeringPlayfulCard:hover .offeringPlayfulImage,
.previewFrame[data-theme-layout] .galleryTile:hover {
  transform: scale(1.025);
}
.previewFrame[data-theme-layout] .testimonialCard::before {
  content: "“";
  display: block;
  height: 30px;
  color: var(--gen-accent);
  font-family: Georgia, serif;
  font-size: 3.2rem;
  line-height: 0.8;
}
.previewFrame[data-theme-layout] .contactCard {
  min-height: 112px;
  background: color-mix(in srgb, var(--bg-raised) 94%, transparent);
}
.previewFrame[data-theme-layout] .ctaBanner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--gen-accent-2) 38%, transparent), transparent 32%),
    linear-gradient(120deg, color-mix(in srgb, var(--gen-bg) 94%, black), var(--gen-bg));
}
.previewFrame[data-theme-layout] .ctaBanner::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 260px;
  aspect-ratio: 1;
  right: -96px;
  bottom: -176px;
  border: 1px solid color-mix(in srgb, var(--gen-accent) 38%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 34px color-mix(in srgb, var(--gen-accent) 6%, transparent);
}
.previewFrame[data-theme-layout] .genHeader {
  border-bottom: 1px solid color-mix(in srgb, var(--gen-ink) 9%, transparent);
  box-shadow: 0 16px 34px -32px color-mix(in srgb, var(--gen-ink) 62%, transparent);
}
.previewFrame[data-theme-layout] .genWordmark {
  max-width: 22ch;
}

@container site (max-width: 619px) {
  .previewFrame[data-theme-layout] .siteSection,
  .previewFrame[data-theme-layout] .ctaBanner,
  .previewFrame[data-theme-layout] .heroEditorial,
  .previewFrame[data-theme-layout] .heroPrecision,
  .previewFrame[data-theme-layout] .heroLuxe,
  .previewFrame[data-theme-layout] .heroPlayful,
  .previewFrame[data-theme-layout] .heroLifestyle {
    padding-inline: 20px;
  }
  .previewFrame[data-theme-layout] .contactFormRow {
    grid-template-columns: minmax(0, 1fr);
  }
  .previewFrame[data-theme-layout] .bookingForm {
    padding: 20px;
  }
  .previewFrame[data-theme-layout] .galleryGrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .previewFrame[data-theme-layout] .galleryTile {
    aspect-ratio: 4 / 3;
  }
  .previewFrame[data-theme-layout] .ctaPrimary,
  .previewFrame[data-theme-layout] .ctaGhost {
    width: 100%;
    text-align: center;
  }
}

/* ---------- 11. Photographs ----------
   A consistent edge. Over a pale photograph — a white clinic wall, an
   overexposed sky — an untreated tile dissolved into the page and the grid
   lost its shape. */
.previewFrame[data-theme-layout] .galleryTile,
.previewFrame[data-theme-layout] .galleryStripTile,
.previewFrame[data-theme-layout] .offeringLifestyleImage,
.previewFrame[data-theme-layout] .offeringEditorialImage,
.previewFrame[data-theme-layout] .offeringPrecisionThumb,
.previewFrame[data-theme-layout] .aboutImage,
.previewFrame[data-theme-layout] .aboutTeaserImage {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 9%, transparent);
}

/* ---------- 12. Focus ----------
   Everything a keyboard can reach, in the site's own accent. The generated
   sites had a ring on three button classes and nothing else — links, form
   fields, gallery tiles and every FAQ question were invisible to tab. */
.previewFrame[data-theme-layout] a:focus-visible,
.previewFrame[data-theme-layout] button:focus-visible,
.previewFrame[data-theme-layout] summary:focus-visible,
.previewFrame[data-theme-layout] input:focus-visible,
.previewFrame[data-theme-layout] textarea:focus-visible,
.previewFrame[data-theme-layout] select:focus-visible {
  outline: 2px solid var(--gen-accent);
  outline-offset: 3px;
  border-radius: var(--gen-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .previewFrame[data-theme-layout] .genNavLink::after,
  .previewFrame[data-theme-layout] .faqItem summary::before,
  .previewFrame[data-theme-layout] .faqItem::details-content {
    transition: none;
  }
}
/* ===========================================================================
   13. Light grounds, conversion and rhythm
   ---------------------------------------------------------------------------
   Every theme now sits on a light page: the owner preference is light grounds
   whatever the palette, and on a phone in daylight dark pages lost their
   photographs and their prices. Colour lives in the accents, buttons and
   small bands instead. The rest of this block serves the markup render.ts
   writes for the way East African customers actually get in touch — WhatsApp
   first, a call second, directions third — and gives sections their own
   rhythm instead of one padding everywhere.
   =========================================================================== */

/* ---------- 13a. Photographs as real images ----------
   The wrapper keeps the theme's frame and ratio; the <img> fills it, and the
   wrapper's own content — captions, price badges, the hero's scrim and card —
   is lifted above it. Not a negative z-index on the image: inside a rotated,
   filtered frame (the Editorial hero) Chromium painted the frame's own ground
   over it and the photograph vanished. */
.previewFrame [data-photo] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.previewFrame [data-photo] > .genPhoto {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.previewFrame [data-photo]::before,
.previewFrame [data-photo]::after,
.previewFrame [data-photo] > :not(.genPhoto) {
  z-index: 1;
}
.previewFrame .heroLifestyle[data-photo] > .heroGlassCard {
  z-index: 2;
}
/* In-flow overlays need a position for z-index to apply at all. */
.previewFrame [data-photo] > .offeringLifestylePrice,
.previewFrame [data-photo] > .galleryCaption {
  position: relative;
}

/* ---------- 13b. The hero leads with its promise ---------- */
.previewFrame[data-theme-layout] .siteName.heroHeadline {
  margin: 14px 0 0;
  max-width: 15ch;
  color: var(--text);
  font-size: calc(var(--t-display) * 0.8);
  font-weight: var(--t-display-weight);
  line-height: 1.03;
  letter-spacing: var(--t-display-tracking);
  text-transform: none;
  text-wrap: balance;
}
.previewFrame[data-theme-layout="minimal"] .siteName.heroHeadline {
  font-size: var(--t-display);
}
.previewFrame[data-theme-layout="minimal"] .siteName.heroHeadline,
.previewFrame[data-theme-layout="luxe"] .siteName.heroHeadline {
  margin-inline: auto;
}
.previewFrame[data-theme-layout] .subheadline {
  margin-top: 18px;
  color: var(--text-soft);
  font-size: clamp(1rem, 1.5cqw, 1.14rem);
  line-height: 1.6;
}
.previewFrame[data-theme-layout] .heroEyebrow {
  color: var(--gen-accent-deep);
}
.previewFrame[data-theme-layout] .ctaGhost {
  border-color: var(--line-strong);
  color: var(--text);
}
.previewFrame[data-theme-layout] .ctaWhatsapp,
.previewFrame[data-theme-layout] .genHeaderCtaWhatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.previewFrame .genIcon {
  flex: none;
}

.previewFrame[data-theme-layout] .heroMeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 22px;
}
.previewFrame[data-theme-layout="minimal"] .heroMeta,
.previewFrame[data-theme-layout="luxe"] .heroMeta {
  justify-content: center;
}
.previewFrame[data-theme-layout] .heroProof {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-soft);
  font-size: 0.9rem;
  font-weight: 600;
}
.previewFrame[data-theme-layout] .heroProof .genIcon {
  color: var(--gen-accent-deep);
}

/* Open now / Closed now. Green and red are the one place a site steps outside
   its palette: the meaning has to survive every colour combination. */
.previewFrame .openBadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border: 1px solid rgba(26, 135, 74, 0.28);
  border-radius: 999px;
  background: #eaf7ef;
  color: #136338;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.previewFrame .openBadge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1a874a;
  box-shadow: 0 0 0 3px rgba(26, 135, 74, 0.18);
}
.previewFrame .openBadge[data-state="closed"] {
  border-color: rgba(161, 52, 45, 0.24);
  background: #fbefee;
  color: #8a2b25;
}
.previewFrame .openBadge[data-state="closed"]::before {
  background: #b8433a;
  box-shadow: 0 0 0 3px rgba(184, 67, 58, 0.16);
}
.previewFrame .openBadge[hidden] {
  display: none;
}

@container site (max-width: 470px) {
  .previewFrame[data-theme-layout] .genHeaderCta {
    display: none;
  }
}

/* ---------- 13c. Light versions of the two dark heroes ---------- */
/* Lifestyle: the photograph stays full-bleed, the words move onto a white card. */
.previewFrame[data-theme-layout="bold"] .heroGlassCard {
  background: color-mix(in srgb, var(--bg-raised) 93%, transparent);
  border-color: color-mix(in srgb, white 70%, transparent);
  box-shadow: 0 34px 80px -34px rgba(0, 0, 0, 0.5);
}
.previewFrame[data-theme-layout="bold"] .heroGlassCard .subheadline,
.previewFrame[data-theme-layout="bold"] .heroGlassCard .heroProof {
  color: var(--text-soft);
}
.previewFrame[data-theme-layout="bold"] .heroGlassCard .ctaGhost {
  border-color: var(--line-strong);
  color: var(--text);
}
.previewFrame[data-theme-layout="bold"] .heroLifestyle::before {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.32), transparent 58%);
}
.previewFrame[data-theme-layout="bold"] .heroLifestyle.heroNoImage {
  background: var(--gen-tint);
}

/* The builder preview (SitePreview.tsx) still writes the older hero markup —
   the name in .siteName and the headline in .tagline — and both were set in
   light text for the dark grounds. Dark text on the light ones, for both. */
.previewFrame[data-theme-layout="bold"] .heroGlassCard .siteName,
.previewFrame[data-theme-layout="bold"] .heroGlassCard .tagline,
.previewFrame[data-theme-layout="luxe"] .heroLuxe .siteName,
.previewFrame[data-theme-layout="luxe"] .heroLuxe .tagline {
  color: var(--text);
}

/* Noir: same composition, ivory instead of black. Character comes from the
   tracking, the hairlines and the space, which never depended on the dark. */
.previewFrame[data-theme-layout="luxe"] .heroLuxe {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--gen-accent) 13%, transparent), transparent 66%),
    var(--bg);
  color: var(--text);
}
.previewFrame[data-theme-layout="luxe"] .heroLuxe .subheadline {
  color: var(--text-soft);
}
.previewFrame[data-theme-layout="luxe"] .heroLuxe .heroEyebrow::before,
.previewFrame[data-theme-layout="luxe"] .heroLuxe .heroEyebrow::after {
  background: color-mix(in srgb, var(--gen-accent-deep) 45%, transparent);
}
.previewFrame[data-theme-layout="luxe"] .heroLuxeImage {
  box-shadow: 0 40px 90px -56px color-mix(in srgb, var(--gen-ink) 70%, transparent);
}
.previewFrame[data-theme-layout="luxe"] .genHeader {
  background: color-mix(in srgb, var(--bg-raised) 90%, transparent);
  border-bottom: 1px solid var(--line);
}
.previewFrame[data-theme-layout="luxe"] .genWordmark,
.previewFrame[data-theme-layout="luxe"] .genNavLinkActive {
  color: var(--text);
}
.previewFrame[data-theme-layout="luxe"] .genNavLink {
  color: var(--text-soft);
}
.previewFrame[data-theme-layout="luxe"] .genHeaderCta {
  border-color: var(--gen-accent-deep);
  color: var(--gen-accent-deep);
}
.previewFrame[data-theme-layout="luxe"] .testimonialCard {
  background: var(--bg-raised);
}
.previewFrame[data-theme-layout="luxe"] .offeringLuxePrice,
.previewFrame[data-theme-layout="luxe"] .offeringLuxeNum {
  color: var(--gen-accent-deep);
}
.previewFrame[data-theme-layout="luxe"] .bookingForm {
  box-shadow: 0 30px 80px -48px color-mix(in srgb, var(--gen-ink) 56%, transparent);
}

/* ---------- 13d. Fixes ---------- */
/* Two quote marks on every testimonial: the card draws one, and an older rule
   on the quote itself drew another. The card's is the one that stays. */
.previewFrame[data-theme-layout] .testimonialQuote::before {
  content: none;
  display: none;
}
.previewFrame[data-theme-layout] .testimonialCard,
.previewFrame[data-theme-layout] .testimonialQuote {
  margin: 0;
}

/* Centred headings had a centred rule under the h2 and a second, left-aligned
   rule above the block — and the block itself was a 760px box pinned to the
   left, so "centred" text sat centred in the wrong place. One rule, centred
   with its heading. */
.previewFrame[data-theme-layout="luxe"] .sectionHeading h2::after {
  content: none;
}
.previewFrame[data-theme-layout="luxe"] .sectionHeading,
.previewFrame[data-theme-layout="minimal"] .sectionHeading,
.previewFrame[data-theme-layout="luxe"] .sectionHeading::before,
.previewFrame[data-theme-layout="minimal"] .sectionHeading::before {
  margin-inline: auto;
}
.previewFrame[data-theme-layout] .sectionHeading p {
  color: var(--text-soft);
}

/* ---------- 13e. Offerings: one tap to ask ---------- */
.previewFrame[data-theme-layout] .offeringAction {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 16px;
  padding: 9px 15px 9px 12px;
  border: 1px solid color-mix(in srgb, var(--gen-accent-deep) 30%, var(--line));
  border-radius: var(--gen-radius-pill);
  color: var(--gen-accent-deep);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.previewFrame[data-theme-layout] .offeringAction:hover {
  border-color: var(--gen-accent);
  background: var(--gen-accent);
  color: var(--gen-accent-ink);
  transform: translateY(-1px);
}
.previewFrame[data-theme-layout="playful"] .offeringAction {
  border: 2px solid var(--text);
  color: var(--text);
}

/* ---------- 13f. Contact: details, map and form as one composition ---------- */
.previewFrame[data-theme-layout] .contactLayout {
  display: grid;
  gap: clamp(24px, 3.4cqw, 44px);
  align-items: start;
}
@container site (min-width: 900px) {
  .previewFrame[data-theme-layout] .contactLayout {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }
}
.previewFrame[data-theme-layout] .contactPanel {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.previewFrame[data-theme-layout] .contactList {
  margin: 0;
  padding: 4px 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--gen-radius-lg);
  background: var(--bg-raised);
  box-shadow: 0 24px 54px -44px color-mix(in srgb, var(--gen-ink) 70%, transparent);
}
.previewFrame[data-theme-layout] .contactLine {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 16px clamp(16px, 2cqw, 22px);
}
.previewFrame[data-theme-layout] .contactLine + .contactLine {
  border-top: 1px solid var(--line);
}
.previewFrame[data-theme-layout] .contactLineIcon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: var(--gen-radius-md);
  background: color-mix(in srgb, var(--gen-accent) 15%, var(--bg-raised));
  color: var(--gen-accent-deep);
}
.previewFrame[data-theme-layout] .contactLineBody {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.previewFrame[data-theme-layout] .contactLineLabel {
  color: var(--text-faint);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.previewFrame[data-theme-layout] .contactLineValue {
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.previewFrame[data-theme-layout] a.contactLineValue:hover {
  color: var(--gen-accent-deep);
}
.previewFrame[data-theme-layout] .contactLineActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.previewFrame[data-theme-layout] .contactChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  transition: border-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}
.previewFrame[data-theme-layout] .contactChip:hover {
  border-color: var(--gen-accent);
  color: var(--gen-accent-deep);
}
.previewFrame[data-theme-layout] .contactChipWhatsapp,
.previewFrame[data-theme-layout] .contactChipWhatsapp:hover {
  border-color: #25d366;
  background: #25d366;
  color: #053b1c;
}
.previewFrame[data-theme-layout] .contactChipWhatsapp:hover {
  filter: brightness(0.95);
}
.previewFrame[data-theme-layout] .contactMap {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: var(--gen-radius-lg);
  background: var(--bg-sunken);
}
.previewFrame[data-theme-layout] .contactMap iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.previewFrame[data-theme-layout] .mpesaCard {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(46, 155, 63, 0.32);
  border-radius: var(--gen-radius-lg);
  background: #f0f8f1;
  color: #163b1e;
}
.previewFrame[data-theme-layout] .mpesaBadge {
  flex: none;
  padding: 7px 9px;
  border-radius: 6px;
  background: #2e9b3f;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.previewFrame[data-theme-layout] .mpesaCard strong {
  display: block;
  font-size: 0.95rem;
}
.previewFrame[data-theme-layout] .mpesaCard dl {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 4px 0 0;
}
.previewFrame[data-theme-layout] .mpesaCard dt {
  color: #4b6b52;
  font-size: 0.72rem;
}
.previewFrame[data-theme-layout] .mpesaCard dd {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.previewFrame[data-theme-layout] .contactSection .contactForm {
  max-width: none;
  margin-top: 0;
  padding: clamp(20px, 3cqw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--gen-radius-lg);
  background: var(--bg-raised);
  box-shadow: 0 30px 70px -52px color-mix(in srgb, var(--gen-ink) 70%, transparent);
}

/* ---------- 13g. Footer and CTA banner on light grounds ---------- */
.previewFrame[data-theme-layout] .genFooter,
.previewFrame[data-theme-layout="luxe"] .genFooter {
  border-top: 1px solid var(--line);
  background: var(--gen-tint);
  color: var(--text-soft);
}
.previewFrame[data-theme-layout] .genFooterTop {
  border-bottom-color: var(--line);
}
.previewFrame[data-theme-layout] .genFooterName {
  color: var(--text);
}
.previewFrame[data-theme-layout] .genFooterColTitle,
.previewFrame[data-theme-layout] .genFooterCredit {
  color: var(--gen-accent-deep);
}
.previewFrame[data-theme-layout] .genFooterBlurb,
.previewFrame[data-theme-layout] .genFooterLink,
.previewFrame[data-theme-layout] .genFooterItem {
  color: var(--text-soft);
}
.previewFrame[data-theme-layout] .genFooterLink:hover {
  color: var(--gen-accent-deep);
}
.previewFrame[data-theme-layout] .genFooterBottom {
  color: var(--text-faint);
}
.previewFrame[data-theme-layout] .ctaBanner {
  border-block: 1px solid var(--line);
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--gen-accent) 26%, transparent), transparent 42%),
    color-mix(in srgb, var(--gen-accent) 9%, var(--bg-raised));
}
.previewFrame[data-theme-layout] .ctaBanner span {
  color: var(--text);
}
.previewFrame[data-theme-layout] .ctaBannerBtn {
  background: var(--gen-bg);
  color: var(--gen-text);
}

/* ---------- 13h. Section rhythm and one signature per theme ----------
   Every section had the same padding, so a page scrolled at one tempo. The
   questions are reference material and get less room; the offerings are the
   point of the visit and keep the most. */
.previewFrame[data-theme-layout] .siteSection.faqSection {
  padding-block: calc(var(--t-section-y) * 0.72);
}
@container site (min-width: 900px) {
  .previewFrame[data-theme-layout] .siteSection.faqSection {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(32px, 5cqw, 72px);
    align-items: start;
  }
  .previewFrame[data-theme-layout] .faqSection .sectionHeading {
    position: sticky;
    top: 110px;
    margin: 0;
    text-align: left;
  }
  .previewFrame[data-theme-layout] .faqSection .sectionHeading::before {
    margin-inline: 0;
  }
  .previewFrame[data-theme-layout] .faqSection .faqList {
    max-width: none;
    margin-inline: 0;
  }
}

/* Editorial: the first review becomes a pull quote across the band. */
.previewFrame[data-theme-layout="editorial"] .testimonialCard:first-child {
  grid-column: 1 / -1;
  padding-inline: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.previewFrame[data-theme-layout="editorial"] .testimonialCard:first-child .testimonialQuote {
  max-width: 30ch;
  font-family: var(--theme-font-display, var(--font-display));
  font-size: clamp(1.45rem, 3cqw, 2.25rem);
  font-style: italic;
  line-height: 1.25;
  color: var(--text);
}

/* Lifestyle: the gallery is a mosaic, the photographs doing the talking. */
@container site (min-width: 760px) {
  .previewFrame[data-theme-layout="bold"] .galleryGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(170px, 18cqw, 240px);
  }
  .previewFrame[data-theme-layout="bold"] .galleryGrid > .galleryTile {
    aspect-ratio: auto;
  }
  .previewFrame[data-theme-layout="bold"] .galleryGrid > .galleryTile:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
  .previewFrame[data-theme-layout="bold"] .galleryGrid > .galleryTile:nth-child(2) {
    grid-column: span 2;
  }
  .previewFrame[data-theme-layout="bold"] .galleryGrid > .galleryTile:nth-child(3):last-child {
    grid-column: span 2;
  }
}

/* Precision: offerings are a numbered list, the theme's one flourish. */
.previewFrame[data-theme-layout="minimal"] .offeringsPrecision {
  counter-reset: offering;
}
.previewFrame[data-theme-layout="minimal"] .offeringPrecisionName::before {
  counter-increment: offering;
  content: counter(offering, decimal-leading-zero) "  ";
  color: var(--gen-accent-deep);
  font-family: var(--font-mono);
  font-size: 0.78em;
  font-weight: 500;
}

/* ---------- 13i. The contact dock ----------
   Outside .previewFrame (see renderDock), so these rules carry their own
   tokens from the dock's inline style and their own media queries — a
   container query cannot see a frame the dock is not inside. */
.siteDock .dockFloat {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 14px;
  border-radius: 999px;
  background: #25d366;
  color: #053b1c;
  /* Not inherit: the body carries the theme's display face, and Noir's
     Playfair on a WhatsApp button read as a wedding invitation. */
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 16px 36px -14px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(37, 211, 102, 0.16);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.siteDock .dockFloat:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(37, 211, 102, 0.18);
}
.siteDock .dockBar {
  display: none;
}
@media (max-width: 700px) {
  .siteDock .dockFloat {
    display: none;
  }
  .siteDock .dockBar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-raised) 94%, transparent);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
  }
  .siteDock .dockBar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: var(--gen-radius-md);
    font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 0.96rem;
    font-weight: 700;
    text-decoration: none;
  }
  .siteDock .dockCall {
    border: 1px solid var(--line-strong);
    background: var(--bg-raised);
    color: var(--text);
  }
  .siteDock .dockWhatsapp {
    background: #25d366;
    color: #053b1c;
  }
  body:has(.siteDock .dockBar a) > .previewFrame {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) {
  .siteDock .dockFloat,
  .previewFrame[data-theme-layout] .offeringAction {
    transition: none;
  }
}
/* ===========================================================================
   14. Design pass — type, rhythm and the sections customers actually read
   ---------------------------------------------------------------------------
   Reviewed at real screen size, the generated sites read as drafts: body copy
   at ~13px in grey, small timid section titles over wide empty bands, the
   Precision theme's services as a settings list of 48px thumbnails, About
   text floating mid-column, and nothing a phone visitor came for (where,
   when, how to call) until the very bottom. This layer fixes those across all
   five themes; each theme keeps its own fonts, colours and shapes.
   =========================================================================== */

/* ---------- 14a. Readable type ---------- */
.previewFrame[data-theme-layout] {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
}
@container site (max-width: 619px) {
  .previewFrame[data-theme-layout] { font-size: 16px; }
}
.previewFrame[data-theme-layout] .siteAbout p,
.previewFrame[data-theme-layout] .aboutTeaserText {
  max-width: 60ch;
  color: var(--text-soft);
  font-size: clamp(1.04rem, 1.35cqw, 1.18rem);
  line-height: 1.75;
}

/* ---------- 14b. Section headings: a label, a real title ---------- */
.previewFrame[data-theme-layout] .sectionHeading {
  max-width: 820px;
  margin-bottom: clamp(32px, 4.4cqw, 56px);
}
.previewFrame[data-theme-layout] .sectionHeading:has(.sectionKicker)::before {
  display: none;
}
.previewFrame[data-theme-layout] .sectionKicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--gen-accent-deep);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.previewFrame[data-theme-layout] .sectionKicker::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--gen-accent);
}
.previewFrame[data-theme-layout] .sectionHeading h2 {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-family: var(--theme-font-display, var(--font-display));
  font-size: clamp(1.95rem, 4.2cqw, 3.15rem);
  font-weight: var(--t-h2-weight, 650);
  line-height: 1.08;
  letter-spacing: var(--t-h2-tracking, -0.02em);
  text-transform: none;
  text-wrap: balance;
}
.previewFrame[data-theme-layout] .sectionHeading h2::after {
  content: none;
}
.previewFrame[data-theme-layout] .sectionHeading p {
  max-width: 58ch;
  margin-top: 14px;
  color: var(--text-soft);
  font-size: 1.06rem;
}
/* Centred themes centre the label with the title. */
.previewFrame[data-theme-layout="minimal"] .sectionHeading,
.previewFrame[data-theme-layout="luxe"] .sectionHeading {
  margin-inline: auto;
  text-align: center;
}
.previewFrame[data-theme-layout="luxe"] .sectionKicker::after {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--gen-accent);
}
/* Pop keeps its highlighter stroke, on the new title size. The title stays
   inline so the stroke hugs the words, which means the label must be a block
   of its own or the two run together on one line. */
.previewFrame[data-theme-layout="playful"] .sectionKicker {
  display: flex;
  width: fit-content;
}
.previewFrame[data-theme-layout="playful"] .sectionHeading h2 {
  display: inline;
  background: linear-gradient(transparent 64%, color-mix(in srgb, var(--gen-accent) 42%, transparent) 64%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- 14c. Rhythm ---------- */
.previewFrame[data-theme-layout] .siteSection {
  padding-block: clamp(64px, 8.5cqw, 116px);
}

/* ---------- 14d. Header ---------- */
.previewFrame[data-theme-layout] .genHeader {
  padding-block: 16px;
}
.previewFrame[data-theme-layout] .genWordmark {
  font-size: clamp(1.12rem, 1.6cqw, 1.32rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.previewFrame[data-theme-layout] .genNavLink {
  font-size: 0.95rem;
  font-weight: 550;
}
.previewFrame[data-theme-layout] .genHeaderCta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  font-size: 0.92rem;
  font-weight: 700;
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--gen-ink) 70%, transparent);
}

/* ---------- 14e. Hero ---------- */
.previewFrame[data-theme-layout] .heroEyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.previewFrame[data-theme-layout] .subheadline {
  font-size: clamp(1.06rem, 1.55cqw, 1.24rem);
  line-height: 1.6;
}
.previewFrame[data-theme-layout] .ctaPrimary,
.previewFrame[data-theme-layout] .ctaGhost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 26px;
  font-size: 1rem;
}
/* Photographs of people were cropped at the eyes by the 2.4:1 letterbox. */
.previewFrame[data-theme-layout="luxe"] .heroLuxeImage {
  aspect-ratio: 2 / 1;
}
.previewFrame[data-theme-layout="luxe"] .heroLuxeImage > .genPhoto,
.previewFrame[data-theme-layout="minimal"] .heroPrecisionCard > .genPhoto {
  object-position: center 30%;
}
.previewFrame[data-theme-layout="minimal"] .heroPrecisionCard {
  aspect-ratio: 16 / 8;
  box-shadow: 0 40px 90px -50px color-mix(in srgb, var(--gen-ink) 70%, transparent);
}

/* ---------- 14f. Quick facts under the hero ---------- */
.previewFrame[data-theme-layout] .quickFacts {
  position: relative;
  z-index: 2;
  padding-inline: max(var(--t-section-x), (100% - var(--t-container)) / 2);
  padding-block: 18px;
  border-block: 1px solid var(--line);
  background: var(--bg-raised);
}
.previewFrame[data-theme-layout] .quickFactsInner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 8px 24px;
}
.previewFrame[data-theme-layout] .quickFact {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 8px 0;
  color: var(--text);
  text-decoration: none;
}
.previewFrame[data-theme-layout] .quickFactIcon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: none;
  place-items: center;
  border-radius: var(--gen-radius-md);
  background: color-mix(in srgb, var(--gen-accent) 16%, var(--bg-raised));
  color: var(--gen-accent-deep);
}
.previewFrame[data-theme-layout] .quickFactWhatsapp .quickFactIcon {
  background: #dcf8e7;
  color: #128c4b;
}
.previewFrame[data-theme-layout] .quickFact > span:last-child {
  display: grid;
  min-width: 0;
}
.previewFrame[data-theme-layout] .quickFact small {
  color: var(--text-faint);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.previewFrame[data-theme-layout] .quickFact b {
  overflow: hidden;
  font-size: 0.98rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.previewFrame[data-theme-layout] a.quickFact:hover b {
  color: var(--gen-accent-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@container site (max-width: 619px) {
  .previewFrame[data-theme-layout] .quickFacts { padding-inline: 20px; }
  /* Call and WhatsApp already sit in the phone's bottom bar; here the strip
     keeps only where and when, each with the full width to read. */
  .previewFrame[data-theme-layout] .quickFactsInner { grid-template-columns: 1fr; gap: 2px; }
  .previewFrame[data-theme-layout] .quickFactsInner > a[href^="tel:"],
  .previewFrame[data-theme-layout] .quickFactsInner > .quickFactWhatsapp { display: none; }
  .previewFrame[data-theme-layout] .quickFact b { white-space: normal; font-size: 0.95rem; }
  .previewFrame[data-theme-layout] .quickFactIcon { width: 36px; height: 36px; }
}

/* ---------- 14g. Offerings: names and descriptions people can read ---------- */
.previewFrame[data-theme-layout] .offeringEditorialName,
.previewFrame[data-theme-layout] .offeringPrecisionName,
.previewFrame[data-theme-layout] .offeringLuxeName,
.previewFrame[data-theme-layout] .offeringPlayfulName,
.previewFrame[data-theme-layout] .offeringLifestyleName {
  font-size: clamp(1.12rem, 1.5cqw, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.previewFrame[data-theme-layout] .offeringEditorialDesc,
.previewFrame[data-theme-layout] .offeringPrecisionDesc,
.previewFrame[data-theme-layout] .offeringLuxeDesc,
.previewFrame[data-theme-layout] .offeringPlayfulDesc,
.previewFrame[data-theme-layout] .offeringLifestyleDesc {
  margin-top: 8px;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.6;
}
.previewFrame[data-theme-layout] .offeringLifestyleBody,
.previewFrame[data-theme-layout] .offeringPlayfulBody,
.previewFrame[data-theme-layout] .offeringPrecisionBody {
  display: flex;
  flex-direction: column;
}
.previewFrame[data-theme-layout] .offeringAction {
  margin-top: auto;
  padding-top: 0;
}
.previewFrame[data-theme-layout] .offeringLifestyleBody .offeringAction,
.previewFrame[data-theme-layout] .offeringPlayfulBody .offeringAction,
.previewFrame[data-theme-layout] .offeringPrecisionBody .offeringAction {
  margin-top: 18px;
}

/* Precision: from a settings list to photo cards. */
.previewFrame[data-theme-layout="minimal"] .offeringsPrecision {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--t-grid-gap);
  max-width: none;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  counter-reset: offering;
}
/* Columns from the count, so rows come out full: 4 → 2×2, 5–6 → 3 across. */
@container site (min-width: 900px) {
  .previewFrame[data-theme-layout="minimal"] .offeringsPrecision:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .previewFrame[data-theme-layout="minimal"] .offeringsPrecision:has(> :nth-child(5)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .previewFrame[data-theme-layout="minimal"] .offeringsPrecision:has(> :nth-child(5)):not(:has(> :nth-child(6))) > :nth-child(n + 4) {
    grid-column: span 1;
  }
}
.previewFrame[data-theme-layout="minimal"] .offeringPrecisionRow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--gen-radius-lg);
  background: var(--bg-raised);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--gen-ink) 6%, transparent), 0 24px 50px -38px color-mix(in srgb, var(--gen-ink) 60%, transparent);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.previewFrame[data-theme-layout="minimal"] .offeringPrecisionRow + .offeringPrecisionRow {
  border-top: 1px solid var(--line);
}
.previewFrame[data-theme-layout="minimal"] .offeringPrecisionRow:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--gen-ink) 6%, transparent), 0 34px 60px -38px color-mix(in srgb, var(--gen-ink) 70%, transparent);
}
.previewFrame[data-theme-layout="minimal"] .offeringPrecisionThumb {
  order: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  box-shadow: none;
}
.previewFrame[data-theme-layout="minimal"] .offeringPrecisionPrice {
  order: 1;
  align-self: flex-start;
  margin: 20px 22px 0;
  padding: 4px 10px;
  border-radius: var(--gen-radius-pill);
  background: color-mix(in srgb, var(--gen-accent) 14%, var(--bg-raised));
  color: var(--gen-accent-deep);
  font-size: 0.86rem;
  font-weight: 700;
}
.previewFrame[data-theme-layout="minimal"] .offeringPrecisionBody {
  order: 2;
  flex: 1;
  padding: 18px 22px 24px;
}
.previewFrame[data-theme-layout="minimal"] .offeringPrecisionName::before {
  font-size: 0.72em;
}

/* Noir's ledger keeps its rows, with photos large enough to see. */
.previewFrame[data-theme-layout="luxe"] .offeringLuxeThumb {
  width: clamp(96px, 11cqw, 140px);
  height: clamp(96px, 11cqw, 140px);
  border-radius: var(--gen-radius-md);
}

/* ---------- 14h. About ---------- */
.previewFrame[data-theme-layout] .aboutLayout {
  align-items: center;
  gap: clamp(32px, 6cqw, 88px);
}
.previewFrame[data-theme-layout] .aboutLayout .sectionHeading {
  margin-bottom: 22px;
  text-align: left;
}
.previewFrame[data-theme-layout] .aboutLayout .sectionKicker::after {
  content: none;
}
/* An older rule gave .siteAbout a whole section's vertical padding, which
   opened a 300px gap between the About title and its paragraph. */
.previewFrame[data-theme-layout] .siteAbout {
  padding: 0;
}
.previewFrame[data-theme-layout] .aboutImage {
  aspect-ratio: 4 / 5;
  max-height: 620px;
  border-radius: var(--gen-radius-lg);
}

/* ---------- 14i. Gallery ---------- */
.previewFrame[data-theme-layout] .galleryTile,
.previewFrame[data-theme-layout] .galleryStripTile {
  border-radius: var(--gen-radius-md);
}
.previewFrame[data-theme-layout] .galleryTile > .genPhoto,
.previewFrame[data-theme-layout] .galleryStripTile > .genPhoto {
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.previewFrame[data-theme-layout] .galleryTile:hover > .genPhoto,
.previewFrame[data-theme-layout] .galleryStripTile:hover > .genPhoto {
  transform: scale(1.04);
}
.previewFrame[data-theme-layout] .galleryCaption {
  font-size: 0.86rem;
  font-weight: 650;
}

/* ---------- 14j. Testimonials ---------- */
.previewFrame[data-theme-layout] .testimonialCard {
  padding: clamp(24px, 3cqw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--gen-radius-lg);
  background: var(--bg-raised);
}
.previewFrame[data-theme-layout] .testimonialQuote {
  color: var(--text);
  font-size: clamp(1.04rem, 1.4cqw, 1.16rem);
  font-style: normal;
  line-height: 1.6;
}
.previewFrame[data-theme-layout="luxe"] .testimonialQuote,
.previewFrame[data-theme-layout="editorial"] .testimonialQuote {
  font-family: var(--theme-font-display, var(--font-display));
  font-style: italic;
}
.previewFrame[data-theme-layout] .testimonialAuthor {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0;
}
.previewFrame[data-theme-layout] .testimonialAvatar {
  display: grid;
  width: 40px;
  height: 40px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gen-accent) 22%, var(--bg-raised));
  color: var(--gen-accent-deep);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
/* Editorial's pull quote has no card, so no avatar crowding the big type. */
.previewFrame[data-theme-layout="editorial"] .testimonialCard:first-child .testimonialAvatar {
  width: 46px;
  height: 46px;
}

/* ---------- 14k. FAQ ---------- */
.previewFrame[data-theme-layout] .faqItem summary {
  font-size: clamp(1rem, 1.3cqw, 1.08rem);
  font-weight: 650;
}
.previewFrame[data-theme-layout] .faqItem p {
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.65;
}

/* ---------- 14l. Footer ---------- */
.previewFrame[data-theme-layout] .genFooterName {
  font-size: clamp(1.3rem, 2cqw, 1.6rem);
  font-weight: 700;
}
.previewFrame[data-theme-layout] .genFooterBlurb,
.previewFrame[data-theme-layout] .genFooterLink,
.previewFrame[data-theme-layout] .genFooterItem {
  font-size: 0.95rem;
}

/* ---------- 14m. The floating WhatsApp button stops covering content ---------- */
@media (min-width: 701px) {
  .siteDock .dockFloat {
    gap: 0;
    padding: 15px;
    transition: gap 0.25s ease, padding 0.25s ease, transform 0.2s ease;
  }
  .siteDock .dockFloat span {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.3s ease;
  }
  .siteDock .dockFloat:hover,
  .siteDock .dockFloat:focus-visible {
    gap: 10px;
    padding: 12px 20px 12px 14px;
  }
  .siteDock .dockFloat:hover span,
  .siteDock .dockFloat:focus-visible span {
    max-width: 200px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .previewFrame[data-theme-layout="minimal"] .offeringPrecisionRow,
  .previewFrame[data-theme-layout] .galleryTile > .genPhoto,
  .previewFrame[data-theme-layout] .galleryStripTile > .genPhoto,
  .siteDock .dockFloat,
  .siteDock .dockFloat span {
    transition: none;
  }
}
/* ===========================================================================
   15. Structure pass — split hero, phone header, how-it-works, closing card
   =========================================================================== */

/* ---------- 15a. Precision hero: text beside a large photo ----------
   Centred text over a letterboxed photo read as a template. On wide screens
   the words take the left column and the photograph the right, full height. */
@container site (min-width: 900px) {
  .previewFrame[data-theme-layout="minimal"] .heroPrecision {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: 1fr auto auto auto auto auto 1fr;
    column-gap: clamp(40px, 6cqw, 88px);
    align-items: start;
    min-height: min(720px, 86cqh);
    padding-block: clamp(48px, 6cqw, 80px);
    text-align: left;
  }
  .previewFrame[data-theme-layout="minimal"] .heroPrecision > .heroEyebrow { grid-column: 1; grid-row: 2; justify-self: start; }
  .previewFrame[data-theme-layout="minimal"] .heroPrecision > .siteName { grid-column: 1; grid-row: 3; margin-inline: 0; max-width: 14ch; }
  .previewFrame[data-theme-layout="minimal"] .heroPrecision > .subheadline { grid-column: 1; grid-row: 4; margin-inline: 0; max-width: 46ch; }
  .previewFrame[data-theme-layout="minimal"] .heroPrecision > .ctaRow { grid-column: 1; grid-row: 5; justify-content: flex-start; }
  .previewFrame[data-theme-layout="minimal"] .heroPrecision > .heroMeta { grid-column: 1; grid-row: 6; justify-content: flex-start; }
  .previewFrame[data-theme-layout="minimal"] .heroPrecision > .heroPrecisionCard {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: stretch;
    width: 100%;
    min-height: 460px;
    aspect-ratio: auto;
    margin: 0;
    border-radius: var(--gen-radius-lg);
  }
}

/* The trust line's tick sat far from its text when a centred line wrapped.
   Inline, it travels with the first word in left and centred heroes alike. */
.previewFrame[data-theme-layout] .heroProof {
  display: block;
  text-align: inherit;
}
.previewFrame[data-theme-layout] .heroProof .genIcon {
  display: inline;
  margin-right: 6px;
  vertical-align: -2px;
}

/* ---------- 15b. Header: name and a menu button on phones ---------- */
.previewFrame[data-theme-layout] .genMenu {
  display: none;
}
@container site (max-width: 900px) {
  .previewFrame[data-theme-layout] .genHeader {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 14px;
  }
  .previewFrame[data-theme-layout] .genHeader > .genNav,
  .previewFrame[data-theme-layout] .genHeader > .genHeaderCta {
    display: none;
  }
  /* A one-page site has no menu, so its header keeps the call to action. */
  .previewFrame[data-theme-layout] .genHeader:not(:has(.genMenu)) > .genHeaderCta {
    display: inline-flex;
  }
  .previewFrame[data-theme-layout] .genWordmark {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .previewFrame[data-theme-layout] .genMenu {
    display: block;
    flex: none;
  }
}
.previewFrame[data-theme-layout] .genMenu summary {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--gen-radius-md);
  background: var(--bg-raised);
  cursor: pointer;
  list-style: none;
}
.previewFrame[data-theme-layout] .genMenu summary::-webkit-details-marker { display: none; }
.previewFrame[data-theme-layout] .genMenu summary span,
.previewFrame[data-theme-layout] .genMenu summary span::before,
.previewFrame[data-theme-layout] .genMenu summary span::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.2s ease, background 0.2s ease;
}
.previewFrame[data-theme-layout] .genMenu summary span { position: relative; }
.previewFrame[data-theme-layout] .genMenu summary span::before,
.previewFrame[data-theme-layout] .genMenu summary span::after {
  content: "";
  position: absolute;
  left: 0;
}
.previewFrame[data-theme-layout] .genMenu summary span::before { top: -6px; }
.previewFrame[data-theme-layout] .genMenu summary span::after { top: 6px; }
.previewFrame[data-theme-layout] .genMenu[open] summary span { background: transparent; }
.previewFrame[data-theme-layout] .genMenu[open] summary span::before { transform: translateY(6px) rotate(45deg); }
.previewFrame[data-theme-layout] .genMenu[open] summary span::after { transform: translateY(-6px) rotate(-45deg); }
.previewFrame[data-theme-layout] .genMenuPanel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 20;
  display: grid;
  padding: 6px 20px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
  box-shadow: 0 30px 50px -30px color-mix(in srgb, var(--gen-ink) 55%, transparent);
}
.previewFrame[data-theme-layout] .genMenuPanel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 1.06rem;
  font-weight: 650;
}
.previewFrame[data-theme-layout] .genMenuPanel a:last-child { border-bottom: 0; }
.previewFrame[data-theme-layout] .genMenuPanel a span { color: var(--text-faint); }
.previewFrame[data-theme-layout] .genMenuPanel a[aria-current="page"] { color: var(--gen-accent-deep); }

/* ---------- 15c. How it works ---------- */
.previewFrame[data-theme-layout] .howItWorks {
  padding-inline: max(var(--t-section-x), (100% - var(--t-container)) / 2);
  padding-block: clamp(56px, 7cqw, 96px);
  border-block: 1px solid var(--line);
  background:
    radial-gradient(60cqw 30cqw at 100% 0%, color-mix(in srgb, var(--gen-accent) 10%, transparent), transparent 70%),
    var(--bg-raised);
}
.previewFrame[data-theme-layout] .steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
@container site (min-width: 760px) {
  .previewFrame[data-theme-layout] .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.4cqw, 28px);
  }
}
.previewFrame[data-theme-layout] .step {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: clamp(22px, 2.6cqw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--gen-radius-lg);
  background: var(--bg);
}
.previewFrame[data-theme-layout] .stepNumber {
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  place-items: center;
  border-radius: 50%;
  background: var(--gen-bg);
  color: var(--gen-text);
  font-family: var(--theme-font-display, var(--font-display));
  font-size: 1.1rem;
  font-weight: 700;
}
.previewFrame[data-theme-layout] .step b {
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 700;
}
.previewFrame[data-theme-layout] .step p {
  color: var(--text-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}
.previewFrame[data-theme-layout="minimal"] .howItWorks .sectionHeading,
.previewFrame[data-theme-layout="luxe"] .howItWorks .sectionHeading {
  text-align: center;
}

/* ---------- 15d. Closing call to action ---------- */
.previewFrame[data-theme-layout] .closingCta {
  padding-inline: max(var(--t-section-x), (100% - var(--t-container)) / 2);
  padding-block: clamp(48px, 6cqw, 88px);
}
.previewFrame[data-theme-layout] .closingCard {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  gap: 24px;
  align-items: center;
  padding: clamp(30px, 5cqw, 64px);
  border-radius: calc(var(--gen-radius-lg) + 6px);
  background:
    radial-gradient(40cqw 22cqw at 100% 0%, color-mix(in srgb, var(--gen-accent) 32%, transparent), transparent 70%),
    var(--gen-bg);
  color: var(--gen-text);
  box-shadow: 0 40px 90px -50px color-mix(in srgb, var(--gen-ink) 80%, transparent);
}
@container site (min-width: 820px) {
  .previewFrame[data-theme-layout] .closingCard { grid-template-columns: minmax(0, 1fr) auto; }
}
.previewFrame[data-theme-layout] .closingCard h2 {
  max-width: 18ch;
  margin: 0;
  color: var(--gen-text);
  font-family: var(--theme-font-display, var(--font-display));
  font-size: clamp(1.9rem, 4cqw, 3rem);
  font-weight: var(--t-h2-weight, 650);
  line-height: 1.08;
  letter-spacing: var(--t-h2-tracking, -0.02em);
}
.previewFrame[data-theme-layout] .closingCard p {
  max-width: 46ch;
  margin-top: 12px;
  color: var(--gen-text-soft);
  font-size: 1.06rem;
}
.previewFrame[data-theme-layout] .closingActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.previewFrame[data-theme-layout] .closingPrimary,
.previewFrame[data-theme-layout] .closingSecondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 54px;
  padding: 0 26px;
  border-radius: var(--gen-radius-pill);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.previewFrame[data-theme-layout] .closingPrimary {
  background: var(--gen-accent);
  color: var(--gen-accent-ink);
}
.previewFrame[data-theme-layout] .closingWhatsapp {
  background: #25d366;
  color: #053b1c;
}
.previewFrame[data-theme-layout] .closingSecondary {
  border: 1.5px solid color-mix(in srgb, var(--gen-text) 40%, transparent);
  color: var(--gen-text);
}
.previewFrame[data-theme-layout] .closingPrimary:hover,
.previewFrame[data-theme-layout] .closingSecondary:hover {
  transform: translateY(-2px);
}
@container site (max-width: 619px) {
  .previewFrame[data-theme-layout] .closingCta,
  .previewFrame[data-theme-layout] .howItWorks { padding-inline: 20px; }
  .previewFrame[data-theme-layout] .closingActions > a { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .previewFrame[data-theme-layout] .genMenu summary span,
  .previewFrame[data-theme-layout] .genMenu summary span::before,
  .previewFrame[data-theme-layout] .genMenu summary span::after,
  .previewFrame[data-theme-layout] .closingPrimary,
  .previewFrame[data-theme-layout] .closingSecondary {
    transition: none;
  }
}

/* ===========================================================================
   Retail storefront
   ---------------------------------------------------------------------------
   Shop requests get a purpose-built mobile-first storefront instead of a
   marketing-site service grid. The basket is deliberately static/client-side:
   it works on a free preview and hands the final order to WhatsApp.
   =========================================================================== */
.previewFrame[data-business-type="shop"] {
  background:
    radial-gradient(70cqw 42cqw at 92% 5%, color-mix(in srgb, var(--gen-accent) 10%, transparent), transparent 70%),
    var(--bg);
}
.previewFrame[data-business-type="shop"] .genHeader {
  border-bottom-color: color-mix(in srgb, var(--gen-ink) 10%, transparent);
  background: color-mix(in srgb, var(--bg-raised) 90%, transparent);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.shopHeaderCart {
  border: 0;
  cursor: pointer;
}
.shopHeaderCart b,
.previewFrame[data-business-type="shop"] .closingPrimary b {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--gen-accent-ink);
  color: var(--gen-accent);
  font-size: 0.72rem;
}

.heroStore {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  gap: clamp(36px, 6cqw, 76px);
  align-items: center;
  min-height: 620px;
  overflow: hidden;
  padding: clamp(52px, 8cqw, 100px) clamp(24px, 7cqw, 88px);
  background:
    radial-gradient(32cqw 28cqw at 92% 12%, color-mix(in srgb, var(--gen-accent) 24%, transparent), transparent 72%),
    linear-gradient(135deg, var(--bg-raised), color-mix(in srgb, var(--gen-accent) 6%, var(--bg)));
  color: var(--text);
}
.heroStore::before {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  left: -86px;
  bottom: -90px;
  border: 1px solid color-mix(in srgb, var(--gen-accent) 46%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 34px color-mix(in srgb, var(--gen-accent) 7%, transparent), 0 0 0 68px color-mix(in srgb, var(--gen-accent) 4%, transparent);
}
.heroStoreCopy { position: relative; z-index: 1; }
.storeTrustPill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--gen-ink) 12%, transparent);
  border-radius: var(--gen-radius-pill);
  background: color-mix(in srgb, var(--bg-raised) 82%, transparent);
  box-shadow: 0 10px 30px -22px color-mix(in srgb, var(--gen-ink) 70%, transparent);
  color: var(--gen-ink);
  font-size: 0.75rem;
  font-weight: 700;
}
.heroStore .heroEyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--text-faint);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.previewFrame[data-business-type="shop"] .heroStore .siteName {
  max-width: 12ch;
  color: var(--text);
  font-size: clamp(2.8rem, 6.2cqw, 5.2rem);
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 0.98;
}
.heroStore .subheadline {
  max-width: 48ch;
  margin-top: 20px;
  color: var(--text-soft);
  font-size: 1.06rem;
  line-height: 1.7;
}
.heroStore .ctaPrimary {
  background: var(--gen-ink);
  color: var(--bg-raised);
  box-shadow: 0 18px 34px -18px color-mix(in srgb, var(--gen-ink) 70%, transparent);
}
.heroStore .ctaGhost {
  border-color: var(--line-strong);
  color: var(--text);
}
.heroStore .ctaWhatsapp { gap: 8px; }
.heroStoreVisual {
  position: relative;
  padding: 18px 18px 28px;
}
.heroStoreVisual::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: calc(var(--gen-radius-lg) + 22px);
  background: color-mix(in srgb, var(--gen-accent) 20%, var(--bg-raised));
  transform: rotate(3deg);
}
.heroStoreImage {
  position: relative;
  aspect-ratio: 4 / 4.5;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gen-ink) 12%, transparent);
  border-radius: calc(var(--gen-radius-lg) + 10px);
  background: var(--bg-sunken);
  box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--gen-ink) 75%, transparent);
}
.heroStoreImage .genPhoto { transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
.heroStore:hover .heroStoreImage .genPhoto { transform: scale(1.025); }
.heroStoreBadge {
  position: absolute;
  right: -4px;
  bottom: 2px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 230px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--gen-ink) 12%, transparent);
  border-radius: var(--gen-radius-md);
  background: color-mix(in srgb, var(--bg-raised) 92%, transparent);
  box-shadow: 0 22px 48px -24px color-mix(in srgb, var(--gen-ink) 70%, transparent);
  color: var(--gen-ink);
  font-size: 0.8rem;
  font-weight: 700;
  backdrop-filter: blur(12px);
}
.heroStoreBadge svg { color: #138f48; }
@container site (max-width: 760px) {
  .heroStore {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 38px;
    padding: 52px 20px 34px;
  }
  .previewFrame[data-business-type="shop"] .heroStore .siteName {
    max-width: 13ch;
    font-size: clamp(2.55rem, 13cqw, 4rem);
  }
  .heroStoreVisual { padding: 10px 10px 20px; }
  .heroStoreImage { aspect-ratio: 4 / 4.2; }
  .heroStoreBadge { right: 0; bottom: 0; }
}

.storeProductGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4cqw, 26px);
}
.storeProductCard {
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--gen-ink) 11%, transparent);
  border-radius: calc(var(--gen-radius-lg) + 2px);
  background: var(--bg-raised);
  box-shadow: 0 18px 45px -36px color-mix(in srgb, var(--gen-ink) 65%, transparent);
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.storeProductCard:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--gen-accent) 50%, var(--line));
  box-shadow: 0 32px 70px -40px color-mix(in srgb, var(--gen-ink) 76%, transparent);
}
.storeProductImage {
  position: relative;
  aspect-ratio: 1 / 1.04;
  overflow: hidden;
  background: color-mix(in srgb, var(--gen-accent) 12%, var(--bg-sunken));
}
.storeProductImage .genPhoto { transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
.storeProductCard:hover .storeProductImage .genPhoto { transform: scale(1.045); }
.storeProductTag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 5px 10px;
  border-radius: var(--gen-radius-pill);
  background: var(--gen-ink);
  color: var(--bg-raised);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.03em;
}
.storeProductBody {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px;
}
.storeProductTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.storeProductTop h3 {
  color: var(--text);
  font-family: var(--theme-font-display, var(--font-display));
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.25;
}
.storeProductPrice {
  display: inline-flex;
  flex: none;
  min-height: 32px;
  align-items: center;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--gen-tint);
  color: var(--gen-ink);
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.storeProductPriceQuoted {
  background: color-mix(in srgb, var(--gen-accent-2) 22%, var(--bg-raised));
}
.storeProductBody > p {
  display: -webkit-box;
  min-height: 3.1em;
  margin-top: 9px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text-soft);
  font-size: 0.86rem;
  line-height: 1.55;
}
.storeProductOptions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.storeProductOption {
  display: grid;
  gap: 6px;
}
.storeProductOption > span {
  color: var(--text-faint);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.storeProductOption select {
  width: 100%;
  min-height: 42px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--gen-radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
}
.storeAddButton {
  display: inline-flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--gen-radius-md);
  background: var(--gen-ink);
  color: var(--bg-raised);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 750;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.storeAddButton:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--gen-accent) 25%, var(--gen-ink));
  box-shadow: 0 14px 28px -18px color-mix(in srgb, var(--gen-ink) 85%, transparent);
}
.storeAddButton:active { transform: scale(0.98); }
.storeAddButton:focus-visible { outline: 2px solid var(--gen-accent); outline-offset: 3px; }

/* A storefront used to ignore the chosen theme and always render the same
   three-card grid. These compositions keep the commerce behaviour shared,
   while giving each visual direction a recognisable editorial rhythm. */
.previewFrame[data-business-type="shop"][data-theme-layout="editorial"] .storeProductGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.previewFrame[data-business-type="shop"][data-theme-layout="editorial"] .storeProductCard:first-child {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(280px, 1.08fr) minmax(0, 0.92fr);
}
.previewFrame[data-business-type="shop"][data-theme-layout="editorial"] .storeProductCard:first-child .storeProductImage {
  min-height: 430px;
  height: 100%;
  aspect-ratio: auto;
}
.previewFrame[data-business-type="shop"][data-theme-layout="editorial"] .storeProductCard:first-child .storeProductBody {
  justify-content: center;
  padding: clamp(28px, 4cqw, 52px);
}
.previewFrame[data-business-type="shop"][data-theme-layout="editorial"] .storeProductCard:first-child .storeProductTop h3 {
  max-width: 15ch;
  font-size: clamp(1.6rem, 2.8cqw, 2.35rem);
  line-height: 1.05;
}
.previewFrame[data-business-type="shop"][data-theme-layout="editorial"] .storeProductCard:first-child .storeProductBody > p {
  display: block;
  min-height: 0;
  margin-top: 18px;
  overflow: visible;
  -webkit-line-clamp: unset;
  font-size: 0.98rem;
  line-height: 1.7;
}

.previewFrame[data-business-type="shop"][data-theme-layout="minimal"] .heroStore {
  min-height: 560px;
  background: var(--bg-raised);
}
.previewFrame[data-business-type="shop"][data-theme-layout="minimal"] .heroStore::before,
.previewFrame[data-business-type="shop"][data-theme-layout="minimal"] .heroStoreVisual::before {
  display: none;
}
.previewFrame[data-business-type="shop"][data-theme-layout="minimal"] .heroStoreVisual {
  padding: 0;
}
.previewFrame[data-business-type="shop"][data-theme-layout="minimal"] .heroStoreImage,
.previewFrame[data-business-type="shop"][data-theme-layout="minimal"] .storeProductCard {
  border-radius: 0;
  box-shadow: none;
}
.previewFrame[data-business-type="shop"][data-theme-layout="minimal"] .storeProductGrid {
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line-strong);
}
.previewFrame[data-business-type="shop"][data-theme-layout="minimal"] .storeProductCard {
  display: grid;
  grid-template-columns: minmax(180px, 0.34fr) minmax(0, 0.66fr);
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
}
.previewFrame[data-business-type="shop"][data-theme-layout="minimal"] .storeProductCard:hover {
  transform: none;
  background: var(--bg-raised);
}
.previewFrame[data-business-type="shop"][data-theme-layout="minimal"] .storeProductImage {
  height: 100%;
  min-height: 260px;
  aspect-ratio: 4 / 3;
}
.previewFrame[data-business-type="shop"][data-theme-layout="minimal"] .storeProductBody {
  justify-content: center;
  padding: clamp(24px, 4cqw, 48px);
}
.previewFrame[data-business-type="shop"][data-theme-layout="minimal"] .storeProductTop h3 {
  font-size: clamp(1.25rem, 2cqw, 1.7rem);
}
.previewFrame[data-business-type="shop"][data-theme-layout="minimal"] .storeProductOptions,
.previewFrame[data-business-type="shop"][data-theme-layout="minimal"] .storeAddButton {
  max-width: 420px;
}

.previewFrame[data-business-type="shop"][data-theme-layout="luxe"] .heroStore {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--gen-bg) 96%, transparent), color-mix(in srgb, var(--gen-bg) 88%, transparent)),
    var(--gen-bg);
}
.previewFrame[data-business-type="shop"][data-theme-layout="luxe"] .heroStore .heroEyebrow,
.previewFrame[data-business-type="shop"][data-theme-layout="luxe"] .heroStore .siteName,
.previewFrame[data-business-type="shop"][data-theme-layout="luxe"] .heroStore .subheadline,
.previewFrame[data-business-type="shop"][data-theme-layout="luxe"] .heroStore .heroMeta,
.previewFrame[data-business-type="shop"][data-theme-layout="luxe"] .heroStore .ctaGhost {
  color: var(--gen-text);
}
.previewFrame[data-business-type="shop"][data-theme-layout="luxe"] .heroStore .ctaGhost {
  border-color: color-mix(in srgb, var(--gen-text) 35%, transparent);
}
.previewFrame[data-business-type="shop"][data-theme-layout="luxe"] .heroStore .ctaPrimary {
  background: var(--gen-accent);
  color: var(--gen-accent-ink);
}
.previewFrame[data-business-type="shop"][data-theme-layout="luxe"] .storeTrustPill {
  border-color: color-mix(in srgb, var(--gen-text) 20%, transparent);
  background: color-mix(in srgb, var(--gen-text) 8%, transparent);
  color: var(--gen-text);
}
.previewFrame[data-business-type="shop"][data-theme-layout="luxe"] .heroStoreVisual::before {
  background: color-mix(in srgb, var(--gen-accent) 44%, var(--gen-bg));
}
.previewFrame[data-business-type="shop"][data-theme-layout="luxe"] .storeProductGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4cqw, 52px);
}
.previewFrame[data-business-type="shop"][data-theme-layout="luxe"] .storeProductCard {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.previewFrame[data-business-type="shop"][data-theme-layout="luxe"] .storeProductCard:hover {
  border-color: transparent;
  box-shadow: none;
}
.previewFrame[data-business-type="shop"][data-theme-layout="luxe"] .storeProductImage {
  aspect-ratio: 4 / 5;
  border-radius: 0;
}
.previewFrame[data-business-type="shop"][data-theme-layout="luxe"] .storeProductBody {
  padding: 22px 0 8px;
}
.previewFrame[data-business-type="shop"][data-theme-layout="luxe"] .storeProductTop h3 {
  font-size: clamp(1.35rem, 2.2cqw, 1.8rem);
  font-weight: 500;
}
.previewFrame[data-business-type="shop"][data-theme-layout="luxe"] .storeAddButton {
  border: 1px solid var(--gen-ink);
  border-radius: 0;
  background: transparent;
  color: var(--gen-ink);
}
.previewFrame[data-business-type="shop"][data-theme-layout="luxe"] .storeAddButton:hover {
  background: var(--gen-ink);
  color: var(--bg-raised);
}

.previewFrame[data-business-type="shop"][data-theme-layout="bold"] .storeProductCard:first-child {
  grid-column: span 2;
}
.previewFrame[data-business-type="shop"][data-theme-layout="bold"] .storeProductCard:first-child .storeProductImage {
  aspect-ratio: 16 / 9;
}
.previewFrame[data-business-type="shop"][data-theme-layout="bold"] .storeProductCard,
.previewFrame[data-business-type="shop"][data-theme-layout="bold"] .storeProductImage {
  border-radius: var(--gen-radius-sm);
}
.previewFrame[data-business-type="shop"][data-theme-layout="bold"] .storeProductTag {
  background: var(--gen-accent);
  color: var(--gen-accent-ink);
}

@container site (max-width: 700px) {
  .previewFrame[data-business-type="shop"][data-theme-layout="editorial"] .storeProductGrid,
  .previewFrame[data-business-type="shop"][data-theme-layout="luxe"] .storeProductGrid {
    grid-template-columns: 1fr;
  }
  .previewFrame[data-business-type="shop"][data-theme-layout="editorial"] .storeProductCard:first-child,
  .previewFrame[data-business-type="shop"][data-theme-layout="minimal"] .storeProductCard {
    display: flex;
    grid-column: auto;
  }
  .previewFrame[data-business-type="shop"][data-theme-layout="editorial"] .storeProductCard:first-child .storeProductImage,
  .previewFrame[data-business-type="shop"][data-theme-layout="minimal"] .storeProductImage {
    min-height: 0;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .previewFrame[data-business-type="shop"][data-theme-layout="bold"] .storeProductCard:first-child {
    grid-column: auto;
  }
}
@container site (max-width: 780px) {
  .storeProductGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container site (max-width: 430px) {
  .storeProductGrid { gap: 12px; }
  .storeProductBody { padding: 14px; }
  .storeProductTop { display: grid; gap: 5px; }
  .storeProductPrice { width: fit-content; white-space: normal; }
  .storeProductBody > p { min-height: 0; font-size: 0.8rem; }
  .storeAddButton { min-height: 44px; padding: 0 8px; font-size: 0.78rem; }
}

body.shopCartOpen { overflow: hidden; }
.shopCart [hidden] { display: none !important; }
.shopCartFloat {
  position: fixed;
  z-index: 89;
  right: 22px;
  bottom: 22px;
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  gap: 9px;
  padding: 0 11px 0 18px;
  border: 1px solid color-mix(in srgb, var(--gen-text) 14%, transparent);
  border-radius: 999px;
  background: var(--gen-bg);
  box-shadow: 0 18px 48px -18px color-mix(in srgb, var(--gen-bg) 74%, transparent);
  color: var(--gen-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 750;
  cursor: pointer;
}
.shopCartFloat b {
  display: grid;
  min-width: 32px;
  height: 32px;
  place-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--gen-accent);
  color: var(--gen-accent-ink);
  font-size: 0.78rem;
}
.shopCartBackdrop {
  position: fixed;
  z-index: 97;
  inset: 0;
  background: rgba(6, 18, 13, 0.48);
  backdrop-filter: blur(4px);
}
.shopCartDrawer {
  position: fixed;
  z-index: 98;
  top: 0;
  right: 0;
  display: grid;
  width: min(430px, 100%);
  height: 100dvh;
  grid-template-rows: auto 1fr auto auto;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background: var(--bg-raised);
  box-shadow: -34px 0 90px -45px rgba(6, 18, 13, 0.62);
  color: var(--text);
  font-family: var(--font-body);
}
.shopCartHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding: 26px 24px 22px;
  border-bottom: 1px solid var(--line);
}
.shopCartHead > div > span {
  color: var(--gen-ink);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.shopCartHead h2 {
  margin-top: 4px;
  color: var(--text);
  font-family: var(--theme-font-display, var(--font-display));
  font-size: 1.8rem;
  line-height: 1.1;
}
.shopCartHead p { margin-top: 8px; color: var(--text-soft); font-size: 0.86rem; line-height: 1.5; }
.shopCartHead > button {
  display: grid;
  width: 38px;
  height: 38px;
  flex: none;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 1.5rem;
  cursor: pointer;
}
.shopCartItems { overflow-y: auto; padding: 8px 24px 24px; }
.shopCartItem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.shopCartItemCopy { display: grid; gap: 3px; }
.shopCartItemCopy strong { font-size: 0.94rem; line-height: 1.35; }
.shopCartItemCopy small { color: var(--text-soft); font-size: 0.74rem; line-height: 1.45; }
.shopCartItemCopy span { color: var(--gen-ink); font-size: 0.82rem; font-weight: 750; }
.shopCartQuantity {
  display: grid;
  grid-template-columns: 32px 30px 32px;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  text-align: center;
}
.shopCartQtyButton {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}
.shopCartRemove {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-faint);
  font: inherit;
  font-size: 0.72rem;
  text-decoration: underline;
  cursor: pointer;
}
.shopCartEmpty {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  padding: 36px;
  color: var(--text-soft);
  text-align: center;
}
.shopCartEmpty svg { color: var(--gen-ink); }
.shopCartEmpty button {
  padding: 10px 17px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.shopOrderDetails {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 24px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--gen-accent) 5%, var(--bg));
}
.shopOrderDetails h3 {
  grid-column: 1 / -1;
  color: var(--text);
  font-family: var(--theme-font-display, var(--font-display));
  font-size: 1rem;
}
.shopOrderDetails label { display: grid; gap: 5px; }
.shopOrderDetails label:last-child:nth-child(even) { grid-column: 1 / -1; }
.shopOrderDetails label > span {
  color: var(--text-faint);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.shopOrderDetails input {
  width: 100%;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--gen-radius-sm);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
}
.shopCartFooter {
  padding: 20px 24px calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg-raised);
}
.shopCartFooter > div { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.shopCartFooter > div span { color: var(--text-soft); font-size: 0.85rem; }
.shopCartFooter > div strong { font-size: 1.18rem; }
.shopCartCheckout {
  display: inline-flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: var(--gen-radius-md);
  background: #20b75a;
  color: #062d17;
  font-size: 0.94rem;
  font-weight: 800;
}
.shopCartCheckout[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.shopCartPricingNote {
  margin-top: 10px;
  color: var(--text-faint);
  font-size: 0.72rem;
  line-height: 1.45;
  text-align: center;
}
@media (max-width: 600px) {
  .shopCartFloat { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .shopCartDrawer { width: 100%; }
  .shopOrderDetails { grid-template-columns: 1fr; }
  .shopOrderDetails label:last-child:nth-child(even) { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .heroStoreImage .genPhoto,
  .storeProductCard,
  .storeProductImage .genPhoto,
  .storeAddButton { transition: none; }
}

/* Last-mile quality shared by every generated theme. */
.previewFrame[data-theme-layout] {
  accent-color: var(--gen-accent-deep);
  overflow-wrap: anywhere;
}
.previewFrame[data-theme-layout] h1,
.previewFrame[data-theme-layout] h2,
.previewFrame[data-theme-layout] h3 { text-wrap: balance; }
.previewFrame[data-theme-layout] p,
.previewFrame[data-theme-layout] li { text-wrap: pretty; }
.previewFrame[data-theme-layout] button,
.previewFrame[data-theme-layout] summary,
.previewFrame[data-theme-layout] a { -webkit-tap-highlight-color: transparent; }
.previewFrame[data-theme-layout] input,
.previewFrame[data-theme-layout] textarea,
.previewFrame[data-theme-layout] select { font-size: max(16px, 1rem); }
.previewFrame[data-theme-layout] .genMenu summary,
.previewFrame[data-theme-layout] .shopHeaderCart,
.previewFrame[data-theme-layout] .contactSend { min-width: 44px; min-height: 44px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .siteSkip { transition: none; }
}
/* >>> shared-tail:end <<< */


/* ---- Your custom CSS ---- */
body {
  background: #f8f4ea;
}

.previewFrame[data-theme-layout="editorial"] {
  --bg: #f8f4ea;
  --bg-raised: #fffdf8;
  --bg-sunken: #eee8d9;
  --gen-tint: #f1ecdf;
  --text: #17372d;
  --text-soft: #56655d;
  --text-faint: #7b8279;
  --line: rgba(23, 55, 45, 0.12);
  --line-strong: rgba(23, 55, 45, 0.24);
  --gen-bg: #173c2f;
  --gen-text: #fffaf0;
  --gen-text-soft: #d7dfd6;
  --gen-accent: #c69a4b;
  --gen-accent-2: #7f8c59;
  --gen-accent-deep: #79581f;
  --gen-accent-ink: #201704;
  --gen-ink: #173c2f;
}

.previewFrame[data-theme-layout="editorial"] .genHeader {
  border-bottom-color: rgba(23, 55, 45, 0.1);
  box-shadow: 0 12px 34px -30px rgba(23, 55, 45, 0.55);
}

.previewFrame[data-theme-layout="editorial"] .genWordmark {
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.previewFrame[data-theme-layout="editorial"] .genWordmark::after {
  content: "";
}

.previewFrame[data-theme-layout="editorial"] .genHeaderCta,
.previewFrame[data-theme-layout="editorial"] .ctaPrimary,
.previewFrame[data-theme-layout="editorial"] .ctaBannerBtn,
.previewFrame[data-theme-layout="editorial"] .contactSend {
  background: #173c2f;
  color: #fffaf0;
  border: 1px solid #173c2f;
  box-shadow: 0 18px 36px -24px rgba(23, 60, 47, 0.75);
}

.previewFrame[data-theme-layout="editorial"] .heroEditorial {
  min-height: 660px;
  grid-template-columns: minmax(0, 0.95fr) minmax(380px, 1.05fr);
  gap: clamp(48px, 7cqw, 96px);
  background:
    radial-gradient(circle at 82% 16%, rgba(198, 154, 75, 0.14), transparent 23%),
    radial-gradient(circle at 5% 78%, rgba(127, 140, 89, 0.12), transparent 28%),
    #fffdf8;
}

.previewFrame[data-theme-layout="editorial"] .heroEditorial .heroEyebrow {
  border: 0;
  color: #6f7952;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  padding: 0;
}

.previewFrame[data-theme-layout="editorial"] .heroEditorial .heroHeadline {
  max-width: 11ch;
  margin-top: 12px;
  font-size: clamp(2.75rem, 5.8cqw, 5.1rem);
  font-weight: 600;
  letter-spacing: -0.045em;
}

.previewFrame[data-theme-layout="editorial"] .heroEditorial .subheadline {
  max-width: 53ch;
  margin-top: 22px;
  font-size: clamp(1rem, 1.45cqw, 1.16rem);
  line-height: 1.75;
}

.previewFrame[data-theme-layout="editorial"] .heroEditorialImageWrap::before {
  inset: 22px -18px -22px 18px;
  border-radius: 18px;
  background: linear-gradient(145deg, #b88a37, #dcc28c);
  transform: rotate(-1.25deg);
}

.previewFrame[data-theme-layout="editorial"] .heroEditorialImage {
  aspect-ratio: 510 / 370;
  border-radius: 18px;
  transform: rotate(1.25deg);
  box-shadow: 0 36px 80px -42px rgba(23, 55, 45, 0.72);
}

.previewFrame[data-theme-layout="editorial"] .siteSection {
  padding-block: clamp(72px, 9cqw, 118px);
}

.previewFrame[data-theme-layout="editorial"] .sectionHeading {
  margin-bottom: clamp(34px, 4cqw, 54px);
}

.previewFrame[data-theme-layout="editorial"] .sectionHeading h2 {
  border: 0;
  padding: 0;
  font-size: clamp(2rem, 4.2cqw, 3.25rem);
  letter-spacing: -0.035em;
}

.previewFrame[data-theme-layout="editorial"] .sectionHeading::before {
  width: 54px;
  height: 2px;
  background: linear-gradient(90deg, #b98d3f, #7f8c59);
}

.previewFrame[data-theme-layout="editorial"] .offeringsEditorial {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2cqw, 28px);
}

.previewFrame[data-theme-layout="editorial"] .offeringEditorialCard,
.previewFrame[data-theme-layout="editorial"] .offeringEditorialCard.offeringFeatured {
  grid-column: auto;
  padding: 12px 12px 22px;
  border: 1px solid rgba(23, 55, 45, 0.11);
  border-radius: 18px;
  background: #fffdf8;
  box-shadow: 0 26px 64px -48px rgba(23, 55, 45, 0.8);
}

.previewFrame[data-theme-layout="editorial"] .offeringEditorialImage,
.previewFrame[data-theme-layout="editorial"] .offeringEditorialCard.offeringFeatured .offeringEditorialImage {
  aspect-ratio: 510 / 370;
  margin-bottom: 20px;
  border-radius: 12px;
}

.previewFrame[data-theme-layout="editorial"] .offeringEditorialHead,
.previewFrame[data-theme-layout="editorial"] .offeringEditorialDesc,
.previewFrame[data-theme-layout="editorial"] .offeringAction {
  margin-inline: 8px;
}

.previewFrame[data-theme-layout="editorial"] .offeringEditorialName {
  font-size: clamp(1.22rem, 1.8cqw, 1.55rem);
  line-height: 1.25;
}

.previewFrame[data-theme-layout="editorial"] .priceBadge {
  color: #79581f;
  white-space: normal;
  text-align: right;
}

.previewFrame[data-theme-layout="editorial"] .offeringEditorialDesc {
  margin-top: 12px;
  line-height: 1.7;
}

.previewFrame[data-theme-layout="editorial"] .aboutTeaser {
  background:
    linear-gradient(130deg, rgba(198, 154, 75, 0.09), transparent 42%),
    #f1ecdf;
}

.previewFrame[data-theme-layout="editorial"] .aboutTeaserImage,
.previewFrame[data-theme-layout="editorial"] .aboutImage,
.previewFrame[data-theme-layout="editorial"] .galleryStripTile,
.previewFrame[data-theme-layout="editorial"] .galleryTile {
  border: 1px solid rgba(198, 154, 75, 0.24);
  box-shadow: 0 30px 66px -48px rgba(23, 55, 45, 0.7);
}

.previewFrame[data-theme-layout="editorial"] .aboutTeaserImage,
.previewFrame[data-theme-layout="editorial"] .aboutImage {
  aspect-ratio: 510 / 370;
}

.previewFrame[data-theme-layout="editorial"] .galleryStripTile,
.previewFrame[data-theme-layout="editorial"] .galleryTile {
  aspect-ratio: 510 / 370;
}

.previewFrame[data-theme-layout="editorial"] .ctaBanner {
  background:
    radial-gradient(circle at 90% 10%, rgba(198, 154, 75, 0.24), transparent 36%),
    #173c2f;
  color: #fffaf0;
}

.previewFrame[data-theme-layout="editorial"] .ctaBannerBtn {
  background: #c69a4b;
  border-color: #c69a4b;
  color: #201704;
}

.previewFrame[data-theme-layout="editorial"] .genFooter {
  background: linear-gradient(145deg, #173c2f, #0d2b21);
  border-top-color: #c69a4b;
}

@container site (max-width: 820px) {
  .previewFrame[data-theme-layout="editorial"] .heroEditorial {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .previewFrame[data-theme-layout="editorial"] .heroEditorial .heroHeadline {
    max-width: 13ch;
  }

  .previewFrame[data-theme-layout="editorial"] .offeringsEditorial {
    grid-template-columns: 1fr;
  }
}

@container site (max-width: 470px) {
  .previewFrame[data-theme-layout="editorial"] .heroEditorial {
    padding-block: 54px 64px;
  }

  .previewFrame[data-theme-layout="editorial"] .heroEditorialImageWrap::before {
    inset: 12px -8px -12px 8px;
  }

  .previewFrame[data-theme-layout="editorial"] .siteSection {
    padding-block: 58px;
  }
}

/* Hiba uses the shop renderer, whose component names differ from the
   non-commerce editorial renderer. Keep the botanical art direction while
   targeting the markup that is actually published. */
.previewFrame[data-theme-layout="editorial"][data-business-type="shop"] #s-hero .heroStore {
  min-height: 680px;
  grid-template-columns: minmax(0, 0.92fr) minmax(380px, 1.08fr);
  gap: clamp(48px, 7cqw, 96px);
  background:
    radial-gradient(circle at 82% 16%, rgba(198, 154, 75, 0.14), transparent 23%),
    radial-gradient(circle at 5% 78%, rgba(127, 140, 89, 0.12), transparent 28%),
    #f8f6f1;
  color: #1c3524;
}

.previewFrame[data-theme-layout="editorial"][data-business-type="shop"] #s-hero .heroHeadline {
  max-width: 11ch;
  color: #1c3524;
  font-size: clamp(2.75rem, 5.8cqw, 5.1rem);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.previewFrame[data-theme-layout="editorial"][data-business-type="shop"] #s-hero .subheadline {
  max-width: 53ch;
  color: #4f5d55;
}

.previewFrame[data-theme-layout="editorial"][data-business-type="shop"] #s-hero .heroEyebrow {
  color: #806225;
}

.previewFrame[data-theme-layout="editorial"][data-business-type="shop"] #s-hero .ctaGhost {
  border-color: rgba(28, 53, 36, 0.35);
  color: #1c3524;
}

.previewFrame[data-theme-layout="editorial"][data-business-type="shop"] #s-hero .heroMeta {
  color: #56655d;
}

.previewFrame[data-theme-layout="editorial"][data-business-type="shop"] .heroStoreVisual::before {
  border-radius: 4px;
  background: linear-gradient(145deg, #c79e57, #e2d2ad);
}

.previewFrame[data-theme-layout="editorial"][data-business-type="shop"] .heroStoreImage {
  border-radius: 4px;
  border-color: rgba(28, 53, 36, 0.16);
}

.previewFrame[data-theme-layout="editorial"][data-business-type="shop"] .storeProductGrid {
  gap: clamp(22px, 2.8cqw, 42px);
}

.previewFrame[data-theme-layout="editorial"][data-business-type="shop"] .storeProductCard {
  border-radius: 0;
  border-color: rgba(28, 53, 36, 0.12);
  background: #f8f6f1;
  box-shadow: 0 28px 60px -48px rgba(28, 53, 36, 0.72);
}

.previewFrame[data-theme-layout="editorial"][data-business-type="shop"] .storeProductImage {
  aspect-ratio: 4 / 5;
  border-radius: 0;
}

.previewFrame[data-theme-layout="editorial"][data-business-type="shop"] .storeAddButton {
  border-radius: 0;
  background: #1c3524;
  color: #f8f6f1;
}

@container site (max-width: 900px) {
  .previewFrame[data-theme-layout="editorial"][data-business-type="shop"] #s-hero .heroStore {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .previewFrame[data-theme-layout="editorial"][data-business-type="shop"] #s-hero .heroHeadline {
    max-width: 13ch;
  }
}

@container site (max-width: 520px) {
  .previewFrame[data-theme-layout="editorial"][data-business-type="shop"] #s-hero .heroStore {
    padding: 54px 22px 64px;
  }

  .previewFrame[data-theme-layout="editorial"][data-business-type="shop"] #s-hero .heroHeadline {
    font-size: clamp(2.55rem, 13cqw, 3.7rem);
  }
}

/* Product information supplied by Hiba Naturals must remain fully visible. */
.previewFrame[data-business-type="shop"] .storeProductBody > p {
  display: block;
  min-height: 0;
  overflow: visible;
  -webkit-line-clamp: unset;
  white-space: pre-line;
  font-size: 0.9rem;
  line-height: 1.62;
}

@container site (max-width: 780px) {
  .previewFrame[data-business-type="shop"] .storeProductGrid {
    grid-template-columns: 1fr;
  }
}

/* Premium product-card layout: generous space for the complete catalog copy. */
.previewFrame[data-business-type="shop"] #s-offerings .storeProductGrid {
  grid-template-columns: 1fr;
  gap: clamp(26px, 4cqw, 42px);
  max-width: 1120px;
  margin-inline: auto;
}

.previewFrame[data-business-type="shop"] #s-offerings .storeProductCard {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
  overflow: hidden;
  border: 1px solid rgba(28, 53, 36, 0.14);
  background: #fffdf8;
  box-shadow: 0 34px 80px -58px rgba(28, 53, 36, 0.85);
}

.previewFrame[data-business-type="shop"] #s-offerings .storeProductImage {
  width: 100%;
  min-height: 590px;
  height: 100%;
  aspect-ratio: auto;
}

.previewFrame[data-business-type="shop"] #s-offerings .storeProductBody {
  padding: clamp(28px, 4cqw, 52px);
}

.previewFrame[data-business-type="shop"] #s-offerings .storeProductTop {
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(28, 53, 36, 0.12);
}

.previewFrame[data-business-type="shop"] #s-offerings .storeProductTop h3 {
  max-width: 18ch;
  font-size: clamp(1.55rem, 2.6cqw, 2.15rem);
  line-height: 1.08;
}

.previewFrame[data-business-type="shop"] #s-offerings .storeProductPrice {
  min-height: 38px;
  padding: 8px 12px;
  background: #efe5cc;
  color: #173c2f;
  font-size: 0.92rem;
}

.previewFrame[data-business-type="shop"] #s-offerings .storeProductPrice::before {
  content: "100 ml · ";
}

.previewFrame[data-business-type="shop"] #s-offerings .storeProductBody > p {
  margin-top: 22px;
  padding: 20px 22px;
  border-left: 3px solid #c79e57;
  background: #f5f0e5;
  color: #30483d;
  font-size: 0.98rem;
  line-height: 1.68;
}

.previewFrame[data-business-type="shop"] #s-offerings .storeProductBody > p::first-line {
  color: #173c2f;
  font-weight: 800;
}

.previewFrame[data-business-type="shop"] #s-offerings .storeProductOptions,
.previewFrame[data-business-type="shop"] #s-offerings .storeAddButton {
  width: min(100%, 430px);
}

@container site (max-width: 760px) {
  .previewFrame[data-business-type="shop"] #s-offerings .storeProductCard {
    grid-template-columns: 1fr;
  }

  .previewFrame[data-business-type="shop"] #s-offerings .storeProductImage {
    min-height: 0;
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .previewFrame[data-business-type="shop"] #s-offerings .storeProductBody {
    padding: 24px 20px 26px;
  }

  .previewFrame[data-business-type="shop"] #s-offerings .storeProductTop {
    display: grid;
    gap: 12px;
  }

  .previewFrame[data-business-type="shop"] #s-offerings .storeProductBody > p {
    padding: 18px;
    font-size: 0.94rem;
  }
}

/* Brighter botanical colour system across every page. */
.previewFrame[data-theme-layout="editorial"] {
  --bg: #f6f4bf;
  --bg-raised: #fffdf4;
  --bg-sunken: #dcefc7;
  --gen-tint: #f7dfbf;
  background: #f6f4bf;
}

.previewFrame[data-theme-layout="editorial"] .genHeader {
  background: rgba(255, 253, 244, 0.96);
}

.previewFrame[data-theme-layout="editorial"] .genNav {
  gap: clamp(9px, 1.2cqw, 18px);
}

.previewFrame[data-theme-layout="editorial"] .genNavLink {
  font-size: clamp(0.7rem, 0.84cqw, 0.86rem);
}

.previewFrame[data-theme-layout="editorial"] #s-hero,
.previewFrame[data-theme-layout="editorial"] #s-gallery,
.previewFrame[data-theme-layout="editorial"] #s-galleryStrip {
  background: #f9e2bd;
}

.previewFrame[data-theme-layout="editorial"] #s-offerings,
.previewFrame[data-theme-layout="editorial"] #s-contact {
  background: #edf2b7;
}

.previewFrame[data-theme-layout="editorial"] #s-about,
.previewFrame[data-theme-layout="editorial"] #s-aboutTeaser,
.previewFrame[data-theme-layout="editorial"] #s-faq {
  background: #dcefc7;
}

.previewFrame[data-theme-layout="editorial"] .howItWorks {
  background: #f4d5c6;
}

.previewFrame[data-theme-layout="editorial"] .quickFacts {
  border-top: 1px solid rgba(23, 60, 47, 0.13);
  background: linear-gradient(90deg, #f8d8bd, #eef1b5 52%, #d8edca);
}

/* From the Journal */
.previewFrame[data-theme-layout="editorial"] #s-journal {
  background:
    radial-gradient(circle at 8% 8%, rgba(198, 154, 75, 0.24), transparent 25%),
    #f7dfbf;
}

.previewFrame[data-theme-layout="editorial"] .journalSection,
.previewFrame[data-theme-layout="editorial"] .voicesSection {
  min-height: 68vh;
}

.previewFrame[data-theme-layout="editorial"] .journalGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4cqw, 32px);
}

.previewFrame[data-theme-layout="editorial"] .journalCard {
  overflow: hidden;
  border: 1px solid rgba(23, 60, 47, 0.14);
  border-radius: 22px 22px 22px 5px;
  background: #fffdf4;
  box-shadow: 0 30px 72px -52px rgba(23, 60, 47, 0.85);
}

.previewFrame[data-theme-layout="editorial"] .journalImage {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.previewFrame[data-theme-layout="editorial"] .journalCardBody {
  padding: 25px 24px 29px;
}

.previewFrame[data-theme-layout="editorial"] .journalNumber {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 50%;
  background: #c69a4b;
  color: #173c2f;
  font-size: 0.75rem;
  font-weight: 800;
}

.previewFrame[data-theme-layout="editorial"] .journalCard h3 {
  color: #173c2f;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.35rem, 2cqw, 1.8rem);
  line-height: 1.12;
}

.previewFrame[data-theme-layout="editorial"] .journalCard p {
  margin-top: 14px;
  color: #4b5c52;
  line-height: 1.7;
}

/* Voices of Hiba — verified feedback only, with a welcoming submission CTA. */
.previewFrame[data-theme-layout="editorial"] #s-voices {
  background:
    radial-gradient(circle at 90% 8%, rgba(127, 140, 89, 0.2), transparent 30%),
    #d9edc9;
}

.previewFrame[data-theme-layout="editorial"] .voicesInvitation {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 5cqw, 66px);
  align-items: start;
  padding: clamp(28px, 4cqw, 52px);
  border: 1px solid rgba(23, 60, 47, 0.14);
  border-radius: 26px 26px 26px 6px;
  background: #fff9ea;
  box-shadow: 0 32px 80px -58px rgba(23, 60, 47, 0.85);
}

.previewFrame[data-theme-layout="editorial"] .voicesInvitationIntro > span {
  display: block;
  color: #c69a4b;
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 0.6;
}

.previewFrame[data-theme-layout="editorial"] .voicesInvitationIntro h3 {
  margin-top: 34px;
  color: #173c2f;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.4rem, 2.5cqw, 2rem);
}

.previewFrame[data-theme-layout="editorial"] .voicesInvitationIntro p {
  margin-top: 8px;
  color: #59675f;
  line-height: 1.65;
}

.previewFrame[data-theme-layout="editorial"] .reviewForm {
  display: grid;
  gap: 17px;
  min-width: 0;
  padding: clamp(22px, 3cqw, 34px);
  border: 1px solid rgba(23, 60, 47, 0.12);
  border-radius: 20px 20px 20px 5px;
  background: #f2f4c8;
}

.previewFrame[data-theme-layout="editorial"] .reviewRating {
  margin: 0;
  padding: 0;
  border: 0;
}

.previewFrame[data-theme-layout="editorial"] .reviewRating legend,
.previewFrame[data-theme-layout="editorial"] .reviewForm .contactField > span {
  margin-bottom: 8px;
  color: #3d5146;
  font-size: 0.82rem;
  font-weight: 800;
}

.previewFrame[data-theme-layout="editorial"] .starRating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 5px;
}

.previewFrame[data-theme-layout="editorial"] .starRating input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.previewFrame[data-theme-layout="editorial"] .starRating label {
  color: #c9c8aa;
  font-size: clamp(2rem, 3.4cqw, 2.55rem);
  line-height: 1;
  cursor: pointer;
  transition: color 0.16s ease, transform 0.16s ease;
}

.previewFrame[data-theme-layout="editorial"] .starRating label:hover,
.previewFrame[data-theme-layout="editorial"] .starRating label:hover ~ label,
.previewFrame[data-theme-layout="editorial"] .starRating input:checked ~ label {
  color: #c18d35;
}

.previewFrame[data-theme-layout="editorial"] .starRating input:focus-visible + label {
  outline: 2px solid #173c2f;
  outline-offset: 3px;
}

.previewFrame[data-theme-layout="editorial"] .reviewForm .contactField input,
.previewFrame[data-theme-layout="editorial"] .reviewForm .contactField textarea {
  border: 1px solid rgba(23, 60, 47, 0.2);
  background: #fffdf4;
  color: #173c2f;
}

.previewFrame[data-theme-layout="editorial"] .reviewForm .contactField input:focus,
.previewFrame[data-theme-layout="editorial"] .reviewForm .contactField textarea:focus {
  border-color: #9b742e;
  outline: 3px solid rgba(198, 154, 75, 0.18);
}

.previewFrame[data-theme-layout="editorial"] .reviewForm .contactSend {
  justify-self: stretch;
  background: #173c2f;
  color: #fffaf0;
}

.previewFrame[data-theme-layout="editorial"] .reviewPrivacy,
.previewFrame[data-theme-layout="editorial"] .reviewForm .contactFormNote {
  margin: 0;
  color: #5b6961;
  font-size: 0.78rem;
  line-height: 1.55;
}

.previewFrame[data-theme-layout="editorial"] .reviewForm .contactFormNote {
  min-height: 1.3em;
  color: #173c2f;
  font-weight: 700;
}

/* Social profiles in the footer. */
.previewFrame[data-theme-layout="editorial"] .genFooterTop {
  grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(150px, 0.7fr));
}

.previewFrame[data-theme-layout="editorial"] .socialLink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.previewFrame[data-theme-layout="editorial"] .socialLink span {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(255, 250, 240, 0.22);
  border-radius: 50%;
  color: #e0ba75;
  font-size: 0.72rem;
  font-weight: 900;
}

.previewFrame[data-theme-layout="editorial"] .genFooterName,
.previewFrame[data-theme-layout="editorial"] .genFooterColTitle {
  color: #fff1cf;
}

.previewFrame[data-theme-layout="editorial"] .genFooterBlurb,
.previewFrame[data-theme-layout="editorial"] .genFooterLink,
.previewFrame[data-theme-layout="editorial"] .genFooterItem,
.previewFrame[data-theme-layout="editorial"] .genFooterBottom {
  color: #d9e8dc;
}

.previewFrame[data-theme-layout="editorial"] .genFooterLink:hover {
  color: #f1c875;
}

@container site (max-width: 760px) {
  .previewFrame[data-theme-layout="editorial"] .journalGrid {
    grid-template-columns: 1fr;
  }

  .previewFrame[data-theme-layout="editorial"] .voicesInvitation {
    grid-template-columns: 1fr;
  }

  .previewFrame[data-theme-layout="editorial"] .voicesInvitationIntro > span {
    font-size: 4rem;
  }
}