/* Harbour — the friendly all-rounder.
   ---------------------------------------------------------------------------------------------
   The archetype is a modern general-purpose shop: soft organic shapes behind a calm opening,
   a small eyebrow over a medium headline, one clear filled pill, and categories laid out in the
   open under a centred section heading. Nothing shouts; the shop sells a bit of everything and
   the design's job is to make none of it look out of place.

   The blobs are CSS radial gradients on a pseudo-element, not images: a decorative shape that
   is an `<img>` is a request that fails on a slow connection and a hole in the layout when it
   does.

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

/* --------------------------------------------------------------------------------- tokens */
body.theme-harbour {
  --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: 16px;
  --c-radius-sm: 11px;

  --hb-shell: 78rem;
  --hb-radius: 16px;
  --hb-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.62; margin: 0;
}
body.theme-harbour, body.theme-harbour *, body.theme-harbour *::before, body.theme-harbour *::after {
  box-sizing: border-box;
}
body.theme-harbour :where(a) { color: inherit; text-decoration: none; }
body.theme-harbour :where(img) { max-width: 100%; display: block; }
body.theme-harbour h1, body.theme-harbour h2, body.theme-harbour h3, body.theme-harbour h4 {
  font-family: var(--font-heading, Manrope, system-ui, sans-serif);
  margin: 0; font-weight: 800; line-height: 1.15; letter-spacing: -0.025em;
}
body.theme-harbour p { margin: 0; }
body.theme-harbour .container { width: min(var(--hb-shell), calc(100% - 2.5rem)); margin-inline: auto; }
body.theme-harbour .section { padding: var(--hb-gap) 0; }
body.theme-harbour .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-harbour .lead { color: var(--color-ink-muted); font-size: 1.02rem; max-width: 48ch; }
body.theme-harbour .muted, body.theme-harbour .c-muted { color: var(--color-ink-muted); }
body.theme-harbour .text-link { color: var(--color-accent); font-weight: 700; font-size: 0.9rem; }
body.theme-harbour .text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------- announcement */
body.theme-harbour .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-harbour .site-header {
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
  position: relative; z-index: 5;
}
body.theme-harbour .header-inner {
  display: flex; align-items: center; gap: 1.5rem; padding: 1rem 0; flex-wrap: wrap;
}
body.theme-harbour .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-harbour .site-brand img { max-height: calc(2rem * var(--logo-scale, 1)); width: auto; }
/* Logo centred on a row of its own above the menu (Design → `brand_position`). The brand
   moves to the front with auto margins either side, and a zero-height break after it starts a
   new line. That break is a flex line of its own, so it would add a second row gap; the brand's
   negative bottom margin takes one back (a line's height is its item's margin box, and the logo
   simply overhangs into the gap below it). */
body.theme-harbour[data-brand-position="centre"] .header-inner > .site-brand {
  order: -2; margin-inline: auto; margin-bottom: calc(-1 * 1.5rem);
}
body.theme-harbour[data-brand-position="centre"] .header-inner::after {
  content: ""; order: -1; flex-basis: 100%; height: 0;
}
body.theme-harbour[data-brand-position="centre"] .header-inner > .site-nav { margin-right: auto; }
body.theme-harbour .site-nav { display: flex; gap: 0.4rem; align-items: center; }
body.theme-harbour .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-harbour .site-nav a:hover { background: var(--color-surface-raised); color: var(--color-ink); }
body.theme-harbour .site-nav a[aria-current="page"] {
  background: var(--color-accent-soft, var(--color-surface-raised)); color: var(--color-ink);
}
/* The drop-down, in harbour'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-harbour .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-harbour .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-harbour .site-nav .nav-submenu a:hover,
body.theme-harbour .site-nav .nav-submenu a:focus-visible {
  background: var(--color-surface-raised); color: var(--color-ink);
}
/* Sentence case and full ink, because harbour is the friendly one: the uppercase micro-label
   commerce falls back to belongs to press and studio, not here. */
body.theme-harbour .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-harbour .header-actions { display: flex; align-items: center; gap: 0.7rem; }
body.theme-harbour .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-harbour .site-search {
  max-width: 15rem; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-surface-raised);
}
body.theme-harbour .site-search-input {
  padding: 0.55rem 0.35rem 0.55rem 1rem; font-size: 0.88rem; color: var(--color-ink);
}
body.theme-harbour .site-search-input::placeholder { color: var(--color-ink-muted); }
body.theme-harbour .site-search-button { padding-inline: 0.4rem 0.8rem; }
body.theme-harbour .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-harbour .icon-btn:hover { background: var(--color-surface-raised); }
body.theme-harbour .icon-btn .icon { width: 1.25rem; height: 1.25rem; }
body.theme-harbour .saved-link { font-size: 0.88rem; font-weight: 600; color: var(--color-ink-muted); }
body.theme-harbour .saved-link:hover { color: var(--color-accent); }
body.theme-harbour .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-harbour .nav-toggle-input { display: none; }
body.theme-harbour .nav-toggle { display: none; cursor: pointer; color: var(--color-ink); }

/* -------------------------------------------------------------------------------- buttons */
body.theme-harbour .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-harbour .btn:hover { filter: brightness(0.93); transform: translateY(-1px); }
body.theme-harbour .btn:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
body.theme-harbour .btn:disabled, body.theme-harbour .btn[disabled] { opacity: 0.45; cursor: not-allowed; filter: none; transform: none; }
body.theme-harbour .btn-sm { padding: 0.45rem 1rem; font-size: 0.83rem; }
body.theme-harbour .btn-outline, body.theme-harbour .btn-secondary {
  background: transparent; color: var(--color-ink); border-color: var(--color-border);
}
body.theme-harbour .btn-outline:hover, body.theme-harbour .btn-secondary:hover {
  background: var(--color-surface-raised); filter: none;
}
body.theme-harbour .btn-full { width: 100%; }

/* ----------------------------------------------------------------------------------- hero */
body.theme-harbour .hb-hero { position: relative; background: var(--color-surface-raised); overflow: hidden; }
body.theme-harbour[data-header-style="flat"] .hb-hero-art { display: none; }
body.theme-harbour .hb-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-harbour .hb-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-harbour .hb-hero-copy { display: grid; gap: 1.1rem; }
body.theme-harbour .hb-hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
body.theme-harbour .hb-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-harbour .hb-hero-media {
  aspect-ratio: 5 / 4; overflow: hidden; background: var(--color-surface);
  border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%;
}
body.theme-harbour .hb-hero-media img { width: 100%; height: 100%; object-fit: cover; }
body.theme-harbour .hb-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-harbour .section-head {
  display: grid; gap: 0.4rem; justify-items: center; text-align: center; margin-bottom: 2.25rem;
}
body.theme-harbour .section-head h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); }
body.theme-harbour .section-head .text-link { margin-top: 0.4rem; }

/* Category tiles, laid out in the open. */
body.theme-harbour .hb-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 1.25rem; }
body.theme-harbour .hb-cat {
  position: relative; display: grid; align-content: end; gap: 0.2rem;
  min-height: 12rem; padding: 1.25rem; overflow: hidden;
  border-radius: var(--hb-radius); background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
}
body.theme-harbour .hb-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.theme-harbour .hb-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-harbour .hb-cat.has-image::after { opacity: 1; }
body.theme-harbour .hb-cat-label, body.theme-harbour .hb-cat-hint { position: relative; z-index: 2; }
body.theme-harbour .hb-cat-label { font-weight: 800; font-size: 1.05rem; }
body.theme-harbour .hb-cat-hint { font-size: 0.85rem; color: var(--color-ink-muted); }
body.theme-harbour .hb-cat.has-image .hb-cat-label, body.theme-harbour .hb-cat.has-image .hb-cat-hint {
  color: var(--color-surface);
}
body.theme-harbour .hb-cat:hover { border-color: var(--color-accent); }

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

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

/* -------------------------------------------------------------------------------- listing */
body.theme-harbour .listing-hero {
  background: var(--color-surface-raised); padding: clamp(2.25rem, 5vw, 3.5rem) 0;
}
body.theme-harbour .listing-hero h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
body.theme-harbour .listing-hero .lead { margin-top: 0.85rem; }
body.theme-harbour .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-harbour .breadcrumbs a:hover { color: var(--color-accent); }
body.theme-harbour .breadcrumbs [aria-current="page"] { color: var(--color-ink); font-weight: 600; }
body.theme-harbour .listing { padding-top: 2.25rem; }
body.theme-harbour .filter-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
body.theme-harbour .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-harbour .filter-chips a:hover { color: var(--color-ink); }
body.theme-harbour .filter-chips a[aria-current="true"] {
  background: var(--color-accent); color: var(--color-accent-ink);
}
body.theme-harbour .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-harbour .listing-toolbar { border-radius: var(--c-radius); } }
body.theme-harbour .listing-count { font-size: 0.86rem; color: var(--color-ink-muted); }
body.theme-harbour .sort-links { display: flex; gap: 0.85rem; align-items: center; font-size: 0.85rem; }
body.theme-harbour .sort-links span { color: var(--color-ink-muted); }
body.theme-harbour .sort-links a { color: var(--color-ink-muted); font-weight: 600; }
body.theme-harbour .sort-links a:hover { color: var(--color-ink); }
body.theme-harbour .sort-links a[aria-current="true"] { color: var(--color-accent); }

body.theme-harbour .product-grid {
  display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}
body.theme-harbour .product-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--hb-radius); background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
body.theme-harbour .product-card:hover { box-shadow: var(--c-shadow); transform: translateY(-3px); }
body.theme-harbour .product-media {
  display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--color-surface-raised);
}
body.theme-harbour .product-media img { width: 100%; height: 100%; object-fit: cover; }
body.theme-harbour .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-harbour .product-media.pattern-b { background: var(--color-surface-raised); }
body.theme-harbour .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-harbour .product-media.pattern-d { background: linear-gradient(30deg, var(--color-surface-raised), var(--color-surface)); }
body.theme-harbour .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-harbour .product-badge-kind { background: var(--color-ink); color: var(--color-surface); }
body.theme-harbour .product-body { padding: 1rem 1.1rem 1.2rem; display: grid; gap: 0.3rem; }
body.theme-harbour .product-body h3 { font-size: 1rem; }
body.theme-harbour .product-body h3 a:hover { color: var(--color-accent); }
body.theme-harbour .product-meta { font-size: 0.84rem; color: var(--color-ink-muted); }
body.theme-harbour .price {
  font-family: var(--font-heading, Manrope, sans-serif); font-size: 1.05rem; font-weight: 800;
  color: var(--color-ink); display: flex; gap: 0.45rem; align-items: baseline; flex-wrap: wrap;
}
body.theme-harbour .price-from, body.theme-harbour .price-approx { font-size: 0.76rem; font-weight: 500; color: var(--color-ink-muted); }
body.theme-harbour .price-compare { font-size: 0.86rem; font-weight: 500; color: var(--color-ink-muted); }
body.theme-harbour .price-lg { font-size: clamp(1.5rem, 3vw, 2.1rem); }
body.theme-harbour .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(--color-border); color: var(--color-ink-muted);
}
body.theme-harbour .wishlist-btn:hover { color: var(--color-accent); border-color: var(--color-accent); }
body.theme-harbour .wishlist-btn .icon { width: 1rem; height: 1rem; }

body.theme-harbour .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(--color-border);
}
body.theme-harbour .pagination-status { font-size: 0.86rem; color: var(--color-ink-muted); }
body.theme-harbour .listing-empty, body.theme-harbour .empty {
  text-align: center; padding: clamp(3rem, 7vw, 4.5rem) 1.5rem; display: grid; gap: 0.8rem;
  justify-items: center; border-radius: var(--hb-radius); background: var(--color-surface-raised);
}
body.theme-harbour .listing-empty .icon { width: 2.5rem; height: 2.5rem; color: var(--color-ink-muted); }
body.theme-harbour .listing-empty h2, body.theme-harbour .empty h3 { font-size: 1.25rem; }
body.theme-harbour .listing-empty p, body.theme-harbour .empty p { color: var(--color-ink-muted); }

/* --------------------------------------------------------------------------- product page */
body.theme-harbour .product-page { padding: clamp(1.75rem, 4vw, 2.75rem) 0 0; }
body.theme-harbour .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-harbour .product-gallery { display: grid; gap: 0.7rem; }
body.theme-harbour .gallery-main {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--hb-radius); background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
}
body.theme-harbour .gallery-main img { width: 100%; height: 100%; object-fit: cover; }
body.theme-harbour .gallery-placeholder { width: 100%; height: 100%; }
body.theme-harbour .gallery-thumbs { display: flex; gap: 0.55rem; flex-wrap: wrap; }
body.theme-harbour .gallery-thumb {
  width: 4.5rem; aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer;
  border-radius: var(--c-radius-sm); border: 1px solid var(--color-border); background: var(--color-surface-raised);
}
body.theme-harbour .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
body.theme-harbour .gallery-thumb[aria-pressed="true"] { border-color: var(--color-accent); border-width: 2px; }
body.theme-harbour .product-info {
  position: sticky; top: 1.5rem; display: grid; gap: 1rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem); border-radius: var(--hb-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-harbour .product-layout { grid-template-rows: auto 1fr; }
body.theme-harbour .product-info { grid-column: 2; grid-row: 1 / span 2; }
body.theme-harbour .product-layout > .product-sections { grid-column: 1; grid-row: 2; }
@media (max-width: 900px) {
  body.theme-harbour .product-layout { grid-template-rows: none; }
  body.theme-harbour .product-info,
  body.theme-harbour .product-layout > .product-sections { grid-column: auto; grid-row: auto; }
}
body.theme-harbour .product-info h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
body.theme-harbour .product-lead { color: var(--color-ink-muted); }
body.theme-harbour .availability {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.9rem; font-weight: 700; color: var(--color-ink);
}
body.theme-harbour .availability::before {
  content: ""; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--color-success); flex: none;
}
body.theme-harbour .availability.is-out { color: var(--color-ink-muted); }
body.theme-harbour .availability.is-out::before { background: var(--color-danger); }
body.theme-harbour .availability.is-low::before { background: var(--color-warning); }
body.theme-harbour .option-group { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
body.theme-harbour .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-harbour .option-values { display: flex; gap: 0.45rem; flex-wrap: wrap; }
body.theme-harbour .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-harbour .option-pill:hover { border-color: var(--color-ink-muted); }
body.theme-harbour .option-pill[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
body.theme-harbour .option-pill.unavailable { opacity: 0.4; text-decoration: line-through; }
body.theme-harbour .buy-form { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; margin-top: 0.35rem; }
body.theme-harbour .buy-form-booking { display: block; }
body.theme-harbour .qty {
  display: inline-flex; align-items: center; border: 1px solid var(--color-border);
  border-radius: 999px; overflow: hidden; background: var(--color-surface);
}
body.theme-harbour .qty button {
  width: 2.4rem; height: 2.8rem; border: 0; background: transparent; color: var(--color-ink);
  font-size: 1.05rem; cursor: pointer;
}
body.theme-harbour .qty button:hover { background: var(--color-surface-raised); }
body.theme-harbour .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-harbour .qty input::-webkit-outer-spin-button,
body.theme-harbour .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.theme-harbour .btn-buy { flex: 1 1 12rem; padding-block: 0.9rem; }
body.theme-harbour .product-rating a { color: var(--color-ink-muted); }
body.theme-harbour .product-rating a:hover { color: var(--color-accent); }

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

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

/* ----------------------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  body.theme-harbour .hb-hero-inner { grid-template-columns: 1fr; }
  body.theme-harbour .hb-hero-media { order: -1; }
  body.theme-harbour .product-layout { grid-template-columns: 1fr; }
  body.theme-harbour .product-info { position: static; }
  body.theme-harbour .footer-grid { grid-template-columns: 1fr 1fr; }
  body.theme-harbour .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 harbour 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) {
  body.theme-harbour .header-inner { gap: 0.5rem 0.75rem; padding: 0.75rem 0; }
  body.theme-harbour .nav-toggle {
    display: inline-flex; order: -1; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; margin-left: -0.5rem; border-radius: 999px;
  }
  body.theme-harbour .nav-toggle .icon { width: 1.5rem; height: 1.5rem; }
  body.theme-harbour .header-actions { display: contents; }
  body.theme-harbour .site-nav {
    order: 10; width: 100%; display: none; flex-direction: column; align-items: stretch;
    gap: 0.25rem; padding-block: 0.75rem; border-block: 1px solid var(--color-border);
  }
  body.theme-harbour .nav-toggle-input:checked ~ .site-nav { display: flex; }
  body.theme-harbour .header-inner::after { content: ""; order: 10; flex-basis: 100%; height: 0; }
  body.theme-harbour .header-switchers { order: 11; }
  /* A logo on a row of its own above the menu is a desktop arrangement; on a phone it put the
     menu button beside the logo and the icons on a row by themselves. */
  body.theme-harbour[data-brand-position="centre"] .header-inner > .site-brand {
    order: 0; margin: 0 auto 0 0;
  }
  body.theme-harbour[data-brand-position="centre"] .header-inner::after { order: 10; }
  body.theme-harbour .site-search { order: 12; flex: 1 1 0; min-width: 0; max-width: none; }
  body.theme-harbour .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-harbour .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-harbour .builder-page .pb-hero { border-radius: var(--hb-radius); }
body.theme-harbour .builder-page .pb-hero-body { padding: clamp(3rem, 7vw, 5.5rem) 0; }
body.theme-harbour .builder-page .pb-hero-heading { font-size: clamp(2rem, 4.5vw, 3.2rem); }
body.theme-harbour .builder-page .pb-cols-3,
body.theme-harbour .builder-page .pb-cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
body.theme-harbour .builder-page .pb-stats { border-radius: var(--hb-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-harbour {
  /* 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);
}