/* 2026-05-28 (Phase H) — responsive visibility classes emitted by renderBlocks.
   Each class hides the wrapped block at a specific breakpoint. Breakpoints
   match the rest of the storefront (≤720 mobile, 721–1024 tablet, ≥1025 desktop).
   The wrapper div is a no-op when none of these classes are present. */
@media (max-width: 720px) {
  .vo-hide-mobile { display: none !important; }
}
@media (min-width: 721px) and (max-width: 1024px) {
  .vo-hide-tablet { display: none !important; }
}
@media (min-width: 1025px) {
  .vo-hide-desktop { display: none !important; }
}

.vo-builder-page {
  /* Widened from 880px so the AI-composed home page sections (stats row,
     features grid, cta-band) have room to lay out 3 columns side-by-side
     instead of stacking on desktop viewports. Sections that want a narrower
     line length (text / faq) set their own max-width internally. */
  max-width: var(--vo-page-max, 1120px);
  margin: 0 auto;
  padding: 32px 24px 64px;
  /* Three-color palette: the surface-tint is a ~6% wash of primary over the
     page bg. Used by data-vo-tint sections below to create alternating
     visual rhythm. Resolves at CSS time so we don't need a third color
     persisted in the tenant row. The transparent arg flattens against
     whatever the parent bg actually is — works on both light + dark themes. */
  --vo-surface-tint: color-mix(in srgb, var(--brand-primary, #0b1c30) 6%, transparent);
  /* Slightly stronger tint variant for the testimonial / cta-band — anything
     that benefits from a more pronounced colour bath. */
  --vo-surface-tint-strong: color-mix(in srgb, var(--brand-primary, #0b1c30) 10%, transparent);
}
.vo-builder-blocks {
  /* 2026-05-28 (Phase J) — switched from column-stack to flex-wrap row.
     Each block now sits in a .vo-block-slot whose flex-basis is driven
     by the merchant-chosen width. Full-width slots own their row;
     narrower slots pack left-to-right until the row fills, then wrap.
     The gap applies both axes so wrapped rows have vertical breathing
     room without per-block margins. */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}
.vo-block-slot {
  /* Defaults: full-row, top-aligned. */
  flex: 0 0 100%;
  min-width: 0; /* prevent flex children from overflowing inside narrow slots */
  display: flex;
  flex-direction: column;
}
/* Width modifiers — flex-basis math accounts for the 8px row gap so
   2× 50% slots actually fit on the same row (50% - 4px each, leaving
   exactly 8px of gap between them). */
.vo-block-slot-full           { flex-basis: 100%; }
.vo-block-slot-three-quarters { flex-basis: calc(75% - 2px); }
.vo-block-slot-two-thirds     { flex-basis: calc(66.6667% - 2.66px); }
.vo-block-slot-half           { flex-basis: calc(50% - 4px); }
.vo-block-slot-third          { flex-basis: calc(33.3333% - 5.33px); }
.vo-block-slot-quarter        { flex-basis: calc(25% - 6px); }
/* When a slot is narrower than the row it sits on, align-self shifts
   the SLOT inside its flex track. Combined with the column-flex inside
   the slot, this gives merchants left / center / right placement. */
.vo-block-slot-self-center { margin-left: auto; margin-right: auto; }
.vo-block-slot-self-end    { margin-left: auto; }
/* Mobile collapse — at narrow viewports every slot becomes full-width
   so the layout stacks predictably. Two slots side-by-side at 50% on
   desktop simply stack at ≤720px. */
@media (max-width: 720px) {
  .vo-block-slot,
  .vo-block-slot-full,
  .vo-block-slot-three-quarters,
  .vo-block-slot-two-thirds,
  .vo-block-slot-half,
  .vo-block-slot-third,
  .vo-block-slot-quarter {
    flex-basis: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ============================================================
   Surface tint — alternating-section visual rhythm.

   When a block carries data-vo-tint="soft" or "strong", it renders a
   full-bleed brand-tint background that breaks out of the .vo-builder-page
   max-width using the negative-margin / 100vw trick. Inside content stays
   constrained — only the background extends edge-to-edge.
   ============================================================ */
.vo-block[data-vo-tint] {
  position: relative;
  /* Vertical padding instead of margin so the tint reaches the section's
     top + bottom edges cleanly. */
  padding-top: 56px;
  padding-bottom: 56px;
  margin-top: 0;
  margin-bottom: 0;
}
.vo-block[data-vo-tint]::before {
  content: "";
  position: absolute;
  /* Break out of the constrained parent. left: 50% + transform: translateX(-50%)
     centres the full-bleed band, and width: 100vw makes it stretch viewport-wide
     regardless of the page max-width or padding. inset: 0 on the cross axis
     locks it to the section's own top + bottom. */
  top: 0; bottom: 0; left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: var(--vo-surface-tint);
  /* Subtle hairline borders so the band edge reads as intentional rather than
     "I forgot to set a background on the page." Hidden when adjacent bands
     would create a double line. */
  border-top: 1px solid color-mix(in srgb, var(--brand-primary, #0b1c30) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-primary, #0b1c30) 8%, transparent);
}
.vo-block[data-vo-tint="strong"]::before {
  background: var(--vo-surface-tint-strong);
}
.dark-mode .vo-block[data-vo-tint]::before {
  background: rgba(255, 255, 255, 0.025);
  border-top-color: rgba(255, 255, 255, 0.06);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.dark-mode .vo-block[data-vo-tint="strong"]::before {
  background: rgba(255, 255, 255, 0.045);
}

/* ============================================================
   Scroll-reveal animations.

   Every .vo-block (or .vo-builder-page child marked data-vo-reveal) starts
   at opacity 0 + 16px down and animates in when an IntersectionObserver
   (see index.astro inline script) adds the .is-revealed class. Respects
   prefers-reduced-motion: users who opt out see the final state immediately.

   We deliberately keep the transform delta small (16px, not 60px) and the
   duration short (520ms) so the page feels "alive" rather than presentation-
   software-y. The cubic-bezier easing favours the end of the curve so
   sections land softly instead of overshooting.
   ============================================================ */
.vo-block[data-vo-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.vo-block[data-vo-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* The hero is always above the fold — revealing it would mean it flashes in
   on first paint. Skip it entirely. */
.vo-block-hero[data-vo-reveal] {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .vo-block[data-vo-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.vo-builder-empty {
  text-align: center;
  padding: 80px 24px;
  color: var(--muted, #6b7280);
}
.vo-builder-empty p { margin: 0; }
.vo-builder-empty-helper {
  margin-top: 8px !important;
  font-size: 13px;
  color: var(--subtle, #9ca3af);
}
.vo-block {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
}
.vo-block-heading {
  font-family: "Hanken Grotesk", Inter, sans-serif;
  color: var(--ink, #0b1c30);
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 24px 0 8px;
  font-weight: 700;
}
.vo-block-h1 { font-size: clamp(36px, 5vw, 56px); }
.vo-block-h2 { font-size: clamp(28px, 3.5vw, 36px); }
.vo-block-h3 { font-size: clamp(20px, 2vw, 24px); }
.vo-block-text {
  color: var(--muted, #45464d);
  font-size: 16px;
  line-height: 1.65;
  margin: 8px 0;
  max-width: 680px;
}
.vo-block-text[style*="center"] { margin-left: auto; margin-right: auto; }
.vo-block-button { padding: 12px 0; }
.vo-block-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}
.vo-block-btn:hover { transform: translateY(-1px); }
.vo-block-btn-primary {
  background: var(--brand-primary, #0b1c30);
  color: var(--brand-button-text, #ffffff);
}
.vo-block-btn-outline {
  background: transparent;
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  border: 1.5px solid var(--vo-brand-text, var(--brand-primary, #0b1c30));
}
.vo-block-btn-ghost {
  background: transparent;
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  text-decoration: underline;
}
.vo-block-image { margin: 16px 0; }
.vo-block-image-img,
.vo-block-image-placeholder {
  width: 100%;
  aspect-ratio: var(--vo-block-aspect, 16 / 9);
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.vo-block-image-placeholder {
  background: repeating-linear-gradient(45deg, #f3f4f6 0 12px, #e5e7eb 12px 24px);
  display: grid;
  place-items: center;
  color: #9ca3af;
  font-size: 13px;
  font-weight: 600;
}
.vo-block-image-caption {
  margin-top: 8px;
  color: var(--muted, #6b7280);
  font-size: 13px;
  text-align: center;
  font-style: italic;
}
.vo-block-divider {
  margin: 20px 0;
  border: none;
  border-top: 1px solid var(--border, #e5e7eb);
}
.vo-block-divider-dashed { border-top-style: dashed; }
.vo-block-divider-dots { border-top-style: dotted; border-top-width: 2px; }
.vo-block-pillrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
}
.vo-block-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.04);
  color: var(--muted, #475569);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid rgba(15, 23, 42, 0.08);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
a.vo-block-pill:hover {
  background: var(--brand-primary, #0b1c30);
  color: var(--brand-button-text, #ffffff);
  border-color: var(--brand-primary, #0b1c30);
  transform: translateY(-1px);
}
.vo-block-service-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
  padding: 28px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-primary, #0b1c30), color-mix(in srgb, var(--brand-primary, #0b1c30) 85%, #000));
  color: var(--brand-button-text, #ffffff);
}
.vo-block-service-banner-main { flex: 1; min-width: 0; }
.vo-block-service-banner-tag {
  display: inline-block;
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.vo-block-service-banner-title {
  font-family: "Hanken Grotesk", Inter, sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 26px);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.vo-block-service-banner-sub {
  font-size: 14px;
  margin-top: 6px;
  opacity: 0.85;
  line-height: 1.5;
  max-width: 520px;
}
.vo-block-service-banner-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}
.vo-block-service-banner-price {
  font-family: "Hanken Grotesk", Inter, sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.02em;
}
.vo-block-service-banner-cta {
  padding: 10px 20px;
  border-radius: 10px;
  background: var(--brand-button-text, #ffffff);
  color: var(--brand-primary, #0b1c30);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s ease;
}
.vo-block-service-banner-cta:hover { transform: translateY(-1px); }
@media (max-width: 720px) {
  .vo-block-service-banner { flex-direction: column; align-items: stretch; }
  .vo-block-service-banner-side { align-items: stretch; }
  .vo-block-service-banner-cta { justify-content: center; }
}
.vo-block-service-grid {
  display: grid;
  grid-template-columns: repeat(var(--vo-service-cols, 2), minmax(0, 1fr));
  gap: 14px;
  padding: 10px 0;
}
@media (max-width: 720px) {
  .vo-block-service-grid { grid-template-columns: 1fr; }
}
.vo-block-service-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.vo-block-service-card-badge {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-primary, #0b1c30) 15%, transparent);
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  font-family: "Hanken Grotesk", Inter, sans-serif;
  font-weight: 700;
  font-size: 18px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}
.vo-block-service-card-body { flex: 1; min-width: 0; }
.vo-block-service-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.vo-block-service-card-name {
  font-family: "Hanken Grotesk", Inter, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink, #0b1c30);
}
.vo-block-service-card-price {
  font-family: "Hanken Grotesk", Inter, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink, #0b1c30);
  white-space: nowrap;
}
.vo-block-service-card-desc {
  color: var(--muted, #6b7280);
  font-size: 13px;
  margin-top: 4px;
  line-height: 1.5;
}
.vo-block-service-card-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted, #6b7280);
}
.vo-block-service-card-tag {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--brand-primary, #0b1c30) 12%, transparent);
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ============ hero block ============ */
.vo-block-hero {
  position: relative;
  display: flex;
  margin: 24px 0;
  border-radius: var(--brand-radius, 14px);
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary, #0b1c30) 15%, transparent), color-mix(in srgb, var(--brand-primary, #0b1c30) 5%, transparent));
  color: var(--ink, #0b1c30);
  isolation: isolate;
}
/* 2026-05-28 — full-bleed hero on the live storefront. Uses the
   "negative-margin / 100vw" trick to break out of .vo-builder-page's
   max-width so heroes never look pinched on wide screens. Scoped to
   .vo-builder-page so the builder preview (which renders inside a
   fixed-width device frame) doesn't accidentally explode. Only applies
   when the hero sits in a full-width slot (Phase J); narrower slot
   widths keep the hero inside its column. */
.vo-builder-page .vo-block-slot-full > .vo-block-hero {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
}
/* Inside the bled hero, restore a centered content column so text
   never stretches across an ultrawide viewport. Variant-specific
   inner styles take precedence (each variant sets its own inner
   max-width) — this is the global floor. */
.vo-builder-page .vo-block-slot-full > .vo-block-hero > .vo-block-hero-inner {
  max-width: min(var(--vo-frame-max, 1120px), calc(100% - 4rem));
  margin-left: auto;
  margin-right: auto;
}
.vo-block-hero.has-image {
  background-image: var(--vo-hero-image);
  background-size: cover;
  background-position: center;
  color: #ffffff;
}
.vo-block-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--vo-hero-overlay, 0.4));
  z-index: 0;
}
.vo-block-hero-h-sm { min-height: 220px; }
.vo-block-hero-h-md { min-height: 360px; }
.vo-block-hero-h-lg { min-height: 520px; }
.vo-block-hero-align-left   { justify-content: flex-start; }
.vo-block-hero-align-center { justify-content: center;    }
.vo-block-hero-align-right  { justify-content: flex-end;  }
.vo-block-hero-inner {
  position: relative;
  z-index: 1;
  align-self: center;
  max-width: 680px;
  padding: 48px clamp(20px, 4vw, 56px);
}
.vo-block-hero-align-center .vo-block-hero-inner { text-align: center; }
.vo-block-hero-align-right  .vo-block-hero-inner { text-align: right;  }
.vo-block-hero-title {
  margin: 0;
  font-family: "Hanken Grotesk", Inter, sans-serif;
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: inherit;
}
.vo-block-hero-sub {
  margin: 14px 0 0;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
  opacity: 0.92;
  max-width: 520px;
}
.vo-block-hero-align-center .vo-block-hero-sub { margin-left: auto; margin-right: auto; }
.vo-block-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 13px 26px;
  border-radius: var(--brand-radius, 10px);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vo-block-hero-cta:hover { transform: translateY(-1px); }
.vo-block-hero-cta-primary {
  background: var(--brand-primary, #0b1c30);
  color: var(--brand-button-text, #ffffff);
}
.vo-block-hero.has-image .vo-block-hero-cta-primary {
  background: #ffffff;
  color: #0b1c30;
}
.vo-block-hero-cta-outline {
  background: transparent;
  color: inherit;
  border: 1.5px solid currentColor;
}
.vo-block-hero-cta-ghost {
  background: transparent;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ============================================================
   Hero variants — see ai-builder/design-tokens.ts.
   Each variant layers atop the base .vo-block-hero rules and
   overrides layout, type scale, ornaments, and ratio decisions
   so two AI-generated storefronts never look the same.

   Naming: .vo-block-hero-variant-<id> per the design-tokens
   HeroVariant.id values. Add a new variant by adding it there
   and a CSS block here; the renderer picks them up via the
   KNOWN_HERO_VARIANTS allow-list.
   ============================================================ */
.vo-block-hero-eyebrow {
  font-family: var(--vo-cat-heading-font, "Space Mono", monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  margin-bottom: 14px;
  display: inline-block;
}
.vo-block-hero-stamp {
  position: absolute;
  pointer-events: none;
  font-family: "Fraunces", "Times New Roman", Georgia, serif;
  font-size: clamp(160px, 22vw, 320px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  opacity: 0.06;
  user-select: none;
}

/* ---- centered-minimal: safe default. Tight, lots of whitespace. ---- */
.vo-block-hero-variant-centered-minimal {
  text-align: center;
}
.vo-block-hero-variant-centered-minimal .vo-block-hero-title {
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 14ch;
  margin-left: auto;
  margin-right: auto;
}
.vo-block-hero-variant-centered-minimal .vo-block-hero-sub {
  max-width: 52ch;
  margin: 16px auto 0;
}

/* The default homepage starts with an intentional, image-free editorial hero.
   Merchant photography can be added later without changing the composition. */
.vo-block-hero-variant-signature-center {
  justify-content: center;
  text-align: center;
}
.vo-block-hero-variant-signature-center:not(.has-image) {
  background: color-mix(in srgb, var(--brand-primary, #263b2a) 3%, var(--brand-bg, #fff));
}
.dark-mode .vo-block-hero-variant-signature-center:not(.has-image) {
  background: radial-gradient(90% 85% at 50% 0%, color-mix(in srgb, var(--brand-primary, #a5b4fc) 12%, transparent), transparent 80%), var(--brand-bg, #0c1221);
  color: var(--ink, #f3f4f6);
}
.vo-block-hero-variant-signature-center .vo-block-hero-inner {
  width: 100%;
  max-width: 880px;
  padding: clamp(64px, 9vw, 112px) clamp(24px, 5vw, 64px);
}
.vo-block-hero-variant-signature-center .vo-block-hero-title {
  max-width: 16ch;
  margin: 0 auto;
  font-family: "Fraunces", "DM Serif Display", Georgia, serif;
  font-size: clamp(48px, 6.8vw, 84px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.045em;
}
.vo-block-hero-variant-signature-center .vo-block-hero-sub {
  max-width: 48ch;
  margin: 22px auto 0;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.6;
  opacity: .82;
}
.vo-block-hero-variant-signature-center .vo-block-hero-cta {
  margin-top: 32px;
  padding: 14px 28px;
  border-radius: 4px;
}
@media (max-width: 720px) {
  .vo-block-hero-variant-signature-center .vo-block-hero-inner { padding: 72px 24px; }
  .vo-block-hero-variant-signature-center .vo-block-hero-title { font-size: clamp(42px, 12vw, 58px); }
}

/* ---- bold-block: oversized all-caps on a brand-color block. ---- */
.vo-block-hero-variant-bold-block {
  background: var(--brand-primary, #0b1c30);
  color: var(--brand-button-text, #ffffff);
  box-sizing: border-box;
  border-radius: 20px;
  padding: clamp(40px, 7vw, 96px);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.vo-block-hero-variant-bold-block .vo-block-hero-eyebrow {
  color: var(--brand-button-text, #ffffff);
  opacity: 0.7;
}
.vo-block-hero-variant-bold-block .vo-block-hero-title {
  text-transform: uppercase;
  font-weight: 800;
  font-size: clamp(48px, 9vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  max-width: 14ch;
}
.vo-block-hero-variant-bold-block .vo-block-hero-sub {
  max-width: 44ch;
  opacity: 0.9;
}
.vo-block-hero-variant-bold-block .vo-block-hero-cta-primary {
  background: var(--brand-button-text, #ffffff);
  color: var(--brand-primary, #0b1c30);
}

/* ---- editorial-split: 2-column with giant initial stamp on the right. ---- */
.vo-block-hero-variant-editorial-split {
  position: relative;
  text-align: left;
  padding: clamp(32px, 5vw, 64px) 0;
  border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
.vo-block-hero-variant-editorial-split:not(.has-image) {
  background: color-mix(in srgb, var(--brand-primary, #263b2a) 3%, var(--brand-bg, #fff));
}
.dark-mode .vo-block-hero-variant-editorial-split:not(.has-image) {
  background: color-mix(in srgb, var(--brand-primary, #a5b4fc) 7%, var(--brand-bg, #0c1221));
  color: var(--ink, #f3f4f6);
}
.vo-block-hero-variant-editorial-split .vo-block-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 64%;
}
.vo-block-hero-variant-editorial-split .vo-block-hero-title {
  font-family: "Fraunces", "DM Serif Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(40px, 6.5vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 14ch;
}
.vo-block-hero-variant-editorial-split .vo-block-hero-stamp {
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
}
@media (max-width: 720px) {
  .vo-block-hero-variant-editorial-split .vo-block-hero-inner { max-width: 100%; }
  .vo-block-hero-variant-editorial-split .vo-block-hero-stamp { display: none; }
}

/* ---- luxe-dark: serif on near-black gradient, eyebrow above. ---- */
.vo-block-hero-variant-luxe-dark {
  background:
    radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--brand-primary, #0b1c30) 24%, transparent), transparent 70%),
    linear-gradient(180deg, #0a0a0a 0%, #1c1c1f 100%);
  color: #f5f3ee;
  border-radius: 20px;
  padding: clamp(56px, 9vw, 128px) clamp(32px, 5vw, 64px);
  text-align: center;
}
.vo-block-hero-variant-luxe-dark .vo-block-hero-eyebrow {
  color: color-mix(in srgb, var(--brand-primary, #c8a96a) 70%, white);
}
.vo-block-hero-variant-luxe-dark .vo-block-hero-title {
  font-family: "Fraunces", "DM Serif Display", "Times New Roman", serif;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 600;
  max-width: 16ch;
  margin: 0 auto;
}
.vo-block-hero-variant-luxe-dark .vo-block-hero-sub {
  font-style: italic;
  max-width: 48ch;
  margin: 18px auto 0;
  opacity: 0.85;
}
.vo-block-hero-variant-luxe-dark .vo-block-hero-cta-primary {
  background: transparent;
  color: #f5f3ee;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #c8a96a) 60%, white);
}

/* ---- gradient-mesh: SaaS-y, vibrant, modern. ---- */
.vo-block-hero-variant-gradient-mesh {
  position: relative;
  background:
    radial-gradient(60% 60% at 20% 30%, color-mix(in srgb, var(--brand-primary, #2563eb) 40%, transparent), transparent 70%),
    radial-gradient(50% 60% at 85% 70%, color-mix(in srgb, var(--brand-accent, #7c3aed) 45%, transparent), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 24px;
  padding: clamp(48px, 8vw, 112px);
  text-align: center;
  overflow: hidden;
}
.vo-block-hero-variant-gradient-mesh .vo-block-hero-eyebrow {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.vo-block-hero-variant-gradient-mesh .vo-block-hero-title {
  font-size: clamp(40px, 7vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 800;
  max-width: 18ch;
  margin: 0 auto;
}
.vo-block-hero-variant-gradient-mesh .vo-block-hero-sub {
  max-width: 56ch;
  margin: 16px auto 0;
}

/* ---- rustic-stamp: warm left-aligned with handmade stamp + serif. ---- */
.vo-block-hero-variant-rustic-stamp {
  position: relative;
  text-align: left;
  padding: clamp(28px, 4vw, 56px) 0;
}
.vo-block-hero-variant-rustic-stamp .vo-block-hero-eyebrow {
  font-family: "Fraunces", "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 14px;
}
.vo-block-hero-variant-rustic-stamp .vo-block-hero-title {
  font-family: "Fraunces", "Times New Roman", serif;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.08;
  font-weight: 600;
  max-width: 18ch;
}
.vo-block-hero-variant-rustic-stamp .vo-block-hero-sub {
  font-style: italic;
  max-width: 48ch;
}
.vo-block-hero-variant-rustic-stamp .vo-block-hero-stamp {
  top: -10%;
  left: -4%;
  font-family: "DM Serif Display", "Fraunces", serif;
  font-size: clamp(180px, 26vw, 360px);
  opacity: 0.04;
}

/* ---- type-as-art: outlined wordmark-style title fills the hero. ----

   The title uses -webkit-text-stroke to render letter outlines in the
   brand color, with the fill transparent. This produces a streetwear /
   fashion-magazine vibe where the headline itself is the visual element.
   Sub-copy + CTA are deliberately small and tucked underneath so the
   title carries the composition. Works on light + dark themes — on dark
   the stroke gets brighter so the wordmark stays readable.

   Mobile fallback: -webkit-text-stroke isn't great at very small sizes
   (letters get muddy below ~48px), so under 640px we revert to a normal
   filled-color title in the brand color. */
.vo-block-hero-variant-type-as-art {
  background:
    radial-gradient(80% 70% at 50% 30%, color-mix(in srgb, var(--brand-primary, #0b1c30) 5%, transparent), transparent 70%);
  padding: clamp(48px, 8vw, 120px) clamp(20px, 4vw, 48px);
  text-align: center;
  border-radius: 20px;
}
.vo-block-hero-variant-type-as-art .vo-block-hero-inner {
  max-width: 100%;
  padding: 0;
}
.vo-block-hero-variant-type-as-art .vo-block-hero-title {
  font-family: "Hanken Grotesk", Inter, sans-serif;
  font-size: clamp(64px, 14vw, 220px);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0;
  /* The outline effect. -webkit-text-stroke is the only cross-browser way
     to get crisp letter outlines without resorting to SVG. */
  color: transparent;
  -webkit-text-stroke: 2px var(--brand-primary, #0b1c30);
  text-stroke: 2px var(--brand-primary, #0b1c30);
  max-width: 14ch;
  margin-left: auto;
  margin-right: auto;
}
.vo-block-hero-variant-type-as-art .vo-block-hero-sub {
  margin-top: 28px;
  font-size: clamp(15px, 1.6vw, 18px);
  opacity: 0.78;
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}
.vo-block-hero-variant-type-as-art .vo-block-hero-cta {
  margin-top: 24px;
}
@media (max-width: 640px) {
  /* Outlines get muddy at small sizes — render as a solid filled title on
     phones so the headline still reads as the dominant element. */
  .vo-block-hero-variant-type-as-art .vo-block-hero-title {
    -webkit-text-stroke: 0;
    color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
    font-size: clamp(48px, 14vw, 96px);
  }
}
.dark-mode .vo-block-hero-variant-type-as-art .vo-block-hero-title {
  /* Bump stroke brightness so the wordmark doesn't disappear against the
     dark page background. Uses color-mix with white for a polished look
     rather than pure-white which would feel too harsh. */
  -webkit-text-stroke-color: color-mix(in srgb, var(--brand-primary, #0b1c30) 50%, #f1f5f9);
  text-stroke-color: color-mix(in srgb, var(--brand-primary, #0b1c30) 50%, #f1f5f9);
}
.dark-mode .vo-block-hero-variant-type-as-art .vo-block-hero-sub {
  color: rgba(241, 245, 249, 0.78);
}

/* ---- asymmetric-split: 40/60 split. Narrow side has content; wide side
   is a brand-color block with a giant initial stamp. ----

   This is the inverse of editorial-split (which is 64% content / 36%
   stamp on the right). asymmetric-split flips the proportions and
   inverts the colour: the wide side becomes a confident brand-coloured
   slab with a stamp anchor, the narrow side carries the actual copy.
   Reads as an agency portfolio / SaaS landing page composition.

   Mobile collapse: at <860px the two columns stack with the stamp slab
   on top so it still feels intentional rather than orphaned. */
.vo-block-hero-variant-asymmetric-split {
  display: grid;
  grid-template-columns: 40fr 60fr;
  gap: 0;
  align-items: stretch;
  border-radius: 20px;
  overflow: hidden;
  background: transparent;
  /* Wipe the base .vo-block-hero gradient so the split renders cleanly. */
  background-image: none;
  min-height: clamp(360px, 50vw, 600px);
}
.vo-block-hero-variant-asymmetric-split .vo-block-hero-inner {
  align-self: center;
  max-width: 100%;
  padding: clamp(32px, 4vw, 56px) clamp(28px, 3.5vw, 48px);
}
.vo-block-hero-variant-asymmetric-split .vo-block-hero-eyebrow {
  color: color-mix(in srgb, var(--brand-primary, #0b1c30) 70%, var(--ink, #0b1c30));
  font-size: 11px;
  letter-spacing: 0.18em;
}
.vo-block-hero-variant-asymmetric-split .vo-block-hero-title {
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 800;
  max-width: 18ch;
}
.vo-block-hero-variant-asymmetric-split .vo-block-hero-sub {
  font-size: clamp(15px, 1.5vw, 17px);
  max-width: 40ch;
  margin-top: 18px;
}
.vo-block-hero-variant-asymmetric-split .vo-block-hero-cta-primary {
  background: var(--brand-primary, #0b1c30);
  color: var(--brand-button-text, #ffffff);
}
.vo-block-hero-variant-asymmetric-split .vo-block-hero-stamp {
  /* Stamp slab: full-bleed brand-colour rectangle in the wider column,
     with a giant first letter that anchors the composition. */
  position: relative;
  grid-column: 2;
  grid-row: 1;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  background: var(--brand-primary, #0b1c30);
  color: var(--brand-button-text, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Hanken Grotesk", Inter, sans-serif;
  font-weight: 900;
  font-size: clamp(180px, 24vw, 340px);
  line-height: 1;
  opacity: 1;
  letter-spacing: -0.04em;
  overflow: hidden;
}
.vo-block-hero-variant-asymmetric-split .vo-block-hero-stamp::after {
  /* A subtle radial highlight so the slab doesn't read as a flat fill. */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 80% 20%, rgba(255, 255, 255, 0.16), transparent 70%);
  pointer-events: none;
}
@media (max-width: 860px) {
  .vo-block-hero-variant-asymmetric-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .vo-block-hero-variant-asymmetric-split .vo-block-hero-stamp {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(140px, 36vw, 240px);
    min-height: 220px;
  }
  .vo-block-hero-variant-asymmetric-split .vo-block-hero-inner {
    grid-row: 2;
  }
}

/* ============================================================
   2026-05-27 expansion — three new hero variants.
   Pushes the hero catalog from 8 → 11 so generated sites
   spread across more compositional territory (Apple, Aesop,
   Supreme-style first impressions).
   ============================================================ */

/* Oversized Wordmark — the title fills the hero like a logo. */
.vo-block-hero-variant-oversized-wordmark {
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(40px, 8vh, 96px) clamp(20px, 4vw, 60px);
  background: var(--brand-bg, #fafafa);
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  overflow: hidden;
}
.vo-block-hero-variant-oversized-wordmark .vo-block-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 100%;
}
.vo-block-hero-variant-oversized-wordmark .vo-block-hero-eyebrow {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  opacity: 0.5;
}
.vo-block-hero-variant-oversized-wordmark .vo-block-hero-title {
  font-family: var(--brand-heading-font, "Hanken Grotesk", Inter, sans-serif);
  font-weight: 900;
  font-size: clamp(60px, 18vw, 280px);
  line-height: 0.85;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  margin: 0;
  max-width: 100%;
  word-break: break-word;
}
.vo-block-hero-variant-oversized-wordmark .vo-block-hero-sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  opacity: 0.65;
  max-width: 38ch;
  margin: 0;
}
.vo-block-hero-variant-oversized-wordmark .vo-block-hero-cta-primary {
  margin-top: 16px;
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid var(--vo-brand-text, var(--brand-primary, #0b1c30));
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  background: transparent;
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.vo-block-hero-variant-oversized-wordmark .vo-block-hero-cta-primary:hover {
  background: var(--brand-primary, #0b1c30);
  color: var(--brand-button-text, #ffffff);
}
.dark-mode .vo-block-hero-variant-oversized-wordmark {
  background: #0a0a0b;
}
.dark-mode .vo-block-hero-variant-oversized-wordmark .vo-block-hero-title,
.dark-mode .vo-block-hero-variant-oversized-wordmark .vo-block-hero-eyebrow,
.dark-mode .vo-block-hero-variant-oversized-wordmark .vo-block-hero-sub {
  color: #f4f4f5;
}

/* Magazine Cover — heavy serif title, small-caps eyebrow,
   editorial composition. Image (when present) is a frame
   element rather than a background. */
.vo-block-hero-variant-magazine-cover {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: stretch;
  min-height: clamp(420px, 80vh, 720px);
  background: var(--brand-bg, #f5f1ea);
  color: var(--vo-brand-text, var(--brand-primary, #2a221c));
  overflow: hidden;
}
.vo-block-hero-variant-magazine-cover .vo-block-hero-inner {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(36px, 5vw, 80px);
  max-width: 100%;
}
.vo-block-hero-variant-magazine-cover .vo-block-hero-eyebrow {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--vo-brand-text, var(--brand-primary, #2a221c));
  opacity: 0.6;
  border-bottom: 1px solid currentColor;
  padding-bottom: 12px;
  margin-bottom: 4px;
}
.vo-block-hero-variant-magazine-cover .vo-block-hero-title {
  font-family: "DM Serif Display", "Fraunces", Georgia, serif;
  font-weight: 400;
  font-size: clamp(48px, 7vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--vo-brand-text, var(--brand-primary, #2a221c));
  margin: 0;
}
.vo-block-hero-variant-magazine-cover .vo-block-hero-sub {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--vo-brand-text, var(--brand-primary, #2a221c));
  opacity: 0.78;
  max-width: 44ch;
  margin: 0;
}
.vo-block-hero-variant-magazine-cover .vo-block-hero-cta-primary {
  align-self: flex-start;
  padding: 14px 30px;
  border-radius: 0;
  background: var(--brand-primary, #2a221c);
  color: var(--brand-button-text, #ffffff);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.vo-block-hero-variant-magazine-cover.has-image::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  background-image: var(--vo-hero-image);
  background-size: cover;
  background-position: center;
  filter: saturate(0.92) contrast(0.96);
}
.vo-block-hero-variant-magazine-cover:not(.has-image)::after {
  /* When no image, fill the right column with a brand-tinted texture so
     the editorial composition still reads. */
  content: "";
  grid-column: 2;
  grid-row: 1;
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0 2px, transparent 2px 14px),
    var(--brand-primary-light, rgba(0, 0, 0, 0.07));
}
.vo-block-hero-variant-magazine-cover .vo-block-hero-overlay { display: none; }
@media (max-width: 860px) {
  .vo-block-hero-variant-magazine-cover {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .vo-block-hero-variant-magazine-cover.has-image::after,
  .vo-block-hero-variant-magazine-cover:not(.has-image)::after {
    grid-column: 1;
    grid-row: 1;
    min-height: 280px;
  }
  .vo-block-hero-variant-magazine-cover .vo-block-hero-inner {
    grid-row: 2;
    padding: 32px 24px 48px;
  }
}

/* Marquee Strip — bold title + continuously-scrolling keyword strip. */
.vo-block-hero-variant-marquee-strip {
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(48px, 9vh, 110px) clamp(20px, 4vw, 60px) 0;
  background: var(--brand-primary, #0b1c30);
  color: var(--brand-button-text, #ffffff);
  overflow: hidden;
  position: relative;
}
.vo-block-hero-variant-marquee-strip .vo-block-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 100%;
  padding-bottom: clamp(36px, 6vh, 80px);
}
.vo-block-hero-variant-marquee-strip .vo-block-hero-eyebrow {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--brand-button-text, #ffffff);
  opacity: 0.6;
}
.vo-block-hero-variant-marquee-strip .vo-block-hero-title {
  font-family: var(--brand-heading-font, "Hanken Grotesk", Inter, sans-serif);
  font-weight: 800;
  font-size: clamp(48px, 9vw, 144px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--brand-button-text, #ffffff);
  margin: 0;
  max-width: 16ch;
}
.vo-block-hero-variant-marquee-strip .vo-block-hero-cta-primary {
  margin-top: 8px;
  padding: 14px 32px;
  border-radius: 999px;
  background: var(--brand-button-text, #ffffff);
  color: var(--brand-primary, #0b1c30);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 13px;
  text-transform: uppercase;
}
.vo-block-hero-variant-marquee-strip .vo-block-hero-marquee {
  width: 100%;
  margin-top: clamp(36px, 6vh, 64px);
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.vo-block-hero-variant-marquee-strip .vo-block-hero-marquee-track {
  display: flex;
  width: max-content;
  animation: vo-hero-marquee 28s linear infinite;
}
.vo-block-hero-variant-marquee-strip .vo-block-hero-marquee-row {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding-right: clamp(28px, 4vw, 56px);
  font-family: var(--brand-heading-font, "Hanken Grotesk", Inter, sans-serif);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 32px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-button-text, #ffffff);
  flex-shrink: 0;
}
.vo-block-hero-variant-marquee-strip .vo-block-hero-marquee-row > span[aria-hidden="true"] {
  opacity: 0.5;
  font-size: 0.7em;
}
@keyframes vo-hero-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .vo-block-hero-variant-marquee-strip .vo-block-hero-marquee-track {
    animation: none;
  }
}

/* ============================================================
   2026-05-27 expansion — three new home-section block types
   (manifesto, marquee-band, editorial-split). Each adds a
   distinct compositional moment to the generator's vocabulary.
   ============================================================ */

/* Manifesto — single bold sentence as a full-bleed pause. */
.vo-block-manifesto {
  padding: clamp(72px, 14vh, 160px) clamp(20px, 4vw, 80px);
  text-align: center;
  background: var(--brand-bg, #ffffff);
}
.vo-block-manifesto-inner {
  max-width: 24ch;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.vo-block-manifesto-statement {
  margin: 0;
  font-family: var(--brand-heading-font, "Hanken Grotesk", Inter, sans-serif);
  font-weight: 800;
  font-size: clamp(36px, 6.5vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
}
.vo-block-manifesto-attribution {
  margin: 0;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  opacity: 0.55;
}
.dark-mode .vo-block-manifesto { background: #0a0a0b; }
.dark-mode .vo-block-manifesto-statement,
.dark-mode .vo-block-manifesto-attribution { color: #f4f4f5; }

/* Marquee Band — full-bleed scrolling keyword strip. */
.vo-block-marquee-band {
  width: 100%;
  padding: 28px 0;
  background: var(--brand-primary, #0b1c30);
  color: var(--brand-button-text, #ffffff);
  overflow: hidden;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.vo-block-marquee-band .vo-block-marquee-track {
  display: flex;
  width: max-content;
  animation: vo-band-marquee 38s linear infinite;
}
.vo-block-marquee-band .vo-block-marquee-row {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding-right: clamp(28px, 4vw, 64px);
  flex-shrink: 0;
}
.vo-block-marquee-band .vo-block-marquee-word {
  font-family: var(--brand-heading-font, "Hanken Grotesk", Inter, sans-serif);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 40px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-button-text, #ffffff);
}
.vo-block-marquee-band .vo-block-marquee-sep {
  font-size: clamp(14px, 1.6vw, 22px);
  opacity: 0.55;
  color: var(--brand-button-text, #ffffff);
}
@keyframes vo-band-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .vo-block-marquee-band .vo-block-marquee-track {
    animation: none;
  }
}

/* Editorial Split — asymmetric 60/40 image + text. */
.vo-block-editorial-split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(48px, 8vh, 96px) clamp(20px, 4vw, 80px);
  align-items: center;
  background: var(--brand-bg, #ffffff);
}
.vo-block-editorial-split-right {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
.vo-block-editorial-image,
.vo-block-editorial-tile {
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: 14px;
  overflow: hidden;
}
.vo-block-editorial-image {
  background-image: var(--vo-editorial-image);
  background-size: cover;
  background-position: center;
}
.vo-block-editorial-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary, #0b1c30);
  color: var(--brand-button-text, #ffffff);
  font-family: var(--brand-heading-font, "Hanken Grotesk", Inter, sans-serif);
  font-weight: 900;
  font-size: clamp(160px, 18vw, 280px);
  line-height: 1;
  letter-spacing: -0.05em;
  position: relative;
}
.vo-block-editorial-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 80% 20%, rgba(255, 255, 255, 0.16), transparent 70%);
  pointer-events: none;
}
.vo-block-editorial-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 44ch;
}
.vo-block-editorial-heading {
  margin: 0;
  font-family: var(--brand-heading-font, "Hanken Grotesk", Inter, sans-serif);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
}
.vo-block-editorial-body {
  margin: 0;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  opacity: 0.78;
}
.vo-block-editorial-link {
  align-self: flex-start;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.dark-mode .vo-block-editorial-split { background: #0a0a0b; }
.dark-mode .vo-block-editorial-heading,
.dark-mode .vo-block-editorial-body,
.dark-mode .vo-block-editorial-link { color: #f4f4f5; }
@media (max-width: 860px) {
  .vo-block-editorial-split,
  .vo-block-editorial-split-right {
    grid-template-columns: 1fr;
  }
  .vo-block-editorial-split-right .vo-block-editorial-image,
  .vo-block-editorial-split-right .vo-block-editorial-tile { order: -1; }
}

/* ============================================================
   Composable home-section blocks. Each is a self-contained
   section that reads as "a real designer placed this here" —
   the variety comes from which 3–6 sections the AI picks and
   in what order. All sections inherit the tenant brand color
   via var(--brand-primary) so they feel cohesive.
   ============================================================ */

/* ============ stats row ============ */
.vo-block-stats {
  /* Tightened margin: 56px between every block produced an aircraft-hangar
     amount of whitespace on AI-composed home pages. 32px keeps sections
     distinct without making the page feel like a slideshow. */
  margin: 32px auto;
  /* Explicit width: 100% — without this, the section was getting content-
     width inside .vo-builder-blocks' flex column on some browsers, which
     squeezed the inner grid to its min-content (~250px) and forced the
     3 stat cells to stack vertically. max-width still caps at 1100px. */
  width: 100%;
  max-width: var(--vo-section-max, 1100px);
  padding: 0 24px;
  text-align: center;
  box-sizing: border-box;
}
.vo-block-stats-heading {
  font-family: var(--vo-cat-heading-font, "Hanken Grotesk", sans-serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  color: var(--ink, #0b1c30);
  margin: 0 0 32px;
  letter-spacing: -0.01em;
}
.vo-block-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  align-items: start;
}
.vo-block-stats-cell {
  padding: 24px 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--brand-primary, #0b1c30) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-primary, #0b1c30) 12%, transparent);
}
.vo-block-stats-value {
  font-family: var(--vo-cat-heading-font, "Hanken Grotesk", sans-serif);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
}
.vo-block-stats-label {
  font-family: "Space Mono", "Hanken Grotesk", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 70%, transparent);
  margin-top: 10px;
}

/* ============ testimonial ============ */
.vo-block-testimonial {
  position: relative;
  max-width: 820px;
  margin: 40px auto;
  padding: 48px 32px;
  text-align: center;
  background:
    radial-gradient(60% 80% at 50% 0%, color-mix(in srgb, var(--brand-primary, #0b1c30) 6%, transparent), transparent 70%),
    color-mix(in srgb, var(--brand-primary, #0b1c30) 2%, transparent);
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #0b1c30) 10%, transparent);
}
.vo-block-testimonial-mark {
  width: 36px;
  height: 36px;
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  opacity: 0.6;
  margin: 0 auto 16px;
  display: block;
}
.vo-block-testimonial-quote {
  font-family: var(--vo-cat-heading-font, "Hanken Grotesk", sans-serif);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink, #0b1c30);
  margin: 0 auto 24px;
  max-width: 36ch;
  font-style: italic;
}
.vo-block-testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.vo-block-testimonial-author-name {
  font-weight: 600;
  color: var(--ink, #0b1c30);
  font-size: 14px;
}
.vo-block-testimonial-author-role {
  font-size: 12px;
  color: color-mix(in srgb, currentColor 60%, transparent);
}
.vo-block-testimonial-author-role::before {
  content: "·";
  margin-right: 12px;
  opacity: 0.5;
}

/* ============ cta-band (closer) ============ */
.vo-block-cta-band {
  margin: 48px auto 24px;
  width: 100%;
  max-width: var(--vo-section-max, 1100px);
  padding: 0 24px;
  box-sizing: border-box;
}
.vo-block-cta-band-inner {
  background: linear-gradient(135deg,
    var(--brand-primary, #0b1c30) 0%,
    color-mix(in srgb, var(--brand-primary, #0b1c30) 80%, black) 100%);
  color: var(--brand-button-text, #ffffff);
  padding: clamp(40px, 6vw, 72px);
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 18px 56px color-mix(in srgb, var(--brand-primary, #0b1c30) 28%, transparent);
}
.vo-block-cta-band-title {
  font-family: var(--vo-cat-heading-font, "Hanken Grotesk", sans-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--brand-button-text, #ffffff);
  margin: 0 0 12px;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.vo-block-cta-band-sub {
  font-size: 16px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--brand-button-text, #ffffff) 80%, transparent);
  margin: 0 auto 28px;
  max-width: 48ch;
}
.vo-block-cta-band-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 12px;
  background: var(--brand-button-text, #ffffff);
  color: var(--brand-primary, #0b1c30) !important;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vo-block-cta-band-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* ============ features grid ============ */
.vo-block-features {
  margin: 48px auto;
  width: 100%;
  max-width: var(--vo-section-max, 1100px);
  padding: 28px 24px;
  text-align: center;
  box-sizing: border-box;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.vo-block-features-eyebrow,
.vo-block-story-eyebrow {
  display: block;
  margin: 0 0 12px;
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.vo-block-features-heading {
  font-family: var(--brand-heading-font, "Hanken Grotesk", sans-serif);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700;
  color: var(--ink, #0b1c30);
  margin: 0 0 12px;
  letter-spacing: -0.035em;
}
.vo-block-features-intro {
  max-width: 58ch;
  margin: 0 auto 34px;
  color: var(--muted, #6b7280);
  font-size: 16px;
  line-height: 1.65;
}
.vo-block-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 18px;
  text-align: left;
  align-items: stretch;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.vo-block-features-cell {
  min-width: 0;
  padding: 30px 28px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #0b1c30) 12%, transparent);
  background: color-mix(in srgb, var(--brand-primary, #0b1c30) 3%, var(--brand-bg, white));
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.vo-block-features-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px color-mix(in srgb, var(--brand-primary, #0b1c30) 8%, transparent);
}
.vo-block-features-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-primary, #0b1c30) 12%, transparent);
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  margin-bottom: 22px;
}
.vo-block-features-icon svg {
  width: 22px;
  height: 22px;
}
.vo-block-features-title {
  font-family: var(--brand-heading-font, "Hanken Grotesk", sans-serif);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink, #0b1c30);
  margin: 0 0 8px;
}
.vo-block-features-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted, #6b7280);
  margin: 0;
}
.vo-block-features-minimal .vo-block-features-cell {
  padding: 20px 8px 20px 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--brand-primary, #0b1c30) 20%, transparent);
  border-radius: 0;
  background: transparent;
}
.vo-block-features-minimal .vo-block-features-cell:hover { box-shadow: none; }
.vo-block-features-minimal .vo-block-features-icon { background: transparent; width: 32px; margin-bottom: 14px; }
@media (min-width: 721px) {
  .vo-builder-page[data-page-slug="home"] .vo-block-features-minimal .vo-block-features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Image gallery: photography when available, editorial art direction when it
   is not. Captions remain readable on both bright images and dark themes. */
.vo-block-image-gallery,
.vo-block-process-steps {
  width: 100%;
  max-width: var(--vo-section-max, 1100px);
  margin: 48px auto;
  padding: clamp(20px, 3vw, 36px) 24px;
  box-sizing: border-box;
  min-width: 0;
}
.vo-block-gallery-heading,
.vo-block-process-heading { margin-bottom: clamp(25px, 4vw, 46px); }
.vo-block-gallery-eyebrow,
.vo-block-process-eyebrow {
  margin: 0 0 12px;
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.vo-block-gallery-heading h2,
.vo-block-process-heading h2 {
  max-width: 22ch;
  margin: 0;
  color: var(--ink, #0b1c30);
  font: 700 clamp(30px, 4.5vw, 56px)/1.06 var(--brand-heading-font, "Hanken Grotesk", sans-serif);
  letter-spacing: -.045em;
}
.vo-block-gallery-intro,
.vo-block-process-heading > p:not(.vo-block-process-eyebrow) {
  max-width: 62ch;
  margin: 16px 0 0;
  color: var(--muted, #6b7280);
  font: 400 16px/1.7 var(--brand-body-font, Inter, sans-serif);
}
.vo-block-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.7vw, 20px);
  align-items: stretch;
}
.vo-block-gallery-item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  margin: 0;
  border-radius: 18px;
  background: color-mix(in srgb, var(--brand-primary, #0b1c30) 7%, var(--brand-bg, #fff));
  border: 1px solid color-mix(in srgb, var(--brand-primary, #0b1c30) 12%, transparent);
}
.vo-block-gallery-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.vo-block-gallery-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vo-block-gallery-item.has-image .vo-block-gallery-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  padding: 48px 24px 22px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
}
.vo-block-gallery-item.is-text-only .vo-block-gallery-media {
  background:
    radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--brand-primary, #0b1c30) 18%, transparent), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--brand-primary, #0b1c30) 9%, var(--brand-bg, #fff)), var(--brand-bg, #fff));
}
.vo-block-gallery-item.is-text-only .vo-block-gallery-media::after {
  content: "";
  position: absolute;
  width: 55%;
  aspect-ratio: 1;
  right: -12%;
  bottom: 13%;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #0b1c30) 18%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 38px color-mix(in srgb, var(--brand-primary, #0b1c30) 4%, transparent),
              0 0 0 76px color-mix(in srgb, var(--brand-primary, #0b1c30) 3%, transparent);
}
.vo-block-gallery-placeholder-index {
  position: absolute;
  z-index: 1;
  top: 22px;
  left: 24px;
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  font: 700 12px/1 var(--brand-body-font, Inter, sans-serif);
  letter-spacing: .14em;
}
.vo-block-gallery-item.is-text-only .vo-block-gallery-caption {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 24px;
  left: 24px;
  color: var(--ink, #0b1c30);
}
.vo-block-gallery-caption { display: grid; gap: 7px; }
.vo-block-gallery-caption strong {
  font: 700 clamp(21px, 2.5vw, 32px)/1.12 var(--brand-heading-font, "Hanken Grotesk", sans-serif);
  letter-spacing: -.035em;
}
.vo-block-gallery-caption span { font: 450 13px/1.55 var(--brand-body-font, Inter, sans-serif); opacity: .82; }
.vo-block-image-gallery-mosaic .vo-block-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vo-block-image-gallery-mosaic .vo-block-gallery-item:first-child,
.vo-block-image-gallery-mosaic .vo-block-gallery-item:last-child:nth-child(even) { grid-column: span 2; }
.vo-block-image-gallery-mosaic .vo-block-gallery-item:first-child .vo-block-gallery-media { aspect-ratio: 16 / 7; }
.vo-block-image-gallery-mosaic .vo-block-gallery-item:first-child .vo-block-gallery-caption strong { font-size: clamp(32px, 4vw, 52px); }
.vo-block-image-gallery-mosaic .vo-block-gallery-item:not(:first-child) .vo-block-gallery-media { aspect-ratio: 1 / 1; }
.vo-block-image-gallery-mosaic .vo-block-gallery-item:last-child:nth-child(even) .vo-block-gallery-media { aspect-ratio: 8 / 3; }
.vo-block-image-gallery-grid .vo-block-gallery-media { aspect-ratio: 4 / 4.6; }
.vo-block-image-gallery-filmstrip .vo-block-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vo-block-image-gallery-filmstrip .vo-block-gallery-media { aspect-ratio: 4 / 3; }
.vo-block-image-gallery-filmstrip .vo-block-gallery-caption strong { font-size: clamp(19px, 2vw, 25px); }

/* Process steps offer a quieter timeline and a more tactile card treatment. */
.vo-block-process-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr));
  gap: clamp(16px, 2vw, 28px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.vo-block-process-step {
  min-width: 0;
  padding: 22px 6px 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--brand-primary, #0b1c30) 38%, transparent);
}
.vo-block-process-number {
  display: block;
  margin-bottom: 44px;
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  font: 750 12px/1 var(--brand-body-font, Inter, sans-serif);
  letter-spacing: .16em;
}
.vo-block-process-step h3 {
  margin: 0 0 10px;
  color: var(--ink, #0b1c30);
  font: 700 clamp(20px, 2.2vw, 27px)/1.12 var(--brand-heading-font, "Hanken Grotesk", sans-serif);
  letter-spacing: -.03em;
}
.vo-block-process-step p {
  max-width: 32ch;
  margin: 0;
  color: var(--muted, #6b7280);
  font: 400 14px/1.65 var(--brand-body-font, Inter, sans-serif);
}
.vo-block-process-steps-cards .vo-block-process-step {
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #0b1c30) 14%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--brand-primary, #0b1c30) 5%, var(--brand-bg, #fff));
}
.vo-block-process-steps-cards .vo-block-process-number { margin-bottom: 54px; }
.dark-mode .vo-block-gallery-item {
  background: color-mix(in srgb, var(--brand-primary, #a5b4fc) 8%, #101724);
  border-color: rgba(255, 255, 255, .13);
}
.dark-mode .vo-block-gallery-item.is-text-only .vo-block-gallery-media {
  background:
    radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--brand-primary, #a5b4fc) 20%, transparent), transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--brand-primary, #a5b4fc) 10%, #101724), #101724);
}
.dark-mode .vo-block-process-step { border-top-color: rgba(255, 255, 255, .22); }
.dark-mode .vo-block-process-steps-cards .vo-block-process-step {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .12);
}
@media (max-width: 720px) {
  .vo-block-image-gallery,
  .vo-block-process-steps { margin: 28px auto; padding: 20px 8px; }
  .vo-block-gallery-grid,
  .vo-block-image-gallery-filmstrip .vo-block-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vo-block-image-gallery-mosaic .vo-block-gallery-item:first-child { grid-column: span 2; }
  .vo-block-image-gallery-mosaic .vo-block-gallery-item:first-child .vo-block-gallery-media { aspect-ratio: 5 / 4; }
  .vo-block-image-gallery-mosaic .vo-block-gallery-item:not(:first-child) .vo-block-gallery-media { aspect-ratio: 4 / 5; }
  .vo-block-image-gallery-mosaic .vo-block-gallery-item:last-child:nth-child(even) .vo-block-gallery-media { aspect-ratio: 5 / 3; }
  .vo-block-gallery-item.is-text-only .vo-block-gallery-caption { left: 16px; right: 16px; bottom: 16px; }
  .vo-block-gallery-item.has-image .vo-block-gallery-caption { padding: 36px 16px 16px; }
  .vo-block-gallery-caption strong { font-size: clamp(17px, 5vw, 24px); }
  .vo-block-image-gallery-mosaic .vo-block-gallery-item:first-child .vo-block-gallery-caption strong { font-size: clamp(25px, 7vw, 32px); }
  .vo-block-gallery-caption span { font-size: 12px; }
  .vo-block-gallery-placeholder-index { top: 16px; left: 16px; }
  .vo-block-process-list { grid-template-columns: 1fr; gap: 0; }
  .vo-block-process-step { padding: 20px 0; }
  .vo-block-process-number,
  .vo-block-process-steps-cards .vo-block-process-number { margin-bottom: 18px; }
  .vo-block-process-steps-cards .vo-block-process-list { gap: 12px; }
  .vo-block-process-steps-cards .vo-block-process-step { padding: 20px; }
}

/* Editorial image and copy section. The placeholder is intentional until a
   merchant chooses photography; it keeps a newly inserted block composed. */
.vo-block-story-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  max-width: var(--vo-section-max, 1100px);
  width: 100%;
  margin: 48px auto;
  padding: 24px;
  box-sizing: border-box;
}
.vo-block-story-split-right .vo-block-story-media { order: 2; }
.vo-block-story-split-text-only { display: block; max-width: 960px; }
.vo-block-story-split-text-only .vo-block-story-copy { max-width: 780px; margin: 0 auto; text-align: center; }
.vo-block-story-split-text-only .vo-block-story-copy p { max-width: 62ch; margin-left: auto; margin-right: auto; }
@media (min-width: 850px) {
  .vo-builder-page[data-page-slug="home"] .vo-block-story-split-text-only .vo-block-story-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    column-gap: clamp(48px, 7vw, 104px);
    align-items: start;
    max-width: 1050px;
    text-align: left;
  }
  .vo-builder-page[data-page-slug="home"] .vo-block-story-split-text-only .vo-block-story-eyebrow { grid-column: 1; grid-row: 1; }
  .vo-builder-page[data-page-slug="home"] .vo-block-story-split-text-only .vo-block-story-copy h2 { grid-column: 1; grid-row: 2 / span 2; margin-bottom: 0; }
  .vo-builder-page[data-page-slug="home"] .vo-block-story-split-text-only .vo-block-story-copy p { grid-column: 2; grid-row: 1 / span 2; margin: 0 0 24px; max-width: 42ch; }
  .vo-builder-page[data-page-slug="home"] .vo-block-story-split-text-only .vo-block-story-link { grid-column: 2; grid-row: 3; justify-self: start; }
}
.vo-block-story-media {
  min-width: 0;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: 24px;
  background: color-mix(in srgb, var(--brand-primary, #0b1c30) 15%, var(--brand-bg, white));
}
.vo-block-story-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vo-block-story-placeholder { display: grid; width: 100%; height: 100%; place-items: center; font-size: clamp(80px, 14vw, 180px); color: color-mix(in srgb, var(--vo-brand-text, var(--brand-primary, #0b1c30)) 55%, transparent); }
.vo-block-story-copy { min-width: 0; }
.vo-block-story-copy h2 { margin: 0 0 18px; font: 700 clamp(32px, 4vw, 54px)/1.08 var(--brand-heading-font, "Hanken Grotesk", sans-serif); letter-spacing: -.04em; color: var(--ink, #0b1c30); }
.vo-block-story-copy p { max-width: 52ch; margin: 0 0 26px; color: var(--muted, #6b7280); font-size: 16px; line-height: 1.75; white-space: pre-line; }
.vo-block-story-link { display: inline-flex; align-items: center; gap: 8px; color: var(--vo-brand-text, var(--brand-primary, #0b1c30)); font-weight: 750; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 6px; }
.vo-block-story-link:hover { opacity: .7; }
.vo-block-story-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
/* A homepage reads as one sequence. Individual sections own their internal
   padding, while adjacent full-width sections share the page canvas. */
.vo-builder-page[data-page-slug="home"] .vo-builder-blocks { row-gap: 0; }
.vo-builder-page[data-page-slug="home"] .vo-block-slot-full > :is(.vo-block-hero, .vo-block-features, .vo-block-story-split, .vo-block-image-gallery, .vo-block-process-steps, .vo-block-stats, .vo-block-testimonial, .vo-block-cta-band) {
  margin-top: 0;
  margin-bottom: 0;
}
.vo-builder-page[data-page-slug="home"] .vo-block-slot-full > .vo-block-features,
.vo-builder-page[data-page-slug="home"] .vo-block-slot-full > .vo-block-story-split {
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
@media (max-width: 720px) {
  .vo-block-features { margin: 28px auto; padding: 20px 8px; }
  .vo-block-features-grid { grid-template-columns: 1fr; gap: 12px; }
  .vo-block-features-cell { padding: 24px; }
  .vo-block-story-split { grid-template-columns: 1fr; gap: 24px; margin: 28px auto; padding: 16px 8px; }
  .vo-block-story-split-right .vo-block-story-media { order: 0; }
  .vo-block-story-media { aspect-ratio: 4 / 3; }
}

/* ============ faq block ============ */
.vo-block-faq {
  display: grid;
  gap: 16px;
  margin: 24px 0;
}
.vo-block-faq-heading {
  margin: 0;
  font-family: "Hanken Grotesk", Inter, sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink, #0b1c30);
}
.vo-block-faq-list { display: grid; gap: 8px; }
.vo-block-faq-item {
  background: rgba(15, 23, 42, 0.025);
  border: 1px solid rgba(15, 23, 42, 0.06);
  /* Follows the brand's corner style (12px at the default 10px radius). */
  border-radius: calc(min(var(--brand-radius, 10px), 14px) + 2px);
  padding: 14px 18px;
  transition: background 0.15s ease;
}
.vo-block-faq-item[open] {
  background: rgba(15, 23, 42, 0.04);
}
.vo-block-faq-q {
  font-family: "Hanken Grotesk", Inter, sans-serif;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink, #0b1c30);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.vo-block-faq-q::-webkit-details-marker { display: none; }
.vo-block-faq-q::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -2px;
  font-size: 22px;
  font-weight: 300;
  color: var(--muted, #6b7280);
  transition: transform 0.18s ease;
}
.vo-block-faq-item[open] .vo-block-faq-q::after {
  content: "−";
  transform: rotate(0deg);
}
.vo-block-faq-a {
  margin-top: 10px;
  color: var(--muted, #45464d);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ============ hours block ============ */
.vo-block-hours {
  display: grid;
  gap: 14px;
  margin: 24px 0;
}
.vo-block-hours-heading {
  margin: 0;
  font-family: var(--brand-heading-font, "Hanken Grotesk", Inter, sans-serif);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: var(--vo-heading-weight, 700);
  letter-spacing: -0.01em;
  color: var(--ink, #0b1c30);
}
.vo-block-hours-card {
  border: 1px solid rgba(15, 23, 42, 0.08);
  /* Follows the brand's corner style (14px at the default 10px radius). */
  border-radius: calc(min(var(--brand-radius, 10px), 14px) + 4px);
  background: #ffffff;
  padding: 20px 24px;
  max-width: 480px;
}
.vo-block-hours-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.vo-block-hours-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.vo-block-hours-status.is-open {
  color: #15803d;
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.vo-block-hours-status.is-open .vo-block-hours-status-dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.vo-block-hours-status.is-closed {
  color: #b45309;
  background: #fffbeb;
  border-color: #fde68a;
}
.vo-block-hours-status.is-closed .vo-block-hours-status-dot {
  background: #f59e0b;
}
.vo-block-hours-list {
  display: grid;
  gap: 8px;
}
.vo-block-hours-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14.5px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.06);
}
.vo-block-hours-row:last-child { border-bottom: none; }
.vo-block-hours-day {
  color: var(--muted, #6b7280);
  font-weight: 500;
}
.vo-block-hours-time {
  font-family: ui-monospace, "Space Mono", monospace;
  color: var(--ink, #0b1c30);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.vo-builder-related {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--border, #e5e7eb);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.vo-builder-related-link {
  color: var(--muted, #6b7280);
  font-size: 14px;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}
.vo-builder-related-link:hover {
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  background: rgba(0, 0, 0, 0.04);
}
.vo-builder-related-link[aria-current="page"] {
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  font-weight: 600;
}

/* ============ catalog block ============ */
.vo-block-catalog {
  display: grid;
  gap: 28px;
  margin: 32px 0;
  background: var(--vo-cat-bg, transparent);
  padding: 0;
  font-family: var(--vo-cat-body-font, inherit);
  color: var(--vo-cat-ink, var(--ink, #0b1c30));
}
.vo-builder-page.vo-order-catalog { max-width: none; width: 100%; margin: 0; padding: 0; }
.vo-block-catalog-live { margin: 0; }
.vo-block-catalog-live .vo-block-catalog-card,
.vo-block-catalog-live .vo-block-catalog-row,
.vo-block-catalog-live .vo-block-catalog-feature { cursor: default; }
.vo-block-catalog-live [data-menu-item] { scroll-margin-top: 96px; }
.vo-block-catalog-live [data-menu-item]:target { outline: 2px solid var(--vo-cat-accent, var(--brand-primary, #0b1c30)); outline-offset: 4px; }
.vo-block-catalog-live :is(.vo-block-catalog-card, .vo-block-catalog-row, .vo-block-catalog-feature).is-unavailable { opacity: .58; }
.vo-block-catalog-live .vo-block-catalog-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.vo-block-catalog-live :is(.vo-block-catalog-primary, .vo-block-catalog-secondary) {
  appearance: none; border: 1px solid var(--vo-cat-accent, var(--brand-primary, #0b1c30));
  border-radius: var(--vo-cat-card-radius, 8px); padding: 9px 13px;
  font: 700 12px/1.2 var(--vo-cat-body-font, inherit); cursor: pointer;
}
/* Themes and card styles restyle the preview's .vo-block-catalog-card-add pill
   as a text link. The live Add button is the checkout action, so it stays a
   filled button; the element selector outranks those theme and hover rules. */
.vo-block-catalog-live .vo-block-catalog-actions button.vo-block-catalog-primary.vo-block-catalog-card-add,
.vo-block-catalog-live .vo-block-catalog-actions button.vo-block-catalog-primary.vo-block-catalog-card-add:hover {
  margin: 0; border: 0; border-radius: var(--vo-cat-card-radius, 8px); padding: 9px 13px;
  background: var(--vo-cat-accent, var(--brand-primary, #0b1c30)); color: var(--vo-cat-button-text, #fff);
  font: 700 12px/1.2 var(--vo-cat-body-font, inherit); letter-spacing: normal; text-transform: none; text-decoration: none;
  transform: none; box-shadow: none;
}
.vo-block-catalog-live .vo-block-catalog-secondary { background: transparent; color: var(--vo-accent-text, var(--vo-cat-accent, var(--brand-primary, #0b1c30))); }
.vo-block-catalog-live :is(.vo-block-catalog-primary, .vo-block-catalog-secondary):hover:not(:disabled) { filter: brightness(1.12); }
.vo-block-catalog-live :is(.vo-block-catalog-primary, .vo-block-catalog-secondary):disabled { opacity: .52; cursor: not-allowed; }
.vo-block-catalog-live .vo-block-catalog-search-clear { border: 0; background: transparent; color: var(--vo-accent-text, var(--vo-cat-accent, var(--brand-primary))); cursor: pointer; font: 700 12px var(--vo-cat-body-font, inherit); }
.vo-block-catalog-live .vo-block-catalog-flow-note { margin: -6px 0 12px; color: var(--vo-cat-muted, var(--muted)); font-size: 12px; }
.vo-block-catalog-live #menu-no-results.hidden,
.vo-block-catalog-live #menu-grid-shell.hidden,
.vo-block-catalog-live #menu-search-clear.hidden,
.vo-block-catalog-live [data-menu-item].hidden { display: none !important; }
.vo-block-catalog-live .vo-block-catalog-row { grid-template-columns: 56px minmax(0, 1fr) auto auto; }
@media (max-width: 680px) {
  .vo-block-catalog-live .vo-block-catalog-row { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .vo-block-catalog-live .vo-block-catalog-row .vo-block-catalog-actions { grid-column: 2 / -1; justify-self: end; }
}
/* Themes with their own backdrop pad so the section reads as intentional. */
.vo-block-catalog-theme-warm { padding: 40px 24px 32px; border-radius: 24px; }
.vo-block-catalog-theme-bold { padding: 40px 24px 32px; border-radius: 16px; }
.vo-block-catalog-theme-neon { padding: 40px 24px 32px; border-radius: 4px; }
/* Dark themes: status pill needs lighter background so it stays legible. */
.vo-block-catalog-theme-bold .vo-block-catalog-status,
.vo-block-catalog-theme-neon .vo-block-catalog-status {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.vo-block-catalog-theme-bold .vo-block-catalog-status.is-open,
.vo-block-catalog-theme-neon .vo-block-catalog-status.is-open {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.4);
  color: #86efac;
}
/* Neon theme — no hover lift since the focus ring (box-shadow) is the affordance. */
.vo-block-catalog-theme-neon .vo-block-catalog-card:hover,
.vo-block-catalog-theme-neon .vo-block-catalog-feature:hover { transform: none; }
/* Bold theme — slightly tighter card heads, white-on-black price. */
.vo-block-catalog-theme-bold .vo-block-catalog-card-head { padding-bottom: 2px; }
/* Minimal theme — no media background, no shadows on hover, name uses heading font weight. */
.vo-block-catalog-theme-minimal .vo-block-catalog-card-media { background: transparent; aspect-ratio: 1 / 1; }
.vo-block-catalog-theme-minimal .vo-block-catalog-card-media img { border-radius: 999px; }
.vo-block-catalog-theme-minimal .vo-block-catalog-card-fallback { border-radius: 999px; }
.vo-block-catalog-theme-minimal .vo-block-catalog-card:hover { transform: none; }
/* Warm theme — slightly rounder cards + warmer accent on hover. */
.vo-block-catalog-theme-warm .vo-block-catalog-card:hover {
  border-color: color-mix(in srgb, var(--vo-cat-accent) 30%, transparent);
}

/* ============================================================
   DARK MODE OVERRIDES
   ------------------------------------------------------------
   Light-by-default themes (default, minimal, warm, enterprise)
   bake hardcoded white card backgrounds + light surfaces into
   their token sets. When the tenant has dark_mode enabled, those
   light values stop making sense — light text on white cards =
   invisible. Override the relevant tokens to dark-friendly values
   only when body.dark-mode is active. Themes that are dark by
   design (bold, neon) are deliberately untouched.
   ============================================================ */
.dark-mode .vo-block-catalog-theme-default,
.dark-mode .vo-block-catalog-theme-minimal,
.dark-mode .vo-block-catalog-theme-warm,
.dark-mode .vo-block-catalog-theme-enterprise {
  /* Use literal dark hex (not var(--surface-raised, ...)). The admin panel's
     global.css sets --surface-raised:#ffffff at :root, which would otherwise
     leak in and turn dark-mode catalog cards white inside the builder preview. */
  --vo-cat-bg: transparent !important;
  /* Derived from the page background (neutral fallback) so dark cards sit
     in the tenant palette instead of a fixed navy. */
  --vo-cat-card-bg: color-mix(in srgb, var(--brand-bg, #0f1115) 91%, #ffffff) !important;
  --vo-cat-card-border: 1px solid rgba(255, 255, 255, 0.08) !important;
  --vo-cat-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 6px 18px rgba(0, 0, 0, 0.32) !important;
  --vo-cat-card-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 36px rgba(0, 0, 0, 0.45) !important;
  /* Same reason — anchor ink to a literal so the admin's --ink doesn't bleed in. */
  --vo-cat-ink: #f3f5fb !important;
  --vo-cat-muted: #b1bfd4 !important;
  --vo-cat-divider: rgba(255, 255, 255, 0.08) !important;
  --vo-cat-pill-bg: rgba(255, 255, 255, 0.04) !important;
  --vo-cat-pill-border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* Enterprise theme bakes a hard white catalog wrapper — flip to transparent in
   dark mode so the page background flows through behind the cards. */
.dark-mode .vo-block-catalog-theme-enterprise {
  background: transparent !important;
}
/* Enterprise: dark-mode-friendly chips, search input, and outline button colors. */
.dark-mode .vo-block-catalog-theme-enterprise .vo-block-catalog-cat {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink, #f3f4f6);
}
.dark-mode .vo-block-catalog-theme-enterprise .vo-block-catalog-cat:hover {
  background: color-mix(in srgb, var(--vo-cat-accent) 14%, rgba(255, 255, 255, 0.04));
  border-color: color-mix(in srgb, var(--vo-cat-accent) 38%, rgba(255, 255, 255, 0.12));
}
.dark-mode .vo-block-catalog-theme-enterprise .vo-block-catalog-cat.is-active {
  background: var(--vo-cat-accent);
  color: var(--vo-cat-button-text);
  border-color: var(--vo-cat-accent);
}
.dark-mode .vo-block-catalog-theme-enterprise .vo-block-catalog-search {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink, #f3f4f6);
}
.dark-mode .vo-block-catalog-theme-enterprise .vo-block-catalog-card-media {
  background: rgba(255, 255, 255, 0.04);
}
/* Card media fallback initial in dark mode — light glyph on dark tint */
.dark-mode .vo-block-catalog-theme-default .vo-block-catalog-card-media,
.dark-mode .vo-block-catalog-theme-minimal .vo-block-catalog-card-media,
.dark-mode .vo-block-catalog-theme-warm .vo-block-catalog-card-media {
  background: rgba(255, 255, 255, 0.04);
}
.dark-mode .vo-block-catalog-card-fallback {
  color: rgba(255, 255, 255, 0.55);
}
/* Open/closed status pill — bright pill on dark background needs adjustment so
   it doesn't feel "stuck on" against a dark surface. */
.dark-mode .vo-block-catalog-status {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--ink, #f3f4f6);
}
.dark-mode .vo-block-catalog-status.is-open {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.4);
  color: #86efac;
}
/* Empty state */
.dark-mode .vo-block-catalog-theme-enterprise .vo-block-catalog-empty {
  background: rgba(255, 255, 255, 0.04);
}

/* ============================================================
   DARK MODE — composed home-page block tokens
   ------------------------------------------------------------
   The new block types we added for AI-generated home pages
   (stats / testimonial / features / cta-band) inherit text
   color from var(--ink, #0b1c30). On AI-built drafts the
   storefront page sets --ink via a :root rule in the head,
   which leaks into dark-mode tenants and makes our text dark-
   on-dark (e.g. testimonial quote, "Visit us" heading).
   Override --ink + --muted on body.dark-mode here so every
   var(--ink) usage in the block CSS resolves to a readable
   light color when the tenant is dark-mode.
   ============================================================ */
body.dark-mode {
  --ink: #f1f5f9;
  --muted: #b1bfd4;
  --subtle: #64748b;
}

.dark-mode .vo-block-service-card {
  background: #182238;
  border-color: rgba(255, 255, 255, 0.1);
}
.dark-mode .vo-block-service-card-badge {
  background: color-mix(in srgb, var(--brand-primary, #a5b4fc) 16%, transparent);
}

/* Stats row — light cards on dark background. */
.dark-mode .vo-block-stats-cell {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.dark-mode .vo-block-stats-value {
  /* Use the brand color but bump it up for legibility on dark surface. */
  color: var(--vo-brand-text, color-mix(in srgb, var(--brand-primary, #f1f5f9) 75%, #f1f5f9));
}
.dark-mode .vo-block-stats-label {
  color: rgba(241, 245, 249, 0.70);
}

/* Testimonial — light text + subtle border on a slightly raised dark card. */
.dark-mode .vo-block-testimonial {
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 70%),
    rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.dark-mode .vo-block-testimonial-quote {
  color: #f1f5f9;
}
.dark-mode .vo-block-testimonial-mark {
  color: var(--vo-brand-text, color-mix(in srgb, var(--brand-primary, #f1f5f9) 60%, #f1f5f9));
  opacity: 0.7;
}
.dark-mode .vo-block-testimonial-author-name {
  color: #f1f5f9;
}
.dark-mode .vo-block-testimonial-author-role {
  color: rgba(241, 245, 249, 0.6);
}

/* Features grid — keep cards visible on dark bg. */
.dark-mode .vo-block-features-cell {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.dark-mode .vo-block-features-cell:hover {
  background: rgba(255, 255, 255, 0.05);
}
.dark-mode .vo-block-features-minimal .vo-block-features-cell,
.dark-mode .vo-block-features-minimal .vo-block-features-cell:hover {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.dark-mode .vo-block-features-icon {
  background: color-mix(in srgb, var(--brand-primary, #f1f5f9) 20%, transparent);
  color: var(--vo-brand-text, color-mix(in srgb, var(--brand-primary, #f1f5f9) 60%, #f1f5f9));
}
.dark-mode .vo-block-features-title {
  color: #f1f5f9;
}
.dark-mode .vo-block-features-desc {
  color: rgba(241, 245, 249, 0.68);
}

/* Plain text + heading blocks (used by the story section + location-hours
   heading + about paragraphs) need legible foreground on dark. */
.dark-mode .vo-block-text,
.dark-mode .vo-block-heading {
  color: #f1f5f9;
}

/* Hours block — the base styles bake a hard-coded white background on
   vo-block-hours-card and pull vo-block-hours-time color from --ink
   (which is light-on-light in dark mode once --ink flips). Override the
   card surface AND every nested foreground colour explicitly so the
   block reads as a raised dark card with light text, matching the rest
   of the composed home page. */
.dark-mode .vo-block-hours {
  color: #f1f5f9;
}
.dark-mode .vo-block-hours-heading {
  color: #f1f5f9;
}
.dark-mode .vo-block-hours-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.dark-mode .vo-block-hours-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.dark-mode .vo-block-hours-day {
  color: rgba(241, 245, 249, 0.62);
}
.dark-mode .vo-block-hours-time {
  color: #f1f5f9;
}
/* Status pill — the "Currently closed" amber-on-cream chip is unreadable
   against a dark card; restyle for dark surface. */
.dark-mode .vo-block-hours-status {
  border-color: rgba(255, 255, 255, 0.10);
}
.dark-mode .vo-block-hours-status.is-open {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.30);
}
.dark-mode .vo-block-hours-status.is-closed {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.28);
}

/* Published catalog compositions inherit their own palette regardless of the
   tenant's global homepage setting. Keep neighboring utility sections on the
   same surface as the catalog, including when the merchant changes themes. */
.vo-catalog-page[data-catalog-tone] .vo-block-hours-heading {
  color: var(--vo-cat-ink);
  font-family: var(--vo-cat-heading-font);
}
.vo-catalog-page[data-catalog-tone] .vo-block-hours-card {
  background: var(--vo-cat-card-bg);
  border-color: var(--vo-cat-divider);
  border-radius: var(--vo-cat-card-radius);
  color: var(--vo-cat-ink);
}
.vo-catalog-page[data-catalog-tone] .vo-block-hours-row { border-bottom-color: var(--vo-cat-divider); }
.vo-catalog-page[data-catalog-tone] .vo-block-hours-day { color: var(--vo-cat-muted); }
.vo-catalog-page[data-catalog-tone] .vo-block-hours-time { color: var(--vo-cat-ink); }
.vo-catalog-page[data-catalog-tone="dark"] :is(.vo-block-service-card, .vo-block-faq-item, .vo-block-process-steps-cards .vo-block-process-step, .vo-block-stats-cell, .vo-block-features:not(.vo-block-features-minimal) .vo-block-features-cell) {
  background: var(--vo-cat-card-bg);
  border-color: var(--vo-cat-divider);
}
.vo-catalog-page[data-catalog-tone="dark"] .vo-block-hours-status.is-open {
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
}
.vo-catalog-page[data-catalog-tone="dark"] .vo-block-hours-status.is-closed {
  color: #fcd990;
  background: rgba(201, 162, 102, 0.12);
  border-color: rgba(201, 162, 102, 0.3);
}

/* FAQ — dark-friendly card surface. */
.dark-mode .vo-block-faq-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.dark-mode .vo-block-faq-item[open] {
  background: rgba(255, 255, 255, 0.05);
}
.dark-mode .vo-block-faq-q {
  color: #f1f5f9;
}
.dark-mode .vo-block-faq-a {
  color: rgba(241, 245, 249, 0.78);
}

/* ============================================================
   ENTERPRISE THEME — marketplace-style cards, category pill
   overlay, dark teal accent. Refines the default card layout
   to a more SaaS / enterprise vibe.
   ============================================================ */
.vo-block-catalog-theme-enterprise {
  /* Previously pinned to #ffffff — even after switching --vo-cat-bg to
     transparent in the theme tokens, this hard-coded base rule still
     rendered a stark white wrapper around the entire /order page on any
     tenant whose AI-design pass picked Enterprise. The white card looked
     out of place on tenants with a non-white page background (lavender
     gradients, off-white surfaces, etc.). Transparent here lets the page
     bg flow through; Enterprise's marketplace-card identity is carried by
     the white per-card backgrounds + brand-teal accents, not by the
     wrapper. The dark-mode override at line ~2323 was already transparent
     for the same reason — this aligns light mode with that behaviour. */
  background: transparent;
}
.vo-block-catalog-theme-enterprise .vo-block-catalog-hero {
  text-align: center;
  align-items: center;
  justify-items: center;
  gap: 16px;
  padding: 8px 16px;
}
.vo-block-catalog-theme-enterprise .vo-block-catalog-heading {
  font-weight: 800;
  letter-spacing: -0.028em;
  font-size: clamp(32px, 4vw, 48px);
  margin: 0 auto;
}
.vo-block-catalog-theme-enterprise .vo-block-catalog-sub {
  color: var(--vo-cat-muted);
  max-width: 60ch;
  margin: 0 auto;
  font-size: 16px;
}
/* Search — centered and reasonably wide so it doesn't feel lonely on big screens */
.vo-block-catalog-theme-enterprise .vo-block-catalog-search-wrap {
  width: 100%;
  max-width: 640px;
  margin: 8px auto 0;
}
/* Category chips — centered row */
.vo-block-catalog-theme-enterprise .vo-block-catalog-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px auto 0;
  border: none;
  padding: 0;
  background: transparent;
  justify-content: center;
}
.vo-block-catalog-theme-enterprise .vo-block-catalog-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #ffffff;
  color: var(--vo-cat-ink);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: -0.005em;
}
.vo-block-catalog-theme-enterprise .vo-block-catalog-cat:hover {
  border-color: color-mix(in srgb, var(--vo-cat-accent) 35%, transparent);
  background: color-mix(in srgb, var(--vo-cat-accent) 4%, #ffffff);
}
.vo-block-catalog-theme-enterprise .vo-block-catalog-cat.is-active {
  background: var(--vo-cat-accent);
  color: var(--vo-cat-button-text);
  border-color: var(--vo-cat-accent);
}
/* Cards: redesigned for marketplace look — bigger image on top, category
   pill overlay, contained body with clear hierarchy, full-width add button. */
.vo-block-catalog-theme-enterprise .vo-block-catalog-grid {
  gap: 18px;
}
.vo-block-catalog-theme-enterprise .vo-block-catalog-card {
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--vo-cat-card-bg);
  border: 1px solid rgba(15, 23, 42, 0.07);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease;
}
.vo-block-catalog-theme-enterprise .vo-block-catalog-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--vo-cat-card-shadow-hover);
  border-color: color-mix(in srgb, var(--vo-cat-accent) 30%, rgba(15, 23, 42, 0.07));
}
.vo-block-catalog-theme-enterprise .vo-block-catalog-card-media {
  border-radius: 0;
  aspect-ratio: 16 / 10;
  background: #f1f5f4;
  position: relative;
  overflow: hidden;
}
/* Category badge — uses the card's data-category attribute. Rendered as a
   pseudo on the card itself (not the media) so attr() can resolve.
   Color uses --brand-button-text (contrast-guarded body-level value), NOT
   --vo-cat-button-text — see the matching comment in order.astro for why
   the theme-level token can collapse to dark-on-dark when brand-primary
   is itself a dark colour. */
.vo-block-catalog-theme-enterprise .vo-block-catalog-card::after {
  content: attr(data-category);
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  background: var(--vo-cat-accent);
  color: var(--brand-button-text, #ffffff);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  display: none;
  pointer-events: none;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 2;
}
/* Card body — clean layout with name above, description, then footer with duration + price + CTA */
.vo-block-catalog-theme-enterprise .vo-block-catalog-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.vo-block-catalog-theme-enterprise .vo-block-catalog-card-head {
  display: block;
  padding: 0;
}
.vo-block-catalog-theme-enterprise .vo-block-catalog-card-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--vo-cat-ink);
  line-height: 1.3;
}
.vo-block-catalog-theme-enterprise .vo-block-catalog-card-desc {
  color: var(--vo-cat-muted);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 2px 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vo-block-catalog-theme-enterprise .vo-block-catalog-card-price {
  font-size: 17px;
  font-weight: 800;
  color: var(--vo-cat-ink);
  letter-spacing: -0.015em;
  margin-top: auto;
  display: inline-block;
  padding-top: 4px;
}
/* Repurpose the existing "+ Add" pill as a full-width "Add to booking" button */
.vo-block-catalog-theme-enterprise .vo-block-catalog-card-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
  padding: 10px 14px;
  background: transparent;
  color: var(--vo-accent-text, var(--vo-cat-accent));
  border: 1px solid color-mix(in srgb, var(--vo-accent-text, var(--vo-cat-accent)) 35%, rgba(15, 23, 42, 0.1));
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  transition: all 0.15s ease;
}
.vo-block-catalog-theme-enterprise .vo-block-catalog-card:hover .vo-block-catalog-card-add {
  background: var(--vo-cat-accent);
  color: var(--vo-cat-button-text);
  border-color: var(--vo-cat-accent);
}
/* List layout in enterprise theme — slightly more padded rows */
.vo-block-catalog-theme-enterprise .vo-block-catalog-row {
  padding: 16px;
  border-radius: 12px;
}
.vo-block-catalog-theme-enterprise .vo-block-catalog-row-name {
  font-weight: 700;
  letter-spacing: -0.012em;
}
.vo-block-catalog-theme-enterprise .vo-block-catalog-row-price {
  font-weight: 800;
  font-size: 16px;
}
/* Search bar — modern enterprise look */
.vo-block-catalog-theme-enterprise .vo-block-catalog-search {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  height: 52px;
  font-size: 15px;
  padding-left: 44px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.vo-block-catalog-theme-enterprise .vo-block-catalog-search:focus {
  border-color: var(--vo-cat-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vo-cat-accent) 14%, transparent);
  outline: none;
}
.vo-block-catalog-theme-enterprise .vo-block-catalog-search-wrap::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='M21 21l-4.35-4.35'/></svg>");
  background-repeat: no-repeat;
  pointer-events: none;
}
.vo-block-catalog-theme-enterprise .vo-block-catalog-search-wrap {
  position: relative;
}
/* Reveal the category overlay pill only when the card has a non-empty category */
.vo-block-catalog-theme-enterprise .vo-block-catalog-card[data-category]:not([data-category=""])::after {
  display: inline-block;
}
/* Empty state polish */
.vo-block-catalog-theme-enterprise .vo-block-catalog-empty {
  background: #f8fafa;
  border-radius: 12px;
  padding: 48px 24px;
}
/* Status banner — emerald-on-cream for enterprise */
.vo-block-catalog-theme-enterprise .vo-block-catalog-status.is-open {
  background: color-mix(in srgb, var(--vo-cat-accent) 8%, #ffffff);
  border-color: color-mix(in srgb, var(--vo-cat-accent) 28%, transparent);
  color: var(--vo-cat-accent);
}
.vo-block-catalog-hero {
  /* Position context for the soft brand-tinted backdrop below — kept inside
     the catalog block so it doesn't bleed across the whole page. */
  position: relative;
  text-align: center;
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 32px 24px 24px;
  border-radius: 20px;
  /* Soft brand-tinted radial backdrop. Replaces the stark white hero block
     that previously rendered as a flat panel — gives the heading region a
     subtle glow of the brand colour at the top, fading to transparent. Works
     equally well on light + dark themes because color-mix with transparent
     flattens against whatever the parent bg actually is. */
  background:
    radial-gradient(80% 70% at 50% 0%, color-mix(in srgb, var(--brand-primary, #0b1c30) 7%, transparent), transparent 65%);
}
.dark-mode .vo-block-catalog-hero {
  /* On dark surfaces the brand-color tint can read muddy; swap to a slight
     light wash so the hero region still feels lifted off the page. */
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(255, 255, 255, 0.04), transparent 65%);
}
.vo-block-catalog-heading {
  margin: 0;
  font-family: var(--vo-cat-heading-font, "Hanken Grotesk", Inter, sans-serif);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: var(--vo-cat-heading-weight, 700);
  letter-spacing: var(--vo-cat-letter-spacing, -0.02em);
  line-height: 1.1;
  color: var(--vo-cat-ink, var(--ink, #0b1c30));
}
.vo-block-catalog-sub {
  margin: 0;
  color: var(--vo-cat-muted, var(--muted, #6b7280));
  font-family: var(--vo-cat-body-font, inherit);
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 560px;
}
.vo-block-catalog-search {
  display: flex;
  align-items: center;
  width: min(440px, 100%);
  /* Decoupled from --vo-cat-pill-bg on 2026-05-16. The pill token is used
     for category chips, where brand-primary fills (e.g. on the Enterprise
     theme) are intentional. Sharing the token meant the search input was
     getting a brand-color fill too — placeholder text became unreadable
     against a saturated brand background. The search bar now defaults to
     plain white in light mode (overridden to a subtle dark surface in dark
     mode below) and still honours the per-tenant searchBg admin override
     via --brand-search-bg-override. */
  background: var(--brand-search-bg-override, #ffffff);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  padding: 10px 16px;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  /* Ink colour pinned to the readable foreground so the input text doesn't
     fade to brand-primary on themes that map ink to a brand colour. */
  color: var(--ink, #0b1c30);
}
.dark-mode .vo-block-catalog-search {
  background: var(--brand-search-bg-override, rgba(255, 255, 255, 0.04));
  border-color: rgba(255, 255, 255, 0.10);
  color: #f1f5f9;
}
.dark-mode .vo-block-catalog-search input::placeholder {
  color: rgba(241, 245, 249, 0.55);
}
/* Search style variants (brand-level — affects every catalog block + /order). */
[data-search-style="boxed"] .vo-block-catalog-search { border-radius: 10px; }
[data-search-style="minimal"] .vo-block-catalog-search {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--vo-cat-divider, rgba(15, 23, 42, 0.15));
  border-radius: 0;
  box-shadow: none;
  padding: 8px 4px;
}
.vo-block-catalog-search svg {
  width: 18px;
  height: 18px;
  color: var(--muted, #9aa1ab);
  flex-shrink: 0;
}
.vo-block-catalog-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--vo-cat-ink, var(--ink, #0b1c30));
}
.vo-block-catalog-search input::placeholder {
  color: var(--vo-cat-muted, var(--subtle, #9ca3af));
  opacity: 0.7;
}
.vo-block-catalog-search svg {
  color: var(--vo-cat-muted, var(--muted, #9aa1ab));
}
.vo-block-catalog-statusbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.vo-block-catalog-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
}
.vo-block-catalog-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.vo-block-catalog-status.is-open {
  color: #15803d;
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.vo-block-catalog-status.is-open .vo-block-catalog-status-dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.vo-block-catalog-status.is-closed {
  color: #b45309;
  background: #fffbeb;
  border-color: #fde68a;
}
.vo-block-catalog-status.is-closed .vo-block-catalog-status-dot {
  background: #f59e0b;
}
.vo-block-catalog-notice {
  display: block;
  width: 100%;
  max-width: 38rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #b45309;
  padding: 0.7rem 1rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 0.7rem;
  text-align: center;
}

/* ============================================================
   Banner style variants — set via data-banner-style on the
   .vo-block-catalog-statusbar wrapper. Each variant overrides
   layout, accent color, padding, and notice chip styling so
   merchants can pick the visual treatment that fits their
   storefront tone without coding.

   The accent colour resolves through --vo-banner-accent (set
   inline on the statusbar by the renderer), falling back to
   --brand-primary, then a neutral default. This lets merchants
   pin a contrast color when the brand color clashes with the
   page background.
   ============================================================ */
.vo-block-catalog-statusbar {
  --vo-banner-accent: var(--brand-primary, #0b1c30);
}

/* Filled — full-width brand-color band. Open/closed pill flips to a
   light-on-dark variant so it reads cleanly inside the band. */
.vo-block-catalog-statusbar[data-banner-style="filled"] {
  background: var(--vo-banner-accent);
  color: #ffffff;
  padding: 14px 20px;
  border-radius: 14px;
  margin-bottom: 8px;
}
.vo-block-catalog-statusbar[data-banner-style="filled"] .vo-block-catalog-status {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
.vo-block-catalog-statusbar[data-banner-style="filled"] .vo-block-catalog-status.is-open {
  background: rgba(34, 197, 94, 0.25);
  border-color: rgba(187, 247, 208, 0.35);
  color: #d1fae5;
}
.vo-block-catalog-statusbar[data-banner-style="filled"] .vo-block-catalog-status.is-closed {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(253, 230, 138, 0.35);
  color: #fde68a;
}
.vo-block-catalog-statusbar[data-banner-style="filled"] .vo-block-catalog-notice {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

/* Stripe — soft tinted row with a thin accent line on the left edge.
   Reads as a "promotional notice" without dominating the page. */
.vo-block-catalog-statusbar[data-banner-style="stripe"] {
  background: color-mix(in srgb, var(--vo-banner-accent) 8%, transparent);
  border-left: 4px solid var(--vo-banner-accent);
  padding: 12px 18px;
  border-radius: 0 12px 12px 0;
  justify-content: flex-start;
  margin-bottom: 8px;
}
.vo-block-catalog-statusbar[data-banner-style="stripe"] .vo-block-catalog-notice {
  background: transparent;
  border: none;
  color: var(--ink, #0b1c30);
  padding: 0;
}

/* Outlined — both pills get a brand-color outline. Lightweight, gallery-
   minimal style that pairs with luxe / boutique themes. */
.vo-block-catalog-statusbar[data-banner-style="outlined"] .vo-block-catalog-status {
  background: transparent;
  border: 1.5px solid var(--vo-banner-accent);
  color: var(--vo-banner-accent);
}
.vo-block-catalog-statusbar[data-banner-style="outlined"] .vo-block-catalog-status .vo-block-catalog-status-dot {
  background: var(--vo-banner-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vo-banner-accent) 16%, transparent);
}
.vo-block-catalog-statusbar[data-banner-style="outlined"] .vo-block-catalog-notice {
  background: transparent;
  border: 1.5px solid var(--vo-banner-accent);
  color: var(--vo-banner-accent);
}

/* Minimal — strips all chip backgrounds. Just a brand-color dot, the
   status text, and the notice copy inline. Cleanest possible treatment. */
.vo-block-catalog-statusbar[data-banner-style="minimal"] {
  gap: 24px;
}
.vo-block-catalog-statusbar[data-banner-style="minimal"] .vo-block-catalog-status {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--ink, #0b1c30);
}
.vo-block-catalog-statusbar[data-banner-style="minimal"] .vo-block-catalog-status-dot {
  background: var(--vo-banner-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vo-banner-accent) 18%, transparent);
}
.vo-block-catalog-statusbar[data-banner-style="minimal"] .vo-block-catalog-status.is-open .vo-block-catalog-status-dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.vo-block-catalog-statusbar[data-banner-style="minimal"] .vo-block-catalog-status.is-closed .vo-block-catalog-status-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.22);
}
.vo-block-catalog-statusbar[data-banner-style="minimal"] .vo-block-catalog-notice {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--muted, #6b7280);
  font-style: italic;
}

/* Dark-mode overrides for stripe + minimal — their backgrounds rely on
   --ink for foreground colour which already flips in dark mode, but the
   notice copy needs explicit handling so faded greys don't disappear. */
.dark-mode .vo-block-catalog-statusbar[data-banner-style="stripe"] .vo-block-catalog-notice {
  color: #f1f5f9;
}
.dark-mode .vo-block-catalog-statusbar[data-banner-style="minimal"] .vo-block-catalog-status {
  color: #f1f5f9;
}
.dark-mode .vo-block-catalog-statusbar[data-banner-style="minimal"] .vo-block-catalog-notice {
  color: rgba(241, 245, 249, 0.68);
}

.vo-block-catalog-layout {
  display: grid;
  gap: 32px;
}
.vo-block-catalog-layout.has-sidebar {
  grid-template-columns: 200px minmax(0, 1fr);
}
/* Generic category nav reset for the new button-based markup. Styles below
   layer position + style variants on top. */
.vo-block-catalog-cats {
  display: flex;
}
.vo-block-catalog-cat {
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--vo-cat-muted, var(--muted, #475569));
  font-family: var(--vo-cat-body-font, inherit);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  text-align: left;
}
.vo-block-catalog-cat:hover { color: var(--vo-cat-ink, var(--ink, #0b1c30)); }
.vo-block-catalog-cat.is-active { color: var(--vo-cat-ink, var(--ink, #0b1c30)); font-weight: 600; }

/* === Position: left / right (sidebar) === */
.vo-block-catalog-cats-pos-left .vo-block-catalog-cats,
.vo-block-catalog-cats-pos-right .vo-block-catalog-cats {
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 88px;
  align-self: start;
}
.vo-block-catalog-cats-pos-left .vo-block-catalog-cats {
  border-left: 1px solid var(--vo-cat-divider, rgba(15, 23, 42, 0.08));
  padding-left: 6px;
}
.vo-block-catalog-cats-pos-right .vo-block-catalog-cats {
  border-right: 1px solid var(--vo-cat-divider, rgba(15, 23, 42, 0.08));
  padding-right: 6px;
}

/* === Position: top (horizontal row above grid, centered on page) === */
.vo-block-catalog-cats-pos-top .vo-block-catalog-cats {
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

/* === Style: list (default vertical accent-bar) === */
.vo-block-catalog-cats-list .vo-block-catalog-cat {
  padding: 8px 12px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
}
.vo-block-catalog-cats-pos-right .vo-block-catalog-cats-list .vo-block-catalog-cat {
  margin-left: 0;
  margin-right: -2px;
  border-left: none;
  border-right: 2px solid transparent;
  text-align: right;
}
.vo-block-catalog-cats-list .vo-block-catalog-cat.is-active {
  border-left-color: var(--vo-accent-text, var(--vo-cat-accent, var(--brand-primary, #0b1c30)));
}
.vo-block-catalog-cats-pos-right .vo-block-catalog-cats-list .vo-block-catalog-cat.is-active {
  border-right-color: var(--vo-accent-text, var(--vo-cat-accent, var(--brand-primary, #0b1c30)));
  border-left-color: transparent;
}
/* When the list nav sits on top, it stacks vertically anyway but tightens. */
.vo-block-catalog-cats-pos-top .vo-block-catalog-cats-list {
  flex-direction: row;
  border-left: none;
  padding-left: 0;
  position: static;
}
.vo-block-catalog-cats-pos-top .vo-block-catalog-cats-list .vo-block-catalog-cat {
  border-left: none;
  border-bottom: 2px solid transparent;
  margin-left: 0;
  padding: 6px 10px;
}
.vo-block-catalog-cats-pos-top .vo-block-catalog-cats-list .vo-block-catalog-cat.is-active {
  border-bottom-color: var(--vo-accent-text, var(--vo-cat-accent, var(--brand-primary, #0b1c30)));
  border-left-color: transparent;
}

/* === Style: pills === */
.vo-block-catalog-cats-pills .vo-block-catalog-cat {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--vo-cat-divider, rgba(15, 23, 42, 0.12));
  background: var(--vo-cat-pill-bg, #ffffff);
  font-size: 13px;
  font-weight: 500;
}
.vo-block-catalog-cats-pills .vo-block-catalog-cat:hover {
  border-color: var(--vo-cat-accent, var(--brand-primary, #0b1c30));
}
.vo-block-catalog-cats-pills .vo-block-catalog-cat.is-active {
  background: var(--vo-cat-accent, var(--brand-primary, #0b1c30));
  color: var(--vo-cat-button-text, var(--brand-button-text, #ffffff));
  border-color: var(--vo-cat-accent, var(--brand-primary, #0b1c30));
}
[data-cat-active-style="tint"] .vo-block-catalog-cat.is-active {
  background: color-mix(in srgb, var(--vo-cat-accent, var(--brand-primary, #0b1c30)) 10%, transparent) !important;
  color: var(--vo-accent-text, var(--vo-cat-accent, var(--brand-primary, #0b1c30))) !important;
  border-color: color-mix(in srgb, var(--vo-cat-accent, var(--brand-primary, #0b1c30)) 35%, transparent) !important;
}
/* List style with tint — drop the left accent bar so we don't double up
   on visual emphasis. */
[data-cat-active-style="tint"] .vo-block-catalog-cats-list .vo-block-catalog-cat.is-active,
[data-cat-active-style="tint"] .vo-block-catalog-cats-pos-right .vo-block-catalog-cats-list .vo-block-catalog-cat.is-active {
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 8px;
  padding: 8px 12px;
}

/* OUTLINE — transparent bg with brand border + brand text. Reads as
   gallery-minimal, pairs with luxe / boutique themes. */
[data-cat-active-style="outline"] .vo-block-catalog-cat.is-active {
  background: transparent !important;
  color: var(--vo-accent-text, var(--vo-cat-accent, var(--brand-primary, #0b1c30))) !important;
  border: 1.5px solid var(--vo-accent-text, var(--vo-cat-accent, var(--brand-primary, #0b1c30))) !important;
}
[data-cat-active-style="outline"] .vo-block-catalog-cats-list .vo-block-catalog-cat.is-active {
  border-left-color: var(--vo-accent-text, var(--vo-cat-accent, var(--brand-primary, #0b1c30)));
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-width: 2px;
  border-radius: 0;
}

/* FILL — solid brand bg + button text. Same as the default pills active
   treatment; this selector exists so the data-attr always wins over the
   base rule even when a merchant explicitly picks "fill" on a list-style
   layout (which otherwise would render the accent-bar default).
   Color uses --brand-button-text (the body-level value, contrast-guarded
   by the orchestrator's ensureReadableFg). NOT --vo-cat-button-text,
   which the bold/neon themes hardcode to a near-black colour assuming
   the accent is a bright chromatic value — when brand-primary is itself
   dark (e.g. pure black for Chicken N Pickle), that token collapses to
   dark-on-dark and the active chip becomes invisible. */
[data-cat-active-style="fill"] .vo-block-catalog-cat.is-active {
  background: var(--vo-cat-accent, var(--brand-primary, #0b1c30)) !important;
  color: var(--brand-button-text, #ffffff) !important;
  border-color: var(--vo-cat-accent, var(--brand-primary, #0b1c30)) !important;
}
[data-cat-active-style="fill"] .vo-block-catalog-cats-list .vo-block-catalog-cat.is-active {
  border-radius: 8px;
  padding: 8px 12px;
}
.vo-block-catalog-cats-pos-left .vo-block-catalog-cats-pills,
.vo-block-catalog-cats-pos-right .vo-block-catalog-cats-pills {
  border: none;
  padding: 0;
  gap: 6px;
}

/* === Style: underline (text tabs with underline indicator) === */
.vo-block-catalog-cats-underline .vo-block-catalog-cat {
  padding: 6px 2px;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.vo-block-catalog-cats-pos-top .vo-block-catalog-cats-underline {
  gap: 18px;
  border-bottom: 1px solid var(--vo-cat-divider, rgba(15, 23, 42, 0.08));
  padding-bottom: 0;
}
.vo-block-catalog-cats-underline .vo-block-catalog-cat.is-active {
  border-bottom-color: var(--vo-accent-text, var(--vo-cat-accent, var(--brand-primary, #0b1c30)));
}
/* Underline on the side: cheat with a left accent bar, since underlining
   vertically-stacked items looks visually broken. */
.vo-block-catalog-cats-pos-left .vo-block-catalog-cats-underline .vo-block-catalog-cat,
.vo-block-catalog-cats-pos-right .vo-block-catalog-cats-underline .vo-block-catalog-cat {
  border-bottom: none;
}

/* === Style: dropdown === */
.vo-block-catalog-cats-dropdown .vo-block-catalog-cats-dropdown-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--vo-cat-pill-bg, #ffffff);
  border: 1px solid var(--vo-cat-divider, rgba(15, 23, 42, 0.12));
}
.vo-block-catalog-cats-dropdown-prefix {
  font-size: 12px;
  font-weight: 600;
  color: var(--vo-cat-muted, var(--muted, #6b7280));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.vo-block-catalog-cats-dropdown-select {
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--vo-cat-ink, var(--ink, #0b1c30));
  cursor: pointer;
  padding: 0 18px 0 0;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 8px) 50%, calc(100% - 4px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
.vo-block-catalog-cats-dropdown-select:focus { outline: 2px solid var(--vo-cat-accent, var(--brand-primary, #0b1c30)); outline-offset: 2px; }

/* ============================================================
   2026-05-28 — Section nesting (columns container)
   Multi-column rows where each cell holds an independent block.
   Collapses to a single column at <720px so mobile reads as a stack.
   ============================================================ */
.vo-block-columns {
  padding: 24px 0;
}
.vo-block-columns-cell {
  min-width: 0;
}
.vo-block-columns-cell > .vo-block {
  margin: 0;
}
.vo-block-columns-empty {
  display: block;
}
@media (max-width: 720px) {
  .vo-block-columns,
  .vo-block-columns-2,
  .vo-block-columns-3,
  .vo-block-columns-4 {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   2026-05-28 — Pass 1 expansion (catalog card + category variants)
   ============================================================
   Adds three new identity treatments for the catalog block:
     • card_style "editorial"   — Aesop / Glossier feel: full-bleed
       image, serif overlay caption below.
     • card_style "minimal-row" — text-only horizontal rows (forces
       list rendering regardless of layout).
     • category_style "image-tiles" — categories as a "shop by
       collection" tile grid (image background + label + count)
       instead of a filter bar.
   Each is layered ON TOP of the existing layout + theme tokens so
   no tenant breaks if these aren't picked. CSS is feature-isolated.
   ============================================================ */

/* ─── card_style: editorial ─── */
.vo-block-catalog-card-style-editorial .vo-block-catalog-card {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  gap: 14px;
}
.vo-block-catalog-card-style-editorial .vo-block-catalog-card-media {
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--vo-cat-card-bg, #f4f1ec);
}
.vo-block-catalog-card-style-editorial .vo-block-catalog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vo-block-catalog-card-style-editorial .vo-block-catalog-card-body {
  padding: 4px 0 18px;
  font-family: var(--vo-card-font-override, "Fraunces", Georgia, serif);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vo-block-catalog-card-style-editorial .vo-block-catalog-card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.vo-block-catalog-card-style-editorial .vo-block-catalog-card-name {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  color: var(--vo-card-text-override, var(--vo-cat-ink, var(--ink, #0b1c30)));
}
.vo-block-catalog-card-style-editorial .vo-block-catalog-card-price {
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--vo-cat-muted, var(--muted, #6b7280));
  font-family: "Space Mono", ui-monospace, monospace;
}
.vo-block-catalog-card-style-editorial .vo-block-catalog-card-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--vo-cat-muted, var(--muted, #6b7280));
  font-style: italic;
  font-family: "Fraunces", Georgia, serif;
}
.vo-block-catalog-card-style-editorial .vo-block-catalog-card-add {
  margin-top: 8px;
  background: transparent;
  color: var(--vo-cat-ink, var(--ink, #0b1c30));
  border: none;
  padding: 0;
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.vo-block-catalog-card-style-editorial .vo-block-catalog-card:hover {
  transform: none;
  box-shadow: none;
}
.vo-block-catalog-card-style-editorial .vo-block-catalog-card:hover .vo-block-catalog-card-media img {
  transform: scale(1.025);
  transition: transform 0.4s ease;
}
.vo-block-catalog-card-style-editorial.vo-block-catalog-grid {
  gap: 32px 24px;
}

/* ─── card_style: minimal-row ─── */
.vo-block-catalog-card-style-minimal-row.vo-block-catalog-list {
  border: 1px solid var(--vo-cat-divider, rgba(15, 23, 42, 0.08));
  border-radius: var(--vo-cat-card-radius, 12px);
  background: var(--vo-cat-card-bg, #ffffff);
  overflow: hidden;
}
.vo-block-catalog-card-style-minimal-row .vo-block-catalog-row {
  border-bottom: 1px solid var(--vo-cat-divider, rgba(15, 23, 42, 0.06));
  background: transparent;
  padding: 16px 20px;
  border-radius: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
}
.vo-block-catalog-card-style-minimal-row .vo-block-catalog-row:last-child {
  border-bottom: 0;
}
.vo-block-catalog-card-style-minimal-row .vo-block-catalog-row-media {
  display: none;
}
.vo-block-catalog-card-style-minimal-row .vo-block-catalog-row-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vo-block-catalog-card-style-minimal-row .vo-block-catalog-row-name {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--vo-card-text-override, var(--vo-cat-ink, var(--ink, #0b1c30)));
  font-family: var(--vo-card-font-override, inherit);
}
.vo-block-catalog-card-style-minimal-row .vo-block-catalog-row-desc {
  font-size: 0.85rem;
  color: var(--vo-cat-muted, var(--muted, #6b7280));
  line-height: 1.5;
  margin: 0;
}
.vo-block-catalog-card-style-minimal-row .vo-block-catalog-row-price {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--vo-card-text-override, var(--vo-cat-ink, var(--ink, #0b1c30)));
  font-family: "Space Mono", ui-monospace, monospace;
  letter-spacing: 0;
  white-space: nowrap;
}
.vo-block-catalog-card-style-minimal-row .vo-block-catalog-row:hover {
  background: rgba(15, 23, 42, 0.025);
}

/* ─── category_style: image-tiles ─── */
.vo-block-catalog-cats-image-tiles {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  width: 100%;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 32px;
}
.vo-block-catalog-cat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--vo-cat-divider, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  overflow: hidden;
  padding: 18px;
  background-color: var(--vo-cat-card-bg, #f4f1ec);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  text-decoration: none;
  color: #ffffff;
  font: inherit;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.vo-block-catalog-cat-tile-all {
  background: var(--vo-cat-accent, var(--brand-primary, #0b1c30));
  color: var(--brand-button-text, #ffffff);
}
.vo-block-catalog-cat-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
}
.vo-block-catalog-cat-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.65) 100%);
  pointer-events: none;
}
.vo-block-catalog-cat-tile-all .vo-block-catalog-cat-tile-overlay {
  display: none;
}
.vo-block-catalog-cat-tile-label {
  position: relative;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.vo-block-catalog-cat-tile-count {
  position: relative;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.92;
  margin-top: 4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* Categories with no photographed item get a composed tinted tile rather
   than an empty white box with a dark gradient. */
.vo-block-catalog-cat-tile.is-text-only {
  background-color: color-mix(in srgb, var(--vo-cat-accent, var(--brand-primary, #0b1c30)) 9%, var(--vo-cat-card-bg, #ffffff));
  color: var(--vo-cat-ink, var(--ink, #0b1c30));
}
.vo-block-catalog-cat-tile.is-text-only .vo-block-catalog-cat-tile-overlay { display: none; }
.vo-block-catalog-cat-tile.is-text-only :is(.vo-block-catalog-cat-tile-label, .vo-block-catalog-cat-tile-count) { text-shadow: none; }
.vo-block-catalog-cat-tile.is-active {
  outline: 2px solid var(--vo-cat-accent, var(--brand-primary, #0b1c30));
  outline-offset: 2px;
}
/* When image-tiles are used, the category nav doesn't share a row with
   the grid — it sits above. Force position-aware layout to single-column. */
.vo-block-catalog-layout-pos-left:has(.vo-block-catalog-cats-image-tiles),
.vo-block-catalog-layout-pos-right:has(.vo-block-catalog-cats-image-tiles) {
  grid-template-columns: 1fr;
}

/* ============================================================
   2026-05-28 — Pass 2 expansion (lookbook + polaroid + accordion)
   ============================================================ */

/* ─── card_style: lookbook ─── */
.vo-block-catalog-card-style-lookbook.vo-block-catalog-grid {
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vo-block-catalog-card-style-lookbook .vo-block-catalog-card {
  position: relative;
  border: none;
  border-radius: 16px;
  background: #0b1c30;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.vo-block-catalog-card-style-lookbook .vo-block-catalog-card-media {
  position: absolute;
  inset: 0;
  border-radius: 0;
  aspect-ratio: auto;
  height: 100%;
}
.vo-block-catalog-card-style-lookbook .vo-block-catalog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.vo-block-catalog-card-style-lookbook .vo-block-catalog-card:hover .vo-block-catalog-card-media img {
  transform: scale(1.05);
}
.vo-block-catalog-card-style-lookbook .vo-block-catalog-card-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 20px 20px 18px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.78) 100%);
  color: #ffffff;
  align-self: flex-end;
}
.vo-block-catalog-card-style-lookbook .vo-block-catalog-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vo-block-catalog-card-style-lookbook .vo-block-catalog-card-name {
  font-family: var(--vo-card-font-override, var(--vo-cat-heading-font, "Hanken Grotesk", Inter, sans-serif));
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.vo-block-catalog-card-style-lookbook .vo-block-catalog-card-price {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
}
.vo-block-catalog-card-style-lookbook .vo-block-catalog-card-desc {
  display: none;
}
.vo-block-catalog-card-style-lookbook .vo-block-catalog-card-add {
  margin-top: 12px;
  padding: 8px 14px;
  background: #ffffff;
  color: #0b1c30;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  align-self: flex-start;
}

/* ─── card_style: polaroid ─── */
.vo-block-catalog-card-style-polaroid.vo-block-catalog-grid {
  gap: 32px 28px;
}
.vo-block-catalog-card-style-polaroid .vo-block-catalog-card {
  background: #fffdf7;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 4px;
  padding: 14px 14px 0;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.05);
  transform: rotate(-0.5deg);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.vo-block-catalog-card-style-polaroid .vo-block-catalog-card:nth-child(even) {
  transform: rotate(0.6deg);
}
.vo-block-catalog-card-style-polaroid .vo-block-catalog-card:hover {
  transform: rotate(0) translateY(-2px);
  box-shadow: 0 22px 36px rgba(15, 23, 42, 0.14), 0 4px 8px rgba(15, 23, 42, 0.06);
}
.vo-block-catalog-card-style-polaroid .vo-block-catalog-card-media {
  border-radius: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f4f1ec;
}
.vo-block-catalog-card-style-polaroid .vo-block-catalog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vo-block-catalog-card-style-polaroid .vo-block-catalog-card-body {
  padding: 16px 6px 18px;
  font-family: "Fraunces", "Georgia", serif;
  text-align: center;
  gap: 6px;
}
.vo-block-catalog-card-style-polaroid .vo-block-catalog-card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.vo-block-catalog-card-style-polaroid .vo-block-catalog-card-name {
  font-family: "Fraunces", "Georgia", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--vo-card-text-override, var(--vo-cat-ink, #2a221c));
}
.vo-block-catalog-card-style-polaroid .vo-block-catalog-card-price {
  font-family: "Fraunces", "Georgia", serif;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--vo-cat-muted, #6b5d51);
}
.vo-block-catalog-card-style-polaroid .vo-block-catalog-card-desc {
  font-family: "Fraunces", "Georgia", serif;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--vo-cat-muted, #6b5d51);
  line-height: 1.4;
  margin-top: 4px;
}
.vo-block-catalog-card-style-polaroid .vo-block-catalog-card-add {
  margin-top: 10px;
  padding: 6px 14px;
  background: transparent;
  color: var(--vo-cat-ink, #2a221c);
  border: 1px solid var(--vo-cat-ink, #2a221c);
  border-radius: 999px;
  font-family: "Fraunces", "Georgia", serif;
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  text-decoration: none;
}

/* ─── category_style: accordion ─── */
.vo-block-catalog-cats-accordion {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  border: 1px solid var(--vo-cat-divider, rgba(15, 23, 42, 0.08));
  border-radius: 12px;
  padding: 8px !important;
  background: var(--vo-cat-card-bg, #ffffff);
}
.vo-block-catalog-cat-accordion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--vo-cat-ink, var(--ink, #0b1c30));
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.vo-block-catalog-cat-accordion-item:hover {
  background: var(--vo-cat-divider, rgba(15, 23, 42, 0.04));
}
.vo-block-catalog-cat-accordion-item.is-active {
  background: var(--vo-cat-accent, var(--brand-primary, #0b1c30));
  color: var(--vo-cat-button-text, var(--brand-button-text, #ffffff));
}
.vo-block-catalog-cat-accordion-label {
  font-weight: 600;
}
.vo-block-catalog-cat-accordion-count {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.75;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
}
.vo-block-catalog-cat-accordion-item.is-active .vo-block-catalog-cat-accordion-count {
  background: rgba(255, 255, 255, 0.18);
  opacity: 1;
}

/* ============================================================
   2026-05-28 — Pass 3 expansion (compact-strip + mega-row)
   ============================================================ */

/* ─── card_style: compact-strip ─── */
.vo-block-catalog-card-style-compact-strip.vo-block-catalog-grid {
  grid-template-columns: 1fr !important;
  gap: 8px;
}
.vo-block-catalog-card-style-compact-strip .vo-block-catalog-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: var(--vo-cat-card-bg, #ffffff);
  border: 1px solid var(--vo-cat-divider, rgba(15, 23, 42, 0.06));
  border-radius: 12px;
  text-align: left;
  flex-direction: row;
}
.vo-block-catalog-card-style-compact-strip .vo-block-catalog-card-media {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--vo-cat-card-bg, #f4f4f5);
  flex: 0 0 auto;
}
.vo-block-catalog-card-style-compact-strip .vo-block-catalog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vo-block-catalog-card-style-compact-strip .vo-block-catalog-card-body {
  padding: 0;
  gap: 2px;
  min-width: 0;
}
.vo-block-catalog-card-style-compact-strip .vo-block-catalog-card-head {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.vo-block-catalog-card-style-compact-strip .vo-block-catalog-card-name {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vo-block-catalog-card-style-compact-strip .vo-block-catalog-card-desc {
  font-size: 0.78rem;
  color: var(--vo-cat-muted, #6b7280);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}
.vo-block-catalog-card-style-compact-strip .vo-block-catalog-card-price {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.94rem;
  font-weight: 600;
  white-space: nowrap;
  margin-left: auto;
  align-self: center;
}
.vo-block-catalog-card-style-compact-strip .vo-block-catalog-card-add,
.vo-block-catalog-card-style-compact-strip .vo-block-catalog-card-foot {
  display: none;
}

/* ─── category_style: mega-row ─── */
.vo-block-catalog-cats-mega-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  width: 100%;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 24px;
}
.vo-block-catalog-cat-mega {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  padding: 18px 18px 16px;
  background: var(--vo-cat-card-bg, #ffffff);
  border: 1px solid var(--vo-cat-divider, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--vo-cat-ink, var(--ink, #0b1c30));
  min-height: 96px;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.vo-block-catalog-cat-mega:hover {
  transform: translateY(-2px);
  border-color: var(--vo-cat-accent, var(--brand-primary, #0b1c30));
}
.vo-block-catalog-cat-mega.is-active {
  background: var(--vo-cat-accent, var(--brand-primary, #0b1c30));
  color: var(--vo-cat-button-text, var(--brand-button-text, #ffffff));
  border-color: var(--vo-cat-accent, var(--brand-primary, #0b1c30));
}
.vo-block-catalog-cat-mega-label {
  font-family: var(--vo-cat-heading-font, "Hanken Grotesk", Inter, sans-serif);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.vo-block-catalog-cat-mega-count {
  font-family: "Space Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  opacity: 0.7;
  text-transform: uppercase;
}
.vo-block-catalog-cat-mega.is-active .vo-block-catalog-cat-mega-count {
  opacity: 1;
}
/* mega-row sits above the grid, no sidebar slot needed */
.vo-block-catalog-layout-pos-left:has(.vo-block-catalog-cats-mega-row),
.vo-block-catalog-layout-pos-right:has(.vo-block-catalog-cats-mega-row) {
  grid-template-columns: 1fr;
}

/* Position-aware layout grid for sidebar variants. */
.vo-block-catalog-layout-pos-right.has-sidebar {
  grid-template-columns: minmax(0, 1fr) 200px;
}
@media (max-width: 880px) {
  .vo-block-catalog-cats-pos-left .vo-block-catalog-cats,
  .vo-block-catalog-cats-pos-right .vo-block-catalog-cats {
    flex-direction: row;
    flex-wrap: wrap;
    border: none;
    padding: 0;
    position: static;
    margin-bottom: 12px;
  }
  .vo-block-catalog-cats-pos-left .vo-block-catalog-cats-list .vo-block-catalog-cat,
  .vo-block-catalog-cats-pos-right .vo-block-catalog-cats-list .vo-block-catalog-cat {
    border-left: none;
    border-right: none;
    border-radius: 999px;
    border: 1px solid var(--vo-cat-divider, rgba(15, 23, 42, 0.1));
    padding: 6px 12px;
    margin: 0;
  }
  .vo-block-catalog-cats-pos-left .vo-block-catalog-cats-list .vo-block-catalog-cat.is-active,
  .vo-block-catalog-cats-pos-right .vo-block-catalog-cats-list .vo-block-catalog-cat.is-active {
    background: var(--vo-cat-accent, var(--brand-primary, #0b1c30));
    color: var(--vo-cat-button-text, var(--brand-button-text, #ffffff));
    border-color: var(--vo-cat-accent, var(--brand-primary, #0b1c30));
  }
}
.vo-block-catalog-results {
  font-size: 13px;
  color: var(--vo-cat-muted, var(--muted, #6b7280));
  margin: 0 0 12px;
  padding: 0;
}
.vo-block-catalog-main {
  min-width: 0;
}
.vo-block-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.vo-block-catalog-card {
  display: flex;
  flex-direction: column;
  background: var(--vo-cat-card-bg, #ffffff);
  border: var(--vo-cat-card-border, 1px solid rgba(15, 23, 42, 0.06));
  border-radius: var(--vo-cat-card-radius, 14px);
  box-shadow: var(--vo-cat-card-shadow, none);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.vo-block-catalog-card,
button.vo-block-catalog-row,
button.vo-block-catalog-feature { padding: 0; }
.vo-block-catalog-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.vo-block-catalog-card-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--vo-cat-pill-bg, rgba(15, 23, 42, 0.06));
  border: var(--vo-cat-pill-border, 1px solid rgba(15, 23, 42, 0.08));
  color: var(--vo-cat-muted, #6b7280);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.vo-block-catalog-card-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* margin-top kept for cards without the footer row; inside a foot row the
     foot's own margin-top takes over and we reset this to 0. */
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--vo-cat-accent, var(--brand-primary, #0b1c30));
  color: var(--vo-cat-button-text, var(--brand-button-text, #ffffff));
  font-family: var(--vo-cat-heading-font, inherit);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  align-self: flex-start;
  transition: transform 0.15s ease;
}
.vo-block-catalog-card-foot .vo-block-catalog-card-add {
  margin-top: 0;
}
.vo-block-catalog-card.is-orderable:hover .vo-block-catalog-card-add,
.vo-block-catalog-row.is-orderable:hover .vo-block-catalog-card-add,
.vo-block-catalog-feature.is-orderable:hover .vo-block-catalog-card-add {
  transform: translateY(-1px);
}
.vo-block-catalog-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--vo-cat-card-shadow-hover, 0 18px 36px rgba(15, 23, 42, 0.08));
}
.vo-block-catalog-card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: color-mix(in srgb, var(--vo-cat-ink, #0b1c30) 4%, transparent);
  display: block;
}
.vo-block-catalog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vo-block-catalog-card-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vo-cat-heading-font, inherit);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--vo-cat-muted, #6b7280) 60%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--vo-cat-ink, #0b1c30) 3%, transparent), color-mix(in srgb, var(--vo-cat-ink, #0b1c30) 7%, transparent));
}
.vo-block-catalog-card-body {
  padding: var(--vo-cat-card-pad, 16px 18px 18px);
  display: grid;
  gap: 6px;
}
.vo-block-catalog-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.vo-block-catalog-card-name {
  font-family: var(--vo-cat-heading-font, inherit);
  font-size: var(--vo-cat-name-size, 15px);
  font-weight: var(--vo-cat-name-weight, 600);
  color: var(--vo-cat-ink, var(--ink, #0b1c30));
  letter-spacing: var(--vo-cat-letter-spacing, normal);
  line-height: 1.3;
}
.vo-block-catalog-card-price {
  font-family: var(--vo-cat-heading-font, inherit);
  font-size: var(--vo-cat-name-size, 15px);
  font-weight: var(--vo-cat-name-weight, 600);
  color: var(--vo-cat-ink, var(--ink, #0b1c30));
}
.vo-block-catalog-card-desc {
  color: var(--vo-cat-muted, var(--muted, #6b7280));
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vo-block-catalog-empty {
  padding: 60px 20px;
  text-align: center;
  background: rgba(15, 23, 42, 0.03);
  border: 1px dashed rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  color: var(--muted, #6b7280);
}
.vo-block-catalog-empty p {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #0b1c30);
}
.vo-block-catalog-empty-sub {
  margin-top: 6px !important;
  font-weight: 400 !important;
  color: var(--muted, #6b7280) !important;
  font-size: 13px !important;
}
.vo-block-catalog-footer {
  display: flex;
  justify-content: center;
}
.vo-block-catalog-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--vo-cat-card-radius, 12px);
  background: var(--vo-cat-accent, var(--brand-primary, #0b1c30));
  color: var(--vo-cat-button-text, var(--brand-button-text, #ffffff));
  font-family: var(--vo-cat-heading-font, inherit);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.vo-block-catalog-cta:hover {
  transform: translateY(-1px);
}
.vo-block-catalog-grid-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.vo-block-catalog-grid-compact .vo-block-catalog-card-body { padding: 12px 14px 14px; }
.vo-block-catalog-grid-compact .vo-block-catalog-card-name,
.vo-block-catalog-grid-compact .vo-block-catalog-card-price { font-size: 14px; }
.vo-block-catalog-grid-compact .vo-block-catalog-card-desc { font-size: 12px; }

/* List layout */
.vo-block-catalog-list {
  display: grid;
  gap: 0;
  border: var(--vo-cat-card-border, 1px solid rgba(15, 23, 42, 0.06));
  border-radius: var(--vo-cat-card-radius, 14px);
  background: var(--vo-cat-card-bg, #ffffff);
  box-shadow: var(--vo-cat-card-shadow, none);
  overflow: hidden;
}
.vo-block-catalog-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--vo-cat-divider, rgba(15, 23, 42, 0.05));
  transition: background 0.15s ease;
}
.vo-block-catalog-row:first-child { border-top: none; }
.vo-block-catalog-row:hover {
  background: color-mix(in srgb, var(--vo-cat-accent, #0b1c30) 6%, transparent);
}
.vo-block-catalog-row-media {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.04);
  flex: 0 0 auto;
}
.vo-block-catalog-row-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.vo-block-catalog-row-fallback {
  display: grid;
  place-items: center;
  font-family: var(--vo-cat-heading-font, inherit);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--vo-cat-muted, #6b7280) 65%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--vo-cat-ink, #0b1c30) 4%, transparent), color-mix(in srgb, var(--vo-cat-ink, #0b1c30) 9%, transparent));
}
.vo-block-catalog-row-body { min-width: 0; }
.vo-block-catalog-row-name {
  display: block;
  font-family: var(--vo-cat-heading-font, inherit);
  font-size: var(--vo-cat-name-size, 15px);
  font-weight: var(--vo-cat-name-weight, 600);
  color: var(--vo-cat-ink, var(--ink, #0b1c30));
}
.vo-block-catalog-row-desc {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--vo-cat-muted, var(--muted, #6b7280));
  font-size: 13px;
  margin-top: 2px;
}
.vo-block-catalog-row-price {
  font-family: var(--vo-cat-heading-font, inherit);
  font-size: var(--vo-cat-name-size, 15px);
  font-weight: 700;
  color: var(--vo-cat-ink, var(--ink, #0b1c30));
  white-space: nowrap;
}

/* Catalogs without usable photography read as a compact editorial menu,
   rather than filling the page with large initial-letter placeholders. */
.vo-block-catalog-text-first {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 64px);
  border: 0;
  border-top: 1px solid var(--vo-cat-divider, rgba(15, 23, 42, 0.12));
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.vo-block-catalog-text-first-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 701px) and (max-width: 1000px) {
  .vo-block-catalog-text-first-three { grid-template-columns: 1fr; }
}
.vo-block-catalog-text-first .vo-block-catalog-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  padding: 25px 0;
  border-top: 0;
  border-bottom: 1px solid var(--vo-cat-divider, rgba(15, 23, 42, 0.12));
  background: transparent;
}
.vo-block-catalog-text-first .vo-block-catalog-row-media { display: none; }
.vo-block-catalog-text-first .vo-block-catalog-row-name {
  font-family: var(--brand-heading-font, var(--vo-cat-heading-font, Georgia, serif));
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.15;
  letter-spacing: -.025em;
}
.vo-block-catalog-text-first .vo-block-catalog-row-desc {
  margin-top: 8px;
  line-height: 1.45;
  -webkit-line-clamp: 2;
}
.vo-block-catalog-text-first .vo-block-catalog-row-price {
  font-family: var(--brand-body-font, Arial, sans-serif);
  font-size: 13px;
  font-weight: 700;
}
@media (max-width: 700px) {
  .vo-block-catalog-text-first, .vo-block-catalog-text-first-three { grid-template-columns: 1fr; }
  .vo-block-catalog-text-first .vo-block-catalog-row { padding: 20px 0; }
}

/* Magazine theme */
.vo-block-catalog-magazine {
  display: grid;
  gap: 20px;
}
.vo-block-catalog-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  background: var(--vo-cat-card-bg, #ffffff);
  border: var(--vo-cat-card-border, 1px solid rgba(15, 23, 42, 0.06));
  border-radius: calc(var(--vo-cat-card-radius, 18px) + 4px);
  padding: 14px;
  box-shadow: var(--vo-cat-card-shadow, none);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.vo-block-catalog-feature:hover {
  transform: translateY(-2px);
  box-shadow: var(--vo-cat-card-shadow-hover, 0 18px 36px rgba(15, 23, 42, 0.08));
}
.vo-block-catalog-feature img,
.vo-block-catalog-feature-fallback {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.vo-block-catalog-feature-fallback {
  display: grid;
  place-items: center;
  font-family: var(--vo-cat-heading-font, inherit);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--vo-cat-muted, #6b7280) 55%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--vo-cat-ink, #0b1c30) 3%, transparent), color-mix(in srgb, var(--vo-cat-ink, #0b1c30) 7%, transparent));
}
.vo-block-catalog-feature-body { display: grid; gap: 8px; padding: 12px 8px; }
.vo-block-catalog-feature-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vo-accent-text, var(--vo-cat-accent, var(--brand-primary, #0b1c30)));
}
.vo-block-catalog-feature-name {
  font-family: var(--vo-cat-heading-font, "Hanken Grotesk", Inter, sans-serif);
  font-weight: var(--vo-cat-heading-weight, 700);
  font-size: clamp(22px, 2.5vw, 32px);
  line-height: 1.1;
  letter-spacing: var(--vo-cat-letter-spacing, -0.01em);
  color: var(--vo-cat-ink, var(--ink, #0b1c30));
}
.vo-block-catalog-feature-desc {
  color: var(--vo-cat-muted, var(--muted, #6b7280));
  font-size: 14px;
  line-height: 1.55;
}
.vo-block-catalog-feature-price {
  font-family: var(--vo-cat-heading-font, "Hanken Grotesk", Inter, sans-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--vo-cat-ink, var(--ink, #0b1c30));
}
.vo-block-catalog-magazine-rest {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 720px) {
  .vo-block-catalog-feature { grid-template-columns: 1fr; }
  .vo-block-catalog-magazine-rest { grid-template-columns: 1fr; }
  .vo-block-catalog-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vo-block-catalog-row { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 12px 14px; }
  .vo-block-catalog-row-media { width: 44px; height: 44px; }
}

@media (max-width: 880px) {
  .vo-block-catalog-layout.has-sidebar {
    grid-template-columns: 1fr;
  }
  .vo-block-catalog-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    border-left: none;
    padding-left: 0;
    position: static;
    gap: 6px;
  }
  .vo-block-catalog-cat {
    padding: 6px 12px;
    margin-left: 0;
    border-left: none;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.1);
  }
  .vo-block-catalog-cat.is-active {
    background: var(--brand-primary, #0b1c30);
    color: var(--brand-button-text, #ffffff);
    border-color: var(--brand-primary, #0b1c30);
  }
  .vo-block-catalog-grid {
    grid-template-columns: 1fr;
  }
}

/* Products without photos still use the merchant's selected layout. Give
   them a composed text card rather than a large initial-letter placeholder. */
.vo-block-catalog-grid .vo-block-catalog-card.is-text-only,
.vo-block-catalog-magazine-rest .vo-block-catalog-card.is-text-only {
  min-height: 180px;
  justify-content: flex-end;
  border-top: 2px solid var(--vo-cat-accent, var(--brand-primary, #0b1c30));
}
.vo-block-catalog-grid .vo-block-catalog-card.is-text-only .vo-block-catalog-card-body,
.vo-block-catalog-magazine-rest .vo-block-catalog-card.is-text-only .vo-block-catalog-card-body {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(20px, 2.4vw, 30px);
}
.vo-block-catalog-grid-compact .vo-block-catalog-card.is-text-only { min-height: 150px; }
.vo-block-catalog-grid-compact .vo-block-catalog-card.is-text-only .vo-block-catalog-card-body { padding: 18px; }
.vo-block-catalog-feature.is-text-only {
  grid-template-columns: 1fr;
  min-height: 220px;
  border-top: 2px solid var(--vo-cat-accent, var(--brand-primary, #0b1c30));
}
.vo-block-catalog-feature.is-text-only .vo-block-catalog-feature-body {
  padding: clamp(20px, 3vw, 36px);
  align-content: center;
}
.vo-block-catalog-card-style-lookbook .vo-block-catalog-card.is-text-only {
  aspect-ratio: auto;
  min-height: 190px;
  color: var(--vo-cat-ink, var(--ink, #0b1c30));
}
.vo-block-catalog-card-style-lookbook .vo-block-catalog-card.is-text-only .vo-block-catalog-card-body {
  background: none;
}
.vo-block-catalog-card-style-lookbook .vo-block-catalog-card.is-text-only :is(.vo-block-catalog-card-name, .vo-block-catalog-card-price) {
  color: var(--vo-cat-ink, var(--ink, #0b1c30));
  text-shadow: none;
}
.dark-mode .vo-block-catalog-card.is-text-only,
.dark-mode .vo-block-catalog-feature.is-text-only {
  background-image: radial-gradient(90% 100% at 0% 0%, color-mix(in srgb, var(--vo-cat-accent, #a5b4fc) 10%, transparent), transparent 75%) !important;
}
.vo-block-catalog-card-media img,
.vo-block-catalog-feature img {
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vo-block-catalog-card:hover .vo-block-catalog-card-media img,
.vo-block-catalog-feature:hover img {
  transform: scale(1.04);
}
.vo-block-catalog-feature { overflow: hidden; }
.vo-block-catalog-heading { text-wrap: balance; }
.vo-block-catalog-sub { text-wrap: pretty; }
.vo-block-catalog-card-price,
.vo-block-catalog-row-price { font-variant-numeric: tabular-nums; }
.vo-block-catalog-search:focus-within {
  border-color: color-mix(in srgb, var(--vo-cat-accent, var(--brand-primary, #0b1c30)) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--vo-cat-accent, var(--brand-primary, #0b1c30)) 12%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .vo-block-catalog-card-media img,
.vo-block-catalog-feature img { transition: none; }
  .vo-block-catalog-card:hover .vo-block-catalog-card-media img,
.vo-block-catalog-feature:hover img { transform: none; }
}
:is(.vo-block-catalog-theme-noir, .vo-block-catalog-theme-gallery, .vo-block-catalog-theme-market).vo-block-catalog {
  padding: clamp(40px, 6vw, 88px) clamp(20px, 4vw, 56px) clamp(40px, 5vw, 72px);
  border-radius: 0;
  gap: 32px;
}
.vo-builder-page .vo-block-slot-full > :is(.vo-block-catalog-theme-noir, .vo-block-catalog-theme-gallery, .vo-block-catalog-theme-market).vo-block-catalog {
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(24px, calc(50vw - 600px));
  padding-right: max(24px, calc(50vw - 600px));
}
:is(.vo-block-catalog-theme-noir, .vo-block-catalog-theme-gallery, .vo-block-catalog-theme-market) .vo-block-catalog-hero {
  background: none;
  padding: 8px 0 4px;
  gap: 16px;
}
:is(.vo-block-catalog-theme-noir, .vo-block-catalog-theme-gallery, .vo-block-catalog-theme-market) .vo-block-catalog-heading {
  font-family: var(--vo-cat-heading-font);
  font-weight: var(--vo-cat-heading-weight);
  line-height: 1.02;
}
:is(.vo-block-catalog-theme-noir, .vo-block-catalog-theme-gallery, .vo-block-catalog-theme-market) .vo-block-catalog-sub {
  font-size: 16px;
  max-width: 34rem;
}
:is(.vo-block-catalog-theme-noir, .vo-block-catalog-theme-gallery, .vo-block-catalog-theme-market) .vo-block-catalog-results {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vo-cat-muted);
}

/* ---------- Noir ---------- */
.vo-block-catalog-theme-noir.vo-block-catalog {
  color-scheme: dark;
  background:
    /* The candlelight glow rises from inside the section, not from its edge. */
    linear-gradient(to bottom, var(--vo-cat-bg, #110f0d) 0, transparent 90px),
    radial-gradient(70% 45% at 50% 0%, rgba(201, 162, 102, 0.10), transparent 70%),
    var(--vo-cat-bg, #110f0d);
}
.vo-block-catalog-theme-noir .vo-block-catalog-hero::before {
  content: "";
  width: 56px;
  height: 1px;
  background: var(--vo-cat-accent);
  order: -1;
}
.vo-block-catalog-theme-noir .vo-block-catalog-heading {
  font-size: clamp(44px, 6vw, 76px);
  letter-spacing: -0.01em;
}
.vo-block-catalog-theme-noir .vo-block-catalog-sub {
  font-family: var(--vo-cat-heading-font);
  font-style: italic;
  font-size: 20px;
  color: var(--vo-cat-muted);
}
.vo-block-catalog-theme-noir .vo-block-catalog-search {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(201, 162, 102, 0.4);
  border-radius: 0;
  box-shadow: none;
  color: var(--vo-cat-ink);
}
.vo-block-catalog-theme-noir .vo-block-catalog-search:focus-within {
  border-color: var(--vo-cat-accent);
  box-shadow: 0 1px 0 var(--vo-cat-accent);
}
.vo-block-catalog-theme-noir .vo-block-catalog-search input { color: var(--vo-cat-ink); }
.vo-block-catalog-theme-noir .vo-block-catalog-search input::placeholder { color: var(--vo-cat-muted); }
.vo-block-catalog-theme-noir .vo-block-catalog-notice {
  background: transparent;
  border: 0;
  color: var(--vo-cat-muted);
  font-family: var(--vo-cat-heading-font);
  font-style: italic;
  font-size: 17px;
}
.vo-block-catalog-theme-noir .vo-block-catalog-cat {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 9px 16px;
  color: var(--vo-cat-muted);
}
.vo-block-catalog-theme-noir .vo-block-catalog-cat:hover { color: var(--vo-cat-ink); }
.vo-block-catalog-theme-noir .vo-block-catalog-cats-pos-top .vo-block-catalog-cats-underline,
.vo-block-catalog-theme-noir.vo-block-catalog-cats-pos-top .vo-block-catalog-cats-underline { gap: 6px; }
.vo-block-catalog-theme-noir :is(.vo-block-catalog-card, .vo-block-catalog-feature) { border-radius: 2px; }
.vo-block-catalog-theme-noir .vo-block-catalog-card-style-editorial .vo-block-catalog-card-body {
  padding: 18px 20px 22px;
}
.vo-block-catalog-theme-noir .vo-block-catalog-card-name {
  font-family: var(--vo-cat-heading-font) !important;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
}
.vo-block-catalog-theme-noir :is(.vo-block-catalog-card-price, .vo-block-catalog-feature-price) {
  font-family: var(--vo-cat-body-font) !important;
  color: var(--vo-cat-accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.vo-block-catalog-theme-noir :is(.vo-block-catalog-card-desc, .vo-block-catalog-feature-desc) {
  font-family: var(--vo-cat-heading-font) !important;
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  color: var(--vo-cat-muted);
}
.vo-block-catalog-theme-noir .vo-block-catalog-card-add,
.vo-block-catalog-theme-noir .vo-block-catalog-card-style-editorial .vo-block-catalog-card-add {
  margin-top: 10px;
  padding: 0 0 3px;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--vo-cat-accent);
  color: var(--vo-cat-accent);
  font-family: var(--vo-cat-body-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}
.vo-block-catalog-theme-noir .vo-block-catalog-feature {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding: 0;
  border-radius: 2px;
}
.vo-block-catalog-theme-noir .vo-block-catalog-feature img { border-radius: 0; aspect-ratio: 16 / 11; }
.vo-block-catalog-theme-noir .vo-block-catalog-feature-body { padding: 32px 36px 32px 0; gap: 12px; }
.vo-block-catalog-theme-noir .vo-block-catalog-feature-body .vo-block-catalog-card-add { justify-self: start; }
.vo-block-catalog-theme-noir .vo-block-catalog-feature-eyebrow { letter-spacing: 0.24em; color: var(--vo-cat-accent); }
.vo-block-catalog-theme-noir .vo-block-catalog-feature-name { font-size: clamp(34px, 3.6vw, 52px); font-weight: 500; line-height: 1; }
.vo-block-catalog-theme-noir .vo-block-catalog-magazine-rest { gap: 20px; }
.vo-block-catalog-theme-noir .vo-block-catalog-card.is-text-only,
.vo-block-catalog-theme-noir .vo-block-catalog-feature.is-text-only {
  border-top: 1px solid var(--vo-cat-accent);
  background-image: radial-gradient(90% 90% at 0% 0%, rgba(201, 162, 102, 0.10), transparent 70%) !important;
}
.vo-block-catalog-theme-noir .vo-block-catalog-card-style-editorial .vo-block-catalog-card.is-text-only { min-height: 220px; }
.vo-block-catalog-theme-noir .vo-block-catalog-card-style-editorial .vo-block-catalog-card.is-text-only .vo-block-catalog-card-body { padding: 28px 24px 26px; }
.vo-block-catalog-theme-noir .vo-block-catalog-cta {
  background: transparent;
  color: var(--vo-cat-accent);
  border: 1px solid var(--vo-cat-accent);
  border-radius: 0;
  font-family: var(--vo-cat-body-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 16px 30px;
}
.vo-block-catalog-theme-noir .vo-block-catalog-cta:hover { background: var(--vo-cat-accent); color: var(--vo-cat-button-text); }
.vo-block-catalog-theme-noir .vo-block-catalog-card-media { background: #0c0b0a; }
.vo-block-catalog-theme-noir .vo-block-catalog-card-fallback {
  background: radial-gradient(80% 80% at 30% 20%, rgba(201, 162, 102, 0.16), transparent 70%), #151210;
  color: rgba(201, 162, 102, 0.6);
  font-family: var(--vo-cat-heading-font);
  font-weight: 500;
  font-size: 3rem;
}

/* ---------- Gallery ---------- */
.vo-block-catalog-theme-gallery .vo-block-catalog-heading {
  font-size: clamp(42px, 5.4vw, 68px);
  letter-spacing: -0.02em;
}
.vo-block-catalog-theme-gallery .vo-block-catalog-sub { font-size: 17px; line-height: 1.6; }
.vo-block-catalog-theme-gallery .vo-block-catalog-search {
  background: var(--brand-search-bg-override, #fffdf9);
  border: 1px solid rgba(38, 34, 29, 0.14);
  border-radius: 0;
  box-shadow: none;
}
.vo-block-catalog-theme-gallery .vo-block-catalog-search { padding: 14px 18px; width: min(480px, 100%); }
.vo-block-catalog-theme-gallery .vo-block-catalog-cats-image-tiles {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.vo-block-catalog-theme-gallery .vo-block-catalog-cat-tile {
  aspect-ratio: 4 / 5;
  border-radius: 0;
  border: 0;
  padding: 20px;
}
.vo-block-catalog-theme-gallery .vo-block-catalog-cat-tile.is-text-only { background-color: #ebe3d5; }
.vo-block-catalog-theme-gallery .vo-block-catalog-cat-tile-all {
  background: var(--vo-cat-ink, #26221d);
  color: #fbf8f2;
}
.vo-block-catalog-theme-gallery .vo-block-catalog-cat-tile-label {
  font-family: var(--vo-cat-heading-font);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.vo-block-catalog-theme-gallery .vo-block-catalog-cat-tile-count { letter-spacing: 0.18em; font-size: 0.66rem; }
.vo-block-catalog-theme-gallery .vo-block-catalog-cat-tile.is-active {
  outline: 1px solid var(--vo-cat-ink, #26221d);
  outline-offset: 4px;
}
.vo-block-catalog-theme-gallery .vo-block-catalog-cat { font-size: 14px; }
.vo-block-catalog-theme-gallery .vo-block-catalog-card-style-editorial .vo-block-catalog-card {
  background: var(--vo-card-bg-override, transparent) !important;
  border: 0;
  box-shadow: none;
}
.vo-block-catalog-theme-gallery .vo-block-catalog-card-style-editorial.vo-block-catalog-grid { gap: 56px 28px; }
.vo-block-catalog-theme-gallery .vo-block-catalog-card-media { background: #ece5d8; }
.vo-block-catalog-theme-gallery .vo-block-catalog-card-style-editorial .vo-block-catalog-card-body { padding: 6px 0 0; gap: 6px; }
.vo-block-catalog-theme-gallery .vo-block-catalog-card-name {
  font-family: var(--vo-cat-heading-font) !important;
  font-size: 20px;
  font-weight: 500;
}
.vo-block-catalog-theme-gallery .vo-block-catalog-card-price {
  font-family: var(--vo-cat-body-font) !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--vo-cat-muted);
}
.vo-block-catalog-theme-gallery .vo-block-catalog-card-desc {
  font-family: var(--vo-cat-body-font) !important;
  font-style: normal;
  font-size: 13.5px;
  color: var(--vo-cat-muted);
}
.vo-block-catalog-theme-gallery .vo-block-catalog-card-style-editorial .vo-block-catalog-card-add {
  font-family: var(--vo-cat-body-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.vo-block-catalog-theme-gallery .vo-block-catalog-card-style-editorial .vo-block-catalog-card.is-text-only {
  min-height: 0;
  aspect-ratio: 4 / 5;
  justify-content: flex-end;
  border-top: 0;
  background: var(--vo-card-bg-override, #efe8dc) !important;
}
.vo-block-catalog-theme-gallery .vo-block-catalog-card-style-editorial .vo-block-catalog-card.is-text-only .vo-block-catalog-card-body { padding: 24px; }
.vo-block-catalog-theme-gallery .vo-block-catalog-cta {
  background: transparent;
  color: var(--vo-cat-ink);
  border: 1px solid var(--vo-cat-ink);
  border-radius: 0;
  font-family: var(--vo-cat-body-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16px 32px;
}
.vo-block-catalog-theme-gallery .vo-block-catalog-cta:hover { background: var(--vo-cat-ink); color: #fbf8f2; }

/* ---------- Market ---------- */
.vo-block-catalog-theme-market .vo-block-catalog-heading {
  font-size: clamp(40px, 5.4vw, 68px);
  letter-spacing: -0.045em;
  line-height: 0.96;
}
.vo-block-catalog-theme-market .vo-block-catalog-search {
  border: 1px solid rgba(31, 26, 20, 0.1);
  box-shadow: 0 1px 2px rgba(31, 26, 20, 0.04), 0 10px 30px -18px rgba(31, 26, 20, 0.35);
}
.vo-block-catalog-theme-market .vo-block-catalog-search { padding: 14px 20px; width: min(520px, 100%); }
.vo-block-catalog-theme-market .vo-block-catalog-cats-mega-row {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.vo-block-catalog-theme-market .vo-block-catalog-cat-mega {
  min-height: 104px;
  padding: 18px 20px;
  border-radius: 18px;
  border-color: rgba(31, 26, 20, 0.08);
  box-shadow: 0 1px 2px rgba(31, 26, 20, 0.04);
}
.vo-block-catalog-theme-market .vo-block-catalog-cat-mega-label { font-size: 1.15rem; letter-spacing: -0.02em; }
.vo-block-catalog-theme-market .vo-block-catalog-cat-mega-count {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(31, 26, 20, 0.06);
  font-family: var(--vo-cat-body-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 1;
}
.vo-block-catalog-theme-market .vo-block-catalog-cat-mega.is-active .vo-block-catalog-cat-mega-count {
  background: rgba(255, 255, 255, 0.22);
}
.vo-block-catalog-theme-market .vo-block-catalog-card { padding: 8px; }
.vo-block-catalog-theme-market .vo-block-catalog-card-media {
  border-radius: 12px;
  aspect-ratio: 5 / 4;
}
.vo-block-catalog-theme-market .vo-block-catalog-card-body { padding: 14px 10px 8px; }
.vo-block-catalog-theme-market .vo-block-catalog-card-name { font-size: 16.5px; letter-spacing: -0.02em; }
.vo-block-catalog-theme-market .vo-block-catalog-card-price {
  color: var(--vo-cat-accent);
  font-weight: 700;
}
.vo-block-catalog-theme-market .vo-block-catalog-card-add {
  padding: 9px 16px;
  font-family: var(--vo-cat-body-font);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
}
.vo-block-catalog-theme-market .vo-block-catalog-card.is-text-only {
  border-top: 0;
  background-image: linear-gradient(160deg, color-mix(in srgb, var(--vo-cat-accent) 9%, transparent), transparent 55%) !important;
}
.vo-block-catalog-theme-market .vo-block-catalog-cta { border-radius: 999px; padding: 15px 30px; }
@media (max-width: 720px) {
  :is(.vo-block-catalog-theme-noir, .vo-block-catalog-theme-gallery, .vo-block-catalog-theme-market).vo-block-catalog { gap: 24px; }
  .vo-block-catalog-theme-noir .vo-block-catalog-feature { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vo-block-catalog-theme-noir .vo-block-catalog-feature img { width: 100%; }
  .vo-block-catalog-theme-noir .vo-block-catalog-feature-body { padding: 4px 20px 24px; }
  .vo-block-catalog-theme-noir .vo-block-catalog-card-style-editorial .vo-block-catalog-card.is-text-only { min-height: 0; }
  .vo-block-catalog-theme-noir .vo-block-catalog-card-style-editorial .vo-block-catalog-card.is-text-only .vo-block-catalog-card-body { padding: 22px 20px; }
  .vo-block-catalog-theme-gallery .vo-block-catalog-cats-image-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vo-block-catalog-theme-market .vo-block-catalog-cats-mega-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   PER-TENANT CARD OVERRIDES (Design panel)
   ------------------------------------------------------------
   When the merchant sets a custom card shade or outline color
   from the Design panel, those values get injected on body as
   --vo-card-bg-override and --vo-card-border-override. We
   apply them as the LAST rules in the file with !important so
   they trump theme tokens and the dark-mode flip block above.
   The default behavior (no overrides set) is unaffected: the
   var() resolves to the theme's --vo-cat-card-bg / border.
   ============================================================ */
.vo-block-catalog-card,
.vo-block-catalog-row,
.vo-block-catalog-feature {
  background: var(--vo-card-bg-override, var(--vo-cat-card-bg, #ffffff)) !important;
}
/* Border overrides only apply when a merchant has set one. (A generic
   border-color rule with a currentColor fallback used to repaint every theme
   border in the text colour, making hairlines read as heavy ink outlines.)
   When the override is set, force border-color regardless of the shorthand. */
[style*="--vo-card-border-override"] .vo-block-catalog-card,
[style*="--vo-card-border-override"] .vo-block-catalog-row,
[style*="--vo-card-border-override"] .vo-block-catalog-feature {
  border-color: var(--vo-card-border-override) !important;
}
[style*="--vo-card-text-override"] .vo-block-catalog-card,
[style*="--vo-card-text-override"] .vo-block-catalog-row,
[style*="--vo-card-text-override"] .vo-block-catalog-feature,
[style*="--vo-card-text-override"] .vo-block-catalog-card *:not(button):not(a):not(.vo-block-catalog-card-add),
[style*="--vo-card-text-override"] .vo-block-catalog-row *:not(button):not(a):not(.vo-block-catalog-card-add),
[style*="--vo-card-text-override"] .vo-block-catalog-feature *:not(button):not(a):not(.vo-block-catalog-card-add) {
  color: var(--vo-card-text-override) !important;
}
/* Card font override — applies the chosen font stack to the card content. */
[style*="--vo-card-font-override"] .vo-block-catalog-card,
[style*="--vo-card-font-override"] .vo-block-catalog-row,
[style*="--vo-card-font-override"] .vo-block-catalog-feature {
  font-family: var(--vo-card-font-override) !important;
}
[style*="--vo-card-font-override"] .vo-block-catalog-card *,
[style*="--vo-card-font-override"] .vo-block-catalog-row *,
[style*="--vo-card-font-override"] .vo-block-catalog-feature * {
  font-family: inherit !important;
}

/* ============================================================
   Phase 3 / Plan 03-07 - v2 section-library per-variant CSS
   ------------------------------------------------------------
   Hand-coded per-variant rules for the 8 new v2 block kinds + their
   variants (LAYOUT-01..04, LAYOUT-06). Pinned to:
     - UI-SPEC Per-variant CSS rules (additive; no overrides of existing
       class names; class naming .vo-block-{kind} + .vo-block-{kind}-{variant})
     - UI-SPEC Renderer Notes - 2px hairline gap is a CSS literal (NOT a
       declared spacing token) on the .vo-collage-grid inside lookbook-default
       and drop-grid-default ONLY
     - UI-SPEC Accessibility Contract - 44px touch target on interactive
       elements; focus ring outline 3px solid var(--vo-color-focus); outline-offset 2px
     - Colors flow via CSS custom properties - var(--vo-cat-*) from the v1
       theme bundle and var(--vo-color-*) from the Plan 03-06 W3C DTF
       envelope (populated at request time). NO hard-coded hex values.
   Existing CSS above byte-preserved per KEEP-LIST.
   ============================================================ */

/* lookbook ----------------------------------------------------- */
.vo-block-lookbook {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 32px 0;
}
.vo-block-lookbook-season {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vo-color-ink-subtle, var(--vo-cat-muted));
}
.vo-block-lookbook-headline {
  font-family: var(--vo-cat-heading-font);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: var(--vo-cat-heading-weight, 700);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--vo-color-ink, var(--vo-cat-ink));
}
.vo-block-lookbook-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 20px;
  background: var(--vo-color-primary, var(--vo-cat-accent));
  color: var(--vo-color-on-primary, var(--vo-cat-button-text));
  text-decoration: none;
  font-weight: 600;
}
.vo-block-lookbook-cta:focus-visible {
  outline: 3px solid var(--vo-color-focus, var(--vo-cat-accent));
  outline-offset: 2px;
}
/* lookbook-default: 3-up grid with 2px hairline gap (UI-SPEC Renderer Notes) */
.vo-block-lookbook-default .vo-collage-grid.vo-block-lookbook-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.vo-block-lookbook-tile {
  position: relative;
  background: var(--vo-color-surface-subtle, rgba(0,0,0,0.04));
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.vo-block-lookbook-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vo-block-lookbook-tile-placeholder {
  width: 100%;
  height: 100%;
  background: var(--vo-color-surface-subtle, rgba(0,0,0,0.04));
}
.vo-block-lookbook-tile-label {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vo-color-on-primary, #fff);
  background: rgba(0,0,0,0.55);
  padding: 4px 8px;
}
/* lookbook-editorial: single hero + bottom copy block */
.vo-block-lookbook-editorial .vo-block-lookbook-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--vo-color-surface-subtle, rgba(0,0,0,0.04));
}
.vo-block-lookbook-editorial .vo-block-lookbook-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vo-block-lookbook-editorial .vo-block-lookbook-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 0 0;
}

/* drop-grid ---------------------------------------------------- */
.vo-block-drop-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 32px 0;
}
.vo-block-drop-grid-headline {
  font-family: var(--vo-cat-heading-font);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: var(--vo-cat-heading-weight, 700);
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--vo-color-ink, var(--vo-cat-ink));
}
/* drop-grid-default: 4-up tight grid with 2px hairline gap */
.vo-block-drop-grid-default .vo-collage-grid.vo-block-drop-grid-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}
.vo-block-drop-grid-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--vo-color-surface-subtle, rgba(0,0,0,0.04));
}
.vo-block-drop-grid-tile-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.vo-block-drop-grid-tile-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--vo-color-surface-subtle, rgba(0,0,0,0.04));
}
.vo-block-drop-grid-tile-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px 12px;
}
.vo-block-drop-grid-tile-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vo-color-accent, var(--vo-cat-accent));
}
.vo-block-drop-grid-tile-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--vo-color-ink, var(--vo-cat-ink));
}
.vo-block-drop-grid-tile-price {
  font-size: 13px;
  color: var(--vo-color-ink-subtle, var(--vo-cat-muted));
}
.vo-block-drop-grid-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 20px;
  background: var(--vo-color-primary, var(--vo-cat-accent));
  color: var(--vo-color-on-primary, var(--vo-cat-button-text));
  text-decoration: none;
  font-weight: 600;
}
.vo-block-drop-grid-cta:focus-visible {
  outline: 3px solid var(--vo-color-focus, var(--vo-cat-accent));
  outline-offset: 2px;
}
/* drop-grid-asymmetric: 1 hero + 3 stacked side column */
.vo-block-drop-grid-asymmetric .vo-block-drop-grid-asym-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 16px;
}
.vo-block-drop-grid-asymmetric .vo-block-drop-grid-asym-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vo-block-drop-grid-asymmetric .vo-block-drop-grid-asym-hero .vo-block-drop-grid-tile-img,
.vo-block-drop-grid-asymmetric .vo-block-drop-grid-asym-hero .vo-block-drop-grid-tile-placeholder {
  aspect-ratio: 4 / 5;
}

/* manifesto ---------------------------------------------------- */
.vo-block-manifesto {
  margin: 48px 0;
}
.vo-block-manifesto-quote {
  font-family: var(--vo-cat-heading-font);
  font-weight: var(--vo-cat-heading-weight, 700);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--vo-color-ink, var(--vo-cat-ink));
}
.vo-block-manifesto-attribution {
  font-style: normal;
  font-size: 14px;
  color: var(--vo-color-ink-subtle, var(--vo-cat-muted));
  letter-spacing: 0.04em;
}
/* manifesto-default: centered, large display */
.vo-block-manifesto-default {
  text-align: center;
  padding: 48px 16px;
}
.vo-block-manifesto-default .vo-block-manifesto-quote {
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.2;
  margin-bottom: 16px;
}
/* manifesto-bar-treatment: full-bleed accent bar, inverse type */
.vo-block-manifesto-bar-treatment .vo-block-manifesto-bar {
  background: var(--vo-color-accent, var(--vo-cat-accent));
  color: var(--vo-color-on-accent, var(--vo-cat-button-text));
  padding: 64px 32px;
  text-align: center;
}
.vo-block-manifesto-bar-treatment .vo-block-manifesto-quote {
  color: inherit;
  font-size: clamp(24px, 3.5vw, 44px);
  line-height: 1.15;
}
.vo-block-manifesto-bar-treatment .vo-block-manifesto-attribution {
  color: inherit;
  opacity: 0.8;
  display: block;
  margin-top: 16px;
}

/* asymmetric-feature ------------------------------------------- */
.vo-block-asymmetric-feature {
  display: grid;
  gap: 24px;
  margin: 48px 0;
}
.vo-block-asymmetric-feature-img,
.vo-block-asymmetric-feature-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--vo-color-surface-subtle, rgba(0,0,0,0.04));
  min-height: 320px;
}
.vo-block-asymmetric-feature-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.vo-block-asymmetric-feature-eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vo-color-accent, var(--vo-cat-accent));
}
.vo-block-asymmetric-feature-headline {
  font-family: var(--vo-cat-heading-font);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: var(--vo-cat-heading-weight, 700);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--vo-color-ink, var(--vo-cat-ink));
}
.vo-block-asymmetric-feature-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--vo-color-ink-subtle, var(--vo-cat-ink));
  margin: 0;
}
.vo-block-asymmetric-feature-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 20px;
  background: var(--vo-color-primary, var(--vo-cat-accent));
  color: var(--vo-color-on-primary, var(--vo-cat-button-text));
  text-decoration: none;
  font-weight: 600;
}
.vo-block-asymmetric-feature-cta:focus-visible {
  outline: 3px solid var(--vo-color-focus, var(--vo-cat-accent));
  outline-offset: 2px;
}
/* asymmetric-feature-default: 60/40 image left, copy right */
.vo-block-asymmetric-feature-default {
  grid-template-columns: 3fr 2fr;
}
/* asymmetric-feature-flipped: 40/60 copy left, image right (visual order via grid order) */
.vo-block-asymmetric-feature-flipped {
  grid-template-columns: 2fr 3fr;
}
.vo-block-asymmetric-feature-flipped .vo-block-asymmetric-feature-img-wrap {
  order: 2;
}
.vo-block-asymmetric-feature-flipped .vo-block-asymmetric-feature-copy {
  order: 1;
}
/* asymmetric-feature-editorial-stacked: image above, copy below with offset */
.vo-block-asymmetric-feature-editorial-stacked {
  grid-template-columns: 1fr;
}
.vo-block-asymmetric-feature-editorial-stacked .vo-block-asymmetric-feature-copy {
  margin-left: 12%;
  max-width: 720px;
}

/* type-as-image ------------------------------------------------ */
.vo-block-type-as-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 16px;
  margin: 32px 0;
}
.vo-block-type-as-image-display {
  font-family: var(--vo-cat-heading-font);
  font-weight: 900;
  font-size: clamp(72px, 16vw, 240px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.vo-block-type-as-image-subtitle {
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 16px;
  color: var(--vo-color-ink-subtle, var(--vo-cat-muted));
}
/* type-as-image-default: filled */
.vo-block-type-as-image-default .vo-block-type-as-image-display {
  color: var(--vo-color-primary, var(--vo-cat-accent));
}
/* type-as-image-outline: outlined */
.vo-block-type-as-image-outline .vo-block-type-as-image-display {
  color: transparent;
  -webkit-text-stroke: 2px var(--vo-color-primary, var(--vo-cat-accent));
}

/* editorial-split ---------------------------------------------- */
.vo-block-editorial-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 48px 0;
}
.vo-block-editorial-split-headline-col {
  display: flex;
  align-items: flex-start;
}
.vo-block-editorial-split-body-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vo-block-editorial-split-headline {
  font-family: var(--vo-cat-heading-font);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: var(--vo-cat-heading-weight, 700);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  color: var(--vo-color-ink, var(--vo-cat-ink));
}
.vo-block-editorial-split-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--vo-color-ink-subtle, var(--vo-cat-ink));
  margin: 0;
}
.vo-block-editorial-split-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 20px;
  background: var(--vo-color-primary, var(--vo-cat-accent));
  color: var(--vo-color-on-primary, var(--vo-cat-button-text));
  text-decoration: none;
  font-weight: 600;
}
.vo-block-editorial-split-cta:focus-visible {
  outline: 3px solid var(--vo-color-focus, var(--vo-cat-accent));
  outline-offset: 2px;
}
/* editorial-split-inverted: body left, headline right (markup order matches reading order) */
.vo-block-editorial-split-inverted .vo-block-editorial-split-body-col {
  order: 1;
}
.vo-block-editorial-split-inverted .vo-block-editorial-split-headline-col {
  order: 2;
  justify-content: flex-end;
  text-align: right;
}

/* marquee ------------------------------------------------------ */
.vo-block-marquee {
  width: 100%;
  overflow: hidden;
  margin: 24px 0;
  padding: 16px 0;
  background: var(--vo-color-surface, var(--vo-cat-bg, transparent));
}
.vo-block-marquee-track {
  display: flex;
  white-space: nowrap;
  animation: vo-block-marquee-scroll 30s linear infinite;
}
.vo-block-marquee-row {
  display: inline-flex;
  gap: 32px;
  padding-right: 32px;
  flex-shrink: 0;
}
.vo-block-marquee-token {
  font-family: var(--vo-cat-heading-font);
  font-weight: var(--vo-cat-heading-weight, 700);
  font-size: clamp(20px, 3vw, 40px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vo-color-ink, var(--vo-cat-ink));
}
.vo-block-marquee-default .vo-block-marquee-token {
  color: var(--vo-color-primary, var(--vo-cat-accent));
}
/* marquee-two-tone: alternating primary/accent tokens */
.vo-block-marquee-two-tone .vo-block-marquee-token-primary {
  color: var(--vo-color-primary, var(--vo-cat-accent));
}
.vo-block-marquee-two-tone .vo-block-marquee-token-accent {
  color: var(--vo-color-accent, var(--vo-cat-ink));
}
@keyframes vo-block-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .vo-block-marquee-track { animation: none; }
}

/* hero-v2 ------------------------------------------------------ */
.vo-block-hero-v2 {
  position: relative;
  margin: 0 0 32px;
}
.vo-block-hero-v2-headline,
.vo-block-hero-v2-display,
.vo-block-hero-v2-product-name {
  font-family: var(--vo-cat-heading-font);
  font-weight: var(--vo-cat-heading-weight, 700);
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--vo-color-ink, var(--vo-cat-ink));
}
.vo-block-hero-v2-headline {
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.05;
}
.vo-block-hero-v2-subtitle {
  font-size: 18px;
  line-height: 1.6;
  color: var(--vo-color-ink-subtle, var(--vo-cat-muted));
  margin: 0;
}
.vo-block-hero-v2-eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vo-color-accent, var(--vo-cat-accent));
}
.vo-block-hero-v2-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 14px 24px;
  background: var(--vo-color-primary, var(--vo-cat-accent));
  color: var(--vo-color-on-primary, var(--vo-cat-button-text));
  text-decoration: none;
  font-weight: 600;
}
.vo-block-hero-v2-cta:focus-visible {
  outline: 3px solid var(--vo-color-focus, var(--vo-cat-accent));
  outline-offset: 2px;
}
/* hero-v2-centered */
.vo-block-hero-v2-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 80px 16px;
}
/* hero-v2-split: 50/50 copy + image */
.vo-block-hero-v2-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  min-height: 480px;
}
.vo-block-hero-v2-split-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 32px 16px;
}
.vo-block-hero-v2-split-image {
  overflow: hidden;
  background: var(--vo-color-surface-subtle, rgba(0,0,0,0.04));
}
.vo-block-hero-v2-split-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vo-block-hero-v2-split-placeholder {
  width: 100%;
  height: 100%;
  min-height: 480px;
  background: var(--vo-color-surface-subtle, rgba(0,0,0,0.04));
}
/* hero-v2-full-bleed-image */
.vo-block-hero-v2-full-bleed-image {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: flex-end;
}
.vo-block-hero-v2-bg-img,
.vo-block-hero-v2-bg-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.vo-block-hero-v2-overlay {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 48px 32px;
  color: var(--vo-color-on-primary, #fff);
  background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
  width: 100%;
}
.vo-block-hero-v2-full-bleed-image .vo-block-hero-v2-headline,
.vo-block-hero-v2-full-bleed-image .vo-block-hero-v2-subtitle,
.vo-block-hero-v2-full-bleed-image .vo-block-hero-v2-eyebrow {
  color: inherit;
}
/* hero-v2-type-explosion */
.vo-block-hero-v2-type-explosion {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: 80px 24px;
  background: var(--vo-color-surface, var(--vo-cat-bg, transparent));
  min-height: 70vh;
}
.vo-block-hero-v2-type-explosion .vo-block-hero-v2-display {
  font-size: clamp(96px, 18vw, 280px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--vo-color-primary, var(--vo-cat-accent));
}
.vo-block-hero-v2-type-explosion-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}
/* hero-v2-asymmetric */
.vo-block-hero-v2-asymmetric {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 48px;
  min-height: 540px;
  align-items: center;
}
.vo-block-hero-v2-asym-image {
  overflow: hidden;
}
.vo-block-hero-v2-asym-img,
.vo-block-hero-v2-asym-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--vo-color-surface-subtle, rgba(0,0,0,0.04));
  min-height: 420px;
}
.vo-block-hero-v2-asym-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* hero-v2-product-led */
.vo-block-hero-v2-product-led {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 32px;
  align-items: center;
  padding: 32px 16px;
}
.vo-block-hero-v2-product-image {
  overflow: hidden;
  background: var(--vo-color-surface-subtle, rgba(0,0,0,0.04));
}
.vo-block-hero-v2-product-img,
.vo-block-hero-v2-product-placeholder {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  min-height: 480px;
}
.vo-block-hero-v2-product-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vo-block-hero-v2-product-name {
  font-size: clamp(28px, 4vw, 44px);
}
.vo-block-hero-v2-product-price {
  font-size: 18px;
  color: var(--vo-color-accent, var(--vo-cat-accent));
  font-weight: 600;
}

/* ============================================================
   Editorial system (2026-09 premium upgrade).

   Shared tokens for the hospitality / boutique look: refined serif
   headings, tracked small-caps eyebrows, generous section rhythm,
   photography-first heroes and closing bands, and dark or custom
   colour bands with automatic text contrast.

   Pages can tune the system with:
     --vo-heading-weight   (serif faces read best at 500, sans at 650)
     --vo-heading-tracking
     --vo-bleed-w          (full-bleed width; the builder canvas sets
                            this to the device frame width)
   ============================================================ */
.vo-builder-page {
  /* Own stacking context so full-bleed band backgrounds (negative z-index
     ::before) always paint above whatever background the host page uses. */
  isolation: isolate;
  --vo-section-pad: clamp(64px, 8vw, 112px);
  --vo-section-gutter: clamp(20px, 4vw, 48px);
  --vo-media-radius: min(var(--brand-radius, 10px), 18px);
  --vo-eyebrow-color: color-mix(in srgb, var(--brand-primary, #0b1c30) 88%, var(--ink, #0b1c30));
}
.vo-section-eyebrow,
.vo-block-features-eyebrow,
.vo-block-story-eyebrow,
.vo-block-gallery-eyebrow,
.vo-block-process-eyebrow {
  display: block;
  margin: 0 0 14px;
  color: var(--vo-eyebrow-color, var(--vo-brand-text, var(--brand-primary, #0b1c30)));
  font: 600 11px/1.3 var(--brand-body-font, Inter, sans-serif);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.vo-text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--vo-brand-text, var(--brand-primary, #0b1c30));
  font: 600 13.5px/1.3 var(--brand-body-font, Inter, sans-serif);
  letter-spacing: .01em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: opacity .15s ease;
}
.vo-text-link:hover { opacity: .72; }
.vo-text-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* Bands: soft / strong / dark / custom colour ---------------------- */
.vo-block[data-vo-tint]::before {
  width: var(--vo-bleed-w, 100vw);
  background: var(--vo-tint-bg, var(--vo-surface-tint));
}
.vo-block[data-vo-tint="strong"]::before { background: var(--vo-tint-bg, var(--vo-surface-tint-strong)); }
.vo-block[data-vo-tint="dark"]::before {
  background: var(--vo-tint-bg, color-mix(in srgb, var(--brand-primary, #0b1c30) 62%, #10120f));
  border-color: transparent;
}
.vo-block[data-vo-tint][style*="--vo-tint-bg"]::before { border-color: transparent; }
.vo-block.vo-on-dark {
  color: #f6f2ea;
  --ink: #f6f2ea;
  --muted: rgba(246, 242, 234, .74);
  --vo-eyebrow-color: rgba(246, 242, 234, .72);
  --vo-icon-color: color-mix(in srgb, var(--brand-primary, #c9a36b) 45%, #efe4cf);
}
.dark-mode .vo-block[data-vo-tint][style*="--vo-tint-bg"]::before { background: var(--vo-tint-bg); }
/* A light custom tint stays light in dark mode, so its text goes dark too. */
.dark-mode .vo-block.vo-on-light {
  color: #1e293b;
  --ink: #1e293b; --ink-secondary: #475569; --muted: #64748b; --subtle: #94a3b8; --border: #e2e8f0;
}

/* Brand colour as text --------------------------------------------------
   Text drawn in the brand/accent colour reads --vo-brand-text /
   --vo-accent-text first. On a dark surface (dark-mode page, dark catalog
   page, dark-tinted section, photo hero) they lift only the lightness, so a
   deep brand colour (forest green, navy) stays readable and a bright one is
   unchanged. Everywhere else they are unset and the plain colour is used.
   Text on a light fill (white buttons) keeps the plain colour. */
.dark-mode .vo-block,
[data-catalog-tone="dark"] .vo-block,
:is(.vo-builder-page, .vo-order-page-surface, .vo-builder-preview-root):has(.vo-starfield) .vo-block,
.vo-block.vo-on-dark,
.vo-block-hero.has-image:not(.vo-block-hero-tone-dark) {
  --vo-brand-text: color-mix(in oklab, var(--brand-primary, #0b1c30) 40%, #ffffff);
  --vo-brand-text: oklch(from var(--brand-primary, #0b1c30) max(l, 0.72) c h);
  --vo-accent-text: color-mix(in oklab, var(--vo-cat-accent, var(--brand-primary, #0b1c30)) 40%, #ffffff);
  --vo-accent-text: oklch(from var(--vo-cat-accent, var(--brand-primary, #0b1c30)) max(l, 0.72) c h);
}
.dark-mode [data-catalog-tone="light"] .vo-block:not(.vo-on-dark, .vo-block-hero.has-image),
.dark-mode .vo-block.vo-on-light {
  --vo-brand-text: initial;
  --vo-accent-text: initial;
}
/* The page-wide eyebrow colour (brand mixed with ink) starts from the lifted
   brand on dark pages; dark-tinted bands keep their own cream eyebrow. */
.dark-mode .vo-block:not(.vo-on-dark, .vo-on-light),
[data-catalog-tone="dark"] .vo-block:not(.vo-on-dark, .vo-on-light) {
  --vo-eyebrow-color: color-mix(in srgb, var(--vo-brand-text, var(--brand-primary, #0b1c30)) 88%, var(--ink, #f1f5f9));
}

/* Full-bleed helpers ------------------------------------------------ */
.vo-builder-page .vo-block-slot-full > .vo-block-hero,
.vo-builder-page .vo-block-slot-full > .vo-block-cta-band-image {
  width: var(--vo-bleed-w, 100vw);
  max-width: var(--vo-bleed-w, 100vw);
  margin-left: calc(50% - var(--vo-bleed-w, 100vw) / 2);
  margin-right: calc(50% - var(--vo-bleed-w, 100vw) / 2);
  border-radius: 0;
}
.vo-builder-preview-root .vo-block-hero:is(.vo-block-hero-variant-photo, .vo-block-hero-variant-split-media),
.vo-builder-preview-root .vo-block-cta-band-image {
  width: var(--vo-bleed-w, 100%);
  max-width: none;
  margin-left: calc(50% - var(--vo-bleed-w, 100%) / 2) !important;
  margin-right: 0 !important;
  border-radius: 0;
}

/* Hero: full photograph ------------------------------------------- */
.vo-block-hero-variant-photo,
.vo-block-hero-variant-split-media {
  margin: 0;
  border-radius: 0;
  /* Room for a see-through title bar floating over the opening. */
  padding-top: var(--vo-hero-top-offset, 0px);
}
/* The split photo still runs to the top of the page under the bar. */
.vo-block-hero-variant-split-media::after { margin-top: calc(-1 * var(--vo-hero-top-offset, 0px)); }
.vo-block-hero-variant-photo {
  align-items: center;
  background-color: #1d1b18;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.vo-block-hero-variant-photo:not(.has-image) {
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand-primary, #0b1c30) 78%, #111), color-mix(in srgb, var(--brand-primary, #0b1c30) 40%, #111));
}
.vo-block-hero-variant-photo.vo-block-hero-h-sm { min-height: clamp(360px, 48vh, 460px); }
.vo-block-hero-variant-photo.vo-block-hero-h-md { min-height: clamp(440px, 64vh, 640px); }
.vo-block-hero-variant-photo.vo-block-hero-h-lg { min-height: clamp(520px, 82vh, 780px); }
.vo-block-hero-variant-photo .vo-block-hero-overlay {
  background: linear-gradient(180deg,
    rgba(12, 10, 8, calc(var(--vo-hero-overlay, .4) * .55)) 0%,
    rgba(12, 10, 8, var(--vo-hero-overlay, .4)) 55%,
    rgba(12, 10, 8, calc(var(--vo-hero-overlay, .4) * 1.1)) 100%);
}
.vo-block-hero-variant-photo.vo-block-hero-tone-dark { color: var(--ink, #1c1a17); background-color: color-mix(in srgb, var(--brand-primary, #0b1c30) 8%, var(--brand-bg, #f6f2ea)); }
.vo-block-cta-band-image.vo-block-cta-band-tone-dark { background-color: color-mix(in srgb, var(--brand-primary, #0b1c30) 8%, var(--brand-bg, #f6f2ea)); }
.vo-block-hero-variant-photo.vo-block-hero-tone-dark .vo-block-hero-overlay {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--brand-bg, #faf7f2) calc(var(--vo-hero-overlay, .3) * 100%), transparent) 0%,
    color-mix(in srgb, var(--brand-bg, #faf7f2) calc(var(--vo-hero-overlay, .3) * 70%), transparent) 45%,
    transparent 80%);
}
.vo-block-hero-variant-photo.vo-block-hero-tone-dark.vo-block-hero-align-right .vo-block-hero-overlay {
  background: linear-gradient(270deg,
    color-mix(in srgb, var(--brand-bg, #faf7f2) calc(var(--vo-hero-overlay, .3) * 100%), transparent) 0%,
    color-mix(in srgb, var(--brand-bg, #faf7f2) calc(var(--vo-hero-overlay, .3) * 70%), transparent) 45%,
    transparent 80%);
}
.vo-block-hero-variant-photo.vo-block-hero-tone-dark.vo-block-hero-align-center .vo-block-hero-overlay {
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--brand-bg, #faf7f2) calc(var(--vo-hero-overlay, .3) * 100%), transparent) 0%,
    transparent 70%);
}
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-photo > .vo-block-hero-inner,
.vo-block-hero-variant-photo > .vo-block-hero-inner {
  width: 100%;
  max-width: var(--vo-frame-max, 1180px);
  margin: 0 auto;
  padding: clamp(80px, 10vw, 128px) var(--vo-section-gutter, 32px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-photo.vo-block-hero-align-center > .vo-block-hero-inner,
.vo-block-hero-variant-photo.vo-block-hero-align-center > .vo-block-hero-inner { align-items: center; text-align: center; }
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-photo.vo-block-hero-align-right > .vo-block-hero-inner,
.vo-block-hero-variant-photo.vo-block-hero-align-right > .vo-block-hero-inner { align-items: flex-end; text-align: left; }
.vo-block-hero-variant-photo.vo-block-hero-align-right > .vo-block-hero-inner > * { width: min(100%, 560px); }
.vo-block-hero-variant-photo.vo-block-hero-align-right .vo-block-hero-cta { width: auto; align-self: flex-start; margin-left: calc(100% - min(100%, 560px)); }
:is(.vo-block-hero-variant-photo, .vo-block-hero-variant-split-media) .vo-block-hero-eyebrow {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  opacity: .86;
  font: 600 11.5px/1.3 var(--brand-body-font, Inter, sans-serif);
  letter-spacing: .24em;
  text-transform: uppercase;
}
:is(.vo-block-hero-variant-photo, .vo-block-hero-variant-split-media) .vo-block-hero-title {
  max-width: 15ch;
  margin: 0;
  font-family: var(--brand-heading-font, Georgia, serif);
  font-size: clamp(44px, 6vw, 80px);
  font-weight: var(--vo-heading-weight, 500);
  line-height: 1.02;
  letter-spacing: var(--vo-heading-tracking, -0.01em);
  text-wrap: balance;
  color: inherit;
}
.vo-block-hero-variant-photo.vo-block-hero-align-center .vo-block-hero-title { max-width: 16ch; }
.vo-block-hero-variant-split-media .vo-block-hero-title { font-size: clamp(40px, 4.8vw, 66px); max-width: 14ch; }
:is(.vo-block-hero-variant-photo, .vo-block-hero-variant-split-media) .vo-block-hero-sub {
  max-width: 44ch;
  margin: 22px 0 0;
  font: 400 clamp(15px, 1.35vw, 18px)/1.65 var(--brand-body-font, Inter, sans-serif);
  opacity: .9;
}
.vo-block-hero-variant-photo.vo-block-hero-align-center .vo-block-hero-sub { margin-left: auto; margin-right: auto; }
:is(.vo-block-hero-variant-photo, .vo-block-hero-variant-split-media) .vo-block-hero-cta {
  margin-top: 34px;
  padding: 15px 30px;
  border-radius: var(--brand-radius, 4px);
  font: 600 13.5px/1 var(--brand-body-font, Inter, sans-serif);
  letter-spacing: .03em;
}
:is(.vo-block-hero-variant-photo, .vo-block-hero-variant-split-media) .vo-cta-arrow { display: none; }
:is(.vo-block-hero-variant-photo, .vo-block-hero-variant-split-media).has-image .vo-block-hero-cta-primary,
:is(.vo-block-hero-variant-photo, .vo-block-hero-variant-split-media) .vo-block-hero-cta-primary {
  background: var(--brand-primary, #0b1c30);
  color: var(--brand-button-text, #fff);
  box-shadow: none;
}
:is(.vo-block-hero-variant-photo, .vo-block-hero-variant-split-media) .vo-block-hero-cta-primary:hover {
  background: color-mix(in srgb, var(--brand-primary, #0b1c30) 86%, #000);
}
.vo-block-hero-variant-photo .vo-block-hero-cta-outline { border: 1px solid currentColor; }

/* Hero: split media ------------------------------------------------- */
.vo-block-hero-variant-split-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  background: color-mix(in srgb, var(--brand-primary, #0b1c30) 5%, var(--brand-bg, #fff));
  color: var(--ink, #1c1a17);
}
.vo-block-hero-variant-split-media.has-image {
  background-image: none;
  color: var(--ink, #1c1a17);
}
.vo-block-hero-variant-split-media .vo-block-hero-overlay { display: none; }
.vo-block-hero-variant-split-media::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  min-height: 100%;
  background:
    var(--vo-hero-image, linear-gradient(145deg, color-mix(in srgb, var(--brand-primary, #0b1c30) 22%, var(--brand-bg, #fff)), color-mix(in srgb, var(--brand-primary, #0b1c30) 8%, var(--brand-bg, #fff))))
    center / cover no-repeat;
}
.vo-block-hero-variant-split-media.vo-block-hero-h-sm { min-height: 420px; }
.vo-block-hero-variant-split-media.vo-block-hero-h-md { min-height: clamp(480px, 66vh, 640px); }
.vo-block-hero-variant-split-media.vo-block-hero-h-lg { min-height: clamp(560px, 82vh, 780px); }
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-split-media > .vo-block-hero-inner,
.vo-block-hero-variant-split-media > .vo-block-hero-inner {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  width: 100%;
  max-width: 620px;
  margin: 0;
  padding: clamp(64px, 8vw, 112px) clamp(28px, 5vw, 80px);
  box-sizing: border-box;
  text-align: left;
}
.vo-block-hero-variant-split-media.vo-block-hero-align-right::after { grid-column: 1; }
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-split-media.vo-block-hero-align-right > .vo-block-hero-inner,
.vo-block-hero-variant-split-media.vo-block-hero-align-right > .vo-block-hero-inner { grid-column: 2; justify-self: start; }
.vo-block-hero-variant-split-media.vo-block-hero-align-center > .vo-block-hero-inner { justify-self: center; }
.vo-block-hero-variant-split-media .vo-block-hero-eyebrow { color: var(--vo-eyebrow-color, var(--vo-brand-text, var(--brand-primary))); opacity: 1; }
.vo-block-hero-variant-split-media .vo-block-hero-sub { color: var(--muted, #6b7280); opacity: 1; }
.vo-block-hero-variant-split-media .vo-block-hero-stamp { display: none; }
@media (max-width: 820px) {
  .vo-block-hero-variant-split-media { grid-template-columns: 1fr; }
  .vo-block-hero-variant-split-media::after,
  .vo-block-hero-variant-split-media.vo-block-hero-align-right::after { grid-column: 1; grid-row: 1; min-height: 0; aspect-ratio: 4 / 3; }
  .vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-split-media > .vo-block-hero-inner,
  .vo-block-hero-variant-split-media > .vo-block-hero-inner,
  .vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-split-media.vo-block-hero-align-right > .vo-block-hero-inner { grid-column: 1; grid-row: 2; justify-self: stretch; max-width: none; padding: 44px 24px 56px; }
}
@media (max-width: 720px) {
  .vo-block-hero-variant-photo.vo-block-hero-h-lg,
  .vo-block-hero-variant-photo.vo-block-hero-h-md { min-height: 520px; }
  .vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-photo > .vo-block-hero-inner,
  .vo-block-hero-variant-photo > .vo-block-hero-inner { padding: 88px 24px; }
  .vo-block-hero-variant-photo.vo-block-hero-align-right > .vo-block-hero-inner { align-items: flex-start; }
  .vo-block-hero-variant-photo.vo-block-hero-align-right .vo-block-hero-cta { margin-left: 0; }
}

/* Story split -------------------------------------------------------- */
.vo-block-story-split {
  max-width: var(--vo-content-max, 1180px);
  gap: clamp(32px, 6vw, 96px);
  padding: var(--vo-section-pad, 80px) var(--vo-section-gutter, 32px);
}
.vo-block-story-split[data-vo-tint] { padding-top: var(--vo-section-pad, 80px); padding-bottom: var(--vo-section-pad, 80px); }
.vo-block-story-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--vo-media-radius, 4px);
}
.vo-block-story-copy { max-width: 520px; }
.vo-block-story-split-right .vo-block-story-copy { justify-self: end; }
.vo-block-story-split-text-only .vo-block-story-copy { max-width: 780px; }
.vo-block-story-copy h2 {
  margin: 0 0 20px;
  font-family: var(--brand-heading-font, Georgia, serif);
  font-size: clamp(32px, 3.6vw, 50px);
  font-weight: var(--vo-heading-weight, 600);
  line-height: 1.1;
  letter-spacing: var(--vo-heading-tracking, -0.02em);
  text-wrap: balance;
}
.vo-block-story-copy p { font-size: 15.5px; line-height: 1.78; margin-bottom: 28px; }
.vo-block-story-link {
  gap: 6px;
  padding-bottom: 5px;
  font: 600 13.5px/1.3 var(--brand-body-font, Inter, sans-serif);
  letter-spacing: .01em;
}
.vo-on-dark .vo-block-story-link { color: var(--ink); }

/* Highlights: columns ------------------------------------------------ */
.vo-block-features-heading,
.vo-block-gallery-heading h2,
.vo-block-process-heading h2 {
  font-family: var(--brand-heading-font, Georgia, serif);
  font-weight: var(--vo-heading-weight, 650);
  letter-spacing: var(--vo-heading-tracking, -0.02em);
  line-height: 1.12;
  text-wrap: balance;
}
.vo-block-features-columns {
  max-width: var(--vo-content-max, 1180px);
  padding: clamp(60px, 7vw, 96px) var(--vo-section-gutter, 32px);
}
.vo-block-features-columns[data-vo-tint] { padding-top: clamp(60px, 7vw, 96px); padding-bottom: clamp(60px, 7vw, 96px); }
.vo-block-features-columns .vo-block-features-heading { font-size: clamp(28px, 3vw, 42px); margin: 0 auto 10px; max-width: 24ch; }
.vo-block-features-columns .vo-block-features-intro { margin-bottom: 0; font-size: 15px; }
.vo-block-features-columns .vo-block-features-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(36px, 5vw, 56px);
  text-align: center;
}
.vo-block-features-columns[data-count="1"] .vo-block-features-grid { grid-template-columns: minmax(0, 420px); justify-content: center; }
.vo-block-features-columns[data-count="2"] .vo-block-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-left: auto; margin-right: auto; }
.vo-block-features-columns[data-count="4"] .vo-block-features-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vo-block-features-columns .vo-block-features-cell {
  padding: 6px clamp(18px, 3vw, 40px) 8px;
  border: 0;
  border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.vo-block-features-columns .vo-block-features-cell:hover { transform: none; box-shadow: none; }
.vo-block-features-columns .vo-block-features-cell:nth-child(3n + 1) { border-left: 0; }
.vo-block-features-columns[data-count="4"] .vo-block-features-cell:nth-child(3n + 1) { border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.vo-block-features-columns[data-count="4"] .vo-block-features-cell:first-child { border-left: 0; }
.vo-block-features-columns[data-count="2"] .vo-block-features-cell:nth-child(2) { border-left: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.vo-block-features-columns[data-count="5"] .vo-block-features-cell:nth-child(n + 4),
.vo-block-features-columns[data-count="6"] .vo-block-features-cell:nth-child(n + 4) { margin-top: 40px; }
.vo-block-features-columns .vo-block-features-icon {
  width: auto;
  height: auto;
  margin: 0 0 18px;
  background: transparent;
  border-radius: 0;
  color: var(--vo-icon-color, var(--vo-brand-text, var(--brand-primary, #0b1c30)));
}
.vo-block-features-columns .vo-block-features-icon svg { width: 38px; height: 38px; stroke-width: 1.15; }
.vo-block-features-columns .vo-block-features-title {
  margin: 0 0 8px;
  font-family: var(--brand-heading-font, Georgia, serif);
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: var(--vo-heading-weight, 600);
  letter-spacing: 0;
}
.vo-block-features-columns .vo-block-features-desc { max-width: 28ch; margin: 0 auto; font-size: 14px; line-height: 1.6; }
@media (max-width: 720px) {
  .vo-block-features-columns .vo-block-features-grid,
  .vo-block-features-columns[data-count] .vo-block-features-grid { grid-template-columns: 1fr; gap: 0; }
  .vo-block-features-columns .vo-block-features-cell,
  .vo-block-features-columns[data-count] .vo-block-features-cell { border-left: 0 !important; margin-top: 0 !important; padding: 26px 8px; border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
  .vo-block-features-columns .vo-block-features-cell:first-child { border-top: 0; }
}

/* Gallery: shared media rhythm --------------------------------------- */
.vo-block-image-gallery .vo-block-gallery-item { border-radius: var(--vo-media-radius, 18px); }
.vo-block-image-gallery .vo-block-gallery-item.has-image { border-color: transparent; }
.vo-block-image-gallery .vo-block-gallery-caption strong { font-weight: var(--vo-heading-weight, 700); letter-spacing: var(--vo-heading-tracking, -.035em); }

/* Gallery: collection cards ----------------------------------------- */
.vo-block-image-gallery-cards {
  max-width: var(--vo-content-max, 1180px);
  padding: var(--vo-section-pad, 80px) var(--vo-section-gutter, 32px);
  text-align: center;
}
.vo-block-image-gallery-cards[data-vo-tint] { padding-top: var(--vo-section-pad, 80px); padding-bottom: var(--vo-section-pad, 80px); }
.vo-block-image-gallery-cards .vo-block-gallery-heading { max-width: 720px; margin: 0 auto clamp(32px, 4.5vw, 52px); }
.vo-block-image-gallery-cards .vo-block-gallery-heading h2 { font-size: clamp(30px, 3.4vw, 46px); margin-left: auto; margin-right: auto; }
.vo-block-image-gallery-cards .vo-block-gallery-intro { margin-left: auto; margin-right: auto; }
.vo-block-image-gallery-cards .vo-block-gallery-grid { gap: clamp(16px, 2.6vw, 36px); }
.vo-block-image-gallery-cards .vo-block-gallery-item {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.vo-block-image-gallery-cards .vo-block-gallery-link { display: block; color: inherit; text-decoration: none; }
.vo-block-image-gallery-cards .vo-block-gallery-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--vo-media-radius, 4px);
}
.vo-block-image-gallery-cards .vo-block-gallery-media img { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.vo-block-image-gallery-cards .vo-block-gallery-item:hover .vo-block-gallery-media img { transform: scale(1.035); }
.vo-block-image-gallery-cards .vo-block-gallery-item .vo-block-gallery-caption,
.vo-block-image-gallery-cards .vo-block-gallery-item.has-image .vo-block-gallery-caption,
.vo-block-image-gallery-cards .vo-block-gallery-item.is-text-only .vo-block-gallery-caption {
  position: static;
  padding: 18px 8px 0;
  background: none;
  color: var(--ink, #1c1a17);
  gap: 6px;
}
.vo-block-image-gallery-cards .vo-block-gallery-caption strong {
  font-family: var(--brand-heading-font, Georgia, serif);
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: var(--vo-heading-weight, 600);
  letter-spacing: 0;
  line-height: 1.25;
}
.vo-block-image-gallery-cards .vo-block-gallery-caption span { color: var(--muted, #6b7280); opacity: 1; font-size: 13.5px; }
.vo-block-image-gallery-cards .vo-block-gallery-item.is-text-only .vo-block-gallery-media::after { display: none; }
.vo-block-gallery-cta { margin-top: clamp(32px, 4vw, 48px); text-align: center; }
.vo-block-image-gallery:not(.vo-block-image-gallery-cards) .vo-block-gallery-cta { text-align: left; }
@media (max-width: 720px) {
  .vo-block-image-gallery-cards .vo-block-gallery-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (min-width: 721px) and (max-width: 1024px) {
  .vo-block-image-gallery-cards .vo-block-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Closing band: photograph / minimal -------------------------------- */
.vo-block-cta-band-image,
.vo-block-cta-band-minimal {
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.vo-block-cta-band-image {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(340px, 46vh, 460px);
  background: #1d1b18 var(--vo-cta-image) center / cover no-repeat;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
.vo-block-cta-band-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(14, 12, 10, var(--vo-cta-overlay, .45));
}
.vo-block-cta-band-tone-dark { color: var(--ink, #1c1a17); }
.vo-block-cta-band-tone-dark .vo-block-cta-band-overlay {
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--brand-bg, #faf7f2) calc(var(--vo-cta-overlay, .45) * 100%), transparent) 0%, transparent 75%);
}
:is(.vo-block-cta-band-image, .vo-block-cta-band-minimal) .vo-block-cta-band-inner {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(72px, 9vw, 120px) var(--vo-section-gutter, 24px);
  box-sizing: border-box;
  background: none;
  box-shadow: none;
  border-radius: 0;
  color: inherit;
}
:is(.vo-block-cta-band-image, .vo-block-cta-band-minimal) .vo-block-cta-band-title {
  max-width: 20ch;
  margin: 0 auto 14px;
  font-family: var(--brand-heading-font, Georgia, serif);
  font-size: clamp(32px, 4vw, 54px);
  font-weight: var(--vo-heading-weight, 600);
  line-height: 1.08;
  letter-spacing: var(--vo-heading-tracking, -0.015em);
  color: inherit;
  text-wrap: balance;
}
:is(.vo-block-cta-band-image, .vo-block-cta-band-minimal) .vo-block-cta-band-sub {
  margin: 0 auto 32px;
  color: inherit;
  opacity: .88;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
}
.vo-block-cta-band-minimal .vo-block-cta-band-sub { color: var(--muted, #6b7280); opacity: 1; }
.vo-block-cta-band-minimal.vo-on-dark .vo-block-cta-band-sub { color: var(--muted); }
:is(.vo-block-cta-band-image, .vo-block-cta-band-minimal) .vo-section-eyebrow { color: inherit; opacity: .8; }
.vo-block-cta-band-minimal:not(.vo-on-dark) .vo-section-eyebrow { color: var(--vo-eyebrow-color); opacity: 1; }
:is(.vo-block-cta-band-image, .vo-block-cta-band-minimal) .vo-block-cta-band-btn {
  padding: 15px 30px;
  border-radius: var(--brand-radius, 4px);
  background: var(--brand-primary, #0b1c30);
  color: var(--brand-button-text, #fff) !important;
  font: 600 13.5px/1 var(--brand-body-font, Inter, sans-serif);
  letter-spacing: .03em;
  box-shadow: none;
}
:is(.vo-block-cta-band-image, .vo-block-cta-band-minimal) .vo-block-cta-band-btn:hover {
  transform: none;
  background: color-mix(in srgb, var(--brand-primary, #0b1c30) 86%, #000);
  box-shadow: none;
}
.vo-builder-page[data-page-slug="home"] .vo-block-slot-full > :is(.vo-block-cta-band-image, .vo-block-cta-band-minimal) { margin-top: 0; margin-bottom: 0; }

/* Process + stats + testimonial polish ------------------------------ */
.vo-block-process-heading h2 { font-size: clamp(30px, 3.4vw, 46px); }
.vo-on-dark .vo-block-process-step { border-top-color: rgba(246, 242, 234, .24); }
.vo-on-dark .vo-block-process-number { color: var(--vo-icon-color, #efe4cf); }
.vo-block-stats.vo-on-dark .vo-block-stats-value,
.vo-block-testimonial.vo-on-dark .vo-block-testimonial-quote { color: var(--ink); }

/* Full-bleed openings and closings sit flush against the header/footer. */
.vo-builder-page:has(> .vo-builder-blocks > .vo-block-slot:first-child > :is(.vo-block-hero-variant-photo, .vo-block-hero-variant-split-media, .vo-block-cta-band-image)) { padding-top: 0; }
.vo-builder-page:has(> .vo-builder-blocks > .vo-block-slot:last-child > :is(.vo-block-cta-band-image, .vo-block-cta-band-minimal[data-vo-tint], [data-vo-tint])) { padding-bottom: 0; }
:is(.vo-block-hero-sub, .vo-block-cta-band-sub, .vo-block-story-copy p, .vo-block-features-desc, .vo-block-gallery-caption span) { text-wrap: pretty; }

/* Homepage rhythm: editorial sections butt together, each owning its
   own padding and background. */
.vo-builder-page[data-page-slug="home"] .vo-block-slot-full > :is(.vo-block-image-gallery-cards, .vo-block-features-columns) { margin-top: 0; margin-bottom: 0; }


/* ============================================================
   COLOURFUL SAAS KIT (2026-09) — Aurora hero, Aurora section
   band, Feature cards and the Prism catalog theme. Paired with
   the Prism page templates; every piece is also usable on its own.
   ============================================================ */

/* Hero: aurora ------------------------------------------------------ */
.vo-block-hero-variant-aurora,
.vo-block-hero-variant-aurora.has-image {
  box-sizing: border-box;
  margin: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding: calc(clamp(72px, 9vw, 128px) + var(--vo-hero-top-offset, 0px)) max(24px, calc(50vw - 580px)) clamp(72px, 9vw, 128px);
  color: var(--ink, #0f1030);
  background:
    /* The glows melt into the page colour before the section below. */
    linear-gradient(to top, var(--brand-bg, #fbfaff) 0, transparent clamp(140px, 18vw, 240px)),
    radial-gradient(38% 55% at 8% 12%, color-mix(in srgb, var(--brand-primary, #5b3df5) 30%, transparent), transparent 70%),
    radial-gradient(34% 50% at 94% 6%, rgba(6, 182, 212, 0.22), transparent 70%),
    radial-gradient(42% 60% at 80% 98%, rgba(255, 79, 163, 0.20), transparent 70%),
    radial-gradient(30% 45% at 28% 100%, rgba(255, 176, 32, 0.16), transparent 70%),
    var(--brand-bg, #fbfaff);
}
.vo-block-hero-variant-aurora.has-image { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); justify-items: stretch; }
/* The floating photo's shadow can extend past the section instead of being cut off. */
.vo-block-hero-variant-aurora { overflow: visible; }
.vo-block-hero-variant-aurora .vo-block-hero-overlay,
.vo-block-hero-variant-aurora .vo-block-hero-stamp { display: none; }
.vo-block-hero-variant-aurora.has-image::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: 28px;
  background: var(--vo-hero-image) center / cover no-repeat;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.6), 0 50px 90px -40px rgba(40, 20, 120, 0.5), 0 20px 40px -24px rgba(255, 79, 163, 0.35);
}
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-aurora > .vo-block-hero-inner,
.vo-block-hero-variant-aurora > .vo-block-hero-inner {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 760px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-aurora.has-image > .vo-block-hero-inner,
.vo-block-hero-variant-aurora.has-image > .vo-block-hero-inner { align-items: flex-start; text-align: left; max-width: 600px; }
/* Breathing room before the first row of sections (e.g. a bento row). */
.vo-builder-page[data-page-slug] .vo-block-slot-full > .vo-block-hero-variant-aurora { margin-bottom: clamp(24px, 3.5vw, 48px); }
.vo-block-hero-variant-aurora.vo-block-hero-align-right.has-image::after { grid-column: 1; }
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-aurora.vo-block-hero-align-right.has-image > .vo-block-hero-inner,
.vo-block-hero-variant-aurora.vo-block-hero-align-right.has-image > .vo-block-hero-inner { grid-column: 2; }
.vo-block-hero-variant-aurora .vo-block-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #5b3df5) 22%, transparent);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--brand-primary, #5b3df5);
  font: 700 11.5px/1 var(--brand-body-font, Inter, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 1;
}
.vo-block-hero-variant-aurora .vo-block-hero-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-primary, #5b3df5), #ff4fa3);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary, #5b3df5) 16%, transparent);
}
.vo-block-hero-variant-aurora .vo-block-hero-title {
  margin: 0;
  max-width: 15ch;
  font-family: var(--brand-heading-font, Inter, sans-serif);
  font-size: clamp(44px, 6.2vw, 84px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -0.045em;
  text-wrap: balance;
  background: linear-gradient(100deg, var(--ink, #0f1030) 0%, var(--ink, #0f1030) 42%, var(--brand-primary, #5b3df5) 74%, #ff4fa3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vo-block-hero-variant-aurora .vo-block-hero-sub {
  max-width: 46ch;
  margin: 22px 0 0;
  color: var(--muted, #5b5e7a);
  font: 400 clamp(16px, 1.4vw, 19px)/1.6 var(--brand-body-font, Inter, sans-serif);
  opacity: 1;
}
.vo-block-hero-variant-aurora .vo-block-hero-cta {
  margin-top: 34px;
  padding: 16px 28px;
  border-radius: 999px;
  font: 700 14px/1 var(--brand-body-font, Inter, sans-serif);
  letter-spacing: 0;
}
.vo-block-hero-variant-aurora .vo-block-hero-cta-primary,
.vo-block-hero-variant-aurora.has-image .vo-block-hero-cta-primary {
  background: linear-gradient(135deg, var(--brand-primary, #5b3df5), color-mix(in srgb, var(--brand-primary, #5b3df5) 55%, #ff4fa3));
  color: var(--brand-button-text, #fff);
  box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--brand-primary, #5b3df5) 75%, transparent);
}
.vo-block-hero-variant-aurora .vo-block-hero-cta-primary:hover { filter: saturate(1.1) brightness(1.04); transform: translateY(-1px); }
.vo-block-hero-variant-aurora.vo-block-hero-h-sm { min-height: 420px; }
.vo-block-hero-variant-aurora.vo-block-hero-h-md { min-height: clamp(500px, 68vh, 680px); }
.vo-block-hero-variant-aurora.vo-block-hero-h-lg { min-height: clamp(580px, 84vh, 820px); }
.dark-mode .vo-block-hero-variant-aurora { --ink: #f5f3ff; }
.dark-mode .vo-block-hero-variant-aurora .vo-block-hero-eyebrow { background: rgba(255, 255, 255, 0.08); color: var(--vo-brand-text, var(--brand-primary, #5b3df5)); }
.vo-builder-preview-root .vo-block-hero-variant-aurora {
  width: var(--vo-bleed-w, 100%);
  max-width: none;
  margin-left: calc(50% - var(--vo-bleed-w, 100%) / 2) !important;
  margin-right: 0 !important;
  padding-left: clamp(24px, 5vw, 64px);
  padding-right: clamp(24px, 5vw, 64px);
}
.vo-builder-page:has(> .vo-builder-blocks > .vo-block-slot:first-child > .vo-block-hero-variant-aurora) { padding-top: 0; }
@media (max-width: 820px) {
  .vo-block-hero-variant-aurora.has-image { grid-template-columns: minmax(0, 1fr); }
  .vo-block-hero-variant-aurora.has-image::after,
  .vo-block-hero-variant-aurora.vo-block-hero-align-right.has-image::after { grid-column: 1; grid-row: 2; }
  .vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-aurora.vo-block-hero-align-right.has-image > .vo-block-hero-inner,
  .vo-block-hero-variant-aurora.vo-block-hero-align-right.has-image > .vo-block-hero-inner { grid-column: 1; }
}

/* Section band: aurora --------------------------------------------- */
.vo-block[data-vo-tint="aurora"]::before {
  background:
    radial-gradient(40% 70% at 6% 10%, color-mix(in srgb, var(--brand-primary, #5b3df5) 16%, transparent), transparent 70%),
    radial-gradient(34% 60% at 96% 12%, rgba(6, 182, 212, 0.14), transparent 70%),
    radial-gradient(46% 70% at 62% 104%, rgba(255, 79, 163, 0.12), transparent 70%),
    color-mix(in srgb, var(--brand-primary, #5b3df5) 3%, var(--brand-bg, #ffffff));
  border-top-color: transparent;
  border-bottom-color: transparent;
}
/* Glow bands fade in and out instead of starting on a hard line. */
.vo-block:is([data-vo-tint="aurora"], [data-vo-tint="nebula"])::before {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(56px, 8vw, 110px), #000 calc(100% - clamp(56px, 8vw, 110px)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 clamp(56px, 8vw, 110px), #000 calc(100% - clamp(56px, 8vw, 110px)), transparent 100%);
}
.dark-mode .vo-block[data-vo-tint="aurora"]::before {
  background:
    radial-gradient(40% 70% at 6% 10%, color-mix(in srgb, var(--brand-primary, #5b3df5) 26%, transparent), transparent 70%),
    radial-gradient(34% 60% at 96% 12%, rgba(6, 182, 212, 0.16), transparent 70%),
    radial-gradient(46% 70% at 62% 104%, rgba(255, 79, 163, 0.14), transparent 70%),
    var(--brand-bg, #0f1115);
}

/* Feature card ("spotlight") --------------------------------------- */
/* Cards sharing a row stretch to the tallest one so bento grids line up. */
.vo-block-slot:has(> .vo-block-spotlight) { align-self: stretch; }
.vo-block-spotlight {
  --spot-a: var(--brand-primary, #5b3df5);
  --spot-b: color-mix(in srgb, var(--brand-primary, #5b3df5) 58%, #ff4fa3);
  --spot-soft: color-mix(in srgb, var(--brand-primary, #5b3df5) 8%, #ffffff);
  --spot-ink: color-mix(in srgb, var(--brand-primary, #5b3df5) 82%, #0f1030);
  position: relative;
  isolation: isolate;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 240px;
  margin: 6px 5px;
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: 26px;
  overflow: hidden;
  box-sizing: border-box;
  color: #0f1030;
}
.vo-block-spotlight[data-accent="violet"] { --spot-a: #5b3df5; --spot-b: #8b5cf6; --spot-soft: #f1edff; --spot-ink: #4326d9; }
.vo-block-spotlight[data-accent="blue"]   { --spot-a: #1d4ed8; --spot-b: #0e8fb3; --spot-soft: #e8f1ff; --spot-ink: #1d4ed8; }
.vo-block-spotlight[data-accent="pink"]   { --spot-a: #be185d; --spot-b: #db2777; --spot-soft: #ffeef6; --spot-ink: #be185d; }
.vo-block-spotlight[data-accent="amber"]  { --spot-a: #b45309; --spot-b: #d9480f; --spot-soft: #fff4e2; --spot-ink: #a14a07; }
.vo-block-spotlight[data-accent="green"]  { --spot-a: #047857; --spot-b: #0d9488; --spot-soft: #e7f8f1; --spot-ink: #047857; }
.vo-block-spotlight-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.vo-block-spotlight-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--spot-a), var(--spot-b));
  color: #ffffff;
  box-shadow: 0 12px 24px -12px var(--spot-a);
}
.vo-block-spotlight-icon svg { width: 22px; height: 22px; }
.vo-block-spotlight-eyebrow {
  margin: 0;
  color: var(--spot-ink);
  font: 700 11.5px/1.2 var(--brand-body-font, Inter, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.vo-block-spotlight-title {
  margin: 0;
  font-family: var(--brand-heading-font, Inter, sans-serif);
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: inherit;
}
.vo-block-spotlight-text { margin: 0; max-width: 46ch; color: #4a4d68; font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.vo-block-spotlight-link {
  align-self: flex-start;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 16px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--spot-ink);
  font: 700 13px/1 var(--brand-body-font, Inter, sans-serif);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 16, 48, 0.06), 0 8px 18px -10px rgba(15, 16, 48, 0.25);
  transition: transform .15s ease;
}
.vo-block-spotlight-link:hover { transform: translateY(-1px); }
.vo-block-spotlight-link:focus-visible { outline: 3px solid var(--spot-a); outline-offset: 3px; }
.vo-block-spotlight-media { position: relative; z-index: 1; display: block; width: 100%; margin-top: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; }
/* soft: tinted card with a gradient icon */
.vo-block-spotlight-soft {
  background:
    radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--spot-b) 16%, transparent), transparent 70%),
    var(--spot-soft);
  border: 1px solid color-mix(in srgb, var(--spot-a) 12%, transparent);
}
/* vivid: deep gradient card with light type */
.vo-block-spotlight-vivid {
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(255, 255, 255, 0.22), transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(255, 79, 163, 0.28), transparent 70%),
    linear-gradient(140deg, var(--spot-a), var(--spot-b));
  color: #ffffff;
  box-shadow: 0 30px 60px -34px var(--spot-a);
}
.vo-block-spotlight-vivid .vo-block-spotlight-icon { background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
.vo-block-spotlight-vivid :is(.vo-block-spotlight-eyebrow, .vo-block-spotlight-text) { color: rgba(255, 255, 255, 0.9); }
/* photo: full-bleed photograph with type over a soft scrim */
.vo-block-spotlight-photo { justify-content: flex-end; min-height: 340px; color: #ffffff; background: #1b1446; }
.vo-block-spotlight-photo .vo-block-spotlight-media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; border-radius: 0; }
.vo-block-spotlight-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(15, 16, 48, 0.05) 18%, rgba(15, 16, 48, 0.86) 100%), linear-gradient(135deg, color-mix(in srgb, var(--spot-a) 30%, transparent), transparent 60%);
}
.vo-block-spotlight-photo :is(.vo-block-spotlight-eyebrow, .vo-block-spotlight-text) { color: rgba(255, 255, 255, 0.9); }
.dark-mode .vo-block-spotlight-soft { background: color-mix(in srgb, var(--spot-a) 16%, #14142a); border-color: rgba(255, 255, 255, 0.08); color: #f5f3ff; }
.dark-mode .vo-block-spotlight-soft .vo-block-spotlight-text { color: rgba(245, 243, 255, 0.78); }
.dark-mode .vo-block-spotlight-soft .vo-block-spotlight-eyebrow { color: color-mix(in srgb, var(--spot-a) 45%, #ffffff); }
@media (max-width: 720px) {
  .vo-block-spotlight { margin: 6px 0; min-height: 0; }
  .vo-block-spotlight-photo { min-height: 300px; }
}

/* Catalog theme: Prism (builder + live /order markup) --------------- */
.vo-block-catalog-theme-prism.vo-block-catalog {
  background:
    /* Glows fade out at both edges so the catalog meets its neighbours softly. */
    linear-gradient(to bottom, var(--vo-cat-bg, #fbfaff) 0, transparent 160px, transparent calc(100% - 160px), var(--vo-cat-bg, #fbfaff) 100%),
    radial-gradient(40% 45% at 4% 0%, color-mix(in srgb, var(--vo-cat-accent) 14%, transparent), transparent 70%),
    radial-gradient(34% 40% at 98% 4%, rgba(6, 182, 212, 0.12), transparent 70%),
    radial-gradient(40% 40% at 70% 100%, rgba(255, 79, 163, 0.10), transparent 70%),
    var(--vo-cat-bg, #fbfaff);
}
.vo-builder-page .vo-block-slot-full > .vo-block-catalog-theme-prism.vo-block-catalog {
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(24px, calc(50vw - 600px));
  padding-right: max(24px, calc(50vw - 600px));
}
.vo-block-catalog-theme-prism.vo-block-catalog { padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 56px) clamp(40px, 5vw, 72px); border-radius: 0; gap: 30px; }
.vo-block-catalog-theme-prism .vo-block-catalog-hero { background: none; padding: 4px 0; gap: 16px; }
.vo-block-catalog-theme-prism .vo-block-catalog-heading {
  font-family: var(--vo-cat-heading-font);
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  background: linear-gradient(100deg, var(--vo-cat-ink) 0%, var(--vo-cat-ink) 40%, var(--vo-cat-accent) 72%, #ff4fa3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vo-block-catalog-theme-prism .vo-block-catalog-sub { font-size: 17px; max-width: 36rem; }
.vo-block-catalog-theme-prism .vo-block-catalog-search {
  background: var(--brand-search-bg-override, rgba(255, 255, 255, 0.9));
  border: 1px solid rgba(15, 16, 48, 0.10);
  box-shadow: 0 1px 2px rgba(15, 16, 48, 0.04), 0 14px 34px -20px color-mix(in srgb, var(--vo-cat-accent) 55%, transparent);
}
.vo-block-catalog-theme-prism .vo-block-catalog-search { padding: 14px 20px; width: min(540px, 100%); }
.vo-block-catalog-theme-prism .vo-block-catalog-notice {
  background: color-mix(in srgb, var(--vo-cat-accent) 7%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--vo-cat-accent) 18%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--vo-cat-accent) 70%, #0f1030);
  font-weight: 600;
}
.vo-block-catalog-theme-prism .vo-block-catalog-statusbar { background: transparent; border: 0; }
.vo-block-catalog-theme-prism .vo-block-catalog-results { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vo-cat-muted); }
.vo-block-catalog-theme-prism .vo-block-catalog-cat { font-weight: 600; }
.vo-block-catalog-theme-prism .vo-block-catalog-cats-pills .vo-block-catalog-cat {
  padding: 10px 18px;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(15, 16, 48, 0.04);
}
.vo-block-catalog-theme-prism[data-cat-active-style="fill"] .vo-block-catalog-cat.is-active {
  background: linear-gradient(135deg, var(--vo-cat-accent), color-mix(in srgb, var(--vo-cat-accent) 55%, #ff4fa3)) !important;
  border-color: transparent !important;
  color: var(--brand-button-text, #ffffff) !important;
  box-shadow: 0 12px 24px -14px var(--vo-cat-accent);
}
.vo-block-catalog-theme-prism .vo-block-catalog-card { padding: 8px; }
.vo-block-catalog-theme-prism .vo-block-catalog-card-media { border-radius: 16px; aspect-ratio: 5 / 4; background: #f1edff; }
.vo-block-catalog-theme-prism .vo-block-catalog-card-body { padding: 14px 10px 8px; }
.vo-block-catalog-theme-prism .vo-block-catalog-card-price {
  font-weight: 750;
  background: linear-gradient(135deg, var(--vo-cat-accent), color-mix(in srgb, var(--vo-cat-accent) 55%, #ff4fa3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vo-block-catalog-theme-prism .vo-block-catalog-card-add,
.vo-block-catalog-theme-prism .vo-block-catalog-cta {
  background: linear-gradient(135deg, var(--vo-cat-accent), color-mix(in srgb, var(--vo-cat-accent) 55%, #ff4fa3)) !important;
  color: var(--brand-button-text, #ffffff) !important;
  border-radius: 999px;
  font-family: var(--vo-cat-body-font);
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 12px 24px -14px var(--vo-cat-accent);
}
.vo-block-catalog-theme-prism .vo-block-catalog-card-add { padding: 9px 16px; font-size: 12.5px; }
.vo-block-catalog-theme-prism .vo-block-catalog-cta { padding: 15px 30px; }
.vo-block-catalog-theme-prism .vo-block-catalog-card.is-text-only {
  border-top: 0;
  background-image: radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--vo-cat-accent) 12%, transparent), transparent 70%), radial-gradient(60% 60% at 0% 100%, rgba(255, 79, 163, 0.08), transparent 70%) !important;
}
@media (max-width: 720px) {
  .vo-block-catalog-theme-prism.vo-block-catalog { gap: 24px; }
}


/* ============================================================
   EDITORIAL KIT (2026-09) — Folio masthead hero, Statement block,
   editorial Feature cards and the Folio catalog theme. Paired with
   the Starter+ Folio page templates; each piece works on its own.
   ============================================================ */

/* Hero: folio (magazine masthead) ------------------------------------ */
.vo-block-hero-variant-folio,
.vo-block-hero-variant-folio.has-image {
  box-sizing: border-box;
  margin: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
  column-gap: clamp(32px, 5vw, 88px);
  row-gap: clamp(22px, 3vw, 36px);
  align-items: end;
  padding: calc(clamp(36px, 5vw, 72px) + var(--vo-hero-top-offset, 0px)) max(24px, calc(50vw - 580px)) clamp(40px, 5vw, 72px);
  background: var(--brand-bg, #f4f0e8);
  background-image: none;
  color: var(--ink, #161412);
}
.vo-block-hero-variant-folio .vo-block-hero-overlay,
.vo-block-hero-variant-folio .vo-block-hero-stamp { display: none; }
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-folio > .vo-block-hero-inner,
.vo-block-hero-variant-folio > .vo-block-hero-inner { display: contents; }
.vo-block-hero-variant-folio .vo-block-hero-eyebrow {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid currentColor;
  background: none;
  color: inherit;
  opacity: 1;
  font: 600 11.5px/1.2 var(--brand-body-font, Inter, sans-serif);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.vo-block-hero-variant-folio .vo-block-hero-eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  background: var(--brand-primary, #c2412d);
}
.vo-block-hero-variant-folio .vo-block-hero-title {
  grid-column: 1;
  grid-row: 2 / span 2;
  align-self: end;
  margin: 0;
  max-width: 13ch;
  font-family: var(--brand-heading-font, "Fraunces", Georgia, serif);
  font-size: clamp(52px, 8.2vw, 128px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: inherit;
}
.vo-block-hero-variant-folio .vo-block-hero-sub {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  margin: 0;
  max-width: 34ch;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  color: var(--muted, #6b645a);
  font: 400 16.5px/1.65 var(--brand-body-font, Inter, sans-serif);
  opacity: 1;
}
.vo-block-hero-variant-folio .vo-block-hero-cta {
  grid-column: 2;
  grid-row: 3;
  justify-self: start;
  align-self: end;
  margin: 0;
  padding: 16px 26px;
  border-radius: 0;
  font: 600 12px/1 var(--brand-body-font, Inter, sans-serif);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.vo-block-hero-variant-folio .vo-block-hero-cta-primary,
.vo-block-hero-variant-folio.has-image .vo-block-hero-cta-primary {
  background: var(--ink, #161412);
  color: var(--brand-bg, #f4f0e8);
  box-shadow: none;
}
.vo-block-hero-variant-folio .vo-block-hero-cta-primary:hover { background: var(--brand-primary, #c2412d); color: var(--brand-button-text, #fff); }
.vo-block-hero-variant-folio.has-image::after {
  content: "";
  grid-column: 1 / -1;
  grid-row: 4;
  margin-top: clamp(8px, 1.5vw, 20px);
  width: 100%;
  aspect-ratio: 21 / 9;
  background: var(--vo-hero-image) center / cover no-repeat;
}
.vo-block-hero-variant-folio.vo-block-hero-h-sm.has-image::after { aspect-ratio: 3 / 1; }
.vo-block-hero-variant-folio.vo-block-hero-h-lg.has-image::after { aspect-ratio: 16 / 8; }
.vo-builder-preview-root .vo-block-hero-variant-folio {
  width: var(--vo-bleed-w, 100%);
  max-width: none;
  margin-left: calc(50% - var(--vo-bleed-w, 100%) / 2) !important;
  margin-right: 0 !important;
  padding-left: clamp(24px, 5vw, 64px);
  padding-right: clamp(24px, 5vw, 64px);
}
.vo-builder-page:has(> .vo-builder-blocks > .vo-block-slot:first-child > .vo-block-hero-variant-folio) { padding-top: 0; }
@media (max-width: 820px) {
  .vo-block-hero-variant-folio,
  .vo-block-hero-variant-folio.has-image { grid-template-columns: minmax(0, 1fr); }
  .vo-block-hero-variant-folio .vo-block-hero-title { grid-column: 1; grid-row: 2; }
  .vo-block-hero-variant-folio .vo-block-hero-sub { grid-column: 1; grid-row: 3; }
  .vo-block-hero-variant-folio .vo-block-hero-cta { grid-column: 1; grid-row: 4; }
  .vo-block-hero-variant-folio.has-image::after { grid-row: 5; aspect-ratio: 4 / 3; }
}

/* Statement ----------------------------------------------------------- */
.vo-block-statement {
  margin: 0;
  padding: clamp(64px, 9vw, 128px) clamp(8px, 2vw, 24px);
  color: var(--ink, #161412);
}
.vo-block-statement-inner { max-width: 980px; margin: 0 auto; display: grid; gap: 22px; }
.vo-block-statement-center .vo-block-statement-inner { justify-items: center; text-align: center; }
.vo-block-statement-left .vo-block-statement-inner { max-width: 1120px; justify-items: start; text-align: left; }
.vo-block-statement-eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--vo-eyebrow-color, var(--vo-brand-text, var(--brand-primary, #c2412d)));
  font: 600 11.5px/1.2 var(--brand-body-font, Inter, sans-serif);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.vo-block-statement-eyebrow::before,
.vo-block-statement-center .vo-block-statement-eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.vo-block-statement-text { margin: 0; }
.vo-block-statement-text p {
  margin: 0;
  font-family: var(--brand-heading-font, "Fraunces", Georgia, serif);
  font-size: clamp(30px, 4.3vw, 60px);
  font-weight: var(--vo-heading-weight, 400);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.vo-block-statement-text p::before { content: "\201C"; color: var(--vo-brand-text, var(--brand-primary, #c2412d)); margin-right: .04em; }
.vo-block-statement-text p::after { content: "\201D"; color: var(--vo-brand-text, var(--brand-primary, #c2412d)); margin-left: .02em; }
.vo-on-dark .vo-block-statement-text p::before,
.vo-on-dark .vo-block-statement-text p::after { color: var(--vo-icon-color, #efe4cf); }
.vo-block-statement-attribution {
  margin: 4px 0 0;
  color: var(--muted, #6b645a);
  font: 600 12px/1.3 var(--brand-body-font, Inter, sans-serif);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.vo-block-statement-attribution::before { content: "— "; }
.vo-block-statement-link {
  margin-top: 8px;
  color: inherit;
  font: 600 12px/1 var(--brand-body-font, Inter, sans-serif);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
}
.vo-block-statement-link:hover { color: var(--vo-brand-text, var(--brand-primary, #c2412d)); }
.vo-block-statement .vo-cta-arrow { display: none; }

/* Feature card: editorial --------------------------------------------- */
.vo-block-spotlight-editorial {
  min-height: 0;
  padding: 0 0 6px;
  gap: 0;
  border-radius: 0;
  background: transparent;
  border-top: 1px solid var(--ink, #161412);
  color: var(--ink, #161412);
  /* Editorial columns always open with air above their hairline. */
  margin: clamp(28px, 4vw, 52px) 12px 6px;
}
.vo-block-spotlight-editorial .vo-block-spotlight-media {
  order: -1;
  margin: 18px 0 20px;
  aspect-ratio: 4 / 3;
  border-radius: 0;
}
.vo-block-spotlight-editorial .vo-block-spotlight-body { padding-top: 16px; gap: 10px; }
.vo-block-spotlight-editorial.has-image .vo-block-spotlight-body { padding-top: 0; }
.vo-block-spotlight-editorial .vo-block-spotlight-icon {
  width: auto;
  height: auto;
  margin: 0 0 4px;
  display: inline-flex;
  justify-content: flex-start;
  background: none;
  box-shadow: none;
  color: var(--vo-brand-text, var(--brand-primary, #c2412d));
}
.vo-block-spotlight-editorial .vo-block-spotlight-icon svg { width: 26px; height: 26px; }
.vo-block-spotlight-editorial .vo-block-spotlight-eyebrow { color: var(--vo-eyebrow-color, var(--vo-brand-text, var(--brand-primary, #c2412d))); letter-spacing: .2em; font-weight: 600; }
.vo-block-spotlight-editorial .vo-block-spotlight-title {
  font-family: var(--brand-heading-font, "Fraunces", Georgia, serif);
  font-size: clamp(24px, 2.3vw, 34px);
  font-weight: var(--vo-heading-weight, 400);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.vo-block-spotlight-editorial .vo-block-spotlight-text { color: var(--muted, #6b645a); font-size: 15.5px; line-height: 1.7; }
.vo-block-spotlight-editorial .vo-block-spotlight-link {
  margin-top: 10px;
  padding: 0 0 5px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  border-bottom: 1px solid currentColor;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.vo-block-spotlight-editorial .vo-block-spotlight-link:hover { color: var(--vo-brand-text, var(--brand-primary, #c2412d)); transform: none; }
.vo-block-spotlight-editorial .vo-cta-arrow { display: none; }
@media (max-width: 720px) { .vo-block-spotlight-editorial { margin: 6px 0 18px; } }

/* Catalog theme: Folio (builder + live /order markup) ------------------ */
.vo-block-catalog-theme-folio.vo-block-catalog { background: var(--vo-cat-bg, #f4f0e8); }
.vo-block-catalog-theme-folio.vo-block-catalog { padding: clamp(40px, 5vw, 72px) clamp(20px, 4vw, 56px) clamp(40px, 5vw, 72px); border-radius: 0; gap: 30px; }
.vo-builder-page .vo-block-slot-full > .vo-block-catalog-theme-folio.vo-block-catalog {
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(24px, calc(50vw - 580px));
  padding-right: max(24px, calc(50vw - 580px));
}
.vo-block-catalog-theme-folio .vo-block-catalog-hero {
  background: none;
  justify-items: start;
  text-align: left;
  padding: 16px 0 0;
  border-top: 1px solid var(--vo-cat-ink);
  border-radius: 0;
  gap: 14px;
}
.vo-block-catalog-theme-folio .vo-block-catalog-heading {
  font-family: var(--vo-cat-heading-font);
  font-size: clamp(48px, 7vw, 104px);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -0.035em;
  color: var(--vo-cat-ink);
}
.vo-block-catalog-theme-folio .vo-block-catalog-sub { max-width: 42ch; margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--vo-cat-muted); }
.vo-block-catalog-theme-folio .vo-block-catalog-search {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--vo-cat-ink);
  border-radius: 0;
  box-shadow: none;
}
.vo-block-catalog-theme-folio .vo-block-catalog-search { width: min(560px, 100%); padding: 10px 2px; }
.vo-block-catalog-theme-folio .vo-block-catalog-notice { background: transparent; border: 0; padding: 0; color: var(--vo-cat-muted); font-style: italic; font-family: var(--vo-cat-heading-font); font-size: 17px; }
.vo-block-catalog-theme-folio .vo-block-catalog-statusbar { justify-content: flex-start; background: transparent; border: 0; }
.vo-block-catalog-theme-folio .vo-block-catalog-results { font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--vo-cat-muted); }
.vo-block-catalog-theme-folio.vo-block-catalog-cats-pos-top .vo-block-catalog-cats { justify-content: flex-start; }
.vo-block-catalog-theme-folio .vo-block-catalog-cat { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--vo-cat-muted); }
.vo-block-catalog-theme-folio .vo-block-catalog-cats-underline .vo-block-catalog-cat.is-active {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid var(--vo-cat-accent) !important;
  border-radius: 0 !important;
  color: var(--vo-cat-ink) !important;
}
/* Numbered listings: No. 01, No. 02 … */
.vo-block-catalog-theme-folio :is(.vo-block-catalog-grid, .vo-block-catalog-magazine-rest) { counter-reset: folio-item; column-gap: clamp(20px, 3vw, 40px); row-gap: clamp(36px, 4vw, 56px); }
.vo-block-catalog-theme-folio .vo-block-catalog-card { counter-increment: folio-item; border-radius: 0; box-shadow: none; }
.vo-block-catalog-theme-folio .vo-block-catalog-card:hover { transform: none; }
.vo-block-catalog-theme-folio .vo-block-catalog-card-name::before {
  content: "No. " counter(folio-item, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  color: var(--vo-cat-accent);
  font: 600 11px/1 var(--vo-cat-body-font);
  letter-spacing: .2em;
}
.vo-block-catalog-theme-folio .vo-block-catalog-card-media { aspect-ratio: 4 / 5; border-radius: 0; background: #e7e0d2; }
.vo-block-catalog-theme-folio .vo-block-catalog-card-body { padding: 18px 0 0; border-top: 0; }
.vo-block-catalog-theme-folio .vo-block-catalog-card-name {
  font-family: var(--vo-cat-heading-font) !important;
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.vo-block-catalog-theme-folio .vo-block-catalog-card-price {
  font-family: var(--vo-cat-body-font) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--vo-cat-ink);
}
.vo-block-catalog-theme-folio .vo-block-catalog-card-desc {
  font-family: var(--vo-cat-body-font) !important;
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: var(--vo-cat-muted);
}
.vo-block-catalog-theme-folio .vo-block-catalog-card-add,
.vo-block-catalog-theme-folio .vo-block-catalog-card-style-editorial .vo-block-catalog-card-add {
  margin-top: 12px;
  padding: 0 0 4px;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--vo-cat-ink);
  color: var(--vo-cat-ink);
  font: 600 11px/1 var(--vo-cat-body-font);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
}
.vo-block-catalog-theme-folio .vo-block-catalog-card:hover .vo-block-catalog-card-add { color: var(--vo-cat-accent); border-bottom-color: var(--vo-cat-accent); }
.vo-block-catalog-theme-folio .vo-block-catalog-card.is-text-only {
  border-top: 1px solid var(--vo-cat-ink) !important;
  background-image: none !important;
  min-height: 0;
}
.vo-block-catalog-theme-folio .vo-block-catalog-cta {
  background: var(--vo-cat-ink) !important;
  color: var(--vo-cat-button-text) !important;
  border-radius: 0;
  font-family: var(--vo-cat-body-font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.vo-block-catalog-theme-folio .vo-block-catalog-cta { padding: 16px 30px; }
.vo-block-catalog-theme-folio .vo-block-catalog-cta:hover { background: var(--vo-cat-accent) !important; }
@media (max-width: 720px) {
  /* Two columns on phones, like a magazine's listings page. */
  .vo-block-catalog-theme-folio .vo-block-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 32px; }
  .vo-block-catalog-theme-folio .vo-block-catalog-card-name { font-size: 18px; }
  .vo-block-catalog-theme-folio .vo-block-catalog-card-desc { font-size: 13px; }
}


/* ============================================================
   COSMOS KIT (2026-09) — the Starry sky backdrop, Cosmos hero,
   Nebula section band, Glass feature cards and the Cosmos catalog
   theme. Paired with the Starter+ Cosmos page templates; each
   piece also works on its own.
   ============================================================ */

/* Starry sky -----------------------------------------------------------
   The section renders no box of its own: its slot dissolves, the page
   wrapper becomes the positioning root, and the sky fills the whole page
   behind every section. The sky layer is sticky, so it stays in view while
   the page scrolls over it, and its star layers drift with transforms only. */
.vo-block-slot:has(> .vo-starfield) { display: contents; }
:is(.vo-builder-page, .vo-order-page-surface):has(.vo-starfield) { position: relative; isolation: isolate; }
/* On /order the sections share one surface, so the sky spans all of them. */
.vo-order-page-surface :is(.vo-builder-page, .tenant-storefront):has(.vo-starfield) { position: static; isolation: auto; }
@media (max-width: 720px) { .vo-block-slot.vo-hide-mobile:has(> .vo-starfield) { display: none; } }
@media (min-width: 721px) and (max-width: 1024px) { .vo-block-slot.vo-hide-tablet:has(> .vo-starfield) { display: none; } }
@media (min-width: 1025px) { .vo-block-slot.vo-hide-desktop:has(> .vo-starfield) { display: none; } }
.vo-starfield {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -2;
  width: var(--vo-bleed-w, 100vw);
  margin-left: calc(var(--vo-bleed-w, 100vw) / -2);
  overflow: clip;
  pointer-events: none;
  border-radius: inherit;
}
.vo-starfield-backdrop-space { background: #05060f; }
.vo-starfield-sky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  max-height: 100%;
  overflow: clip;
}
.vo-starfield-backdrop-space .vo-starfield-sky {
  background:
    radial-gradient(120% 70% at 50% -12%, #12163d 0%, transparent 62%),
    radial-gradient(90% 60% at 50% 118%, #0c0e2c 0%, transparent 60%);
}
.vo-starfield-sky > span { position: absolute; display: block; }
.vo-starfield-layer {
  --vo-star-tile: 280px;
  --vo-star-time: 420s;
  top: calc(var(--vo-star-tile) * -1);
  right: calc(var(--vo-star-tile) * -2);
  bottom: calc(var(--vo-star-tile) * -1);
  left: calc(var(--vo-star-tile) * -1);
  background-repeat: repeat;
  background-size: var(--vo-star-tile) var(--vo-star-tile);
  will-change: transform;
  animation: vo-starfield-drift var(--vo-star-time) linear infinite;
}
.vo-starfield-far { background-image: radial-gradient(1px 1px at 0px 258px, rgba(255, 255, 255, 0.43) 40%, transparent 100%), radial-gradient(1px 1px at 59px 204px, rgba(255, 255, 255, 0.54) 40%, transparent 100%), radial-gradient(1px 1px at 92px 211px, rgba(255, 255, 255, 0.64) 40%, transparent 100%), radial-gradient(1px 1px at 152px 192px, rgba(255, 255, 255, 0.59) 40%, transparent 100%), radial-gradient(1px 1px at 229px 68px, rgba(255, 255, 255, 0.47) 40%, transparent 100%), radial-gradient(1px 1px at 198px 195px, rgba(255, 255, 255, 0.32) 40%, transparent 100%), radial-gradient(1px 1px at 191px 131px, rgba(255, 255, 255, 0.72) 40%, transparent 100%), radial-gradient(1px 1px at 226px 34px, rgba(255, 255, 255, 0.53) 40%, transparent 100%), radial-gradient(1px 1px at 258px 193px, rgba(255, 255, 255, 0.59) 40%, transparent 100%), radial-gradient(1px 1px at 162px 255px, rgba(255, 255, 255, 0.71) 40%, transparent 100%), radial-gradient(1px 1px at 104px 94px, rgba(255, 255, 255, 0.68) 40%, transparent 100%), radial-gradient(1px 1px at 93px 43px, rgba(255, 255, 255, 0.43) 40%, transparent 100%), radial-gradient(1px 1px at 120px 83px, rgba(255, 255, 255, 0.72) 40%, transparent 100%), radial-gradient(1px 1px at 156px 204px, rgba(255, 255, 255, 0.70) 40%, transparent 100%), radial-gradient(1px 1px at 16px 77px, rgba(255, 255, 255, 0.55) 40%, transparent 100%), radial-gradient(1px 1px at 142px 118px, rgba(255, 255, 255, 0.39) 40%, transparent 100%), radial-gradient(1px 1px at 255px 15px, rgba(255, 255, 255, 0.46) 40%, transparent 100%), radial-gradient(1px 1px at 96px 186px, rgba(255, 255, 255, 0.72) 40%, transparent 100%), radial-gradient(1px 1px at 144px 46px, rgba(255, 255, 255, 0.48) 40%, transparent 100%), radial-gradient(1px 1px at 79px 102px, rgba(255, 255, 255, 0.49) 40%, transparent 100%), radial-gradient(1px 1px at 93px 149px, rgba(255, 255, 255, 0.58) 40%, transparent 100%), radial-gradient(1px 1px at 65px 254px, rgba(255, 255, 255, 0.51) 40%, transparent 100%), radial-gradient(1px 1px at 242px 178px, rgba(255, 255, 255, 0.59) 40%, transparent 100%), radial-gradient(1px 1px at 145px 141px, rgba(255, 255, 255, 0.61) 40%, transparent 100%), radial-gradient(1px 1px at 263px 111px, rgba(255, 255, 255, 0.62) 40%, transparent 100%), radial-gradient(1px 1px at 70px 164px, rgba(255, 255, 255, 0.46) 40%, transparent 100%), radial-gradient(1px 1px at 93px 110px, rgba(255, 255, 255, 0.66) 40%, transparent 100%), radial-gradient(1px 1px at 246px 31px, rgba(255, 255, 255, 0.67) 40%, transparent 100%), radial-gradient(1px 1px at 22px 114px, rgba(255, 255, 255, 0.37) 40%, transparent 100%), radial-gradient(1px 1px at 22px 279px, rgba(255, 255, 255, 0.40) 40%, transparent 100%), radial-gradient(1px 1px at 177px 40px, rgba(255, 255, 255, 0.51) 40%, transparent 100%), radial-gradient(1px 1px at 166px 39px, rgba(255, 255, 255, 0.71) 40%, transparent 100%), radial-gradient(1px 1px at 248px 249px, rgba(255, 255, 255, 0.70) 40%, transparent 100%), radial-gradient(1px 1px at 254px 213px, rgba(255, 255, 255, 0.42) 40%, transparent 100%), radial-gradient(1px 1px at 3px 70px, rgba(255, 255, 255, 0.33) 40%, transparent 100%), radial-gradient(1px 1px at 0px 173px, rgba(255, 255, 255, 0.40) 40%, transparent 100%), radial-gradient(1px 1px at 208px 137px, rgba(255, 255, 255, 0.61) 40%, transparent 100%), radial-gradient(1px 1px at 67px 247px, rgba(255, 255, 255, 0.41) 40%, transparent 100%), radial-gradient(1px 1px at 105px 250px, rgba(255, 255, 255, 0.35) 40%, transparent 100%), radial-gradient(1px 1px at 137px 1px, rgba(255, 255, 255, 0.71) 40%, transparent 100%), radial-gradient(1px 1px at 178px 258px, rgba(255, 255, 255, 0.31) 40%, transparent 100%), radial-gradient(1px 1px at 252px 53px, rgba(255, 255, 255, 0.74) 40%, transparent 100%), radial-gradient(1px 1px at 158px 190px, rgba(255, 255, 255, 0.42) 40%, transparent 100%), radial-gradient(1px 1px at 62px 59px, rgba(255, 255, 255, 0.55) 40%, transparent 100%); }
.vo-starfield-mid { --vo-star-tile: 460px; --vo-star-time: 300s; background-image: radial-gradient(1.4px 1.4px at 0px 375px, rgba(196, 210, 255, 0.86) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 161px 168px, rgba(255, 255, 255, 0.76) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 49px 56px, rgba(196, 210, 255, 0.48) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 253px 166px, rgba(196, 210, 255, 0.66) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 432px 49px, rgba(255, 228, 204, 0.86) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 248px 129px, rgba(255, 255, 255, 0.75) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 29px 154px, rgba(255, 228, 204, 0.63) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 173px 159px, rgba(255, 228, 204, 0.68) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 340px 274px, rgba(255, 255, 255, 0.52) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 440px 390px, rgba(196, 210, 255, 0.85) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 302px 418px, rgba(255, 228, 204, 0.75) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 412px 447px, rgba(255, 255, 255, 0.64) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 50px 15px, rgba(255, 255, 255, 0.62) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 108px 290px, rgba(255, 228, 204, 0.89) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 150px 330px, rgba(255, 255, 255, 0.73) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 64px 239px, rgba(255, 228, 204, 0.51) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 167px 216px, rgba(255, 255, 255, 0.58) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 39px 155px, rgba(255, 255, 255, 0.45) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 212px 444px, rgba(196, 210, 255, 0.53) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 17px 453px, rgba(255, 255, 255, 0.80) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 406px 83px, rgba(255, 228, 204, 0.85) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 437px 186px, rgba(255, 228, 204, 0.81) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 262px 151px, rgba(255, 255, 255, 0.53) 40%, transparent 100%), radial-gradient(1.4px 1.4px at 266px 124px, rgba(255, 255, 255, 0.88) 40%, transparent 100%); }
.vo-starfield-near { --vo-star-tile: 720px; --vo-star-time: 210s; background-image: radial-gradient(2px 2px at 0px 661px, rgba(196, 210, 255, 0.91) 40%, transparent 100%), radial-gradient(7px 7px at 0px 661px, rgba(196, 210, 255, 0.14), transparent 100%), radial-gradient(2px 2px at 125px 651px, rgba(255, 255, 255, 0.80) 40%, transparent 100%), radial-gradient(7px 7px at 125px 651px, rgba(255, 255, 255, 0.14), transparent 100%), radial-gradient(2px 2px at 417px 598px, rgba(255, 255, 255, 0.73) 40%, transparent 100%), radial-gradient(7px 7px at 417px 598px, rgba(255, 255, 255, 0.14), transparent 100%), radial-gradient(2px 2px at 626px 315px, rgba(255, 255, 255, 0.99) 40%, transparent 100%), radial-gradient(7px 7px at 626px 315px, rgba(255, 255, 255, 0.14), transparent 100%), radial-gradient(2px 2px at 460px 593px, rgba(255, 255, 255, 0.86) 40%, transparent 100%), radial-gradient(7px 7px at 460px 593px, rgba(255, 255, 255, 0.14), transparent 100%), radial-gradient(2px 2px at 2px 637px, rgba(255, 228, 204, 0.77) 40%, transparent 100%), radial-gradient(7px 7px at 2px 637px, rgba(255, 228, 204, 0.14), transparent 100%), radial-gradient(2px 2px at 456px 198px, rgba(255, 228, 204, 0.86) 40%, transparent 100%), radial-gradient(7px 7px at 456px 198px, rgba(255, 228, 204, 0.14), transparent 100%), radial-gradient(2px 2px at 189px 564px, rgba(196, 210, 255, 0.98) 40%, transparent 100%), radial-gradient(7px 7px at 189px 564px, rgba(196, 210, 255, 0.14), transparent 100%), radial-gradient(2px 2px at 366px 563px, rgba(255, 228, 204, 0.78) 40%, transparent 100%), radial-gradient(7px 7px at 366px 563px, rgba(255, 228, 204, 0.14), transparent 100%), radial-gradient(2px 2px at 397px 706px, rgba(196, 210, 255, 0.86) 40%, transparent 100%), radial-gradient(7px 7px at 397px 706px, rgba(196, 210, 255, 0.14), transparent 100%), radial-gradient(2px 2px at 306px 310px, rgba(255, 228, 204, 0.89) 40%, transparent 100%), radial-gradient(7px 7px at 306px 310px, rgba(255, 228, 204, 0.14), transparent 100%); }
/* Dense skies add a second, offset copy of the distant stars. */
.vo-starfield-dense .vo-starfield-far::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-position: 137px 91px;
  opacity: .8;
}
.vo-starfield-dense .vo-starfield-mid { opacity: 1; }
.vo-starfield-sparse .vo-starfield-mid { display: none; }
.vo-starfield-sparse .vo-starfield-far { opacity: .6; }
.vo-starfield-glints { inset: 0; background-repeat: repeat; opacity: .85; }
.vo-starfield-glints-a { background-image: radial-gradient(2.2px 2.2px at 1px 776px, rgba(196, 210, 255, 0.86) 40%, transparent 100%), radial-gradient(11px 11px at 1px 776px, rgba(196, 210, 255, 0.14), transparent 100%), radial-gradient(2.2px 2.2px at 57px 93px, rgba(255, 255, 255, 0.93) 40%, transparent 100%), radial-gradient(11px 11px at 57px 93px, rgba(255, 255, 255, 0.14), transparent 100%), radial-gradient(2.2px 2.2px at 125px 818px, rgba(255, 255, 255, 0.91) 40%, transparent 100%), radial-gradient(11px 11px at 125px 818px, rgba(255, 255, 255, 0.14), transparent 100%), radial-gradient(2.2px 2.2px at 198px 65px, rgba(196, 210, 255, 1.00) 40%, transparent 100%), radial-gradient(11px 11px at 198px 65px, rgba(196, 210, 255, 0.14), transparent 100%), radial-gradient(2.2px 2.2px at 806px 84px, rgba(255, 255, 255, 0.86) 40%, transparent 100%), radial-gradient(11px 11px at 806px 84px, rgba(255, 255, 255, 0.14), transparent 100%), radial-gradient(2.2px 2.2px at 842px 446px, rgba(255, 255, 255, 0.97) 40%, transparent 100%), radial-gradient(11px 11px at 842px 446px, rgba(255, 255, 255, 0.14), transparent 100%), radial-gradient(2.2px 2.2px at 798px 668px, rgba(255, 255, 255, 0.97) 40%, transparent 100%), radial-gradient(11px 11px at 798px 668px, rgba(255, 255, 255, 0.14), transparent 100%); background-size: 900px 900px; }
.vo-starfield-glints-b { background-image: radial-gradient(2px 2px at 2px 830px, rgba(255, 255, 255, 0.91) 40%, transparent 100%), radial-gradient(10px 10px at 2px 830px, rgba(255, 255, 255, 0.14), transparent 100%), radial-gradient(2px 2px at 853px 455px, rgba(255, 255, 255, 0.88) 40%, transparent 100%), radial-gradient(10px 10px at 853px 455px, rgba(255, 255, 255, 0.14), transparent 100%), radial-gradient(2px 2px at 1019px 265px, rgba(255, 255, 255, 0.90) 40%, transparent 100%), radial-gradient(10px 10px at 1019px 265px, rgba(255, 255, 255, 0.14), transparent 100%), radial-gradient(2px 2px at 242px 1011px, rgba(255, 255, 255, 0.94) 40%, transparent 100%), radial-gradient(10px 10px at 242px 1011px, rgba(255, 255, 255, 0.14), transparent 100%), radial-gradient(2px 2px at 367px 324px, rgba(255, 255, 255, 0.89) 40%, transparent 100%), radial-gradient(10px 10px at 367px 324px, rgba(255, 255, 255, 0.14), transparent 100%), radial-gradient(2px 2px at 843px 674px, rgba(255, 255, 255, 0.94) 40%, transparent 100%), radial-gradient(10px 10px at 843px 674px, rgba(255, 255, 255, 0.14), transparent 100%); background-size: 1100px 1100px; background-position: 420px 260px; }
.vo-starfield-twinkle .vo-starfield-glints-a { animation: vo-starfield-twinkle 5.5s ease-in-out infinite alternate; }
.vo-starfield-twinkle .vo-starfield-glints-b { animation: vo-starfield-twinkle 7.5s ease-in-out -3s infinite alternate; }
.vo-starfield-nebula {
  --vo-neb-a: rgba(124, 92, 255, .30);
  --vo-neb-b: rgba(56, 189, 248, .14);
  --vo-neb-c: rgba(236, 72, 153, .12);
  inset: -12%;
  background:
    radial-gradient(42% 36% at 16% 20%, var(--vo-neb-a), transparent 70%),
    radial-gradient(40% 34% at 86% 72%, var(--vo-neb-b), transparent 70%),
    radial-gradient(30% 24% at 62% 10%, var(--vo-neb-c), transparent 70%);
  will-change: transform, opacity;
  animation: vo-starfield-breathe 38s ease-in-out infinite alternate;
}
.vo-starfield-glow-teal .vo-starfield-nebula { --vo-neb-a: rgba(20, 184, 166, .26); --vo-neb-b: rgba(59, 130, 246, .18); --vo-neb-c: rgba(167, 139, 250, .12); }
.vo-starfield-glow-rose .vo-starfield-nebula { --vo-neb-a: rgba(244, 63, 94, .22); --vo-neb-b: rgba(168, 85, 247, .20); --vo-neb-c: rgba(251, 146, 60, .12); }
.vo-starfield-glow-brand .vo-starfield-nebula {
  --vo-neb-a: color-mix(in srgb, var(--brand-primary, #8b7bff) 32%, transparent);
  --vo-neb-b: color-mix(in srgb, var(--brand-primary, #8b7bff) 14%, rgba(56, 189, 248, .12));
  --vo-neb-c: color-mix(in srgb, var(--brand-primary, #8b7bff) 12%, transparent);
}
.vo-starfield-glow-none .vo-starfield-nebula { display: none; }
/* An occasional shooting star. */
.vo-starfield-comet {
  top: 14%;
  left: 78%;
  width: 150px;
  height: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95));
  box-shadow: 0 0 8px rgba(200, 210, 255, .6);
  opacity: 0;
  transform-origin: 100% 50%;
  animation: vo-starfield-comet 14s linear 4s infinite;
}
.vo-starfield-speed-drift .vo-starfield-layer { animation-duration: calc(var(--vo-star-time) / 2.5); }
.vo-starfield-speed-drift .vo-starfield-comet { animation-duration: 9s; }
.vo-starfield-speed-still :is(.vo-starfield-layer, .vo-starfield-nebula) { animation: none; }
.vo-starfield-speed-still .vo-starfield-comet { display: none; }
@keyframes vo-starfield-drift {
  to { transform: translate3d(calc(var(--vo-star-tile) * -2), calc(var(--vo-star-tile) * -1), 0); }
}
@keyframes vo-starfield-twinkle { from { opacity: .18; } to { opacity: 1; } }
@keyframes vo-starfield-breathe {
  from { transform: scale(1) translate3d(0, 0, 0); opacity: .85; }
  to { transform: scale(1.08) translate3d(-2%, 1.5%, 0); opacity: 1; }
}
@keyframes vo-starfield-comet {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(156deg); }
  2% { opacity: 1; }
  8% { opacity: 0; transform: translate3d(-360px, 160px, 0) rotate(156deg); }
  100% { opacity: 0; transform: translate3d(-360px, 160px, 0) rotate(156deg); }
}
@media (prefers-reduced-motion: reduce) {
  .vo-starfield :is(.vo-starfield-layer, .vo-starfield-nebula, .vo-starfield-glints) { animation: none !important; }
  .vo-starfield-comet { display: none; }
}
/* Previews that grow their frame to the full page height (template
   thumbnails, the rendered preview) paint a still sky across the page
   instead of pinning a page-sized animated one. */
@media (min-height: 1800px) {
  .vo-starfield-sky { position: absolute; inset: 0; height: auto; max-height: none; }
  .vo-starfield-sky > :is(.vo-starfield-layer, .vo-starfield-nebula, .vo-starfield-glints) { inset: 0; animation: none; will-change: auto; }
  .vo-starfield-nebula { background-size: 100% 1600px; background-repeat: repeat-y; }
  .vo-starfield-comet { display: none; }
}
/* A closing band last on the page still meets the footer when the sky follows it. */
.vo-builder-page:has(> .vo-builder-blocks > .vo-block-slot:last-child > .vo-starfield):has(> .vo-builder-blocks > .vo-block-slot:nth-last-child(2) > :is(.vo-block-cta-band-image, .vo-block-cta-band-minimal[data-vo-tint], [data-vo-tint])) { padding-bottom: 0; }

/* Hero: cosmos ---------------------------------------------------------- */
.vo-block-hero-variant-cosmos,
.vo-block-hero-variant-cosmos.has-image {
  --ink: #eef0ff;
  --muted: rgba(226, 229, 255, .74);
  --vo-cosmos-glow: color-mix(in srgb, var(--brand-primary, #8b7bff) 70%, #ffffff);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding: calc(clamp(88px, 11vw, 150px) + var(--vo-hero-top-offset, 0px)) max(24px, calc(50vw - 580px)) clamp(120px, 14vw, 190px);
  color: var(--ink);
  background: transparent;
}
.vo-block-hero-variant-cosmos.has-image {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  justify-items: stretch;
  padding-bottom: clamp(88px, 11vw, 150px);
  /* No horizon to contain: the photo planet's glow may reach past the section. */
  overflow: visible;
}
.vo-block-hero-variant-cosmos .vo-block-hero-overlay,
.vo-block-hero-variant-cosmos .vo-block-hero-stamp { display: none; }
/* A soft starlight glow behind the headline. */
.vo-block-hero-variant-cosmos::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 44%;
  width: min(900px, 90%);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-primary, #8b7bff) 26%, transparent), transparent);
  pointer-events: none;
}
/* Without a photo, a planet rises along the bottom edge. Its rim and glow
   dissolve through the hero's bottom padding, which holds nothing else. */
.vo-block-hero-variant-cosmos:not(.has-image) {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 130px), transparent 100%);
}
.vo-block-hero-variant-cosmos:not(.has-image)::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: max(1500px, 160%);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, 92%);
  /* Only the top 8% of the planet shows: its body fades into the night sky
     before the hero ends, so there's no cut line above the next section. */
  background: linear-gradient(to bottom, #0d0f2c 0%, rgba(8, 9, 26, .92) 3.5%, rgba(5, 6, 15, .5) 6.2%, rgba(5, 6, 15, 0) 8%);
  box-shadow:
    0 -1px 0 0 rgba(236, 233, 255, .7),
    0 -18px 60px -6px color-mix(in srgb, var(--brand-primary, #8b7bff) 55%, transparent),
    0 -60px 160px -20px color-mix(in srgb, var(--brand-primary, #8b7bff) 30%, rgba(56, 189, 248, .2)),
    inset 0 26px 60px -24px color-mix(in srgb, var(--brand-primary, #8b7bff) 60%, transparent);
  pointer-events: none;
}
/* With a photo, the photo becomes a planet in orbit. */
.vo-block-hero-variant-cosmos.has-image::before {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  left: auto;
  top: auto;
  transform: rotate(-16deg);
  justify-self: center;
  width: 118%;
  max-width: 640px;
  aspect-ratio: 2.7 / 1;
  border-radius: 50%;
  border: 1px solid rgba(214, 208, 255, .28);
  background: radial-gradient(4px 4px at 96% 50%, #ffffff, transparent), radial-gradient(14px 14px at 96% 50%, color-mix(in srgb, var(--brand-primary, #8b7bff) 60%, transparent), transparent);
  box-shadow: 0 0 40px -8px color-mix(in srgb, var(--brand-primary, #8b7bff) 45%, transparent);
}
.vo-block-hero-variant-cosmos.has-image::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: min(100%, 440px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .14), transparent 34%),
    radial-gradient(circle at 70% 76%, rgba(5, 6, 15, .72), transparent 62%),
    var(--vo-hero-image) center / cover no-repeat;
  box-shadow:
    0 0 0 1px rgba(236, 233, 255, .22),
    -10px -8px 40px -6px color-mix(in srgb, var(--brand-primary, #8b7bff) 55%, transparent),
    0 0 120px -10px color-mix(in srgb, var(--brand-primary, #8b7bff) 45%, rgba(56, 189, 248, .25));
  animation: vo-cosmos-float 12s ease-in-out infinite alternate;
}
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-cosmos > .vo-block-hero-inner,
.vo-block-hero-variant-cosmos > .vo-block-hero-inner {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 820px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-cosmos.has-image > .vo-block-hero-inner,
.vo-block-hero-variant-cosmos.has-image > .vo-block-hero-inner { align-items: flex-start; text-align: left; max-width: 600px; }
.vo-block-hero-variant-cosmos.vo-block-hero-align-right.has-image::before,
.vo-block-hero-variant-cosmos.vo-block-hero-align-right.has-image::after { grid-column: 1; }
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-cosmos.vo-block-hero-align-right.has-image > .vo-block-hero-inner,
.vo-block-hero-variant-cosmos.vo-block-hero-align-right.has-image > .vo-block-hero-inner { grid-column: 2; }
.vo-block-hero-variant-cosmos .vo-block-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(214, 208, 255, .24);
  background: rgba(18, 20, 52, .55);
  color: #dcd8ff;
  font: 600 11.5px/1 var(--brand-body-font, Inter, sans-serif);
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: 1;
}
.vo-block-hero-variant-cosmos .vo-block-hero-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--vo-cosmos-glow);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-primary, #8b7bff) 60%, transparent), 0 0 10px var(--vo-cosmos-glow);
  animation: vo-cosmos-pulse 2.6s ease-out infinite;
}
.vo-block-hero-variant-cosmos .vo-block-hero-title {
  margin: 0;
  max-width: 14ch;
  font-family: var(--brand-heading-font, "Space Grotesk", Inter, sans-serif);
  font-size: clamp(46px, 6.6vw, 92px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -0.045em;
  text-wrap: balance;
  background: linear-gradient(180deg, #ffffff 28%, color-mix(in srgb, var(--brand-primary, #8b7bff) 50%, #ffffff) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.vo-block-hero-variant-cosmos .vo-block-hero-sub {
  max-width: 46ch;
  margin: 24px 0 0;
  color: var(--muted);
  font: 400 clamp(16px, 1.4vw, 19px)/1.62 var(--brand-body-font, Inter, sans-serif);
  opacity: 1;
}
.vo-block-hero-variant-cosmos .vo-block-hero-cta {
  margin-top: 38px;
  padding: 16px 30px;
  border-radius: 999px;
  font: 700 14px/1 var(--brand-body-font, Inter, sans-serif);
  letter-spacing: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}
.vo-block-hero-variant-cosmos .vo-block-hero-cta-primary,
.vo-block-hero-variant-cosmos.has-image .vo-block-hero-cta-primary {
  border: 0;
  background: linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--brand-primary, #8b7bff) 38%, #ffffff));
  color: #0b0a1f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 18px 50px -14px color-mix(in srgb, var(--brand-primary, #8b7bff) 85%, transparent);
}
.vo-block-hero-variant-cosmos :is(.vo-block-hero-cta-outline, .vo-block-hero-cta-ghost) { color: #eef0ff; border: 1px solid rgba(214, 208, 255, .34); background: rgba(18, 20, 52, .4); }
.vo-block-hero-variant-cosmos .vo-block-hero-cta:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 22px 60px -12px color-mix(in srgb, var(--brand-primary, #8b7bff) 95%, transparent); }
.vo-block-hero-variant-cosmos.vo-block-hero-h-sm { min-height: 460px; }
.vo-block-hero-variant-cosmos.vo-block-hero-h-md { min-height: clamp(560px, 78vh, 760px); }
.vo-block-hero-variant-cosmos.vo-block-hero-h-lg { min-height: clamp(640px, 92vh, 900px); }
.vo-builder-preview-root .vo-block-hero-variant-cosmos {
  width: var(--vo-bleed-w, 100%);
  max-width: none;
  margin-left: calc(50% - var(--vo-bleed-w, 100%) / 2) !important;
  margin-right: 0 !important;
  padding-left: clamp(24px, 5vw, 64px);
  padding-right: clamp(24px, 5vw, 64px);
}
.vo-builder-page:has(> .vo-builder-blocks > .vo-block-slot:first-child > .vo-block-hero-variant-cosmos) { padding-top: 0; }
.vo-builder-page[data-page-slug] .vo-block-slot-full > .vo-block-hero-variant-cosmos { margin-bottom: clamp(16px, 2.5vw, 36px); }
@keyframes vo-cosmos-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-primary, #8b7bff) 60%, transparent), 0 0 10px var(--vo-cosmos-glow); }
  100% { box-shadow: 0 0 0 10px transparent, 0 0 10px var(--vo-cosmos-glow); }
}
@keyframes vo-cosmos-float { from { transform: translate3d(0, -6px, 0); } to { transform: translate3d(0, 8px, 0); } }
@media (prefers-reduced-motion: reduce) {
  .vo-block-hero-variant-cosmos.has-image::after,
  .vo-block-hero-variant-cosmos .vo-block-hero-eyebrow::before { animation: none; }
}
@media (max-width: 820px) {
  .vo-block-hero-variant-cosmos.has-image { grid-template-columns: minmax(0, 1fr); }
  .vo-block-hero-variant-cosmos.has-image::before,
  .vo-block-hero-variant-cosmos.has-image::after,
  .vo-block-hero-variant-cosmos.vo-block-hero-align-right.has-image::before,
  .vo-block-hero-variant-cosmos.vo-block-hero-align-right.has-image::after { grid-column: 1; grid-row: 2; }
  .vo-block-hero-variant-cosmos.has-image::after { width: min(72%, 320px); }
  .vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-cosmos.vo-block-hero-align-right.has-image > .vo-block-hero-inner,
  .vo-block-hero-variant-cosmos.vo-block-hero-align-right.has-image > .vo-block-hero-inner { grid-column: 1; }
}

/* Section band: nebula --------------------------------------------------- */
.vo-block[data-vo-tint="nebula"]::before {
  background:
    radial-gradient(40% 80% at 0% 0%, color-mix(in srgb, var(--brand-primary, #8b7bff) 22%, transparent), transparent 70%),
    radial-gradient(36% 70% at 100% 100%, rgba(56, 189, 248, .12), transparent 70%),
    linear-gradient(180deg, rgba(14, 16, 44, .74), rgba(8, 9, 28, .62));
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.vo-block[data-vo-tint="nebula"][style*="--vo-tint-bg"]::before { background: var(--vo-tint-bg); }
.vo-block[data-vo-tint="nebula"].vo-on-dark { color: #eef0ff; --ink: #eef0ff; --muted: rgba(226, 229, 255, .74); --vo-eyebrow-color: color-mix(in srgb, var(--brand-primary, #8b7bff) 55%, #ffffff); --vo-icon-color: color-mix(in srgb, var(--brand-primary, #8b7bff) 55%, #ffffff); }

/* Feature card: glass ---------------------------------------------------- */
.vo-block-spotlight-glass {
  --spot-glow: color-mix(in srgb, var(--spot-a) 55%, #ffffff);
  background:
    radial-gradient(80% 60% at 0% 0%, color-mix(in srgb, var(--spot-a) 28%, transparent), transparent 65%),
    linear-gradient(180deg, rgba(22, 24, 60, .74), rgba(10, 11, 30, .74));
  border: 1px solid rgba(214, 208, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -36px rgba(0, 0, 0, .9);
  color: #eef0ff;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.vo-block-spotlight[data-accent="brand"].vo-block-spotlight-glass { --spot-a: var(--brand-primary, #8b7bff); --spot-b: color-mix(in srgb, var(--brand-primary, #8b7bff) 55%, #38bdf8); }
.vo-block-spotlight-glass:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--spot-glow) 40%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 34px 70px -32px color-mix(in srgb, var(--spot-a) 70%, transparent);
}
.vo-block-spotlight-glass .vo-block-spotlight-icon {
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffffff 0 6%, color-mix(in srgb, var(--spot-b) 70%, #ffffff) 24%, var(--spot-a) 72%);
  color: #ffffff;
  box-shadow: 0 0 26px -2px var(--spot-a), inset 0 0 0 1px rgba(255, 255, 255, .28);
}
.vo-block-spotlight-glass .vo-block-spotlight-eyebrow { color: var(--spot-glow); }
.vo-block-spotlight-glass .vo-block-spotlight-title { color: #ffffff; }
.vo-block-spotlight-glass .vo-block-spotlight-text { color: rgba(226, 229, 255, .74); }
.vo-block-spotlight-glass .vo-block-spotlight-link { background: rgba(255, 255, 255, .08); color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.vo-block-spotlight-glass .vo-block-spotlight-link:hover { background: rgba(255, 255, 255, .14); }
.vo-block-spotlight-glass .vo-block-spotlight-media { border-radius: 16px; box-shadow: 0 0 0 1px rgba(214, 208, 255, .16); }
.vo-block-spotlight-glass.has-image .vo-block-spotlight-media { order: -1; margin: 0 0 4px; aspect-ratio: 16 / 10; }
@media (prefers-reduced-motion: reduce) { .vo-block-spotlight-glass:hover { transform: none; } }

/* Sections on a starry page: solid surfaces turn to glass so the sky shows. */
:is(.vo-builder-page, .vo-order-page-surface, .vo-builder-preview-root):has(.vo-starfield) .vo-block-hours-card,
:is(.vo-builder-page, .vo-order-page-surface, .vo-builder-preview-root):has(.vo-starfield) .vo-block-faq-item,
:is(.vo-builder-page, .vo-order-page-surface, .vo-builder-preview-root):has(.vo-starfield) .vo-block-process-steps-cards .vo-block-process-step {
  background: rgba(14, 16, 42, .62);
  border-color: rgba(214, 208, 255, .14);
  color: #eef0ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
:is(.vo-builder-page, .vo-order-page-surface, .vo-builder-preview-root):has(.vo-starfield) :is(.vo-block-hours, .vo-block-faq, .vo-block-process-steps, .vo-block-features, .vo-block-story-split, .vo-block-statement, .vo-block-image-gallery) { --ink: #eef0ff; --muted: rgba(226, 229, 255, .72); color: #eef0ff; }
:is(.vo-builder-page, .vo-order-page-surface, .vo-builder-preview-root):has(.vo-starfield) .vo-block-statement-text p {
  background: linear-gradient(180deg, #ffffff 30%, color-mix(in srgb, var(--brand-primary, #8b7bff) 45%, #ffffff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:is(.vo-builder-page, .vo-order-page-surface, .vo-builder-preview-root):has(.vo-starfield) .vo-block-statement-text p::before,
:is(.vo-builder-page, .vo-order-page-surface, .vo-builder-preview-root):has(.vo-starfield) .vo-block-statement-text p::after { -webkit-text-fill-color: color-mix(in srgb, var(--brand-primary, #8b7bff) 70%, #ffffff); }
:is(.vo-builder-page, .vo-order-page-surface, .vo-builder-preview-root):has(.vo-starfield) .vo-block-story-media { box-shadow: 0 0 0 1px rgba(214, 208, 255, .16), 0 40px 90px -40px color-mix(in srgb, var(--brand-primary, #8b7bff) 60%, transparent); }
:is(.vo-builder-page, .vo-order-page-surface, .vo-builder-preview-root):has(.vo-starfield) .vo-block-cta-band-minimal[data-vo-tint="nebula"] .vo-block-cta-band-btn {
  background: linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--brand-primary, #8b7bff) 38%, #ffffff));
  color: #0b0a1f;
  box-shadow: 0 18px 50px -14px color-mix(in srgb, var(--brand-primary, #8b7bff) 85%, transparent);
}

/* Closing band on nebula: a glowing orbit behind the call to action. */
.vo-block-cta-band-minimal[data-vo-tint="nebula"] .vo-block-cta-band-inner { position: relative; }
.vo-block-cta-band-minimal[data-vo-tint="nebula"] .vo-block-cta-band-inner::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(760px, 100%);
  aspect-ratio: 2.4 / 1;
  transform: translate(-50%, -50%) rotate(-8deg);
  border-radius: 50%;
  border: 1px solid rgba(214, 208, 255, .2);
  box-shadow: 0 0 80px -20px color-mix(in srgb, var(--brand-primary, #8b7bff) 55%, transparent), inset 0 0 80px -30px color-mix(in srgb, var(--brand-primary, #8b7bff) 45%, transparent);
  pointer-events: none;
}
.vo-block-cta-band-minimal[data-vo-tint="nebula"] .vo-block-cta-band-title {
  font-weight: 700;
  letter-spacing: -0.035em;
  background: linear-gradient(180deg, #ffffff 30%, color-mix(in srgb, var(--brand-primary, #8b7bff) 45%, #ffffff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Catalog theme: Cosmos (builder + live /order markup) ------------------ */
.vo-block-catalog-theme-cosmos.vo-block-catalog { background: transparent; padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 56px) clamp(40px, 5vw, 72px); border-radius: 0; gap: 30px; color: var(--vo-cat-ink); }
.vo-builder-page .vo-block-slot-full > .vo-block-catalog-theme-cosmos.vo-block-catalog {
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(24px, calc(50vw - 600px));
  padding-right: max(24px, calc(50vw - 600px));
}
/* Without a sky behind it, the catalog brings its own night backdrop. */
.vo-block-catalog-theme-cosmos.vo-block-catalog:not(:is(.vo-builder-page, .vo-order-page-surface, .vo-builder-preview-root):has(.vo-starfield) *) {
  background:
    linear-gradient(to bottom, var(--vo-cat-bg, #05060f) 0, transparent 140px, transparent calc(100% - 140px), var(--vo-cat-bg, #05060f) 100%),
    radial-gradient(40% 45% at 6% 0%, color-mix(in srgb, var(--vo-cat-accent) 22%, transparent), transparent 70%),
    radial-gradient(34% 40% at 96% 8%, rgba(56, 189, 248, .12), transparent 70%),
    var(--vo-cat-bg, #05060f);
}
.vo-block-catalog-theme-cosmos .vo-block-catalog-hero { background: none; padding: 4px 0; gap: 16px; }
.vo-block-catalog-theme-cosmos .vo-block-catalog-heading {
  font-family: var(--vo-cat-heading-font);
  font-size: clamp(40px, 5.4vw, 68px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  background: linear-gradient(180deg, #ffffff 30%, color-mix(in srgb, var(--vo-cat-accent) 50%, #ffffff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vo-block-catalog-theme-cosmos .vo-block-catalog-sub { font-size: 17px; max-width: 36rem; color: var(--vo-cat-muted); }
.vo-block-catalog-theme-cosmos .vo-block-catalog-search {
  width: min(540px, 100%);
  padding: 14px 20px;
  background: var(--brand-search-bg-override, rgba(16, 18, 44, .7));
  border: 1px solid rgba(167, 155, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 40px -26px color-mix(in srgb, var(--vo-cat-accent) 70%, transparent);
  color: var(--vo-cat-ink);
}
.vo-block-catalog-theme-cosmos .vo-block-catalog-search:focus-within { border-color: color-mix(in srgb, var(--vo-cat-accent) 70%, #ffffff); }
.vo-block-catalog-theme-cosmos .vo-block-catalog-search input { color: var(--vo-cat-ink); }
.vo-block-catalog-theme-cosmos .vo-block-catalog-search input::placeholder { color: var(--vo-cat-muted); }
.vo-block-catalog-theme-cosmos .vo-block-catalog-notice {
  background: rgba(16, 18, 44, .6);
  border: 1px solid rgba(167, 155, 255, .2);
  border-radius: 999px;
  color: #dcd8ff;
  font-weight: 600;
}
.vo-block-catalog-theme-cosmos .vo-block-catalog-statusbar { background: transparent; border: 0; }
.vo-block-catalog-theme-cosmos .vo-block-catalog-results { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vo-cat-muted); }
.vo-block-catalog-theme-cosmos .vo-block-catalog-cat { color: var(--vo-cat-muted); font-weight: 600; }
.vo-block-catalog-theme-cosmos .vo-block-catalog-cat:hover { color: var(--vo-cat-ink); }
.vo-block-catalog-theme-cosmos .vo-block-catalog-cats-pills .vo-block-catalog-cat { padding: 10px 18px; font-size: 14px; }
.vo-block-catalog-theme-cosmos[data-cat-active-style="fill"] .vo-block-catalog-cat.is-active {
  background: linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--vo-cat-accent) 40%, #ffffff)) !important;
  border-color: transparent !important;
  color: #0b0a1f !important;
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--vo-cat-accent) 90%, transparent);
}
.vo-block-catalog-theme-cosmos .vo-block-catalog-card { padding: 8px; }
.vo-block-catalog-theme-cosmos .vo-block-catalog-card-media { border-radius: 14px; aspect-ratio: 5 / 4; background: #0d0f2a; }
.vo-block-catalog-theme-cosmos .vo-block-catalog-card-body { padding: 14px 10px 8px; }
.vo-block-catalog-theme-cosmos .vo-block-catalog-card-name { color: var(--vo-cat-ink); }
.vo-block-catalog-theme-cosmos .vo-block-catalog-card-desc { color: var(--vo-cat-muted); }
.vo-block-catalog-theme-cosmos .vo-block-catalog-card-price {
  font-weight: 700;
  background: linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--vo-cat-accent) 55%, #ffffff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vo-block-catalog-theme-cosmos .vo-block-catalog-card-add,
.vo-block-catalog-theme-cosmos .vo-block-catalog-cta {
  background: linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--vo-cat-accent) 40%, #ffffff)) !important;
  color: #0b0a1f !important;
  border: 0;
  border-radius: 999px;
  font-family: var(--vo-cat-body-font);
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--vo-cat-accent) 90%, transparent);
}
.vo-block-catalog-theme-cosmos .vo-block-catalog-card-add { padding: 9px 16px; font-size: 12.5px; }
.vo-block-catalog-theme-cosmos .vo-block-catalog-cta { padding: 15px 30px; }
.vo-block-catalog-theme-cosmos .vo-block-catalog-card-fallback { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--vo-cat-accent) 40%, #1a1c48), #0b0c24 70%); color: rgba(238, 240, 255, .8); }
.vo-block-catalog-theme-cosmos .vo-block-catalog-card.is-text-only {
  background-image: radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--vo-cat-accent) 22%, transparent), transparent 70%) !important;
}
.vo-block-catalog-live.vo-block-catalog-theme-cosmos .vo-block-catalog-secondary { color: #eef0ff; border-color: rgba(214, 208, 255, .34); }
@media (max-width: 720px) {
  .vo-block-catalog-theme-cosmos.vo-block-catalog { gap: 24px; }
}


/* Hero: timberline --------------------------------------------------- */
.vo-block-hero-variant-timberline {
  --vo-tl-cream: #efe8da;
  --vo-tl-floor: var(--brand-bg, #10201a);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  border-radius: 0;
  display: flex;
  align-items: flex-start;
  padding: calc(clamp(96px, 12vw, 168px) + var(--vo-hero-top-offset, 0px)) 0 clamp(150px, 16vw, 230px);
  color: var(--vo-tl-cream);
  background: var(--vo-tl-floor);
}
.vo-block-hero-variant-timberline.vo-block-hero-h-sm { min-height: clamp(420px, 56vh, 540px); padding-bottom: clamp(96px, 10vw, 140px); }
.vo-block-hero-variant-timberline.vo-block-hero-h-md { min-height: clamp(560px, 80vh, 760px); }
.vo-block-hero-variant-timberline.vo-block-hero-h-lg { min-height: clamp(620px, 92vh, 880px); }
/* The landscape, anchored a little above centre so ridgelines stay in view. */
.vo-block-hero-variant-timberline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--vo-hero-image) center 38% / cover no-repeat;
}
.vo-block-hero-variant-timberline:not(.has-image)::before {
  background:
    radial-gradient(70% 55% at 70% 18%, rgba(255, 240, 214, .55), transparent 70%),
    linear-gradient(180deg, #d9cdb6 0%, #a59a82 26%, #55644f 52%, #22382b 74%, var(--vo-tl-floor) 100%);
}
/* Shade the copy side and let the photo sink into the page below. */
.vo-block-hero-variant-timberline .vo-block-hero-overlay,
.vo-block-hero-variant-timberline:not(.has-image)::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 18, 13, calc(.14 + var(--vo-hero-overlay, .4) * .5)) 0%, rgba(8, 18, 13, calc(var(--vo-hero-overlay, .4) * .25)) 46%, rgba(8, 18, 13, 0) 70%),
    linear-gradient(180deg, rgba(8, 18, 13, 0) 0%, rgba(8, 18, 13, 0) 48%, color-mix(in srgb, var(--vo-tl-floor) 58%, transparent) 76%, var(--vo-tl-floor) 100%);
  pointer-events: none;
}
.vo-block-hero-variant-timberline .vo-block-hero-stamp { display: none; }
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-timberline > .vo-block-hero-inner,
.vo-block-hero-variant-timberline > .vo-block-hero-inner {
  width: 100%;
  max-width: var(--vo-frame-max, 1180px);
  margin: 0 auto;
  padding: 0 var(--vo-section-gutter, 32px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-timberline.vo-block-hero-align-center > .vo-block-hero-inner,
.vo-block-hero-variant-timberline.vo-block-hero-align-center > .vo-block-hero-inner { align-items: center; text-align: center; }
.vo-block-hero-variant-timberline .vo-block-hero-eyebrow {
  display: block;
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--vo-tl-cream) 92%, transparent);
  font: 600 clamp(13px, 1.1vw, 16px)/1 var(--brand-body-font, Inter, sans-serif);
  letter-spacing: .42em;
  text-transform: uppercase;
  opacity: 1;
  /* Small type over a bright sky: a soft shadow keeps it legible. */
  text-shadow: 0 1px 2px rgba(4, 10, 7, .45), 0 2px 18px rgba(4, 10, 7, .55);
}
.vo-block-hero-variant-timberline .vo-block-hero-title {
  margin: 0;
  max-width: 6.4em;
  color: var(--vo-tl-cream);
  font-family: "Barlow Condensed", "Oswald", "Arial Narrow", "Inter", sans-serif;
  font-size: clamp(52px, 5.9vw, 104px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: .004em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 2px 34px rgba(4, 10, 7, .28);
}
.vo-block-hero-variant-timberline .vo-block-hero-sub {
  margin: clamp(18px, 2vw, 26px) 0 0;
  max-width: 31em;
  color: color-mix(in srgb, var(--vo-tl-cream) 92%, transparent);
  font: 400 clamp(16px, 1.35vw, 19px)/1.5 var(--brand-body-font, Inter, sans-serif);
  opacity: 1;
}
.vo-block-hero-variant-timberline .vo-block-hero-cta {
  margin-top: clamp(24px, 2.6vw, 34px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: max(6px, min(var(--brand-radius, 8px), 10px));
  font: 700 15px/1 var(--brand-body-font, Inter, sans-serif);
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.vo-block-hero.vo-block-hero-variant-timberline .vo-block-hero-cta.vo-block-hero-cta-primary {
  background: var(--brand-primary, #c49a63) !important;
  color: var(--brand-button-text, #1a140c) !important;
  border: 0;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9);
}
.vo-block-hero-variant-timberline :is(.vo-block-hero-cta-outline, .vo-block-hero-cta-ghost) {
  background: rgba(10, 20, 15, .35);
  color: var(--vo-tl-cream);
  border: 1px solid color-mix(in srgb, var(--vo-tl-cream) 55%, transparent);
}
.vo-block-hero-variant-timberline .vo-block-hero-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.vo-builder-preview-root .vo-block-hero-variant-timberline {
  width: var(--vo-bleed-w, 100%);
  max-width: none;
  margin-left: calc(50% - var(--vo-bleed-w, 100%) / 2) !important;
  margin-right: 0 !important;
}
.vo-builder-page:has(> .vo-builder-blocks > .vo-block-slot:first-child > .vo-block-hero-variant-timberline) { padding-top: 0; }

/* Category tiles ------------------------------------------------------- */
.vo-block-tiles {
  width: 100%;
  max-width: var(--vo-content-max, 1180px);
  margin: clamp(40px, 5vw, 72px) auto;
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  box-sizing: border-box;
}
/* Lift the row over the bottom of the hero above it. */
.vo-block-tiles.is-overlap {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * clamp(118px, 13vw, 196px));
  margin-bottom: clamp(8px, 1.4vw, 20px);
}
.vo-block-tiles-head { display: grid; gap: 10px; max-width: 720px; }
.vo-block-tiles-title {
  margin: 0;
  font-family: var(--brand-heading-font, inherit);
  font-weight: var(--vo-heading-weight, 700);
  letter-spacing: var(--vo-heading-tracking, -.02em);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
}
.vo-block-tiles-desc { margin: 0; color: var(--muted, #6b7280); font-size: 16px; line-height: 1.55; }
.vo-block-tiles-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 208px), 1fr));
  gap: clamp(12px, 1.2vw, 18px);
}
.vo-block-tile {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  aspect-ratio: 1.56;
  min-height: 150px;
  border-radius: max(8px, min(var(--brand-radius, 10px), 14px));
  border: 1px solid rgba(239, 232, 218, .16);
  background: #1a2a21;
  color: #efe8da;
  text-decoration: none;
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .95);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.vo-block-tile:hover { transform: translateY(-3px); border-color: rgba(239, 232, 218, .4); box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 1); }
.vo-block-tile:focus-visible { outline: 2px solid #efe8da; outline-offset: 3px; }
.vo-block-tile-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.vo-block-tile:hover .vo-block-tile-media { transform: scale(1.05); }
.vo-block-tile-media-empty { background: linear-gradient(155deg, color-mix(in srgb, var(--brand-primary, #c49a63) 30%, #2c3d31), #13221a 70%); }
.vo-block-tile-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 16, 12, 0) 28%, rgba(8, 16, 12, .5) 60%, rgba(8, 16, 12, .86) 100%);
}
.vo-block-tile-body {
  position: absolute;
  left: clamp(12px, 1.1vw, 16px);
  right: clamp(12px, 1.1vw, 16px);
  bottom: clamp(12px, 1.1vw, 16px);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 16px);
}
.vo-block-tile-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(48px, 4vw, 60px);
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid rgba(239, 232, 218, .42);
  background: rgba(12, 24, 18, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.vo-block-tile-icon svg { width: 56%; height: 56%; }
.vo-block-tile-text { display: grid; gap: 5px; min-width: 0; }
.vo-block-tile-name {
  font-family: "Barlow Condensed", "Oswald", "Arial Narrow", "Inter", sans-serif;
  font-size: clamp(19px, 1.55vw, 23px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vo-block-tile-cta { font: 500 14px/1.2 var(--brand-body-font, Inter, sans-serif); color: rgba(239, 232, 218, .86); }
/* Framed: the photo sits above a solid caption bar. */
.vo-block-tiles-style-framed .vo-block-tile { aspect-ratio: auto; display: grid; grid-template-rows: minmax(150px, 1fr) auto; background: color-mix(in srgb, var(--brand-bg, #10201a) 82%, #ffffff); }
.vo-block-tiles-style-framed .vo-block-tile-media { position: relative; z-index: 0; aspect-ratio: 1.6; height: auto; }
.vo-block-tiles-style-framed .vo-block-tile-shade { display: none; }
.vo-block-tiles-style-framed .vo-block-tile-body { position: static; padding: 14px 16px 16px; }
@media (max-width: 720px) {
  .vo-block-tiles.is-overlap { margin-top: -64px; }
  .vo-block-tiles-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vo-block-tile { aspect-ratio: 1.05; }
  .vo-block-tile-body { flex-direction: column; align-items: flex-start; gap: 8px; }
  .vo-block-tile-icon { width: 42px; }
  .vo-block-tile-name { white-space: normal; }
  .vo-block-hero-variant-timberline .vo-block-hero-title { font-size: clamp(46px, 13vw, 64px); }
}
@media (prefers-reduced-motion: reduce) {
  .vo-block-tile, .vo-block-tile-media { transition: none; }
  .vo-block-tile:hover, .vo-block-tile:hover .vo-block-tile-media { transform: none; }
}

/* Catalog theme: timberline ---------------------------------------------- */
.vo-block-catalog-theme-timberline .vo-block-catalog-heading {
  color: #efe8da;
  font-family: var(--brand-heading-font, "Barlow Condensed", "Oswald", "Arial Narrow", "Inter", sans-serif);
  font-weight: 700;
  letter-spacing: .005em;
}
.vo-block-catalog-theme-timberline .vo-block-catalog-sub,
.vo-block-catalog-theme-timberline .vo-block-catalog-results,
.vo-block-catalog-theme-timberline .vo-block-catalog-flow-note { color: rgba(239, 232, 218, .78); }
/* On a page, the catalog is a "featured" row: title left, link right. */
.vo-block-catalog-theme-timberline:not(.vo-block-catalog-live) {
  width: 100%;
  max-width: var(--vo-content-max, 1180px);
  margin: clamp(24px, 2.6vw, 40px) auto clamp(48px, 5vw, 80px);
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  row-gap: clamp(18px, 2vw, 26px);
  background: transparent;
}
.vo-block-catalog-theme-timberline:not(.vo-block-catalog-live) > * { grid-column: 1 / -1; }
.vo-block-catalog-theme-timberline:not(.vo-block-catalog-live) > .vo-block-catalog-hero { grid-column: 1; grid-row: 1; gap: 8px; text-align: left; align-items: flex-start; justify-items: start; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.vo-block-catalog-theme-timberline:not(.vo-block-catalog-live) > .vo-block-catalog-hero::before,
.vo-block-catalog-theme-timberline:not(.vo-block-catalog-live) > .vo-block-catalog-hero::after { display: none; }
.vo-block-catalog-theme-timberline:not(.vo-block-catalog-live) > .vo-block-catalog-footer { grid-column: 2; grid-row: 1; align-self: end; margin: 0; padding: 0; justify-content: flex-end; }
.vo-block-catalog-theme-timberline:not(.vo-block-catalog-live) .vo-block-catalog-heading { font-size: clamp(28px, 2.7vw, 38px); line-height: 1.05; margin: 0; }
.vo-block-catalog-theme-timberline:not(.vo-block-catalog-live) .vo-block-catalog-sub { margin: 0; font-size: 16px; }
.vo-block-catalog-theme-timberline:not(.vo-block-catalog-live) .vo-block-catalog-results,
.vo-block-catalog-theme-timberline:not(.vo-block-catalog-live) .vo-block-catalog-card-desc { display: none; }
.vo-block-catalog-theme-timberline:not(.vo-block-catalog-live) .vo-block-catalog-cta {
  background: none !important;
  border: 0;
  padding: 4px 0;
  color: #efe8da !important;
  font: 500 15px/1.2 var(--brand-body-font, Inter, sans-serif);
  box-shadow: none;
  white-space: nowrap;
}
.vo-block-catalog-theme-timberline:not(.vo-block-catalog-live) .vo-block-catalog-cta:hover { text-decoration: underline; text-underline-offset: 5px; }
.vo-block-catalog-theme-timberline .vo-block-catalog-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr));
  gap: clamp(12px, 1.1vw, 16px);
}
.vo-block-catalog-theme-timberline .vo-block-catalog-card {
  overflow: hidden;
  padding: 0;
  color: var(--vo-cat-ink);
}
.vo-block-catalog-theme-timberline .vo-block-catalog-card-media {
  display: block;
  aspect-ratio: 1.12;
  padding: 14px 14px 4px;
  background: var(--vo-cat-card-bg);
  box-sizing: border-box;
}
.vo-block-catalog-theme-timberline .vo-block-catalog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.vo-block-catalog-theme-timberline .vo-block-catalog-card-body { padding: 10px 16px 16px; gap: 8px; }
.vo-block-catalog-theme-timberline .vo-block-catalog-card-head { flex-direction: column; align-items: flex-start; gap: 8px; }
.vo-block-catalog-theme-timberline .vo-block-catalog-card-name { font: 600 14.5px/1.3 var(--vo-cat-body-font); color: var(--vo-cat-ink); }
.vo-block-catalog-theme-timberline .vo-block-catalog-card-price { font: 700 17px/1 var(--vo-cat-body-font); color: var(--vo-cat-ink); }
.vo-block-catalog-theme-timberline:not(.vo-block-catalog-live) .vo-block-catalog-card-add { justify-self: start; align-self: flex-start; width: max-content; }
.vo-block-catalog-theme-timberline .vo-block-catalog-card-add,
.vo-block-catalog-theme-timberline .vo-block-catalog-primary {
  background: #1d2b23 !important;
  color: #efe8da !important;
  border: 0;
  border-radius: 6px;
  font: 600 12.5px/1 var(--vo-cat-body-font);
  padding: 9px 14px;
}
.vo-block-catalog-theme-timberline .vo-block-catalog-card-add:hover,
.vo-block-catalog-theme-timberline .vo-block-catalog-primary:hover { background: var(--vo-cat-accent) !important; color: var(--vo-cat-button-text) !important; }
.vo-block-catalog-theme-timberline .vo-block-catalog-card-fallback { background: linear-gradient(155deg, #dcd2bf, #c9bda6); color: #3b4239; font-family: "Barlow Condensed", "Oswald", "Arial Narrow", "Inter", sans-serif; }
/* The ordering page. */
.vo-block-catalog-live.vo-block-catalog-theme-timberline .vo-block-catalog-heading {
  font-family: "Barlow Condensed", "Oswald", "Arial Narrow", "Inter", sans-serif;
  font-size: clamp(40px, 5vw, 66px);
  font-weight: 800;
  line-height: .95;
  text-transform: uppercase;
}
.vo-block-catalog-theme-timberline .vo-block-catalog-search {
  background: rgba(239, 232, 218, .07);
  border: 1px solid rgba(239, 232, 218, .22);
  color: #efe8da;
}
.vo-block-catalog-theme-timberline .vo-block-catalog-search input { color: #efe8da; background: transparent; }
.vo-block-catalog-theme-timberline .vo-block-catalog-search input::placeholder { color: rgba(239, 232, 218, .55); }
.vo-block-catalog-theme-timberline .vo-block-catalog-cat { color: rgba(239, 232, 218, .82); }
.vo-block-catalog-theme-timberline .vo-block-catalog-cats-pills { justify-content: flex-start; }
.vo-block-catalog-theme-timberline .vo-block-catalog-cat.is-active {
  background: var(--vo-cat-accent);
  color: var(--vo-cat-button-text);
  border-color: transparent;
}
.vo-block-catalog-live.vo-block-catalog-theme-timberline .vo-block-catalog-secondary { color: var(--vo-cat-ink); border-color: rgba(29, 38, 32, .3); }
@media (max-width: 720px) {
  .vo-block-catalog-theme-timberline:not(.vo-block-catalog-live) { grid-template-columns: minmax(0, 1fr); }
  .vo-block-catalog-theme-timberline:not(.vo-block-catalog-live) > .vo-block-catalog-footer { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .vo-block-catalog-theme-timberline .vo-block-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


.vo-block-catalog-layout-outfitter {
  --vo-of-ink: var(--vo-cat-ink, var(--ink, #1d2a22));
  --vo-of-muted: var(--vo-cat-muted, var(--muted, #6b6f66));
  --vo-of-accent: var(--vo-cat-accent, var(--brand-primary, #1f3d2f));
  --vo-of-accent-ink: var(--vo-cat-button-text, var(--brand-button-text, #fff));
  --vo-of-highlight: var(--vo-cat-highlight, var(--vo-of-accent));
  --vo-of-card: var(--vo-card-bg-override, var(--vo-cat-card-bg, #fff));
  --vo-of-line: var(--vo-card-border-override, var(--vo-cat-line, rgba(31, 42, 34, .12)));
  --vo-of-radius: var(--vo-cat-card-radius, 10px);
  --vo-of-soft: var(--vo-cat-soft, color-mix(in srgb, var(--vo-of-accent) 7%, transparent));
  container-type: inline-size;
  container-name: vo-of;
  color: var(--vo-of-ink);
  padding: 18px 0 40px;
}
.vo-of { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 24px; align-items: start; }
.vo-of-side { display: grid; gap: 22px; align-content: start; }
.vo-of-main { min-width: 0; display: grid; gap: 18px; container-type: inline-size; container-name: vo-of-main; }

/* Category rail */
.vo-of-nav { display: grid; gap: 2px; }
.vo-of-nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--vo-of-ink); font: 500 14px/1.2 var(--vo-cat-body-font, inherit); text-align: left; cursor: pointer;
}
.vo-of-nav-item svg { width: 20px; height: 20px; flex: none; }
.vo-of-nav-item:hover { background: var(--vo-of-soft); }
.vo-of-nav-item.is-active { background: var(--vo-of-accent); color: var(--vo-of-accent-ink); font-weight: 600; }
.vo-of-nav-item:focus-visible, .vo-of-tile:focus-visible, .vo-of-btn:focus-visible, .vo-of-card:focus-visible { outline: 2px solid var(--vo-of-highlight); outline-offset: 2px; }

/* Filters */
.vo-of-filters { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--vo-of-line); }
.vo-of-filters-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.vo-of-filters-head h3 { margin: 0; font: 700 15px/1.2 var(--vo-cat-body-font, inherit); color: var(--vo-of-ink); }
.vo-of-link { border: 0; background: none; padding: 0; color: var(--vo-of-ink); font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.vo-of-filter { padding: 10px 0; border-bottom: 1px solid var(--vo-of-line); }
.vo-of-filter > summary, .vo-of-filter-title { display: flex; justify-content: space-between; align-items: center; list-style: none; cursor: pointer; font: 600 13.5px/1.3 var(--vo-cat-body-font, inherit); color: var(--vo-of-ink); }
.vo-of-filter > summary::-webkit-details-marker { display: none; }
.vo-of-filter > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); margin-right: 3px; transition: transform .15s ease; }
.vo-of-filter[open] > summary::after { transform: rotate(-135deg); }
.vo-of-filter-body { display: grid; gap: 8px; padding-top: 10px; font-size: 13px; color: var(--vo-of-muted); }
.vo-of-check { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.vo-of-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--vo-of-accent); flex: none; }
.vo-of-check small { color: var(--vo-of-muted); }
.vo-of-check.is-extra { display: none; }
.vo-of-filter.is-expanded .vo-of-check.is-extra { display: flex; }
.vo-of-price-label { margin: 6px 0 0; font-size: 12.5px; color: var(--vo-of-muted); }
.vo-of-range { position: relative; height: 22px; margin-top: 6px; --lo: 0%; --hi: 100%; }
.vo-of-range::before, .vo-of-range::after { content: ""; position: absolute; top: 9px; height: 4px; border-radius: 4px; }
.vo-of-range::before { left: 0; right: 0; background: var(--vo-of-line); }
.vo-of-range::after { left: var(--lo); right: calc(100% - var(--hi)); background: var(--vo-of-accent); }
.vo-of-range input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; z-index: 1; }
.vo-of-range input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: var(--vo-of-accent); border: 2px solid var(--vo-of-card); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); cursor: pointer; }
.vo-of-range input::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--vo-of-accent); border: 2px solid var(--vo-of-card); cursor: pointer; }
.vo-of-range input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--vo-of-highlight); outline-offset: 2px; }

/* Promo card */
.vo-of-promo { position: relative; display: grid; align-content: end; gap: 12px; min-height: 230px; padding: 18px; border-radius: var(--vo-of-radius); overflow: hidden; color: #fff; background: #23301f; isolation: isolate; text-decoration: none; }
.vo-of-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.vo-of-promo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .72)); }
.vo-of-promo-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.vo-of-promo-title { margin: 0; font: var(--vo-cat-heading-weight, 800) clamp(22px, 2.4vw, 28px)/1.02 var(--vo-cat-heading-font, inherit); text-transform: uppercase; }
.vo-of-promo-cta { justify-self: start; display: inline-flex; gap: 6px; padding: 9px 14px; border-radius: 6px; background: var(--vo-of-highlight); color: var(--vo-cat-highlight-ink, #1a140c); font-size: 13px; font-weight: 700; }

/* Title row */
.vo-of-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; }
.vo-of-title { margin: 0; font: var(--vo-cat-heading-weight, 700) clamp(26px, 3vw, 34px)/1.05 var(--vo-cat-heading-font, inherit); color: var(--vo-of-ink); letter-spacing: var(--vo-cat-letter-spacing, 0); }
.vo-of-count { margin: 6px 0 0; font-size: 13px; color: var(--vo-of-muted); }
.vo-of-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vo-of-search { display: flex; align-items: center; gap: 8px; min-width: 200px; padding: 0 12px; height: 38px; border: 1px solid var(--vo-of-line); border-radius: 8px; background: var(--vo-of-card); }
.vo-of-search svg { width: 16px; height: 16px; color: var(--vo-of-muted); flex: none; }
.vo-of-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--vo-of-ink); font: inherit; font-size: 13.5px; outline: none; }
.vo-of-sort { display: flex; align-items: center; height: 38px; padding: 0 10px; border: 1px solid var(--vo-of-line); border-radius: 8px; background: var(--vo-of-card); font-size: 13px; color: var(--vo-of-ink); gap: 4px; }
.vo-of-sort select { border: 0; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; padding: 0 2px; }
.vo-of-view { display: inline-flex; padding: 3px; border: 1px solid var(--vo-of-line); border-radius: 8px; background: var(--vo-of-card); }
.vo-of-view button { width: 32px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--vo-of-muted); cursor: pointer; }
.vo-of-view button svg { width: 17px; height: 17px; }
.vo-of-view button[aria-pressed="true"] { background: var(--vo-of-soft); color: var(--vo-of-ink); }
.vo-of-filter-toggle { display: none; }

/* Category photo tiles */
.vo-of-tiles { display: grid; grid-template-columns: repeat(var(--vo-of-tiles, 5), minmax(0, 1fr)); gap: 10px; }
.vo-of-tile { position: relative; display: grid; align-content: end; aspect-ratio: 1 / .92; padding: 10px 12px; border: 0; border-radius: var(--vo-of-radius); overflow: hidden; background: #2b3a2e; color: #fff; cursor: pointer; text-align: left; isolation: isolate; font: 700 14px/1.15 var(--vo-cat-body-font, inherit); }
.vo-of-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .35s ease; }
.vo-of-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .7)); }
.vo-of-tile:hover img { transform: scale(1.05); }
.vo-of-tile.is-active { box-shadow: 0 0 0 3px var(--vo-of-accent); }

/* Product cards */
.vo-of-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vo-of-card {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 12px; border: 1px solid var(--vo-of-line);
  border-radius: var(--vo-of-radius); background: var(--vo-of-card); color: var(--vo-card-text-override, var(--vo-of-ink)); text-decoration: none;
  font-family: var(--vo-card-font-override, var(--vo-cat-body-font, inherit)); transition: box-shadow .18s ease, transform .18s ease;
}
.vo-of-card:hover { box-shadow: 0 14px 30px -20px rgba(20, 30, 20, .45); transform: translateY(-1px); }
.vo-of-card[hidden], [data-vo-card][hidden] { display: none !important; }
.vo-of-card.is-unavailable { opacity: .6; }
.vo-of-card > .vo-wish { position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; box-shadow: none; border-color: var(--vo-of-line); }
.vo-of-badge { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 3px 8px; border-radius: 4px; background: var(--vo-of-highlight); color: var(--vo-cat-highlight-ink, #fff); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.vo-of-card-media { display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: calc(var(--vo-of-radius) - 4px); background: var(--vo-cat-media-bg, transparent); }
.vo-of-card-media img { width: 100%; height: 100%; object-fit: var(--vo-cat-media-fit, contain); }
.vo-of-card-fallback { font: 800 34px/1 var(--vo-cat-heading-font, inherit); color: var(--vo-of-muted); }
.vo-of-card-body { display: grid; gap: 5px; align-content: start; }
.vo-of-card-name { font-size: 13.5px; font-weight: var(--vo-cat-name-weight, 600); line-height: 1.3; color: inherit; }
.vo-of-card-brand { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--vo-of-muted); }
.vo-of-card-price { font-size: 15px; font-weight: 800; }
.vo-of-card .vo-rating { font-size: 11.5px; }
.vo-of-card .vo-rating-value { display: none; }
.vo-of-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 38px; padding: 8px 12px;
  border: 0; border-radius: 7px; background: var(--vo-of-accent); color: var(--vo-of-accent-ink); font: 700 13px/1.1 var(--vo-cat-body-font, inherit); cursor: pointer;
}
.vo-of-btn:hover:not([disabled]) { filter: brightness(1.12); }
.vo-of-btn[disabled] { opacity: .5; cursor: not-allowed; }
.vo-of-grid.is-list { grid-template-columns: minmax(0, 1fr); }
.vo-of-grid.is-list .vo-of-card { grid-template-columns: 120px minmax(0, 1fr) 160px; grid-template-rows: auto; align-items: center; }
.vo-of-grid.is-list .vo-of-card-media { aspect-ratio: 1 / 1; }
.vo-of-empty { padding: 48px 16px; text-align: center; color: var(--vo-of-muted); border: 1px dashed var(--vo-of-line); border-radius: var(--vo-of-radius); }
.vo-of-empty[hidden] { display: none; }
.vo-of-empty button { margin-top: 10px; }
.vo-of-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.vo-of-pager:empty { display: none; }
.vo-of-pager button { min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--vo-of-line); border-radius: 8px; background: var(--vo-of-card); color: var(--vo-of-ink); font: 600 13px/1 inherit; cursor: pointer; }
.vo-of-pager button[aria-current="page"] { background: var(--vo-of-accent); border-color: var(--vo-of-accent); color: var(--vo-of-accent-ink); }
.vo-of-pager button[disabled] { opacity: .4; cursor: default; }

@container vo-of-main (min-width: 520px) { .vo-of-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container vo-of-main (min-width: 700px) { .vo-of-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container vo-of-main (max-width: 560px) {
  .vo-of-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scrollbar-width: none; }
  .vo-of-grid.is-list .vo-of-card { grid-template-columns: 88px minmax(0, 1fr); }
  .vo-of-grid.is-list .vo-of-card > .vo-of-btn, .vo-of-grid.is-list .vo-of-card > .vo-of-actions { grid-column: 1 / -1; }
}
@container vo-of (max-width: 860px) {
  .vo-of { grid-template-columns: minmax(0, 1fr); }
  .vo-of-side { order: -1; gap: 12px; }
  .vo-of-nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .vo-of-nav-item { border: 1px solid var(--vo-of-line); border-radius: 999px; padding: 8px 12px; }
  .vo-of-filters, .vo-of-promo { display: none; }
  .vo-of-block.is-filters-open .vo-of-filters { display: grid; }
  .vo-of-filter-toggle { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 1px solid var(--vo-of-line); border-radius: 8px; background: var(--vo-of-card); color: var(--vo-of-ink); font: 600 13px/1 inherit; cursor: pointer; }
}

/* Outfitter theme: cream page, white cards, forest buttons, tan accents. */
.vo-block-catalog-theme-outfitter .vo-of-card { box-shadow: 0 1px 0 rgba(31, 42, 34, .04); }
.vo-block-catalog-theme-outfitter .vo-of-title { text-transform: none; }
@media (prefers-reduced-motion: reduce) { .vo-of-card, .vo-of-tile img { transition: none; } }
/* With the header search box on, it does the searching on larger screens. */
@media (min-width: 861px) { body:has(.vo-sf-header [data-vo-header-search]) .vo-of-search { display: none; } }


.vo-block-cart {
  --vo-cart-accent: var(--vo-cat-accent, var(--brand-primary, #1f3d2f));
  --vo-cart-accent-ink: var(--vo-cat-button-text, var(--brand-button-text, #fff));
  /* The accent used as text/outline (not fill). */
  --vo-cart-accent-text: var(--vo-cart-accent);
  --vo-cart-card: var(--vo-cat-card-bg, var(--surface, #fff));
  --vo-cart-line: var(--vo-cat-line, rgba(31, 42, 34, .12));
  --vo-cart-ink: var(--vo-cat-ink, var(--ink, #1d2a22));
  --vo-cart-muted: var(--vo-cat-muted, var(--muted, #6b6f66));
  display: grid; gap: 14px; align-content: start; padding: 18px 0; color: var(--vo-cart-ink); font-family: var(--vo-cat-body-font, var(--brand-body-font, inherit));
}
/* On a dark page a dark brand colour as text disappears (a deep green on navy is
   ~1.5:1). Lift only its lightness; bright accents are left as they are. A light
   catalog page inside a dark-mode store keeps the plain accent. */
.dark-mode .vo-block-cart, [data-catalog-tone="dark"] .vo-block-cart {
  --vo-cart-accent-text: color-mix(in oklab, var(--vo-cart-accent) 40%, #fff);
  --vo-cart-accent-text: oklch(from var(--vo-cart-accent) max(l, 0.72) c h);
}
.dark-mode [data-catalog-tone="light"] .vo-block-cart { --vo-cart-accent-text: var(--vo-cart-accent); }
.vo-block-cart.is-sticky { position: sticky; top: 88px; }
.vo-cart-panel, .vo-cart-card { border: 1px solid var(--vo-cart-line); border-radius: 10px; background: var(--vo-cart-card); overflow: hidden; }
.vo-cart-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--vo-cart-line); }
.vo-cart-head.is-solid { background: var(--vo-cart-accent); color: var(--vo-cart-accent-ink); border-bottom: 0; }
.vo-cart-head h2 { margin: 0; font: 700 17px/1.2 var(--vo-cat-body-font, inherit); color: inherit; }
.vo-cart-clear { border: 0; background: none; padding: 0; color: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; opacity: .9; }
.vo-cart-clear[hidden] { display: none; }
.vo-cart-lines { display: grid; padding: 4px 16px; max-height: 460px; overflow-y: auto; }
.vo-cart-line { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--vo-cart-line); }
.vo-cart-line:last-child { border-bottom: 0; }
.vo-block-cart[data-show-images="0"] .vo-cart-line { grid-template-columns: minmax(0, 1fr) auto; }
.vo-cart-thumb { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--vo-cart-accent) 8%, transparent); font-weight: 800; color: var(--vo-cart-muted); }
.vo-cart-thumb img { width: 100%; height: 100%; object-fit: contain; }
.vo-cart-line-main { min-width: 0; display: grid; gap: 4px; align-content: start; }
.vo-cart-line-name { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.3; }
.vo-cart-line-meta { margin: 0; font-size: 12px; color: var(--vo-cart-muted); }
.vo-cart-line-each { display: none; margin: 0; font-size: 12px; color: var(--vo-cart-muted); }
.vo-cart-qty { display: inline-flex; align-items: center; justify-self: start; border: 1px solid var(--vo-cart-line); border-radius: 6px; margin-top: 4px; }
.vo-cart-qty button { width: 26px; height: 26px; border: 0; background: none; color: var(--vo-cart-ink); font-size: 15px; line-height: 1; cursor: pointer; }
.vo-cart-qty span { min-width: 22px; text-align: center; font-size: 13px; font-weight: 600; }
.vo-cart-qty.is-static button { display: none; }
.vo-cart-line-end { display: grid; justify-items: end; align-content: space-between; gap: 8px; font-size: 13.5px; }
.vo-cart-remove { width: 22px; height: 22px; border: 0; background: none; color: var(--vo-cart-muted); font-size: 16px; line-height: 1; cursor: pointer; }
.vo-cart-empty { padding: 26px 4px; text-align: center; color: var(--vo-cart-muted); font-size: 13px; }
.vo-cart-empty p { margin: 4px 0 0; }
.vo-cart-empty-title { color: var(--vo-cart-ink); font-weight: 600; }
.vo-cart-foot { display: grid; gap: 10px; padding: 14px 16px 16px; border-top: 1px solid var(--vo-cart-line); }
.vo-cart-subtotal { display: flex; justify-content: space-between; font-size: 14px; }
.vo-cart-subtotal span { font-weight: 600; }
.vo-cart-tax { margin-top: -4px; color: var(--vo-cart-muted); }
.vo-cart-tax span { font-weight: 400; }
.vo-cart-total { padding-top: 10px; border-top: 1px solid var(--vo-cart-line); font-size: 16px; }
.vo-cart-total strong { font-weight: 800; }
.vo-cart-note { margin: -4px 0 2px; font-size: 12px; color: var(--vo-cart-muted); }
.vo-cart-note.is-unlocked { color: #15803d; font-weight: 600; }
.vo-cart-checkout, .vo-cart-outline { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 14px; border-radius: 8px; font-size: 14.5px; font-weight: 700; text-decoration: none; cursor: pointer; }
.vo-cart-checkout { background: var(--vo-cart-accent); color: var(--vo-cart-accent-ink); }
.vo-cart-checkout:hover { filter: brightness(1.12); }
.vo-cart-outline { border: 1.5px solid var(--vo-cart-accent-text); color: var(--vo-cart-accent-text); background: transparent; }
.vo-cart-outline:hover { background: color-mix(in srgb, var(--vo-cart-accent-text) 10%, transparent); }
.vo-cart-checkout:focus-visible, .vo-cart-outline:focus-visible, .vo-cart-qty button:focus-visible, .vo-cart-remove:focus-visible, .vo-cart-clear:focus-visible { outline: 2px solid var(--vo-cat-highlight, var(--vo-cart-accent)); outline-offset: 2px; }
.vo-cart-card { padding: 16px; }
.vo-cart-help { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.vo-cart-help .vo-cart-outline { margin-top: 10px; min-height: 36px; font-size: 13px; }
.vo-cart-card-title { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--vo-cart-ink); }
.vo-cart-card-text { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--vo-cart-muted); }
.vo-cart-perks { list-style: none; margin: 0; display: grid; gap: 0; padding: 4px 16px; }
.vo-cart-perks li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--vo-cart-line); }
.vo-cart-perks li:last-child { border-bottom: 0; }
.vo-block-cart svg { color: var(--vo-cart-ink); }
.vo-cart-head svg { color: inherit; }


.vo-block-hero.has-highlights { flex-wrap: wrap; }
.vo-block-hero-highlights {
  position: relative; z-index: 1; list-style: none; width: 100%; max-width: var(--vo-frame-max, 1180px); box-sizing: border-box;
  margin: 22px auto 0; padding: 0 var(--vo-section-gutter, 32px); display: flex; flex-wrap: wrap; gap: 16px 30px; color: inherit;
}
.vo-block-hero-highlights li { display: flex; align-items: center; gap: 11px; }
.vo-block-hero-highlights svg { width: 30px; height: 30px; flex: none; }
.vo-block-hero-highlights strong { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.vo-block-hero-highlights li > span > span { display: block; font-size: 12px; opacity: .82; line-height: 1.35; }
@media (min-width: 980px) {
  .vo-block-hero-variant-timberline .vo-block-hero-highlights {
    position: absolute; right: max(var(--vo-section-gutter, 32px), calc((100% - var(--vo-frame-max, 1180px)) / 2 + var(--vo-section-gutter, 32px)));
    bottom: clamp(30px, 4vw, 52px); width: auto; max-width: none; margin: 0; padding: 0; flex-wrap: nowrap;
  }
}
.vo-block-hero-variant-timberline.is-no-fade { padding-bottom: clamp(96px, 9vw, 130px); }
.vo-block-hero-variant-timberline.is-no-fade .vo-block-hero-overlay {
  background:
    linear-gradient(90deg, rgba(8, 18, 13, calc(.22 + var(--vo-hero-overlay, .4) * .6)) 0%, rgba(8, 18, 13, calc(.1 + var(--vo-hero-overlay, .4) * .35)) 58%, rgba(8, 18, 13, .18) 100%),
    linear-gradient(180deg, rgba(8, 18, 13, .1) 0%, rgba(8, 18, 13, 0) 40%, rgba(8, 18, 13, .45) 100%);
}

.vo-of.is-single { grid-template-columns: minmax(0, 1fr); }

.vo-rating { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; line-height: 1; color: inherit; font-family: inherit; }
.vo-rating.is-button { background: none; border: 0; padding: 2px 0; margin: 0; cursor: pointer; border-radius: 6px; }
.vo-rating.is-button:hover .vo-rating-count, .vo-rating.is-button:focus-visible .vo-rating-count { text-decoration: underline; }
.vo-rating.is-button:focus-visible { outline: 2px solid var(--brand-primary, #2563eb); outline-offset: 2px; }
.vo-rating.is-empty { opacity: .7; }
.vo-rating-stars { position: relative; display: inline-flex; flex: none; }
.vo-rating-stars svg { width: 13px; height: 13px; display: block; flex: none; }
.vo-rating.is-md .vo-rating-stars svg { width: 17px; height: 17px; }
.vo-rating.is-md { font-size: 14px; gap: 7px; }
.vo-rating-stars-empty { display: inline-flex; gap: 1px; color: var(--vo-star-empty, color-mix(in srgb, currentColor 22%, transparent)); }
.vo-rating-stars-empty svg path { fill: currentColor; }
.vo-rating-stars-fill { position: absolute; inset: 0 auto 0 0; display: inline-flex; gap: 1px; overflow: hidden; white-space: nowrap; color: var(--vo-star, #f5a524); }
.vo-rating-stars-fill svg path { fill: currentColor; }
.vo-rating-value { font-weight: 700; }
.vo-rating-count { opacity: .72; font-weight: 500; }
.vo-block-catalog-card-rating, .vo-block-catalog-row-rating { display: flex; margin-top: 6px; }
.vo-wish { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 999px; border: 1px solid rgba(15, 23, 42, .1); background: rgba(255, 255, 255, .92); color: #1f2937; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, .12); transition: transform .15s ease, color .15s ease, background .15s ease; }
.vo-wish svg { width: 17px; height: 17px; }
.vo-wish svg path { fill: transparent; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.vo-wish:hover { transform: scale(1.06); }
.vo-wish:focus-visible { outline: 2px solid var(--brand-primary, #2563eb); outline-offset: 2px; }
.vo-wish.is-saved { color: #e11d48; }
.vo-wish.is-saved svg path { fill: currentColor; }
.vo-wish.is-busy { opacity: .6; }
.vo-wish.is-inline { width: 32px; height: 32px; box-shadow: none; background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 18%, transparent); }
.vo-wish.is-inline.is-saved { color: #e11d48; }
.has-wish { position: relative; }
.has-wish > .vo-wish:not(.is-inline) { position: absolute; top: 10px; right: 10px; z-index: 2; }
.vo-block-catalog-card.has-wish.is-text-only .vo-block-catalog-card-head { padding-right: 40px; }
.vo-engage-toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 16px); z-index: 2147483000; display: flex; align-items: center; gap: 14px; max-width: min(92vw, 440px); padding: 12px 16px; border-radius: 12px; background: #111827; color: #fff; font: 500 14px/1.35 var(--brand-body-font, system-ui, sans-serif); box-shadow: 0 14px 34px rgba(0, 0, 0, .28); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.vo-engage-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.vo-engage-toast a { color: #fff; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.vo-reviews-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(560px, calc(100vw - 24px)); max-width: none; max-height: min(88vh, 760px); padding: 0; border: 0; border-radius: 18px; background: #fff; color: #111827; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); font-family: var(--brand-body-font, system-ui, sans-serif); }
.vo-reviews-dialog::backdrop { background: rgba(15, 23, 42, .55); }
.vo-reviews-shell { display: flex; flex-direction: column; max-height: inherit; }
.vo-reviews-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid #eef0f4; }
.vo-reviews-head h2 { margin: 0; font: 700 19px/1.25 var(--brand-heading-font, inherit); color: #111827; }
.vo-reviews-head p { margin: 4px 0 0; font-size: 13px; color: #6b7280; }
.vo-reviews-close { flex: none; width: 34px; height: 34px; border-radius: 999px; border: 1px solid #e5e7eb; background: #fff; color: #374151; font-size: 20px; line-height: 1; cursor: pointer; }
.vo-reviews-body { overflow: auto; padding: 18px 22px 22px; display: grid; gap: 18px; }
.vo-reviews-summary { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.vo-reviews-average { text-align: center; }
.vo-reviews-average strong { display: block; font-size: 38px; line-height: 1; font-weight: 800; color: #111827; }
.vo-reviews-average .vo-rating { margin-top: 6px; }
.vo-reviews-bars { display: grid; gap: 4px; font-size: 12px; color: #4b5563; }
.vo-reviews-bar { display: grid; grid-template-columns: 24px 1fr 28px; align-items: center; gap: 8px; }
.vo-reviews-bar i { display: block; height: 7px; border-radius: 99px; background: #eef0f4; overflow: hidden; }
.vo-reviews-bar i b { display: block; height: 100%; background: #f5a524; border-radius: inherit; }
.vo-reviews-form { display: grid; gap: 10px; padding: 16px; border-radius: 14px; background: #f8fafc; border: 1px solid #eef0f4; }
.vo-reviews-form h3, .vo-reviews-list h3 { margin: 0; font-size: 15px; font-weight: 700; color: #111827; }
.vo-reviews-picker { display: inline-flex; gap: 4px; }
.vo-reviews-picker button { width: 36px; height: 36px; padding: 4px; border: 0; background: none; color: #d1d5db; cursor: pointer; border-radius: 8px; }
.vo-reviews-picker button svg { width: 100%; height: 100%; }
.vo-reviews-picker button svg path { fill: currentColor; }
.vo-reviews-picker button.is-on { color: #f5a524; }
.vo-reviews-picker button:focus-visible { outline: 2px solid var(--brand-primary, #2563eb); }
.vo-reviews-form input, .vo-reviews-form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #d6dbe3; border-radius: 10px; font: inherit; font-size: 14px; color: #111827; background: #fff; }
.vo-reviews-form textarea { min-height: 90px; resize: vertical; }
.vo-reviews-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vo-reviews-primary { padding: 10px 18px; border: 0; border-radius: 10px; background: var(--brand-primary, #111827); color: var(--brand-button-text, #fff); font: 700 14px/1 inherit; font-family: inherit; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.vo-reviews-primary[disabled] { opacity: .55; cursor: default; }
.vo-reviews-secondary { padding: 9px 14px; border: 1px solid #d6dbe3; border-radius: 10px; background: #fff; color: #374151; font: 600 13px/1 inherit; font-family: inherit; cursor: pointer; }
.vo-reviews-note { margin: 0; font-size: 13px; color: #6b7280; }
.vo-reviews-note.is-error { color: #b91c1c; }
.vo-reviews-list { display: grid; gap: 12px; }
.vo-review { padding: 14px 0 0; border-top: 1px solid #eef0f4; display: grid; gap: 6px; }
.vo-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: #6b7280; }
.vo-review-meta strong { color: #111827; font-size: 13.5px; }
.vo-review-verified { color: #15803d; font-weight: 600; }
.vo-review-title { margin: 0; font-weight: 700; font-size: 14.5px; color: #111827; }
.vo-review-body { margin: 0; font-size: 14px; line-height: 1.55; color: #374151; white-space: pre-line; }
.vo-review-reply { margin: 4px 0 0; padding: 10px 12px; border-left: 3px solid var(--brand-primary, #111827); background: #f8fafc; border-radius: 0 10px 10px 0; font-size: 13.5px; color: #374151; white-space: pre-line; }
.vo-review-reply b { display: block; margin-bottom: 3px; color: #111827; }
@media (max-width: 520px) {
  .vo-reviews-summary { grid-template-columns: 1fr; }
  .vo-reviews-dialog { width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .vo-wish, .vo-engage-toast { transition: none; } }


/* Hero: blackoak ------------------------------------------------------ */
.vo-block-hero.vo-block-hero-variant-blackoak {
  --vo-bo-cream: #efe6d6;
  --vo-bo-gold: var(--brand-primary, #d2b48a);
  --vo-bo-floor: var(--brand-bg, #0b0a09);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: calc(clamp(64px, 8vw, 112px) + var(--vo-hero-top-offset, 0px)) 0 clamp(56px, 6vw, 92px);
  background: var(--vo-bo-floor);
  background-image: none;
  color: var(--vo-bo-cream);
  text-align: left;
}
.vo-block-hero-variant-blackoak.vo-block-hero-h-sm { min-height: clamp(400px, 50vh, 500px); }
.vo-block-hero-variant-blackoak.vo-block-hero-h-md { min-height: clamp(540px, 74vh, 700px); }
.vo-block-hero-variant-blackoak.vo-block-hero-h-lg { min-height: clamp(600px, 86vh, 820px); }
/* The photograph fills the right side and fades into the dark. */
.vo-block-hero-variant-blackoak::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(68%, 1160px);
  z-index: -2;
  background: var(--vo-hero-image) center 30% / cover no-repeat;
}
.vo-block-hero-variant-blackoak:not(.has-image)::before {
  width: 100%;
  background:
    radial-gradient(48% 62% at 78% 34%, color-mix(in srgb, var(--vo-bo-gold) 22%, transparent), transparent 72%),
    linear-gradient(120deg, var(--vo-bo-floor) 30%, #1b1713 100%);
}
.vo-block-hero-variant-blackoak .vo-block-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, var(--vo-bo-floor) 0%, var(--vo-bo-floor) 30%, rgba(11, 10, 9, .78) 44%, rgba(11, 10, 9, calc(var(--vo-hero-overlay, .46) * .55)) 68%, rgba(11, 10, 9, .3) 100%),
    linear-gradient(180deg, rgba(11, 10, 9, .6) 0%, rgba(11, 10, 9, 0) 24%, rgba(11, 10, 9, 0) 72%, var(--vo-bo-floor) 100%);
  pointer-events: none;
}
.vo-block-hero-variant-blackoak .vo-block-hero-stamp { display: none; }
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-blackoak > .vo-block-hero-inner,
.vo-block-hero-variant-blackoak > .vo-block-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--vo-frame-max, 1180px);
  margin: 0 auto;
  padding: 0 var(--vo-section-gutter, 32px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.vo-block-hero-variant-blackoak .vo-block-hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 18px;
  color: color-mix(in srgb, var(--vo-bo-cream) 82%, transparent);
  font: 500 10.5px/1.6 var(--brand-body-font, Inter, system-ui, sans-serif);
  letter-spacing: .32em;
  text-transform: uppercase;
  opacity: 1;
}
.vo-block-hero-eyebrow-dot { margin: 0 1.1em; opacity: .55; }
.vo-block-hero-variant-blackoak .vo-block-hero-title {
  margin: 0;
  max-width: 11em;
  color: var(--vo-bo-cream);
  font-family: var(--brand-heading-font, "Playfair Display", Georgia, serif);
  font-size: clamp(46px, 6.2vw, 100px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.012em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .4);
}
.vo-block-hero-title-accent { display: block; color: var(--brand-primary, currentColor); }
.vo-block-hero-variant-blackoak .vo-block-hero-title-accent {
  background: linear-gradient(180deg, color-mix(in srgb, var(--vo-bo-gold) 40%, #fff3dc) 0%, var(--vo-bo-gold) 52%, color-mix(in srgb, var(--vo-bo-gold) 66%, #4a3216) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}
.vo-block-hero-variant-blackoak .vo-block-hero-sub {
  margin: clamp(18px, 2vw, 26px) 0 0;
  max-width: 30em;
  color: color-mix(in srgb, var(--vo-bo-cream) 88%, transparent);
  font: 400 clamp(15px, 1.2vw, 17px)/1.6 var(--brand-body-font, Inter, system-ui, sans-serif);
  opacity: 1;
}
.vo-block-hero-actions { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: clamp(24px, 2.6vw, 34px); }
.vo-block-hero-actions > .vo-block-hero-cta { margin: 0 !important; }
.vo-block-hero-cta-icon { width: 16px; height: 16px; flex: none; margin-right: 2px; }
.vo-block-hero-variant-blackoak .vo-block-hero-cta {
  margin-top: clamp(24px, 2.6vw, 34px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 30px;
  border-radius: min(var(--brand-radius, 2px), 4px);
  font: 600 12px/1 var(--brand-body-font, Inter, system-ui, sans-serif);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
}
.vo-block-hero.vo-block-hero-variant-blackoak .vo-block-hero-cta.vo-block-hero-cta-primary {
  background: var(--vo-bo-gold) !important;
  color: var(--brand-button-text, #15110c) !important;
  border: 1px solid var(--vo-bo-gold);
}
.vo-block-hero-variant-blackoak .vo-block-hero-cta-primary .vo-cta-arrow { display: none; }
.vo-block-hero.vo-block-hero-variant-blackoak :is(.vo-block-hero-cta-outline, .vo-block-hero-cta-ghost) {
  background: rgba(11, 10, 9, .35) !important;
  color: var(--vo-bo-cream) !important;
  border: 1px solid color-mix(in srgb, var(--vo-bo-cream) 62%, transparent);
}
.vo-block-hero-variant-blackoak .vo-block-hero-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.vo-block-hero-variant-blackoak :is(.vo-block-hero-cta-outline, .vo-block-hero-cta-ghost):hover { border-color: var(--vo-bo-gold); }
.vo-block-hero-variant-blackoak .vo-block-hero-cta:focus-visible { outline: 2px solid var(--vo-bo-gold); outline-offset: 3px; }
.vo-block-hero-variant-blackoak .vo-block-hero-highlights {
  margin: clamp(36px, 4.4vw, 60px) auto 0;
  gap: 18px clamp(28px, 4vw, 54px);
  color: var(--vo-bo-cream);
}
.vo-block-hero-variant-blackoak .vo-block-hero-highlights li { gap: 16px; }
.vo-block-hero-variant-blackoak .vo-block-hero-highlights svg { width: 34px; height: 34px; stroke-width: 1.2; color: var(--vo-bo-cream); }
.vo-block-hero-variant-blackoak .vo-block-hero-highlights strong {
  max-width: 12em;
  font: 500 11px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.vo-block-hero-script {
  position: absolute;
  z-index: 1;
  top: calc(clamp(110px, 16%, 190px) + var(--vo-hero-top-offset, 0px));
  right: max(var(--vo-section-gutter, 32px), calc((100% - var(--vo-frame-max, 1180px)) / 2 + var(--vo-section-gutter, 32px) - 60px));
  display: grid;
  color: color-mix(in srgb, var(--vo-bo-cream, #efe6d6) 86%, transparent);
  font: 400 clamp(46px, 5.2vw, 84px)/.82 "Mrs Saint Delafield", "Allura", "Brush Script MT", cursive;
  transform: rotate(-12deg);
  transform-origin: right top;
  pointer-events: none;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .45);
}
.vo-block-hero-script span:nth-child(2) { margin-left: .7em; }
.vo-block-hero-script span:nth-child(3) { margin-left: 1.4em; }
.vo-block-hero-script span:nth-child(4) { margin-left: 2.1em; }
.vo-block-hero-scroll {
  position: absolute;
  z-index: 1;
  right: clamp(20px, 3vw, 44px);
  bottom: clamp(28px, 4vw, 52px);
  display: flex;
  align-items: center;
  gap: 14px;
  color: color-mix(in srgb, var(--vo-bo-cream, #efe6d6) 72%, transparent);
  font: 500 9.5px/1 var(--brand-body-font, Inter, system-ui, sans-serif);
  letter-spacing: .38em;
  text-transform: uppercase;
}
.vo-block-hero-scroll::after { content: ""; width: 1px; height: 44px; background: currentColor; opacity: .7; }
.vo-builder-preview-root .vo-block-hero-variant-blackoak {
  width: var(--vo-bleed-w, 100%);
  max-width: none;
  margin-left: calc(50% - var(--vo-bleed-w, 100%) / 2) !important;
  margin-right: 0 !important;
}
.vo-builder-page:has(> .vo-builder-blocks > .vo-block-slot:first-child > .vo-block-hero-variant-blackoak) { padding-top: 0; }
@media (max-width: 900px) {
  .vo-block-hero-script, .vo-block-hero-scroll { display: none; }
  .vo-block-hero-variant-blackoak::before { width: 100%; }
  .vo-block-hero-variant-blackoak .vo-block-hero-overlay {
    background: linear-gradient(180deg, rgba(11, 10, 9, .62) 0%, rgba(11, 10, 9, .74) 46%, var(--vo-bo-floor) 100%);
  }
}

/* Story: torn parchment ----------------------------------------------- */
.vo-block.vo-block-story-split.vo-block-story-torn {
  --vo-paper: #e9e1d2;
  --vo-paper-ink: #1d1915;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 0;
  max-width: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  min-height: clamp(300px, 26vw, 380px);
  overflow: hidden;
  border-radius: 0;
  background: #0d0c0b;
  color: var(--vo-paper-ink);
}
.vo-builder-page .vo-block-slot-full > .vo-block-story-torn {
  width: var(--vo-bleed-w, 100vw);
  margin-left: calc(50% - var(--vo-bleed-w, 100vw) / 2);
  margin-right: calc(50% - var(--vo-bleed-w, 100vw) / 2);
}
.vo-builder-preview-root .vo-block-story-torn {
  width: var(--vo-bleed-w, 100%);
  margin-left: calc(50% - var(--vo-bleed-w, 100%) / 2) !important;
  margin-right: 0 !important;
}
.vo-builder-page[data-page-slug] .vo-block-slot-full > .vo-block-story-torn { padding: 0; }
.vo-story-torn-paper {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(12px, 2vw, 32px);
  margin-right: calc(-1 * clamp(40px, 5vw, 80px));
  padding: clamp(34px, 4vw, 56px) clamp(70px, 8vw, 130px) clamp(34px, 4vw, 56px) 0;
  background-color: var(--vo-paper);
  background-image:
    radial-gradient(120% 90% at 30% 30%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(60% 70% at 92% 86%, rgba(110, 86, 52, .2), transparent 70%),
    radial-gradient(36% 30% at 70% 12%, rgba(110, 86, 52, .12), transparent 70%),
    radial-gradient(28% 26% at 12% 92%, rgba(110, 86, 52, .14), transparent 70%);
  clip-path: polygon(0 0, calc(100% - 24px) 0.00%, calc(100% - 19px) 1.39%, calc(100% - 12px) 2.78%, calc(100% - 10px) 4.17%, calc(100% - 13px) 5.56%, calc(100% - 8px) 6.94%, calc(100% - 9px) 8.33%, calc(100% - 5px) 9.72%, calc(100% - 4px) 11.11%, calc(100% - 4px) 12.50%, calc(100% - 7px) 13.89%, calc(100% - 16px) 15.28%, calc(100% - 17px) 16.67%, calc(100% - 22px) 18.06%, calc(100% - 40px) 19.44%, calc(100% - 47px) 20.83%, calc(100% - 49px) 22.22%, calc(100% - 52px) 23.61%, calc(100% - 51px) 25.00%, calc(100% - 49px) 26.39%, calc(100% - 57px) 27.78%, calc(100% - 57px) 29.17%, calc(100% - 56px) 30.56%, calc(100% - 52px) 31.94%, calc(100% - 47px) 33.33%, calc(100% - 64px) 34.72%, calc(100% - 64px) 36.11%, calc(100% - 55px) 37.50%, calc(100% - 50px) 38.89%, calc(100% - 33px) 40.28%, calc(100% - 24px) 41.67%, calc(100% - 4px) 43.06%, calc(100% - 4px) 44.44%, calc(100% - 4px) 45.83%, calc(100% - 11px) 47.22%, calc(100% - 5px) 48.61%, calc(100% - 8px) 50.00%, calc(100% - 14px) 51.39%, calc(100% - 6px) 52.78%, calc(100% - 12px) 54.17%, calc(100% - 12px) 55.56%, calc(100% - 12px) 56.94%, calc(100% - 7px) 58.33%, calc(100% - 4px) 59.72%, calc(100% - 6px) 61.11%, calc(100% - 4px) 62.50%, calc(100% - 4px) 63.89%, calc(100% - 4px) 65.28%, calc(100% - 8px) 66.67%, calc(100% - 5px) 68.06%, calc(100% - 4px) 69.44%, calc(100% - 4px) 70.83%, calc(100% - 4px) 72.22%, calc(100% - 11px) 73.61%, calc(100% - 4px) 75.00%, calc(100% - 30px) 76.39%, calc(100% - 56px) 77.78%, calc(100% - 54px) 79.17%, calc(100% - 64px) 80.56%, calc(100% - 64px) 81.94%, calc(100% - 41px) 83.33%, calc(100% - 42px) 84.72%, calc(100% - 46px) 86.11%, calc(100% - 45px) 87.50%, calc(100% - 37px) 88.89%, calc(100% - 46px) 90.28%, calc(100% - 49px) 91.67%, calc(100% - 50px) 93.06%, calc(100% - 58px) 94.44%, calc(100% - 56px) 95.83%, calc(100% - 51px) 97.22%, calc(100% - 59px) 98.61%, calc(100% - 64px) 100.00%, 0 100%);
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .3));
}
.vo-block-story-torn:not(.has-art) .vo-story-torn-paper { grid-template-columns: minmax(0, 1fr); padding-left: max(var(--vo-section-gutter, 32px), calc((var(--vo-bleed-w, 100vw) - var(--vo-frame-max, 1180px)) / 2)); }
.vo-story-torn-art {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  object-position: right center;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent);
  mask-image: linear-gradient(90deg, #000 72%, transparent);
}
.vo-block-story-torn .vo-block-story-copy { padding: 0; max-width: 34em; color: var(--vo-paper-ink); }
.vo-block-story-torn .vo-block-story-eyebrow { color: #6b5a44; font: 600 10.5px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .3em; margin-bottom: 12px; }
.vo-block-story-torn .vo-block-story-copy h2 {
  margin: 0 0 16px;
  max-width: 12em;
  color: var(--vo-paper-ink);
  font-family: var(--brand-heading-font, "Playfair Display", Georgia, serif);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.vo-block-story-torn .vo-block-story-copy p { margin: 0; color: #3b342c; font: 400 14.5px/1.6 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-block-story-torn .vo-block-story-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 12px 22px;
  border: 1px solid var(--vo-paper-ink);
  color: var(--vo-paper-ink);
  font: 600 11px/1 var(--brand-body-font, Inter, system-ui, sans-serif);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
}
.vo-block-story-torn .vo-block-story-link:hover { background: var(--vo-paper-ink); color: var(--vo-paper); }
.vo-story-torn-side {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: clamp(32px, 4vw, 56px) max(var(--vo-section-gutter, 32px), calc((var(--vo-bleed-w, 100vw) - var(--vo-frame-max, 1180px)) / 2)) clamp(32px, 4vw, 56px) clamp(84px, 9vw, 150px);
  background: #0d0c0b var(--vo-story-photo, none) center / cover no-repeat;
  color: #efe6d6;
}
.vo-story-torn-side::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(11, 10, 9, .25) 0%, rgba(11, 10, 9, .55) 40%, rgba(11, 10, 9, .72) 100%);
}
.vo-story-torn-points { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 2.4vw, 30px); }
.vo-story-torn-points li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; align-items: center; }
.vo-story-torn-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #d2b48a) 72%, transparent);
  color: var(--brand-primary, #d2b48a);
}
.vo-story-torn-icon svg { width: 22px; height: 22px; }
.vo-story-torn-points strong { display: block; margin-bottom: 5px; font: 600 11.5px/1.35 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .2em; text-transform: uppercase; }
.vo-story-torn-points li > span:last-child > span { display: block; color: rgba(239, 230, 214, .7); font: 400 13px/1.55 var(--brand-body-font, Inter, system-ui, sans-serif); }
@media (max-width: 900px) {
  .vo-block.vo-block-story-split.vo-block-story-torn { grid-template-columns: minmax(0, 1fr); }
  .vo-story-torn-paper {
    grid-template-columns: minmax(0, 1fr);
    margin: 0 0 calc(-1 * 34px);
    padding: 0 var(--vo-section-gutter, 24px) 64px;
    clip-path: polygon(0 0, 100% 0, 100.00% calc(100% - 38px), 98.61% calc(100% - 35px), 97.22% calc(100% - 31px), 95.83% calc(100% - 34px), 94.44% calc(100% - 35px), 93.06% calc(100% - 30px), 91.67% calc(100% - 29px), 90.28% calc(100% - 28px), 88.89% calc(100% - 22px), 87.50% calc(100% - 27px), 86.11% calc(100% - 28px), 84.72% calc(100% - 25px), 83.33% calc(100% - 25px), 81.94% calc(100% - 38px), 80.56% calc(100% - 38px), 79.17% calc(100% - 32px), 77.78% calc(100% - 34px), 76.39% calc(100% - 18px), 75.00% calc(100% - 2px), 73.61% calc(100% - 7px), 72.22% calc(100% - 2px), 70.83% calc(100% - 2px), 69.44% calc(100% - 2px), 68.06% calc(100% - 3px), 66.67% calc(100% - 5px), 65.28% calc(100% - 2px), 63.89% calc(100% - 2px), 62.50% calc(100% - 2px), 61.11% calc(100% - 4px), 59.72% calc(100% - 2px), 58.33% calc(100% - 4px), 56.94% calc(100% - 7px), 55.56% calc(100% - 7px), 54.17% calc(100% - 7px), 52.78% calc(100% - 4px), 51.39% calc(100% - 8px), 50.00% calc(100% - 5px), 48.61% calc(100% - 3px), 47.22% calc(100% - 7px), 45.83% calc(100% - 2px), 44.44% calc(100% - 2px), 43.06% calc(100% - 2px), 41.67% calc(100% - 14px), 40.28% calc(100% - 20px), 38.89% calc(100% - 30px), 37.50% calc(100% - 33px), 36.11% calc(100% - 38px), 34.72% calc(100% - 38px), 33.33% calc(100% - 28px), 31.94% calc(100% - 31px), 30.56% calc(100% - 34px), 29.17% calc(100% - 34px), 27.78% calc(100% - 34px), 26.39% calc(100% - 29px), 25.00% calc(100% - 31px), 23.61% calc(100% - 31px), 22.22% calc(100% - 29px), 20.83% calc(100% - 28px), 19.44% calc(100% - 24px), 18.06% calc(100% - 13px), 16.67% calc(100% - 10px), 15.28% calc(100% - 10px), 13.89% calc(100% - 4px), 12.50% calc(100% - 2px), 11.11% calc(100% - 2px), 9.72% calc(100% - 3px), 8.33% calc(100% - 5px), 6.94% calc(100% - 5px), 5.56% calc(100% - 8px), 4.17% calc(100% - 6px), 2.78% calc(100% - 7px), 1.39% calc(100% - 11px), 0.00% calc(100% - 14px));
  }
  .vo-story-torn-art { max-height: 200px; margin: 0 calc(-1 * var(--vo-section-gutter, 24px)); width: calc(100% + 2 * var(--vo-section-gutter, 24px)); -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .vo-block-story-torn:not(.has-art) .vo-story-torn-paper { padding-top: 40px; padding-left: var(--vo-section-gutter, 24px); }
  .vo-story-torn-side { padding: 70px var(--vo-section-gutter, 24px) 44px; }
}

/* Catalog theme: blackoak. On a page: a framed row, heading left, link right. */
.vo-block-catalog-theme-blackoak .vo-block-catalog-heading { color: #efe6d6; font-family: var(--brand-heading-font, "Playfair Display", Georgia, serif); font-weight: 700; letter-spacing: -.005em; }
.vo-block-catalog-theme-blackoak .vo-block-catalog-sub,
.vo-block-catalog-theme-blackoak .vo-block-catalog-results { color: rgba(239, 230, 214, .7); }
.vo-block-catalog-theme-blackoak:not(.vo-block-catalog-live) {
  width: 100%;
  max-width: var(--vo-content-max, 1180px);
  margin: clamp(40px, 5vw, 72px) auto;
  padding: 0 var(--vo-section-gutter, 24px);
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  row-gap: clamp(18px, 2vw, 28px);
  background: transparent;
}
.vo-block-catalog-theme-blackoak:not(.vo-block-catalog-live) > * { grid-column: 1 / -1; }
.vo-block-catalog-theme-blackoak:not(.vo-block-catalog-live) > .vo-block-catalog-hero { grid-column: 1; grid-row: 1; gap: 8px; text-align: left; align-items: flex-start; justify-items: start; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.vo-block-catalog-theme-blackoak:not(.vo-block-catalog-live) > .vo-block-catalog-hero::before,
.vo-block-catalog-theme-blackoak:not(.vo-block-catalog-live) > .vo-block-catalog-hero::after { display: none; }
.vo-block-catalog-theme-blackoak:not(.vo-block-catalog-live) > .vo-block-catalog-footer { grid-column: 2; grid-row: 1; align-self: end; margin: 0; padding: 0; justify-content: flex-end; }
.vo-block-catalog-theme-blackoak:not(.vo-block-catalog-live) .vo-block-catalog-heading { font-size: clamp(28px, 2.8vw, 42px); line-height: 1.02; margin: 0; text-transform: uppercase; }
.vo-block-catalog-theme-blackoak:not(.vo-block-catalog-live) .vo-block-catalog-sub { margin: 0; font-size: 15px; }
.vo-block-catalog-theme-blackoak:not(.vo-block-catalog-live) :is(.vo-block-catalog-results, .vo-block-catalog-card-tag) { display: none; }
.vo-block-catalog-theme-blackoak:not(.vo-block-catalog-live) .vo-block-catalog-cta {
  background: none !important; border: 0; padding: 4px 0; box-shadow: none; white-space: nowrap;
  color: #efe6d6 !important; font: 600 11px/1.2 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .2em; text-transform: uppercase;
}
.vo-block-catalog-theme-blackoak .vo-block-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: clamp(12px, 1.2vw, 18px); }
.vo-block-catalog-theme-blackoak .vo-block-catalog-card { overflow: hidden; padding: 0; color: var(--vo-cat-ink); }
.vo-block-catalog-theme-blackoak .vo-block-catalog-card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.vo-block-catalog-theme-blackoak .vo-block-catalog-card-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.04); transition: transform .5s ease; }
.vo-block-catalog-theme-blackoak .vo-block-catalog-card:hover .vo-block-catalog-card-media img { transform: scale(1.04); }
.vo-block-catalog-theme-blackoak .vo-block-catalog-card-body { padding: 16px 18px 18px; gap: 8px; }
.vo-block-catalog-theme-blackoak .vo-block-catalog-card-name { font: 600 12.5px/1.35 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--vo-cat-ink); }
.vo-block-catalog-theme-blackoak .vo-block-catalog-card-price { font: 600 13px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); color: var(--vo-cat-accent); }
.vo-block-catalog-theme-blackoak .vo-block-catalog-card-desc { color: var(--vo-cat-muted); font-size: 13px; line-height: 1.5; }
.vo-block-catalog-theme-blackoak :is(.vo-block-catalog-card-add, .vo-block-catalog-primary) {
  background: transparent !important; color: var(--vo-cat-accent) !important;
  border: 1px solid color-mix(in srgb, var(--vo-cat-accent) 60%, transparent); border-radius: 2px;
  font: 600 10.5px/1 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .18em; text-transform: uppercase; padding: 10px 14px;
}
.vo-block-catalog-theme-blackoak :is(.vo-block-catalog-card-add, .vo-block-catalog-primary):hover { background: var(--vo-cat-accent) !important; color: var(--vo-cat-button-text) !important; }
.vo-block-catalog-theme-blackoak:not(.vo-block-catalog-live) .vo-block-catalog-card-add { justify-self: start; align-self: flex-start; width: max-content; }
@media (max-width: 640px) {
  .vo-block-catalog-theme-blackoak:not(.vo-block-catalog-live) { grid-template-columns: minmax(0, 1fr); }
  .vo-block-catalog-theme-blackoak:not(.vo-block-catalog-live) > .vo-block-catalog-footer { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}

/* Image gallery: strip ------------------------------------------------ */
.vo-block.vo-block-image-gallery.vo-block-image-gallery-strip {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(0, 4.2fr);
  grid-template-areas: ". cta" "head grid";
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: 16px;
  align-items: center;
  text-align: left;
}
.vo-block-image-gallery-strip .vo-block-gallery-heading { grid-area: head; margin: 0; padding: 0; max-width: none; text-align: left; }
.vo-block-image-gallery-strip .vo-block-gallery-heading h2 {
  margin: 0;
  font-family: var(--brand-heading-font, "Playfair Display", Georgia, serif);
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.vo-block-image-gallery-strip .vo-block-gallery-eyebrow { letter-spacing: .32em; }
.vo-block-image-gallery-strip .vo-block-gallery-grid {
  grid-area: grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: clamp(8px, 1vw, 14px);
  margin: 0;
}
.vo-block-image-gallery-strip .vo-block-gallery-item { margin: 0; min-width: 0; }
.vo-block-image-gallery-strip .vo-block-gallery-media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: min(var(--brand-radius, 2px), 6px);
  background: #151311;
}
.vo-block-image-gallery-strip .vo-block-gallery-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease, filter .3s ease;
  filter: saturate(.92) contrast(1.04);
}
.vo-block-image-gallery-strip .vo-block-gallery-item:hover img { transform: scale(1.04); filter: saturate(1) contrast(1.06); }
.vo-block-image-gallery-strip .vo-block-gallery-caption { margin-top: 8px; font-size: 13px; }
.vo-block-image-gallery-strip .vo-block-gallery-cta { grid-area: cta; justify-self: end; margin: 0; }
.vo-block-image-gallery-strip .vo-block-gallery-cta .vo-text-link { text-decoration: none; letter-spacing: .2em; text-transform: uppercase; font-size: 11px; color: inherit; }
@media (max-width: 900px) {
  .vo-block.vo-block-image-gallery.vo-block-image-gallery-strip { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "grid" "cta"; }
  .vo-block-image-gallery-strip .vo-block-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vo-block-image-gallery-strip .vo-block-gallery-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .vo-block-image-gallery-strip .vo-block-gallery-item:last-child:nth-child(odd) .vo-block-gallery-media { aspect-ratio: 16 / 9; }
  .vo-block-image-gallery-strip .vo-block-gallery-cta { justify-self: start; }
}

/* Callout: split ------------------------------------------------------- */
.vo-block-cta-band-split .vo-block-cta-band-inner {
  max-width: var(--vo-frame-max, 1180px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
  text-align: left;
}
.vo-block-cta-band-split .vo-block-cta-band-title {
  margin: 0;
  max-width: 11em;
  font-family: var(--brand-heading-font, "Playfair Display", Georgia, serif);
  font-size: clamp(32px, 3.4vw, 50px);
  font-weight: 700;
  line-height: 1.02;
  text-transform: uppercase;
}
.vo-block-cta-band-split .vo-section-eyebrow { letter-spacing: .32em; margin-bottom: 12px; }
.vo-block-cta-band-split .vo-block-cta-band-rest { max-width: 26em; }
.vo-block-cta-band-split .vo-block-cta-band-sub { margin: 0 0 22px; text-align: left; }
.vo-block-cta-band-split .vo-block-cta-band-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent !important;
  color: inherit !important;
  border: 1px solid color-mix(in srgb, currentColor 62%, transparent);
  padding: 15px 26px;
  border-radius: min(var(--brand-radius, 2px), 4px);
  font: 600 11.5px/1 var(--brand-body-font, Inter, system-ui, sans-serif);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.vo-block-cta-band-split .vo-block-cta-band-btn:hover { border-color: var(--brand-primary, currentColor); }
.vo-block-cta-band-image.vo-block-cta-band-split { place-items: center stretch; min-height: clamp(240px, 26vw, 320px); }
.vo-block-cta-band-image.vo-block-cta-band-split .vo-block-cta-band-overlay {
  background: linear-gradient(90deg, rgba(11, 10, 9, .96) 0%, rgba(11, 10, 9, calc(.55 + var(--vo-cta-overlay, .6) * .35)) 46%, rgba(11, 10, 9, calc(var(--vo-cta-overlay, .6) * .55)) 100%);
}
@media (max-width: 760px) {
  .vo-block-cta-band-split .vo-block-cta-band-inner { grid-template-columns: minmax(0, 1fr); }
}

/* Catalog: booking ----------------------------------------------------- */
.vo-bk-block {
  --vo-bk-gold: var(--vo-cat-accent, var(--brand-primary, #d2b48a));
  --vo-bk-on-gold: var(--vo-cat-button-text, var(--brand-button-text, #15110c));
  --vo-bk-ink: var(--vo-cat-ink, var(--ink, #efe6d6));
  --vo-bk-muted: var(--vo-cat-muted, var(--muted, #a99d8b));
  --vo-bk-line: var(--vo-cat-divider, color-mix(in srgb, var(--vo-bk-ink) 18%, transparent));
  --vo-bk-surface: var(--vo-cat-card-bg, transparent);
  width: 100%;
  margin: 0;
  color: var(--vo-bk-ink);
}
/* The booking panel lays itself out (not the themed catalog row). */
.vo-block.vo-block-catalog.vo-bk-block { display: block; max-width: none; margin: 0; padding: 0; background: transparent; }
.vo-bk-panel {
  padding: clamp(22px, 3vw, 40px);
  border: 1px solid var(--vo-bk-line);
  background: color-mix(in srgb, var(--vo-bk-surface) 82%, transparent);
  border-radius: min(var(--brand-radius, 2px), 12px);
  box-sizing: border-box;
}
.vo-bk-steps { --vo-bk-step-line: color-mix(in srgb, var(--vo-bk-ink, #efe6d6) 24%, transparent); list-style: none; margin: 0 0 clamp(26px, 3vw, 38px); padding: 0; display: flex; align-items: center; gap: 12px; }
.vo-bk-step { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.vo-bk-step:last-child { flex: 0 0 auto; }
.vo-bk-step:not(:last-child)::after { content: ""; flex: 1 1 auto; min-width: 16px; height: 1px; background: var(--vo-bk-step-line); }
.vo-bk-step-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--vo-bk-ink, #efe6d6) 38%, transparent);
  color: color-mix(in srgb, var(--vo-bk-ink, #efe6d6) 72%, transparent);
  font: 500 12px/1 var(--brand-body-font, Inter, system-ui, sans-serif);
}
.vo-bk-step-label { color: color-mix(in srgb, var(--vo-bk-ink, #efe6d6) 60%, transparent); font: 600 10.5px/1.2 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.vo-bk-step[data-state="current"] .vo-bk-step-num { background: var(--vo-bk-gold, #d2b48a); border-color: var(--vo-bk-gold, #d2b48a); color: var(--vo-bk-on-gold, #15110c); font-weight: 700; }
.vo-bk-step[data-state="current"] .vo-bk-step-label { color: var(--vo-bk-ink, #efe6d6); }
.vo-bk-step[data-state="done"] .vo-bk-step-num { border-color: var(--vo-bk-gold, #d2b48a); color: var(--vo-bk-gold, #d2b48a); }
.vo-bk-step[data-state="done"] .vo-bk-step-label { color: color-mix(in srgb, var(--vo-bk-ink, #efe6d6) 82%, transparent); }
.vo-bk-step[data-state="done"]:not(:last-child)::after { background: color-mix(in srgb, var(--vo-bk-gold, #d2b48a) 60%, transparent); }
.vo-bk-head { margin: 0 0 18px; }
.vo-bk-title { margin: 0 0 8px; color: var(--vo-bk-ink); font: 600 clamp(15px, 1.25vw, 18px)/1.3 var(--brand-heading-font, "Playfair Display", Georgia, serif); letter-spacing: .24em; text-transform: uppercase; }
.vo-bk-intro { margin: 0; color: var(--vo-bk-muted); font: 400 13.5px/1.55 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-bk-block .vo-block-catalog-statusbar { margin: 0 0 18px; }
.vo-bk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vo-bk-card {
  position: relative;
  display: grid;
  grid-template-columns: clamp(96px, 9vw, 120px) minmax(0, 1fr) 30px;
  grid-template-rows: 1fr 1fr;
  gap: 0 18px;
  align-items: center;
  min-height: 104px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--vo-bk-line);
  background: color-mix(in srgb, var(--vo-bk-ink) 2%, transparent);
  border-radius: min(var(--brand-radius, 2px), 10px);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.vo-bk-card:hover { border-color: color-mix(in srgb, var(--vo-bk-gold) 55%, transparent); }
.vo-bk-input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.vo-bk-card:has(.vo-bk-input:focus-visible) { outline: 2px solid var(--vo-bk-gold); outline-offset: 2px; }
.vo-bk-item.is-selected .vo-bk-card { border-color: var(--vo-bk-gold); background: color-mix(in srgb, var(--vo-bk-gold) 6%, transparent); box-shadow: inset 0 0 0 1px var(--vo-bk-gold); }
.vo-bk-item.is-unavailable .vo-bk-card { opacity: .5; cursor: not-allowed; }
.vo-bk-media {
  grid-row: 1 / 3;
  align-self: stretch;
  overflow: hidden;
  border-radius: min(var(--brand-radius, 2px), 8px);
  background: color-mix(in srgb, var(--vo-bk-gold) 14%, transparent);
  display: grid;
  place-items: center;
  color: var(--vo-bk-gold);
  font: 600 24px/1 var(--brand-heading-font, "Playfair Display", Georgia, serif);
}
.vo-bk-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vo-bk-body { grid-row: 1 / 3; display: grid; gap: 6px; padding: 10px 0; min-width: 0; }
.vo-bk-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.vo-bk-name { color: var(--vo-bk-ink); font: 600 12.5px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .16em; text-transform: uppercase; }
.vo-bk-badge { padding: 3px 6px; border-radius: 2px; background: var(--vo-bk-gold); color: var(--vo-bk-on-gold); font: 700 8.5px/1.2 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .1em; text-transform: uppercase; }
.vo-bk-desc { color: var(--vo-bk-muted); font: 400 12.5px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-bk-price { color: var(--vo-bk-gold); font: 600 12px/1.2 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .04em; }
.vo-bk-radio {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  margin-top: 10px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--vo-bk-ink) 45%, transparent);
  box-sizing: border-box;
}
.vo-bk-item.is-selected .vo-bk-radio { border-color: var(--vo-bk-gold); background: var(--vo-bk-gold); box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--vo-bk-surface) 100%, #0b0a09); }
.vo-bk-arrow { grid-column: 3; grid-row: 2; align-self: end; justify-self: end; margin-bottom: 10px; color: color-mix(in srgb, var(--vo-bk-ink) 70%, transparent); }
.vo-bk-arrow svg { width: 18px; height: 18px; display: block; }
.vo-bk-continue {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(22px, 2.6vw, 32px);
  padding: 17px 40px;
  border: 0;
  border-radius: min(var(--brand-radius, 2px), 6px);
  background: var(--vo-bk-gold);
  color: var(--vo-bk-on-gold);
  font: 600 12px/1 var(--brand-body-font, Inter, system-ui, sans-serif);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  transition: filter .2s ease, opacity .2s ease;
}
.vo-bk-continue svg { width: 16px; height: 16px; }
.vo-bk-continue:hover:not(:disabled) { filter: brightness(1.06); }
.vo-bk-continue:disabled { opacity: .45; cursor: not-allowed; }
.vo-bk-continue:focus-visible { outline: 2px solid var(--vo-bk-gold); outline-offset: 3px; }
.vo-bk-empty { padding: 28px 0; color: var(--vo-bk-muted); }
@media (max-width: 760px) {
  .vo-bk-grid { grid-template-columns: minmax(0, 1fr); }
  .vo-bk-step:not([data-state="current"]) .vo-bk-step-label { display: none; }
  .vo-bk-card { grid-template-columns: 88px minmax(0, 1fr) 26px; gap: 0 14px; }
  .vo-bk-continue { width: 100%; justify-content: center; }
}

/* Visit info ----------------------------------------------------------- */
.vo-block-visit-info {
  --vo-vi-gold: var(--brand-primary, #d2b48a);
  container-type: inline-size;
  display: grid;
  gap: 16px;
  align-content: start;
  width: 100%;
  margin: 0;
  color: var(--ink, #efe6d6);
}
.vo-vi-card {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--vo-vi-gold) 24%, transparent);
  background: color-mix(in srgb, var(--ink, #efe6d6) 3%, transparent);
  border-radius: min(var(--brand-radius, 2px), 12px);
}
.vo-vi-title { margin: 0 0 20px; font: 600 clamp(14px, 1.2vw, 17px)/1.3 var(--brand-heading-font, "Playfair Display", Georgia, serif); letter-spacing: .26em; text-transform: uppercase; color: inherit; }
.vo-vi-studio { display: grid; grid-template-columns: minmax(0, 1fr); }
.vo-vi-studio.has-photo { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.vo-vi-studio-copy { position: relative; z-index: 1; padding: clamp(20px, 2.4vw, 28px); }
.vo-vi-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.vo-vi-lines li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: center; font: 400 13px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-vi-lines svg { width: 38px; height: 38px; padding: 9px; box-sizing: border-box; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.vo-vi-lines a { color: inherit; text-decoration: none; }
.vo-vi-lines a:hover { text-decoration: underline; }
.vo-vi-hours > span { display: block; }
.vo-vi-card .is-sample { opacity: .55; font-style: italic; }
.vo-vi-photo {
  min-height: 160px;
  background: var(--vo-vi-photo) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
}
.vo-vi-list { padding: clamp(20px, 2.4vw, 28px); }
.vo-vi-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.vo-vi-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.vo-vi-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--vo-vi-gold) 64%, transparent); color: var(--vo-vi-gold); }
.vo-vi-icon svg { width: 20px; height: 20px; }
.vo-vi-list strong { display: block; margin: 3px 0 4px; font: 600 11.5px/1.35 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .18em; text-transform: uppercase; }
.vo-vi-list li > span:last-child > span { display: block; color: var(--muted, rgba(239, 230, 214, .68)); font: 400 12.5px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); }
@container (max-width: 440px) {
  .vo-vi-studio.has-photo { grid-template-columns: minmax(0, 1fr); }
  .vo-vi-photo { order: -1; min-height: 130px; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
}


/* Hero: dockside ------------------------------------------------------- */
.vo-block-hero.vo-block-hero-variant-dockside {
  --vo-ds-cream: var(--brand-bg, #fbf3e6);
  --vo-ds-crimson: var(--brand-primary, #a3121b);
  --vo-ds-flame: var(--vo-tpl-flame, #f2541b);
  --vo-ds-frame: var(--vo-frame-max, 1180px);
  --vo-ds-gutter: var(--vo-section-gutter, 32px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: calc(clamp(56px, 7vw, 96px) + var(--vo-hero-top-offset, 0px)) 0 clamp(96px, 10vw, 150px);
  background-color: var(--vo-tpl-deep, #6b0408);
  background-size: auto;
  background-image:
    radial-gradient(60% 80% at 72% 38%, #93121a 0%, transparent 70%),
    radial-gradient(90% 120% at 10% 0%, var(--vo-tpl-deep-hi, #7d0a10) 0%, var(--vo-tpl-deep, #6b0408) 55%, var(--vo-tpl-deep-lo, #4a0205) 100%);
  color: #fff7ee;
  text-align: left;
}
.vo-block-hero-variant-dockside.vo-block-hero-h-md { min-height: clamp(520px, 70vh, 680px); }
.vo-block-hero-variant-dockside.vo-block-hero-h-lg { min-height: clamp(560px, 80vh, 760px); }
/* The photograph fills the opening as is: it is shot with clear crimson on
   the left for the words and the food on the right. */
.vo-block-hero.vo-block-hero-variant-dockside.has-image {
  /* Full height, pinned right; wider screens fill the left with the
     photo's own red, so there is no seam and the food never slides under
     the words. */
  padding-top: calc(clamp(40px, 4.2vw, 76px) + var(--vo-hero-top-offset, 0px));
  padding-bottom: clamp(84px, 7.4vw, 124px);
  background-color: var(--vo-tpl-deep, #6c0100);
  background-image: var(--vo-hero-image);
  background-size: auto 100%;
  background-position: right center;
  background-repeat: no-repeat;
}
.vo-block-hero-variant-dockside.has-image.vo-block-hero-h-lg { min-height: clamp(540px, 39vw, 820px); }
.vo-block-hero-variant-dockside.has-image.vo-block-hero-h-md { min-height: clamp(480px, 34vw, 700px); }
/* The cream wave the band curves into. */
.vo-block-hero-variant-dockside.has-image::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(44px, 6.4vw, 104px);
  z-index: 0;
  background: var(--vo-ds-cream);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 64C180 18 360 6 560 34s360 78 560 70 260-46 320-60v76H0Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 64C180 18 360 6 560 34s360 78 560 70 260-46 320-60v76H0Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
.vo-block-hero-variant-dockside .vo-block-hero-overlay,
.vo-block-hero-variant-dockside .vo-block-hero-stamp { display: none; }
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-dockside > .vo-block-hero-inner,
.vo-block-hero-variant-dockside > .vo-block-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--vo-ds-frame);
  margin: 0 auto;
  padding: 0 var(--vo-ds-gutter);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.vo-block-hero-variant-dockside .vo-block-hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  color: #fff3e6;
  font: 600 12px/1.6 var(--brand-body-font, Inter, system-ui, sans-serif);
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: 1;
}
.vo-block-hero-variant-dockside .vo-block-hero-eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  margin-right: 14px;
  background: var(--vo-ds-flame);
}
.vo-block-hero-variant-dockside .vo-block-hero-title {
  margin: 0;
  max-width: 15em;
  color: #ffffff;
  font-family: "Oswald", "Barlow Condensed", "Arial Narrow", Inter, sans-serif;
  font-size: clamp(44px, 4.9vw, 82px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.005em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 4px 30px rgba(40, 0, 0, .35);
}
.vo-block-hero-variant-dockside .vo-block-hero-title-accent { display: block; color: #ffffff; }
.vo-block-hero-variant-dockside .vo-block-hero-sub {
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  max-width: 21em;
  color: #fff3e6;
  font: 400 clamp(16px, 1.45vw, 21px)/1.45 var(--brand-body-font, Inter, system-ui, sans-serif);
  opacity: 1;
}
.vo-block-hero-variant-dockside .vo-block-hero-actions { gap: 14px 18px; margin-top: clamp(24px, 2.6vw, 34px); }
.vo-block-hero-variant-dockside .vo-block-hero-cta {
  margin-top: clamp(24px, 2.6vw, 34px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  box-sizing: border-box;
  padding: 0 clamp(22px, 2.2vw, 32px);
  border-radius: 999px;
  font: 600 clamp(15px, 1.2vw, 17px)/1 var(--brand-body-font, Inter, system-ui, sans-serif);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: transform .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
}
.vo-block-hero.vo-block-hero-variant-dockside .vo-block-hero-cta.vo-block-hero-cta-primary {
  background: var(--vo-ds-flame) !important;
  color: #ffffff !important;
  border: 2px solid var(--vo-ds-flame);
  box-shadow: 0 14px 30px -14px rgba(242, 84, 27, .8);
}
.vo-block-hero.vo-block-hero-variant-dockside :is(.vo-block-hero-cta-outline, .vo-block-hero-cta-ghost) {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, .9);
}
.vo-block-hero-variant-dockside .vo-block-hero-cta-secondary .vo-cta-arrow { display: none; }
.vo-block-hero-variant-dockside .vo-block-hero-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.vo-block-hero-variant-dockside :is(.vo-block-hero-cta-outline, .vo-block-hero-cta-ghost):hover { background: rgba(255, 255, 255, .1) !important; }
.vo-block-hero-variant-dockside .vo-block-hero-cta:focus-visible { outline: 3px solid #ffd2b8; outline-offset: 3px; }
.vo-block-hero-variant-dockside.has-image .vo-block-hero-highlights {
  margin-top: clamp(26px, 3vw, 40px);
  gap: 12px 28px;
  color: #fff3e6;
}
.vo-block-hero-variant-dockside .vo-block-hero-highlights svg { width: 22px; height: 22px; stroke-width: 1.8; color: #ffffff; }
.vo-block-hero-variant-dockside .vo-block-hero-highlights strong { font: 500 clamp(15px, 1.25vw, 18px)/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-block-hero-variant-dockside .vo-block-hero-highlights .is-sample strong { opacity: .75; font-style: italic; }

/* The slim title band (no photo): the order page and inner pages. */
.vo-block-hero.vo-block-hero-variant-dockside:not(.has-image) {
  min-height: 0;
  margin-bottom: clamp(26px, 3vw, 44px);
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 14px clamp(28px, 4vw, 64px);
  padding: calc(clamp(22px, 2.6vw, 34px) + var(--vo-hero-top-offset, 0px)) max(var(--vo-ds-gutter), calc((100% - var(--vo-ds-frame)) / 2 + var(--vo-ds-gutter))) clamp(24px, 2.8vw, 36px);
  background-color: var(--vo-ds-crimson);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='150' viewBox='0 0 260 150' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='.09'%3E%3Cpath d='M30 52c14-20 44-24 60-10l20-12v42L90 60c-16 14-46 10-60-8Z'/%3E%3Ccircle cx='48' cy='48' r='2'/%3E%3Cpath d='M170 112c10-14 32-17 44-7l14-9v30l-14-9c-12 10-34 7-44-5Z'/%3E%3Cpath d='M150 30c6 6 6 14 0 20M162 24c9 9 9 23 0 32'/%3E%3Cpath d='M70 120c4-6 10-6 14 0s10 6 14 0 10-6 14 0'/%3E%3C/svg%3E"), linear-gradient(100deg, color-mix(in srgb, var(--vo-ds-crimson) 92%, #000) 0%, var(--vo-ds-crimson) 55%, color-mix(in srgb, var(--vo-ds-crimson) 86%, #000) 100%);
  background-size: 260px 150px, auto;
  background-position: right -40px center, center;
  background-repeat: repeat, no-repeat;
}
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-dockside:not(.has-image) > .vo-block-hero-inner,
.vo-block-hero-variant-dockside:not(.has-image) > .vo-block-hero-inner {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  flex: 0 1 auto;
}
.vo-block-hero-variant-dockside:not(.has-image) .vo-block-hero-title {
  max-width: none;
  font-size: clamp(34px, 4.4vw, 62px);
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  text-shadow: none;
}
.vo-block-hero-variant-dockside:not(.has-image) .vo-block-hero-title-accent { display: inline; margin-left: .25em; }
.vo-block-hero-variant-dockside:not(.has-image) .vo-block-hero-sub { margin-top: 8px; font-size: 16px; }
.vo-block-hero-variant-dockside:not(.has-image) .vo-block-hero-cta { margin-top: 18px; min-height: 46px; }
.vo-block-hero-variant-dockside:not(.has-image) .vo-block-hero-highlights {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  flex: 0 1 auto;
  gap: 10px 0;
  color: #fff3e6;
}
.vo-block-hero-variant-dockside:not(.has-image) .vo-block-hero-highlights li { gap: 12px; padding: 4px clamp(18px, 2.2vw, 30px); }
.vo-block-hero-variant-dockside:not(.has-image) .vo-block-hero-highlights li:first-child { padding-left: 0; }
.vo-block-hero-variant-dockside:not(.has-image) .vo-block-hero-highlights li + li { border-left: 1px solid rgba(255, 243, 230, .45); }
.vo-block-hero-variant-dockside:not(.has-image) .vo-block-hero-highlights svg { width: 26px; height: 26px; }
.vo-builder-preview-root .vo-block-hero-variant-dockside {
  width: var(--vo-bleed-w, 100%);
  max-width: none;
  margin-left: calc(50% - var(--vo-bleed-w, 100%) / 2) !important;
  margin-right: 0 !important;
}
.vo-builder-page:has(> .vo-builder-blocks > .vo-block-slot:first-child > .vo-block-hero-variant-dockside) { padding-top: 0; }
/* A garnished close at the end of the page meets the footer. */
.vo-builder-page:has(> .vo-builder-blocks > .vo-block-slot:last-child > .vo-block-cta-band-garnish) { padding-bottom: 0; margin-bottom: 0; }
@media (max-width: 900px) {
  .vo-block-hero.vo-block-hero-variant-dockside.has-image.vo-block-hero-h-lg,
  .vo-block-hero.vo-block-hero-variant-dockside.has-image {
    /* Phones: the copy on plain crimson (the photo's own red), the food
       along the bottom. */
    justify-content: flex-start;
    --vo-ds-photo-h: clamp(270px, 76vw, 460px);
    padding-bottom: clamp(230px, 64vw, 400px);
    /* A short blend hides the photo's top edge against the plain red. */
    background-image: linear-gradient(180deg, var(--vo-tpl-deep, #6c0100) 0, transparent 100%), var(--vo-hero-image);
    background-size: 100% 70px, auto var(--vo-ds-photo-h);
    background-position: 0 calc(100% - var(--vo-ds-photo-h) + 70px), 74% bottom;
    background-repeat: no-repeat, no-repeat;
    background-color: var(--vo-tpl-deep, #6c0100);
  }
  .vo-block-hero-variant-dockside.has-image .vo-block-hero-highlights { order: 2; }
  .vo-block-hero-variant-dockside .vo-block-hero-title { font-size: clamp(44px, 12vw, 72px); }
  .vo-block-hero-variant-dockside .vo-block-hero-eyebrow { font-size: 11px; letter-spacing: .2em; }
  .vo-block-hero-variant-dockside .vo-block-hero-eyebrow-dot { margin: 0 .7em; }
  .vo-block-hero-variant-dockside:not(.has-image) .vo-block-hero-highlights li { padding: 2px 0; border: 0 !important; }
  .vo-block-hero-variant-dockside:not(.has-image) .vo-block-hero-highlights { flex-direction: column; align-items: flex-start; }
}

/* Favourites row (catalog, compact layout) --------------------------- */
.vo-block-catalog.vo-block-catalog-theme-dockside {
  --vo-ds-crimson: var(--vo-cat-accent, #a3121b);
  --vo-ds-ink: var(--vo-cat-ink, #2a1210);
  --vo-ds-line: var(--vo-cat-divider, #ecd5b8);
  background: transparent;
}
.vo-block-catalog-theme-dockside .vo-block-catalog-hero { background: none; padding: 0; border-radius: 0; }
.vo-block-catalog-theme-dockside .vo-block-catalog-heading {
  font-family: "Oswald", "Barlow Condensed", "Arial Narrow", Inter, sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--vo-ds-crimson);
}
.vo-block-catalog-theme-dockside .vo-block-catalog-sub { color: var(--vo-ds-ink); font-size: 16px; }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact { position: relative; gap: 22px; margin: clamp(36px, 4vw, 56px) 0; }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-hero { gap: 6px; }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-heading {
  display: grid;
  grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  width: min(100%, 720px);
  font-size: clamp(40px, 5vw, 66px);
  text-transform: uppercase;
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-heading::before,
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-heading::after {
  content: "";
  height: 2px;
  background: var(--vo-ds-crimson);
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-results { display: none; }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1.5px solid var(--vo-ds-line);
  border-radius: 14px;
  background: var(--vo-cat-card-bg, #fffaf1);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-card:hover { transform: translateY(-3px); box-shadow: var(--vo-cat-card-shadow-hover); }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-card-media {
  display: block;
  aspect-ratio: 16 / 9;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: #f3e2cc;
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-card:hover .vo-block-catalog-card-media img { transform: scale(1.04); }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 18px 20px;
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-card-head { display: block; }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-card-name {
  color: var(--vo-ds-crimson);
  font: 600 clamp(22px, 2vw, 28px)/1.05 "Oswald", "Barlow Condensed", "Arial Narrow", Inter, sans-serif;
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-card-price { display: none; }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-card-desc {
  max-width: 30ch;
  color: var(--vo-ds-ink);
  font-size: 14px;
  line-height: 1.45;
  -webkit-line-clamp: 2;
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-card-add {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 9px 22px;
  border: 1.5px solid var(--vo-ds-crimson);
  border-radius: 999px;
  background: transparent;
  color: var(--vo-ds-crimson);
  font: 600 15px/1.1 var(--brand-body-font, Inter, system-ui, sans-serif);
  letter-spacing: 0;
  text-transform: none;
  transition: background .2s ease, color .2s ease;
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-card-add::after { content: "\2192"; }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-card:hover .vo-block-catalog-card-add { background: var(--vo-ds-crimson); color: #ffffff; }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-card-foot { display: contents; }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-card-body > .vo-block-catalog-card-add,
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-card-foot .vo-block-catalog-card-add { margin-top: 10px; }
/* "View Full Menu" sits at the top right of the row on wide screens. */
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-footer { margin: 0; text-align: center; }
.vo-block-catalog-theme-dockside .vo-block-catalog-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 2px solid var(--vo-ds-crimson);
  border-radius: 0;
  background: none;
  color: var(--vo-ds-crimson);
  font: 600 15px/1.2 var(--brand-body-font, Inter, system-ui, sans-serif);
}
@media (min-width: 981px) {
  .vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-footer { position: absolute; top: clamp(26px, 3vw, 40px); right: 0; }
}
@media (max-width: 860px) {
  .vo-block-catalog-theme-dockside.vo-block-catalog-layout-compact .vo-block-catalog-grid { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin: 0 auto; }
}

/* Order page dishes (catalog, modern layout) -------------------------- */
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern { gap: 18px; }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-hero { justify-items: start; text-align: left; gap: 8px; }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-heading {
  color: var(--vo-ds-ink);
  font-size: clamp(38px, 4.4vw, 62px);
  font-weight: 700;
  letter-spacing: -.005em;
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-sub { max-width: 640px; }
.vo-block-catalog-theme-dockside .vo-block-catalog-cats-underline {
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: clamp(18px, 2.6vw, 40px);
  border-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.vo-block-catalog-theme-dockside .vo-block-catalog-cats-underline .vo-block-catalog-cat {
  padding: 8px 2px 10px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--vo-ds-ink);
  font: 500 clamp(17px, 1.5vw, 21px)/1.1 "Oswald", "Barlow Condensed", "Arial Narrow", Inter, sans-serif;
  white-space: nowrap;
}
.vo-block-catalog-theme-dockside .vo-block-catalog-cats-underline .vo-block-catalog-cat:hover { color: var(--vo-ds-crimson); }
.vo-block-catalog-theme-dockside[data-cat-active-style] .vo-block-catalog-cats-underline .vo-block-catalog-cat.is-active,
.vo-block-catalog-theme-dockside .vo-block-catalog-cats-underline .vo-block-catalog-cat.is-active {
  background: none !important;
  color: var(--vo-ds-crimson) !important;
  border-color: transparent !important;
  border-bottom-color: var(--vo-ds-crimson) !important;
  box-shadow: none;
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-results { color: #6b4d42; font-size: 13px; }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  align-items: stretch;
  min-height: 170px;
  overflow: hidden;
  padding: 0;
  border: 1.5px solid var(--vo-ds-line);
  border-radius: 14px;
  background: var(--vo-cat-card-bg, #fffaf1);
  text-align: left;
  color: inherit;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card:hover { box-shadow: var(--vo-cat-card-shadow-hover); }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card.is-text-only { grid-template-columns: minmax(0, 1fr); }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card-media {
  display: block;
  height: 100%;
  min-height: 170px;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: #f3e2cc;
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card-media img { width: 100%; height: 100%; object-fit: cover; }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card-fallback {
  display: grid;
  place-items: center;
  color: var(--vo-ds-crimson);
  font: 700 44px/1 "Oswald", "Barlow Condensed", "Arial Narrow", Inter, sans-serif;
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: clamp(14px, 1.4vw, 20px) clamp(16px, 1.6vw, 22px) clamp(14px, 1.4vw, 18px);
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card-head { display: contents; }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card-name {
  order: 1;
  color: var(--vo-ds-ink);
  font: 600 clamp(20px, 1.8vw, 26px)/1.08 "Oswald", "Barlow Condensed", "Arial Narrow", Inter, sans-serif;
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card-rating { order: 2; }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card-desc {
  order: 3;
  color: #6b4d42;
  font-size: 13.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card-price {
  order: 4;
  display: flex;
  align-items: center;
  min-height: 46px;
  margin-top: auto;
  padding-right: 56px;
  color: var(--vo-ds-crimson);
  font: 700 clamp(22px, 2vw, 28px)/1 "Oswald", "Barlow Condensed", "Arial Narrow", Inter, sans-serif;
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card-foot,
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card-body > .vo-block-catalog-card-add { order: 5; }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
.vo-block-catalog-theme-dockside .vo-block-catalog-card-tag {
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--vo-ds-crimson) 9%, transparent);
  color: var(--vo-ds-crimson);
  font: 600 11px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif);
}
/* The round "+" in the bottom-right corner (preview pill and live Add). */
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card-add,
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern.vo-block-catalog-live .vo-block-catalog-actions button.vo-block-catalog-primary.vo-block-catalog-card-add:not(:disabled) {
  position: absolute;
  right: clamp(12px, 1.2vw, 16px);
  bottom: clamp(12px, 1.2vw, 16px);
  width: 46px;
  height: 46px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--vo-ds-crimson);
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  box-shadow: 0 10px 20px -10px rgba(120, 10, 16, .9);
  transition: transform .18s ease, filter .18s ease;
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card-add::before {
  content: "+";
  color: #ffffff;
  font: 400 30px/1 var(--brand-body-font, Inter, system-ui, sans-serif);
  transform: translateY(-1px);
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card-add:hover { transform: scale(1.06); filter: brightness(1.08); }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern.vo-block-catalog-live .vo-block-catalog-actions { margin-left: 0; }
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern.vo-block-catalog-live .vo-block-catalog-secondary {
  padding: 5px 10px;
  border-radius: 999px;
  border-color: var(--vo-ds-line);
  font-size: 12px;
}
.vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern.vo-block-catalog-live .vo-block-catalog-actions button.vo-block-catalog-primary.vo-block-catalog-card-add:disabled {
  border-radius: 999px;
  padding: 7px 12px;
}
.vo-block-catalog-theme-dockside .vo-wish { z-index: 2; }
@media (max-width: 1180px) {
  .vo-order-catalog.has-cart-rail .vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-grid { grid-template-columns: minmax(0, 1fr); }
  .vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card { grid-template-columns: 38% minmax(0, 1fr); min-height: 150px; }
  .vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card-media { min-height: 150px; }
  .vo-block-catalog-theme-dockside.vo-block-catalog-layout-modern .vo-block-catalog-card-desc { -webkit-line-clamp: 2; }
}

/* Story beside two photographs ---------------------------------------- */
.vo-block.vo-block-story-split.vo-block-story-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(26px, 4vw, 64px);
  padding: clamp(28px, 4vw, 56px) 0;
  background: none;
}
.vo-block-story-duo.vo-block-story-duo-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.vo-block-story-duo.vo-block-story-duo-right .vo-story-duo-photos { order: 2; }
.vo-block-story-duo.is-text-only { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.vo-story-duo-photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.vo-block-story-duo.has-two .vo-story-duo-photos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.vo-story-duo-photos figure { margin: 0; overflow: hidden; border-radius: 12px; aspect-ratio: 4 / 3.4; background: #f3e2cc; }
.vo-story-duo-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vo-block-story-duo .vo-block-story-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 0; }
.vo-block-story-duo .vo-block-story-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
  color: var(--ink, #2a1210);
  font: 700 12px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif);
  letter-spacing: .28em;
  text-transform: uppercase;
}
.vo-block-story-duo .vo-block-story-eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--brand-primary, #a3121b); }
.vo-block-story-duo .vo-block-story-copy h2 {
  margin: 0;
  color: var(--vo-brand-text, var(--brand-primary, #a3121b));
  font: 700 clamp(40px, 4.8vw, 70px)/.95 "Oswald", "Barlow Condensed", "Arial Narrow", Inter, sans-serif;
  letter-spacing: -.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.vo-block-story-duo .vo-block-story-copy p { margin: 18px 0 0; max-width: 34em; color: var(--ink, #2a1210); font-size: 16.5px; line-height: 1.55; }
.vo-block-story-duo .vo-block-story-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--vo-tpl-flame, #f2541b);
  color: #ffffff;
  font: 600 15px/1 var(--brand-body-font, Inter, system-ui, sans-serif);
  text-decoration: none;
  box-shadow: 0 12px 24px -14px rgba(242, 84, 27, .9);
}
.vo-block-story-duo .vo-block-story-link:hover { filter: brightness(1.06); }
@media (max-width: 860px) {
  .vo-block.vo-block-story-split.vo-block-story-duo,
  .vo-block-story-duo.vo-block-story-duo-right { grid-template-columns: minmax(0, 1fr); }
  .vo-block-story-duo.vo-block-story-duo-right .vo-story-duo-photos { order: 0; }
}

/* Closing band, garnished --------------------------------------------- */
.vo-block.vo-block-cta-band.vo-block-cta-band-garnish {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: clamp(40px, 5vw, 64px) var(--vo-section-gutter, 32px);
  border-radius: 0;
  background: radial-gradient(70% 140% at 50% 50%, var(--vo-tpl-deep-hi, #8c0c13) 0%, var(--vo-tpl-deep, #6b0408) 70%, var(--vo-tpl-deep-lo, #560306) 100%);
  color: #ffffff;
  text-align: center;
}
.vo-block-cta-band-garnish[style*="--vo-tint-bg"] { background: var(--vo-tint-bg); }
.vo-builder-page .vo-block-slot-full > .vo-block-cta-band-garnish {
  width: var(--vo-bleed-w, 100vw);
  max-width: var(--vo-bleed-w, 100vw);
  margin-left: calc(50% - var(--vo-bleed-w, 100vw) / 2);
  margin-right: calc(50% - var(--vo-bleed-w, 100vw) / 2);
}
.vo-builder-preview-root .vo-block-cta-band-garnish {
  width: var(--vo-bleed-w, 100%);
  max-width: none;
  margin-left: calc(50% - var(--vo-bleed-w, 100%) / 2) !important;
  margin-right: 0 !important;
}
.vo-block.vo-block-cta-band.vo-block-cta-band-garnish.has-image {
  background: var(--vo-cta-image) center / cover no-repeat, #6e0204;
}
.vo-block-cta-band-garnish .vo-block-cta-band-inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  background: none;
  box-shadow: none;
  color: inherit;
}
.vo-block-cta-band-garnish .vo-section-eyebrow { margin: 0; color: #ffd9c4; font: 600 12px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .28em; text-transform: uppercase; }
.vo-block-cta-band-garnish .vo-block-cta-band-title {
  margin: 0;
  color: #ffffff;
  font: 700 clamp(32px, 4vw, 54px)/1 "Oswald", "Barlow Condensed", "Arial Narrow", Inter, sans-serif;
  letter-spacing: -.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.vo-block-cta-band-garnish .vo-block-cta-band-sub { margin: 0; color: #fff1e6; font-size: clamp(15px, 1.3vw, 18px); opacity: 1; }
.vo-block-cta-band-garnish .vo-block-cta-band-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 14px 34px;
  border: 0;
  border-radius: 999px;
  background: var(--vo-tpl-flame, #f2541b);
  /* !important: the generic .vo-block-cta-band-btn colours its label with
     the brand (!important), which reads poorly on the bright action pill. */
  color: #ffffff !important;
  font: 600 16px/1 var(--brand-body-font, Inter, system-ui, sans-serif);
  text-decoration: none;
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--vo-tpl-flame, #f2541b) 90%, transparent);
}
.vo-block-cta-band-garnish .vo-block-cta-band-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
@media (max-width: 760px) {
  .vo-block.vo-block-cta-band.vo-block-cta-band-garnish.has-image { background-size: auto 100%; }
  .vo-block-cta-band-garnish .vo-block-cta-band-inner { text-shadow: 0 2px 18px rgba(60, 0, 0, .6); }
}

/* Order panel (cart block, dockside) ---------------------------------- */
.vo-block-cart.vo-block-cart-variant-dockside {
  --vo-cart-accent: var(--vo-cat-accent, var(--brand-primary, #a3121b));
  --vo-cart-card: transparent;
  --vo-cart-line: var(--vo-cat-divider, #ecd5b8);
  --vo-cart-ink: var(--vo-cat-ink, #2a1210);
  --vo-cart-muted: var(--vo-cat-muted, #6b4d42);
  position: relative;
  padding: clamp(18px, 2vw, 30px) 0 18px clamp(18px, 2.2vw, 34px);
  border-left: 1px solid var(--vo-cart-line);
}
.vo-block-cart-variant-dockside .vo-cart-panel { border: 0; border-radius: 0; overflow: visible; background: transparent; }
.vo-block-cart-variant-dockside .vo-cart-head { padding: 0 0 14px; border: 0; background: none; color: var(--vo-cart-ink); }
.vo-block-cart-variant-dockside .vo-cart-head h2 { font: 700 clamp(30px, 2.8vw, 40px)/1 "Oswald", "Barlow Condensed", "Arial Narrow", Inter, sans-serif; letter-spacing: -.005em; }
.vo-block-cart-variant-dockside .vo-cart-lines { padding: 0; max-height: 520px; }
.vo-block-cart-variant-dockside .vo-cart-line {
  grid-template-columns: clamp(78px, 6.4vw, 96px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}
.vo-block-cart-variant-dockside .vo-cart-thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 10px; background: #f3e2cc; }
.vo-block-cart-variant-dockside .vo-cart-thumb img { object-fit: cover; }
.vo-block-cart-variant-dockside .vo-cart-line-main { gap: 3px; }
.vo-block-cart-variant-dockside .vo-cart-line-name { font: 600 clamp(17px, 1.4vw, 20px)/1.1 "Oswald", "Barlow Condensed", "Arial Narrow", Inter, sans-serif; }
.vo-block-cart-variant-dockside .vo-cart-line-each { display: block; margin: 0; color: var(--vo-cart-muted); font-size: 13px; }
.vo-block-cart-variant-dockside .vo-cart-qty { margin-top: 8px; border-color: var(--vo-cart-line); border-radius: 8px; background: #fffaf1; }
.vo-block-cart-variant-dockside .vo-cart-qty button { width: 32px; height: 32px; font-size: 18px; }
.vo-block-cart-variant-dockside .vo-cart-qty span { min-width: 30px; border-left: 1px solid var(--vo-cart-line); border-right: 1px solid var(--vo-cart-line); font-size: 14px; line-height: 32px; }
.vo-block-cart-variant-dockside .vo-cart-qty.is-static span { border: 0; padding: 0 8px; }
.vo-block-cart-variant-dockside .vo-cart-line-end { grid-auto-flow: column; align-items: center; align-content: center; gap: 14px; }
.vo-block-cart-variant-dockside .vo-cart-line-end strong { order: -1; font: 600 clamp(18px, 1.5vw, 21px)/1 "Oswald", "Barlow Condensed", "Arial Narrow", Inter, sans-serif; }
.vo-block-cart-variant-dockside .vo-cart-remove { color: var(--vo-cart-accent); font-size: 22px; }
.vo-block-cart-variant-dockside .vo-cart-empty { padding: 30px 8px; border: 1.5px dashed var(--vo-cart-line); border-radius: 12px; }
.vo-block-cart-variant-dockside .vo-cart-foot { gap: 12px; padding: 18px 0 0; border-top: 1px solid var(--vo-cart-line); }
.vo-block-cart-variant-dockside .vo-cart-subtotal { font-size: 15.5px; color: var(--vo-cart-ink); }
.vo-block-cart-variant-dockside .vo-cart-subtotal span { font-weight: 400; }
.vo-block-cart-variant-dockside .vo-cart-subtotal strong { font-weight: 500; }
.vo-block-cart-variant-dockside .vo-cart-total { align-items: baseline; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--vo-cart-line); }
.vo-block-cart-variant-dockside .vo-cart-total span { font: 700 clamp(28px, 2.6vw, 36px)/1 "Oswald", "Barlow Condensed", "Arial Narrow", Inter, sans-serif; }
.vo-block-cart-variant-dockside .vo-cart-total strong { color: var(--vo-cart-accent); font: 700 clamp(28px, 2.6vw, 36px)/1 "Oswald", "Barlow Condensed", "Arial Narrow", Inter, sans-serif; }
.vo-block-cart-variant-dockside .vo-cart-checkout {
  gap: 10px;
  min-height: 56px;
  margin-top: 6px;
  border-radius: 999px;
  font: 600 18px/1 var(--brand-body-font, Inter, system-ui, sans-serif);
  box-shadow: 0 14px 28px -16px rgba(120, 10, 16, .9);
}
.vo-block-cart-variant-dockside .vo-cart-outline { border-radius: 999px; }
.vo-block-cart-variant-dockside.is-sticky { top: calc(var(--vo-sf-header-h, 77px) + 12px); }
@media (max-width: 1100px) {
  .vo-block-cart.vo-block-cart-variant-dockside { padding-left: 0; border-left: 0; }
}

/* Full-page checkout ("Finish your order") ----------------------------- */
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] #cart-sidebar #cart-panel {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] #cart-sidebar { padding-top: 0 !important; }
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] .cart-panel-header {
  position: relative;
  justify-content: center;
  margin: 0 0 clamp(22px, 3vw, 36px);
  padding: clamp(22px, 2.6vw, 34px) 0;
  background: var(--brand-primary, #a3121b);
  box-shadow: 0 0 0 100vmax var(--brand-primary, #a3121b);
  clip-path: inset(0 -100vmax);
  color: #ffffff;
}
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] .cart-panel-header > div:last-child { display: none; }
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] .cart-panel-header h2 {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  color: #ffffff !important;
  font: 700 clamp(34px, 4vw, 56px)/1 "Oswald", "Barlow Condensed", "Arial Narrow", Inter, sans-serif !important;
  letter-spacing: -.005em;
  text-transform: uppercase;
}
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] .cart-panel-header h2::before,
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] .cart-panel-header h2::after {
  content: "";
  width: clamp(36px, 5vw, 66px);
  height: 2px;
  background: radial-gradient(circle at 3px 50%, #e3a23b 3px, transparent 3.5px) left center / 8px 8px no-repeat, linear-gradient(#e3a23b, #e3a23b) 8px center / calc(100% - 8px) 2px no-repeat;
  height: 8px;
}
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] .cart-panel-header h2::after { transform: scaleX(-1); }
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] .cart-panel-header .badge { display: none; }
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] .checkout-page-back { color: var(--brand-primary, #a3121b); font-size: .9rem; }
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] #cart-panel > .checkout-page-back {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
}
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] :is(.checkout-section, .checkout-customer) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0;
  padding-right: 0;
}
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] :is(.checkout-section-heading, .checkout-section-title) {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  color: var(--vo-drawer-ink, #2a1210);
  font: 700 clamp(24px, 2.2vw, 32px)/1 "Oswald", "Barlow Condensed", "Arial Narrow", Inter, sans-serif !important;
  letter-spacing: 0;
  text-transform: uppercase;
}
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] :is(.checkout-section-heading, .checkout-section-title)::after {
  content: "";
  flex: 1;
  height: 1.5px;
  background: color-mix(in srgb, var(--brand-primary, #a3121b) 70%, transparent);
}
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] .checkout-section-icon { display: none; }
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] .checkout-contact-label { color: var(--vo-drawer-ink, #2a1210); font-size: 14px; font-weight: 500; }
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] :is(input:not([type=checkbox]):not([type=radio]), select, textarea, .input) {
  min-height: 46px;
  border-radius: 10px !important;
  background: #fffaf1 !important;
}
/* The order summary column: a cream card. */
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] .checkout-col-side {
  padding: clamp(18px, 2vw, 26px);
  border: 1.5px solid #ecd5b8;
  border-radius: 16px;
  background: #fffaf1;
}
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] .checkout-col-side .cart-item {
  grid-template-columns: 84px minmax(0, 1fr) auto auto;
  border: 0 !important;
  border-bottom: 1px solid #ecd5b8 !important;
  border-radius: 0;
  background: transparent !important;
  padding: 12px 0;
}
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] .checkout-col-side .cart-item-thumb { width: 84px; height: 72px; border-radius: 10px; }
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] .cart-item-name { font: 600 18px/1.1 "Oswald", "Barlow Condensed", "Arial Narrow", Inter, sans-serif; }
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] .cart-item-total { font: 600 19px/1 "Oswald", "Barlow Condensed", "Arial Narrow", Inter, sans-serif; }
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] .checkout-total-row {
  margin-top: 6px;
  padding-top: 14px;
  font: 700 clamp(24px, 2.4vw, 32px)/1 "Oswald", "Barlow Condensed", "Arial Narrow", Inter, sans-serif !important;
}
.vo-catalog-page[data-catalog-theme="dockside"] .vo-storefront[data-checkout-view="true"] #checkout-submit {
  min-height: 60px;
  border-radius: 14px !important;
  font: 600 clamp(19px, 1.8vw, 24px)/1 "Oswald", "Barlow Condensed", "Arial Narrow", Inter, sans-serif !important;
  letter-spacing: .01em;
  box-shadow: 0 16px 30px -18px rgba(120, 10, 16, .9);
}


/* Hero: curbside ------------------------------------------------------- */
.vo-block-hero.vo-block-hero-variant-curbside {
  --vo-cs-cream: var(--brand-bg, #faf6ed);
  --vo-cs-red: var(--brand-primary, #d0212a);
  --vo-cs-frame: var(--vo-frame-max, 1180px);
  --vo-cs-gutter: var(--vo-section-gutter, 32px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: calc(clamp(28px, 3vw, 48px) + var(--vo-hero-top-offset, 0px)) 0 clamp(28px, 3vw, 44px);
  background: var(--vo-cs-cream);
  color: #141110;
  text-align: left;
}
/* The photograph is shot on the same cream: pinned right at full height,
   the page's cream fills the left behind the words with no seam. */
.vo-block-hero.vo-block-hero-variant-curbside.has-image { background: var(--vo-cs-cream); }
.vo-block-hero-variant-curbside.has-image::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: var(--vo-cs-strip-room, 0px);
  aspect-ratio: 3 / 2;
  max-width: 68%;
  background: var(--vo-hero-image) right top / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%), linear-gradient(180deg, transparent 0, #000 9%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 18%), linear-gradient(180deg, transparent 0, #000 9%, #000 90%, transparent 100%);
  mask-composite: intersect;
  pointer-events: none;
}
.vo-block-hero-variant-curbside.has-image.vo-block-hero-h-lg { min-height: clamp(560px, 44vw, 780px); }
.vo-block-hero-variant-curbside.has-image.vo-block-hero-h-md { min-height: clamp(380px, 28vw, 520px); }
.vo-block-hero-variant-curbside.has-image.has-highlights { --vo-cs-strip-room: 64px; padding-bottom: 0; }
.vo-block-hero-variant-curbside .vo-block-hero-overlay,
.vo-block-hero-variant-curbside .vo-block-hero-stamp,
.vo-block-hero-variant-curbside .vo-block-hero-eyebrow { display: none; }
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-curbside > .vo-block-hero-inner,
.vo-block-hero-variant-curbside > .vo-block-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--vo-cs-frame);
  margin: 0 auto;
  padding: 0 var(--vo-cs-gutter);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.vo-block-hero-variant-curbside .vo-block-hero-title {
  margin: 0;
  max-width: 9.5em;
  color: #141110;
  font-family: "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(60px, 8.4vw, 148px);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.vo-block-hero-variant-curbside .vo-block-hero-title-accent { display: block; color: #141110; }
.vo-block-hero-variant-curbside .vo-block-hero-sub {
  max-width: 21em;
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  color: #141110;
  font: 400 clamp(19px, 1.75vw, 27px)/1.25 "Fraunces", Georgia, "Times New Roman", serif;
  opacity: 1;
}
.vo-block-hero-variant-curbside .vo-block-hero-actions { gap: 14px 32px; margin-top: clamp(22px, 2.4vw, 32px); align-items: center; }
.vo-block-hero-variant-curbside > .vo-block-hero-inner > .vo-block-hero-cta { margin-top: clamp(22px, 2.4vw, 32px); }
.vo-block-hero.vo-block-hero-variant-curbside .vo-block-hero-cta.vo-block-hero-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 34px;
  border: 0;
  border-radius: 10px;
  background: var(--vo-cs-red) !important;
  color: var(--brand-button-text, #ffffff) !important;
  font: 400 clamp(17px, 1.3vw, 20px)/1 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  letter-spacing: .01em;
  text-transform: none;
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--vo-cs-red) 90%, transparent);
  transition: transform .15s ease, filter .15s ease;
}
/* Second action: a red-underlined text link ("Find the truck →"). */
.vo-block-hero.vo-block-hero-variant-curbside :is(.vo-block-hero-cta-outline, .vo-block-hero-cta-ghost) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 0 0 4px;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: inset 0 -3px 0 var(--vo-cs-red);
  color: #141110 !important;
  font: 400 clamp(16px, 1.2vw, 19px)/1.1 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  text-transform: none;
}
.vo-block-hero-variant-curbside .vo-block-hero-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.vo-block-hero-variant-curbside .vo-block-hero-cta:focus-visible { outline: 3px solid #ffd23a; outline-offset: 4px; }
/* The sticker: a yellow starburst on the photo. */
.vo-block-hero-variant-curbside .vo-block-hero-sticker {
  position: absolute;
  z-index: 2;
  top: clamp(14px, 2.6vw, 44px);
  right: clamp(16px, 5vw, 80px);
  width: clamp(104px, 10vw, 150px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23ffd23a' d='M100 0l13 22 22-12 4 25 25-3-6 25 24 8-15 20 19 16-22 12 11 23-25 4 2 25-24-7-9 24-19-17-19 17-9-24-24 7 2-25-25-4 11-23-22-12 19-16-15-20 24-8-6-25 25 3 4-25 22 12z'/%3E%3C/svg%3E") center / contain no-repeat;
  color: #141110;
  transform: rotate(-12deg);
  filter: drop-shadow(0 6px 10px rgba(80, 50, 0, .18));
  pointer-events: none;
}
.vo-block-hero-variant-curbside .vo-block-hero-sticker > span {
  display: grid;
  justify-items: center;
  gap: 0;
  font: 400 clamp(12px, 1.05vw, 16px)/1.05 "Permanent Marker", "Comic Sans MS", cursive;
  text-align: center;
  text-transform: uppercase;
}
.vo-block-hero-variant-curbside .vo-block-hero-sticker > span::after {
  content: "";
  width: 1.5em;
  height: 1.5em;
  margin-top: .25em;
  border: 2px solid currentColor;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 40%, currentColor 0 7%, transparent 8%),
    radial-gradient(circle at 66% 40%, currentColor 0 7%, transparent 8%),
    radial-gradient(60% 46% at 50% 54%, transparent 0 58%, currentColor 60% 72%, transparent 74%) 0 0 / 100% 100%;
}
/* Handwritten note on the photo ("Good food / happier / people"). */
.vo-block-hero.vo-block-hero-variant-curbside .vo-block-hero-script {
  position: absolute;
  z-index: 2;
  top: auto;
  right: clamp(14px, 3.4vw, 60px);
  bottom: calc(var(--vo-cs-strip-room, 0px) + clamp(18px, 3vw, 54px));
  display: grid;
  justify-items: center;
  color: #141110;
  font: 400 clamp(15px, 1.35vw, 21px)/1.05 "Permanent Marker", "Comic Sans MS", cursive;
  text-shadow: none;
  text-transform: uppercase;
  transform: rotate(-10deg);
  transform-origin: center;
  pointer-events: none;
}
.vo-block-hero-variant-curbside .vo-block-hero-script span { margin-left: 0 !important; }
.vo-block-hero-variant-curbside .vo-block-hero-script::after {
  content: "";
  width: 80%;
  height: 10px;
  margin-top: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16' fill='none' stroke='%23141110' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M5 11c40-6 90-9 150-6'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* Motion dashes beside the food. */
.vo-block-hero-variant-curbside.has-image:not(.vo-block-hero-h-lg)::before { display: none; }
.vo-block-hero-variant-curbside.has-image::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: clamp(26px, 5vw, 70px);
  left: 52%;
  width: clamp(34px, 3.6vw, 52px);
  aspect-ratio: 60 / 50;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50' fill='none' stroke='%23141110' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M8 30 20 40M22 12 28 30M44 4 42 24'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
/* The info strip: a white card along the bottom of the opening. */
.vo-block-hero-variant-curbside .vo-block-hero-highlights {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  width: calc(100% - 2 * var(--vo-cs-gutter));
  max-width: calc(var(--vo-cs-frame) - 2 * var(--vo-cs-gutter));
  margin: clamp(26px, 3vw, 40px) auto 0;
  padding: 14px clamp(16px, 1.8vw, 26px);
  box-sizing: border-box;
  list-style: none;
  border: 1px solid #ece3d3;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 14px 32px -24px rgba(60, 30, 10, .45);
  color: #141110;
}
.vo-block-hero-variant-curbside .vo-block-hero-highlights li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px clamp(14px, 1.6vw, 24px);
  margin: 0;
}
.vo-block-hero-variant-curbside .vo-block-hero-highlights li:first-child { padding-left: 0; }
.vo-block-hero-variant-curbside .vo-block-hero-highlights li + li { border-left: 1px solid #ece3d3; }
.vo-block-hero-variant-curbside .vo-block-hero-highlights svg { width: 24px; height: 24px; stroke-width: 2; color: var(--vo-cs-red); flex: none; }
.vo-block-hero-variant-curbside .vo-block-hero-highlights strong { font: 400 clamp(15px, 1.2vw, 19px)/1.25 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif; letter-spacing: .01em; }
.vo-block-hero-variant-curbside .vo-block-hero-highlights span > span { display: block; color: #4f4740; font: 400 13px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-block-hero-variant-curbside .vo-block-hero-highlights .is-sample strong { opacity: .7; font-style: italic; }
.vo-block-hero-variant-curbside .vo-hero-status strong { color: #1f9d48; }
.vo-block-hero-variant-curbside .vo-hero-status-dot { width: 14px; height: 14px; border-radius: 50%; background: #1f9d48; box-shadow: 0 0 0 4px color-mix(in srgb, #1f9d48 18%, transparent); }
.vo-block-hero-variant-curbside .vo-hero-status-closed { display: none; color: #4f4740 !important; }
.vo-block-hero-variant-curbside .vo-hero-status[data-state="closed"] .vo-hero-status-open,
[data-ordering-open="false"] .vo-block-hero-variant-curbside .vo-hero-status:not([data-state]) .vo-hero-status-open { display: none; }
.vo-block-hero-variant-curbside .vo-hero-status[data-state="closed"] .vo-hero-status-closed,
[data-ordering-open="false"] .vo-block-hero-variant-curbside .vo-hero-status:not([data-state]) .vo-hero-status-closed { display: inline; }
.vo-block-hero-variant-curbside .vo-hero-status[data-state="closed"] .vo-hero-status-dot,
[data-ordering-open="false"] .vo-block-hero-variant-curbside .vo-hero-status:not([data-state]) .vo-hero-status-dot { background: #a29a90; box-shadow: none; }
.vo-block-hero-variant-curbside .vo-hero-directions { margin-left: auto !important; border-left: 0 !important; padding-right: 0 !important; }
.vo-block-hero-variant-curbside .vo-hero-directions a {
  color: #141110;
  font: 400 clamp(15px, 1.15vw, 18px)/1.2 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--vo-cs-red);
  padding-bottom: 3px;
}
.vo-block-hero-variant-curbside .vo-hero-directions.is-sample a { opacity: .7; }
/* Without a photo: a slim poster title band (site pages). */
.vo-block-hero.vo-block-hero-variant-curbside:not(.has-image) { padding-top: calc(clamp(34px, 4vw, 60px) + var(--vo-hero-top-offset, 0px)); padding-bottom: clamp(26px, 3vw, 40px); }
.vo-block-hero-variant-curbside:not(.has-image) .vo-block-hero-title { font-size: clamp(48px, 6.4vw, 104px); max-width: none; }
.vo-block-hero-variant-curbside:not(.has-image) .vo-block-hero-title-accent { display: inline; margin-left: .22em; }
.vo-block-hero-variant-curbside:not(.has-image) .vo-block-hero-sticker { top: auto; bottom: 18%; right: clamp(16px, 6vw, 110px); }
.vo-builder-preview-root .vo-block-hero-variant-curbside {
  width: var(--vo-bleed-w, 100%);
  max-width: none;
  margin-left: calc(50% - var(--vo-bleed-w, 100%) / 2) !important;
  margin-right: 0 !important;
}
@media (max-width: 900px) {
  /* Phones: one column in order: the words, the sticker, the photo, the strip. */
  .vo-block-hero.vo-block-hero-variant-curbside.has-image {
    justify-content: flex-start;
    --vo-cs-photo-h: clamp(220px, 62vw, 400px);
    --vo-cs-strip-room: 0px;
    padding-bottom: 18px;
  }
  .vo-block-hero-variant-curbside.has-image > .vo-block-hero-inner { order: 0; }
  .vo-block-hero-variant-curbside.has-image::after {
    position: relative;
    order: 2;
    inset: auto;
    width: 100%;
    max-width: none;
    height: var(--vo-cs-photo-h);
    aspect-ratio: auto;
    margin-top: 6px;
    background-position: 70% center;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%);
    mask-image: linear-gradient(180deg, transparent 0, #000 16%);
  }
  .vo-block-hero.vo-block-hero-variant-curbside .vo-block-hero-sticker {
    position: relative;
    order: 1;
    top: auto;
    right: auto;
    bottom: auto;
    align-self: flex-end;
    width: 96px;
    margin: 6px 16px -64px auto;
  }
  .vo-block-hero-variant-curbside .vo-block-hero-highlights { order: 3; margin-top: -22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
  .vo-block-hero-variant-curbside .vo-block-hero-highlights li { padding: 2px 0 !important; border: 0 !important; }
  .vo-block-hero-variant-curbside .vo-hero-directions { margin-left: 0 !important; }
  .vo-block-hero-variant-curbside .vo-block-hero-title { font-size: clamp(54px, 15vw, 96px); }
  .vo-block-hero.vo-block-hero-variant-curbside .vo-block-hero-script { display: none; }
  .vo-block-hero-variant-curbside.has-image::before { display: none; }
  .vo-block-hero-variant-curbside:not(.has-image) .vo-block-hero-highlights { margin-top: 22px; }
  .vo-block-hero.vo-block-hero-variant-curbside:not(.has-image) .vo-block-hero-sticker { display: none; }
}

/* Catalog: curbside ---------------------------------------------------- */
.vo-block-catalog.vo-block-catalog-theme-curbside {
  --vo-cs-red: var(--vo-cat-accent, #d0212a);
  background: transparent;
  color: var(--vo-cat-ink, #141110);
}
.vo-block-catalog-theme-curbside .vo-block-catalog-hero { background: none; padding: 0; border-radius: 0; }
.vo-block-catalog-theme-curbside .vo-block-catalog-heading {
  margin: 0;
  color: var(--vo-cat-ink, #141110);
  font-family: "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(38px, 4.4vw, 68px);
  font-weight: 400;
  line-height: .95;
  text-transform: uppercase;
}
.vo-block-catalog-theme-curbside .vo-block-catalog-sub { color: var(--vo-cat-ink, #141110); font: 400 18px/1.4 "Fraunces", Georgia, "Times New Roman", serif; }
/* Poster headings get the outlined crown. */
.vo-block-catalog-theme-curbside :is(.vo-block-catalog-heading, .vo-block-catalog-group-title) {
  display: flex;
  align-items: center;
  gap: .32em;
}
.vo-block-catalog-theme-curbside :is(.vo-block-catalog-heading, .vo-block-catalog-group-title)::before {
  content: "";
  flex: none;
  width: .72em;
  height: .6em;
  margin-top: -.18em;
  background: var(--vo-cs-red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40' fill='none' stroke='%23000' stroke-width='3.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 12l9 9 10-15 10 15 9-9-4 22H9z'/%3E%3Cpath d='M9 34h30'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40' fill='none' stroke='%23000' stroke-width='3.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5 12l9 9 10-15 10 15 9-9-4 22H9z'/%3E%3Cpath d='M9 34h30'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-12deg);
}
/* Crowd favourites (compact): three white photo cards, "View menu" top right. */
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-compact { position: relative; gap: 22px; margin: clamp(30px, 3.6vw, 50px) 0; }
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-compact .vo-block-catalog-hero { justify-items: start; text-align: left; padding-right: 150px; }
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-compact .vo-block-catalog-results { display: none; }
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-compact .vo-block-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-compact .vo-block-catalog-footer { position: absolute; top: clamp(10px, 1.6vw, 24px); right: 0; margin: 0; }
.vo-block-catalog-theme-curbside .vo-block-catalog-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 -3px 0 var(--vo-cs-red);
  color: var(--vo-cat-ink, #141110);
  font: 400 18px/1.1 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  text-decoration: none;
}
/* Cards: photo on top, poster name with the red price, a serif line. */
.vo-block-catalog-theme-curbside .vo-block-catalog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: var(--vo-cat-card-border);
  border-radius: var(--vo-cat-card-radius);
  background: var(--vo-card-bg-override, var(--vo-cat-card-bg));
  box-shadow: var(--vo-cat-card-shadow);
  color: var(--vo-card-text-override, var(--vo-cat-ink));
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease;
}
.vo-block-catalog-theme-curbside .vo-block-catalog-card:hover { transform: translateY(-3px); box-shadow: var(--vo-cat-card-shadow-hover); }
.vo-block-catalog-theme-curbside .vo-block-catalog-card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 0;
  background: #f1e8d8;
}
.vo-block-catalog-theme-curbside .vo-block-catalog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.vo-block-catalog-theme-curbside .vo-block-catalog-card:hover .vo-block-catalog-card-media img { transform: scale(1.04); }
.vo-block-catalog-theme-curbside .vo-block-catalog-card-fallback { display: grid; place-items: center; color: var(--vo-cs-red); font: 400 46px/1 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif; }
.vo-block-catalog-theme-curbside .vo-block-catalog-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  padding: var(--vo-cat-card-pad);
}
.vo-block-catalog-theme-curbside .vo-block-catalog-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vo-block-catalog-theme-curbside .vo-block-catalog-card-name {
  color: var(--vo-card-text-override, var(--vo-cat-ink));
  font: 400 var(--vo-cat-name-size, 21px)/1.05 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  text-transform: uppercase;
}
.vo-block-catalog-theme-curbside .vo-block-catalog-card-price { flex: none; color: var(--vo-cs-red); font: 400 calc(var(--vo-cat-name-size, 21px) - 1px)/1 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif; }
.vo-block-catalog-theme-curbside .vo-block-catalog-card-desc { color: var(--vo-cat-muted, #4f4740); font: 400 15px/1.45 "Fraunces", Georgia, "Times New Roman", serif; }
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-compact .vo-block-catalog-card-add,
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-compact .vo-block-catalog-card-foot { display: none; }
/* Badges: a sticker on the photo ("Popular"; plant-based ones go green). */
.vo-block-catalog-theme-curbside .vo-block-catalog-card-badge {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  padding: 5px 12px 6px;
  border-radius: 999px;
  background: #ffd23a;
  color: #141110;
  font: 400 15px/1 "Permanent Marker", "Comic Sans MS", cursive;
  transform: rotate(-8deg);
  box-shadow: 0 6px 12px -6px rgba(60, 40, 0, .5);
}
.vo-block-catalog-theme-curbside .vo-block-catalog-card-badge:is([data-badge*="plant"], [data-badge*="vegan"], [data-badge*="veg"], [data-badge*="green"]) { background: #a6e36b; }
.vo-block-catalog-theme-curbside .vo-block-catalog-card-badge::before {
  content: "";
  position: absolute;
  left: -14px;
  top: -10px;
  width: 16px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50' fill='none' stroke='%23141110' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M8 30 20 40M22 12 28 30M44 4 42 24'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .9;
}
/* Order page (modern): search, red pills, grouped two-up cards. */
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-modern { gap: 18px; }
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-modern .vo-block-catalog-hero { justify-items: start; text-align: left; gap: 6px; }
.vo-block-catalog-theme-curbside .vo-block-catalog-search { width: 100%; max-width: none; min-height: 48px; border: 1px solid #e2d8c6; border-radius: 10px; background: #ffffff; }
.vo-block-catalog-theme-curbside .vo-block-catalog-search :is(input[type="search"], input[type="text"], input:not([type])) {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #141110;
  font: 400 16px/1.2 var(--brand-body-font, Inter, system-ui, sans-serif);
}
.vo-block-catalog-theme-curbside .vo-block-catalog-cats-pills { gap: 10px; flex-wrap: wrap; }
.vo-block-catalog-theme-curbside .vo-block-catalog-cats-pills .vo-block-catalog-cat {
  min-width: 116px;
  min-height: 42px;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid #e2d8c6;
  border-radius: 10px;
  background: #ffffff;
  color: #141110;
  font: 400 17px/1 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  text-transform: none;
}
.vo-block-catalog-theme-curbside[data-cat-active-style] .vo-block-catalog-cats-pills .vo-block-catalog-cat.is-active,
.vo-block-catalog-theme-curbside .vo-block-catalog-cats-pills .vo-block-catalog-cat.is-active {
  border-color: var(--vo-cs-red) !important;
  background: var(--vo-cs-red) !important;
  color: var(--vo-cat-button-text, #ffffff) !important;
}
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-modern .vo-block-catalog-results { color: #4f4740; font-size: 13px; }
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-modern .vo-block-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); }
.vo-block-catalog-theme-curbside .vo-block-catalog-groups { display: grid; gap: clamp(28px, 3vw, 44px); }
.vo-block-catalog-theme-curbside .vo-block-catalog-group { display: grid; gap: 16px; }
.vo-block-catalog-theme-curbside .vo-block-catalog-group.hidden { display: none; }
.vo-block-catalog-theme-curbside .vo-block-catalog-group-title {
  margin: 0;
  color: var(--vo-cat-ink, #141110);
  font: 400 clamp(36px, 3.6vw, 58px)/.95 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  text-transform: uppercase;
}
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-modern .vo-block-catalog-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; }
.vo-block-catalog-theme-curbside .vo-block-catalog-card-tag {
  padding: 3px 8px;
  border-radius: 999px;
  background: #f4ecdd;
  color: #4f4740;
  font: 600 11px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif);
  letter-spacing: .02em;
}
/* Actions: red outlined buttons ("Customize +", "Add +"). */
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-modern .vo-block-catalog-card-add,
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-modern .vo-block-catalog-actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  border: 1.5px solid var(--vo-cs-red);
  border-radius: 8px;
  background: transparent;
  color: var(--vo-accent-text, var(--vo-cs-red));
  font: 400 16px/1 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-modern .vo-block-catalog-card-add::before,
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-modern .vo-block-catalog-actions button::before { content: none; display: none; }
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-modern .vo-block-catalog-card-add::after,
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-modern .vo-block-catalog-actions button::after { content: "+"; font-size: 1.15em; line-height: 1; }
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-modern .vo-block-catalog-card:hover .vo-block-catalog-card-add,
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-modern .vo-block-catalog-actions button:hover:not(:disabled) { background: var(--vo-cs-red); color: var(--vo-cat-button-text, #ffffff); }
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-modern .vo-block-catalog-actions { display: inline-flex; gap: 8px; margin-left: 0; }
.vo-block-catalog-theme-curbside.vo-block-catalog-layout-modern .vo-block-catalog-actions button:disabled { opacity: .5; cursor: not-allowed; }
.vo-block-catalog-theme-curbside .vo-wish { z-index: 3; }
@media (max-width: 860px) {
  .vo-block-catalog-theme-curbside.vo-block-catalog-layout-compact .vo-block-catalog-grid { grid-template-columns: minmax(0, 1fr); }
  .vo-block-catalog-theme-curbside.vo-block-catalog-layout-compact .vo-block-catalog-hero { padding-right: 0; }
  .vo-block-catalog-theme-curbside.vo-block-catalog-layout-compact .vo-block-catalog-footer { position: static; text-align: left; }
}
@media (max-width: 640px) {
  .vo-block-catalog-theme-curbside.vo-block-catalog-layout-modern .vo-block-catalog-grid { grid-template-columns: minmax(0, 1fr); }
  .vo-block-catalog-theme-curbside .vo-block-catalog-cats-pills .vo-block-catalog-cat { min-width: 0; }
}

/* Cart panel: curbside (the order card + make it a meal) ---------------- */
.vo-block-cart.vo-block-cart-variant-curbside {
  --vo-cart-accent: var(--vo-cat-accent, var(--brand-primary, #d0212a));
  --vo-cart-card: #ffffff;
  --vo-cart-line: var(--vo-cat-divider, #ece3d3);
  --vo-cart-ink: var(--vo-cat-ink, #141110);
  --vo-cart-muted: var(--vo-cat-muted, #4f4740);
  display: grid;
  gap: 18px;
  align-content: start;
}
.vo-block-cart-variant-curbside .vo-cart-panel {
  padding: clamp(18px, 1.8vw, 26px);
  border: 1px solid var(--vo-cart-line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 16px 34px -26px rgba(60, 30, 10, .45);
}
.vo-block-cart-variant-curbside .vo-cart-head { padding: 0 0 12px; border: 0; background: none; color: var(--vo-cart-ink); }
.vo-block-cart-variant-curbside .vo-cart-head h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font: 400 clamp(30px, 2.6vw, 40px)/1 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  text-transform: uppercase;
}
.vo-block-cart-variant-curbside [data-vo-cart-title-count] {
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--vo-cart-accent);
  color: var(--vo-cart-accent-ink, #ffffff);
  font: 600 14px/1 var(--brand-body-font, Inter, system-ui, sans-serif);
  text-transform: none;
  letter-spacing: 0;
}
.vo-block-cart-variant-curbside .vo-cart-line { grid-template-columns: 74px minmax(0, 1fr) auto; gap: 14px; padding: 14px 0; border-top: 1px solid var(--vo-cart-line); border-bottom: 0; }
.vo-block-cart-variant-curbside .vo-cart-thumb { width: 74px; height: 74px; border-radius: 8px; overflow: hidden; }
.vo-block-cart-variant-curbside .vo-cart-line-name { font: 400 18px/1.1 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif; }
.vo-block-cart-variant-curbside .vo-cart-line-meta,
.vo-block-cart-variant-curbside .vo-cart-line-each { font: 400 14px/1.35 "Fraunces", Georgia, "Times New Roman", serif; color: var(--vo-cart-muted); }
.vo-block-cart-variant-curbside .vo-cart-line strong { color: var(--vo-cart-accent); font: 400 17px/1 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif; }
.vo-block-cart-variant-curbside .vo-cart-foot { gap: 8px; padding-top: 14px; border-top: 1px solid var(--vo-cart-line); }
.vo-block-cart-variant-curbside .vo-cart-subtotal { font: 400 15px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); color: var(--vo-cart-ink); }
.vo-block-cart-variant-curbside .vo-cart-total { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--vo-cart-line); font: 400 22px/1 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif; }
.vo-block-cart-variant-curbside .vo-cart-total strong { font-size: 30px; }
.vo-block-cart-variant-curbside .vo-cart-checkout {
  min-height: 54px;
  margin-top: 10px;
  border-radius: 8px;
  font: 400 19px/1 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  letter-spacing: .01em;
}
.vo-block-cart-variant-curbside .vo-cart-footnote { margin: 4px 0 0; color: var(--vo-cart-muted); font: 500 12.5px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); text-align: center; }
.vo-block-cart-variant-curbside .vo-cart-empty-title { font: 400 20px/1.1 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif; }
/* Make it a meal: a sunny card with the item's photo. */
.vo-cart-meal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  overflow: hidden;
  padding: clamp(18px, 1.8vw, 24px);
  border: 0;
  border-radius: 12px;
  background: #ffd84d;
  color: #141110;
}
.vo-cart-meal.has-image { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.vo-cart-meal-copy { display: grid; gap: 6px; justify-items: start; }
.vo-cart-meal-title {
  margin: 0;
  max-width: 7em;
  font: 400 clamp(34px, 3vw, 48px)/.9 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  text-transform: uppercase;
}
.vo-cart-meal-title::after { content: ""; display: block; width: 70%; height: 10px; margin-top: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16' fill='none' stroke='%23141110' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M5 11c40-6 90-9 150-6'/%3E%3C/svg%3E") left center / 100% 100% no-repeat; }
.vo-cart-meal-name { margin: 4px 0 0; font: 600 19px/1.15 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-cart-meal-text { margin: 0; font: 400 15px/1.4 "Fraunces", Georgia, "Times New Roman", serif; }
.vo-cart-meal-price { margin: 2px 0 0; color: var(--vo-cart-accent, #d0212a); font: 400 26px/1 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif; }
.vo-cart-meal-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 26px;
  border-radius: 8px;
  background: var(--vo-cart-accent, #d0212a);
  color: var(--vo-cart-accent-ink, #ffffff);
  font: 400 20px/1 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  text-decoration: none;
}
.vo-cart-meal-add:hover { filter: brightness(1.08); }
.vo-cart-meal-img { align-self: end; width: 100%; max-height: 260px; object-fit: contain; object-position: bottom; }

/* Closing band: truck ---------------------------------------------------- */
.vo-block.vo-block-cta-band.vo-block-cta-band-truck {
  --vo-cs-red: var(--brand-primary, #d0212a);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  margin: 0;
  min-height: clamp(320px, 26vw, 420px);
  padding: clamp(36px, 4vw, 60px) var(--vo-section-gutter, 32px);
  border-radius: 0;
  background: #ffd84d;
  color: #141110;
  text-align: left;
}
.vo-block-cta-band-truck[style*="--vo-tint-bg"] { background: var(--vo-tint-bg); }
.vo-builder-page .vo-block-slot-full > .vo-block-cta-band-truck {
  width: var(--vo-bleed-w, 100vw);
  max-width: var(--vo-bleed-w, 100vw);
  margin-left: calc(50% - var(--vo-bleed-w, 100vw) / 2);
  margin-right: calc(50% - var(--vo-bleed-w, 100vw) / 2);
}
.vo-builder-preview-root .vo-block-cta-band-truck {
  width: var(--vo-bleed-w, 100%);
  max-width: none;
  margin-left: calc(50% - var(--vo-bleed-w, 100%) / 2) !important;
  margin-right: 0 !important;
}
/* The photograph covers the right half and fades into the band. */
.vo-block-cta-band-truck.has-image::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  width: 58%;
  background: var(--vo-cta-image) 40% center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%);
}
.vo-block-cta-band-truck .vo-block-cta-band-inner {
  position: relative;
  z-index: 1;
  align-self: center;
  display: grid;
  justify-items: start;
  gap: 14px;
  width: 100%;
  max-width: var(--vo-frame-max, 1180px);
  margin: 0 auto;
  padding: 0 var(--vo-section-gutter, 32px);
  box-sizing: border-box;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #141110;
  text-align: left;
}
.vo-block-cta-band-truck.has-image .vo-block-cta-band-inner > * { max-width: min(36rem, 44%); }
.vo-block-cta-band-truck .vo-section-eyebrow { margin: 0; color: #141110; font: 700 12px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .22em; text-transform: uppercase; }
.vo-block-cta-band-truck .vo-block-cta-band-title {
  margin: 0;
  max-width: none;
  color: #141110;
  font: 400 clamp(42px, 4.6vw, 76px)/.92 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  text-transform: uppercase;
}
.vo-block-cta-band-truck .vo-block-cta-band-title span { display: block; }
.vo-block-cta-band-truck .vo-block-cta-band-title::after { content: ""; display: block; width: 2.6em; height: .26em; margin-top: .14em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16' fill='none' stroke='%23141110' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M5 11c40-6 90-9 150-6'/%3E%3C/svg%3E") left center / 100% 100% no-repeat; }
.vo-block-cta-band-truck .vo-block-cta-band-sub { margin: 0; max-width: 34em; color: #141110; font: 400 clamp(16px, 1.25vw, 19px)/1.45 "Fraunces", Georgia, "Times New Roman", serif; opacity: 1; }
.vo-block-cta-band-truck .vo-block-cta-band-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 15px 32px;
  border: 0;
  border-radius: 10px;
  background: var(--vo-cs-red);
  color: var(--brand-button-text, #ffffff) !important;
  font: 400 19px/1 "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  text-decoration: none;
  box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--vo-cs-red) 90%, transparent);
}
.vo-block-cta-band-truck .vo-block-cta-band-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.vo-block-cta-band-truck .vo-block-cta-band-note {
  position: absolute;
  z-index: 2;
  left: 41%;
  bottom: clamp(26px, 3.4vw, 54px);
  display: grid;
  justify-items: center;
  color: #141110;
  font: 400 clamp(14px, 1.2vw, 19px)/1.05 "Permanent Marker", "Comic Sans MS", cursive;
  text-transform: uppercase;
  transform: rotate(-10deg);
  pointer-events: none;
}
.vo-block-cta-band-truck .vo-block-cta-band-note::after { content: "\2665"; margin-top: 4px; font-size: 1.3em; }
.vo-builder-page:has(> .vo-builder-blocks > .vo-block-slot:last-child > .vo-block-cta-band-truck) { padding-bottom: 0; margin-bottom: 0; }
@media (max-width: 900px) {
  .vo-block.vo-block-cta-band.vo-block-cta-band-truck.has-image { padding-bottom: clamp(220px, 60vw, 360px); }
  .vo-block-cta-band-truck.has-image::before { inset: auto 0 0 0; width: 100%; height: clamp(200px, 56vw, 340px); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%); mask-image: linear-gradient(180deg, transparent 0, #000 26%); }
  .vo-block-cta-band-truck.has-image .vo-block-cta-band-inner > * { max-width: none; }
  .vo-block-cta-band-truck .vo-block-cta-band-note { display: none; }
}


/* Hero: showroom ------------------------------------------------------- */
.vo-block-hero.vo-block-hero-variant-showroom {
  --vo-sr-gold: var(--brand-primary, #ddbf91);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: calc(clamp(92px, 8.5vw, 128px) + var(--vo-hero-top-offset, 0px)) 0 clamp(40px, 4vw, 56px);
  background: #0b0d0c;
  color: #ffffff;
  text-align: left;
}
.vo-block-hero.vo-block-hero-variant-showroom.has-image { background: #0b0d0c var(--vo-hero-image) 68% center / cover no-repeat; }
.vo-block-hero-variant-showroom.vo-block-hero-h-lg { min-height: clamp(640px, 52vw, 860px); }
.vo-block-hero-variant-showroom.vo-block-hero-h-md { min-height: clamp(540px, 42vw, 700px); }
.vo-block-hero-variant-showroom.vo-block-hero-h-sm { min-height: clamp(440px, 32vw, 560px); padding-bottom: clamp(30px, 3vw, 44px); }
.vo-block-hero-variant-showroom.has-highlights { justify-content: space-between; }
.vo-block-hero-variant-showroom .vo-block-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(8, 9, 9, .94) 0%, rgba(8, 9, 9, .82) 26%, rgba(8, 9, 9, calc(.18 + var(--vo-hero-overlay, .4) * .5)) 50%, rgba(8, 9, 9, .05) 74%),
    linear-gradient(180deg, rgba(8, 9, 9, .6) 0%, rgba(8, 9, 9, 0) 24%, rgba(8, 9, 9, 0) 62%, rgba(8, 9, 9, .9) 100%);
  pointer-events: none;
}
.vo-block-hero-variant-showroom:not(.has-image) {
  background:
    radial-gradient(60% 70% at 78% 40%, color-mix(in srgb, var(--vo-sr-gold) 18%, transparent), transparent 70%),
    linear-gradient(120deg, #0b0d0c 35%, #1b1f1d 100%);
}
.vo-block-hero-variant-showroom .vo-block-hero-stamp { display: none; }
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-showroom > .vo-block-hero-inner,
.vo-block-hero-variant-showroom > .vo-block-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--vo-frame-max, 1180px);
  margin: 0 auto;
  padding: 0 var(--vo-section-gutter, 32px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.vo-block-hero-variant-showroom .vo-block-hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 16px;
  color: rgba(255, 255, 255, .78);
  font: 600 11px/1.6 var(--brand-body-font, Inter, system-ui, sans-serif);
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: 1;
}
.vo-block-hero-variant-showroom .vo-block-hero-title {
  margin: 0;
  max-width: 13em;
  color: #ffffff;
  font-family: "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif;
  font-size: clamp(36px, 3.7vw, 60px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.012em;
  text-transform: uppercase;
}
/* The second line in brushed metal: white into steel grey. */
.vo-block-hero-variant-showroom .vo-block-hero-title-accent {
  display: block;
  width: fit-content;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 22%, #c3c8c5 40%, #8e9592 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.vo-block-hero-variant-showroom .vo-block-hero-sub {
  max-width: 31em;
  margin: clamp(16px, 1.6vw, 22px) 0 0;
  color: rgba(255, 255, 255, .84);
  font: 400 clamp(15px, 1.12vw, 17.5px)/1.6 var(--brand-body-font, Inter, system-ui, sans-serif);
  opacity: 1;
}
.vo-block-hero-variant-showroom .vo-block-hero-actions { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: clamp(24px, 2.4vw, 34px); align-items: center; }
.vo-block-hero-variant-showroom > .vo-block-hero-inner > .vo-block-hero-cta { margin-top: clamp(24px, 2.4vw, 34px); }
.vo-block-hero.vo-block-hero-variant-showroom .vo-block-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin-top: 0;
  padding: 0 28px;
  border-radius: 999px;
  font: 600 14.5px/1 var(--brand-body-font, Inter, system-ui, sans-serif);
  letter-spacing: .01em;
  text-transform: none;
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease, background-color .15s ease;
}
.vo-block-hero.vo-block-hero-variant-showroom .vo-block-hero-cta.vo-block-hero-cta-primary {
  border: 0;
  background: linear-gradient(115deg, color-mix(in srgb, var(--vo-sr-gold, #ddbf91) 48%, #ffffff) 0%, var(--vo-sr-gold, #ddbf91) 100%) !important;
  color: var(--brand-button-text, #111413) !important;
  box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--vo-sr-gold) 80%, transparent);
}
.vo-block-hero.vo-block-hero-variant-showroom :is(.vo-block-hero-cta-outline, .vo-block-hero-cta-ghost) {
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .04);
  color: #ffffff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.vo-block-hero.vo-block-hero-variant-showroom .vo-block-hero-cta:hover { transform: translateY(-1px); filter: brightness(1.04); }
.vo-block-hero.vo-block-hero-variant-showroom .vo-block-hero-cta:focus-visible { outline: 3px solid var(--vo-sr-gold); outline-offset: 3px; }
.vo-block-hero-variant-showroom .vo-block-hero-cta-secondary .vo-cta-arrow { display: none; }
.vo-block-hero-variant-showroom .vo-block-hero-cta-icon { width: 18px; height: 18px; margin: 0; }
/* The promise row along the bottom, split by hairlines. */
.vo-block-hero-variant-showroom .vo-block-hero-highlights {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--vo-frame-max, 1180px);
  margin: clamp(44px, 5vw, 76px) auto 0;
  padding: 0 var(--vo-section-gutter, 32px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px 0;
  color: #ffffff;
}
.vo-block-hero-variant-showroom .vo-block-hero-highlights li { gap: 14px; padding: 2px 24px; border-left: 1px solid rgba(255, 255, 255, .18); }
.vo-block-hero-variant-showroom .vo-block-hero-highlights li:first-child { padding-left: 0; border-left: 0; }
.vo-block-hero-variant-showroom .vo-block-hero-highlights svg { width: 30px; height: 30px; color: var(--vo-sr-gold); }
.vo-block-hero-variant-showroom .vo-block-hero-highlights strong { font: 600 13.5px/1.3 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; }
.vo-block-hero-variant-showroom .vo-block-hero-highlights li > span > span { font-size: 12px; opacity: .7; }
.vo-builder-page:has(> .vo-builder-blocks > .vo-block-slot:first-child > .vo-block-hero-variant-showroom) { padding-top: 0; }
@media (max-width: 720px) {
  .vo-block-hero.vo-block-hero-variant-showroom.has-image { background-position: 65% center; }
  .vo-block-hero-variant-showroom .vo-block-hero-overlay {
    background: linear-gradient(180deg, rgba(8, 9, 9, .7) 0%, rgba(8, 9, 9, .55) 45%, rgba(8, 9, 9, .92) 100%);
  }
  .vo-block-hero-variant-showroom .vo-block-hero-title { font-size: clamp(32px, 9.6vw, 44px); }
  .vo-block-hero-variant-showroom .vo-block-hero-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .vo-block-hero-variant-showroom .vo-block-hero-highlights li { padding: 0; border-left: 0; }
}

/* Category tiles: showroom (tall photo service cards) --------------------- */
.vo-block-tile-desc { display: block; font: 400 13px/1.45 var(--brand-body-font, Inter, system-ui, sans-serif); opacity: .82; }
.vo-block-tiles-head.has-link { align-items: start; }
.vo-block-tiles-link { justify-self: start; color: inherit; font: 600 13.5px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); text-decoration: underline; text-underline-offset: 5px; }
.vo-block-tiles.vo-block-tiles-style-showroom { --vo-sr-gold: var(--brand-primary, #ddbf91); max-width: var(--vo-frame-max, 1180px); padding: 0 var(--vo-section-gutter, 32px); margin: clamp(44px, 5vw, 76px) auto; gap: clamp(22px, 2.4vw, 30px); color: #111413; }
.vo-block-tiles-style-showroom .vo-block-tiles-head {
  max-width: none;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) auto;
  column-gap: clamp(20px, 3vw, 48px);
  row-gap: 8px;
  align-items: end;
}
.vo-block-tiles-style-showroom .vo-block-tiles-head > :not(.vo-section-eyebrow, .vo-block-tiles-title, .vo-block-tiles-desc, .vo-block-tiles-link) { grid-column: 1 / -1; }
.vo-block-tiles-style-showroom .vo-section-eyebrow { grid-column: 1 / -1; margin: 0; color: #2b302d; font: 600 11px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .3em; }
.vo-block-tiles-style-showroom .vo-block-tiles-title { grid-column: 1; color: #111413; font: 700 clamp(28px, 2.7vw, 40px)/1.1 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; letter-spacing: -.02em; }
.vo-block-tiles-style-showroom .vo-block-tiles-desc { grid-column: 2; max-width: 46ch; color: #5b615c; font-size: 14.5px; line-height: 1.6; }
.vo-block-tiles-style-showroom .vo-block-tiles-link {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid #111413;
  border-radius: 999px;
  color: #111413;
  font: 600 13px/1 var(--brand-body-font, Inter, system-ui, sans-serif);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.vo-block-tiles-style-showroom .vo-block-tiles-link:hover { background: #111413; color: #ffffff; }
.vo-block-tiles-style-showroom .vo-block-tiles-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: clamp(10px, 1vw, 14px); }
.vo-block-tiles-style-showroom .vo-block-tile {
  aspect-ratio: .76;
  min-height: 260px;
  border: 0;
  border-radius: 14px;
  background: #111413;
  color: #ffffff;
  box-shadow: 0 22px 40px -28px rgba(0, 0, 0, .9);
}
.vo-block-tiles-style-showroom .vo-block-tile:hover { border-color: transparent; box-shadow: 0 30px 50px -28px rgba(0, 0, 0, 1); }
.vo-block-tiles-style-showroom .vo-block-tile:focus-visible { outline: 3px solid var(--vo-sr-gold); }
.vo-block-tiles-style-showroom .vo-block-tile-shade { background: linear-gradient(180deg, rgba(10, 12, 11, 0) 30%, rgba(10, 12, 11, .62) 56%, rgba(10, 12, 11, .94) 100%); }
.vo-block-tiles-style-showroom .vo-block-tile-body { left: 18px; right: 18px; bottom: 18px; flex-direction: column; align-items: flex-start; gap: 10px; }
.vo-block-tiles-style-showroom .vo-block-tile-icon {
  width: 40px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #111413;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.vo-block-tiles-style-showroom .vo-block-tile-text { gap: 6px; }
.vo-block-tiles-style-showroom .vo-block-tile-name { font: 700 clamp(16px, 1.25vw, 19px)/1.2 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; letter-spacing: -.005em; white-space: normal; }
.vo-block-tiles-style-showroom .vo-block-tile-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: rgba(255, 255, 255, .8); opacity: 1; }
.vo-block-tiles-style-showroom .vo-block-tile-cta { margin-top: 4px; color: #ffffff; font: 600 12.5px/1.2 var(--brand-body-font, Inter, system-ui, sans-serif); }
@media (max-width: 900px) {
  .vo-block-tiles-style-showroom .vo-block-tiles-head { grid-template-columns: minmax(0, 1fr) auto; }
  .vo-block-tiles-style-showroom .vo-block-tiles-desc { grid-column: 1 / -1; grid-row: 3; }
  .vo-block-tiles-style-showroom .vo-block-tiles-link { grid-column: 2; grid-row: 2; }
}
@media (max-width: 720px) {
  .vo-block-tiles-style-showroom .vo-block-tiles-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vo-block-tiles-style-showroom .vo-block-tile { aspect-ratio: .7; min-height: 0; }
  .vo-block-tiles-style-showroom .vo-block-tiles-head { grid-template-columns: minmax(0, 1fr); }
  .vo-block-tiles-style-showroom .vo-block-tiles-link { grid-column: 1; grid-row: auto; justify-self: start; }
}
@media (max-width: 460px) {
  .vo-block-tiles-style-showroom .vo-block-tiles-row { grid-template-columns: minmax(0, 1fr); }
  .vo-block-tiles-style-showroom .vo-block-tile { aspect-ratio: 1.2; }
}

/* How it works: band ------------------------------------------------------ */
.vo-builder-page .vo-block-slot-full > .vo-block.vo-block-process-steps-band { width: var(--vo-bleed-w, 100vw); max-width: var(--vo-bleed-w, 100vw); margin-left: calc(50% - var(--vo-bleed-w, 100vw) / 2); margin-right: calc(50% - var(--vo-bleed-w, 100vw) / 2); }
.vo-block.vo-block-process-steps.vo-block-process-steps-band {
  --vo-sr-gold: var(--brand-primary, #ddbf91);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  max-width: none;
  margin: 0 auto;
  padding: clamp(56px, 6vw, 88px) 0;
  background: var(--vo-tint-bg, #111413);
  color: #ffffff;
}
.vo-block.vo-block-process-steps-band::before { display: none; }
.vo-block-process-steps-band.has-image::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(54%, 980px);
  background: var(--vo-ps-image) 30% center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%);
  mask-image: linear-gradient(90deg, transparent 0, #000 42%);
  pointer-events: none;
}
.vo-block-process-band-inner { position: relative; z-index: 1; max-width: var(--vo-frame-max, 1180px); margin: 0 auto; padding: 0 var(--vo-section-gutter, 32px); box-sizing: border-box; }
.vo-block-process-steps-band .vo-block-process-heading { max-width: 640px; margin-bottom: clamp(28px, 3vw, 40px); }
.vo-block-process-steps-band .vo-block-process-eyebrow { color: rgba(255, 255, 255, .72); font: 600 11px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .32em; }
.vo-block-process-steps-band .vo-block-process-heading h2 { max-width: none; color: #ffffff; font: 700 clamp(28px, 2.8vw, 42px)/1.1 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; letter-spacing: -.02em; }
.vo-block-process-steps-band .vo-block-process-heading > p:not(.vo-block-process-eyebrow) { margin-top: 10px; color: rgba(255, 255, 255, .74); font-size: 15.5px; }
.vo-block-process-steps-band .vo-block-process-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 22px 0;
  max-width: min(880px, 66%);
}
.vo-block-process-steps-band .vo-block-process-step { position: relative; display: flex; align-items: flex-start; gap: 16px; padding: 0 44px 0 0; border: 0; background: none; }
.vo-block-process-steps-band .vo-block-process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 14px;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, .6);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.vo-block-process-steps-band .vo-block-process-number {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 1.5px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  color: #ffffff;
  font: 600 16px/1 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif;
  letter-spacing: 0;
}
.vo-block-process-step-body { min-width: 0; padding-top: 4px; }
.vo-block-process-steps-band .vo-block-process-step h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; color: #ffffff; font: 600 16px/1.25 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; letter-spacing: 0; }
.vo-block-process-icon { width: 22px; height: 22px; flex: none; color: #ffffff; }
.vo-block-process-steps-band .vo-block-process-step p { max-width: 24ch; color: rgba(255, 255, 255, .68); font-size: 13px; line-height: 1.5; }
.vo-block-process-script {
  position: absolute;
  z-index: 1;
  top: clamp(26px, 3.4vw, 48px);
  right: max(var(--vo-section-gutter, 32px), calc((100% - var(--vo-frame-max, 1180px)) / 2 + var(--vo-section-gutter, 32px)));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #ffffff;
  font: 400 clamp(36px, 3.4vw, 56px)/.95 "Yellowtail", "Mrs Saint Delafield", "Brush Script MT", cursive;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .55);
  pointer-events: none;
}
.vo-block-process-script > span { transform: rotate(-7deg); transform-origin: right center; }
.vo-block-process-script > span:first-child { margin-right: 1.2em; }
.vo-block-process-script small { margin-top: 18px; font: 600 10.5px/1 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .34em; text-transform: uppercase; color: rgba(255, 255, 255, .86); }
@media (max-width: 900px) {
  .vo-block-process-steps-band.has-image::after { width: 100%; opacity: .26; -webkit-mask-image: none; mask-image: none; }
  .vo-block-process-steps-band .vo-block-process-list { max-width: none; grid-template-columns: minmax(0, 1fr); }
  .vo-block-process-steps-band .vo-block-process-step { padding-right: 0; }
  .vo-block-process-steps-band .vo-block-process-step::after { display: none; }
  .vo-block-process-script { position: relative; top: 0; right: 0; margin: 28px var(--vo-section-gutter, 32px) 0 auto; width: fit-content; font-size: 38px; }
}

/* Before / after ---------------------------------------------------------- */
.vo-builder-page .vo-block-slot-full > .vo-block-ba[data-vo-tint] { width: var(--vo-bleed-w, 100vw); max-width: var(--vo-bleed-w, 100vw); margin-left: calc(50% - var(--vo-bleed-w, 100vw) / 2); margin-right: calc(50% - var(--vo-bleed-w, 100vw) / 2); }
.vo-block.vo-block-ba {
  --vo-sr-gold: var(--brand-primary, #ddbf91);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  margin: clamp(36px, 4vw, 60px) auto;
  padding: 0;
  color: #111413;
}
.vo-block.vo-block-ba[data-vo-tint] { margin: 0 auto; padding: clamp(16px, 1.6vw, 22px) 0 clamp(36px, 4vw, 56px); background: var(--vo-tint-bg, #111413); color: #ffffff; }
.vo-block.vo-block-ba[data-vo-tint]::before { display: none; }
.vo-ba-inner {
  max-width: var(--vo-frame-max, 1180px);
  margin: 0 auto;
  padding: 0 var(--vo-section-gutter, 32px);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.vo-block-ba-media-right .vo-ba-frame { order: 2; }
.vo-ba-frame {
  --vo-ba-pos: 50%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 2.1;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #1b1f1d;
  box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .85);
  touch-action: pan-y;
  user-select: none;
}
.vo-ba-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.vo-ba-img.is-empty { background: linear-gradient(135deg, #2b302d, #111413); }
.vo-ba-before-clip { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--vo-ba-pos)) 0 0); }
.vo-ba-label { position: absolute; bottom: 14px; z-index: 2; padding: 7px 12px; border-radius: 6px; font: 700 10.5px/1 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
.vo-ba-label.is-before { left: 14px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(17, 20, 19, .72); color: #ffffff; }
.vo-ba-label.is-after { right: 14px; background: linear-gradient(115deg, color-mix(in srgb, var(--vo-sr-gold, #ddbf91) 48%, #ffffff) 0%, var(--vo-sr-gold, #ddbf91) 100%); color: #111413; }
.vo-ba-line { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--vo-ba-pos); width: 2px; margin-left: -1px; background: #ffffff; pointer-events: none; }
.vo-ba-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 50%;
  background: #ffffff;
  color: #111413;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.vo-ba-handle svg { width: 14px; height: 14px; }
.vo-ba-range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.vo-ba-frame:has(.vo-ba-range:focus-visible) { outline: 3px solid var(--vo-sr-gold); outline-offset: 4px; }
.vo-ba-copy { min-width: 0; }
.vo-ba-eyebrow { margin: 0 0 12px; color: #5b615c; font: 600 11px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .3em; text-transform: uppercase; }
.vo-ba-title { margin: 0; color: inherit; font: 700 clamp(26px, 2.4vw, 36px)/1.12 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; letter-spacing: -.02em; }
.vo-ba-body { max-width: 36ch; margin: 14px 0 0; color: #5b615c; font: 400 15px/1.6 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-ba-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 12px 22px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  font: 600 13.5px/1 var(--brand-body-font, Inter, system-ui, sans-serif);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.vo-ba-cta svg { width: 16px; height: 16px; }
.vo-block-ba[data-vo-tint] .vo-ba-eyebrow { color: rgba(255, 255, 255, .7); }
.vo-block-ba[data-vo-tint] .vo-ba-body { color: rgba(255, 255, 255, .76); }
.vo-block-ba[data-vo-tint] .vo-ba-cta { border-color: rgba(255, 255, 255, .6); }
.vo-block-ba[data-vo-tint] .vo-ba-cta:hover { background: #ffffff; color: #111413; }
.vo-block-ba:not([data-vo-tint]) .vo-ba-cta:hover { background: #111413; color: #ffffff; }
@media (max-width: 820px) {
  .vo-ba-inner { grid-template-columns: minmax(0, 1fr); }
  .vo-block-ba-media-right .vo-ba-frame { order: 0; }
  .vo-ba-frame { aspect-ratio: 1.5; }
}

/* Testimonials ------------------------------------------------------------ */
.vo-block.vo-block-tm {
  --vo-sr-gold: var(--brand-primary, #ddbf91);
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: stretch;
  width: 100%;
  max-width: var(--vo-frame-max, 1180px);
  margin: clamp(40px, 5vw, 72px) auto;
  padding: 0 var(--vo-section-gutter, 32px);
  box-sizing: border-box;
  color: #111413;
}
.vo-block-tm:not(.has-panel),
.vo-block-tm.is-panel-only { grid-template-columns: minmax(0, 1fr); }
.vo-tm-main { display: flex; flex-direction: column; justify-content: center; gap: 18px; min-width: 0; }
.vo-tm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.vo-tm-eyebrow { margin: 0 0 8px; color: #2b302d; font: 600 11px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .3em; text-transform: uppercase; }
.vo-tm-title { margin: 0; font: 700 clamp(24px, 2.2vw, 32px)/1.15 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; letter-spacing: -.02em; }
.vo-tm-arrows { display: inline-flex; gap: 8px; }
.vo-tm-arrows button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #dfe3df; border-radius: 50%; background: #ffffff; color: #111413; cursor: pointer; }
.vo-tm-arrows button:hover { border-color: #111413; }
.vo-tm-arrows svg { width: 16px; height: 16px; }
.vo-tm-sample-note { margin: -6px 0 0; color: #5b615c; font-size: 12px; }
.vo-tm-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 36px) / 3);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 2px;
  margin: -2px;
}
.vo-tm-track::-webkit-scrollbar { display: none; }
.vo-tm-track:focus-visible { outline: 2px solid #111413; outline-offset: 4px; border-radius: 12px; }
.vo-tm-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 20px;
  border: 1px solid #dfe3df;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(17, 20, 19, .04);
  scroll-snap-align: start;
}
.vo-tm-card.is-sample { border-style: dashed; }
.vo-tm-card-head { display: flex; align-items: center; gap: 12px; }
.vo-tm-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #2b302d, #111413); color: var(--vo-sr-gold); font: 700 13px/1 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; }
.vo-tm-stars { display: inline-flex; gap: 2px; color: #d4d8d4; }
.vo-tm-stars svg { width: 14px; height: 14px; }
.vo-tm-stars .is-on { color: #e2a93b; }
.vo-tm-stars .is-on svg { fill: currentColor; }
.vo-tm-quote { flex: 1; margin: 0; color: #2b302d; font: 400 13.5px/1.6 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-tm-card figcaption strong { display: block; font: 600 13.5px/1.3 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; }
.vo-tm-card figcaption span { display: block; margin-top: 2px; color: #5b615c; font-size: 12px; }
.vo-tm-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 260px;
  padding: clamp(26px, 3vw, 40px);
  border-radius: 14px;
  background: #111413;
  color: #ffffff;
  box-sizing: border-box;
}
.vo-tm-panel.has-image::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--vo-tm-panel-image) right center / cover no-repeat; }
.vo-tm-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 12, 11, .95) 0%, rgba(10, 12, 11, .82) 46%, rgba(10, 12, 11, .3) 100%); }
.vo-tm-panel-eyebrow { margin: 0 0 12px; color: rgba(255, 255, 255, .72); font: 600 11px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .3em; text-transform: uppercase; }
.vo-tm-panel-title { max-width: 12em; margin: 0; color: #ffffff; font: 700 clamp(22px, 2vw, 30px)/1.15 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; letter-spacing: -.015em; }
.vo-tm-panel-text { max-width: 32ch; margin: 12px 0 0; color: rgba(255, 255, 255, .78); font: 400 14px/1.55 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-tm-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--vo-sr-gold, #ddbf91) 48%, #ffffff) 0%, var(--vo-sr-gold, #ddbf91) 100%);
  color: var(--brand-button-text, #111413);
  font: 600 13.5px/1 var(--brand-body-font, Inter, system-ui, sans-serif);
  text-decoration: none;
}
.vo-tm-panel-cta svg { width: 16px; height: 16px; }
.vo-block-tm.is-panel-only .vo-tm-panel { min-height: 220px; }
@media (max-width: 1100px) {
  .vo-tm-track { grid-auto-columns: calc((100% - 18px) / 2); }
}
@media (max-width: 860px) {
  .vo-block.vo-block-tm { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .vo-tm-track { grid-auto-columns: 86%; }
}

/* FAQ: split (answers beside a heading and a help card) ---------------------- */
.vo-block-faq-lead { display: grid; gap: 8px; align-content: start; }
.vo-block-faq-lead .vo-section-eyebrow { margin: 0; }
.vo-block-faq-intro { margin: 0; color: var(--muted, #5b615c); font: 400 14.5px/1.6 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-block-faq-help {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--border, #dfe3df);
  border-radius: 14px;
  background: var(--surface-raised, #ffffff);
}
.vo-block-faq-help-icon { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--ink, #111413) 6%, transparent); color: var(--ink, #111413); }
.vo-block-faq-help-icon svg { width: 26px; height: 26px; }
.vo-block-faq-help-title { margin: 0; color: var(--ink, #111413); font: 700 16px/1.3 var(--brand-heading-font, "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif); }
.vo-block-faq-help-text { margin: 4px 0 0; color: var(--muted, #5b615c); font-size: 13px; }
.vo-block-faq-help-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 9px 18px;
  border: 1px solid var(--ink, #111413);
  border-radius: 999px;
  color: var(--ink, #111413);
  font: 600 13px/1 var(--brand-body-font, Inter, system-ui, sans-serif);
  text-decoration: none;
}
.vo-block.vo-block-faq.vo-block-faq-split {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) minmax(250px, .9fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  width: 100%;
  max-width: var(--vo-frame-max, 1180px);
  margin: clamp(40px, 5vw, 72px) auto;
  padding: 0 var(--vo-section-gutter, 32px);
  box-sizing: border-box;
}
.vo-block-faq-split:not(.has-help) { grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); }
.vo-block-faq-split .vo-section-eyebrow { color: #2b302d; letter-spacing: .3em; }
.vo-block-faq-split .vo-block-faq-heading { font: 700 clamp(26px, 2.4vw, 34px)/1.15 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; letter-spacing: -.02em; }
.vo-block-faq-split .vo-block-faq-item { padding: 13px 16px; border: 1px solid #dfe3df; border-radius: 8px; background: #ffffff; }
.vo-block-faq-split .vo-block-faq-q { font: 600 14px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-block-faq-split .vo-block-faq-q::after { top: -4px; color: #111413; }
.vo-block-faq-split .vo-block-faq-a { font-size: 13.5px; }
@media (max-width: 960px) {
  .vo-block.vo-block-faq.vo-block-faq-split { grid-template-columns: minmax(0, 1fr); }
}

/* Catalog layout: appointment -------------------------------------------- */
.vo-block-catalog.vo-ap-block {
  --vo-sr-gold: var(--brand-primary, #ddbf91);
  --vo-ap-ink: var(--vo-cat-ink, #111413);
  --vo-ap-muted: var(--vo-cat-muted, #5b615c);
  --vo-ap-line: var(--vo-cat-divider, #dfe3df);
  --vo-ap-card: var(--vo-cat-card-bg, #ffffff);
  --vo-ap-accent: var(--vo-cat-accent, #826036);
  width: 100%;
  max-width: var(--vo-content-max, 1240px);
  margin: 0 auto;
  padding: clamp(22px, 2.4vw, 32px) 0 clamp(48px, 5vw, 72px);
  box-sizing: border-box;
  background: transparent;
  color: var(--vo-ap-ink);
  font-family: var(--brand-body-font, Inter, system-ui, sans-serif);
}
.vo-ap-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 370px); gap: clamp(18px, 2.2vw, 30px); align-items: start; }
.vo-ap-main { display: grid; gap: 14px; min-width: 0; }
.vo-ap-steps { position: relative; display: flex; margin: 0 0 4px; padding: 4px 0 8px; list-style: none; }
.vo-ap-step { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; }
.vo-ap-step + .vo-ap-step::before { content: ""; position: absolute; z-index: 0; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--vo-ap-line); }
.vo-ap-step:is([data-state="done"], [data-state="current"]) + .vo-ap-step:is([data-state="done"], [data-state="current"])::before { background: var(--vo-sr-gold); }
.vo-ap-step-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1.5px solid #c9cec9;
  border-radius: 50%;
  background: #ffffff;
  color: var(--vo-ap-muted);
  font: 600 12.5px/1 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif;
}
.vo-ap-step[data-state="current"] .vo-ap-step-num { border-color: #111413; background: #111413; color: #ffffff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--vo-sr-gold) 45%, transparent); }
.vo-ap-step[data-state="done"] .vo-ap-step-num { border-color: transparent; background: linear-gradient(115deg, color-mix(in srgb, var(--vo-sr-gold, #ddbf91) 48%, #ffffff) 0%, var(--vo-sr-gold, #ddbf91) 100%); color: #111413; }
.vo-ap-step-label { max-width: 11ch; color: var(--vo-ap-muted); font: 500 12px/1.25 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-ap-step[data-state="current"] .vo-ap-step-label { color: var(--vo-ap-ink); font-weight: 600; }
.vo-ap-card { padding: clamp(18px, 2vw, 26px); border: 1px solid var(--vo-ap-line); border-radius: 14px; background: var(--vo-ap-card); scroll-margin-top: 96px; }
.vo-ap-eyebrow { margin: 0 0 6px; color: var(--vo-ap-muted); font: 600 10.5px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .28em; text-transform: uppercase; }
.vo-ap-title { margin: 0; color: var(--vo-ap-ink); font: 700 clamp(20px, 1.8vw, 25px)/1.2 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; letter-spacing: -.01em; }
.vo-ap-intro { margin: 4px 0 0; color: var(--vo-ap-muted); font-size: 13.5px; line-height: 1.5; }
.vo-ap-card .vo-block-catalog-statusbar { margin: 14px 0 0; }
.vo-ap-empty { margin-top: 16px; padding: 22px; border: 1px dashed var(--vo-ap-line); border-radius: 12px; color: var(--vo-ap-muted); text-align: center; }
.vo-ap-empty p { margin: 0; }
.vo-ap-input,
.vo-ap-addon-input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }

/* Step 1: packages */
.vo-ap-packages { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.vo-ap-pkg-item { position: relative; min-width: 0; }
.vo-ap-pkg-item.is-unavailable { opacity: .5; }
.vo-ap-pkg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 236px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #111413;
  color: #ffffff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.vo-ap-pkg.is-plain { background: linear-gradient(160deg, #2b302d, #111413); }
.vo-ap-pkg::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 12, 11, .08) 0%, rgba(10, 12, 11, .55) 40%, rgba(10, 12, 11, .95) 100%); }
.vo-ap-pkg:hover { transform: translateY(-2px); }
.vo-ap-pkg-media { position: absolute; inset: 0; z-index: -2; }
.vo-ap-pkg-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vo-ap-pkg-check,
.vo-ap-vehicle-check {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(115deg, color-mix(in srgb, var(--vo-sr-gold, #ddbf91) 48%, #ffffff) 0%, var(--vo-sr-gold, #ddbf91) 100%);
  color: #111413;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .15s ease, transform .15s ease;
}
.vo-ap-pkg-check svg,
.vo-ap-vehicle-check svg { width: 14px; height: 14px; }
.vo-ap-pkg-item.is-selected .vo-ap-pkg,
.vo-ap-pkg:has(.vo-ap-input:checked) { border-color: var(--vo-sr-gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vo-sr-gold) 32%, transparent), 0 18px 34px -20px rgba(0, 0, 0, .6); }
.vo-ap-pkg-item.is-selected .vo-ap-pkg-check,
.vo-ap-pkg:has(.vo-ap-input:checked) .vo-ap-pkg-check { opacity: 1; transform: none; }
.vo-ap-pkg:has(.vo-ap-input:focus-visible) { outline: 3px solid var(--vo-ap-accent); outline-offset: 3px; }
.vo-ap-pkg-body { position: relative; display: grid; gap: 6px; padding: 14px; }
.vo-ap-pkg-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; border-radius: 50%; background: #ffffff; color: #111413; }
.vo-ap-pkg-icon svg { width: 18px; height: 18px; }
.vo-ap-pkg-name { font: 700 15px/1.25 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; }
.vo-ap-pkg-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: rgba(255, 255, 255, .78); font-size: 12px; line-height: 1.45; }
.vo-ap-pkg-meta { display: grid; gap: 4px; margin-top: 4px; }
.vo-ap-pkg-price { color: rgba(255, 255, 255, .86); font-size: 12.5px; }
.vo-ap-pkg-price strong { color: var(--vo-sr-gold); font: 700 16px/1 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; }
.vo-ap-pkg-time { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .76); font-size: 12px; }
.vo-ap-pkg-time svg { width: 14px; height: 14px; }

/* Step 2: vehicle */
.vo-ap-vehicles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-top: 16px; }
.vo-ap-vehicle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px 14px;
  border: 1.5px solid var(--vo-ap-line);
  border-radius: 12px;
  background: #ffffff;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.vo-ap-vehicle:hover { border-color: #b9beb9; }
.vo-ap-vehicle.is-selected,
.vo-ap-vehicle:has(.vo-ap-input:checked) { border-color: var(--vo-sr-gold); background: color-mix(in srgb, var(--vo-sr-gold) 10%, #ffffff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vo-sr-gold) 28%, transparent); }
.vo-ap-vehicle.is-selected .vo-ap-vehicle-check,
.vo-ap-vehicle:has(.vo-ap-input:checked) .vo-ap-vehicle-check { opacity: 1; transform: none; }
.vo-ap-vehicle-check { top: 8px; right: 8px; width: 22px; height: 22px; background: #111413; color: #ffffff; }
.vo-ap-vehicle:has(.vo-ap-input:focus-visible) { outline: 3px solid var(--vo-ap-accent); outline-offset: 3px; }
.vo-veh { display: block; width: 100%; max-width: 150px; height: auto; margin-bottom: 4px; }
.vo-veh-body { fill: #eef0ee; stroke: #272c29; }
.vo-veh-line { stroke: #272c29; }
.vo-veh-tyre { fill: #272c29; stroke: #272c29; }
.vo-veh-hub { fill: var(--vo-sr-gold); stroke: #272c29; }
.vo-ap-vehicle-name { color: var(--vo-ap-ink); font: 600 13.5px/1.3 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; }
.vo-ap-vehicle-hint { color: var(--vo-ap-muted); font-size: 11.5px; line-height: 1.35; }

/* Step 3: add-ons */
.vo-ap-addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.vo-ap-addon-item.is-unavailable { opacity: .5; }
.vo-ap-addon {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 12px 14px;
  border: 1px solid var(--vo-ap-line);
  border-radius: 10px;
  background: #ffffff;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.vo-ap-addon:hover { border-color: #b9beb9; }
.vo-ap-addon.is-selected,
.vo-ap-addon:has(.vo-ap-addon-input:checked) { border-color: var(--vo-sr-gold); background: color-mix(in srgb, var(--vo-sr-gold) 10%, #ffffff); }
.vo-ap-addon:has(.vo-ap-addon-input:focus-visible) { outline: 3px solid var(--vo-ap-accent); outline-offset: 2px; }
.vo-ap-box { display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid #b9beb9; border-radius: 5px; background: #ffffff; color: transparent; }
.vo-ap-box svg { width: 13px; height: 13px; }
.vo-ap-addon:has(.vo-ap-addon-input:checked) .vo-ap-box { border-color: #111413; background: #111413; color: #ffffff; }
.vo-ap-addon-icon { display: grid; place-items: center; color: var(--vo-ap-ink); }
.vo-ap-addon-icon svg { width: 24px; height: 24px; }
.vo-ap-addon-body { display: grid; gap: 2px; min-width: 0; }
.vo-ap-addon-name { color: var(--vo-ap-ink); font: 600 13px/1.3 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; }
.vo-ap-addon-desc { color: var(--vo-ap-muted); font-size: 11.5px; line-height: 1.4; }
.vo-ap-addon-price { color: var(--vo-ap-ink); font: 700 13px/1 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; white-space: nowrap; }

/* Step 4: date and time */
.vo-ap-time { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 16px; }
.vo-ap-cal { padding: 14px; border: 1px solid var(--vo-ap-line); border-radius: 12px; background: #ffffff; }
.vo-ap-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vo-ap-cal-month { color: var(--vo-ap-ink); font: 700 15px/1.2 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; }
.vo-ap-cal-nav { display: inline-flex; gap: 4px; }
.vo-ap-cal-nav button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--vo-ap-ink); cursor: pointer; }
.vo-ap-cal-nav button:hover { background: #f4f5f4; }
.vo-ap-cal-nav svg { width: 16px; height: 16px; }
.vo-ap-cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 12px 0 4px; color: var(--vo-ap-muted); font-size: 10.5px; text-align: center; }
.vo-ap-cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.vo-ap-day {
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--vo-ap-ink);
  font: 500 12.5px/1 var(--brand-body-font, Inter, system-ui, sans-serif);
  cursor: pointer;
}
.vo-ap-day:not(:disabled):hover { background: #f4f5f4; }
.vo-ap-day.is-open { font-weight: 700; }
.vo-ap-day:disabled { color: #b5bab5; cursor: default; }
.vo-ap-day.is-outside { color: #c8ccc8; }
.vo-ap-day.is-selected { background: #111413; color: #ffffff; }
.vo-ap-day:focus-visible,
.vo-ap-slot:focus-visible { outline: 2px solid var(--vo-ap-accent); outline-offset: 2px; }
.vo-ap-slots-title { margin: 0; color: var(--vo-ap-ink); font: 600 14px/1.3 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; }
.vo-ap-slots-date { margin: 2px 0 12px; color: var(--vo-ap-muted); font-size: 12.5px; }
.vo-ap-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.vo-ap-slot { padding: 10px 6px; border: 1px solid var(--vo-ap-line); border-radius: 8px; background: #ffffff; color: var(--vo-ap-ink); font: 500 12.5px/1 var(--brand-body-font, Inter, system-ui, sans-serif); cursor: pointer; transition: border-color .15s ease; }
.vo-ap-slot:hover { border-color: #9fa59f; }
.vo-ap-slot.is-selected { border-color: #111413; background: #111413; color: #ffffff; }
.vo-ap-slots-status { margin: 10px 0 0; color: var(--vo-ap-muted); font-size: 12.5px; }

/* Step 5: details */
.vo-ap-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.vo-ap-field { display: grid; gap: 6px; min-width: 0; margin: 0; }
.vo-ap-field > span,
.vo-ap-contact legend { color: var(--vo-ap-ink); font: 600 12px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-ap-field i { color: var(--vo-ap-accent); font-style: normal; }
.vo-ap-field input,
.vo-ap-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cfd4cf;
  border-radius: 8px;
  background: #ffffff;
  color: #111413;
  font: 400 13.5px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif);
  box-sizing: border-box;
}
.vo-ap-field textarea { resize: vertical; min-height: 72px; }
.vo-ap-field input:focus,
.vo-ap-field textarea:focus { border-color: #111413; outline: 3px solid color-mix(in srgb, var(--vo-sr-gold) 45%, transparent); outline-offset: 0; }
.vo-ap-field [aria-invalid="true"] { border-color: #b3261e; }
.vo-ap-contact { grid-column: 3; grid-row: 2; padding: 0; border: 0; }
.vo-ap-contact legend { padding: 0; margin-bottom: 6px; }
.vo-ap-contact > div { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 6px; }
.vo-ap-contact label { display: inline-flex; align-items: center; gap: 6px; color: var(--vo-ap-ink); font-size: 13px; cursor: pointer; }
.vo-ap-contact input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: #111413; }
.vo-ap-notes { grid-column: 1 / span 2; grid-row: 2; }
.vo-ap-notes small { justify-self: end; color: var(--vo-ap-muted); font-size: 11px; }

/* Summary, assurances and the closing card */
.vo-ap-aside { position: sticky; top: var(--vo-sticky-top, 88px); display: grid; gap: 14px; min-width: 0; }
.vo-ap-summary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 22px 20px 20px;
  border-radius: 16px;
  background: #111413;
  color: #ffffff;
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .7);
}
.vo-ap-summary.has-image::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 72%;
  height: 160px;
  background: var(--vo-ap-summary-image) center 40% / cover no-repeat;
  opacity: .6;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60%), linear-gradient(180deg, #000 30%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 60%), linear-gradient(180deg, #000 30%, transparent 100%);
  mask-composite: intersect;
}
.vo-ap-summary-head h2 { margin: 0; color: #ffffff; font: 700 22px/1.2 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; letter-spacing: -.01em; }
.vo-ap-summary-head p { max-width: 24ch; margin: 6px 0 0; color: rgba(255, 255, 255, .72); font-size: 13px; line-height: 1.45; }
.vo-ap-lines { display: grid; margin: 18px 0 0; padding: 0; list-style: none; }
.vo-ap-line { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.vo-ap-line-icon { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: #1f2421; color: var(--vo-sr-gold); }
.vo-ap-line-icon > svg:not(.vo-veh) { width: 22px; height: 22px; }
.vo-ap-line-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vo-ap-line-icon .vo-veh { width: 42px; margin: 0; }
.vo-ap-summary .vo-veh-body { fill: #2f3532; stroke: #d6dad6; }
.vo-ap-summary .vo-veh-line { stroke: #d6dad6; }
.vo-ap-summary .vo-veh-tyre { fill: #0b0d0c; stroke: #d6dad6; }
.vo-ap-line-body { display: grid; gap: 2px; min-width: 0; }
.vo-ap-line-label { color: rgba(255, 255, 255, .58); font-size: 11.5px; }
.vo-ap-line-body strong { overflow: hidden; color: #ffffff; font: 600 14px/1.3 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; text-overflow: ellipsis; }
.vo-ap-line-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: rgba(255, 255, 255, .7); font-size: 12px; }
.vo-ap-line-meta:empty { display: none; }
.vo-ap-line-meta b { color: var(--vo-sr-gold); font: 700 14px/1 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; }
.vo-ap-line-meta span { display: inline-flex; align-items: center; gap: 5px; }
.vo-ap-line-meta svg { width: 13px; height: 13px; }
.vo-ap-edit { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: rgba(255, 255, 255, .7); }
.vo-ap-edit:hover { color: var(--vo-sr-gold); background: rgba(255, 255, 255, .06); }
.vo-ap-edit svg { width: 16px; height: 16px; }
.vo-ap-totals { display: grid; gap: 8px; margin: 6px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.vo-ap-totals div { display: flex; justify-content: space-between; gap: 12px; }
.vo-ap-totals dt { color: rgba(255, 255, 255, .72); font-size: 13px; }
.vo-ap-totals dd { margin: 0; color: #ffffff; font-size: 13px; }
.vo-ap-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 0 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); }
.vo-ap-total span { font: 600 16px/1.2 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; }
.vo-ap-total strong { color: var(--vo-sr-gold); font: 700 24px/1 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; }
.vo-ap-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(115deg, color-mix(in srgb, var(--vo-sr-gold, #ddbf91) 48%, #ffffff) 0%, var(--vo-sr-gold, #ddbf91) 100%);
  color: var(--brand-button-text, #111413);
  font: 700 15px/1 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
  box-sizing: border-box;
}
.vo-ap-confirm:hover { filter: brightness(1.05); transform: translateY(-1px); }
.vo-ap-confirm:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.vo-ap-confirm:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.vo-ap-confirm[aria-busy="true"] { opacity: .8; cursor: progress; }
.vo-ap-confirm svg { width: 18px; height: 18px; }
.vo-ap-error { margin: 10px 0 0; color: #ffb4ab; font-size: 12.5px; line-height: 1.4; }
.vo-ap-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; color: rgba(255, 255, 255, .62); font-size: 11.5px; text-align: center; }
.vo-ap-note svg { width: 13px; height: 13px; flex: none; }
.vo-ap-assure { display: grid; margin: 0; padding: 4px 18px; border: 1px solid var(--vo-ap-line); border-radius: 14px; background: color-mix(in srgb, var(--vo-ap-card) 70%, #f4f5f4); list-style: none; }
.vo-ap-assure li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 14px; padding: 14px 0; }
.vo-ap-assure li + li { border-top: 1px solid var(--vo-ap-line); }
.vo-ap-assure svg { width: 26px; height: 26px; color: var(--vo-ap-ink); }
.vo-ap-assure strong { display: block; color: var(--vo-ap-ink); font: 600 13.5px/1.3 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; }
.vo-ap-assure li span span { display: block; margin-top: 3px; color: var(--vo-ap-muted); font-size: 12px; line-height: 1.45; }
.vo-ap-promo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 170px;
  padding: 26px 22px;
  border-radius: 14px;
  background: #111413;
  color: #ffffff;
}
.vo-ap-promo.has-image::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--vo-ap-promo-image) 70% center / cover no-repeat; }
.vo-ap-promo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 12, 11, .92) 0%, rgba(10, 12, 11, .7) 55%, rgba(10, 12, 11, .2) 100%); }
.vo-ap-promo-title { margin: 0; font: 800 19px/1.2 "Montserrat", "Hanken Grotesk", Inter, system-ui, sans-serif; letter-spacing: .01em; text-transform: uppercase; }
.vo-ap-promo-title span { display: block; }
.vo-ap-promo-title::after { content: ""; display: block; width: 36px; height: 2px; margin-top: 14px; background: var(--vo-sr-gold); }
.vo-ap-promo-text { max-width: 26ch; margin: 14px 0 0; color: rgba(255, 255, 255, .8); font-size: 13px; line-height: 1.5; }
@media (max-width: 1080px) {
  .vo-ap-layout { grid-template-columns: minmax(0, 1fr); }
  .vo-ap-aside { position: static; grid-template-columns: minmax(0, 1fr); max-width: 640px; }
}
@media (max-width: 760px) {
  .vo-ap-time { grid-template-columns: minmax(0, 1fr); }
  .vo-ap-addons { grid-template-columns: minmax(0, 1fr); }
  .vo-ap-fields { grid-template-columns: minmax(0, 1fr); }
  .vo-ap-contact,
  .vo-ap-notes { grid-column: auto; grid-row: auto; }
  .vo-ap-packages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vo-ap-step:not([data-state="current"]) .vo-ap-step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (prefers-reduced-motion: reduce) {
  .vo-ap-pkg, .vo-ap-confirm, .vo-ap-pkg-check, .vo-ap-vehicle-check { transition: none; }
  .vo-ap-pkg:hover, .vo-ap-confirm:hover { transform: none; }
}


/* Hero: barber --------------------------------------------------------- */
.vo-block-hero.vo-block-hero-variant-barber {
  --vo-bp-red: var(--brand-primary, #e31837);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: calc(clamp(52px, 5.6vw, 88px) + var(--vo-hero-top-offset, 0px)) 0 calc(clamp(40px, 4vw, 60px) + 14px);
  background: #ffffff;
  color: #0b213d;
  text-align: left;
}
.vo-block-hero-variant-barber.vo-block-hero-h-lg { min-height: clamp(560px, 44vw, 720px); }
.vo-block-hero-variant-barber.vo-block-hero-h-md { min-height: clamp(480px, 38vw, 620px); }
.vo-block-hero-variant-barber.vo-block-hero-h-sm { min-height: clamp(400px, 30vw, 500px); }
/* The photo fills the opening; white fades over its left side (the pack's
   .hero-photo treatment), so the words stay live and readable. */
.vo-block-hero-variant-barber.has-image::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 0 14px;
  background: var(--vo-hero-image) 100% 18% / cover no-repeat;
}
.vo-block-hero-variant-barber .vo-block-hero-overlay {
  position: absolute;
  inset: 0 0 14px;
  z-index: -1;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 30%, rgba(255, 255, 255, .94) 38%, rgba(255, 255, 255, calc(.3 + var(--vo-hero-overlay, .3) * .6)) 46%, rgba(255, 255, 255, 0) 58%);
  pointer-events: none;
}
/* The barber-pole stripe along the bottom edge. */
.vo-block-hero-variant-barber::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 14px;
  background: #ffffff url("/templates/barber-pole/stripe-tile.svg") 0 0 / 84px 14px repeat-x;
}
.vo-block-hero-variant-barber .vo-block-hero-stamp { display: none; }
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-barber > .vo-block-hero-inner,
.vo-block-hero-variant-barber > .vo-block-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--vo-frame-max, 1180px);
  margin: 0 auto;
  padding: 0 var(--vo-section-gutter, 32px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.vo-block-hero-variant-barber > .vo-block-hero-inner > * { max-width: min(600px, 100%); }
.vo-block-hero-variant-barber .vo-block-hero-eyebrow { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 10px; color: var(--vo-bp-red, #e31837); font: 600 11.5px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .34em; text-transform: uppercase; margin-bottom: 14px; opacity: 1; }
.vo-block-hero-variant-barber .vo-block-hero-title {
  margin: 0;
  color: #0b213d;
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 5.1vw, 76px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.012em;
  text-transform: none;
}
.vo-block-hero-variant-barber .vo-block-hero-title-accent { display: block; color: inherit; }
.vo-block-hero-variant-barber .vo-block-hero-sub {
  max-width: 34em;
  margin: clamp(16px, 1.6vw, 22px) 0 0;
  color: #505866;
  font: 400 clamp(15px, 1.1vw, 16.5px)/1.6 var(--brand-body-font, Inter, system-ui, sans-serif);
  opacity: 1;
}
.vo-block-hero-variant-barber .vo-block-hero-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: clamp(22px, 2.2vw, 30px); align-items: center; }
.vo-block-hero-variant-barber > .vo-block-hero-inner > .vo-block-hero-cta { margin-top: clamp(22px, 2.2vw, 30px); }
.vo-block-hero.vo-block-hero-variant-barber .vo-block-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  margin-top: 0;
  padding: 0 28px;
  border-radius: 999px;
  font: 600 15px/1 var(--brand-body-font, Inter, system-ui, sans-serif);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.vo-block-hero.vo-block-hero-variant-barber .vo-block-hero-cta.vo-block-hero-cta-primary {
  border: 0;
  background: var(--vo-bp-red, #e31837) !important;
  color: var(--brand-button-text, #ffffff) !important;
  box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--vo-bp-red, #e31837) 85%, transparent);
}
.vo-block-hero.vo-block-hero-variant-barber .vo-block-hero-cta.vo-block-hero-cta-primary:hover { background: color-mix(in srgb, var(--vo-bp-red, #e31837) 84%, #000000) !important; }
.vo-block-hero.vo-block-hero-variant-barber :is(.vo-block-hero-cta-outline, .vo-block-hero-cta-ghost) {
  border: 1.5px solid #0b213d;
  background: #ffffff;
  color: #0b213d;
}
.vo-block-hero.vo-block-hero-variant-barber :is(.vo-block-hero-cta-outline, .vo-block-hero-cta-ghost):hover { background: #0b213d; color: #ffffff; }
.vo-block-hero.vo-block-hero-variant-barber .vo-block-hero-cta:hover { transform: translateY(-1px); }
.vo-block-hero.vo-block-hero-variant-barber .vo-block-hero-cta:focus-visible { outline: 3px solid #09629f; outline-offset: 3px; }
.vo-block-hero-variant-barber .vo-block-hero-cta-secondary .vo-cta-arrow { display: none; }
.vo-block-hero-variant-barber .vo-block-hero-cta-icon { width: 18px; height: 18px; margin: 0; }
/* Small promises under the actions: an icon over two lines. */
.vo-block-hero-variant-barber .vo-block-hero-highlights {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--vo-frame-max, 1180px);
  margin: clamp(30px, 3.4vw, 48px) auto 0;
  padding: 0 var(--vo-section-gutter, 32px);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 168px));
  gap: 18px clamp(18px, 2vw, 30px);
  list-style: none;
  color: #0b213d;
}
.vo-block-hero-variant-barber .vo-block-hero-highlights li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0; border: 0; }
.vo-block-hero-variant-barber .vo-block-hero-highlights svg { width: 26px; height: 26px; color: #0b213d; }
.vo-block-hero-variant-barber .vo-block-hero-highlights strong { display: block; color: #0b213d; font: 700 13px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-block-hero-variant-barber .vo-block-hero-highlights li > span > span { display: block; margin-top: 2px; color: #505866; font-size: 11.5px; line-height: 1.4; opacity: 1; }
.vo-builder-page:has(> .vo-builder-blocks > .vo-block-slot:first-child > .vo-block-hero-variant-barber) { padding-top: 0; }

/* The booking card on the photo. */
.vo-hb {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: max(var(--vo-section-gutter, 32px), calc((100% - var(--vo-content-max, 1180px)) / 2));
  width: clamp(290px, 25vw, 348px);
  padding: 20px 18px 16px;
  box-sizing: border-box;
  border-radius: 14px;
  background: #ffffff;
  color: #0b213d;
  box-shadow: 0 30px 70px -30px rgba(11, 33, 61, .45), 0 2px 6px rgba(11, 33, 61, .06);
  transform: translateY(-50%);
  font-family: var(--brand-body-font, Inter, system-ui, sans-serif);
  text-align: left;
}
.vo-block-hero-variant-barber.has-booking { padding-bottom: calc(clamp(40px, 4vw, 60px) + 14px); }
.vo-hb::after { content: ""; position: absolute; top: 0; right: -6px; width: 10px; height: 84px; border-radius: 0 3px 3px 0; background: repeating-linear-gradient(-35deg, var(--vo-bp-red, #e31837) 0 10px, #ffffff 10px 17px, #09629f 17px 27px, #ffffff 27px 34px); }
.vo-hb-title { margin: 0; color: #0b213d; font: 700 16px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-hb-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 0 14px; padding: 0; list-style: none; }
.vo-hb-steps li { display: inline-flex; align-items: center; gap: 6px; color: #505866; font-size: 11px; }
.vo-hb-steps li span { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #c4cad3; border-radius: 50%; font-size: 10.5px; font-weight: 700; }
.vo-hb-steps li.is-current { color: #0b213d; font-weight: 600; }
.vo-hb-steps li.is-current span { border-color: var(--vo-bp-red, #e31837); background: var(--vo-bp-red, #e31837); color: #ffffff; }
.vo-hb-sample { margin: -6px 0 10px; color: #505866; font-size: 11px; }
.vo-hb-list { display: grid; gap: 8px; }
.vo-hb-item {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e4e8ed;
  border-radius: 10px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vo-hb-item:hover { border-color: #c4cad3; }
.vo-hb-item.is-selected,
.vo-hb-item:has(input:checked) { border-color: var(--vo-bp-red, #e31837); box-shadow: 0 0 0 1px var(--vo-bp-red, #e31837); }
.vo-hb-item:has(input:focus-visible) { outline: 3px solid #09629f; outline-offset: 2px; }
.vo-hb-item input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.vo-hb-thumb { display: grid; place-items: center; width: 38px; height: 38px; overflow: hidden; border-radius: 7px; background: #f5f7f9; color: #0b213d; }
.vo-hb-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vo-hb-thumb svg { width: 18px; height: 18px; }
.vo-hb-name { display: grid; gap: 1px; min-width: 0; }
.vo-hb-name strong { overflow: hidden; color: #0b213d; font: 700 12.5px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); text-overflow: ellipsis; white-space: nowrap; }
.vo-hb-name span { overflow: hidden; color: #505866; font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.vo-hb-price { color: #0b213d; font: 700 13px/1 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-hb-radio { display: grid; place-items: center; width: 20px; height: 20px; flex: none; box-sizing: border-box; border: 1.5px solid #9aa3ae; border-radius: 50%; background: #ffffff; color: transparent; width: 18px; height: 18px; }
.vo-hb-item.is-selected .vo-hb-radio,
.vo-hb-item:has(input:checked) .vo-hb-radio { border-color: var(--vo-bp-red, #e31837); background: var(--vo-bp-red, #e31837); box-shadow: inset 0 0 0 3.5px #ffffff; }
.vo-hb-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--vo-bp-red, #e31837); color: var(--brand-button-text, #ffffff); font: 600 15px/1 var(--brand-body-font, Inter, system-ui, sans-serif); text-decoration: none; box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--vo-bp-red, #e31837) 85%, transparent); transition: background-color .15s ease, transform .15s ease; width: 100%; min-height: 44px; margin-top: 14px; font-size: 14px; box-sizing: border-box; }
.vo-hb-cta:hover { background: color-mix(in srgb, var(--vo-bp-red, #e31837) 84%, #000000); }
.vo-hb-cta:focus-visible { outline: 3px solid #09629f; outline-offset: 3px; }
.vo-hb-cta svg { width: 16px; height: 16px; }
.vo-hb-note { margin: 10px 0 0; color: #505866; font-size: 11.5px; text-align: center; }
@media (max-width: 1080px) {
  .vo-block-hero-variant-barber.has-booking { justify-content: flex-start; }
  .vo-hb { position: relative; top: auto; right: auto; width: auto; max-width: 420px; margin: clamp(26px, 4vw, 40px) var(--vo-section-gutter, 32px) 0; transform: none; }
}
@media (max-width: 860px) {
  .vo-block-hero.vo-block-hero-variant-barber.has-image { padding-top: calc(clamp(220px, 52vw, 340px) + var(--vo-hero-top-offset, 0px)); }
  .vo-block-hero-variant-barber.has-image::before { bottom: auto; height: clamp(260px, 60vw, 400px); background-position: 62% 20%; }
  .vo-block-hero-variant-barber .vo-block-hero-overlay { inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) clamp(150px, 34vw, 230px), #ffffff clamp(260px, 60vw, 400px)); }
  .vo-block-hero-variant-barber .vo-block-hero-title { font-size: clamp(38px, 10vw, 54px); }
}
@media (max-width: 560px) {
  .vo-block-hero-variant-barber .vo-block-hero-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vo-block-hero-variant-barber .vo-block-hero-actions { width: 100%; }
  .vo-block-hero.vo-block-hero-variant-barber .vo-block-hero-actions .vo-block-hero-cta { flex: 1 1 100%; justify-content: center; }
}

/* Barber-pole stripe (divider) ------------------------------------------ */
.vo-block.vo-block-divider.vo-block-divider-stripe {
  width: var(--vo-bleed-w, 100vw);
  max-width: var(--vo-bleed-w, 100vw);
  height: 14px;
  margin: 0 calc(50% - var(--vo-bleed-w, 100vw) / 2);
  border: 0;
  background: #ffffff url("/templates/barber-pole/stripe-tile.svg") 0 0 / 84px 14px repeat-x;
}

/* Shared heading row (team, services) ------------------------------------ */
.vo-bp-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  column-gap: clamp(20px, 3vw, 48px);
  row-gap: 10px;
  align-items: end;
}
.vo-bp-head:not(.has-link) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.vo-bp-head .vo-section-eyebrow { margin: 0 0 10px; color: var(--vo-bp-red, #e31837); font: 600 11.5px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .34em; text-transform: uppercase; }
.vo-bp-head h2 { margin: 0; color: #0b213d; font: 400 clamp(28px, 2.7vw, 40px)/1.08 "DM Serif Display", Georgia, "Times New Roman", serif; letter-spacing: -.005em; }
.vo-bp-head-desc { max-width: 52ch; margin: 0; padding-bottom: 4px; color: #505866; font-size: 14px; line-height: 1.6; }
.vo-bp-outline { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border: 1.5px solid #0b213d; border-radius: 999px; background: #ffffff; color: #0b213d; font: 600 13px/1 var(--brand-body-font, Inter, system-ui, sans-serif); text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.vo-bp-outline:hover { background: #0b213d; color: #ffffff; }
.vo-bp-outline:focus-visible { outline: 3px solid #09629f; outline-offset: 3px; }
.vo-bp-outline svg { width: 15px; height: 15px; }
.vo-bp-head .vo-bp-outline { justify-self: end; margin-bottom: 4px; }
@media (max-width: 900px) {
  .vo-bp-head, .vo-bp-head:not(.has-link) { grid-template-columns: minmax(0, 1fr); }
  .vo-bp-head .vo-bp-outline { justify-self: start; }
}

/* Category tiles: barber (photo cards with a round icon) ------------------ */
.vo-block-tiles.vo-block-tiles-style-barber { --vo-bp-red: var(--brand-primary, #e31837); max-width: var(--vo-frame-max, 1180px); padding: 0 var(--vo-section-gutter, 32px); margin: clamp(48px, 5.6vw, 84px) auto; gap: clamp(22px, 2.4vw, 30px); color: #0b213d; scroll-margin-top: 90px; }
.vo-block-tiles-style-barber .vo-block-tiles-head {
  max-width: none;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  column-gap: clamp(20px, 3vw, 48px);
  row-gap: 8px;
  align-items: end;
}
.vo-block-tiles-style-barber .vo-block-tiles-head > :not(.vo-section-eyebrow, .vo-block-tiles-title, .vo-block-tiles-desc, .vo-block-tiles-link) { grid-column: 1 / -1; }
.vo-block-tiles-style-barber .vo-section-eyebrow { grid-column: 1 / -1; margin: 0 0 10px; color: var(--vo-bp-red, #e31837); font: 600 11.5px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .34em; text-transform: uppercase; margin: 0; }
.vo-block-tiles-style-barber .vo-block-tiles-title { grid-column: 1; color: #0b213d; font: 400 clamp(28px, 2.7vw, 40px)/1.08 "DM Serif Display", Georgia, "Times New Roman", serif; letter-spacing: -.005em; }
.vo-block-tiles-style-barber .vo-block-tiles-desc { grid-column: 2; max-width: 50ch; padding-bottom: 4px; color: #505866; font-size: 14px; line-height: 1.6; }
.vo-block-tiles-style-barber .vo-block-tiles-link { grid-column: 3; justify-self: end; margin-bottom: 4px; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border: 1.5px solid #0b213d; border-radius: 999px; background: #ffffff; color: #0b213d; font: 600 13px/1 var(--brand-body-font, Inter, system-ui, sans-serif); text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.vo-block-tiles-style-barber .vo-block-tiles-link:hover { background: #0b213d; color: #ffffff; }
.vo-block-tiles-style-barber .vo-block-tiles-row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.vo-block-tiles-style-barber .vo-block-tile {
  display: flex;
  flex-direction: column;
  aspect-ratio: auto;
  min-height: 0;
  border: 1px solid #e4e8ed;
  border-radius: 12px;
  background: #ffffff;
  color: #0b213d;
  box-shadow: 0 3px 16px rgba(11, 33, 61, .06);
}
.vo-block-tiles-style-barber .vo-block-tile:hover { border-color: #d3d9e1; box-shadow: 0 22px 40px -26px rgba(11, 33, 61, .4); }
.vo-block-tiles-style-barber .vo-block-tile:focus-visible { outline: 3px solid #09629f; outline-offset: 3px; }
.vo-block-tiles-style-barber .vo-block-tile-media { position: relative; inset: auto; z-index: 0; flex: none; height: auto; aspect-ratio: 1.6; }
.vo-block-tiles-style-barber .vo-block-tile-media-empty { background: linear-gradient(150deg, #f5f7f9, #dfe5ec); }
.vo-block-tiles-style-barber .vo-block-tile-shade { display: none; }
.vo-block-tiles-style-barber .vo-block-tile-body { position: relative; inset: auto; flex: 1; display: block; padding: 38px 20px 20px; }
.vo-block-tiles-style-barber .vo-block-tile-icon {
  position: absolute;
  top: -28px;
  left: 18px;
  width: 54px;
  border: 1px solid #e4e8ed;
  border-radius: 50%;
  background: #ffffff;
  color: #0b213d;
  box-shadow: 0 6px 16px -8px rgba(11, 33, 61, .35);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.vo-block-tiles-style-barber .vo-block-tile-icon svg { width: 48%; height: 48%; }
.vo-block-tiles-style-barber .vo-block-tile-text { display: flex; flex-direction: column; gap: 6px; height: 100%; }
.vo-block-tiles-style-barber .vo-block-tile-name { color: #0b213d; font: 400 clamp(19px, 1.5vw, 22px)/1.15 "DM Serif Display", Georgia, "Times New Roman", serif; letter-spacing: 0; white-space: normal; }
.vo-block-tiles-style-barber .vo-block-tile-desc { color: #505866; font-size: 13px; line-height: 1.5; opacity: 1; }
.vo-block-tiles-style-barber .vo-block-tile-cta { margin-top: auto; padding-top: 10px; color: var(--vo-bp-red, #e31837); font: 700 13.5px/1.2 var(--brand-body-font, Inter, system-ui, sans-serif); }
@media (max-width: 900px) {
  .vo-block-tiles-style-barber .vo-block-tiles-head { grid-template-columns: minmax(0, 1fr) auto; }
  .vo-block-tiles-style-barber .vo-block-tiles-desc { grid-column: 1 / -1; grid-row: 3; }
  .vo-block-tiles-style-barber .vo-block-tiles-link { grid-column: 2; grid-row: 2; }
}
@media (max-width: 720px) {
  .vo-block-tiles-style-barber .vo-block-tiles-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vo-block-tiles-style-barber .vo-block-tile { aspect-ratio: auto; }
  .vo-block-tiles-style-barber .vo-block-tiles-head { grid-template-columns: minmax(0, 1fr); }
  .vo-block-tiles-style-barber .vo-block-tiles-link { grid-column: 1; grid-row: auto; justify-self: start; }
}
@media (max-width: 460px) {
  .vo-block-tiles-style-barber .vo-block-tiles-row { grid-template-columns: minmax(0, 1fr); }
}

/* Team ------------------------------------------------------------------- */
.vo-block.vo-block-team {
  --vo-bp-red: var(--brand-primary, #e31837);
  width: 100%;
  max-width: var(--vo-frame-max, 1180px);
  margin: clamp(44px, 5vw, 76px) auto;
  padding: 0 var(--vo-section-gutter, 32px);
  box-sizing: border-box;
  color: #0b213d;
  font-family: var(--brand-body-font, Inter, system-ui, sans-serif);
  scroll-margin-top: 90px;
}
.vo-team-sample { margin: 14px 0 0; padding: 8px 12px; border: 1px dashed #c4cad3; border-radius: 8px; color: #505866; font-size: 12px; }
.vo-team-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(20px, 2.4vw, 30px); }
.vo-team-card {
  display: grid;
  grid-template-columns: minmax(84px, 40%) minmax(0, 1fr);
  min-height: 132px;
  overflow: hidden;
  border: 1px solid #e4e8ed;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 3px 16px rgba(11, 33, 61, .06);
}
.vo-team-card.is-sample { border-style: dashed; }
.vo-team-photo { display: block; min-height: 100%; overflow: hidden; background: #f5f7f9; }
.vo-team-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.vo-team-photo.is-initials,
.vo-ap-staff-photo.is-initials,
.vo-ap-line-photo.is-initials { display: grid; place-items: center; background: linear-gradient(150deg, #1d3a5f, #0b213d); color: #ffffff; font: 400 26px/1 "DM Serif Display", Georgia, "Times New Roman", serif; }
.vo-team-body { display: flex; flex-direction: column; gap: 3px; padding: 14px 14px 12px; min-width: 0; }
.vo-team-name { margin: 0; color: #0b213d; font: 400 19px/1.2 "DM Serif Display", Georgia, "Times New Roman", serif; }
.vo-team-role { margin: 0; color: var(--vo-bp-red, #e31837); font: 700 10px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .18em; text-transform: uppercase; }
.vo-team-quote { margin: 6px 0 0; color: #505866; font-size: 12.5px; line-height: 1.45; }
.vo-bp-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
.vo-bp-social a { display: grid; place-items: center; color: var(--vo-bp-red, #e31837); }
.vo-bp-social a:hover { color: #0b213d; }
.vo-bp-social a:focus-visible { outline: 2px solid #09629f; outline-offset: 2px; border-radius: 4px; }
.vo-bp-social svg { width: 16px; height: 16px; }
.vo-block-team-portraits .vo-team-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.vo-block-team-portraits .vo-team-photo { aspect-ratio: 1; }

/* Price list and the barber-pole emblem ------------------------------------ */
.vo-block.vo-block-pl {
  --vo-bp-red: var(--brand-primary, #e31837);
  display: grid;
  grid-template-columns: minmax(130px, .82fr) minmax(0, 1.3fr) minmax(150px, .95fr);
  gap: clamp(18px, 2.2vw, 30px);
  align-items: stretch;
  width: 100%;
  max-width: var(--vo-frame-max, 1180px);
  margin: clamp(40px, 5vw, 72px) auto;
  padding: 0 var(--vo-section-gutter, 32px);
  box-sizing: border-box;
  color: #0b213d;
  font-family: var(--brand-body-font, Inter, system-ui, sans-serif);
}
.vo-block-pl:not(.has-emblem) { grid-template-columns: minmax(150px, .8fr) minmax(0, 1.6fr); }
.vo-block-pl.is-empty { grid-template-columns: minmax(0, 1fr) minmax(150px, .9fr); }
.vo-pl-lead { display: flex; flex-direction: column; align-items: flex-start; }
.vo-pl-lead .vo-section-eyebrow { margin: 0 0 10px; color: var(--vo-bp-red, #e31837); font: 600 11.5px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .34em; text-transform: uppercase; }
.vo-pl-title { margin: 0; color: #0b213d; font: 400 clamp(26px, 2.4vw, 34px)/1.1 "DM Serif Display", Georgia, "Times New Roman", serif; }
.vo-pl-lead .vo-bp-outline { margin-top: auto; }
.vo-pl-title + .vo-bp-outline { margin-top: clamp(20px, 3vw, 60px); }
.vo-pl-list { min-width: 0; }
.vo-pl-sample { margin: 0 0 6px; color: #505866; font-size: 11.5px; }
.vo-pl-rows { margin: 0; padding: 0; list-style: none; }
.vo-pl-rows.is-sample { opacity: .78; }
.vo-pl-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #e4e8ed; color: #0b213d; font-size: 13.5px; }
.vo-pl-rows li:first-child { padding-top: 2px; }
.vo-pl-name { min-width: 0; }
.vo-pl-price { flex: none; font-weight: 700; }
.vo-bp-emblem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(20px, 2.4vw, 30px) 18px;
  border: 1px solid #e4e8ed;
  border-radius: 10px;
  background: #f5f7f9;
  color: #0b213d;
  text-align: center;
  box-sizing: border-box;
}
.vo-bp-emblem-pole { display: block; width: 34px; height: auto; }
.vo-bp-emblem-lines { margin: 0; font: 400 14px/1.6 "DM Serif Display", Georgia, "Times New Roman", serif; letter-spacing: .16em; text-transform: uppercase; }
.vo-bp-emblem-lines span { display: block; }
.vo-bp-emblem-lines::after { content: ""; display: block; width: 32px; height: 2px; margin: 12px auto 0; background: var(--vo-bp-red, #e31837); }
.vo-bp-emblem-caption { display: grid; gap: 3px; margin: 0; color: #505866; font: 600 9.5px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .24em; text-transform: uppercase; }
/* Beside the reviews on one row (prices a little wider, as drawn): each side
   lines up with the page frame. */
.vo-block-slot-half:has(> .vo-block-pl):has(+ .vo-block-slot-half > .vo-block-tm-style-barber) { flex-basis: calc(56% - 4px); }
.vo-block-slot-half:has(> .vo-block-pl) + .vo-block-slot-half:has(> .vo-block-tm-style-barber) { flex-basis: calc(44% - 4px); }
.vo-block-slot-half > .vo-block.vo-block-pl { max-width: calc(var(--vo-frame-max, 1180px) * .56 - 4px); margin-left: auto; margin-right: 0; padding-right: 12px; }
.vo-block-slot-half:has(> .vo-block-pl):has(+ .vo-block-slot:empty) { flex-basis: 100%; }
.vo-block-slot-half:has(+ .vo-block-slot:empty) > .vo-block.vo-block-pl { max-width: var(--vo-frame-max, 1180px); margin: clamp(40px, 5vw, 72px) auto; padding: 0 var(--vo-section-gutter, 32px); }
.vo-block-slot:empty { display: none; }
@media (max-width: 1100px) {
  .vo-block.vo-block-pl { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .vo-block-pl .vo-bp-emblem { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; text-align: left; }
}
@media (max-width: 720px) {
  .vo-block.vo-block-pl,
  .vo-block-slot-half > .vo-block.vo-block-pl { grid-template-columns: minmax(0, 1fr); max-width: none; margin: clamp(36px, 8vw, 56px) 0; padding: 0 var(--vo-section-gutter, 32px); }
  .vo-pl-title + .vo-bp-outline { margin-top: 16px; }
}

/* Reviews: barber --------------------------------------------------------- */
.vo-block.vo-block-tm.vo-block-tm-style-barber { --vo-bp-red: var(--brand-primary, #e31837); color: #0b213d; }
.vo-block-slot-half > .vo-block.vo-block-tm-style-barber { max-width: calc(var(--vo-frame-max, 1180px) * .5 - 4px); margin-left: 0; margin-right: auto; padding-left: 12px; }
.vo-block-slot-half:has(> .vo-block-pl) + .vo-block-slot-half > .vo-block.vo-block-tm-style-barber { max-width: calc(var(--vo-frame-max, 1180px) * .44 - 4px); }
.vo-block-tm-style-barber .vo-tm-main { justify-content: flex-start; }
.vo-block-tm-style-barber .vo-tm-head { flex-wrap: wrap; }
.vo-tm-head > div { min-width: 0; }
.vo-block-tm-style-barber .vo-tm-eyebrow { margin: 0 0 10px; color: var(--vo-bp-red, #e31837); font: 600 11.5px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .34em; text-transform: uppercase; }
.vo-block-tm-style-barber .vo-tm-title { color: #0b213d; font: 400 clamp(26px, 2.4vw, 34px)/1.1 "DM Serif Display", Georgia, "Times New Roman", serif; letter-spacing: 0; }
.vo-block-tm-style-barber .vo-tm-arrows button { width: 36px; height: 36px; border-color: #e4e8ed; color: #0b213d; }
.vo-block-tm-style-barber .vo-tm-arrows button:hover { border-color: #0b213d; }
.vo-block-tm-style-barber .vo-tm-track { grid-auto-columns: calc((100% - 18px) / 1.55); }
.vo-block-tm-style-barber .vo-tm-card {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-areas: "avatar name" "avatar stars" "quote quote";
  column-gap: 12px;
  row-gap: 4px;
  padding: 18px 20px 20px;
  border-color: #e4e8ed;
  box-shadow: 0 3px 16px rgba(11, 33, 61, .06);
}
.vo-block-tm-style-barber .vo-tm-card::after { content: "\201D"; position: absolute; top: 4px; right: 16px; color: #d7dde5; font: 400 64px/1 "DM Serif Display", Georgia, "Times New Roman", serif; pointer-events: none; }
.vo-block-tm-style-barber .vo-tm-card-head { display: contents; }
.vo-block-tm-style-barber .vo-tm-avatar { grid-area: avatar; width: 46px; height: 46px; align-self: center; background: linear-gradient(150deg, #1d3a5f, #0b213d); color: #ffffff; font: 400 16px/1 "DM Serif Display", Georgia, "Times New Roman", serif; }
.vo-block-tm-style-barber .vo-tm-stars { grid-area: stars; color: #d7dde5; }
.vo-block-tm-style-barber .vo-tm-stars .is-on { color: var(--vo-bp-red, #e31837); }
.vo-block-tm-style-barber .vo-tm-card figcaption { grid-area: name; align-self: end; }
.vo-block-tm-style-barber .vo-tm-card figcaption strong { color: #0b213d; font: 700 13.5px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-block-tm-style-barber .vo-tm-card figcaption span { display: none; }
.vo-block-tm-style-barber .vo-tm-quote { grid-area: quote; margin-top: 12px; color: #0b213d; font-size: 13px; line-height: 1.6; }
@media (max-width: 720px) {
  .vo-block-slot-half > .vo-block.vo-block-tm-style-barber { max-width: none; padding: 0 var(--vo-section-gutter, 32px); }
  .vo-block-tm-style-barber .vo-tm-track { grid-auto-columns: 86%; }
}

/* Image gallery: barber strip ---------------------------------------------- */
.vo-block.vo-block-image-gallery.vo-block-image-gallery-strip.vo-block-image-gallery-style-barber {
  --vo-bp-red: var(--brand-primary, #e31837);
  grid-template-columns: minmax(200px, 1fr) minmax(0, 3.5fr);
  grid-template-areas: "head grid" "cta grid";
  grid-template-rows: auto 1fr;
  row-gap: 18px;
  align-items: start;
  width: 100%;
  max-width: var(--vo-frame-max, 1180px);
  margin: clamp(44px, 5vw, 76px) auto;
  padding: 0 var(--vo-section-gutter, 32px);
  box-sizing: border-box;
  background: transparent;
  color: #0b213d;
}
.vo-block-image-gallery-style-barber .vo-block-gallery-heading h2 { color: #0b213d; font: 400 clamp(26px, 2.4vw, 34px)/1.1 "DM Serif Display", Georgia, "Times New Roman", serif; letter-spacing: 0; text-transform: none; }
.vo-block-image-gallery-style-barber .vo-block-gallery-eyebrow { margin: 0 0 10px; color: var(--vo-bp-red, #e31837); font: 600 11.5px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .34em; text-transform: uppercase; }
.vo-block-image-gallery-style-barber .vo-block-gallery-intro { margin: 12px 0 0; max-width: 32ch; color: #505866; font-size: 13.5px; line-height: 1.55; text-align: left; }
.vo-block-image-gallery-style-barber .vo-block-gallery-cta { justify-self: start; align-self: start; }
.vo-block-image-gallery-style-barber .vo-block-gallery-cta .vo-text-link { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border: 1.5px solid #0b213d; border-radius: 999px; background: #ffffff; color: #0b213d; font: 600 13px/1 var(--brand-body-font, Inter, system-ui, sans-serif); text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease; letter-spacing: 0; text-transform: none; font-size: 13px; }
.vo-block-image-gallery-style-barber .vo-block-gallery-cta .vo-text-link:hover { background: #0b213d; color: #ffffff; }
.vo-block-image-gallery-style-barber .vo-block-gallery-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: clamp(8px, .9vw, 12px); align-self: stretch; }
.vo-block-image-gallery-style-barber .vo-block-gallery-item { border: 0; border-radius: 4px; background: #f5f7f9; }
.vo-block-image-gallery-style-barber .vo-block-gallery-media { aspect-ratio: .92; border-radius: 4px; }
.vo-block-image-gallery-style-barber .vo-block-gallery-media img { filter: none; }
.vo-block-image-gallery-style-barber .vo-block-gallery-item:hover img { filter: none; }
@media (max-width: 900px) {
  .vo-block.vo-block-image-gallery.vo-block-image-gallery-strip.vo-block-image-gallery-style-barber { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "grid" "cta"; grid-template-rows: auto; }
}

/* Closing card: barber ------------------------------------------------------ */
.vo-block.vo-block-cta-band.vo-block-cta-band-barber {
  --vo-bp-red: var(--brand-primary, #e31837);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 40px);
  width: calc(100% - 2 * var(--vo-section-gutter, 32px));
  max-width: calc(var(--vo-frame-max, 1180px) - 2 * var(--vo-section-gutter, 32px));
  margin: clamp(40px, 5vw, 72px) auto;
  padding: clamp(24px, 2.8vw, 34px) clamp(24px, 3.4vw, 48px) clamp(24px, 2.8vw, 34px) clamp(58px, 6vw, 92px);
  box-sizing: border-box;
  border: 1px solid #e4e8ed;
  border-radius: 8px;
  background: #f5f7f9;
  color: #0b213d;
  text-align: left;
  box-shadow: none;
}
.vo-block-cta-band-barber .vo-block-cta-band-pole { position: absolute; top: 0; bottom: 0; left: 0; width: clamp(26px, 2.6vw, 38px); background: repeating-linear-gradient(-55deg, var(--vo-bp-red, #e31837) 0 10px, #ffffff 10px 17px, #09629f 17px 27px, #ffffff 27px 34px); }
.vo-block-cta-band-barber.has-image::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  background: var(--vo-cta-image) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%);
  mask-image: linear-gradient(90deg, transparent 0, #000 42%);
}
.vo-block-cta-band-barber .vo-block-cta-band-inner { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 3vw, 44px); max-width: none; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; text-align: left; }
.vo-block-cta-band-barber .vo-block-cta-band-lead { min-width: 0; }
.vo-block-cta-band-barber .vo-section-eyebrow { margin: 0 0 10px; color: var(--vo-bp-red, #e31837); font: 600 11.5px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .34em; text-transform: uppercase; }
.vo-block-cta-band-barber .vo-block-cta-band-title { max-width: none; margin: 0; color: #0b213d; font: 400 clamp(25px, 2.5vw, 34px)/1.1 "DM Serif Display", Georgia, "Times New Roman", serif; letter-spacing: 0; }
.vo-block-cta-band-barber .vo-block-cta-band-sub { max-width: none; margin: 8px 0 0; color: #505866; font-size: 13.5px; line-height: 1.5; opacity: 1; }
.vo-block-cta-band-barber .vo-block-cta-band-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--vo-bp-red, #e31837); color: var(--brand-button-text, #ffffff); font: 600 15px/1 var(--brand-body-font, Inter, system-ui, sans-serif); text-decoration: none; box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--vo-bp-red, #e31837) 85%, transparent); transition: background-color .15s ease, transform .15s ease; margin: 0; color: var(--brand-button-text, #ffffff) !important; white-space: nowrap; }
.vo-block-cta-band-barber .vo-block-cta-band-btn:hover { background: color-mix(in srgb, var(--vo-bp-red, #e31837) 84%, #000000); transform: translateY(-1px); }
.vo-block-cta-band-barber .vo-block-cta-band-btn:focus-visible { outline: 3px solid #09629f; outline-offset: 3px; }
.vo-block-cta-band-barber .vo-block-cta-band-mark { display: grid; gap: 4px; flex: none; max-width: 15em; margin: 0; padding: 10px 14px; border-radius: 6px; background: rgba(255, 255, 255, .78); color: #0b213d; text-align: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.vo-block-cta-band-barber .vo-block-cta-band-mark strong { font: 400 20px/1.1 "DM Serif Display", Georgia, "Times New Roman", serif; letter-spacing: .04em; text-transform: uppercase; }
.vo-block-cta-band-barber .vo-block-cta-band-mark span { color: #505866; font: 700 8.5px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .22em; text-transform: uppercase; }
@media (max-width: 860px) {
  .vo-block.vo-block-cta-band.vo-block-cta-band-barber { flex-direction: column; align-items: flex-start; }
  .vo-block-cta-band-barber.has-image::before { width: 100%; opacity: .18; -webkit-mask-image: none; mask-image: none; }
}

/* Catalog layout: appointment, Barber Pole look ----------------------------- */
.vo-block-catalog.vo-ap-block.vo-block-catalog-theme-barber {
  --vo-bp-red: var(--brand-primary, #e31837);
  --vo-sr-gold: var(--vo-bp-red, #e31837);
  --vo-ap-accent: #09629f;
  max-width: var(--vo-frame-max, 1180px);
  padding-left: var(--vo-section-gutter, 32px);
  padding-right: var(--vo-section-gutter, 32px);
}
.vo-block-catalog-theme-barber .vo-ap-layout { grid-template-columns: minmax(0, 1fr) minmax(290px, 330px); gap: clamp(22px, 3vw, 40px); }
.vo-block-catalog-theme-barber .vo-ap-main { gap: clamp(26px, 3vw, 38px); }
/* Steps: number and name side by side, joined by hairlines. */
.vo-block-catalog-theme-barber .vo-ap-steps { justify-content: center; flex-wrap: wrap; row-gap: 10px; margin: 0; padding: 4px 0 6px; }
.vo-block-catalog-theme-barber .vo-ap-step { flex: 0 1 auto; flex-direction: row; gap: 8px; }
.vo-block-catalog-theme-barber .vo-ap-step + .vo-ap-step::before { position: static; flex: none; order: -1; width: clamp(18px, 5vw, 76px); height: 1px; margin: 0 clamp(8px, 1vw, 14px); background: #cfd5dd; }
.vo-block-catalog-theme-barber .vo-ap-step:is([data-state="done"], [data-state="current"]) + .vo-ap-step:is([data-state="done"], [data-state="current"])::before { background: var(--vo-bp-red, #e31837); }
.vo-block-catalog-theme-barber .vo-ap-step-num { width: 28px; height: 28px; border: 1.5px solid #b9c1cb; color: #505866; font: 600 12px/1 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-block-catalog-theme-barber .vo-ap-step[data-state="current"] .vo-ap-step-num { border-color: var(--vo-bp-red, #e31837); background: var(--vo-bp-red, #e31837); color: #ffffff; box-shadow: none; }
.vo-block-catalog-theme-barber .vo-ap-step[data-state="done"] .vo-ap-step-num { border-color: var(--vo-bp-red, #e31837); background: #ffffff; color: var(--vo-bp-red, #e31837); }
.vo-block-catalog-theme-barber .vo-ap-step-label { max-width: none; color: #505866; font: 500 12.5px/1.25 var(--brand-body-font, Inter, system-ui, sans-serif); white-space: nowrap; }
.vo-block-catalog-theme-barber .vo-ap-step[data-state="current"] .vo-ap-step-label { color: #0b213d; font-weight: 700; }
/* Sections sit on the page under a red number. */
.vo-block-catalog-theme-barber .vo-ap-card { position: relative; padding: 0; border: 0; border-radius: 0; background: transparent; }
.vo-block-catalog-theme-barber .vo-ap-num { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--vo-bp-red, #e31837); color: #ffffff; font: 700 14px/1 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-block-catalog-theme-barber .vo-ap-title { margin-left: 44px; color: #0b213d; font: 400 clamp(23px, 2vw, 28px)/1.15 "DM Serif Display", Georgia, "Times New Roman", serif; letter-spacing: 0; }
.vo-block-catalog-theme-barber .vo-ap-intro { margin: 4px 0 0 44px; color: #505866; font-size: 13px; }
.vo-block-catalog-theme-barber .vo-ap-card .vo-block-catalog-statusbar { margin-left: 44px; }
/* Services: white cards, photo on top, a radio in the corner. */
.vo-block-catalog-theme-barber .vo-ap-packages { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.vo-block-catalog-theme-barber .vo-ap-pkg-item { grid-column: span 2; }
.vo-block-catalog-theme-barber .vo-ap-pkg-item:nth-child(3n+1):nth-last-child(2),
.vo-block-catalog-theme-barber .vo-ap-pkg-item:nth-child(3n+1):nth-last-child(2) + .vo-ap-pkg-item { grid-column: span 3; }
.vo-block-catalog-theme-barber .vo-ap-pkg {
  justify-content: flex-start;
  min-height: 0;
  padding: 8px;
  border: 1.5px solid #e4e8ed;
  background: #ffffff;
  color: #0b213d;
  box-shadow: 0 3px 16px rgba(11, 33, 61, .05);
}
.vo-block-catalog-theme-barber .vo-ap-pkg.is-plain { background: #ffffff; }
.vo-block-catalog-theme-barber .vo-ap-pkg::after { display: none; }
.vo-block-catalog-theme-barber .vo-ap-pkg:hover { border-color: #c9d0d9; }
.vo-block-catalog-theme-barber .vo-ap-pkg-media { position: relative; inset: auto; z-index: 0; height: clamp(92px, 8vw, 116px); overflow: hidden; border-radius: 8px; }
.vo-block-catalog-theme-barber .vo-ap-pkg-check { opacity: 1; transform: none; top: 16px; right: 16px; display: grid; place-items: center; width: 20px; height: 20px; flex: none; box-sizing: border-box; border: 1.5px solid #9aa3ae; border-radius: 50%; background: #ffffff; color: transparent; width: 22px; height: 22px; }
.vo-block-catalog-theme-barber .vo-ap-pkg.is-plain .vo-ap-pkg-check { top: 14px; right: 14px; }
.vo-block-catalog-theme-barber .vo-ap-pkg-check svg { display: none; }
.vo-block-catalog-theme-barber .vo-ap-pkg-item.is-selected .vo-ap-pkg,
.vo-block-catalog-theme-barber .vo-ap-pkg:has(.vo-ap-input:checked) { border-color: var(--vo-bp-red, #e31837); box-shadow: 0 0 0 1px var(--vo-bp-red, #e31837), 0 14px 30px -20px color-mix(in srgb, var(--vo-bp-red, #e31837) 60%, transparent); }
.vo-block-catalog-theme-barber .vo-ap-pkg-item.is-selected .vo-ap-pkg-check,
.vo-block-catalog-theme-barber .vo-ap-pkg:has(.vo-ap-input:checked) .vo-ap-pkg-check { border-color: var(--vo-bp-red, #e31837); background: var(--vo-bp-red, #e31837); box-shadow: inset 0 0 0 3.5px #ffffff; }
.vo-block-catalog-theme-barber .vo-ap-pkg-body { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px 8px 6px; }
.vo-block-catalog-theme-barber .vo-ap-pkg.is-plain .vo-ap-pkg-body { padding-right: 40px; }
.vo-block-catalog-theme-barber .vo-ap-pkg-icon { display: none; }
.vo-block-catalog-theme-barber .vo-ap-pkg-name { color: #0b213d; font: 700 14.5px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-block-catalog-theme-barber .vo-ap-pkg-desc { -webkit-line-clamp: 2; color: #505866; font-size: 12px; }
.vo-block-catalog-theme-barber .vo-ap-pkg-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.vo-block-catalog-theme-barber .vo-ap-pkg-time { order: -1; color: #505866; }
.vo-block-catalog-theme-barber .vo-ap-pkg-price { margin-left: auto; color: #0b213d; }
.vo-block-catalog-theme-barber .vo-ap-pkg-price strong { color: #0b213d; font: 700 15px/1 var(--brand-body-font, Inter, system-ui, sans-serif); }
/* Staff: portrait cards with a radio. */
.vo-ap-staff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 12px; margin-top: 18px; }
.vo-ap-staff-item { position: relative; min-width: 0; }
.vo-ap-staff {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  height: 100%;
  min-height: 118px;
  padding: 8px;
  box-sizing: border-box;
  border: 1.5px solid var(--vo-ap-line, #e4e8ed);
  border-radius: 12px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vo-ap-staff:hover { border-color: #c9d0d9; }
.vo-ap-staff-item.is-selected .vo-ap-staff,
.vo-ap-staff:has(.vo-ap-input:checked) { border-color: var(--vo-sr-gold, var(--vo-bp-red, #e31837)); box-shadow: 0 0 0 1px var(--vo-sr-gold, var(--vo-bp-red, #e31837)); }
.vo-ap-staff:has(.vo-ap-input:focus-visible) { outline: 3px solid var(--vo-ap-accent, #09629f); outline-offset: 3px; }
.vo-ap-staff-photo { display: block; overflow: hidden; border-radius: 8px; background: #f5f7f9; }
.vo-ap-staff-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.vo-ap-staff-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 4px 26px 30px 0; }
.vo-ap-staff-name { color: var(--vo-ap-ink, #0b213d); font: 400 16px/1.2 "DM Serif Display", Georgia, "Times New Roman", serif; }
.vo-ap-staff-role { color: var(--vo-sr-gold, var(--vo-bp-red, #e31837)); font: 700 9.5px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .16em; text-transform: uppercase; }
.vo-ap-staff-quote { margin-top: 4px; color: var(--vo-ap-muted, #505866); font-size: 11.5px; line-height: 1.4; }
.vo-ap-staff .vo-ap-pkg-check { opacity: 1; transform: none; top: 10px; right: 10px; display: grid; place-items: center; width: 20px; height: 20px; flex: none; box-sizing: border-box; border: 1.5px solid #9aa3ae; border-radius: 50%; background: #ffffff; color: transparent; }
.vo-ap-staff .vo-ap-pkg-check svg { display: none; }
.vo-ap-staff-item.is-selected .vo-ap-pkg-check,
.vo-ap-staff:has(.vo-ap-input:checked) .vo-ap-pkg-check { border-color: var(--vo-bp-red, #e31837); background: var(--vo-bp-red, #e31837); box-shadow: inset 0 0 0 3.5px #ffffff; border-color: var(--vo-sr-gold, var(--vo-bp-red, #e31837)); background: var(--vo-sr-gold, var(--vo-bp-red, #e31837)); }
.vo-ap-staff-item > .vo-bp-social { position: absolute; left: 102px; bottom: 12px; margin: 0; padding: 0; }
.vo-ap-staff-item > .vo-bp-social svg { width: 14px; height: 14px; }
.vo-ap-staff-any { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--vo-ap-ink, #0b213d); font-size: 13px; cursor: pointer; }
.vo-ap-staff-any .vo-ap-box { border-radius: 50%; }
.vo-ap-staff-any:has(.vo-ap-input:checked) .vo-ap-box,
.vo-ap-staff-any.is-selected .vo-ap-box { border-color: var(--vo-sr-gold, var(--vo-bp-red, #e31837)); background: var(--vo-sr-gold, var(--vo-bp-red, #e31837)); color: #ffffff; }
.vo-ap-staff-any:has(.vo-ap-input:focus-visible) { outline: 3px solid var(--vo-ap-accent, #09629f); outline-offset: 3px; border-radius: 6px; }
/* Date and time. */
.vo-block-catalog-theme-barber .vo-ap-time { grid-template-columns: minmax(250px, 290px) minmax(0, 1fr); margin-top: 18px; }
.vo-block-catalog-theme-barber .vo-ap-cal { border-color: #e4e8ed; box-shadow: 0 3px 16px rgba(11, 33, 61, .05); }
.vo-block-catalog-theme-barber .vo-ap-cal-month { color: #0b213d; font: 400 17px/1.2 "DM Serif Display", Georgia, "Times New Roman", serif; }
.vo-block-catalog-theme-barber .vo-ap-day.is-selected { background: var(--vo-bp-red, #e31837); color: #ffffff; }
.vo-block-catalog-theme-barber .vo-ap-slots-title { color: #0b213d; font: 700 13.5px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-block-catalog-theme-barber .vo-ap-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vo-block-catalog-theme-barber .vo-ap-slot { border-radius: 6px; border-color: #e4e8ed; }
.vo-block-catalog-theme-barber .vo-ap-slot:hover { border-color: #b9c1cb; }
.vo-block-catalog-theme-barber .vo-ap-slot.is-selected { border-color: var(--vo-bp-red, #e31837); background: var(--vo-bp-red, #e31837); color: #ffffff; }
/* Details: two columns, an icon in each field. */
.vo-block-catalog-theme-barber .vo-ap-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.vo-ap-field-box { position: relative; display: block; }
.vo-ap-field-icon { position: absolute; top: 50%; left: 12px; display: grid; place-items: center; width: 18px; height: 18px; color: #7b8592; transform: translateY(-50%); pointer-events: none; }
.vo-ap-field-icon svg { width: 17px; height: 17px; }
.vo-ap-field-box input { padding-left: 40px !important; }
.vo-block-catalog-theme-barber .vo-ap-field input { border-color: #d3d9e1; color: #0b213d; }
.vo-block-catalog-theme-barber .vo-ap-field input:focus { border-color: #0b213d; outline: 3px solid color-mix(in srgb, #09629f 30%, transparent); }
.vo-block-catalog-theme-barber .vo-ap-field i { color: var(--vo-bp-red, #e31837); }
/* Your Booking: a white card with the pole stripe on its corner. */
.vo-block-catalog-theme-barber .vo-ap-summary { padding: 22px 20px 18px; border: 1px solid #e4e8ed; background: #ffffff; color: #0b213d; box-shadow: 0 18px 46px -26px rgba(11, 33, 61, .35); }
.vo-block-catalog-theme-barber .vo-ap-summary::after { content: ""; position: absolute; top: 0; right: 0; width: 10px; height: 76px; background: repeating-linear-gradient(-35deg, var(--vo-bp-red, #e31837) 0 10px, #ffffff 10px 17px, #09629f 17px 27px, #ffffff 27px 34px); }
.vo-block-catalog-theme-barber .vo-ap-summary.has-image::before { display: none; }
.vo-block-catalog-theme-barber .vo-ap-summary-head h2 { color: #0b213d; font: 400 24px/1.2 "DM Serif Display", Georgia, "Times New Roman", serif; }
.vo-block-catalog-theme-barber .vo-ap-summary-head p { color: #505866; }
.vo-block-catalog-theme-barber .vo-ap-line { grid-template-columns: 54px minmax(0, 1fr) auto; border-top-color: #e4e8ed; }
.vo-block-catalog-theme-barber .vo-ap-line-icon { width: 54px; height: 54px; border-color: #e4e8ed; border-radius: 8px; background: #f5f7f9; color: #0b213d; }
.vo-ap-line-photo { display: block; width: 100%; height: 100%; }
.vo-ap-line-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.vo-ap-line-photo.is-initials { font-size: 18px; }
.vo-block-catalog-theme-barber .vo-ap-line-label { color: #505866; }
.vo-block-catalog-theme-barber .vo-ap-line-body strong { color: #0b213d; font: 700 14px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-block-catalog-theme-barber .vo-ap-line-meta { color: #505866; }
.vo-block-catalog-theme-barber .vo-ap-line-meta b { color: #0b213d; font: 700 14px/1 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-ap-edit.is-text { width: auto; height: auto; padding: 2px; border-radius: 3px; color: #09629f; font: 600 12px/1.2 var(--brand-body-font, Inter, system-ui, sans-serif); text-decoration: underline; text-underline-offset: 3px; }
.vo-ap-edit.is-text:hover { background: transparent; color: #0b213d; }
.vo-block-catalog-theme-barber .vo-ap-totals { border-top-color: #e4e8ed; }
.vo-block-catalog-theme-barber .vo-ap-totals:has(> div:only-child) { display: none; }
.vo-block-catalog-theme-barber .vo-ap-totals dt { color: #505866; }
.vo-block-catalog-theme-barber .vo-ap-totals dd { color: #0b213d; }
.vo-block-catalog-theme-barber .vo-ap-total { border-top-color: #e4e8ed; }
.vo-block-catalog-theme-barber .vo-ap-total span { color: #0b213d; font: 400 21px/1.2 "DM Serif Display", Georgia, "Times New Roman", serif; }
.vo-block-catalog-theme-barber .vo-ap-total strong { color: #0b213d; font: 400 26px/1 "DM Serif Display", Georgia, "Times New Roman", serif; }
.vo-block-catalog-theme-barber .vo-ap-confirm { background: var(--vo-bp-red, #e31837); color: var(--brand-button-text, #ffffff); font: 600 15px/1 var(--brand-body-font, Inter, system-ui, sans-serif); box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--vo-bp-red, #e31837) 85%, transparent); }
.vo-block-catalog-theme-barber .vo-ap-confirm:hover { background: color-mix(in srgb, var(--vo-bp-red, #e31837) 84%, #000000); filter: none; }
.vo-block-catalog-theme-barber .vo-ap-confirm:focus-visible { outline-color: #09629f; }
.vo-block-catalog-theme-barber .vo-ap-error { color: #b3261e; }
.vo-block-catalog-theme-barber .vo-ap-note { color: #505866; }
.vo-block-catalog-theme-barber .vo-ap-emblem { padding: clamp(24px, 2.6vw, 34px) 18px; }
.vo-block-catalog-theme-barber .vo-ap-assure { padding: 6px 20px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--vo-bp-red, #e31837) 7%, #ffffff); }
.vo-block-catalog-theme-barber .vo-ap-assure li { grid-template-columns: 34px minmax(0, 1fr); padding: 16px 0; }
.vo-block-catalog-theme-barber .vo-ap-assure li + li { border-top: 0; }
.vo-block-catalog-theme-barber .vo-ap-assure svg { width: 30px; height: 30px; color: #0b213d; }
.vo-block-catalog-theme-barber .vo-ap-assure strong { color: #0b213d; font: 700 14px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-block-catalog-theme-barber .vo-ap-assure li span span { color: #505866; }
@media (max-width: 1080px) {
  .vo-block-catalog-theme-barber .vo-ap-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .vo-block-catalog-theme-barber .vo-ap-packages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vo-block-catalog-theme-barber .vo-ap-pkg-item,
  .vo-block-catalog-theme-barber .vo-ap-pkg-item:nth-child(3n+1):nth-last-child(2),
  .vo-block-catalog-theme-barber .vo-ap-pkg-item:nth-child(3n+1):nth-last-child(2) + .vo-ap-pkg-item { grid-column: auto; }
  .vo-block-catalog-theme-barber .vo-ap-fields { grid-template-columns: minmax(0, 1fr); }
  .vo-block-catalog-theme-barber .vo-ap-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vo-block-catalog-theme-barber .vo-ap-step + .vo-ap-step::before { width: 14px; margin: 0 6px; }
}
@media (max-width: 460px) {
  .vo-block-catalog-theme-barber .vo-ap-packages { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .vo-hb-item, .vo-hb-cta, .vo-ap-staff { transition: none; }
}


/* Hero: archive --------------------------------------------------------- */
.vo-block-hero.vo-block-hero-variant-archive {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: calc(clamp(56px, 6.5vw, 104px) + var(--vo-hero-top-offset, 0px)) 0 clamp(72px, 7.5vw, 112px);
  background: #d8d5ce;
  color: #101010;
  text-align: left;
}
.vo-block-hero-variant-archive.vo-block-hero-h-lg { min-height: clamp(520px, 45vw, 820px); }
.vo-block-hero-variant-archive.vo-block-hero-h-md { min-height: clamp(460px, 38vw, 680px); }
.vo-block-hero-variant-archive.vo-block-hero-h-sm { min-height: clamp(360px, 28vw, 500px); }
/* The campaign photo, kept to the right where the people are (the pack leaves
   blank concrete on the left for the words). */
.vo-block-hero-variant-archive.has-image { background-image: none; }
.vo-block-hero-variant-archive.has-image::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: var(--vo-hero-image) 65% center / cover no-repeat;
}
.vo-block-hero-variant-archive .vo-block-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(232, 230, 225, calc(var(--vo-hero-overlay, .2) * 1.6)) 0%, rgba(232, 230, 225, calc(var(--vo-hero-overlay, .2) * .8)) 34%, rgba(232, 230, 225, 0) 56%);
  pointer-events: none;
}
.vo-block-hero-variant-archive .vo-block-hero-stamp { display: none; }
/* The opening sits right under the title bar. */
.vo-builder-page:has(> .vo-builder-blocks > .vo-block-slot:first-child > .vo-block-hero-variant-archive) { padding-top: 0; }
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-archive > .vo-block-hero-inner,
.vo-block-hero-variant-archive > .vo-block-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--vo-frame-max, 1180px);
  margin: 0 auto;
  padding: 0 var(--vo-section-gutter, 32px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.vo-block-hero-variant-archive > .vo-block-hero-inner > * { max-width: min(640px, 100%); }
.vo-block-hero-variant-archive .vo-block-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 clamp(22px, 2.6vw, 36px);
  color: inherit;
  font: 600 10.5px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .18em; text-transform: uppercase;
  opacity: 1;
}
.vo-block-hero-variant-archive .vo-block-hero-eyebrow::after { content: ""; width: 52px; height: 1px; background: currentColor; opacity: .7; }
.vo-block-hero-variant-archive .vo-block-hero-title {
  margin: 0;
  max-width: 4.7em;
  color: inherit;
  font-family: "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(56px, 7.9vw, 140px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.005em;
  text-transform: uppercase;
}
.vo-block-hero-variant-archive .vo-block-hero-title-accent { display: block; color: inherit; }
.vo-block-hero-variant-archive .vo-block-hero-sub {
  max-width: 30em;
  margin: clamp(16px, 1.6vw, 22px) 0 0;
  color: inherit;
  font: 400 clamp(15px, 1.1vw, 17px)/1.55 var(--brand-body-font, Inter, system-ui, sans-serif);
  opacity: .86;
}
.vo-block-hero-variant-archive .vo-block-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 2.2vw, 30px); }
.vo-block-hero-variant-archive > .vo-block-hero-inner > .vo-block-hero-cta { margin-top: clamp(22px, 2.2vw, 30px); }
.vo-block-hero.vo-block-hero-variant-archive .vo-block-hero-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 0 26px; border: 0; border-radius: 0; background: var(--vo-tpl-flame, var(--vo-ar-lime, #eeff74)); color: #101010; font: 600 13px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; box-shadow: none; transition: background-color .15s ease, transform .15s ease; }
.vo-block-hero.vo-block-hero-variant-archive .vo-block-hero-cta.vo-block-hero-cta-primary { background: var(--vo-tpl-flame, var(--vo-ar-lime, #eeff74)) !important; color: #101010 !important; }
.vo-block-hero.vo-block-hero-variant-archive .vo-block-hero-cta:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--vo-tpl-flame, var(--vo-ar-lime, #eeff74)) 86%, #ffffff) !important; }
.vo-block-hero.vo-block-hero-variant-archive .vo-block-hero-cta:is(.vo-block-hero-cta-outline, .vo-block-hero-cta-ghost):not(.vo-block-hero-cta-primary) { background: transparent !important; color: inherit !important; box-shadow: inset 0 0 0 1.5px currentColor; }
.vo-block-hero-variant-archive .vo-cta-arrow { font-size: 16px; line-height: 1; }
/* Small stacked words top right ("Same / People / Different / Perspective"). */
.vo-block-hero.vo-block-hero-variant-archive .vo-block-hero-script {
  position: absolute;
  z-index: 1;
  top: calc(clamp(56px, 6.5vw, 104px) + var(--vo-hero-top-offset, 0px));
  right: max(var(--vo-section-gutter, 32px), calc((100% - var(--vo-frame-max, 1180px)) / 2 + var(--vo-section-gutter, 32px)));
  display: grid;
  gap: 2px;
  color: inherit;
  font: 600 10px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .18em; text-transform: uppercase;
  transform: none;
  text-shadow: none;
  pointer-events: none;
}
.vo-block-hero.vo-block-hero-variant-archive .vo-block-hero-script span { margin-left: 0; }
.vo-block-hero.vo-block-hero-variant-archive .vo-block-hero-script::after { content: ""; width: 18px; height: 1px; margin-top: 10px; background: currentColor; }
/* Over a photo the corner words are white (campaign photos keep that corner dark). */
.vo-block-hero.vo-block-hero-variant-archive.has-image .vo-block-hero-script { color: #ffffff; text-shadow: 0 1px 10px rgba(0, 0, 0, .3); }
/* A trail of words along the bottom ("People / Places / A Higher Standard"). */
.vo-block-hero.vo-block-hero-variant-archive .vo-block-hero-sticker {
  position: absolute;
  z-index: 1;
  left: max(var(--vo-section-gutter, 32px), calc((100% - var(--vo-frame-max, 1180px)) / 2 + var(--vo-section-gutter, 32px)));
  bottom: clamp(22px, 2.6vw, 34px);
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  color: inherit;
}
.vo-block-hero.vo-block-hero-variant-archive .vo-block-hero-sticker > span { display: flex; flex-wrap: wrap; align-items: center; font: 600 9.5px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .18em; text-transform: uppercase; transform: none; }
.vo-block-hero.vo-block-hero-variant-archive .vo-block-hero-sticker > span::after { content: none; }
.vo-block-hero.vo-block-hero-variant-archive .vo-block-hero-sticker > span > span + span::before { content: "/"; margin: 0 16px; opacity: .8; }
/* Darker photos: pale type. */
.vo-block-hero-variant-archive.vo-block-hero-tone-light { color: #ffffff; }
.vo-block-hero-variant-archive.vo-block-hero-tone-light .vo-block-hero-overlay { background: linear-gradient(90deg, rgba(10, 10, 10, calc(var(--vo-hero-overlay, .3) * 1.8)) 0%, rgba(10, 10, 10, calc(var(--vo-hero-overlay, .3) * .9)) 38%, rgba(10, 10, 10, 0) 64%); }
.vo-block-hero-variant-archive:not(.has-image) { background: #efede8; }
@media (max-width: 760px) {
  /* Photo above the words so they never sit on the faces. */
  .vo-block-hero.vo-block-hero-variant-archive { justify-content: flex-start; min-height: 0 !important; padding: calc(var(--vo-hero-top-offset, 0px) + 28px) 0 64px; background: #f7f6f2; }
  .vo-block-hero-variant-archive.has-image { padding-top: calc(var(--vo-hero-top-offset, 0px) + 74vw + 26px); }
  .vo-block-hero-variant-archive.has-image::before { inset: var(--vo-hero-top-offset, 0px) 0 auto; height: 74vw; background-position: 72% center; }
  .vo-block-hero-variant-archive .vo-block-hero-overlay { display: none; }
  .vo-block-hero-variant-archive.vo-block-hero-tone-light { color: #101010; }
  .vo-block-hero-variant-archive .vo-block-hero-title { font-size: clamp(50px, 15vw, 76px); max-width: none; }
  .vo-block-hero.vo-block-hero-variant-archive .vo-block-hero-script { top: calc(var(--vo-hero-top-offset, 0px) + 18px); right: 18px; color: #ffffff; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
  .vo-block-hero.vo-block-hero-variant-archive .vo-block-hero-sticker { left: var(--vo-section-gutter, 32px); bottom: 24px; }
  .vo-block-hero.vo-block-hero-variant-archive .vo-block-hero-sticker > span > span + span::before { margin: 0 10px; }
  .vo-block-hero.vo-block-hero-variant-archive .vo-block-hero-cta { width: 100%; }
}

/* Story: archive (a half-photo editorial) -------------------------------- */
.vo-block.vo-block-story-split.vo-block-story-archive {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  min-height: clamp(420px, 30vw, 580px);
  margin: 0;
  padding: 0;
  max-width: none;
  border-radius: 0;
  background: #efede8;
  color: #101010;
  overflow: hidden;
}
.vo-builder-page .vo-block-slot-full > .vo-block.vo-block-story-archive { width: var(--vo-bleed-w, 100vw); max-width: var(--vo-bleed-w, 100vw); margin-left: calc(50% - var(--vo-bleed-w, 100vw) / 2); margin-right: calc(50% - var(--vo-bleed-w, 100vw) / 2); }
.vo-builder-page[data-page-slug="home"] .vo-block-slot-full > .vo-block.vo-block-story-archive { padding: 0; }
/* A closing editorial meets the footer. */
.vo-builder-page:has(> .vo-builder-blocks > .vo-block-slot:last-child > .vo-block-story-archive) { padding-bottom: 0; margin-bottom: 0; }
.vo-story-ar-photo { position: relative; min-height: 100%; background: #cfccc5; }
.vo-story-ar-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.vo-block-story-archive-right .vo-story-ar-photo { order: 2; }
.vo-story-ar-stack { position: absolute; z-index: 1; display: grid; gap: 2px; margin: 0; font: 600 9.5px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .18em; text-transform: uppercase; }
.vo-story-ar-stack::after { content: ""; width: 18px; height: 1px; margin-top: 10px; background: currentColor; }
.vo-story-ar-photo .vo-story-ar-stack { top: clamp(28px, 3.4vw, 44px); left: clamp(24px, 3.8vw, 48px); color: #ffffff; text-shadow: 0 1px 10px rgba(0, 0, 0, .3); }
.vo-story-ar-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(48px, 5vw, 80px) clamp(28px, 4.6vw, 72px);
}
.vo-story-ar-copy .vo-story-ar-aside { top: clamp(28px, 3.4vw, 44px); right: clamp(24px, 3.6vw, 48px); color: #101010; }
.vo-block-story-archive .vo-block-story-eyebrow { display: flex; align-items: center; gap: 16px; margin: 0 0 clamp(18px, 2vw, 26px); color: #101010; font: 600 10px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .18em; text-transform: uppercase; }
.vo-block-story-archive .vo-block-story-eyebrow::after { content: ""; width: 52px; height: 1px; background: currentColor; }
.vo-block-story-archive h2 {
  margin: 0;
  max-width: 7.6em;
  color: #101010;
  font-family: "Anton", "Oswald", "Arial Narrow", Impact, sans-serif;
  font-size: clamp(44px, 5.4vw, 96px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.004em;
  text-transform: uppercase;
}
.vo-story-ar-body { max-width: 27em; margin: clamp(16px, 1.6vw, 22px) 0 0; color: #101010; font: 400 clamp(14.5px, 1.05vw, 16px)/1.55 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-story-ar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 0 26px; border: 0; border-radius: 0; background: var(--vo-tpl-flame, var(--vo-ar-lime, #eeff74)); color: #101010; font: 600 13px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; box-shadow: none; transition: background-color .15s ease, transform .15s ease; margin-top: clamp(20px, 2.2vw, 28px); }
.vo-story-ar-btn:hover { background: color-mix(in srgb, var(--vo-tpl-flame, var(--vo-ar-lime, #eeff74)) 86%, #ffffff); transform: translateY(-1px); }
.vo-story-ar-btn .vo-cta-arrow { font-size: 16px; line-height: 1; }
.vo-block-story-archive.is-text-only { grid-template-columns: 1fr; }
@media (max-width: 760px) {
  .vo-block.vo-block-story-split.vo-block-story-archive { grid-template-columns: 1fr; min-height: 0; }
  .vo-story-ar-photo { min-height: 0; aspect-ratio: 4 / 5; max-height: 78vh; order: 0 !important; }
  .vo-story-ar-copy { padding: 44px var(--vo-section-gutter, 32px) 52px; }
  .vo-story-ar-copy .vo-story-ar-aside { position: static; margin-bottom: 26px; }
  .vo-story-ar-btn { width: 100%; }
}

/* Edit catalog (layout "edit") ------------------------------------------ */
.vo-ed-block {
  --vo-ed-ink: var(--vo-cat-ink, #101010);
  --vo-ed-muted: var(--vo-cat-muted, #5f5e59);
  --vo-ed-line: var(--vo-cat-divider, #d7d5ce);
  --vo-ed-card: var(--vo-cat-card-bg, #fbfaf7);
  --vo-ed-select: var(--vo-cat-accent, #101010);
  --vo-ed-select-ink: var(--vo-cat-button-text, #ffffff);
  --vo-ed-media: #e8e6e2;
  --vo-ed-lime: var(--vo-tpl-flame, var(--vo-ar-lime, #eeff74));
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--vo-frame-max, 1180px) + 2 * var(--vo-section-gutter, 32px));
  margin: 0 auto;
  padding: clamp(34px, 4vw, 56px) var(--vo-section-gutter, 32px) clamp(48px, 5vw, 80px);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--vo-ed-ink);
  font-family: var(--brand-body-font, Inter, system-ui, sans-serif);
  text-align: left;
}
.vo-ed-block.vo-block-catalog-theme-archive { --vo-ed-card: #fbfaf7; }
.vo-ed-block *, .vo-ed-block *::before, .vo-ed-block *::after { box-sizing: border-box; }
.vo-ed-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vo-ed-arrow { width: 15px; height: 15px; flex: none; }
.vo-ed-rule { display: inline-block; height: 1px; background: currentColor; opacity: .8; }

/* Homepage row */
.vo-ed-row-block { padding-top: clamp(34px, 3.6vw, 52px); padding-bottom: clamp(44px, 4.6vw, 72px); }
.vo-ed-row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(16px, 1.8vw, 24px); }
.vo-ed-row-title, .vo-ed-title {
  margin: 0;
  color: var(--vo-ed-ink);
  font-family: var(--vo-cat-heading-font, "Anton", "Oswald", "Arial Narrow", Impact, sans-serif);
  font-weight: var(--vo-cat-heading-weight, 400);
  line-height: .9;
  letter-spacing: -.004em;
  text-transform: uppercase;
}
.vo-ed-row-title { font-size: clamp(44px, 4.8vw, 78px); }
.vo-ed-viewall { display: inline-flex; align-items: center; gap: 16px; margin-bottom: 6px; color: var(--vo-ed-ink); font: 600 10px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.vo-ed-viewall .vo-ed-rule { width: clamp(60px, 15vw, 170px); }
.vo-ed-viewall:hover .vo-ed-arrow { transform: translateX(3px); }
.vo-ed-viewall .vo-ed-arrow { transition: transform .15s ease; }

/* Grid and cards */
.vo-ed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vo-ed-grid.is-row { grid-template-columns: repeat(var(--vo-ed-cols, 4), minmax(0, 1fr)); gap: clamp(10px, 1.1vw, 14px); }
.vo-ed-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: var(--vo-cat-card-border, 1px solid #d7d5ce);
  background: var(--vo-ed-card);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .2s ease;
}
.vo-ed-card[hidden] { display: none; }
.vo-ed-card:hover { box-shadow: var(--vo-cat-card-shadow-hover, none); }
.vo-ed-grid.is-row .vo-ed-card { border: 0; background: transparent; }
.vo-ed-grid.is-row .vo-ed-card:hover { box-shadow: none; }
.vo-ed-media { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--vo-ed-media); }
.vo-ed-grid.is-row .vo-ed-media { aspect-ratio: 20 / 21; }
.vo-ed-media img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }
.vo-ed-card:hover .vo-ed-media img { transform: scale(1.025); }
.vo-ed-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: var(--vo-ed-muted); font: 400 64px/1 var(--vo-cat-heading-font, "Anton", "Oswald", "Arial Narrow", Impact, sans-serif); }
.vo-ed-badge { position: absolute; z-index: 2; top: 14px; left: 14px; padding: 4px 10px; background: var(--vo-ed-lime); color: #101010; font: 700 9.5px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; }
.vo-ed-media .vo-wish { position: absolute; z-index: 2; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; background: transparent; box-shadow: none; color: var(--vo-ed-ink); }
.vo-ed-media .vo-wish svg { width: 19px; height: 19px; }
.vo-ed-media .vo-wish svg path { stroke-width: 1.5; }
.vo-ed-media .vo-wish.is-saved { color: #d61f45; }
.vo-ed-body { display: grid; gap: 3px; padding: 14px 14px 0; }
.vo-ed-grid.is-row .vo-ed-body { padding: 12px 0 0; }
.vo-ed-name { color: var(--vo-ed-ink); font: var(--vo-cat-name-weight, 500) var(--vo-cat-name-size, 12.5px)/1.35 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: var(--vo-cat-letter-spacing, .08em); text-transform: uppercase; }
.vo-ed-price { color: var(--vo-ed-ink); font: 400 12.5px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .04em; }
.vo-ed-sold { color: var(--vo-ed-muted); font: 600 10px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.vo-ed-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.vo-ed-swatch {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--vo-ed-ink) 14%, transparent);
  border-radius: 50%;
  background: var(--vo-ed-c, #c9c7c2);
  cursor: default;
}
button.vo-ed-swatch { cursor: pointer; }
.vo-ed-swatch.is-light { border-color: color-mix(in srgb, var(--vo-ed-ink) 26%, transparent); }
.vo-ed-swatch.is-active { box-shadow: 0 0 0 2px var(--vo-ed-card), 0 0 0 3.2px var(--vo-ed-ink); }
.vo-ed-grid.is-row .vo-ed-swatch.is-active { box-shadow: 0 0 0 2px var(--vo-cat-bg, #f7f6f2), 0 0 0 3.2px var(--vo-ed-ink); }
.vo-ed-swatch:focus-visible { outline: 2px solid var(--vo-ed-ink); outline-offset: 3px; }
.vo-ed-swatch-more { color: var(--vo-ed-muted); font: 500 11px/1 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-ed-actions { display: grid; gap: 10px; margin-top: auto; padding: 16px 14px 14px; }
.vo-ed-quick, .vo-ed-actions .add-to-cart.vo-ed-real-add, .vo-ed-load {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1.5px solid var(--vo-ed-ink);
  border-radius: 0;
  background: transparent;
  color: var(--vo-ed-ink);
  font: 700 11.5px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.vo-ed-actions .add-to-cart.vo-ed-real-add[hidden] { display: none; }
:is(.vo-ed-quick, .vo-ed-actions .add-to-cart.vo-ed-real-add, .vo-ed-load):not(:disabled):hover { background: var(--vo-ed-ink); color: var(--vo-ed-card); }
:is(.vo-ed-quick, .vo-ed-actions .add-to-cart.vo-ed-real-add):disabled { opacity: .45; cursor: not-allowed; }
:is(.vo-ed-quick, .vo-ed-load, .vo-ed-size, .vo-ed-tab, .vo-ed-color):focus-visible { outline: 2px solid var(--vo-ed-ink); outline-offset: 2px; }
.vo-ed-quick.is-bag, .is-picking .vo-ed-quick { border-color: var(--vo-ed-lime); background: var(--vo-ed-lime); color: #101010; }
.is-picking .vo-ed-quick:not(:disabled):hover { background: color-mix(in srgb, var(--vo-ed-lime) 84%, #000000); color: #101010; }
.vo-ed-quick.is-added { border-color: var(--vo-ed-ink); background: var(--vo-ed-ink); color: var(--vo-ed-card); }
.vo-ed-sizes-pick { display: none; grid-template-columns: repeat(auto-fit, minmax(34px, 1fr)); gap: 4px; }
.is-picking > .vo-ed-sizes-pick, .vo-ed-actions.is-picking .vo-ed-sizes-pick { display: grid; }
.vo-ed-size {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 0 4px;
  border: 1px solid color-mix(in srgb, var(--vo-ed-ink) 22%, transparent);
  border-radius: 0;
  background: transparent;
  color: var(--vo-ed-ink);
  font: 600 10.5px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.vo-ed-size:hover { border-color: var(--vo-ed-ink); }
.vo-ed-size[aria-pressed="true"], .vo-ed-size.is-active { border-color: var(--vo-ed-select); background: var(--vo-ed-select); color: var(--vo-ed-select-ink); }
.vo-ed-size:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.vo-ed-pick-note { margin: 0; color: var(--vo-ed-muted); font: 500 12px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-ed-pick-note:empty { display: none; }
.vo-ed-card.is-unavailable .vo-ed-media img { opacity: .55; }

/* Shop: head and tabs */
.vo-ed-crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(14px, 1.6vw, 20px); color: var(--vo-ed-ink); font: 600 10px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.vo-ed-crumbs a { color: inherit; text-decoration: none; }
.vo-ed-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vo-ed-title { font-size: clamp(50px, 6.6vw, 112px); }
.vo-ed-sub-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-top: clamp(10px, 1vw, 14px); }
.vo-ed-sub { margin: 0; color: var(--vo-ed-ink); font: 400 clamp(15px, 1.25vw, 18px)/1.45 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-ed-count { margin: 0; color: var(--vo-ed-ink); font: 400 12.5px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-ed-tabs { display: flex; flex-wrap: wrap; gap: 4px clamp(6px, 1vw, 16px); margin: clamp(26px, 3vw, 40px) 0 clamp(28px, 3.2vw, 44px); padding-bottom: 10px; border-bottom: 1.5px solid color-mix(in srgb, var(--vo-ed-ink) 70%, transparent); }
.vo-ed-tab { min-height: 30px; padding: 0 clamp(14px, 1.6vw, 26px); border: 0; border-radius: 0; background: transparent; color: var(--vo-ed-ink); font: 600 10.5px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.vo-ed-tab:hover { text-decoration: underline; text-underline-offset: 5px; }
.vo-ed-tab.is-active, .vo-ed-tab[aria-pressed="true"] { background: var(--vo-ed-select); color: var(--vo-ed-select-ink); text-decoration: none; }

/* Shop: filter column */
.vo-ed { display: grid; grid-template-columns: minmax(170px, 196px) minmax(0, 1fr); gap: clamp(18px, 2.2vw, 30px); align-items: start; }
.vo-ed.is-single { grid-template-columns: minmax(0, 1fr); }
.vo-ed-side { position: sticky; top: calc(var(--vo-sf-header-h, 77px) + 16px); }
.vo-ed-filter-toggle { display: none; }
.vo-ed-side-title { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; color: var(--vo-ed-ink); font: 700 11px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .06em; text-transform: uppercase; }
.vo-ed-side-title .vo-ed-rule, .vo-ed-filter-toggle .vo-ed-rule { width: 32px; }
.vo-ed-group { display: grid; gap: 10px; padding: 16px 0; border-top: 1px solid var(--vo-ed-line); }
.vo-ed-group:first-of-type { border-top: 0; padding-top: 4px; }
.vo-ed-label { margin: 0; color: var(--vo-ed-ink); font: 700 9.5px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; }
.vo-ed-select { position: relative; display: block; }
.vo-ed-select::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.vo-ed-select select { width: 100%; height: 38px; padding: 0 30px 0 12px; border: 1px solid color-mix(in srgb, var(--vo-ed-ink) 24%, transparent); border-radius: 0; background: transparent; color: var(--vo-ed-ink); font: 400 12.5px/1 var(--brand-body-font, Inter, system-ui, sans-serif); -webkit-appearance: none; appearance: none; cursor: pointer; }
.vo-ed-size-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vo-ed-size-grid .vo-ed-size { min-height: 34px; white-space: nowrap; }
.vo-ed-size-grid .vo-ed-size.is-wide { grid-column: span 2; }
.vo-ed-colors { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vo-ed-color { display: flex; align-items: center; gap: 12px; width: 100%; padding: 2px 0; border: 0; background: none; color: var(--vo-ed-ink); font: 400 12.5px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); text-align: left; cursor: pointer; }
.vo-ed-dot { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--vo-ed-ink) 14%, transparent); background: var(--vo-ed-c); }
.vo-ed-dot.is-light { border-color: color-mix(in srgb, var(--vo-ed-ink) 30%, transparent); }
.vo-ed-color[aria-pressed="true"] { font-weight: 700; }
.vo-ed-color[aria-pressed="true"] .vo-ed-dot { box-shadow: 0 0 0 2px var(--vo-cat-bg, #f7f6f2), 0 0 0 3.2px var(--vo-ed-ink); }
.vo-ed-price-ends { display: flex; justify-content: space-between; margin: 0; color: var(--vo-ed-ink); font: 400 11.5px/1 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-ed-range { --vo-of-line: color-mix(in srgb, var(--vo-ed-ink) 30%, transparent); --vo-of-accent: var(--vo-ed-ink); --vo-of-card: var(--vo-cat-bg, #f7f6f2); margin-top: 0; }
.vo-ed-range::before, .vo-ed-range::after { height: 1.5px; top: 10px; border-radius: 0; }
.vo-ed-check { display: flex; align-items: center; gap: 10px; color: var(--vo-ed-ink); font: 400 12.5px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); cursor: pointer; }
.vo-ed-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--vo-ed-ink); }
.vo-ed-clear { justify-self: start; margin-top: 14px; padding: 0; border: 0; background: none; color: var(--vo-ed-ink); font: 500 12.5px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Shop: results */
.vo-ed-main { min-width: 0; }
.vo-ed-more { display: grid; justify-items: center; gap: 14px; margin-top: clamp(40px, 5vw, 72px); }
.vo-ed-showing { margin: 0; color: var(--vo-ed-ink); font: 400 12.5px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-ed-load { width: auto; min-width: 168px; }
.vo-ed-load[hidden] { display: none; }
.vo-ed-empty { padding: 40px 0; color: var(--vo-ed-muted); font: 400 15px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); text-align: center; }
.vo-ed-empty .vo-ed-load { margin-top: 14px; }
.vo-ed-empty[hidden] { display: none; }
.vo-ed-block .vo-block-catalog-statusbar { margin: 0 0 18px; }

@media (max-width: 1080px) {
  .vo-ed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vo-ed-grid.is-row { grid-template-columns: repeat(min(var(--vo-ed-cols, 4), 4), minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .vo-ed { grid-template-columns: minmax(0, 1fr); }
  .vo-ed-side { position: static; }
  .vo-ed-filter-toggle { display: inline-flex; align-items: center; gap: 12px; padding: 10px 0; border: 0; background: none; color: var(--vo-ed-ink); font: 700 11px/1.5 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
  .vo-ed-filter-toggle::before { content: "+"; font-size: 15px; line-height: 1; }
  .vo-ed-filter-toggle[aria-expanded="true"]::before { content: "−"; }
  .vo-ed-filters { display: none; padding-bottom: 8px; }
  .vo-ed-side-title { display: none; }
  .vo-ed-block.is-filters-open .vo-ed-filters { display: block; }
  .vo-ed-block.is-filters-open .vo-ed-size-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vo-ed-grid.is-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* The page column already carries the side gutter on phones. */
  .vo-ed-block { padding-left: 0; padding-right: 0; }
}
@media (max-width: 560px) {
  .vo-ed-row-head { flex-direction: column; align-items: flex-start; }
  .vo-ed-viewall .vo-ed-rule { width: 40px; }
  .vo-ed-grid { gap: 8px; }
  .vo-ed-body { padding: 12px 10px 0; }
  .vo-ed-actions { padding: 12px 10px 10px; }
  .vo-ed-badge { top: 10px; left: 10px; }
  .vo-ed-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .vo-ed-tab { flex: none; }
  .vo-ed-block.is-filters-open .vo-ed-size-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* Hero: forno ----------------------------------------------------------- */
.vo-block-hero.vo-block-hero-variant-forno {
  --vo-fo-red: var(--brand-primary, #a11218);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: calc(clamp(48px, 5vw, 80px) + var(--vo-hero-top-offset, 0px)) 0 clamp(48px, 5vw, 80px);
  background: var(--brand-bg, #faf7f1);
  color: #1c1915;
  text-align: left;
}
/* The photograph is shot on the same cream table: it fills the band pinned
   right, so the words sit on its empty left side. */
.vo-block-hero.vo-block-hero-variant-forno.has-image { background: #efe6da; }
.vo-block-hero-variant-forno.has-image::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--vo-hero-image) right center / cover no-repeat;
  pointer-events: none;
}
/* Narrow screens keep the copy readable over the table's left side. */
.vo-block-hero-variant-forno.has-image::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(239, 230, 218, .92) 0, rgba(239, 230, 218, .7) 34%, rgba(239, 230, 218, 0) 58%);
  pointer-events: none;
}
@media (min-width: 1280px) { .vo-block-hero-variant-forno.has-image::before { opacity: .55; } }
/* The opening sits flush under the title bar. */
.vo-builder-page:has(> .vo-builder-blocks > .vo-block-slot:first-child > .vo-block-hero-variant-forno) { padding-top: 0; }
.vo-block-hero-variant-forno.has-image.vo-block-hero-h-lg { min-height: clamp(460px, 36vw, 640px); }
.vo-block-hero-variant-forno.has-image.vo-block-hero-h-md { min-height: clamp(380px, 28vw, 500px); }
.vo-block-hero-variant-forno .vo-block-hero-overlay,
.vo-block-hero-variant-forno .vo-block-hero-stamp,
.vo-block-hero-variant-forno .vo-block-hero-script,
.vo-block-hero-variant-forno .vo-block-hero-sticker { display: none; }
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-forno > .vo-block-hero-inner,
.vo-block-hero-variant-forno > .vo-block-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--vo-frame-max, 1180px);
  margin: 0 auto;
  padding: 0 var(--vo-section-gutter, 32px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.vo-block-hero-variant-forno .vo-block-hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 clamp(18px, 2vw, 26px);
  padding: 0;
  border: 0;
  background: none;
  color: color-mix(in srgb, #1c1915 82%, transparent);
  font: 600 10.5px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .15em; text-transform: uppercase;
}
/* "Neapolitan pizza \ Good people \ Brighter days" */
.vo-block-hero-variant-forno .vo-block-hero-eyebrow-dot { font-size: 0; opacity: 1; margin: 0; }
.vo-block-hero-variant-forno .vo-block-hero-eyebrow-dot::before { content: "\\"; font-size: 11px; font-weight: 400; }
.vo-block-hero-variant-forno .vo-block-hero-title {
  margin: 0;
  max-width: 9.6em;
  color: #1c1915;
  font-family: var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); font-weight: 700; font-optical-sizing: auto; letter-spacing: -.035em;
  font-size: clamp(46px, 6.2vw, 104px);
  line-height: .96;
  letter-spacing: -.045em;
  text-wrap: balance;
  text-shadow: none;
}
.vo-block-hero-variant-forno .vo-block-hero-title-accent { display: block; color: #1c1915; }
.vo-block-hero-variant-forno .vo-block-hero-sub {
  max-width: 27em;
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  color: color-mix(in srgb, #1c1915 90%, transparent);
  font: 400 clamp(17px, 1.35vw, 20px)/1.45 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif);
  letter-spacing: -.005em;
  opacity: 1;
  text-shadow: none;
}
.vo-block-hero-variant-forno .vo-block-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 2.4vw, 34px); align-items: center; }
.vo-block-hero-variant-forno > .vo-block-hero-inner > .vo-block-hero-cta { margin-top: clamp(24px, 2.4vw, 34px); }
.vo-block-hero.vo-block-hero-variant-forno .vo-block-hero-cta.vo-block-hero-cta-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 6px; background: var(--vo-cat-accent, var(--brand-primary, #a11218)); color: var(--vo-cat-button-text, var(--brand-button-text, #ffffff)); font: 600 15.5px/1 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); letter-spacing: 0; text-decoration: none; cursor: pointer; transition: filter .15s ease, transform .15s ease;
  min-height: 50px;
  padding: 0 30px;
  background: var(--vo-fo-red) !important;
  color: var(--brand-button-text, #ffffff) !important;
  box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--vo-fo-red) 90%, transparent);
  text-transform: none;
}
.vo-block-hero.vo-block-hero-variant-forno :is(.vo-block-hero-cta-outline, .vo-block-hero-cta-ghost) {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid color-mix(in srgb, #1c1915 62%, transparent) !important;
  border-radius: 6px;
  background: transparent !important;
  color: #1c1915 !important;
  font: 500 15.5px/1 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
}
.vo-block-hero-variant-forno :is(.vo-block-hero-cta-outline, .vo-block-hero-cta-ghost) .vo-cta-arrow { display: none; }
.vo-block-hero-variant-forno .vo-block-hero-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.vo-block-hero-variant-forno :is(.vo-block-hero-cta-outline, .vo-block-hero-cta-ghost):hover { background: color-mix(in srgb, #1c1915 6%, transparent) !important; filter: none; }
/* Without a photo: a centred title band (the site pages). */
.vo-block-hero.vo-block-hero-variant-forno:not(.has-image) { padding: calc(clamp(44px, 5vw, 76px) + var(--vo-hero-top-offset, 0px)) 0 clamp(36px, 4vw, 60px); }
.vo-block-hero-variant-forno:not(.has-image) > .vo-block-hero-inner { align-items: center; text-align: center; }
.vo-block-hero-variant-forno:not(.has-image) .vo-block-hero-eyebrow { justify-content: center; }
.vo-block-hero-variant-forno:not(.has-image) .vo-block-hero-title { max-width: 14em; font-size: clamp(40px, 5vw, 76px); }
.vo-block-hero-variant-forno:not(.has-image) .vo-block-hero-sub { max-width: 34em; margin-left: auto; margin-right: auto; }
.vo-block-hero-variant-forno:not(.has-image) .vo-block-hero-actions { justify-content: center; }
@media (max-width: 760px) {
  .vo-block-hero.vo-block-hero-variant-forno.has-image { padding-top: 0; background: var(--brand-bg, #faf7f1); min-height: 0; }
  .vo-block-hero-variant-forno.has-image::before { display: none; }
  .vo-block-hero-variant-forno.has-image::after { position: relative; inset: auto; order: -1; width: 100%; aspect-ratio: 16 / 10; margin-bottom: 28px; background-position: 78% center; }
  .vo-block-hero-variant-forno .vo-block-hero-actions { width: 100%; }
  .vo-block-hero-variant-forno .vo-block-hero-actions .vo-block-hero-cta { flex: 1 1 100%; justify-content: center; }
}

/* Promises: forno (three olive circles on the stone band) ----------------- */
.vo-block.vo-block-features.vo-block-features-style-forno,
.vo-builder-page .vo-block-slot-full > .vo-block.vo-block-features.vo-block-features-style-forno {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: clamp(24px, 2.4vw, 34px);
  padding-bottom: clamp(24px, 2.4vw, 34px);
  color: #1c1915;
}
.vo-block-features-style-forno :is(.vo-block-features-eyebrow, .vo-block-features-heading, .vo-block-features-intro) { text-align: center; }
.vo-block-features-style-forno .vo-block-features-heading { font-family: var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); font-weight: 700; font-optical-sizing: auto; letter-spacing: -.035em; font-size: clamp(30px, 3.2vw, 46px); margin: 0 0 24px; }
.vo-block-features-style-forno .vo-block-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px 0;
  max-width: 1200px;
  margin: 0 auto;
}
.vo-block-features-style-forno .vo-block-features-cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 18px;
  row-gap: 4px;
  align-items: center;
  align-content: center;
  padding: 4px clamp(18px, 3vw, 44px);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}
.vo-block-features-style-forno .vo-block-features-cell + .vo-block-features-cell { border-left: 1px solid color-mix(in srgb, #1c1915 16%, transparent); }
.vo-block-features-style-forno .vo-block-features-icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0;
  border: 1.5px solid #2f452e;
  border-radius: 999px;
  background: transparent;
  color: #2f452e;
}
.vo-block-features-style-forno .vo-block-features-icon svg { width: 25px; height: 25px; stroke-width: 1.5; }
.vo-block-features-style-forno .vo-block-features-title { align-self: end; margin: 0; color: #1c1915; font: 700 12.5px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .16em; text-transform: uppercase; }
.vo-block-features-style-forno .vo-block-features-desc { align-self: start; margin: 0; color: #5b554d; font: 400 14px/1.45 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); }
@media (max-width: 760px) {
  .vo-block-features-style-forno .vo-block-features-cell { padding: 14px 4px; }
  .vo-block-features-style-forno .vo-block-features-cell + .vo-block-features-cell { border-left: 0; border-top: 1px solid color-mix(in srgb, #1c1915 12%, transparent); }
}

/* Catalog: forno (shared card) ------------------------------------------- */
.vo-fo-block {
  --vo-fo-red: var(--vo-cat-accent, var(--brand-primary, #a11218));
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--vo-cat-ink, #1c1915);
  font-family: var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif);
}
.vo-fo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vo-fo-eyebrow { margin: 0 0 12px; color: color-mix(in srgb, var(--vo-cat-ink, #1c1915) 78%, transparent); font: 600 10.5px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .2em; text-transform: uppercase; }
.vo-fo-title { margin: 0; color: var(--vo-cat-ink, #1c1915); font-family: var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); font-weight: 700; font-optical-sizing: auto; letter-spacing: -.035em; font-size: clamp(36px, 4.4vw, 66px); line-height: 1; letter-spacing: -.045em; }
.vo-fo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--vo-fo-red);
  font: 600 15px/1.3 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  white-space: nowrap;
  cursor: pointer;
}
.vo-fo-link .vo-fo-arrow { text-decoration: none; display: inline-block; }
.vo-fo-link:hover { opacity: .78; }
.vo-fo-grid { display: grid; grid-template-columns: repeat(var(--vo-fo-cols, 2), minmax(0, 1fr)); gap: 18px; }
.vo-fo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: var(--vo-card-border-override, var(--vo-cat-card-border, 1px solid #e6ded1));
  border-radius: var(--vo-cat-card-radius, 8px);
  background: var(--vo-card-bg-override, var(--vo-cat-card-bg, #fffdf9));
  box-shadow: var(--vo-cat-card-shadow, none);
  color: var(--vo-card-text-override, var(--vo-cat-ink, #1c1915));
  transition: box-shadow .2s ease, transform .2s ease;
}
.vo-fo-card:hover { box-shadow: var(--vo-cat-card-shadow-hover, none); }
.vo-fo-media { display: block; aspect-ratio: 16 / 9.4; overflow: hidden; background: #efe6da; }
.vo-fo-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.vo-fo-card:hover .vo-fo-media img { transform: scale(1.03); }
.vo-fo-media.is-empty { display: grid; place-items: center; color: color-mix(in srgb, var(--vo-cat-ink, #1c1915) 30%, transparent); font: 700 34px/1 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); }
.vo-fo-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.vo-fo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vo-fo-name { min-width: 0; color: inherit; font: 700 19px/1.15 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); letter-spacing: -.02em; font-family: var(--vo-card-font-override, var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif)); }
.vo-fo-price { flex: none; color: inherit; font: 600 15px/1.2 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); }
.vo-fo-desc { color: var(--vo-cat-muted, #5b554d); font: 400 14px/1.45 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vo-fo-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: 2px;
  padding: 4px 9px 4px 7px;
  border-radius: 4px;
  background: #edeedf;
  color: #1c1915;
  font: 700 9.5px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .13em; text-transform: uppercase;
}
.vo-fo-badge svg { width: 13px; height: 13px; color: #2f452e; stroke-width: 2; }
.vo-fo-badge:is([data-badge*="popular"], [data-badge*="best"], [data-badge*="spicy"], [data-badge*="hot"], [data-badge*="favorite"], [data-badge*="favourite"], [data-badge*="signature"]) { background: #f7e8e1; }
.vo-fo-badge:is([data-badge*="popular"], [data-badge*="best"], [data-badge*="spicy"], [data-badge*="hot"], [data-badge*="favorite"], [data-badge*="favourite"], [data-badge*="signature"]) svg { color: #d4471f; }
.vo-fo-sold { color: var(--vo-cat-muted, #5b554d); font: 600 10px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase; }
.vo-fo-actions { display: flex; margin-top: auto; padding-top: 8px; }
.vo-fo-actions .vo-fo-add { flex: 1; }
.vo-fo-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 6px; background: var(--vo-cat-accent, var(--brand-primary, #a11218)); color: var(--vo-cat-button-text, var(--brand-button-text, #ffffff)); font: 600 15.5px/1 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); letter-spacing: 0; text-decoration: none; cursor: pointer; transition: filter .15s ease, transform .15s ease;
  min-height: 40px;
  padding: 0 18px;
  background: var(--vo-fo-red);
}
.vo-fo-add:not(.is-round)::after { content: "+"; font: 400 21px/0 var(--brand-body-font, Inter, system-ui, sans-serif); transform: translateY(-1px); }
.vo-fo-add:disabled { opacity: .5; cursor: not-allowed; }
.vo-fo-add:disabled::after { content: none; }
.vo-fo-add:hover:not(:disabled) { filter: brightness(1.12); }
.vo-fo-add:focus-visible, .vo-fo-tab:focus-visible, .vo-fo-mode:focus-visible { outline: 2px solid var(--vo-fo-red); outline-offset: 2px; }
.vo-fo-card.is-unavailable { opacity: .6; }
.vo-fo-empty { margin: 0; padding: 28px 0; color: var(--vo-cat-muted, #5b554d); font: 400 16px/1.5 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); }

/* Homepage bestsellers row */
.vo-fo-row-block { box-sizing: border-box; width: 100%; max-width: var(--vo-frame-max, 1180px); margin: 0 auto; padding: clamp(40px, 5vw, 72px) var(--vo-section-gutter, 32px) clamp(36px, 4.4vw, 64px); }
.vo-fo-row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; margin-bottom: clamp(18px, 2vw, 26px); }
.vo-fo-row-head .vo-fo-link { margin-bottom: 10px; }
@media (max-width: 860px) { .vo-fo-grid.is-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vo-fo-grid.is-row { grid-template-columns: minmax(0, 1fr); } }

/* Order page menu ------------------------------------------------------- */
.vo-fo-menu-block { display: grid; gap: 0; padding: clamp(26px, 3vw, 44px) 0 clamp(36px, 4vw, 64px); }
.vo-fo-page-head { margin: 0 0 clamp(22px, 2.4vw, 32px); text-align: center; }
.vo-fo-page-title { margin: 0; color: var(--vo-cat-ink, #1c1915); font-family: var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); font-weight: 700; font-optical-sizing: auto; letter-spacing: -.035em; font-size: clamp(38px, 5vw, 72px); line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
.vo-fo-page-sub { margin: 10px 0 0; color: var(--vo-cat-ink, #1c1915); font: 400 clamp(17px, 1.5vw, 22px)/1.4 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); }
.vo-fo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px clamp(14px, 1.8vw, 26px);
  margin: 0 0 clamp(16px, 1.8vw, 22px);
  padding: 12px 14px;
  border: 1px solid var(--vo-cat-divider, #e6ded1);
  border-radius: 8px;
  background: var(--vo-cat-card-bg, #fffdf9);
  font: 400 15px/1.3 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif);
  color: var(--vo-cat-ink, #1c1915);
}
.vo-fo-bar svg { width: 20px; height: 20px; flex: none; }
.vo-fo-modes { display: flex; gap: 6px; }
.vo-fo-mode {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 22px 0 18px;
  border: 1px solid var(--vo-cat-divider, #e6ded1);
  border-radius: 6px;
  background: transparent;
  color: var(--vo-cat-ink, #1c1915);
  font: 500 15px/1 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif);
  cursor: pointer;
}
.vo-fo-mode.is-active { border-color: var(--vo-fo-red); background: var(--vo-fo-red); color: var(--vo-cat-button-text, #ffffff); }
.vo-fo-bar-place, .vo-fo-bar-ready { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding-left: clamp(14px, 1.8vw, 26px); border-left: 1px solid var(--vo-cat-divider, #e6ded1); }
.vo-fo-bar-ready { color: #2f452e; font-weight: 500; }
.vo-fo-bar-link { color: var(--vo-fo-red); font: 500 14px/1 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); text-decoration: underline; text-underline-offset: 4px; }
.vo-fo-when { margin-left: auto; }
.vo-fo-when select {
  appearance: none;
  min-width: 128px;
  min-height: 42px;
  padding: 0 38px 0 16px;
  border: 1px solid var(--vo-cat-divider, #e6ded1);
  border-radius: 6px;
  background: var(--vo-cat-card-bg, #fffdf9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231c1915' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5l3-3'/%3E%3C/svg%3E") right 14px center / 12px no-repeat;
  color: var(--vo-cat-ink, #1c1915);
  font: 500 15px/1 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif);
  cursor: pointer;
}
.vo-fo-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin: 0 0 clamp(18px, 2vw, 28px);
  border-bottom: 1px solid var(--vo-cat-divider, #e6ded1);
}
.vo-fo-tabs { display: flex; gap: clamp(18px, 3vw, 44px); min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 0 2px; }
.vo-fo-tabs::-webkit-scrollbar { display: none; }
.vo-fo-tab {
  position: relative;
  flex: none;
  padding: 14px 4px 15px;
  color: var(--vo-cat-ink, #1c1915);
  font: 500 15.5px/1 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif);
  text-decoration: none;
  white-space: nowrap;
}
.vo-fo-tab::after { content: ""; position: absolute; left: -8px; right: -8px; bottom: -1px; height: 2px; background: transparent; transition: background .15s ease; }
.vo-fo-tab.is-active, .vo-fo-tab:hover { color: var(--vo-fo-red); }
.vo-fo-tab.is-active::after { background: var(--vo-fo-red); }
.vo-fo-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 310px;
  min-width: 200px;
  margin: 6px 0;
  border: 1px solid var(--vo-cat-divider, #e6ded1);
  border-radius: 6px;
  background: var(--vo-cat-card-bg, #fffdf9);
}
.vo-fo-search svg { position: absolute; left: 14px; width: 18px; height: 18px; color: color-mix(in srgb, var(--vo-cat-ink, #1c1915) 70%, transparent); pointer-events: none; }
.vo-fo-search input { flex: 1; min-width: 0; height: 40px; padding: 0 12px 0 42px; border: 0; background: transparent; color: var(--vo-cat-ink, #1c1915); font: 400 15px/1 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); outline: none; }
.vo-fo-search:focus-within { border-color: var(--vo-fo-red); }
.vo-fo-search-clear { margin-right: 6px; padding: 6px 8px; border: 0; background: none; color: var(--vo-fo-red); font: 600 13px/1 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); cursor: pointer; }
.vo-fo-notice { margin: 0 0 16px; }
.vo-fo-notice .vo-block-catalog-statusbar { margin: 0; }
.vo-fo-main { display: grid; gap: clamp(28px, 3vw, 44px); min-width: 0; }
.vo-fo-main #menu-grid-shell { display: grid; gap: clamp(28px, 3vw, 44px); }
.vo-fo-group, .vo-fo-side-group { scroll-margin-top: 110px; }
.vo-fo-group-head { margin: 0 0 14px; }
.vo-fo-group-title { margin: 0; color: var(--vo-cat-ink, #1c1915); font-family: var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); font-weight: 700; font-optical-sizing: auto; letter-spacing: -.035em; font-size: clamp(30px, 3vw, 42px); line-height: 1.02; letter-spacing: -.04em; }
.vo-fo-group-note { margin: 6px 0 0; color: var(--vo-cat-muted, #5b554d); font: 400 15px/1.4 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); }
.vo-fo-menu-block .vo-fo-grid { --vo-fo-cols: 2; }
.vo-fo-menu-block .vo-fo-card .vo-fo-media { aspect-ratio: 16 / 8.2; }
/* Something on the side: every side category's cards flow along one row
   (each category keeps its own box so search and the tabs still find it). */
.vo-fo-sides { display: grid; gap: 14px; margin-top: clamp(28px, 3vw, 44px); container-type: inline-size; }
.vo-fo-sides:not(:has(.vo-fo-side-group:not(.hidden))) { display: none; }
.vo-fo-side-group.hidden { display: none; }
.vo-fo-sides .vo-fo-group-title { font-size: clamp(26px, 2.6vw, 36px); }
.vo-fo-side-grid { --vo-fo-side-n: 4; display: flex; flex-wrap: wrap; gap: 14px; }
@container (max-width: 980px) { .vo-fo-side-grid { --vo-fo-side-n: 3; } }
@container (max-width: 720px) { .vo-fo-side-grid { --vo-fo-side-n: 2; } }
@container (max-width: 460px) { .vo-fo-side-grid { --vo-fo-side-n: 1; } }
.vo-fo-side-group { display: flex; flex-wrap: wrap; gap: 14px; max-width: 100%; }
.vo-fo-side {
  position: relative;
  box-sizing: border-box;
  width: calc((100cqw - (var(--vo-fo-side-n, 4) - 1) * 14px) / var(--vo-fo-side-n, 4));
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 8px 10px 10px 8px;
  border: var(--vo-card-border-override, var(--vo-cat-card-border, 1px solid #e6ded1));
  border-radius: var(--vo-cat-card-radius, 8px);
  background: var(--vo-card-bg-override, var(--vo-cat-card-bg, #fffdf9));
  color: var(--vo-card-text-override, var(--vo-cat-ink, #1c1915));
}
.vo-fo-side .vo-fo-media { width: 76px; height: 76px; aspect-ratio: 1; border-radius: 6px; }
.vo-fo-side .vo-fo-body { gap: 3px; padding: 4px 30px 4px 0; }
.vo-fo-side .vo-fo-name { font-size: 15px; }
.vo-fo-side .vo-fo-price { font-size: 13.5px; }
.vo-fo-side .vo-fo-desc { font-size: 12.5px; line-height: 1.4; -webkit-line-clamp: 2; }
.vo-fo-add.is-round {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  border-radius: 999px;
  font-size: 0;
  line-height: 0;
}
.vo-fo-add.is-round::before { content: "+"; font: 400 22px/1 var(--brand-body-font, Inter, system-ui, sans-serif); transform: translateY(-1px); }
.vo-fo-side.is-unavailable { opacity: .6; }
@media (max-width: 760px) {
  .vo-fo-bar { padding: 12px; }
  .vo-fo-modes { flex: 1 1 100%; }
  .vo-fo-mode { flex: 1; justify-content: center; }
  .vo-fo-bar-place, .vo-fo-bar-ready { flex: 1 1 100%; padding-left: 2px; border-left: 0; }
  .vo-fo-when { flex: 1 1 100%; margin-left: 0; }
  .vo-fo-when select { width: 100%; }
  .vo-fo-tools { flex-direction: column-reverse; align-items: stretch; border-bottom: 0; }
  .vo-fo-tabs { border-bottom: 1px solid var(--vo-cat-divider, #e6ded1); }
  .vo-fo-search { flex-basis: auto; }
}
@media (max-width: 600px) {
  .vo-fo-menu-block .vo-fo-grid { --vo-fo-cols: 1; }
}

/* /order: title, bar and tabs across the page, the menu beside the order
   card, and the sides row across the page again. The catalog's own box
   steps aside (display: contents) so its parts sit on the page's grid; the
   order card stays sticky within the menu's row. */
@media (min-width: 1025px) {
  :is(.vo-order-catalog, .vo-builder-page[data-page-slug="order-online"]) > .vo-builder-blocks:has(> .vo-block-slot > .vo-fo-menu-block) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 344px);
    grid-auto-flow: row dense;
    align-items: start;
    column-gap: clamp(22px, 2.4vw, 34px);
    row-gap: 0;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
  }
  :is(.vo-order-catalog, .vo-builder-page[data-page-slug="order-online"]) > .vo-builder-blocks:has(> .vo-block-slot > .vo-fo-menu-block) > .vo-block-slot { grid-column: 1 / -1; }
  :is(.vo-order-catalog, .vo-builder-page[data-page-slug="order-online"]) > .vo-builder-blocks:has(> .vo-block-slot > .vo-fo-menu-block) > .vo-block-slot:has(> .vo-fo-menu-block),
  :is(.vo-order-catalog, .vo-builder-page[data-page-slug="order-online"]) > .vo-builder-blocks:has(> .vo-block-slot > .vo-fo-menu-block) > .vo-block-slot > .vo-fo-menu-block { display: contents; }
  :is(.vo-order-catalog, .vo-builder-page[data-page-slug="order-online"]) > .vo-builder-blocks:has(> .vo-block-slot > .vo-fo-menu-block) > .vo-block-slot > .vo-fo-menu-block > * { grid-column: 1 / -1; }
  :is(.vo-order-catalog, .vo-builder-page[data-page-slug="order-online"]) > .vo-builder-blocks:has(> .vo-block-slot > .vo-fo-menu-block) > .vo-block-slot > .vo-fo-menu-block > .vo-fo-page-head { padding-top: clamp(26px, 3vw, 44px); }
  :is(.vo-order-catalog, .vo-builder-page[data-page-slug="order-online"]) > .vo-builder-blocks:has(> .vo-block-slot > .vo-fo-menu-block):has(> .vo-block-slot > .vo-block-cart) > .vo-block-slot > .vo-fo-menu-block > .vo-fo-main { grid-column: 1; }
  :is(.vo-order-catalog, .vo-builder-page[data-page-slug="order-online"]) > .vo-builder-blocks:has(> .vo-block-slot > .vo-fo-menu-block) > .vo-block-slot:has(> .vo-block-cart) { grid-column: 2; align-self: stretch; }
  :is(.vo-order-catalog, .vo-builder-page[data-page-slug="order-online"]) > .vo-builder-blocks:has(> .vo-block-slot > .vo-fo-menu-block) > .vo-block-slot > .vo-fo-menu-block > .vo-fo-sides { padding-bottom: clamp(36px, 4vw, 64px); }
}

/* Story: forno (half photo with handwritten words, copy on stone) --------- */
.vo-block.vo-block-story-split.vo-block-story-forno {
  --vo-fo-red: var(--brand-primary, #a11218);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: 0;
  min-height: clamp(380px, 29vw, 540px);
  margin: 0;
  padding: 0;
  max-width: none;
  border-radius: 0;
  background: #f4eee5;
  color: #1c1915;
  overflow: hidden;
}
.vo-builder-page .vo-block-slot-full > .vo-block.vo-block-story-forno { width: var(--vo-bleed-w, 100vw); max-width: var(--vo-bleed-w, 100vw); margin-left: calc(50% - var(--vo-bleed-w, 100vw) / 2); margin-right: calc(50% - var(--vo-bleed-w, 100vw) / 2); padding: 0; margin-top: 0; margin-bottom: 0; }
.vo-builder-page:has(> .vo-builder-blocks > .vo-block-slot:last-child > .vo-block-story-forno) { padding-bottom: 0; margin-bottom: 0; }
.vo-story-fo-photo { position: relative; min-height: 100%; background: #2a1d14; }
.vo-story-fo-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }
.vo-block-story-forno-right .vo-story-fo-photo { order: 2; }
.vo-story-fo-script {
  position: absolute;
  z-index: 1;
  left: clamp(20px, 5vw, 64px);
  bottom: clamp(36px, 8%, 72px);
  display: grid;
  margin: 0;
  color: #fff4e0;
  font: 600 clamp(28px, 3.1vw, 48px)/.92 "Caveat", "Segoe Script", "Bradley Hand", cursive;
  transform: rotate(-11deg);
  transform-origin: left bottom;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.vo-story-fo-script span:nth-child(2) { margin-left: .3em; }
.vo-story-fo-script span:nth-child(3) { margin-left: .55em; }
.vo-story-fo-script span:nth-child(4) { margin-left: .8em; }
.vo-story-fo-script span:nth-child(5) { margin-left: 1.05em; }
.vo-story-fo-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(44px, 5vw, 84px) clamp(28px, 5.4vw, 92px);
}
.vo-story-fo-sprig { position: absolute; top: clamp(14px, 2vw, 28px); right: clamp(10px, 2vw, 30px); width: clamp(84px, 8.6vw, 128px); height: auto; color: #98906f; transform: rotate(6deg); pointer-events: none; }
.vo-block-story-forno .vo-block-story-eyebrow { margin: 0 0 clamp(12px, 1.4vw, 18px); color: color-mix(in srgb, #1c1915 82%, transparent); font: 600 10.5px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .2em; text-transform: uppercase; }
.vo-block-story-forno h2 { margin: 0; max-width: 9em; color: #1c1915; font-family: var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); font-weight: 700; font-optical-sizing: auto; letter-spacing: -.035em; font-size: clamp(38px, 4.4vw, 68px); line-height: .98; letter-spacing: -.045em; }
.vo-story-fo-accent { display: block; }
.vo-story-fo-body { max-width: 30em; margin: clamp(16px, 1.8vw, 24px) 0 0; color: #5b554d; font: 400 clamp(16px, 1.25vw, 18.5px)/1.5 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); }
.vo-story-fo-body strong { color: #1c1915; font-weight: 500; }
.vo-block-story-forno .vo-block-story-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(18px, 2vw, 26px);
  color: var(--vo-fo-red);
  font: 600 15px/1.3 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.vo-block-story-forno .vo-block-story-link .vo-cta-arrow { text-decoration: none; display: inline-block; }
.vo-block-story-forno.is-text-only { grid-template-columns: 1fr; }
@media (max-width: 860px) {
  .vo-block.vo-block-story-split.vo-block-story-forno { grid-template-columns: 1fr; min-height: 0; }
  .vo-story-fo-photo { min-height: 0; aspect-ratio: 4 / 3; order: 0 !important; }
  .vo-story-fo-copy { padding: 44px var(--vo-section-gutter, 32px) 52px; }
  .vo-story-fo-sprig { width: 78px; }
}

/* Cart panel: forno (the order card + you might also like) --------------- */
.vo-block.vo-block-cart.vo-block-cart-variant-forno {
  --vo-cart-accent: var(--vo-cat-accent, var(--brand-primary, #a11218));
  --vo-cart-card: var(--vo-cat-card-bg, #fffdf9);
  --vo-cart-line: var(--vo-cat-divider, #e6ded1);
  --vo-cart-ink: var(--vo-cat-ink, #1c1915);
  --vo-cart-muted: var(--vo-cat-muted, #5b554d);
  display: grid;
  gap: 16px;
  align-content: start;
  margin: 0;
  color: var(--vo-cart-ink);
  font-family: var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif);
}
.vo-block-cart-variant-forno.is-sticky { top: 92px; }
.vo-block-cart-variant-forno .vo-cart-panel {
  padding: clamp(16px, 1.6vw, 22px);
  border: 1px solid var(--vo-cart-line);
  border-radius: 10px;
  background: var(--vo-cart-card);
  box-shadow: 0 16px 34px -30px rgba(60, 30, 10, .45);
}
.vo-block-cart-variant-forno .vo-cart-head { padding: 0 0 14px; border-bottom: 1px solid var(--vo-cart-line); background: none; color: var(--vo-cart-ink); }
.vo-block-cart-variant-forno .vo-cart-head h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); font-weight: 700; font-optical-sizing: auto; letter-spacing: -.035em; font-size: clamp(26px, 2.2vw, 32px); line-height: 1; }
.vo-block-cart-variant-forno [data-vo-cart-title-count] {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #e6e1d6;
  color: var(--vo-cart-ink);
  font: 600 15px/1 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif);
  letter-spacing: 0;
}
.vo-cart-pickup { display: grid; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--vo-cart-line); }
.vo-cart-pickup[hidden] { display: none; }
.vo-cart-pickup-row { display: flex; align-items: center; gap: 12px; margin: 0; font: 400 14.5px/1.3 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); }
.vo-cart-pickup-row svg { flex: none; }
.vo-cart-pickup-row small { display: block; color: var(--vo-cart-muted); font-size: 12.5px; }
.vo-cart-pickup-row.is-ready { color: #2f452e; font-weight: 500; }
.vo-cart-when { margin-left: auto; color: var(--vo-cart-ink); font-size: 13px; font-weight: 500; }
.vo-block-cart-variant-forno .vo-cart-lines { padding: 4px 0; }
.vo-block-cart-variant-forno .vo-cart-line {
  grid-template-columns: 70px minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--vo-cart-line);
}
.vo-block-cart-variant-forno .vo-cart-line:last-child { border-bottom: 0; }
.vo-block-cart-variant-forno .vo-cart-line-main,
.vo-block-cart-variant-forno .vo-cart-line-end { display: contents; }
.vo-block-cart-variant-forno .vo-cart-thumb { grid-row: 1 / span 3; grid-column: 1; align-self: start; width: 70px; height: 70px; border-radius: 6px; overflow: hidden; }
.vo-block-cart-variant-forno .vo-cart-line-name { grid-column: 2; grid-row: 1; font: 700 16px/1.2 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); letter-spacing: -.01em; }
.vo-block-cart-variant-forno .vo-cart-line-each { display: none; }
.vo-block-cart-variant-forno .vo-cart-line-meta { grid-column: 2 / -1; grid-row: 2; color: var(--vo-cart-muted); font: 400 13.5px/1.35 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); }
.vo-block-cart-variant-forno .vo-cart-qty { grid-column: 2; grid-row: 3; margin-top: 6px; border-radius: 6px; }
.vo-block-cart-variant-forno .vo-cart-qty button { width: 32px; height: 32px; font-size: 17px; }
.vo-block-cart-variant-forno .vo-cart-qty span { min-width: 26px; font: 600 14px/1 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); }
.vo-block-cart-variant-forno .vo-cart-line-end > strong { grid-column: 3; grid-row: 1; justify-self: end; font: 600 15px/1.2 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); }
.vo-block-cart-variant-forno .vo-cart-line-end > span:empty { display: none; }
.vo-block-cart-variant-forno .vo-cart-remove {
  grid-column: 3;
  grid-row: 3;
  justify-self: end;
  width: auto;
  height: auto;
  margin-top: 6px;
  padding: 4px 0;
  color: var(--vo-cart-accent);
  font-size: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vo-block-cart-variant-forno .vo-cart-remove::after { content: "Remove"; font: 500 13px/1 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); }
.vo-cart-note-field { display: grid; gap: 8px; padding: 14px 0 16px; border-top: 1px solid var(--vo-cart-line); font: 500 14.5px/1.2 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); }
.vo-cart-note-field[hidden] { display: none; }
.vo-cart-note-field textarea {
  width: 100%;
  min-height: 64px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--vo-cart-line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--vo-cart-ink);
  font: 400 14px/1.4 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif);
  resize: vertical;
}
.vo-cart-note-field textarea:focus { outline: 2px solid color-mix(in srgb, var(--vo-cart-accent) 40%, transparent); border-color: var(--vo-cart-accent); }
.vo-block-cart-variant-forno .vo-cart-foot { gap: 6px; padding: 14px 0 0; border-top: 1px solid var(--vo-cart-line); }
.vo-block-cart-variant-forno .vo-cart-subtotal { font: 400 14.5px/1.5 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); color: var(--vo-cart-ink); }
.vo-block-cart-variant-forno .vo-cart-subtotal strong { font-weight: 400; }
.vo-block-cart-variant-forno .vo-cart-total { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--vo-cart-line); font-family: var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); font-weight: 700; font-optical-sizing: auto; letter-spacing: -.035em; font-size: 24px; line-height: 1; }
.vo-block-cart-variant-forno .vo-cart-total strong { font-weight: 700; font-size: 26px; }
.vo-block-cart-variant-forno .vo-cart-checkout {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 6px; background: var(--vo-cat-accent, var(--brand-primary, #a11218)); color: var(--vo-cat-button-text, var(--brand-button-text, #ffffff)); font: 600 15.5px/1 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); letter-spacing: 0; text-decoration: none; cursor: pointer; transition: filter .15s ease, transform .15s ease;
  min-height: 50px;
  margin-top: 12px;
  background: var(--vo-cart-accent);
  color: var(--vo-cart-accent-ink, #ffffff);
  font-size: 17px;
}
.vo-block-cart-variant-forno .vo-cart-checkout-arrow { display: none; }
.vo-block-cart-variant-forno .vo-cart-footnote { margin: 8px 0 0; color: var(--vo-cart-muted); font: 400 13px/1.4 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); text-align: center; }
.vo-block-cart-variant-forno .vo-cart-empty { padding: 18px 0 8px; }
.vo-block-cart-variant-forno .vo-cart-empty-title { font-family: var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); font-weight: 700; font-optical-sizing: auto; letter-spacing: -.035em; font-size: 19px; letter-spacing: -.02em; }
/* You might also like */
.vo-block-cart-variant-forno .vo-cart-meal {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  grid-template-areas: "title title title" "img name price" "img text text" "img . add";
  gap: 4px 14px;
  align-items: start;
  padding: 16px;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, #1c1915 4%, #f4eee5);
  color: var(--vo-cart-ink);
}
.vo-block-cart-variant-forno .vo-cart-meal-copy { display: contents; }
.vo-block-cart-variant-forno .vo-cart-meal-title { grid-area: title; max-width: none; margin: 0 0 10px; font-family: var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); font-weight: 700; font-optical-sizing: auto; letter-spacing: -.035em; font-size: 19px; letter-spacing: -.02em; text-transform: none; line-height: 1.2; }
.vo-block-cart-variant-forno .vo-cart-meal-title::after { content: none; }
.vo-block-cart-variant-forno .vo-cart-meal-img { grid-area: img; width: 92px; height: 82px; max-height: none; border-radius: 6px; object-fit: cover; align-self: start; }
.vo-block-cart-variant-forno .vo-cart-meal-name { grid-area: name; margin: 0; font: 700 15.5px/1.2 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); }
.vo-block-cart-variant-forno .vo-cart-meal-price { grid-area: price; margin: 0; color: var(--vo-cart-ink); font: 600 14px/1.2 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); }
.vo-block-cart-variant-forno .vo-cart-meal-text { grid-area: text; margin: 0; color: var(--vo-cart-muted); font: 400 12.5px/1.4 var(--brand-heading-font, "Fraunces", Georgia, "Times New Roman", serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vo-block-cart-variant-forno .vo-cart-meal-add {
  grid-area: add;
  justify-self: end;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--vo-cart-accent);
  color: var(--vo-cart-accent-ink, #ffffff);
  font-size: 0;
  cursor: pointer;
}
.vo-block-cart-variant-forno .vo-cart-meal-add > span { display: none; }
.vo-block-cart-variant-forno .vo-cart-meal-add::before { content: "+"; font: 400 22px/1 var(--brand-body-font, Inter, system-ui, sans-serif); transform: translateY(-1px); }
.vo-block-cart-variant-forno .vo-cart-meal-add:disabled { opacity: .5; cursor: not-allowed; }
.vo-block-cart-variant-forno .vo-cart-meal:not(.has-image) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "name price" "text text" ". add"; }

/* Title bar: trattoria (see storefront-chrome-render.ts) is styled there. */


/* The seal ------------------------------------------------------------- */
.vo-jd-seal { display: inline-block; flex: none; width: 1em; height: 1em; color: #b73328; vertical-align: -.08em; }

/* Hero: jade ------------------------------------------------------------ */
.vo-block-hero.vo-block-hero-variant-jade {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: calc(clamp(48px, 5vw, 84px) + var(--vo-hero-top-offset, 0px)) 0 clamp(48px, 5vw, 84px);
  background: var(--brand-primary, #06291d);
  background-image: linear-gradient(120deg, color-mix(in srgb, #000 22%, transparent), transparent 70%);
  color: #f8f5ec;
  text-align: left;
}
/* The photograph is shot with dark jade on its left: it fills the band so
   the words sit there; a soft shade keeps them readable on any crop. */
.vo-block-hero.vo-block-hero-variant-jade.has-image { background: #06291d; }
.vo-block-hero-variant-jade.has-image::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--vo-hero-image) 64% center / cover no-repeat;
  pointer-events: none;
}
.vo-block-hero-variant-jade.has-image::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 24, 16, .74) 0, rgba(3, 24, 16, .42) 36%, rgba(3, 24, 16, 0) 60%);
  pointer-events: none;
}
.vo-builder-page:has(> .vo-builder-blocks > .vo-block-slot:first-child > .vo-block-hero-variant-jade) { padding-top: 0; }
.vo-block-hero-variant-jade.vo-block-hero-h-lg { min-height: clamp(420px, 29vw, 560px); }
.vo-block-hero-variant-jade.vo-block-hero-h-md { min-height: clamp(320px, 22vw, 440px); }
.vo-block-hero.vo-block-hero-variant-jade.vo-block-hero-h-sm { min-height: clamp(200px, 13.5vw, 270px); padding-top: calc(clamp(32px, 3.4vw, 52px) + var(--vo-hero-top-offset, 0px)); padding-bottom: clamp(32px, 3.4vw, 52px); }
.vo-block-hero-variant-jade .vo-block-hero-overlay,
.vo-block-hero-variant-jade .vo-block-hero-stamp,
.vo-block-hero-variant-jade .vo-block-hero-script,
.vo-block-hero-variant-jade .vo-block-hero-sticker { display: none; }
.vo-builder-page .vo-block-slot-full > .vo-block-hero-variant-jade > .vo-block-hero-inner,
.vo-block-hero-variant-jade > .vo-block-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--vo-frame-max, 1180px);
  margin: 0 auto;
  padding: 0 var(--vo-section-gutter, 32px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.vo-block-hero-variant-jade .vo-block-hero-eyebrow {
  display: block;
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  padding: 0;
  border: 0;
  background: none;
  color: color-mix(in srgb, #f8f5ec 88%, transparent);
  font: 500 11.5px/1.45 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .24em; text-transform: uppercase;
}
.vo-block-hero-variant-jade .vo-block-hero-title {
  margin: 0;
  max-width: 11em;
  color: #f8f5ec;
  font-family: var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); font-weight: 400; letter-spacing: -.012em;
  font-size: clamp(46px, 6.2vw, 96px);
  line-height: .98;
  letter-spacing: -.025em;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .25);
}
/* The second line starts on its own line but stays inline, so the seal follows its last word. */
.vo-block-hero-variant-jade .vo-block-hero-title-accent { display: inline; color: #f8f5ec; }
.vo-block-hero-variant-jade .vo-block-hero-title-accent::before { content: "\A"; white-space: pre; }
.vo-block-hero-variant-jade .vo-block-hero-seal { width: .36em; height: .36em; margin-left: .14em; vertical-align: .05em; color: #e05a47; }
.vo-block-hero-variant-jade .vo-block-hero-sub {
  max-width: 34em;
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  color: #f8f5ec;
  font: 400 clamp(17px, 1.4vw, 21px)/1.45 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif);
  letter-spacing: 0;
  opacity: .94;
  text-shadow: none;
}
.vo-block-hero-variant-jade .vo-block-hero-actions { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: clamp(22px, 2.4vw, 32px); align-items: center; }
.vo-block-hero-variant-jade > .vo-block-hero-inner > .vo-block-hero-cta { margin-top: clamp(22px, 2.4vw, 32px); }
.vo-block-hero.vo-block-hero-variant-jade .vo-block-hero-cta.vo-block-hero-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 190px;
  padding: 0 30px;
  border: 0;
  border-radius: 1px;
  background: #f8f5ec !important;
  color: var(--brand-primary, #073d2a) !important;
  box-shadow: none;
  font: 600 12.5px/1.45 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none;
}
.vo-block-hero-variant-jade .vo-block-hero-cta-primary .vo-cta-arrow { display: none; }
.vo-block-hero.vo-block-hero-variant-jade :is(.vo-block-hero-cta-outline, .vo-block-hero-cta-ghost) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
  padding: 0 0 8px;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, #f8f5ec 80%, transparent) !important;
  border-radius: 0;
  background: transparent !important;
  color: #f8f5ec !important;
  box-shadow: none;
  font: 500 12px/1.45 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none;
}
.vo-block-hero-variant-jade :is(.vo-block-hero-cta-outline, .vo-block-hero-cta-ghost) .vo-cta-arrow { margin-left: 8px; letter-spacing: 0; }
.vo-block-hero-variant-jade .vo-block-hero-cta:hover { transform: translateY(-1px); }
.vo-block-hero-variant-jade .vo-block-hero-cta-primary:hover { filter: brightness(.97); }
.vo-block-hero-variant-jade :is(.vo-block-hero-cta-outline, .vo-block-hero-cta-ghost):hover { opacity: .8; }
/* The slim banner (order page and site pages). */
.vo-block-hero-variant-jade.vo-block-hero-h-sm .vo-block-hero-title { font-size: clamp(36px, 4.1vw, 64px); max-width: 14em; }
.vo-block-hero-variant-jade.vo-block-hero-h-sm .vo-block-hero-sub { max-width: 30em; margin-top: 10px; font-size: clamp(16px, 1.55vw, 24px); }
/* The banner photo keeps its dumplings at the right edge however tall the words make it. */
.vo-block-hero-variant-jade.vo-block-hero-h-sm.has-image::after { background-position: right center; }
.vo-block-hero-variant-jade.vo-block-hero-h-sm.has-image::before { background: linear-gradient(90deg, rgba(3, 24, 16, .78) 0, rgba(3, 24, 16, .5) 42%, rgba(3, 24, 16, 0) 66%); }
@media (max-width: 760px) {
  .vo-block-hero-variant-jade.has-image::after { background-position: 72% center; }
  .vo-block-hero-variant-jade.has-image::before,
  .vo-block-hero-variant-jade.vo-block-hero-h-sm.has-image::before { background: linear-gradient(180deg, rgba(3, 24, 16, .55), rgba(3, 24, 16, .8)); }
  .vo-block-hero-variant-jade.vo-block-hero-h-lg { min-height: 0; }
  .vo-block-hero-variant-jade .vo-block-hero-actions { width: 100%; }
  .vo-block-hero.vo-block-hero-variant-jade .vo-block-hero-cta.vo-block-hero-cta-primary { flex: 1 1 100%; }
}

/* Promises: jade (icons, serif titles and spaced lines on stone) --------- */
.vo-block.vo-block-features.vo-block-features-style-jade,
.vo-builder-page .vo-block-slot-full > .vo-block.vo-block-features.vo-block-features-style-jade {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: clamp(16px, 1.6vw, 22px);
  padding-bottom: clamp(16px, 1.6vw, 22px);
  color: #18251d;
}
.vo-block-features-style-jade[data-vo-tint]::before { border-top: 0; border-bottom: 0; }
.vo-block-features-style-jade :is(.vo-block-features-eyebrow, .vo-block-features-heading, .vo-block-features-intro) { text-align: center; }
.vo-block-features-style-jade .vo-block-features-eyebrow { color: #69675d; font: 500 11px/1.45 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .24em; text-transform: uppercase; }
.vo-block-features-style-jade .vo-block-features-heading { font-family: var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); font-weight: 400; letter-spacing: -.012em; font-size: clamp(30px, 3.2vw, 46px); margin: 6px 0 22px; color: #18251d; }
.vo-block-features-style-jade .vo-block-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 0;
  max-width: 1240px;
  margin: 0 auto;
}
.vo-block-features-style-jade .vo-block-features-cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(16px, 2.4vw, 30px);
  row-gap: 2px;
  align-items: center;
  align-content: center;
  justify-content: center;
  padding: 4px clamp(16px, 3vw, 44px);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}
.vo-block-features-style-jade .vo-block-features-cell + .vo-block-features-cell { border-left: 1px solid color-mix(in srgb, #18251d 14%, transparent); }
.vo-block-features-style-jade .vo-block-features-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px; margin: 0; border: 0; background: none; color: #18251d; }
.vo-block-features-style-jade .vo-block-features-icon svg { width: 30px; height: 30px; stroke-width: 1.2; }
.vo-block-features-style-jade .vo-block-features-title { align-self: end; margin: 0; color: #18251d; font-family: var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); font-weight: 400; letter-spacing: -.012em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.2; }
.vo-block-features-style-jade .vo-block-features-desc { align-self: start; margin: 0; color: #69675d; font: 500 10px/1.45 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .2em; text-transform: uppercase; }
@media (max-width: 760px) {
  .vo-block-features-style-jade .vo-block-features-cell { justify-content: start; padding: 14px 4px; }
  .vo-block-features-style-jade .vo-block-features-cell + .vo-block-features-cell { border-left: 0; border-top: 1px solid color-mix(in srgb, #18251d 12%, transparent); }
}

/* Catalog: jade (shared) ------------------------------------------------ */
.vo-jd-block {
  --vo-jd-jade: var(--vo-cat-accent, var(--brand-primary, #073d2a));
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--vo-cat-ink, #18251d);
  font-family: var(--brand-body-font, Inter, system-ui, sans-serif);
}
.vo-jd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vo-jd-eyebrow { margin: 0 0 10px; color: var(--vo-cat-muted, #69675d); font: 500 11px/1.45 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .24em; text-transform: uppercase; }
.vo-jd-title { margin: 0; color: var(--vo-cat-ink, #18251d); font-family: var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); font-weight: 400; letter-spacing: -.012em; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.02; letter-spacing: -.02em; }
.vo-jd-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 7px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--vo-cat-ink, #18251d);
  font: 600 11.5px/1.45 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.vo-jd-link .vo-jd-arrow { letter-spacing: 0; font-size: 15px; line-height: 1; }
.vo-jd-link:hover { color: var(--vo-jd-jade); }
.vo-jd-empty { margin: 0; padding: 28px 0; color: var(--vo-cat-muted, #69675d); font: 400 17px/1.5 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); }

/* Homepage favourites row */
.vo-jd-row-block { box-sizing: border-box; width: 100%; max-width: var(--vo-frame-max, 1180px); margin: 0 auto; padding: clamp(32px, 4vw, 56px) var(--vo-section-gutter, 32px) clamp(36px, 4.4vw, 60px); }
.vo-jd-row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; margin-bottom: clamp(16px, 1.8vw, 24px); }
.vo-jd-row-head .vo-jd-link { margin-bottom: 8px; }
.vo-jd-favs { display: grid; grid-template-columns: repeat(var(--vo-jd-cols, 3), minmax(0, 1fr)); gap: clamp(18px, 1.8vw, 26px); }
.vo-jd-fav { display: grid; gap: 4px; min-width: 0; color: var(--vo-cat-ink, #18251d); text-decoration: none; }
.vo-jd-fav-media { position: relative; display: flex; aspect-ratio: 2 / 1; overflow: hidden; background: #e8e3d6; }
.vo-jd-fav-media img { flex: 1; min-width: 0; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.vo-jd-fav:hover .vo-jd-fav-media img { transform: scale(1.03); }
.vo-jd-fav-empty { flex: 1; display: grid; place-items: center; color: color-mix(in srgb, var(--vo-cat-ink, #18251d) 30%, transparent); font: 400 40px/1 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); }
/* The ivory strip beside the photo: the dish name in Chinese, then the seal. */
.vo-jd-strip {
  flex: 0 0 clamp(36px, 11%, 50px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0;
  background: #ece6d8;
  color: #18251d;
}
.vo-jd-glyph { writing-mode: vertical-rl; text-orientation: upright; font: 500 clamp(15px, 1.25vw, 19px)/1.25 "Songti TC", "Songti SC", "STSong", "Noto Serif CJK TC", "Noto Serif TC", "Source Han Serif TC", "Noto Serif CJK SC", "PMingLiU", "SimSun", serif; letter-spacing: .14em; }
.vo-jd-strip .vo-jd-seal { width: clamp(17px, 1.4vw, 22px); height: clamp(17px, 1.4vw, 22px); }
.vo-jd-fav-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 10px; }
.vo-jd-fav-name { min-width: 0; font-family: var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); font-weight: 400; letter-spacing: -.012em; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.15; }
.vo-jd-fav-price { flex: none; font-family: var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); font-weight: 400; letter-spacing: -.012em; font-size: clamp(18px, 1.5vw, 21px); }
.vo-jd-fav-desc { color: var(--vo-cat-muted, #69675d); font: 500 10px/1.45 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .2em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) { .vo-jd-favs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vo-jd-favs { grid-template-columns: minmax(0, 1fr); } }

/* Order page menu ------------------------------------------------------- */
.vo-jd-menu-block { display: grid; gap: 0; padding: clamp(22px, 2.4vw, 32px) 0 clamp(36px, 4vw, 64px); }
.vo-jd-page-head { margin: 0 0 clamp(18px, 2vw, 26px); }
.vo-jd-page-title { margin: 0; color: var(--vo-cat-ink, #18251d); font-family: var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); font-weight: 400; letter-spacing: -.012em; font-size: clamp(36px, 4.4vw, 60px); line-height: 1; }
.vo-jd-page-sub { margin: 8px 0 0; color: var(--vo-cat-muted, #69675d); font: 400 clamp(16px, 1.4vw, 20px)/1.4 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); }
.vo-jd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(16px, 2vw, 28px); margin: 0 0 clamp(16px, 1.8vw, 22px); color: var(--vo-cat-ink, #18251d); font-family: var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); }
.vo-jd-bar svg { width: 21px; height: 21px; flex: none; }
.vo-jd-modes { display: flex; padding: 0; border: 1px solid var(--vo-cat-divider, #dedbd1); border-radius: 4px; background: var(--vo-cat-card-bg, #fffdf8); overflow: hidden; }
.vo-jd-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 128px;
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  background: transparent;
  color: var(--vo-cat-ink, #18251d);
  font: 400 17px/1 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif);
  cursor: pointer;
}
.vo-jd-mode.is-active { background: var(--vo-jd-jade); color: var(--vo-cat-button-text, #f8f5ec); }
.vo-jd-ready { display: grid; gap: 4px; padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--vo-cat-divider, #dedbd1); font: 400 16px/1.2 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); }
.vo-jd-ready strong { font-weight: 400; }
.vo-jd-ready.is-sample strong { opacity: .85; }
.vo-jd-when select {
  appearance: none;
  padding: 0 18px 0 0;
  border: 0;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2318251d' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5l3-3'/%3E%3C/svg%3E") right center / 11px no-repeat;
  color: var(--vo-cat-muted, #69675d);
  font: 400 14px/1.2 var(--brand-body-font, Inter, system-ui, sans-serif);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.vo-jd-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 280px;
  min-width: 220px;
  border: 1px solid var(--vo-cat-divider, #dedbd1);
  border-radius: 4px;
  background: var(--vo-cat-card-bg, #fffdf8);
}
.vo-jd-search svg { position: absolute; left: 16px; width: 20px; height: 20px; color: var(--vo-cat-ink, #18251d); pointer-events: none; }
.vo-jd-search input { flex: 1; min-width: 0; height: 50px; padding: 0 12px 0 50px; border: 0; background: transparent; color: var(--vo-cat-ink, #18251d); font: 400 16px/1 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); outline: none; }
.vo-jd-search input::placeholder { color: var(--vo-cat-muted, #69675d); }
.vo-jd-search:focus-within { border-color: var(--vo-jd-jade); }
.vo-jd-search-clear { margin-right: 8px; padding: 6px 8px; border: 0; background: none; color: var(--vo-jd-jade); font: 600 11px/1.45 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.vo-jd-bar.is-search-only .vo-jd-search { flex-basis: 100%; }
.vo-jd-tabs { display: flex; gap: 10px; margin: 0 0 clamp(18px, 2vw, 26px); overflow-x: auto; scrollbar-width: none; padding: 2px; }
.vo-jd-tabs::-webkit-scrollbar { display: none; }
.vo-jd-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 28px;
  border: 1px solid var(--vo-cat-divider, #dedbd1);
  border-radius: 999px;
  background: transparent;
  color: var(--vo-cat-ink, #18251d);
  font: 400 15.5px/1 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.vo-jd-tab:hover { border-color: var(--vo-jd-jade); }
.vo-jd-tab.is-active { border-color: var(--vo-jd-jade); background: var(--vo-jd-jade); color: var(--vo-cat-button-text, #f8f5ec); }
.vo-jd-add:focus-visible, .vo-jd-tab:focus-visible, .vo-jd-mode:focus-visible { outline: 2px solid var(--vo-jd-jade); outline-offset: 2px; }
.vo-jd-notice { margin: 0 0 16px; }
.vo-jd-notice .vo-block-catalog-statusbar { margin: 0; }
.vo-jd-main, .vo-jd-main #menu-grid-shell { display: grid; gap: clamp(28px, 3vw, 44px); min-width: 0; }
.vo-jd-group { scroll-margin-top: 110px; container-type: inline-size; }
.vo-jd-group[hidden] { display: none; }
.vo-jd-group-head { margin: 0 0 16px; }
.vo-jd-group-title { margin: 0; color: var(--vo-cat-ink, #18251d); font-family: var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); font-weight: 400; letter-spacing: -.012em; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.05; }
.vo-jd-group-note { margin: 8px 0 0; color: var(--vo-cat-muted, #69675d); font: 500 11px/1.45 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .24em; text-transform: uppercase; }
.vo-jd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); }
.vo-jd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: var(--vo-card-border-override, var(--vo-cat-card-border, 1px solid #dedbd1));
  border-radius: var(--vo-cat-card-radius, 4px);
  background: var(--vo-card-bg-override, var(--vo-cat-card-bg, #fffdf8));
  box-shadow: var(--vo-cat-card-shadow, none);
  color: var(--vo-card-text-override, var(--vo-cat-ink, #18251d));
  transition: box-shadow .2s ease;
}
.vo-jd-card:hover { box-shadow: var(--vo-cat-card-shadow-hover, none); }
.vo-jd-media { position: relative; display: block; aspect-ratio: 2 / 1.04; overflow: hidden; background: #e8e3d6; }
.vo-jd-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.vo-jd-card:hover .vo-jd-media img { transform: scale(1.03); }
.vo-jd-media-empty { display: grid; place-items: center; width: 100%; height: 100%; color: color-mix(in srgb, var(--vo-cat-ink, #18251d) 30%, transparent); font: 400 36px/1 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); }
.vo-jd-badge { position: absolute; top: 12px; left: 12px; padding: 5px 9px; border-radius: 2px; background: #b73328; color: #ffffff; font: 400 14px/1 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); }
.vo-jd-badge.is-green { background: var(--vo-jd-jade); }
.vo-jd-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 16px 14px; }
.vo-jd-name { font-family: var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); font-weight: 400; letter-spacing: -.012em; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.15; font-family: var(--vo-card-font-override, var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif)); }
.vo-jd-desc { color: var(--vo-cat-muted, #69675d); font: 500 9.5px/1.45 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .2em; text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 48px; }
.vo-jd-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; min-height: 40px; }
.vo-jd-price { font-family: var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); font-weight: 400; letter-spacing: -.012em; font-size: 17.5px; }
.vo-jd-sold { color: var(--vo-cat-muted, #69675d); font: 500 9.5px/1.45 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; }
.vo-jd-add {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--vo-jd-jade);
  color: var(--vo-cat-button-text, #f8f5ec);
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.vo-jd-add::before { content: "+"; font: 300 26px/1 var(--brand-body-font, Inter, system-ui, sans-serif); transform: translateY(-1px); }
.vo-jd-add:hover:not(:disabled) { filter: brightness(1.25); transform: scale(1.04); }
.vo-jd-add:disabled { opacity: .45; cursor: not-allowed; }
.vo-jd-body .vo-jd-foot { position: relative; }
.vo-jd-card.is-unavailable { opacity: .6; }
@container (max-width: 640px) { .vo-jd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 400px) { .vo-jd-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .vo-jd-modes { flex: 1 1 100%; }
  .vo-jd-mode { flex: 1; min-width: 0; }
  .vo-jd-ready { flex: 1 1 auto; padding-left: 2px; border-left: 0; }
  .vo-jd-search { flex-basis: 100%; }
}
/* /order: the menu beside the order card on one grid, sharing its left edge
   with the banner's words; the order card stays sticky beside the menu. */
@media (min-width: 1025px) {
  :is(.vo-order-catalog, .vo-builder-page[data-page-slug="order-online"]) > .vo-builder-blocks:has(> .vo-block-slot > .vo-jd-menu-block) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 410px);
    align-items: start;
    column-gap: clamp(22px, 2vw, 30px);
    row-gap: 0;
    max-width: 1420px;
    margin-left: auto;
    margin-right: auto;
  }
  :is(.vo-order-catalog, .vo-builder-page[data-page-slug="order-online"]) > .vo-builder-blocks:has(> .vo-block-slot > .vo-jd-menu-block) > .vo-block-slot { grid-column: 1 / -1; }
  :is(.vo-order-catalog, .vo-builder-page[data-page-slug="order-online"]) > .vo-builder-blocks:has(> .vo-block-slot > .vo-jd-menu-block):has(> .vo-block-slot > .vo-block-cart) > .vo-block-slot:has(> .vo-jd-menu-block) { grid-column: 1; }
  :is(.vo-order-catalog, .vo-builder-page[data-page-slug="order-online"]) > .vo-builder-blocks:has(> .vo-block-slot > .vo-jd-menu-block) > .vo-block-slot:has(> .vo-block-cart) { grid-column: 2; align-self: stretch; padding-top: clamp(22px, 2.4vw, 32px); }
  /* The page keeps 24px at its sides; the banner's words line up with it. */
  :is(.vo-order-sections-above, .vo-builder-page[data-page-slug="order-online"]) .vo-block-hero-variant-jade > .vo-block-hero-inner { max-width: calc(1420px + 48px); padding-left: 24px; padding-right: 24px; }
}

/* Story: jade (photo with a Chinese strip beside the copy) --------------- */
.vo-block.vo-block-story-split.vo-block-story-jade {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(28px, 4.6vw, 80px);
  align-items: center;
  box-sizing: border-box;
  max-width: var(--vo-frame-max, 1180px);
  margin: 0 auto;
  padding: clamp(44px, 5vw, 80px) var(--vo-section-gutter, 32px);
  color: #18251d;
}
.vo-story-jd-photo { position: relative; display: flex; min-height: clamp(280px, 30vw, 460px); overflow: hidden; background: #e8e3d6; }
.vo-story-jd-photo img { flex: 1; min-width: 0; width: 100%; height: auto; object-fit: cover; display: block; }
.vo-block-story-jade-right .vo-story-jd-photo { order: 2; }
.vo-story-jd-strip { flex: 0 0 clamp(44px, 10%, 60px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px 0; background: #ece6d8; color: #18251d; }
.vo-story-jd-glyph { writing-mode: vertical-rl; text-orientation: upright; font: 500 clamp(17px, 1.5vw, 22px)/1.25 "Songti TC", "Songti SC", "STSong", "Noto Serif CJK TC", "Noto Serif TC", "Source Han Serif TC", "Noto Serif CJK SC", "PMingLiU", "SimSun", serif; letter-spacing: .16em; }
.vo-story-jd-strip .vo-jd-seal { width: 22px; height: 22px; }
.vo-story-jd-copy { min-width: 0; }
.vo-block-story-jade .vo-block-story-eyebrow { display: block; margin: 0 0 14px; color: #69675d; font: 500 11px/1.45 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .24em; text-transform: uppercase; }
.vo-block-story-jade h2 { margin: 0; max-width: 13em; color: #18251d; font-family: var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); font-weight: 400; letter-spacing: -.012em; font-size: clamp(34px, 3.8vw, 56px); line-height: 1.04; text-wrap: balance; }
.vo-block-story-jade p { max-width: 34em; margin: clamp(14px, 1.6vw, 22px) 0 0; color: #69675d; font: 400 clamp(16px, 1.25vw, 18.5px)/1.6 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); white-space: pre-line; }
.vo-block-story-jade .vo-block-story-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(20px, 2.2vw, 28px);
  padding-bottom: 7px;
  border-bottom: 1px solid currentColor;
  color: #18251d;
  font: 600 11.5px/1.45 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none;
}
.vo-block-story-jade .vo-block-story-link:hover { color: var(--brand-primary, #073d2a); }
.vo-block-story-jade.is-text-only { grid-template-columns: minmax(0, 1fr); text-align: center; }
.vo-block-story-jade.is-text-only :is(h2, p) { margin-left: auto; margin-right: auto; }
@media (max-width: 860px) {
  .vo-block.vo-block-story-split.vo-block-story-jade { grid-template-columns: minmax(0, 1fr); }
  .vo-story-jd-photo { min-height: 0; aspect-ratio: 4 / 3; order: 0 !important; }
}

/* Closing band: jade ("visit us") --------------------------------------- */
.vo-block.vo-block-cta-band.vo-block-cta-band-jade {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  padding: clamp(34px, 3.6vw, 52px) 0;
  border-radius: 0;
  background: var(--brand-primary, #06291d);
  background-image: linear-gradient(120deg, color-mix(in srgb, #000 30%, transparent), color-mix(in srgb, #000 12%, transparent));
  color: #f8f5ec;
  text-align: left;
}
.vo-builder-page .vo-block-slot-full > .vo-block-cta-band-jade { width: var(--vo-bleed-w, 100vw); max-width: var(--vo-bleed-w, 100vw); margin-left: calc(50% - var(--vo-bleed-w, 100vw) / 2); margin-right: calc(50% - var(--vo-bleed-w, 100vw) / 2); }
.vo-builder-preview-root .vo-block-cta-band-jade { width: var(--vo-bleed-w, 100%); max-width: none; margin-left: calc(50% - var(--vo-bleed-w, 100%) / 2) !important; margin-right: 0 !important; }
.vo-builder-page:has(> .vo-builder-blocks > .vo-block-slot:last-child > .vo-block-cta-band-jade) { padding-bottom: 0; margin-bottom: 0; }
.vo-block.vo-block-cta-band.vo-block-cta-band-jade.has-image { background: linear-gradient(90deg, rgba(4, 30, 21, .92), rgba(4, 30, 21, .86) 55%, rgba(4, 30, 21, .8)), var(--vo-cta-image) 70% center / cover no-repeat, #06291d; }
.vo-block-cta-band-jade .vo-block-cta-band-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 270px) minmax(0, 300px);
  align-items: center;
  gap: 24px clamp(20px, 2.4vw, 36px);
  max-width: var(--vo-frame-max, 1180px);
  margin: 0 auto;
  padding: 0 var(--vo-section-gutter, 32px);
  box-sizing: border-box;
  background: none;
  box-shadow: none;
  color: inherit;
  text-align: left;
}
.vo-block-cta-band-jade .vo-section-eyebrow { margin: 0 0 10px; color: color-mix(in srgb, #f8f5ec 86%, transparent); font: 500 11px/1.45 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .26em; text-transform: uppercase; }
.vo-block-cta-band-jade .vo-block-cta-band-title { max-width: none; margin: 0; color: #f8f5ec; font-family: var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); font-weight: 400; letter-spacing: -.012em; font-size: clamp(32px, 3vw, 46px); line-height: 1.06; text-wrap: balance; }
.vo-block-cta-band-jade .vo-block-cta-band-sub { margin: 10px 0 0; color: color-mix(in srgb, #f8f5ec 88%, transparent); font: 400 17px/1.5 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); opacity: 1; }
.vo-block-cta-band-jade .vo-block-cta-band-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  padding: 14px 26px;
  border: 0;
  border-radius: 1px;
  background: #f8f5ec;
  color: var(--brand-primary, #073d2a) !important;
  font: 600 12px/1.45 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none;
}
.vo-block-cta-band-jade .vo-block-cta-band-btn .vo-cta-arrow { display: none; }
.vo-block-cta-band-place, .vo-block-cta-band-aside { display: flex; align-items: flex-start; gap: 16px; align-self: stretch; padding-left: clamp(20px, 2.4vw, 36px); border-left: 1px solid color-mix(in srgb, #f8f5ec 35%, transparent); }
.vo-block-cta-band-place { align-items: center; }
.vo-block-cta-band-place svg { width: 24px; height: 24px; flex: none; color: #f8f5ec; }
.vo-block-cta-band-place p, .vo-block-cta-band-aside p { display: grid; gap: 8px; margin: 0; }
.vo-block-cta-band-place p > span:first-child { color: #f8f5ec; font: 400 15px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-block-cta-band-place a, .vo-block-cta-band-map { justify-self: start; padding-bottom: 3px; border-bottom: 1px solid color-mix(in srgb, #f8f5ec 70%, transparent); color: #f8f5ec; font: 400 14px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); text-decoration: none; }
.vo-block-cta-band-place a:hover { opacity: .8; }
.vo-block-cta-band-place.is-sample p > span:first-child { opacity: .75; }
.vo-block-cta-band-aside { align-items: center; }
.vo-block-cta-band-aside strong { color: #f8f5ec; font-family: var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); font-weight: 400; letter-spacing: -.012em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.25; }
.vo-block-cta-band-aside span { color: color-mix(in srgb, #f8f5ec 82%, transparent); font: 500 10px/1.45 var(--brand-body-font, Inter, system-ui, sans-serif); letter-spacing: .24em; text-transform: uppercase; }
.vo-block-cta-band-aside .vo-jd-seal { width: 30px; height: 30px; color: #e05a47; }
@media (max-width: 960px) {
  .vo-block-cta-band-jade .vo-block-cta-band-inner { grid-template-columns: minmax(0, 1fr); }
  .vo-block-cta-band-place, .vo-block-cta-band-aside { padding: 18px 0 0; border-left: 0; border-top: 1px solid color-mix(in srgb, #f8f5ec 25%, transparent); }
}

/* Cart panel: jade ("Your order" + something to sip) --------------------- */
.vo-block.vo-block-cart.vo-block-cart-variant-jade {
  --vo-cart-accent: var(--vo-cat-accent, var(--brand-primary, #073d2a));
  --vo-cart-card: var(--vo-cat-card-bg, #fffdf8);
  --vo-cart-line: var(--vo-cat-divider, #dedbd1);
  --vo-cart-ink: var(--vo-cat-ink, #18251d);
  --vo-cart-muted: var(--vo-cat-muted, #69675d);
  display: grid;
  gap: 0;
  align-content: start;
  margin: 0;
  padding: clamp(18px, 1.8vw, 24px);
  border: 1px solid var(--vo-cart-line);
  border-radius: 6px;
  background: var(--vo-cart-card);
  color: var(--vo-cart-ink);
  font-family: var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif);
}
.vo-block-cart-variant-jade.is-sticky { top: 92px; }
.vo-block-cart-variant-jade .vo-cart-panel { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.vo-block-cart-variant-jade .vo-cart-head { display: flex; align-items: baseline; padding: 0 0 16px; background: none; color: var(--vo-cart-ink); }
.vo-block-cart-variant-jade .vo-cart-head h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; margin: 0; font-family: var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); font-weight: 400; letter-spacing: -.012em; font-size: clamp(28px, 2.3vw, 34px); line-height: 1; }
.vo-block-cart-variant-jade [data-vo-cart-title-count] { color: var(--vo-cart-ink); font: 400 15px/1 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); letter-spacing: 0; }
.vo-block-cart-variant-jade .vo-cart-pickup.is-compact { padding: 0 0 6px; border: 0; }
.vo-block-cart-variant-jade .vo-cart-pickup.is-compact .vo-cart-pickup-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--vo-cart-ink) 5%, #efebe1);
  font: 400 16px/1.25 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif);
}
.vo-block-cart-variant-jade .vo-cart-pickup-row strong { font-weight: 400; }
.vo-block-cart-variant-jade .vo-cart-pickup-row > span { display: block; min-width: 0; }
.vo-block-cart-variant-jade .vo-cart-pickup-row small { display: block; margin-top: 2px; color: var(--vo-cart-muted); font: 400 12px/1.3 var(--brand-body-font, Inter, system-ui, sans-serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vo-cart-pickup-change { margin-left: auto; color: var(--vo-cart-ink); font: 400 13.5px/1 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); text-decoration: underline; text-underline-offset: 3px; }
.vo-block-cart-variant-jade .vo-cart-lines { padding: 6px 0 4px; }
.vo-block-cart-variant-jade .vo-cart-line {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
  padding: 14px 0;
  border: 0;
}
.vo-block-cart-variant-jade .vo-cart-line-main,
.vo-block-cart-variant-jade .vo-cart-line-end { display: contents; }
.vo-block-cart-variant-jade .vo-cart-thumb { grid-row: 1 / span 3; grid-column: 1; align-self: start; width: 82px; height: 78px; border-radius: 3px; overflow: hidden; }
.vo-block-cart-variant-jade .vo-cart-line-name { grid-column: 2; grid-row: 1; margin: 0; font: 400 16.5px/1.2 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); }
.vo-block-cart-variant-jade .vo-cart-line-each { display: none; }
.vo-block-cart-variant-jade .vo-cart-line-meta { grid-column: 2 / -1; grid-row: 2; color: var(--vo-cart-muted); font: 400 12.5px/1.35 var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-block-cart-variant-jade .vo-cart-qty { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 4px; border: 1px solid var(--vo-cart-line); border-radius: 3px; background: #ffffff; }
.vo-block-cart-variant-jade .vo-cart-qty button { width: 38px; height: 36px; font: 300 20px/1 var(--brand-body-font, Inter, system-ui, sans-serif); color: var(--vo-cart-ink); }
.vo-block-cart-variant-jade .vo-cart-qty span { min-width: 38px; height: 36px; display: inline-grid; place-items: center; border-left: 1px solid var(--vo-cart-line); border-right: 1px solid var(--vo-cart-line); font: 400 15px/1 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); }
.vo-block-cart-variant-jade .vo-cart-qty.is-static span { border: 0; }
.vo-block-cart-variant-jade .vo-cart-line-end > strong { grid-column: 3; grid-row: 1; justify-self: end; font: 400 16px/1.2 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); }
.vo-block-cart-variant-jade .vo-cart-line-end > span:empty { display: none; }
.vo-block-cart-variant-jade .vo-cart-remove {
  grid-column: 3;
  grid-row: 3;
  justify-self: end;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--vo-cart-ink) 62%, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E") center / 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E") center / 20px no-repeat;
  font-size: 0;
  cursor: pointer;
}
.vo-block-cart-variant-jade .vo-cart-remove:hover { background: #b73328; }
.vo-block-cart-variant-jade .vo-cart-note-field.is-folded { display: block; padding: 14px 0; border-top: 1px solid var(--vo-cart-line); }
.vo-block-cart-variant-jade .vo-cart-note-field.is-folded[hidden] { display: none; }
.vo-cart-note-field.is-folded summary { display: inline-flex; align-items: center; gap: 10px; color: var(--vo-cart-ink); font: 400 15px/1.2 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); list-style: none; cursor: pointer; }
.vo-cart-note-field.is-folded summary::-webkit-details-marker { display: none; }
.vo-cart-note-field.is-folded summary:hover span { text-decoration: underline; text-underline-offset: 3px; }
.vo-cart-note-field.is-folded textarea { margin-top: 10px; }
.vo-block-cart-variant-jade .vo-cart-note-field textarea { border-radius: 3px; font-family: var(--brand-body-font, Inter, system-ui, sans-serif); }
.vo-block-cart-variant-jade .vo-cart-foot { display: grid; gap: 6px; padding: 16px 0 0; border-top: 1px solid var(--vo-cart-line); }
.vo-block-cart-variant-jade .vo-cart-subtotal { display: flex; justify-content: space-between; color: var(--vo-cart-muted); font: 400 16px/1.5 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); }
.vo-block-cart-variant-jade .vo-cart-subtotal strong { color: var(--vo-cart-ink); font-weight: 400; }
.vo-block-cart-variant-jade .vo-cart-total { margin-top: 6px; color: var(--vo-cart-ink); font-family: var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); font-weight: 400; letter-spacing: -.012em; font-size: 25px; line-height: 1.1; }
.vo-block-cart-variant-jade .vo-cart-total strong { font-size: 25px; }
.vo-block-cart-variant-jade .vo-cart-checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  margin-top: 14px;
  border: 0;
  border-radius: 3px;
  background: var(--vo-cart-accent);
  color: var(--vo-cart-accent-ink, #f8f5ec);
  font: 400 18px/1 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif);
  text-decoration: none;
  transition: filter .15s ease;
}
.vo-block-cart-variant-jade .vo-cart-checkout:hover { filter: brightness(1.2); }
.vo-block-cart-variant-jade .vo-cart-checkout-arrow { font-family: var(--brand-body-font, Inter, system-ui, sans-serif); font-size: 20px; }
.vo-block-cart-variant-jade .vo-cart-footnote { margin: 12px 0 0; color: var(--vo-cart-muted); font: 400 13px/1.4 var(--brand-body-font, Inter, system-ui, sans-serif); text-align: center; }
.vo-block-cart-variant-jade .vo-cart-empty { padding: 18px 0 10px; }
.vo-block-cart-variant-jade .vo-cart-empty-title { font-family: var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); font-weight: 400; letter-spacing: -.012em; font-size: 20px; }
/* Something to sip? */
.vo-block-cart-variant-jade .vo-cart-meal {
  display: grid;
  grid-template-columns: 96px auto minmax(0, 1fr) auto;
  grid-template-areas: "img title title add" "img name price add";
  gap: 4px 0;
  align-items: center;
  margin-top: 22px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--vo-cart-line) 70%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, #efebe1 45%, #ffffff);
  color: var(--vo-cart-ink);
}
.vo-block-cart-variant-jade .vo-cart-meal-copy { display: contents; }
.vo-block-cart-variant-jade .vo-cart-meal-title { grid-area: title; align-self: end; max-width: none; margin: 0; font-family: var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); font-weight: 400; letter-spacing: -.012em; font-size: 20px; letter-spacing: 0; text-transform: none; line-height: 1.2; }
.vo-block-cart-variant-jade .vo-cart-meal-title::after { content: none; }
.vo-block-cart-variant-jade .vo-cart-meal-title,
.vo-block-cart-variant-jade .vo-cart-meal-name { padding-left: 16px; }
.vo-block-cart-variant-jade .vo-cart-meal-img { grid-area: img; width: 96px; height: 84px; max-height: none; border-radius: 3px; object-fit: cover; }
.vo-block-cart-variant-jade .vo-cart-meal-name { grid-area: name; align-self: start; margin: 0; color: var(--vo-cart-muted); font: 400 15px/1.3 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); }
.vo-block-cart-variant-jade .vo-cart-meal-price { grid-area: price; align-self: start; margin: 0; color: var(--vo-cart-muted); font: 400 15px/1.3 var(--brand-heading-font, "DM Serif Display", Georgia, "Times New Roman", serif); white-space: nowrap; }
.vo-block-cart-variant-jade .vo-cart-meal-price::before { content: " · "; white-space: pre; }
.vo-block-cart-variant-jade .vo-cart-meal-text { display: none; }
.vo-block-cart-variant-jade .vo-cart-meal-add {
  grid-area: add;
  margin-left: 12px !important;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--vo-cart-accent);
  color: var(--vo-cart-accent-ink, #f8f5ec);
  font-size: 0;
  cursor: pointer;
}
.vo-block-cart-variant-jade .vo-cart-meal-add > span { display: none; }
.vo-block-cart-variant-jade .vo-cart-meal-add::before { content: "+"; font: 300 26px/1 var(--brand-body-font, Inter, system-ui, sans-serif); transform: translateY(-1px); }
.vo-block-cart-variant-jade .vo-cart-meal-add:disabled { opacity: .5; cursor: not-allowed; }
.vo-block-cart-variant-jade .vo-cart-meal:not(.has-image) { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "title title add" "name price add"; }
.vo-block-cart-variant-jade .vo-cart-meal:not(.has-image) :is(.vo-cart-meal-title, .vo-cart-meal-name) { padding-left: 0; }

/* Title bar: teahouse (see storefront-chrome-render.ts) is styled there. */


#cart-sidebar[data-drawer-tone="light"] { color-scheme: light; }
#cart-sidebar[data-drawer-tone="dark"] { color-scheme: dark; }
#cart-sidebar[data-drawer-tone] #cart-panel,
#cart-sidebar[data-drawer-tone] .cart-panel-shell {
  background: var(--vo-drawer-bg) !important;
  border-color: var(--vo-drawer-line) !important;
  color: var(--vo-drawer-ink);
}
#cart-sidebar[data-drawer-tone] :is(.checkout-section, .checkout-customer, .cart-item, .appointment-detail-card) {
  background: var(--vo-drawer-raised) !important;
  border-color: var(--vo-drawer-line-soft) !important;
  color: var(--vo-drawer-ink);
}
#cart-sidebar[data-drawer-tone] :is(.checkout-subsection, .cart-empty-state, .appointment-lead-time) {
  background: var(--vo-drawer-inset) !important;
  border-color: var(--vo-drawer-line-soft) !important;
}
#cart-sidebar[data-drawer-tone] :is(.tip-button, .cart-item .qty-button, .cart-item-stepper, .appointment-slot-button, .appointment-slot-more) {
  background: var(--vo-drawer-raised) !important;
  border-color: var(--vo-drawer-line) !important;
  color: var(--vo-drawer-ink) !important;
}
#cart-sidebar[data-drawer-tone] .cart-item-stepper .qty-button { background: transparent !important; color: var(--vo-drawer-ink) !important; }
#cart-sidebar[data-drawer-tone] :is(.tip-button, .appointment-slot-button, .cart-item-stepper .qty-button):hover { background: var(--vo-drawer-accent-soft) !important; color: var(--vo-drawer-accent-text) !important; }
#cart-sidebar[data-drawer-tone] :is(.tip-button, .appointment-slot-button)[data-active="true"] {
  background: var(--vo-drawer-accent-soft) !important;
  border-color: var(--vo-drawer-accent-text) !important;
  color: var(--vo-drawer-accent-text) !important;
}
#cart-sidebar[data-drawer-tone] .appointment-slot-button[data-active="true"] :is(.slot-time, .slot-meta) { color: var(--vo-drawer-accent-text) !important; }
#cart-sidebar[data-drawer-tone] :is(#checkout-submit, .promo-apply-btn) {
  background: var(--vo-drawer-accent) !important;
  color: var(--vo-drawer-accent-ink) !important;
  border-color: var(--vo-drawer-accent) !important;
}
#cart-sidebar[data-drawer-tone] #checkout-submit:disabled { opacity: .55; }
#cart-sidebar[data-drawer-tone] :is(.checkout-total-row, .checkout-submit-bar, .checkout-summary) { border-color: var(--vo-drawer-line) !important; }
#cart-sidebar[data-drawer-tone] .checkout-total-row > span:last-child { color: var(--vo-drawer-accent-text) !important; }
#cart-sidebar[data-drawer-tone] :is(input:not([type=checkbox]):not([type=radio]), select, textarea, .input) {
  background: var(--vo-drawer-raised) !important;
  color: var(--vo-drawer-ink) !important;
  border-color: var(--vo-drawer-line) !important;
}
#cart-sidebar[data-drawer-tone] :is(input, textarea)::placeholder { color: var(--vo-drawer-subtle) !important; opacity: 1; }
#cart-sidebar[data-drawer-tone] :is(input, select, textarea, .input):focus { border-color: var(--vo-drawer-accent-text) !important; box-shadow: 0 0 0 3px var(--vo-drawer-accent-soft) !important; }
#cart-sidebar[data-drawer-tone] :is(input[type=checkbox], input[type=radio]) { accent-color: var(--vo-drawer-accent-text); }
#cart-sidebar[data-drawer-tone] .cart-item-thumb { background: var(--vo-drawer-accent-soft) !important; }
#cart-sidebar[data-drawer-tone] .cart-item-thumb-fallback { color: var(--vo-drawer-accent-text) !important; }
#cart-sidebar[data-drawer-tone] .mobile-cart-close { background: var(--vo-drawer-raised) !important; border-color: var(--vo-drawer-line) !important; color: var(--vo-drawer-muted) !important; }
#cart-sidebar[data-drawer-tone] .cart-panel-header .badge { background: var(--vo-drawer-inset) !important; color: var(--vo-drawer-muted) !important; border-color: var(--vo-drawer-line) !important; }
#cart-sidebar[data-drawer-tone] .cart-panel-header .badge.badge-primary { background: var(--vo-drawer-accent-soft) !important; color: var(--vo-drawer-accent-text) !important; }
#cart-sidebar[data-drawer-width="compact"] { width: min(440px, 100vw) !important; }
.checkout-col { display: grid; gap: 1rem; align-content: start; min-width: 0; }
/* Cart rows are built in the browser, so the order page's scoped styles never
   reach them; their layout lives here (photo, name, quantity pill, price). */
#cart-sidebar .cart-item {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center;
  gap: 12px; padding: 12px 14px; border: 1px solid var(--vo-drawer-line-soft, rgba(11, 28, 48, .07)); border-radius: 12px;
}
#cart-sidebar .cart-item-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; display: flex; align-items: center; justify-content: center; }
#cart-sidebar .cart-item-thumb svg { width: 18px; height: 18px; }
#cart-sidebar .cart-item-main { min-width: 0; }
#cart-sidebar .cart-item-name { margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#cart-sidebar .cart-item-option { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--vo-drawer-muted, var(--muted)); }
#cart-sidebar .cart-item-stepper { display: inline-flex; align-items: center; padding: 3px; border: 1px solid; border-radius: 999px; }
#cart-sidebar .cart-item-stepper .qty-button { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
#cart-sidebar .cart-item-stepper .qty-count { min-width: 22px; text-align: center; font-size: 14px; font-weight: 700; }
#cart-sidebar .cart-item-total { min-width: 60px; text-align: right; font-size: 1rem; font-weight: 700; }
@media (max-width: 480px) {
  #cart-sidebar .cart-item { grid-template-columns: 40px minmax(0, 1fr) auto; row-gap: 6px; }
  #cart-sidebar .cart-item-thumb { width: 40px; height: 40px; }
  #cart-sidebar .cart-item-total { grid-column: 2 / -1; padding-top: 0; }
}

.vo-storefront[data-checkout-style="page"]:not([data-checkout-view="true"]) #cart-sidebar,
.vo-storefront[data-checkout-style="page"] .mobile-cart-backdrop { display: none !important; }
.vo-storefront[data-checkout-view="true"] > :is(.vo-order-sections, .vo-order-catalog, .mobile-cart-dock) { display: none !important; }
.vo-storefront[data-checkout-view="true"] { padding-bottom: 0 !important; }
/* The floating "Review order" pill repeats a cart block that's on screen. */
.vo-storefront[data-cart-block-visible="true"] .mobile-cart-dock { display: none !important; }
.vo-storefront[data-checkout-view="true"] #cart-sidebar {
  position: static !important; inset: auto !important; transform: none !important;
  opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  width: auto !important; max-width: 1180px !important; margin: 0 auto !important;
  padding: clamp(16px, 3vw, 36px) 16px 56px !important; overflow: visible !important; z-index: auto !important;
}
.vo-storefront[data-checkout-view="true"] #cart-sidebar #cart-panel {
  height: auto !important; max-height: none !important; overflow: visible !important;
  border: 1px solid var(--vo-drawer-line) !important; border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 48px rgba(15, 23, 42, .06) !important;
  padding: clamp(18px, 3vw, 36px) !important;
}
.vo-storefront:not([data-checkout-view="true"]) .checkout-page-only { display: none !important; }
.vo-storefront[data-checkout-view="true"] :is(.checkout-drawer-only, .mobile-cart-close) { display: none !important; }
.vo-storefront[data-checkout-view="true"] .cart-panel-header { align-items: flex-end; flex-wrap: wrap; }
.vo-storefront[data-checkout-view="true"] .cart-panel-header h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem) !important; outline: none; }
.checkout-page-back {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 0; border: 0; background: none;
  font: inherit; font-size: .85rem; font-weight: 600; color: var(--vo-drawer-accent-text, var(--brand-primary)); cursor: pointer;
}
.checkout-page-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.checkout-page-back:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.vo-storefront[data-checkout-view="true"] .checkout-form-scroll { overflow: visible !important; padding: 0 !important; margin: 0 !important; }
.vo-storefront[data-checkout-view="true"] .checkout-submit-bar { position: static !important; }
.vo-storefront[data-checkout-view="true"] .cart-empty-state .checkout-page-back { margin: 14px auto 0; justify-content: center; }
/* Booking checkouts: the step bar in the checkout colours. */
.checkout-steps .vo-bk-steps { --vo-bk-gold: var(--vo-drawer-accent, var(--brand-primary)); --vo-bk-on-gold: var(--vo-drawer-accent-ink, #fff); --vo-bk-ink: var(--vo-drawer-ink, var(--ink)); margin: 6px 0 22px; }
@media (min-width: 900px) {
  .vo-storefront[data-checkout-view="true"] #checkout-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "banner banner" "main side" "main submit";
    column-gap: clamp(20px, 3vw, 40px); row-gap: 0;
    align-items: start;
  }
  .vo-storefront[data-checkout-view="true"] .checkout-form-scroll { display: contents !important; }
  .vo-storefront[data-checkout-view="true"] #order-status-banner { grid-area: banner; margin-bottom: 1rem; }
  .vo-storefront[data-checkout-view="true"] .checkout-col-main { grid-area: main; }
  .vo-storefront[data-checkout-view="true"] .checkout-col-side { grid-area: side; }
  .vo-storefront[data-checkout-view="true"] .checkout-submit-bar { grid-area: submit; margin-top: 1rem; }
  .vo-storefront[data-checkout-view="true"][data-cart-has-items="false"] #checkout-form {
    grid-template-columns: minmax(0, 560px); justify-content: center;
    grid-template-areas: "banner" "side" "submit";
  }
}