/* sbs-pkg's base stylesheet: the layout every site shares (reset, header and menu, buttons, hero,
   sections, cards, contact, shop, footer, announcement bar). build.mjs links it before each page's own
   styles.css, so a site's styles.css only needs its theme tokens (:root) and what it does differently;
   anything here can be overridden there. Every color is a theme variable or a color-mix() of one.
   Copied into the site by sbs-pkg-sync; used when sbs.config.json has "baseCss": true (new sites do). */


*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column; /* the footer stays at the bottom on short pages */
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: var(--teal-ink);
}
h1,
h2,
h3 {
  font-family: var(--display);
  line-height: 1.15;
  margin: 0 0 0.5em;
}
h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
}
h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
}
.wrap {
  width: min(1120px, 100% - 40px);
  margin-inline: auto;
}
main {
  flex: 1;
}
.narrow {
  width: min(760px, 100% - 40px);
}
.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 100;
  background: var(--paper);
  padding: 8px 12px;
}

/* Announcement bar (data/business.json → announcement.text) */
.announce {
  margin: 0;
  padding: 10px 16px;
  background: var(--teal-ink);
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Header. A palette may color the menu bar (theme.mjs preset css): --header (its background),
   --header-solid (the open menu on phones), --header-ink (text), --header-current (the current
   page's underline), --header-btn / --header-btn-ink (its buttons). Unset, it's the dark bar. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header, color-mix(in srgb, var(--abyss) 95%, transparent));
  color: var(--header-ink, #fff);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--header-ink, #fff);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
}
.brand-mark {
  border-radius: 10px;
  background: #fff;
  object-fit: contain; /* a tall or wide logo keeps its shape in the square */
}
/* text.header.tagline: a short line beside the name (under the logo in the sidebar preset) */
.brand-tagline {
  padding-left: 10px;
  border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.8;
}
@media (max-width: 1100px) {
  .brand-tagline {
    display: none;
  }
}
.nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav a {
  color: var(--header-ink, #fff);
  text-decoration: none;
  font-weight: 500;
}
.nav a[aria-current] {
  box-shadow: inset 0 -2px 0 var(--header-current, var(--glow));
}
.nav .btn {
  background: var(--header-btn, var(--orange));
  border-color: var(--header-btn, var(--orange));
  color: var(--header-btn-ink, #fff);
}
.nav .btn:hover {
  background: color-mix(in srgb, var(--header-btn, var(--orange)) 88%, black);
}
.nav .btn-quiet {
  background: transparent;
  border-color: color-mix(in srgb, var(--header-ink, #fff) 55%, transparent);
  color: var(--header-ink, #fff);
}
.nav .btn-quiet:hover {
  background: color-mix(in srgb, var(--header-ink, #fff) 10%, transparent);
}
.nav a {
  white-space: nowrap; /* "Location / Contact" stays on one line */
}
/* a long menu (seven or more links and buttons, e.g. five pages, Book online and Call): closer
   together, no tagline, and the Menu button below 1180px instead of 820px; six links get it
   below 940px. Otherwise the menu runs off the bar and squeezes the business's name. */
.nav-row:has(.nav > a:nth-child(7)) .nav {
  gap: 14px;
  font-size: 0.95rem;
}
.nav-row:has(.nav > a:nth-child(7)) .brand-tagline {
  display: none;
}
@media (max-width: 940px) {
  .nav-row:has(.nav > a:nth-child(6)) .nav-toggle {
    display: inline-block;
  }
  .nav-row:has(.nav > a:nth-child(6)) .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 20px 20px;
    background: var(--header-solid, var(--abyss));
  }
  .nav-row:has(.nav > a:nth-child(6)) .nav.open {
    display: flex;
  }
}
@media (max-width: 1180px) {
  .nav-row:has(.nav > a:nth-child(7)) .nav-toggle {
    display: inline-block;
  }
  .nav-row:has(.nav > a:nth-child(7)) .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 20px 20px;
    background: var(--header-solid, var(--abyss));
  }
  .nav-row:has(.nav > a:nth-child(7)) .nav.open {
    display: flex;
  }
}
/* the open menu scrolls when it's taller than the screen below the bar (a phone on its side) */
.nav.open {
  max-height: calc(100dvh - 88px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid color-mix(in srgb, var(--header-ink, #fff) 50%, transparent);
  color: var(--header-ink, #fff);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
}
@media (max-width: 820px) {
  .nav-toggle {
    display: inline-block;
  }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 20px 20px;
    background: var(--header-solid, var(--abyss));
  }
  .nav.open {
    display: flex;
  }
}

/* The cart in the header (the Shop page's; shopify.js shows it once the cart has items): the
   menu's text color, like the Menu button; the name takes the free space so the menu and the cart
   sit together on the right */
.header-cart {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 14px;
  border: 1px solid color-mix(in srgb, currentColor 50%, transparent);
  border-radius: 999px;
  background: none;
  color: var(--header-ink, #fff);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.header-cart:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.header-cart[hidden] {
  display: none;
}
.header-cart-count {
  min-width: 1.6em;
  padding: 0 0.45em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px currentColor;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.nav-row:has(> .header-cart:not([hidden])) {
  justify-content: flex-start;
}
.nav-row:has(> .header-cart:not([hidden])) > .brand {
  min-width: 0;
  margin-right: auto;
}

/* Buttons */
/* text for screen readers only, e.g. the course name after a "Book" button (runtime/app.js) */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  background: var(--orange);
  border: 2px solid var(--orange);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.75em 1.4em;
  border-radius: 999px;
}
.nav a.btn {
  color: var(--header-btn-ink, #fff);
}
.nav a.btn-quiet {
  color: var(--header-ink, #fff);
}
.btn:hover {
  background: color-mix(in srgb, var(--orange) 88%, black);
}
.btn-sm {
  padding: 0.45em 1em;
  font-size: 0.92rem;
}
.btn-ghost,
.btn-quiet {
  background: transparent;
  border-color: color-mix(in srgb, #fff 55%, transparent);
}
.btn-ghost:hover,
.btn-quiet:hover {
  background: color-mix(in srgb, #fff 10%, transparent);
}
.btn-light {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}
.btn-light:hover {
  background: var(--sand);
}

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--abyss), var(--sea));
  color: #fff;
  padding: clamp(64px, 10vw, 120px) 0;
}
.hero h1 span {
  color: var(--glow);
}
/* text.home.hero.photo and .subheading: a photo under the heading, then a second heading */
.hero-photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 24px 0;
  border-radius: var(--radius);
}
.hero-sub {
  margin: 0 0 12px;
  white-space: pre-line; /* the owner's line breaks */
}
.lede {
  font-size: 1.2rem;
  max-width: 44em;
  opacity: 0.92;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--glow);
  margin: 0 0 12px;
}
.eyebrow.dark {
  color: var(--teal-ink);
}

/* Sections */
.section {
  padding: clamp(56px, 8vw, 96px) 0;
}
.section.alt {
  background: var(--sand);
}
.section-head {
  max-width: 720px;
  margin-bottom: 36px;
}
.section-head p,
.intro p {
  color: var(--muted);
}
.role {
  color: var(--muted);
  font-weight: 600;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}
.card h3 {
  font-size: 1.25rem;
}
.card p {
  color: var(--muted);
  margin: 0 0 0.6em;
}
.ticks {
  list-style: none;
  padding: 0;
}
.ticks li {
  padding-left: 1.6em;
  position: relative;
  margin: 0.35em 0;
}
.ticks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--teal-ink);
  font-weight: 700;
}

/* Contact */
.cta {
  background: linear-gradient(135deg, var(--abyss), var(--deep));
  color: #fff;
  padding: clamp(56px, 8vw, 96px) 0;
}
.cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
}
.cta p {
  color: color-mix(in srgb, #fff 85%, transparent);
}
.visit h3 {
  color: var(--glow);
}
.visit address {
  font-style: normal;
  margin-bottom: 12px;
}
.contact-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.contact-list li {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid color-mix(in srgb, #fff 15%, transparent);
}
.contact-list span {
  min-width: 7em;
  color: color-mix(in srgb, #fff 90%, transparent);
}
/* a long email address that doesn't fit beside its label goes under it, and breaks only if it
   doesn't fit there either, instead of running past the column (and the page, on phones) */
.contact-list li {
  flex-wrap: wrap; /* as the training and club looks have it */
}
.contact-list a {
  min-width: 0;
  overflow-wrap: anywhere;
}
.cta a:not(.btn) {
  color: #fff;
}

/* Text blocks (.prose) and content pages; scuba pages use .prose too */
.article h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
}
.article-hero {
  margin: 24px 0;
}
.article-hero img {
  border-radius: var(--radius);
}
.prose {
  font-size: 1.08rem;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 24px;
}
.gallery img {
  border-radius: 8px;
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
}

/* Shop */
.store-link {
  font-weight: 600;
}
.shop-embed-frame iframe {
  width: 100%;
  min-height: 80vh;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.shop-status {
  max-width: 640px;
}
/* Shopify products (shopify.js): store cards, as many across as fit (two on a phone): the photo on
   a light tile, the brand as a small eyebrow, the name, the price */
.shopify-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 36px 20px;
}
@media (max-width: 600px) {
  .shopify-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 14px;
  }
}
.shopify-product {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.shopify-media {
  display: block;
  aspect-ratio: 1;
  margin-bottom: 10px;
  overflow: hidden;
  border-radius: calc(var(--radius) / 2);
  background: color-mix(in srgb, var(--ink) 5%, var(--paper));
}
.shopify-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}
.shopify-media:hover .shopify-img {
  transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .shopify-img, .shop-tile-img {
    transition: none;
  }
}
.shopify-vendor {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-ink);
  overflow-wrap: anywhere;
}
.shopify-product h3 {
  margin: 0;
  font-family: var(--body);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.shopify-product h3 a {
  color: inherit;
  text-decoration: none;
}
.shopify-product h3 a:hover {
  text-decoration: underline;
}
.shopify-price {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}
.shopify-price.on-sale {
  color: var(--teal-ink);
  font-weight: 600;
}
.shopify-compare {
  color: var(--muted);
  font-weight: 400;
}
.shopify-soldout {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.shopify-variant {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}
.shopify-variant select {
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
  font: inherit;
  color: var(--ink);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.shopify-product .btn {
  margin-top: auto;
  justify-content: center;
  text-align: center;
}
.shopify-product > .shopify-price {
  padding-bottom: 6px;
}
.shopify-product .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
/* the store's toolbar: search, collection chips, In stock only, Sort by, how many are shown */
.shopify-toolbar {
  display: grid;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.shopify-search {
  position: relative;
  display: flex;
  width: min(100%, 460px);
  margin: 0;
}
.shopify-search input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 1rem; /* 16px: phones don't zoom in on it */
  color: var(--ink);
  padding: 9px 44px 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  appearance: none;
}
.shopify-search input::placeholder {
  color: var(--muted);
  opacity: 1;
}
.shopify-search input::-webkit-search-cancel-button {
  appearance: none; /* the box's own clear button instead */
}
.shopify-search-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 32px;
  height: 32px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.shopify-search-clear:hover {
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
}
.shopify-search-clear[hidden] {
  display: none;
}
/* a search that found nothing */
.shopify-empty {
  padding: 28px 0;
  text-align: center;
  overflow-wrap: anywhere;
}
.shopify-empty[hidden] {
  display: none;
}
.shopify-empty p {
  margin: 0;
}
.shopify-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.shopify-chips[hidden] {
  display: none;
}
.shopify-chip {
  font: inherit;
  font-size: 0.9rem;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.shopify-chip:hover {
  border-color: var(--ink);
}
.shopify-chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.shopify-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  font-size: 0.92rem;
}
.shopify-instock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.shopify-instock input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--teal-ink);
}
.shopify-sortbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.shopify-sortbox select {
  min-width: 0;
  max-width: 100%;
  font: inherit;
  color: var(--ink);
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.shopify-count {
  margin: 0 0 0 auto;
  color: var(--muted);
}
.shopify-more {
  display: flex;
  margin: 36px auto 0;
}
.shopify-more[hidden] {
  display: none;
}
.shopify-error {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.shopify-error:empty {
  display: none;
}
/* the cart bar: stays at the bottom of the screen while the store is in view */
.shopify-cartbar {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--abyss);
  color: #fff;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--abyss) 30%, transparent);
}
.shopify-cartbar[hidden] {
  display: none;
}
.shopify-cartbar-text {
  margin: 0 auto 0 0;
  font-weight: 600;
}
.shopify-cartbar .btn-quiet {
  background: transparent; /* a preset's own .btn color (the sidebar's khaki) stays off it */
  color: #fff;
  border-color: color-mix(in srgb, #fff 60%, transparent);
}
.shopify-cartbar .btn-quiet:hover {
  background: color-mix(in srgb, #fff 10%, transparent);
}
/* a phone: the totals on their own line, the two buttons side by side under them */
@media (max-width: 520px) {
  .shopify-cartbar-text {
    flex-basis: 100%;
  }
  .shopify-cartbar > .btn, .shopify-cartbar > span {
    flex: 1;
  }
  .shopify-cartbar .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}
/* the cart dialog */
.shopify-cart {
  width: min(560px, 100% - 24px);
  max-height: calc(100vh - 24px);
  border: 0;
  border-radius: var(--radius);
  padding: 24px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 24px 64px color-mix(in srgb, var(--abyss) 35%, transparent);
}
.shopify-cart::backdrop {
  background: color-mix(in srgb, var(--abyss) 60%, transparent);
}
.shopify-cart h2 {
  margin: 0 0 16px;
}
.shopify-close {
  float: right;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.shopify-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}
.shopify-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.shopify-line img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
}
.shopify-line-what {
  grid-column: 2;
  min-width: 0;
}
.shopify-line-what p {
  margin: 0;
}
.shopify-line-title {
  font-weight: 600;
}
.shopify-line-option, .shopify-cart-note {
  color: var(--muted);
  font-size: 0.9rem;
}
.shopify-line-total {
  margin: 0;
  font-weight: 600;
}
.shopify-qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 8px 12px 0 0;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.shopify-qty button {
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}
.shopify-qty-n {
  min-width: 2ch;
  text-align: center;
}
.shopify-remove {
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
}
.shopify-cart button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.shopify-subtotal {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 1.1rem;
}
.shopify-cart-foot .btn {
  display: block;
  margin-top: 14px;
  text-align: center;
}

/* a product's dialog (shopify.js): photos beside the name, price, options, quantity and Add to cart */
.shopify-quick {
  width: min(980px, 100% - 24px);
  max-height: calc(100vh - 24px);
  border: 0;
  border-radius: var(--radius);
  padding: 48px 28px 28px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 24px 64px color-mix(in srgb, var(--abyss) 35%, transparent);
}
.shopify-quick::backdrop {
  background: color-mix(in srgb, var(--abyss) 60%, transparent);
}
.shopify-quick .shopify-close {
  position: absolute;
  top: 14px;
  right: 18px;
}
.shopify-quick-body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 36px;
}
.shopify-gallery-main {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: calc(var(--radius) / 2);
  background: color-mix(in srgb, var(--ink) 5%, var(--paper));
}
.shopify-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.shopify-thumbs button {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 5%, var(--paper));
  cursor: pointer;
  overflow: hidden;
}
.shopify-thumbs button[aria-pressed="true"] {
  border-color: var(--ink);
}
.shopify-thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.shopify-quick-info {
  min-width: 0;
}
.shopify-quick-info h2 {
  margin: 4px 0 8px;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  overflow-wrap: anywhere;
}
.shopify-quick-info h2:focus:not(:focus-visible) {
  outline: none;
}
.shopify-quick-price .shopify-price {
  font-size: 1.1rem;
  color: var(--ink);
}
.shopify-quick-price .shopify-price.on-sale {
  color: var(--teal-ink);
}
.shopify-quick-options {
  margin-top: 14px;
}
.shopify-quick-buy {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.shopify-quick-buy .btn {
  flex: 1 1 10em;
  justify-content: center;
}
.shopify-quick-buy .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.shopify-quick-qty {
  margin: 0;
}
.shopify-quick-qty input {
  width: 3em;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: center;
  appearance: textfield;
}
.shopify-quick-qty input::-webkit-inner-spin-button, .shopify-quick-qty input::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}
.shopify-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--teal-ink);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.shopify-desc {
  margin-top: 18px;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}
.shopify-desc p, .shopify-desc ul, .shopify-desc ol {
  margin: 0 0 0.6em;
}
.shopify-desc h3, .shopify-desc h4 {
  margin: 1em 0 0.4em;
  font-size: 1.05rem;
}
.shopify-store-link {
  display: inline-block;
  margin-top: 14px;
  font-weight: 600;
}
/* You may also like: a row of Shopify's recommendations under the product (two across on a phone) */
.shopify-also {
  grid-column: 1 / -1;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.shopify-also[hidden] {
  display: none;
}
.shopify-also h3 {
  margin: 0 0 14px;
  font-size: 1.15rem;
}
.shopify-also-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shopify-also-link {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.shopify-also-link:hover .shopify-also-name {
  text-decoration: underline;
}
.shopify-also-media {
  display: block;
  aspect-ratio: 1;
  margin-bottom: 8px;
  overflow: hidden;
  border-radius: calc(var(--radius) / 2);
  background: color-mix(in srgb, var(--ink) 5%, var(--paper));
}
.shopify-also-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.shopify-also .shopify-price {
  margin-top: 4px;
  font-size: 0.88rem;
}
@media (max-width: 720px) {
  .shopify-also-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .shopify-quick {
    padding: 48px 16px 20px;
  }
  .shopify-quick-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

/* The Shop page's sections (data/text.json → shop), each only with its data. A photo behind the
   top's heading, darkened toward the bottom */
.shop-hero:has(.shop-hero-photo) {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(380px, 48vw, 600px);
  overflow: hidden;
}
.shop-hero-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shop-hero:has(.shop-hero-photo)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, color-mix(in srgb, var(--abyss) 88%, transparent), color-mix(in srgb, var(--abyss) 35%, transparent));
}
/* the dark band of short points under the top ({{text.shop.values|facts}}) */
.shop-values {
  background: var(--abyss);
  color: #fff;
  padding: 22px 0;
}
.shop-values .hero-facts {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 0;
}
.shop-values .hero-facts li {
  display: block;
  padding: 8px 24px;
  border: 0;
  border-left: 1px solid color-mix(in srgb, #fff 18%, transparent);
  border-radius: 0;
  background: none;
  backdrop-filter: none;
}
.shop-values .hero-facts li:first-child {
  border-left: 0;
  padding-left: 0;
}
.shop-values .hero-facts strong {
  display: block;
  min-width: 0;
  margin-bottom: 4px;
  font-family: var(--body);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.shop-values .hero-facts span {
  font-size: 0.85rem;
  color: color-mix(in srgb, #fff 80%, transparent);
}
@media (max-width: 640px) {
  .shop-values .hero-facts li, .shop-values .hero-facts li:first-child {
    padding: 10px 0;
    border-left: 0;
  }
  .shop-values .hero-facts li + li {
    border-top: 1px solid color-mix(in srgb, #fff 18%, transparent);
  }
}
/* a section's heading with a link at its right ("Explore all categories →") */
.shop-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 24px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.shop-row-head h2 {
  margin: 0;
}
.shop-row-head .eyebrow {
  margin-bottom: 8px;
}
.shop-row-link {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.shop-row-link:hover {
  text-decoration: underline;
}
.shop-featured + .shop-featured {
  padding-top: 0;
}
/* collection tiles: the collection's photo, darkened at the bottom under its name */
.shop-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 16px;
}
.shop-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: calc(var(--radius) / 2);
  background: var(--abyss);
  color: #fff;
  text-decoration: none;
}
.shop-tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.shop-tile:hover .shop-tile-img {
  transform: scale(1.04);
}
.shop-tile-text {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 2px;
  padding: 40px 48px 14px 16px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--abyss) 90%, transparent) 60%);
}
@media (max-width: 600px) {
  .shop-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .shop-tile-text {
    padding: 36px 30px 10px 10px;
  }
  .shop-tile-arrow {
    right: 10px;
    bottom: 10px;
  }
}
.shop-tile-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--glow);
}
.shop-tile-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.shop-tile-arrow {
  position: absolute;
  right: 16px;
  bottom: 14px;
  font-size: 1.1rem;
  transition: transform 0.2s ease;
}
.shop-tile:hover .shop-tile-arrow {
  transform: translateX(3px);
}
/* a statement: small heading, a very large line, a paragraph */
.shop-statement h2 {
  max-width: 15em;
  font-size: clamp(2.1rem, 5.5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.shop-statement-body {
  max-width: 36em;
  margin: 0;
  font-size: 1.05rem;
  color: var(--muted);
}
/* the closing box: a dark main panel with a button, a lighter dark side panel with links */
.shop-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--abyss);
  color: #fff;
}
.shop-cta-main {
  padding: clamp(32px, 6vw, 72px);
}
/* light on the dark panels, whatever color a style gives headings and small headings elsewhere */
.shop-cta h2, .shop-cta h3, .shop-values .hero-facts strong {
  color: #fff;
}
.shop-cta .eyebrow, .shop-tile-eyebrow {
  color: var(--glow);
}
.shop-cta-main h2 {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.shop-cta-main p:not(.eyebrow), .shop-cta-side p:not(.eyebrow) {
  max-width: 34em;
  color: color-mix(in srgb, #fff 80%, transparent);
}
.shop-cta-main .btn {
  margin-top: 12px;
}
.shop-cta-side {
  padding: clamp(32px, 5vw, 56px);
  background: color-mix(in srgb, #fff 8%, var(--abyss));
}
.shop-cta-side h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  overflow-wrap: anywhere;
}
.shop-cta .link-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid color-mix(in srgb, #fff 18%, transparent);
}
.shop-cta .link-list a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, #fff 18%, transparent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.shop-cta .link-list a::after {
  content: "→";
}
.shop-cta .link-list a:hover {
  text-decoration: underline;
}
@media (max-width: 820px) {
  .shop-cta {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Footer */
.site-footer {
  background: var(--abyss);
  color: color-mix(in srgb, #fff 70%, transparent);
  padding: 28px 0;
  font-size: 0.92rem;
}
.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.foot-row p {
  margin: 0;
}
.site-footer a {
  color: color-mix(in srgb, #fff 85%, transparent);
}
.social,
.page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.site-footer a:hover {
  color: #fff;
}

/* Home page sections (templates/starter/index.html, from data/text.json → home): quick facts,
   wave, photo + text, stats, price cards, price by group size, fees, policy cards with crosses;
   shop categories; the outline button on dark boxes; agency ratings lists. */
.cta a.link-light {
  color: var(--glow);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: end;
}
.hero-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.hero-facts li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
}
.hero-facts strong {
  font-family: var(--display);
  font-size: 2.2rem;
  color: #fff;
  min-width: 4.2ch;
}
.hero-facts span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
}
.hero-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 60px;
  fill: var(--paper);
}
.shop-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.shop-category {
  padding: 24px 26px 24px 0;
}
.shop-category + .shop-category {
  padding-left: 26px;
  border-left: 1px solid var(--line);
}
.shop-category h3 {
  margin-bottom: 8px;
  text-transform: uppercase;
}
.shop-category p {
  margin: 0;
  color: var(--muted);
}
/* as many price cards as fit, filling the row (two or three side by side on a laptop) */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.tier {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s;
}
.tier:hover {
  transform: translateY(-3px);
}
.tier-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--deep);
}
.tier-body {
  padding: 24px;
}
.tier h3 {
  font-size: 1.9rem;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.price {
  margin: 0;
  color: var(--muted);
}
.price span {
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.price-alt {
  margin: 2px 0 0;
  font-weight: 600;
  color: var(--teal-ink);
  font-size: 0.95rem;
}
.tier dl {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 4px;
}
.tier dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
  margin-top: 8px;
}
.tier dd {
  margin: 0;
}
.tier.featured {
  border-color: var(--teal);
  box-shadow:
  0 0 0 1px var(--teal),
  var(--shadow);
}
.ow {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 32px;
  align-items: center;
  padding: 32px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--deep), var(--sea));
  color: #fff;
}
.ow .eyebrow {
  color: var(--glow);
}
.ow h3 {
  font-size: 2.2rem;
  text-transform: uppercase;
}
.ow p {
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}
.ow-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ow-tier {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ow-who {
  font-weight: 600;
}
.ow-n {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}
.ow-tier strong {
  font-family: var(--display);
  font-size: 2.2rem;
  margin-top: 10px;
  line-height: 1;
}
.ow-tier em {
  font-style: normal;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}
.ow-tier a {
  color: inherit;
  font-weight: 600;
  white-space: nowrap;
}
/* for site content (Deep Adventures' agencies page lists ratings with it): no package page uses it */
.prose .ratings-list {
  columns: 2;
  column-gap: 32px;
  margin-bottom: 1.4em;
}
.prose .ratings-list li {
  break-inside: avoid;
}
@media (max-width: 620px) {
  .prose .ratings-list {
    columns: 1;
  }
}
.ow-tier.best {
  background: var(--glow);
  color: var(--abyss);
  border-color: var(--glow);
}
.ow-tier.best .ow-n, .ow-tier.best em {
  color: color-mix(in srgb, var(--abyss) 70%, transparent);
}
.fees {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.fee {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fee strong {
  font-family: var(--display);
  font-size: 1.9rem;
  line-height: 1;
}
.fee span {
  color: var(--muted);
  font-size: 0.92rem;
}
.fee.accent {
  background: color-mix(in srgb, var(--orange) 6%, white);
  border-color: color-mix(in srgb, var(--orange) 23%, white);
}
.fee.accent strong {
  color: var(--orange);
}
.policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.crosses {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.crosses li {
  padding-left: 28px;
  position: relative;
}
.crosses li::before {
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
}
.crosses li::before {
  content: "✕";
  background: #fdecec;
  color: #c0392b;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 56px;
  align-items: center;
}
.about-photo {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.about-photo img {
  width: 100%;
  height: auto;
}
.about .role {
  font-weight: 600;
  color: var(--teal-ink);
  margin-top: -6px;
}
.about p {
  color: color-mix(in srgb, var(--ink) 81%, var(--muted));
}
.about-stats {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* minmax: a long word wraps, not past the screen */
  gap: 12px;
}
@media (max-width: 520px) {
  .about-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.about-stats li {
  border-left: 3px solid var(--teal);
  padding-left: 12px;
}
.about-stats strong {
  display: block;
  overflow-wrap: break-word;
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
}
.about-stats span {
  font-size: 0.85rem;
  color: var(--muted);
}
.link-light {
  color: var(--glow);
  font-weight: 600;
  text-decoration: none;
}
.btn-ghost-dark {
  background: transparent;
  color: var(--deep);
  border-color: var(--deep);
}
.btn-ghost-dark:hover {
  background: color-mix(in srgb, var(--deep) 6%, transparent);
  box-shadow: none;
}
@media (max-width: 960px) {
  .hero-grid, .ow, .about-grid {
    grid-template-columns: 1fr;
  }
  .tiers {
    grid-template-columns: 1fr 1fr;
  }
  .tiers .featured {
    grid-column: span 2;
  }
  .fees {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .tiers, .fees, .policy-grid {
    grid-template-columns: 1fr;
  }
  .tiers .featured {
    grid-column: auto;
  }
  .tier-img {
    aspect-ratio: 21 / 9;
  }
  .shop-categories {
    grid-template-columns: 1fr;
  }
  .shop-category, .shop-category + .shop-category {
    padding: 18px 0;
    border-left: 0;
  }
  .shop-category + .shop-category {
    border-top: 1px solid var(--line);
  }
  .ow {
    padding: 22px;
  }
  .ow-tiers {
    grid-template-columns: 1fr;
  }
  .ow-tier {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
  }
  .ow-tier strong {
    margin: 0 0 0 auto;
    font-size: 1.8rem;
  }
  .ow-tier .ow-n {
    order: 3;
    width: 100%;
  }
}
@media (min-width: 961px) {
  #highlights .post-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 961px) {
  .about-grid.flip {
    grid-template-columns: 1.25fr 1fr;
  }
}
.hero-facts strong {
  white-space: nowrap;
  flex-shrink: 0;
}
/* on a phone a long fact ("PADI · SSI · SDI") wraps between its words, smaller, rather than push
   the page sideways */
@media (max-width: 520px) {
  .hero-facts strong {
    white-space: normal;
    flex-shrink: 1;
    font-size: 1.7rem;
  }
  .hero-facts span {
    min-width: 0;
  }
}

/* Price sheet ({{…|pricesheet}}): your price beside other shops', like a printed price board */
.price-sheet {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.ps-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  align-items: center;
  border-top: 1px solid var(--line);
}
.ps-row > span {
  padding: 14px 16px;
  text-align: center;
}
.ps-row > .ps-item, .ps-head > span:first-child {
  text-align: left;
}
.ps-head {
  border-top: 0;
  background: var(--deep);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ps-head {
  align-items: stretch;
}
.ps-head > span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 12px;
}
.ps-head > span:first-child {
  justify-content: flex-start;
}
.ps-item strong {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
}
.ps-item span {
  display: block;
  color: var(--muted);
  font-size: 0.88rem;
}
.ps-price {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--teal-ink);
}
.ps-compare {
  color: var(--muted);
}
.ps-save {
  font-weight: 700;
}
/* the heading row's compare and save cells keep the heading row's look */
.ps-head > :is(.ps-compare, .ps-save) {
  color: inherit;
}
.ps-head > span:nth-child(2) {
  background: color-mix(in srgb, var(--teal) 35%, var(--deep));
}
/* no column headings at all: no heading row */
.ps-head:not(:has(> span:not(:empty))) {
  display: none;
}
/* nothing compared (no other shops' prices, no savings in any row): item and price only; the
   heading row's compare and save cells hide with their columns (they stay in place, empty when
   the owner left a heading out, so the columns line up) */
.price-sheet:not(:has(.ps-row:not(.ps-head) > :is(.ps-compare, .ps-save):not(:empty))) .ps-row {
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr);
}
.price-sheet:not(:has(.ps-row:not(.ps-head) > :is(.ps-compare, .ps-save):not(:empty))) :is(.ps-compare, .ps-save) {
  display: none;
}
.price-examples {
  margin-top: 40px;
}
.price-examples h3 {
  margin: 0 0 4px;
}
.price-examples .intro {
  margin: 0 0 16px;
}
.price-sheet.compact .ps-row > span {
  padding-block: 10px;
}
.price-sheet.compact .ps-price {
  font-size: 1.05rem;
}

/* Calculator boxes ({{…|pricecalc}} in a .calc; site.js adds them up) */
.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.calc-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  transition: border-color 0.15s;
}
.calc-box.is-on {
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal), var(--shadow);
}
.calc-box h3 {
  margin: 0;
  font-size: 1.1rem;
}
.calc-detail, .calc-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}
.calc-unit {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--teal-ink);
}
.calc-unit span {
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--muted);
}
.calc-qty {
  display: flex;
  align-items: stretch;
  margin-top: auto;
  padding-top: 8px;
}
.calc-qty button {
  width: 44px;
  border: 1px solid var(--line);
  background: var(--sand);
  color: var(--ink);
  font: inherit;
  font-size: 1.25rem;
  cursor: pointer;
}
.calc-qty button:first-child {
  border-radius: 10px 0 0 10px;
}
.calc-qty button:last-child {
  border-radius: 0 10px 10px 0;
}
.calc-qty button:hover {
  background: var(--line);
}
.calc-qty input {
  flex: 1;
  min-width: 0;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-inline: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: center;
}
.calc-qty input::-webkit-inner-spin-button, .calc-qty input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.calc-qty input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.calc-line {
  margin: 0;
  text-align: right;
  font-weight: 700;
}
.calc-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 20px;
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--deep);
  color: #fff;
}
.calc-total strong {
  font-family: var(--display);
  font-size: 1.8rem;
}
.calc-min {
  flex-basis: 100%;
  text-align: right;
  font-size: 0.88rem;
  opacity: 0.85;
}
.calc-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}
@media (max-width: 620px) {
  .ps-row {
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
    font-size: 0.85rem;
  }
  .ps-row > span {
    padding: 10px 6px;
  }
  .ps-row > .ps-item {
    padding-left: 12px;
  }
  .ps-head {
    font-size: 0.68rem;
    letter-spacing: 0.02em;
  }
  .ps-item strong {
    font-size: 0.95rem;
  }
  .ps-item span {
    font-size: 0.78rem;
  }
  .ps-price {
    font-size: 1rem;
  }
  .calc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .calc-box {
    padding: 14px;
  }
}

/* Before and after ({{…|compare}}): the after photo, the before photo over it cut off at --pos,
   and an invisible range across the whole frame that moves the line (site.js) */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 28px;
}
.compare {
  margin: 0;
}
.compare-frame {
  --pos: 50%;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--line);
  touch-action: pan-y;
}
.compare-frame img {
  display: block;
  width: 100%;
}
/* the frame takes the after photo's shape; the before photo is fitted over it */
.compare-before {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.compare-frame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 6px rgb(0 0 0 / 0.45);
  pointer-events: none;
}
.compare-frame::before {
  content: "\2194";
  position: absolute;
  z-index: 1;
  top: 50%;
  left: var(--pos);
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-size: 1.3rem;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.35);
  pointer-events: none;
}
.compare-tag {
  position: absolute;
  top: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.6);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}
.compare-tag.before {
  left: 12px;
}
.compare-tag.after {
  right: 12px;
}
.compare-range {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.compare-frame:has(.compare-range:focus-visible) {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}
.compare figcaption {
  margin-top: 12px;
  color: var(--muted);
}
.compare figcaption strong {
  display: block;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.15rem;
}

/* The inquiry form ({{…|inquiry}}, inquiry.js) */
.inq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 40px;
  align-items: start;
}
.inquiry {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 32px);
}
.inq-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  margin-bottom: 20px;
}
.inq-field.wide {
  grid-column: 1 / -1;
}
.inq-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}
.inq-req {
  color: var(--muted);
}
.inq-field input,
.inq-field select,
.inq-field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: calc(var(--radius) / 2);
  padding: 10px 12px;
}
.inq-field textarea {
  resize: vertical;
}
.inq-field [aria-invalid="true"] {
  border-color: #b42318;
  box-shadow: 0 0 0 1px #b42318;
}
.inq-error {
  color: #b42318;
  font-size: 0.9rem;
  margin: 4px 0 0;
}
.inquiry [hidden] {
  display: none; /* the Send button once sent (.btn sets its own display) */
}
.inq-field :disabled {
  opacity: 0.7;
}
.inq-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.inq-status {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: calc(var(--radius) / 2);
  background: var(--sand);
}
.inq-status.ok {
  background: color-mix(in srgb, #12b76a 14%, var(--paper));
}
.inq-status.error {
  background: color-mix(in srgb, #b42318 12%, var(--paper));
}
.inquiry .fine {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.service-area {
  font-weight: 600;
}
@media (max-width: 820px) {
  .inq-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .inq-fields {
    grid-template-columns: 1fr;
  }
}