/* Vow: for wedding and commission photographers.
   ---------------------------------------------------------------------------------------------
   Ported from the approved mock-ups (home, stories, one image, booking, phone). The name is
   centred in spaced serif capitals over a centred row of spaced capitals; one photograph fills
   the opening with no words on it and the words come after, centred, in a large light serif;
   pictures are three across at 3:2 with their names beneath in capitals and no box round them;
   a product is its photograph at the width of the page, then one narrow centred column. No
   rounded corner anywhere, no shadow, and the one colour is the accent on the button that buys.

   The file has two layers. The rules down to "Vow's own" are the base every design starts from
   (they keep each shared component, from the basket drawer to the month calendar, dressed); the
   rules after it are what the mock-ups ask for, and being later they win.

   Scoping: every selector is `body.theme-vow`. See vault's stylesheet for why. */

/* --------------------------------------------------------------------------------- tokens */
body.theme-vow {
  /* Rules and dividers. The palette's `border` is strong enough to draw a field's edge (the
     platform holds it to 2:1 on the surface); the mock-up's hairlines are fainter than that,
     so they are that colour thinned over the page's ground. Controls keep the full one. */
  --vw-line: color-mix(in srgb, var(--color-border) 41%, var(--color-surface));
  --hw-brand: 400; --hw-link: 400; /* this design's own header weights; Design → header_weight may only raise them */
  --c-bg: var(--color-surface);
  --c-text: var(--color-ink);
  --c-primary: var(--color-ink);
  --c-accent: var(--color-accent);
  --c-muted: var(--color-ink-muted);
  --c-line: var(--color-border);
  --c-line-strong: color-mix(in srgb, var(--color-border) 60%, var(--color-ink));
  --c-soft: var(--color-surface-raised);
  --c-accent-soft: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  --c-shadow: 0 12px 34px color-mix(in srgb, var(--color-ink) 11%, transparent);
  --c-radius: 0px;
  --c-radius-sm: 0px;

  --vw-shell: 100rem;
  --vw-gutter: clamp(1.25rem, 3.4vw, 3rem);
  --vw-caps: 0.2em;
  --vw-radius: 0px;
  --vw-gap: clamp(3rem, 6vw, 5rem);

  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  line-height: 1.6; margin: 0;
}
body.theme-vow, body.theme-vow *, body.theme-vow *::before, body.theme-vow *::after {
  box-sizing: border-box;
}
body.theme-vow :where(a) { color: inherit; text-decoration: none; }
body.theme-vow :where(img) { max-width: 100%; display: block; }
body.theme-vow h1, body.theme-vow h2, body.theme-vow h3, body.theme-vow h4 {
  font-family: var(--font-heading, Manrope, system-ui, sans-serif);
  margin: 0; font-weight: 400; line-height: 1.1; letter-spacing: 0;
}
body.theme-vow p { margin: 0; }
body.theme-vow .container { width: min(var(--vw-shell), calc(100% - 2 * var(--vw-gutter))); margin-inline: auto; }
body.theme-vow .section { padding: var(--vw-gap) 0; }
body.theme-vow .eyebrow {
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-ink-muted); font-weight: 700; margin-bottom: 0.85rem;
}
body.theme-vow .lead { color: var(--color-ink-muted); font-size: 1.02rem; max-width: 48ch; }
body.theme-vow .muted, body.theme-vow .c-muted { color: var(--color-ink-muted); }
body.theme-vow .text-link { color: var(--color-accent); font-weight: 700; font-size: 0.9rem; }
body.theme-vow .text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------- announcement */
body.theme-vow .announcement {
  background: var(--color-accent); color: var(--color-accent-ink);
  text-align: center; padding: 0.55rem 1rem; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* --------------------------------------------------------------------------------- header */
body.theme-vow .site-header {
  background: var(--color-surface); border-bottom: 1px solid var(--vw-line);
  position: relative; z-index: 5;
}
body.theme-vow .header-inner {
  display: flex; align-items: center; gap: 1.5rem; padding: 1rem 0; flex-wrap: wrap;
}
body.theme-vow .site-brand {
  font-family: var(--font-heading, Manrope, system-ui, sans-serif);
  font-size: 1.35rem; font-weight: 800; letter-spacing: -0.035em; color: var(--color-ink);
  margin-right: auto;
}
body.theme-vow .site-brand img { max-height: calc(2rem * var(--logo-scale, 1)); width: auto; }
body.theme-vow .site-nav { display: flex; gap: 0.4rem; align-items: center; }
body.theme-vow .site-nav a {
  font-size: 0.9rem; font-weight: 600; color: var(--color-ink-muted);
  padding: 0.45rem 0.85rem; border-radius: 999px;
}
body.theme-vow .site-nav a:hover { background: var(--color-surface-raised); color: var(--color-ink); }
body.theme-vow .site-nav a[aria-current="page"] {
  background: var(--color-accent-soft, var(--color-surface-raised)); color: var(--color-ink);
}
/* The drop-down, in vow's own vocabulary: the pill nav continues into the panel.
   `commerce.css` owns where it sits and what opens it; what a theme owes is the *look*, and
   without one all seven shops drew the same rounded white card in seven palettes — the "seven
   themes, one design" problem in the component that is above the fold on every page. Here that
   means a floating card detached from the bar, generous rounding, and rows that are pills like
   the ones above them, filling on hover exactly as `.site-nav a:hover` does. */
body.theme-vow .site-nav .nav-submenu {
  top: calc(100% + 0.5rem);
  padding: 0.55rem;
  gap: 0.15rem;
  border-radius: var(--c-radius);
  background: var(--color-surface);
}
body.theme-vow .site-nav .nav-submenu a {
  font-size: 0.9rem; font-weight: 600; color: var(--color-ink-muted);
  padding: 0.5rem 0.9rem; border-radius: 999px;
}
body.theme-vow .site-nav .nav-submenu a:hover,
body.theme-vow .site-nav .nav-submenu a:focus-visible {
  background: var(--color-surface-raised); color: var(--color-ink);
}
/* Sentence case and full ink, because vow is the friendly one: the uppercase micro-label
   commerce falls back to belongs to press and studio, not here. */
body.theme-vow .site-nav .nav-submenu-mega .nav-column-head {
  font-size: 0.9rem; font-weight: 800; letter-spacing: 0; text-transform: none;
  color: var(--color-ink); margin-bottom: 0.35rem;
}
body.theme-vow .header-actions { display: flex; align-items: center; gap: 0.7rem; }
body.theme-vow .header-switchers { display: flex; gap: 0.35rem; }
/* The box is the form, not the input — see the header-search block in commerce.css for the
   pill-inside-a-rectangle this used to draw. Focus is commerce's ring for every theme. */
body.theme-vow .site-search {
  max-width: 15rem; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-surface-raised);
}
body.theme-vow .site-search-input {
  padding: 0.55rem 0.35rem 0.55rem 1rem; font-size: 0.88rem; color: var(--color-ink);
}
body.theme-vow .site-search-input::placeholder { color: var(--color-ink-muted); }
body.theme-vow .site-search-button { padding-inline: 0.4rem 0.8rem; }
body.theme-vow .icon-btn {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 2.4rem; height: 2.4rem; border-radius: 999px; color: var(--color-ink);
}
body.theme-vow .icon-btn:hover { background: var(--color-surface-raised); }
body.theme-vow .icon-btn .icon { width: 1.25rem; height: 1.25rem; }
body.theme-vow .saved-link { font-size: 0.88rem; font-weight: 600; color: var(--color-ink-muted); }
body.theme-vow .saved-link:hover { color: var(--color-accent); }
body.theme-vow .cart-count {
  position: absolute; top: -0.05rem; right: -0.05rem; min-width: 1.15rem; height: 1.15rem;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--color-accent); color: var(--color-accent-ink); font-size: 0.68rem; font-weight: 800;
}
body.theme-vow .nav-toggle-input { display: none; }
body.theme-vow .nav-toggle { display: none; cursor: pointer; color: var(--color-ink); }

/* -------------------------------------------------------------------------------- buttons */
body.theme-vow .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.65rem; border-radius: 999px;
  border: 1px solid var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink);
  font: inherit; font-size: 0.92rem; font-weight: 700; cursor: pointer; text-align: center;
  transition: filter 0.15s ease, transform 0.12s ease;
}
body.theme-vow .btn:hover { filter: brightness(0.93); transform: translateY(-1px); }
body.theme-vow .btn:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
body.theme-vow .btn:disabled, body.theme-vow .btn[disabled] { opacity: 0.45; cursor: not-allowed; filter: none; transform: none; }
body.theme-vow .btn-sm { padding: 0.45rem 1rem; font-size: 0.83rem; }
body.theme-vow .btn-outline, body.theme-vow .btn-secondary {
  background: transparent; color: var(--color-ink); border-color: var(--color-border);
}
body.theme-vow .btn-outline:hover, body.theme-vow .btn-secondary:hover {
  background: var(--color-surface-raised); filter: none;
}
body.theme-vow .btn-full { width: 100%; }

/* ----------------------------------------------------------------------------------- hero */
body.theme-vow .vw-hero { position: relative; background: var(--color-surface-raised); overflow: hidden; }
body.theme-vow .vw-hero-art {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 62% at 88% 18%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 70%),
    radial-gradient(38% 52% at 4% 92%, color-mix(in srgb, var(--color-accent) 11%, transparent), transparent 72%),
    radial-gradient(30% 40% at 70% 96%, color-mix(in srgb, var(--color-ink) 6%, transparent), transparent 70%);
}
body.theme-vow .vw-hero-inner {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}
body.theme-vow .vw-hero-copy { display: grid; gap: 1.1rem; }
body.theme-vow .vw-hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
body.theme-vow .vw-hero-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.5rem; }
/* The organic frame: a blob-shaped mask rather than a rectangle, which is the archetype's tell. */
body.theme-vow .vw-hero-media {
  aspect-ratio: 5 / 4; overflow: hidden; background: var(--color-surface);
  border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%;
}
body.theme-vow .vw-hero-media img { width: 100%; height: 100%; object-fit: cover; }
body.theme-vow .vw-hero-media-empty {
  width: 100%; height: 100%;
  background: radial-gradient(65% 65% at 45% 40%, color-mix(in srgb, var(--color-accent) 26%, var(--color-surface)), var(--color-surface));
}

body.theme-vow .section-head {
  display: grid; gap: 0.4rem; justify-items: center; text-align: center; margin-bottom: 2.25rem;
}
body.theme-vow .section-head h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); }
body.theme-vow .section-head .text-link { margin-top: 0.4rem; }

/* Category tiles, laid out in the open. */
body.theme-vow .vw-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 1.25rem; }
body.theme-vow .vw-cat {
  position: relative; display: grid; align-content: end; gap: 0.2rem;
  min-height: 12rem; padding: 1.25rem; overflow: hidden;
  border-radius: var(--vw-radius); background: var(--color-surface-raised);
  border: 1px solid var(--vw-line);
}
body.theme-vow .vw-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.theme-vow .vw-cat::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--color-ink) 68%, transparent), transparent 62%);
  opacity: 0; transition: opacity 0.2s ease;
}
body.theme-vow .vw-cat.has-image::after { opacity: 1; }
body.theme-vow .vw-cat-label, body.theme-vow .vw-cat-hint { position: relative; z-index: 2; }
body.theme-vow .vw-cat-label { font-weight: 800; font-size: 1.05rem; }
body.theme-vow .vw-cat-hint { font-size: 0.85rem; color: var(--color-ink-muted); }
body.theme-vow .vw-cat.has-image .vw-cat-label, body.theme-vow .vw-cat.has-image .vw-cat-hint {
  color: var(--color-surface);
}
body.theme-vow .vw-cat:hover { border-color: var(--color-accent); }

/* Three assurances in soft cards. */
body.theme-vow .vw-claims { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1.25rem; }
body.theme-vow .vw-claim {
  display: flex; gap: 0.9rem; align-items: flex-start; padding: 1.4rem;
  border-radius: var(--vw-radius); background: var(--color-surface-raised);
}
body.theme-vow .vw-claim .icon { width: 1.75rem; height: 1.75rem; color: var(--color-accent); flex: none; }
body.theme-vow .vw-claim h3 { font-size: 1rem; margin-bottom: 0.2rem; }
body.theme-vow .vw-claim p { font-size: 0.88rem; color: var(--color-ink-muted); }

/* ---------------------------------------------------------------------------- newsletter */
body.theme-vow .newsletter {
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: var(--vw-radius);
  background: var(--color-surface-raised);
}
body.theme-vow .newsletter h2 { font-size: 1.5rem; margin-bottom: 0.4rem; }
body.theme-vow .newsletter p { color: var(--color-ink-muted); font-size: 0.92rem; }
body.theme-vow .newsletter-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
body.theme-vow .newsletter-form input {
  padding: 0.8rem 1.15rem; min-width: 15rem; border-radius: 999px;
  border: 1px solid var(--vw-line); background: var(--color-surface); color: var(--color-ink); font: inherit;
}
body.theme-vow .newsletter-form input::placeholder { color: var(--color-ink-muted); }

/* -------------------------------------------------------------------------------- listing */
body.theme-vow .listing-hero {
  background: var(--color-surface-raised); padding: clamp(2.25rem, 5vw, 3.5rem) 0;
}
body.theme-vow .listing-hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
body.theme-vow .listing-hero .lead { margin-top: 0.85rem; }
body.theme-vow .breadcrumbs {
  display: flex; gap: 0.45rem; flex-wrap: wrap; align-items: center;
  font-size: 0.82rem; color: var(--color-ink-muted); margin-bottom: 0.9rem;
}
body.theme-vow .breadcrumbs a:hover { color: var(--color-accent); }
body.theme-vow .breadcrumbs [aria-current="page"] { color: var(--color-ink); font-weight: 600; }
body.theme-vow .listing { padding-top: 2.25rem; }
body.theme-vow .filter-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
body.theme-vow .filter-chips a {
  padding: 0.45rem 1rem; border-radius: 999px; font-size: 0.86rem; font-weight: 600;
  background: var(--color-surface-raised); color: var(--color-ink-muted);
}
body.theme-vow .filter-chips a:hover { color: var(--color-ink); }
body.theme-vow .filter-chips a[aria-current="true"] {
  background: var(--color-accent); color: var(--color-accent-ink);
}
body.theme-vow .listing-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.7rem 1rem; margin-bottom: 1.5rem; border-radius: 999px; background: var(--color-surface-raised);
}
/* A pill is right for one line; once the sort links wrap under the count on a phone it is a
   lozenge with the corners cut off, so the toolbar keeps the card radius there instead. */
@media (max-width: 640px) { body.theme-vow .listing-toolbar { border-radius: var(--c-radius); } }
body.theme-vow .listing-count { font-size: 0.86rem; color: var(--color-ink-muted); }
body.theme-vow .sort-links { display: flex; gap: 0.85rem; align-items: center; font-size: 0.85rem; }
body.theme-vow .sort-links span { color: var(--color-ink-muted); }
body.theme-vow .sort-links a { color: var(--color-ink-muted); font-weight: 600; }
body.theme-vow .sort-links a:hover { color: var(--color-ink); }
body.theme-vow .sort-links a[aria-current="true"] { color: var(--color-accent); }

body.theme-vow .product-grid {
  display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}
@media (max-width: 700px) {
  body.theme-vow .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0.75rem; }
}
body.theme-vow .product-card {
  /* The card paints no ground of its own (see Vow's own layer below), so on a built page's
     Accent or Inverted band its words take the band's ink, and the page's everywhere else. */
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--vw-radius); background: var(--color-surface);
  border: 1px solid var(--vw-line);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
body.theme-vow .product-card:hover { box-shadow: var(--c-shadow); transform: translateY(-3px); }
body.theme-vow .product-media {
  display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--color-surface-raised);
}
body.theme-vow .product-media img { width: 100%; height: 100%; object-fit: cover; }
body.theme-vow .product-media.pattern-a { background: radial-gradient(70% 70% at 40% 35%, color-mix(in srgb, var(--color-accent) 16%, var(--color-surface-raised)), var(--color-surface-raised)); }
body.theme-vow .product-media.pattern-b { background: var(--color-surface-raised); }
body.theme-vow .product-media.pattern-c { background: linear-gradient(150deg, color-mix(in srgb, var(--color-accent) 10%, var(--color-surface-raised)), var(--color-surface)); }
body.theme-vow .product-media.pattern-d { background: linear-gradient(30deg, var(--color-surface-raised), var(--color-surface)); }
body.theme-vow .product-badge {
  position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; padding: 0.2rem 0.7rem; border-radius: 999px;
  background: var(--color-accent); color: var(--color-accent-ink);
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
}
body.theme-vow .product-badge-kind { background: var(--color-ink); color: var(--color-surface); }
body.theme-vow .product-body { padding: 1rem 1.1rem 1.2rem; display: grid; gap: 0.3rem; }
body.theme-vow .product-body h3 { font-size: 1rem; }
body.theme-vow .product-body h3 a:hover { color: var(--color-accent); }
body.theme-vow .product-meta { font-size: 0.84rem; color: var(--pb-muted, var(--color-ink-muted)); }
body.theme-vow .price {
  font-family: var(--font-heading, Manrope, sans-serif); font-size: 1.05rem; font-weight: 800;
  color: var(--pb-ink, var(--color-ink)); display: flex; gap: 0.45rem; align-items: baseline; flex-wrap: wrap;
}
body.theme-vow .price-from, body.theme-vow .price-approx { font-size: 0.76rem; font-weight: 500; color: var(--pb-muted, var(--color-ink-muted)); }
body.theme-vow .price-compare { font-size: 0.86rem; font-weight: 500; color: var(--pb-muted, var(--color-ink-muted)); }
body.theme-vow .price-lg { font-size: clamp(1.5rem, 3vw, 2.1rem); }
body.theme-vow .wishlist-btn {
  position: absolute; top: 0.65rem; right: 0.65rem; z-index: 3;
  width: 2.1rem; height: 2.1rem; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--vw-line); color: var(--color-ink-muted);
}
body.theme-vow .wishlist-btn:hover { color: var(--color-accent); border-color: var(--color-accent); }
body.theme-vow .wishlist-btn .icon { width: 1rem; height: 1rem; }

body.theme-vow .pagination {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--vw-line);
}
body.theme-vow .pagination-status { font-size: 0.86rem; color: var(--color-ink-muted); }
body.theme-vow .listing-empty, body.theme-vow .empty {
  text-align: center; padding: clamp(3rem, 7vw, 4.5rem) 1.5rem; display: grid; gap: 0.8rem;
  justify-items: center; border-radius: var(--vw-radius); background: var(--color-surface-raised);
}
body.theme-vow .listing-empty .icon { width: 2.5rem; height: 2.5rem; color: var(--color-ink-muted); }
body.theme-vow .listing-empty h2, body.theme-vow .empty h3 { font-size: 1.25rem; }
body.theme-vow .listing-empty p, body.theme-vow .empty p { color: var(--color-ink-muted); }

/* --------------------------------------------------------------------------- product page */
body.theme-vow .product-page { padding: clamp(1.75rem, 4vw, 2.75rem) 0 0; }
body.theme-vow .product-layout {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start; margin-top: 1.25rem;
}
body.theme-vow .product-gallery { display: grid; gap: 0.7rem; }
body.theme-vow .gallery-main {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--vw-radius); background: var(--color-surface-raised);
  border: 1px solid var(--vw-line);
}
body.theme-vow .gallery-main img { width: 100%; height: 100%; object-fit: cover; }
body.theme-vow .gallery-placeholder { width: 100%; height: 100%; }
body.theme-vow .gallery-thumbs { display: flex; gap: 0.55rem; flex-wrap: wrap; }
body.theme-vow .gallery-thumb {
  width: 4.5rem; aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer;
  border-radius: var(--c-radius-sm); border: 1px solid var(--vw-line); background: var(--color-surface-raised);
}
body.theme-vow .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
body.theme-vow .gallery-thumb[aria-pressed="true"] { border-color: var(--color-accent); border-width: 2px; }
body.theme-vow .product-info {
  position: sticky; top: calc(var(--hr-shown, 0px) + 1.5rem); display: grid; gap: 1rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem); border-radius: var(--vw-radius);
  background: var(--color-surface-raised);
}
/* The description, the plan and the reviews sit under the gallery rather than below the whole
   row, so a booking panel that runs long scrolls beside them instead of beside nothing — and
   the panel spans both rows, which is what lets it stay in view while they are read. */
body.theme-vow .product-layout { grid-template-rows: auto 1fr; }
body.theme-vow .product-info { grid-column: 2; grid-row: 1 / span 2; }
body.theme-vow .product-layout > .product-sections { grid-column: 1; grid-row: 2; }
@media (max-width: 900px) {
  body.theme-vow .product-layout { grid-template-rows: none; }
  body.theme-vow .product-info,
  body.theme-vow .product-layout > .product-sections { grid-column: auto; grid-row: auto; }
}
body.theme-vow .product-info h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
body.theme-vow .product-lead { color: var(--color-ink-muted); }
body.theme-vow .availability {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.9rem; font-weight: 700; color: var(--color-ink);
}
body.theme-vow .availability::before {
  content: ""; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--color-success); flex: none;
}
body.theme-vow .availability.is-out { color: var(--color-ink-muted); }
body.theme-vow .availability.is-out::before { background: var(--color-danger); }
body.theme-vow .availability.is-low::before { background: var(--color-warning); }
body.theme-vow .option-group { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
body.theme-vow .option-group legend {
  padding: 0; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-ink-muted); font-weight: 700; margin-bottom: 0.55rem;
}
body.theme-vow .option-values { display: flex; gap: 0.45rem; flex-wrap: wrap; }
body.theme-vow button.option-pill {
  padding: 0.5rem 1.05rem; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: 0.86rem; font-weight: 600;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-ink);
}
body.theme-vow button.option-pill:hover { border-color: var(--color-ink-muted); }
body.theme-vow button.option-pill[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
body.theme-vow button.option-pill.unavailable { opacity: 0.4; text-decoration: line-through; }
body.theme-vow .buy-form { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; margin-top: 0.35rem; }
body.theme-vow .buy-form-booking { display: block; }
body.theme-vow .qty {
  display: inline-flex; align-items: center; border: 1px solid var(--color-border);
  border-radius: 999px; overflow: hidden; background: var(--color-surface);
}
body.theme-vow .qty button {
  width: 2.4rem; height: 2.8rem; border: 0; background: transparent; color: var(--color-ink);
  font-size: 1.05rem; cursor: pointer;
}
body.theme-vow .qty button:hover { background: var(--color-surface-raised); }
body.theme-vow .qty input {
  width: 2.75rem; height: 2.8rem; border: 0; text-align: center; font: inherit; font-weight: 700;
  background: transparent; color: var(--color-ink); -moz-appearance: textfield;
}
body.theme-vow .qty input::-webkit-outer-spin-button,
body.theme-vow .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.theme-vow .btn-buy { flex: 1 1 12rem; padding-block: 0.9rem; }
body.theme-vow .product-rating a { color: var(--color-ink-muted); }
body.theme-vow .product-rating a:hover { color: var(--color-accent); }

/* --------------------------------------------------------------------------------- footer */
body.theme-vow .site-footer {
  margin-top: var(--vw-gap); background: var(--color-surface-raised);
  padding: clamp(2.5rem, 5vw, 3.75rem) 0 1.5rem;
}
body.theme-vow .footer-grid {
  display: grid; gap: 2.25rem; grid-template-columns: 1.6fr repeat(3, 1fr); margin-bottom: 2.5rem;
}
body.theme-vow .footer-brand .site-brand { display: inline-block; margin-bottom: 0.7rem; }
body.theme-vow .footer-brand p { color: var(--color-ink-muted); font-size: 0.9rem; max-width: 32ch; }
body.theme-vow .footer-col { display: grid; gap: 0.5rem; align-content: start; }
body.theme-vow .footer-col h3 { font-size: 0.95rem; margin-bottom: 0.25rem; color: var(--color-ink); }
body.theme-vow .footer-col a, body.theme-vow .footer-col span { font-size: 0.9rem; color: var(--color-ink-muted); }
body.theme-vow .footer-col a:hover { color: var(--color-accent); }
body.theme-vow .footer-nav { display: flex; flex-wrap: wrap; gap: 1.1rem; }
body.theme-vow .footer-nav a { font-size: 0.85rem; color: var(--color-ink-muted); }
body.theme-vow .footer-nav a:hover { color: var(--color-ink); }
body.theme-vow .footer-bottom {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.5rem; border-top: 1px solid var(--vw-line);
  font-size: 0.83rem; color: var(--color-ink-muted);
}
body.theme-vow .powered-by a { text-decoration: underline; }
body.theme-vow .powered-by a:hover { color: var(--color-ink); }

/* ------------------------------------------------------------------------- shared pages */
/* See the note in studio's stylesheet. */
body.theme-vow .commerce-page { padding: clamp(2.25rem, 5vw, 3.5rem) 0; }
body.theme-vow .card, body.theme-vow .auth-card, body.theme-vow .summary-card,
body.theme-vow .order-panel, body.theme-vow .address-card, body.theme-vow .checkout-section {
  border-radius: var(--vw-radius); border: 1px solid var(--vw-line); background: var(--color-surface);
}
body.theme-vow .input, body.theme-vow .form input, body.theme-vow .form textarea,
body.theme-vow .form select {
  border-radius: var(--c-radius-sm); border: 1px solid var(--color-border); background: var(--color-surface);
}
body.theme-vow .cart-thumb { border-radius: var(--c-radius-sm); }
body.theme-vow .account-nav a { border-radius: 999px; }
body.theme-vow .account-nav a[aria-current="page"] { background: var(--color-accent); color: var(--color-accent-ink); }
body.theme-vow .course-card, body.theme-vow .evt-list-card { border-radius: var(--vw-radius); }
body.theme-vow .empty-state { border-radius: var(--vw-radius); }
body.theme-vow .pill { border-radius: 999px; }

/* ----------------------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  body.theme-vow .vw-hero-inner { grid-template-columns: 1fr; }
  body.theme-vow .vw-hero-media { order: -1; }
  body.theme-vow .product-layout { grid-template-columns: 1fr; }
  body.theme-vow .product-info { position: static; }
  body.theme-vow .footer-grid { grid-template-columns: 1fr 1fr; }
  body.theme-vow .newsletter { grid-template-columns: 1fr; }
}
/* A phone gets two rows: the menu button, the logo and the account, saved and basket icons on
   the first, the language and currency pickers beside the search box on the second. Left to wrap
   on their own they made three rows under a large logo — the logo alone, the icons with the
   pickers, then the search — and 230px of header before the page began, with the menu button
   invisible because its icon had no size (it is not an `.icon-btn`, which is where vow sizes
   its icons). `display: contents` lets the actions' children be placed one by one, and a
   zero-height full-width `::after` is the line break that sends the pickers to the second row
   whatever width the logo leaves (a closed menu kept as that break instead clips its links). */
@media (max-width: 720px) {
  /* **Two rows, laid out by the shared phone bar** (`commerce.css`, `.header-inner.phone-bar`):
     the logo with the counters, then the search box ended by the "Menu" button, with the menu
     opening full width beneath and the language picker as its last entry. What is here is only
     how this design draws them. */
  body.theme-vow .site-nav { gap: 0.15rem; margin-top: 0.25rem; padding-block: 0.6rem; border-block: 1px solid var(--vw-line); }
  /* The menu button, as the search box beside it is drawn: a pill on the raised ground. */
  body.theme-vow .nav-toggle {
    padding-inline: 0.9rem; border-color: var(--color-border); border-radius: 999px;
    background: var(--color-surface-raised); font-weight: 600;
  }
  body.theme-vow .header-inner { gap: 0.5rem 0.75rem; padding: 0.6875rem 0; }
  body.theme-vow .footer-grid { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------- the built front page */
/* A new shop's `/` is a **page in the builder**, seeded from `layouts/home.json` — not this
   theme's `home.html`, which is only the fallback for a shop that hands `/` back. Those blocks
   are shared templates (`apps/builder/templates/builder/blocks/`) styled by `builder.css`, so a
   theme that styles none of them ships a front page identical to every other theme's with the
   palette swapped. That is exactly what happened: seven distinct `home.html` files, and the
   admin's theme gallery — which renders each card as a live iframe of this page — showed seven
   copies of one design.

   `body.theme-vow .builder-page …` is (0,3,x) and beats `builder.css`'s (0,2,0). */
/* Calm and mid-height: the all-rounder's opening is an introduction, not a poster. */
body.theme-vow .builder-page .pb-hero { border-radius: var(--vw-radius); }
body.theme-vow .builder-page .pb-hero-body { padding: clamp(3rem, 7vw, 5.5rem) 0; }
body.theme-vow .builder-page .pb-hero-heading { font-size: clamp(2rem, 4.5vw, 3.2rem); }
body.theme-vow .builder-page .pb-cols-3,
body.theme-vow .builder-page .pb-cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
body.theme-vow .builder-page .pb-stats { border-radius: var(--vw-radius); }


/* ------------------------------------------------------------------------------- motion */
/* Soft and unhurried: a gentle lift, the longest easing in the set.
   The mechanism is `commerce.css`'s — hidden only behind `html.js-reveal`, honouring
   `prefers-reduced-motion` — and a theme sets only its character. */
body.theme-vow {
  /* a friendly shop window: the picture leans in */
  --hover-zoom: 1.05;
  --reveal-shift: 18px;
  --reveal-scale: 1;
  --reveal-duration: 560ms;
  --reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- the month calendar (`partials/_month_calendar.html`, shared; this is only its voice) ---- */
/* The friendly all-rounder: the shared month, softened — rounder days, a gentler panel. */
body.theme-vow a.mcal-day.is-open:not(.is-start):not(.is-end), body.theme-vow .mcal-day.is-today { border-radius: 12px; }


/* =================================================================================== Vow's own */
body.theme-vow .eyebrow { font-size: 0.8125rem; font-weight: 400; letter-spacing: var(--vw-caps); }
body.theme-vow .lead { font-size: 1.125rem; max-width: 34em; }
body.theme-vow .text-link {
  display: inline-block; padding: 0.75rem 0; color: var(--color-ink); font-size: 0.8125rem; font-weight: 400;
  letter-spacing: var(--vw-caps); text-transform: uppercase; box-shadow: inset 0 -1px 0 var(--color-ink);
}
body.theme-vow .text-link:hover { text-decoration: none; color: var(--color-accent); box-shadow: inset 0 -1px 0 var(--color-accent); }
body.theme-vow .announcement { font-size: 0.75rem; font-weight: 400; letter-spacing: var(--vw-caps); }

/* ---- header: the name centred, the menu centred under it, the shop's own controls small at the right */
body.theme-vow .site-header { border-bottom: 0; }
/* Design → Header layout: the line under the header, there or not. */
body.theme-vow[data-header-style="rule"] .site-header { border-bottom: 1px solid var(--vw-line); }
body.theme-vow .site-brand {
  font-size: 1.875rem; font-weight: 400; letter-spacing: var(--vw-caps); text-transform: uppercase;
  margin-right: 0; padding: 0.375rem 0;
}
body.theme-vow .site-brand img { max-height: calc(3rem * var(--logo-scale, 1)); width: auto; }
body.theme-vow .site-nav a {
  font-size: 0.8125rem; font-weight: 400; letter-spacing: var(--vw-caps); text-transform: uppercase;
  color: var(--color-ink); padding: 0.875rem 0; border-radius: 0;
}
body.theme-vow .site-nav a:hover { background: none; color: var(--color-accent); }
body.theme-vow .site-nav a[aria-current="page"] { background: none; color: var(--color-ink); box-shadow: inset 0 -1px 0 var(--color-ink); }
body.theme-vow .site-nav .nav-submenu { top: 100%; padding: 0.5rem 1.25rem; border-radius: 0; gap: 0; }
body.theme-vow .site-nav .nav-submenu a {
  font-size: 0.8125rem; font-weight: 400; color: var(--color-ink); padding: 0.75rem 0; border-radius: 0;
}
body.theme-vow .site-nav .nav-submenu a:hover,
body.theme-vow .site-nav .nav-submenu a:focus-visible { background: none; color: var(--color-accent); }
body.theme-vow .site-nav .nav-submenu-mega .nav-column-head {
  font-size: 0.8125rem; font-weight: 500; letter-spacing: var(--vw-caps); text-transform: uppercase;
}
body.theme-vow .header-actions { gap: 0.25rem; }
body.theme-vow .icon-btn { width: 2.75rem; height: 2.75rem; border-radius: 0; }
body.theme-vow .icon-btn:hover { background: none; color: var(--color-accent); }
body.theme-vow .saved-link {
  font-size: 0.75rem; font-weight: 400; letter-spacing: var(--vw-caps); text-transform: uppercase;
  color: var(--color-ink-muted); padding: 0.875rem 0.5rem;
}
body.theme-vow .cart-count { top: 0.2rem; right: 0.2rem; font-weight: 500; }
body.theme-vow .site-search { border-radius: 0; background: var(--color-surface); }
@media (min-width: 721px) {
  body.theme-vow .header-inner {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
    gap: 0.5rem 1rem; padding: 2.25rem 0 1.125rem;
  }
  body.theme-vow .header-inner > .site-brand { grid-column: 2; grid-row: 1; justify-self: center; text-align: center; }
  body.theme-vow .header-inner > .header-actions { grid-column: 3; grid-row: 1; justify-self: end; }
  body.theme-vow .header-inner > .site-nav {
    grid-column: 1 / -1; grid-row: 2; justify-content: center; flex-wrap: wrap; gap: 0 2.5rem; min-width: 0;
  }
}
/* A tablet has no room for the search box and the pickers beside a centred name: there the name
   has the first line to itself, the shop's controls the second and the menu the third. */
@media (min-width: 721px) and (max-width: 1199px) {
  body.theme-vow .header-inner { grid-template-columns: minmax(0, 1fr); padding-top: 1.5rem; }
  body.theme-vow .header-inner > .site-brand { grid-column: 1; grid-row: 1; }
  body.theme-vow .header-inner > .header-actions {
    grid-column: 1; grid-row: 2; justify-self: center; flex-wrap: wrap; justify-content: center; min-width: 0; max-width: 100%;
  }
  body.theme-vow .header-inner > .site-nav { grid-column: 1; grid-row: 3; }
}

/* ---- buttons: square, the accent, spaced capitals */
body.theme-vow .btn {
  min-height: 3.25rem; padding: 0.5rem 2.75rem; border-radius: 0;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: var(--vw-caps); text-transform: uppercase;
}
body.theme-vow .btn:hover { transform: none; }
body.theme-vow .btn-sm { min-height: 2.75rem; padding: 0.25rem 1.25rem; font-size: 0.75rem; }
body.theme-vow .btn-outline, body.theme-vow .btn-secondary { border-color: var(--color-ink); }

/* ---- the listing: a centred heading, the kinds as capitals, the pictures three across */
body.theme-vow .listing-hero { background: none; border: 0; padding: 4rem 0 0; text-align: center; }
body.theme-vow .listing-hero h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1.1; }
body.theme-vow .listing-hero .lead { margin: 0.75rem auto 0; }
body.theme-vow .listing-hero .eyebrow { margin-bottom: 0.5rem; }
body.theme-vow .listing-hero .site-search-page { margin-inline: auto; }
body.theme-vow .listing { padding-top: 0; padding-bottom: 6.875rem; }
body.theme-vow .listing-hero + .listing:not(:has(.filter-chips)) { padding-top: 3rem; }
body.theme-vow .filter-chips { justify-content: center; gap: 0 2.25rem; margin: 1.25rem 0 2rem; }
body.theme-vow .filter-chips a {
  padding: 0.875rem 0; border: 0; border-radius: 0; background: none; color: var(--color-ink-muted);
  font-size: 0.8125rem; font-weight: 400; letter-spacing: var(--vw-caps); text-transform: uppercase;
}
body.theme-vow .filter-chips a:hover { color: var(--color-ink); }
body.theme-vow .filter-chips a[aria-current="true"] {
  background: none; color: var(--color-ink); border: 0; box-shadow: inset 0 -1px 0 var(--color-ink);
}
/* How many and in what order: one quiet line. The filter is folded behind a word beside it. */
body.theme-vow .listing-toolbar {
  background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem;
}
body.theme-vow .listing-count, body.theme-vow .sort-links { font-size: 0.875rem; color: var(--color-ink-muted); }
body.theme-vow .sort-links a { font-weight: 400; padding: 0.75rem 0; }
body.theme-vow .sort-links a[aria-current="true"] { color: var(--color-ink); box-shadow: inset 0 -1px 0 var(--color-ink); }
body.theme-vow .facets-panel { border: 0; background: none; margin: 0 0 0.5rem; padding: 0; border-radius: 0; }
body.theme-vow .facets-panel[open] { border-bottom: 1px solid var(--vw-line); padding-bottom: 1rem; margin-bottom: 1.5rem; }
body.theme-vow .facets-panel > .facets-summary {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0; cursor: pointer;
  font-size: 0.8125rem; font-weight: 400; letter-spacing: var(--vw-caps); text-transform: uppercase; color: var(--color-ink);
}
body.theme-vow .facets-panel > .facets-summary:hover { color: var(--color-accent); }
/* The shared summary is inert on a wide screen (there the panel is a rail that is always open);
   folded, it is the thing to press, so it takes the pointer back and says which way it goes. */
body.theme-vow .facets-panel > .facets-summary { pointer-events: auto; }
body.theme-vow .facets-panel > .facets-summary > h2.facets-title { letter-spacing: var(--vw-caps); text-transform: uppercase; }
body.theme-vow .facets-panel > .facets-summary::after {
  content: "+"; display: inline; width: auto; height: auto; margin: 0; border: 0; transform: none;
}
body.theme-vow .facets-panel[open] > .facets-summary::after { content: "\2212"; transform: none; }
body.theme-vow .facets-panel .facets { padding-inline: 0; background: none; border: 0; }

/* Three across is this design's own number; `Design → Products across` still overrides it. */
body.theme-vow .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.5rem 2rem; }
@media (max-width: 900px) { body.theme-vow .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  body.theme-vow .listing .product-grid { grid-template-columns: minmax(0, 1fr); }
  body.theme-vow .builder-page div.product-grid.pb-count-3 { --pb-count: 1; }
}
body.theme-vow .product-card {
  background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; text-align: center;
}
body.theme-vow .product-card:hover { box-shadow: none; transform: none; }
body.theme-vow .product-media { aspect-ratio: 3 / 2; border-radius: 0; }
body.theme-vow .product-body { padding: 1.25rem 0 0; gap: 0.25rem; justify-items: center; }
body.theme-vow .product-body h3 {
  font-family: var(--font-body, Jost, system-ui, sans-serif); font-size: 0.8125rem; font-weight: 400; line-height: 1.6;
  letter-spacing: var(--vw-caps); text-transform: uppercase;
}
body.theme-vow .price { font-size: 0.875rem; font-weight: 400; color: var(--pb-muted, var(--color-ink-muted)); }
body.theme-vow .price-from, body.theme-vow .price-approx, body.theme-vow .price-compare { font-weight: 400; }
body.theme-vow .product-card .option-pills { justify-content: center; }
body.theme-vow .product-badge {
  border-radius: 0; background: var(--color-surface); color: var(--color-ink);
  font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.3rem 0.6rem;
}
body.theme-vow .product-badge-kind { background: var(--color-surface); color: var(--color-ink-muted); }
body.theme-vow .wish-btn { border-radius: 0; }
body.theme-vow .pagination { border: 0; margin-top: 4rem; }
body.theme-vow .listing-empty, body.theme-vow .empty { border-radius: 0; }

/* A shelf: the smaller, portrait card with its name in the serif, under a hairline. It is the
   four-across grid on a built page and "you might also like" under a photograph. */
body.theme-vow .vw-shelf { padding-top: 0; }
body.theme-vow .vw-shelf .section-head,
body.theme-vow .builder-page .pb-product-grid:has(.pb-count-4) .pb-block-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  padding-top: 2.5rem; border-top: 1px solid var(--vw-line); margin-bottom: 1.75rem;
}
body.theme-vow .vw-shelf .section-head h2,
body.theme-vow .builder-page .pb-product-grid:has(.pb-count-4) .pb-heading { font-size: 1.875rem; }
body.theme-vow .vw-shelf .product-grid { grid-template-columns: repeat(auto-fill, minmax(min(12.5rem, 100%), 1fr)); gap: 1.5rem; }
body.theme-vow .builder-page .product-grid.pb-count-4 { gap: 1.5rem; }
body.theme-vow .vw-shelf .product-card,
body.theme-vow .builder-page .pb-count-4 .product-card { text-align: start; }
body.theme-vow .vw-shelf .product-media,
body.theme-vow .builder-page .pb-count-4 .product-media { aspect-ratio: 4 / 5; }
body.theme-vow .vw-shelf .product-body,
body.theme-vow .builder-page .pb-count-4 .product-body { padding-top: 0.75rem; gap: 0.125rem; justify-items: start; }
body.theme-vow .vw-shelf .product-body h3,
body.theme-vow .builder-page .pb-count-4 .product-body h3 {
  font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif); font-size: 1.25rem; line-height: 1.3;
  letter-spacing: 0; text-transform: none;
}
body.theme-vow .vw-shelf .option-pills,
body.theme-vow .builder-page .pb-count-4 .option-pills { justify-content: flex-start; }

/* ---- one photograph's page: the photograph whole, then one narrow centred column */
body.theme-vow .product-page { padding: 0; }
body.theme-vow .product-layout { display: block; }
body.theme-vow .product-gallery { max-width: 80rem; margin: 0 auto; padding: 1rem 1.5rem 0; gap: 0.75rem; }
body.theme-vow .gallery-main {
  aspect-ratio: auto; border: 0; border-radius: 0; background: none; overflow: visible; position: relative;
}
body.theme-vow .gallery-main img { width: 100%; height: auto; max-height: 48.75rem; object-fit: contain; }
body.theme-vow .gallery-main .gallery-placeholder { aspect-ratio: 3 / 2; }
body.theme-vow .gallery-thumbs { justify-content: center; }
body.theme-vow .gallery-thumb { border-radius: 0; }
body.theme-vow .product-info {
  position: static; max-width: 40rem; margin: 0 auto; padding: 2rem 1.5rem 5.5rem;
  display: grid; gap: 0; justify-items: center; text-align: center; background: none; border: 0; border-radius: 0;
}
body.theme-vow .product-info > * { min-width: 0; max-width: 100%; }
body.theme-vow .product-info .breadcrumbs {
  justify-content: center; margin: 0; padding: 0.75rem 0;
  font-size: 0.8125rem; letter-spacing: var(--vw-caps); text-transform: uppercase; color: var(--color-ink-muted);
}
body.theme-vow .product-info .breadcrumbs [aria-current="page"] { font-weight: 400; color: var(--color-ink-muted); }
body.theme-vow .product-info h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1.05; margin: 0.5rem 0 1.75rem; }
body.theme-vow .product-rating { margin: -1rem 0 1.5rem; }
body.theme-vow .option-group { justify-items: center; gap: 0.75rem; margin-bottom: 1.25rem; width: 100%; }
body.theme-vow .option-group legend {
  width: 100%; text-align: center; padding: 0; margin: 0 0 0.75rem;
  font-size: 0.8125rem; font-weight: 400; letter-spacing: var(--vw-caps); text-transform: uppercase; color: var(--color-ink);
}
body.theme-vow .option-values { justify-content: center; gap: 0.5rem; }
body.theme-vow button.option-pill {
  min-height: 2.75rem; padding: 0 1.125rem; border-radius: 0; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-ink); font: inherit; font-size: 0.9375rem; cursor: pointer;
}
body.theme-vow button.option-pill:hover { border-color: var(--color-ink); }
body.theme-vow button.option-pill[aria-pressed="true"] {
  background: var(--color-ink); color: var(--color-surface); border-color: var(--color-ink);
}
body.theme-vow .product-lead { font-size: 1rem; margin-top: 0; }
body.theme-vow .price-lg {
  font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif); font-size: 2.125rem; color: var(--color-ink);
  margin: 1.25rem 0 0.5rem; line-height: 1.2;
}
body.theme-vow .availability { justify-content: center; margin-bottom: 1.25rem; }
/* A shop that watermarks says so under that line (`partials/_watermark_note.html`). The two
   are read together, so the space that sets them apart from the button goes under the second. */
body.theme-vow .availability:has(+ .watermark-note) { margin-bottom: 0; }
body.theme-vow p.watermark-note { margin-bottom: 1.25rem; }
body.theme-vow .buy-form { justify-content: center; margin-top: 0; width: 100%; }
body.theme-vow .qty { border-radius: 0; }
body.theme-vow .btn-buy { flex: 0 1 auto; padding-block: 0.5rem; }
body.theme-vow .product-info .notify-me { text-align: start; width: 100%; }
body.theme-vow .product-layout > .product-sections {
  max-width: 46rem; margin: 0 auto; padding: 0 1.5rem 5.5rem; border-top: 0;
}

/* ---- footer: one quiet band under a hairline */
body.theme-vow .site-footer {
  margin-top: 0; background: var(--color-surface); border-top: 1px solid var(--vw-line);
  padding: 2.5rem 0 0; font-size: 0.875rem; color: var(--color-ink-muted);
}
body.theme-vow .footer-brand .site-brand { font-size: 1.25rem; margin-bottom: 0.5rem; padding: 0; }
body.theme-vow .footer-col h3 {
  font-family: var(--font-body, Jost, system-ui, sans-serif); font-size: 0.8125rem; font-weight: 400;
  letter-spacing: var(--vw-caps); text-transform: uppercase; color: var(--color-ink);
}
body.theme-vow .footer-col a, body.theme-vow .footer-col span { font-size: 0.875rem; }
body.theme-vow .footer-bottom { font-size: 0.875rem; }

/* ---- the shared pages, squared */
body.theme-vow .card, body.theme-vow .auth-card, body.theme-vow .summary-card,
body.theme-vow .order-panel, body.theme-vow .address-card, body.theme-vow .checkout-section { border-radius: 0; box-shadow: none; }
body.theme-vow .input, body.theme-vow .form input, body.theme-vow .form textarea,
body.theme-vow .form select { border-radius: 0; }
body.theme-vow .account-nav a, body.theme-vow .pill { border-radius: 0; }

@media (max-width: 720px) {
  body.theme-vow .site-brand { font-size: 1.125rem; letter-spacing: 0.16em; white-space: nowrap; }
  body.theme-vow .site-nav a { padding: 0.875rem 0; }
  body.theme-vow .nav-toggle { border-radius: 0; background: none; font-weight: 400; }
  body.theme-vow .listing-hero { padding-top: 2.5rem; }
  body.theme-vow .filter-chips { gap: 0 1.5rem; }
  body.theme-vow .product-grid { gap: 2.25rem 1rem; }
  body.theme-vow main .builder-page .pb-product-grid:has(.pb-count-3),
  body.theme-vow main .builder-page .pb-product-grid:has(.pb-count-4) { padding-block: 0 4.5rem; }
  body.theme-vow .product-gallery { padding: 0; }
  body.theme-vow .product-info { padding-bottom: 3.5rem; }
}

/* ---- the built front page -------------------------------------------------------------- */
body.theme-vow .builder-page { --pb-radius: 0px; }
/* The page is as wide as the window with the mock-up's gutter, not the shared 72rem: every rule
   `builder.css` writes about a block's track is restated against `--vw-shell` and `--vw-gutter`,
   the whole family, or a narrow block and a wide one stop sharing an edge. A built footer keeps
   the shared track. */
body.theme-vow main .builder-page .pb-block,
body.theme-vow main .builder-page .pb-width-wide { width: min(var(--vw-shell), calc(100% - 2 * var(--vw-gutter))); }
body.theme-vow main .builder-page .pb-width-narrow { width: min(48rem, calc(100% - 2 * var(--vw-gutter))); }
body.theme-vow main .builder-page .pb-width-full { width: 100%; }
body.theme-vow main .builder-page .pb-align-left.pb-width-narrow {
  margin-inline: max(var(--vw-gutter), calc((100% - var(--vw-shell)) / 2)) auto;
}
body.theme-vow main .builder-page .pb-align-right.pb-width-narrow {
  margin-inline: auto max(var(--vw-gutter), calc((100% - var(--vw-shell)) / 2));
}
body.theme-vow main .builder-page .pb-bleed,
body.theme-vow main .builder-page .pb-bleed.pb-width-wide,
body.theme-vow main .builder-page .pb-bleed.pb-width-full,
body.theme-vow main .builder-page .pb-bleed.pb-width-narrow,
body.theme-vow main .builder-page .pb-bleed.pb-align-left.pb-width-narrow,
body.theme-vow main .builder-page .pb-bleed.pb-align-right.pb-width-narrow {
  width: 100%; margin-inline: 0;
  padding-inline: max(var(--vw-gutter), calc((100% - var(--vw-shell)) / 2));
}
body.theme-vow main .builder-page .pb-bleed.pb-width-narrow,
body.theme-vow main .builder-page .pb-bleed.pb-align-left.pb-width-narrow,
body.theme-vow main .builder-page .pb-bleed.pb-align-right.pb-width-narrow {
  padding-inline: max(var(--vw-gutter), calc((100% - 48rem) / 2));
}
body.theme-vow .builder-page .pb-heading { font-size: 2.5rem; }

/* The opening: the photograph alone, most of the height of the window, with nothing over it.
   The words come after it on the page's own ground, centred, in the large light serif. The
   picture leaves the block's stacking and becomes its first line; the veil the shared block
   draws over a picture is not drawn, whatever the block's overlay setting says. */
body.theme-vow main .builder-page .pb-hero[data-has-image] { padding: 0; overflow: visible; }
body.theme-vow .builder-page .pb-hero[data-has-image] .pb-hero-image {
  position: static; display: block; width: 100%; height: min(48.75rem, 78svh); object-fit: cover;
}
body.theme-vow .builder-page .pb-hero[data-has-image]::after,
body.theme-vow .builder-page .pb-hero[data-has-image].pb-align-center::after,
body.theme-vow .builder-page .pb-hero[data-has-image].pb-align-right::after { content: none; }
body.theme-vow .builder-page .pb-hero .pb-hero-body,
body.theme-vow .builder-page .pb-hero[data-has-image] .pb-hero-body { padding: 4.5rem 0 6rem; color: var(--pb-ink); }
/* The picture took the block's gutter with it to reach both edges; the words get it back. */
body.theme-vow .builder-page .pb-hero.pb-bleed[data-has-image] .pb-hero-body {
  padding-inline: max(var(--vw-gutter), calc((100% - var(--vw-shell)) / 2));
}
body.theme-vow .builder-page .pb-hero.pb-align-center .pb-hero-body,
body.theme-vow .builder-page .pb-hero.pb-align-center[data-has-image] .pb-hero-body {
  max-width: 56.25rem; margin-inline: auto; padding-inline: 1.5rem;
}
body.theme-vow .builder-page .pb-hero-heading,
body.theme-vow .builder-page .pb-hero[data-has-image] .pb-hero-heading {
  font-size: clamp(2.75rem, 5.4vw, 4rem); line-height: 1.05; color: var(--pb-ink); max-width: 11em;
  text-wrap: balance;
}
body.theme-vow .builder-page .pb-hero-body > .lead,
body.theme-vow .builder-page .pb-hero[data-has-image] .pb-hero-body > .lead {
  margin-top: 2.25rem; color: var(--pb-muted); font-size: 1.125rem; max-width: 34em;
}
body.theme-vow .builder-page .pb-hero-body > .pb-actions { margin-top: 2.5rem; }
/* The opening's call is an underlined word, not a button. */
body.theme-vow .builder-page .pb-hero .pb-actions .btn,
body.theme-vow .builder-page .pb-hero[data-has-image] .pb-actions .btn {
  min-height: 0; padding: 0.875rem 0.25rem; background: none; color: var(--pb-ink); border: 0;
  box-shadow: inset 0 -1px 0 var(--pb-ink); font-weight: 400; filter: none;
}
body.theme-vow .builder-page .pb-hero:not(.pb-tone-accent):not(.pb-tone-inverted) .pb-actions .btn:hover { color: var(--color-accent); box-shadow: inset 0 -1px 0 var(--color-accent); }

/* "Recent stories": a small label in spaced capitals over the pictures. */
body.theme-vow .builder-page .pb-product-grid:has(.pb-count-3) .pb-block-head { justify-content: center; margin-bottom: 2rem; }
body.theme-vow .builder-page .pb-product-grid:has(.pb-count-3) .pb-heading {
  font-family: var(--font-body, Jost, system-ui, sans-serif); font-size: 0.8125rem; font-weight: 400; line-height: 1.6;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-ink-muted);
}
body.theme-vow .builder-page .product-grid.pb-count-3 { gap: 2rem; }
body.theme-vow main .builder-page .pb-product-grid:has(.pb-count-3),
body.theme-vow main .builder-page .pb-product-grid:has(.pb-count-4) { padding-block: 0 6.875rem; }

/* Kind words: one sentence, large and italic, on the raised ground from edge to edge. */
body.theme-vow main .builder-page .pb-testimonials.pb-bleed { background: var(--color-surface-raised); padding-block: 6.875rem; text-align: center; }
body.theme-vow .builder-page .pb-testimonials .pb-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4rem; }
body.theme-vow .builder-page .pb-testimonials .pb-quote { padding: 0; border: 0; background: none; }
body.theme-vow .builder-page .pb-testimonials .pb-quote blockquote {
  max-width: 51.25rem; margin: 0 auto; font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif);
  font-style: italic; font-size: clamp(1.75rem, 3.2vw, 2.375rem); line-height: 1.3; color: var(--color-ink);
}
body.theme-vow .builder-page .pb-testimonials .pb-quote figcaption {
  margin-top: 1.75rem; font-size: 0.8125rem; letter-spacing: var(--vw-caps); text-transform: uppercase; color: var(--color-ink-muted);
}
body.theme-vow .builder-page .pb-testimonials .pb-quote figcaption strong { font-weight: 400; }
/* Kind words as letters: the photograph under an arch, the letter in the body face, signed with
   the names in the italic serif and the place in small capitals. Left-aligned on the raised
   ground, which centres the one-line quotes. */
body.theme-vow main .builder-page .pb-testimonials-letters.pb-bleed { text-align: start; }
body.theme-vow .builder-page .pb-letter-photo img { border-radius: 999px 999px 0 0; }
body.theme-vow .builder-page .pb-letter blockquote { font-size: 1rem; color: var(--color-ink); }
body.theme-vow .builder-page .pb-letter figcaption strong {
  font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif); font-style: italic;
  font-weight: 400; font-size: 1.75rem; line-height: 1.2; color: var(--color-ink);
}
body.theme-vow .builder-page .pb-letter figcaption .muted {
  font-size: 0.8125rem; letter-spacing: var(--vw-caps); text-transform: uppercase; color: var(--color-ink-muted);
}

/* How it goes: the steps centred, each under its number in the italic serif and the accent. */
body.theme-vow .builder-page .pb-columns.pb-align-center { text-align: center; }
body.theme-vow .builder-page .pb-columns.pb-align-center > .pb-heading { margin-bottom: 3rem; }
body.theme-vow .builder-page .pb-columns.pb-align-center .pb-grid { gap: 3rem; max-width: 67.5rem; margin-inline: auto; counter-reset: vw-step; }
body.theme-vow .builder-page .pb-columns.pb-align-center .pb-column { counter-increment: vw-step; justify-items: center; gap: 0.5rem; }
body.theme-vow .builder-page .pb-columns.pb-align-center .pb-column::before {
  content: counter(vw-step, lower-roman) "."; font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif);
  font-style: italic; font-size: 1.875rem; line-height: 1.2; color: var(--color-accent);
}
body.theme-vow .builder-page .pb-columns.pb-align-center .pb-column h3 {
  font-family: var(--font-body, Jost, system-ui, sans-serif); font-size: 0.8125rem; font-weight: 500; line-height: 1.6;
  letter-spacing: var(--vw-caps); text-transform: uppercase;
}

/* The closing band: the accent from edge to edge, the question in the serif, a pale button. */
body.theme-vow main .builder-page .pb-banner.pb-bleed { padding-block: 6rem; }
body.theme-vow .builder-page .pb-banner .pb-heading { font-size: clamp(2.25rem, 4.4vw, 3.25rem); }
body.theme-vow .builder-page .pb-banner .lead { max-width: 30em; }
body.theme-vow .builder-page .pb-banner.pb-align-center .lead { margin-inline: auto; }
body.theme-vow .builder-page .pb-banner .pb-actions { margin-top: 1.25rem; }
@media (max-width: 720px) {
  body.theme-vow .builder-page .pb-hero[data-has-image] .pb-hero-image { height: min(28.75rem, 62svh); }
  body.theme-vow .builder-page .pb-hero .pb-hero-body,
  body.theme-vow .builder-page .pb-hero[data-has-image] .pb-hero-body { padding-block: 2.5rem 3.5rem; }
  body.theme-vow main .builder-page .pb-testimonials.pb-bleed { padding-block: 4rem; }
  body.theme-vow main .builder-page .pb-banner.pb-bleed { padding-block: 4rem; }
}

/* The grade's footnote and the booking panel under it (`events/_guide.html`, shared). The shared
   rule spaces them with a one-class margin, which this design's `p` reset beats. */
body.theme-vow p.evt-guide-grade-note { margin-bottom: 1.25rem; }
/* The facts follow the line under the name directly when the booking panel prints the price
   itself (`panel_prices_itself`); the price's own top margin used to be the space between them. */
body.theme-vow .product-info .evt-guide-facts { width: 100%; margin-top: 1.25rem; text-align: start; }