/* 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 {
  --hw-brand: 800; --hw-link: 600; /* 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: 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). */
/* Logo in the middle or on the right of the same row (Design → `brand_position`). Desktop only:
   under the burger breakpoint the logo stays where `start` puts it, because the phone header is
   its own arrangement. The elastic parts are the brand's auto margins, so the menu takes the
   width it needs first and folds into More only when the line is genuinely full. `middle`
   centres the logo in the space beside the menu, not on the page itself. `order` moves it
   visually only: the logo link is still first in the tab order, as it is for `centre`. The
   search box is `margin-inline: auto` in commerce.css, which would split the free space with the
   logo, so it gives that up here. */
@media (min-width: 721px) {
  /* `centre` is in here with the other two: a logo on a row of its own above the menu is a
     desktop arrangement, and on a phone the logo is on the left of the two-row header
     whatever is chosen (the setting's own help says so). Outside this block these rules,
     which carry the attribute, out-specify the shared phone bar's placement of the logo. */
  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[data-brand-position="middle"] .header-inner > .site-nav { order: -1; }
  body.theme-harbour[data-brand-position="middle"] .header-inner > .site-brand { margin-inline: auto; }
  body.theme-harbour[data-brand-position="end"] .header-inner > .site-brand { order: 10; margin-right: 0; }
  body.theme-harbour[data-brand-position="end"] .header-inner > .site-nav { margin-right: auto; }
  body.theme-harbour[data-brand-position="middle"] .header-inner .site-search,
  body.theme-harbour[data-brand-position="end"] .header-inner .site-search { margin-inline: 0; }
}
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));
}
@media (max-width: 700px) {
  body.theme-harbour .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0.75rem; }
}
body.theme-harbour .product-card {
  /* Inside a built page's Accent or Inverted band, restate the pair this surface carries. */
  --pb-ink: var(--color-ink); --pb-muted: var(--color-ink-muted);
  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: calc(var(--hr-shown, 0px) + 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 rail is the card: an event's own booking card inside it is not drawn as a second one
   (hide does the same), which also gave a trip's card back the height of a second padding. */
body.theme-harbour .product-info .evt-book { border: 0; padding: 0; background: transparent; box-shadow: none; }
/* 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 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-harbour button.option-pill:hover { border-color: var(--color-ink-muted); }
body.theme-harbour button.option-pill[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
body.theme-harbour button.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) {
  /* **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-harbour .site-nav { gap: 0.15rem; margin-top: 0.25rem; padding-block: 0.6rem; border-block: 1px solid var(--color-border); }
  /* The menu button, as the search box beside it is drawn: a pill on the raised ground. */
  body.theme-harbour .nav-toggle {
    padding-inline: 0.9rem; border-color: var(--color-border); border-radius: 999px;
    background: var(--color-surface-raised); font-weight: 600;
  }
  body.theme-harbour .header-inner { gap: 0.5rem 0.75rem; padding: 0.75rem 0; }
  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);
}

/* ---- 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-harbour a.mcal-day.is-open:not(.is-start):not(.is-end), body.theme-harbour .mcal-day.is-today { border-radius: 12px; }

/* The tour facts line under a card's name: grade, youngest age, duration (`{% card_facts %}`). */
body.theme-harbour .product-card .product-facts {
  margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--color-ink);
}