/* ========== DESIGN TOKENS ==========
   Palette ported from the retired Shopify theme's coolors.co token set
   (_retired/website-02-shopify/assets/product-collection-row.css) so the
   new static site stays visually consistent with the brand. */
:root {
  --palette-strawberry-red: 249, 65, 68;
  --palette-atomic-tangerine: 243, 114, 44;
  --palette-carrot-orange: 248, 150, 30;
  --palette-tuscan-sun: 249, 199, 79;
  --palette-willow-green: 144, 190, 109;
  --palette-seagrass: 67, 170, 139;
  --palette-dark-cyan: 77, 144, 142;
  --palette-blue-slate: 87, 117, 144;
  --palette-cerulean: 39, 125, 161;

  --color-status-new: var(--palette-seagrass);
  --color-status-coming: var(--palette-cerulean);
  --color-status-retiring: var(--palette-carrot-orange);
  --color-status-retired: var(--palette-blue-slate);
  --color-status-hot: var(--palette-atomic-tangerine);

  --color-ink: 28, 28, 30;
  --color-ink-live: 18, 18, 18; /* live theme text colour (#121212) */
  --color-ink-soft: 90, 96, 104;
  --color-surface: 255, 255, 255;
  --color-surface-alt: 246, 247, 251;
  --color-border: 226, 229, 235;
  --color-cta: var(--palette-atomic-tangerine);
  --color-cta-dark: 194, 91, 35;
  --color-cta-light: 246, 149, 97;

  /* Gold "Special Deal" / "Package Includes" family, ported verbatim from the
     retired theme's :root block (product-collection-row.css) so the bundle
     cards below keep the same look. */
  --color-deal-base: var(--palette-tuscan-sun);
  --color-deal-pale: 253, 235, 193;
  --color-deal-light: 250, 211, 119;
  --color-deal-mid: 224, 179, 71;
  --color-deal-dark: 149, 119, 47;
  --color-deal-text: 55, 44, 17;

  /* Dark navy "collage" background family */
  --color-collage-bg-dark: 30, 41, 50;
  --color-collage-bg-darker: 19, 26, 32;
  --color-collage-bg-darkest: 10, 14, 17;

  /* Matches the live site's body font exactly (Murecho, via Google Fonts —
     see the <link> in render.mjs's layout()), falling back to the system
     stack if the font fails to load. */
  --font-sans: "Murecho", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --container-width: 1200px;
  --radius: 10px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* ========== RESET ========== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: rgb(var(--color-ink));
  background: rgb(var(--color-surface));
  line-height: 1.55;
  letter-spacing: 0.6px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; }
p { margin: 0 0 1em; }
button { font: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem; background: rgb(var(--color-ink));
  color: #fff; padding: 0.6em 1em; border-radius: var(--radius); z-index: 1000;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 1rem; }

.page-width { max-width: var(--container-width); margin: 0 auto; padding: 0 1.25rem; }

/* ========== BUTTONS ========== */
.button {
  display: inline-block;
  padding: 0.75em 1.5em;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease, color 0.15s ease;
}
.button:active { transform: scale(0.98); }
.button--primary {
  background: rgb(var(--color-cta));
  color: #fff;
}
.button--primary:hover { background: rgb(var(--color-cta-dark)); }
.button--ghost {
  background: transparent;
  border-color: rgb(var(--color-border));
  color: rgb(var(--color-ink));
}
.button--ghost:hover { border-color: rgb(var(--color-cta)); color: rgb(var(--color-cta)); }

/* ========== ANNOUNCEMENT BAR ==========
   Values measured from the live site: white bar, 1px 8%-ink bottom border,
   13px text at 0.6px tracking, 1200px inner width with prev/next arrows. */
.announcement-bar {
  background: rgb(var(--color-surface));
  color: rgb(var(--color-ink-live));
  border-bottom: 1px solid rgba(var(--color-ink-live), 0.08);
  font-size: 13px;
}
.announcement-bar__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 50px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.announcement-bar__message { margin: 0; text-align: center; flex: 1; }
.announcement-bar__arrow {
  background: none; border: 0; cursor: pointer; font-size: 20px; line-height: 1;
  color: rgba(var(--color-ink-live), 0.75); padding: 0 7px;
}

/* ========== HEADER / NAV ==========
   Live layout: 1200px container, 20px 50px padding, logo (24px) then
   14px nav links (12px padding) left-aligned beside it. */
.site-header {
  border-bottom: 0;
  position: sticky;
  top: 0;
  background: rgb(var(--color-surface));
  z-index: 100;
}
.site-header__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 20px 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
.site-header__logo {
  font-weight: 400;
  font-size: 24px;
  text-decoration: none;
  letter-spacing: 0.6px;
  line-height: 1;
  padding: 7.5px;
  margin-left: -7.5px;
  color: rgba(var(--color-ink-live), 0.75);
}
@media (max-width: 860px) {
  .site-header__inner { padding: 10px 16px; justify-content: space-between; }
}
.nav__mobile-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: inline-flex;
}
.nav__burger, .nav__burger::before, .nav__burger::after {
  display: block;
  width: 22px;
  height: 2px;
  background: rgb(var(--color-ink));
  position: relative;
  transition: transform 0.15s ease;
}
.nav__burger::before, .nav__burger::after { content: ""; position: absolute; left: 0; }
.nav__burger::before { top: -7px; }
.nav__burger::after { top: 7px; }

.nav__list { display: flex; align-items: center; gap: 0; }
.nav__link {
  background: none; border: none; cursor: pointer;
  font-size: 14px; font-weight: 400; text-decoration: none;
  letter-spacing: 0.6px;
  color: rgba(var(--color-ink-live), 0.75); display: inline-flex; align-items: center; gap: 8px;
  padding: 12px;
}
.nav__link:hover { color: rgb(var(--color-ink-live)); }
.nav__link[aria-current="page"] { color: rgb(var(--color-ink-live)); text-decoration: underline; text-underline-offset: 6px; }
.nav__caret { flex: none; }
.nav__item--dropdown { position: relative; }
.nav__dropdown-menu {
  position: absolute; top: 100%; left: 0; margin-top: 0.5rem;
  background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border));
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  min-width: 220px; padding: 0.4rem; opacity: 0; visibility: hidden;
  transform: translateY(-4px); transition: all 0.12s ease;
}
.nav__item--dropdown:hover .nav__dropdown-menu,
.nav__item--dropdown:focus-within .nav__dropdown-menu,
.nav__item--dropdown.is-open .nav__dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__dropdown-menu li a {
  display: block; padding: 0.5rem 0.75rem; border-radius: 6px;
  text-decoration: none; font-size: 0.9rem; font-weight: 500;
}
.nav__dropdown-menu li a:hover { background: rgb(var(--color-surface-alt)); }

@media (max-width: 860px) {
  .nav__mobile-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(320px, 85vw); height: 100vh;
    background: rgb(var(--color-surface)); box-shadow: -8px 0 24px rgba(0,0,0,0.12);
    transform: translateX(100%); transition: transform 0.2s ease; overflow-y: auto;
    padding: 5rem 1.5rem 2rem;
  }
  .nav.is-open { transform: translateX(0); }
  .nav__list { flex-direction: column; align-items: flex-start; gap: 0.25rem; width: 100%; }
  .nav__item { width: 100%; }
  .nav__link { width: 100%; padding: 0.75rem 0; justify-content: space-between; }
  .nav__dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: none; box-shadow: none; border: none; margin: 0 0 0 0.75rem; padding: 0;
  }
  .nav__item--dropdown.is-open .nav__dropdown-menu { display: block; }
}
@media (min-width: 861px) {
  .nav__mobile-toggle { display: none; }
}

/* ========== HERO / IMAGE BANNER ========== */
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; }

.image-banner { width: 100%; overflow: hidden; background: rgb(var(--color-surface-alt)); }
.image-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-banner--large img { aspect-ratio: 18 / 7; }
.image-banner--medium img { aspect-ratio: 16 / 6; }
.image-banner--small img { aspect-ratio: 16 / 4; }
@media (max-width: 640px) {
  .image-banner--large img,
  .image-banner--medium img,
  .image-banner--small img { aspect-ratio: 4 / 3; }
}

.rich-text-heading { text-align: center; padding: 2.5rem 1.25rem 1rem; }
.rich-text-heading h1 { font-size: 40px; font-weight: 400; letter-spacing: 0.6px; }

/* ========== PAGE HEADER ========== */
.page-header { text-align: center; padding: 3rem 1.25rem 1.5rem; }
.page-header h1 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
.page-header p { color: rgb(var(--color-ink-soft)); }

/* ========== HOME PREVIEW ROWS (horizontal scroll) ========== */
.home-row { padding: 2.5rem 0; max-width: 100%; }
.home-row:nth-child(odd) { background: rgb(var(--color-surface-alt)); }
.home-row__heading { text-align: center; margin-bottom: 1.5rem; padding: 0 1.25rem; }
.home-row__heading h2 { font-size: clamp(1.6rem, 3vw, 2.375rem); font-weight: 400; letter-spacing: 0.6px; margin: 0; }
.home-row__heading p { color: rgb(var(--color-ink-soft)); font-size: 0.875rem; letter-spacing: 0.6px; margin: 0.375rem 0 0; }
.home-row > .button { display: block; width: max-content; margin: 1.5rem auto 0; }

.product-row {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding-bottom: 0.5rem;
}
.product-row__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  width: max-content;
  padding: 0 1.25rem;
}
.product-row .product-card { flex: 0 0 220px; width: 220px; }
@media (min-width: 640px) { .product-row .product-card { flex-basis: 260px; width: 260px; } }

.home-cta {
  text-align: center; padding: 4rem 1.25rem; background: rgb(var(--color-ink)); color: #fff; margin-top: 1rem;
}
.home-cta h2 { font-size: 1.6rem; }
.home-cta p { color: rgba(255,255,255,0.75); max-width: 560px; margin-left: auto; margin-right: auto; }
.home-cta .button { margin-top: 1rem; }

/* ========== PRODUCT GRID / CARD ========== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
@media (min-width: 960px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.product-card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid rgb(var(--color-border)); border-radius: var(--radius);
  overflow: hidden; background: rgb(var(--color-surface));
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.product-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
/* 3:2 matches most product photos; contain (not cover) so the taller ones
   are shown whole instead of having the kit cropped off. */
.product-card__media { position: relative; aspect-ratio: 3 / 2; background: rgb(var(--color-surface)); }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; }
.product-card__body { padding: 0.85rem 0.9rem 1rem; }
.product-card__sku { font-size: 0.72rem; letter-spacing: 0.04em; color: rgb(var(--color-ink-soft)); text-transform: uppercase; margin: 0 0 0.25em; }
.product-card__title { font-size: 0.95rem; margin: 0 0 0.4em; }
.product-card__price { font-weight: 700; margin: 0; }
.product-card__note { font-size: 0.82rem; color: rgb(var(--color-ink-soft)); margin: 0; }

.empty-state { text-align: center; padding: 3rem 1rem; color: rgb(var(--color-ink-soft)); }

/* ========== BADGES ========== */
.badge {
  position: absolute; top: 0.6rem; left: 0.6rem;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.3em 0.65em; border-radius: 999px; color: #fff;
}
.badge--coming, .badge--coming-soon { background: rgb(var(--color-status-coming)); }
.badge--retired { background: rgb(var(--color-status-retired)); }
.badge--new, .badge--new-release { background: rgb(var(--color-status-new)); }
.badge--retiring, .badge--retiring-soon { background: rgb(var(--color-status-retiring)); }
.badge--hot, .badge--on-sale { background: rgb(var(--color-status-hot)); }

/* Product detail page badges are static (not absolutely positioned) */
.product-detail__info > .badge { position: static; display: inline-block; margin-bottom: 0.75rem; }

/* ========== SECTION HEADING (shared) ========== */
.section-heading { text-align: center; font-size: 1.6rem; margin: 0 0 1.75rem; }
.section-heading--light { color: #fff; }

/* ========== BUNDLE ROW ("Special Deal" cards, ported from the retired
   theme's collection-row.liquid / bundle-row-card.liquid) ========== */
.bundle-row {
  background:
    radial-gradient(120% 110% at 50% -10%, rgba(var(--color-deal-base), 0.08) 0%, rgba(var(--color-deal-base), 0) 55%),
    linear-gradient(180deg, rgb(var(--color-collage-bg-dark)) 0%, rgb(var(--color-collage-bg-darker)) 62%, rgb(var(--color-collage-bg-darkest)) 100%);
  padding: 2rem 0 2.5rem;
}
.bundle-row__title {
  text-align: center;
  color: rgb(var(--color-deal-pale));
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  margin: 0 0 1.875rem;
}
.bundle-row__scroll {
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 0.5rem 1.25rem 1rem;
  width: max-content;
  max-width: 100%;
}

.bundle-card {
  display: flex;
  flex-direction: column;
  width: 320px;
  flex: 0 0 320px;
  border-radius: 20px;
  overflow: hidden;
  background: rgb(var(--color-collage-bg-dark));
  border: 2px solid rgb(var(--color-deal-mid));
  box-shadow: 0 4px 18px rgba(var(--color-deal-mid), 0.28);
}
.bundle-card__badge {
  display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  background: linear-gradient(90deg, rgb(var(--color-deal-mid)) 0%, rgb(var(--color-deal-base)) 50%, rgb(var(--color-deal-mid)) 100%);
  color: rgb(var(--color-deal-text));
  font-size: 1.05rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.75rem 0.6rem; text-align: center;
}
.bundle-collage {
  position: relative; width: 100%; height: 150px;
  background: rgb(var(--color-collage-bg-darkest));
  overflow: hidden; flex-shrink: 0;
}
@keyframes bundle-orbit {
  from { transform: translate(-50%, -50%) rotate(var(--orbit-start)) translateX(80px) rotate(calc(-1 * var(--orbit-start))); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--orbit-start) + 360deg)) translateX(80px) rotate(calc(-1 * var(--orbit-start) - 360deg)); }
}
.bundle-collage__cell {
  position: absolute; top: 50%; left: 50%; width: 78px; height: 78px;
  border-radius: 50%; border: 2px solid rgb(var(--color-deal-mid));
  overflow: hidden; background: rgb(var(--color-collage-bg-dark));
  box-shadow: 0 0 8px rgba(var(--color-deal-mid), 0.5);
  animation: bundle-orbit 28s linear infinite;
}
.bundle-collage__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bundle-card__body { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.9rem 1rem 1.1rem; }
.bundle-card__sku { font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,0.6); margin: 0; }
.bundle-card__price { font-size: 1.4rem; font-weight: 800; color: rgb(var(--color-deal-base)); margin: 0.2rem 0 0; }
.bundle-card__postage { font-size: 0.85rem; font-weight: 600; color: rgb(var(--color-deal-dark)); margin: 0; }
.bundle-card__title { font-size: 1.15rem; font-weight: 800; color: #fff; margin: 0.2rem 0 0.6rem; }
.bundle-card__cta {
  display: block; text-align: center; padding: 0.95rem 1rem; border-radius: 0.7rem;
  font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em; text-decoration: none;
}
.bundle-card__cta--order {
  background: linear-gradient(135deg, rgb(var(--color-deal-base)), rgb(var(--color-deal-mid)));
  color: rgb(var(--color-collage-bg-dark));
  box-shadow: 0 6px 14px rgba(var(--color-deal-base), 0.35);
}
.bundle-card__cta--waitlist {
  background: linear-gradient(135deg, rgb(var(--color-cta-dark)), rgb(var(--color-cta-light)));
  color: #fff;
  box-shadow: 0 10px 18px rgba(var(--color-cta-dark), 0.2);
}

.bundle-connector {
  flex: 0 0 auto; align-self: center;
  display: flex; align-items: center; justify-content: center;
  width: 4.2rem; height: 4.2rem; min-width: 4.2rem;
  border-radius: 999px;
  font-size: 2.2rem; font-weight: 900; color: rgb(var(--color-deal-text));
  background: linear-gradient(90deg, rgb(var(--color-deal-mid)) 0%, rgb(var(--color-deal-base)) 50%, rgb(var(--color-deal-mid)) 100%);
  box-shadow: 0 0.28rem 0.72rem rgba(var(--color-deal-mid), 0.24);
}

.bundle-includes {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  margin-left: 1.5rem;
  padding: 1rem 1.1rem 1.1rem 2.6rem;
  border-radius: 0.5rem 1.4rem 1.4rem 0.5rem;
  background: linear-gradient(135deg, rgb(var(--color-deal-mid)) 0%, rgb(var(--color-deal-base)) 52%, rgb(var(--color-deal-dark)) 100%);
  box-shadow: 0 1rem 2rem rgba(var(--color-deal-mid), 0.22);
}
.bundle-includes__ribbon {
  position: absolute; left: 0.5rem; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 1.1rem; font-weight: 900; letter-spacing: 0.05em;
  color: rgba(var(--color-deal-text), 0.88); text-transform: uppercase;
}
.bundle-includes__list { display: flex; align-items: stretch; gap: 1rem; }
.bundle-includes__empty { color: rgb(var(--color-deal-text)); font-weight: 600; max-width: 240px; }

.bundle-plus {
  flex: 0 0 auto; align-self: center; list-style: none;
  width: 2.6rem; height: 2.6rem; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1.6rem; font-weight: 900; color: rgb(var(--color-deal-text));
  background: linear-gradient(135deg, rgb(var(--color-deal-dark)), rgb(var(--color-deal-dark)));
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
}

.subkit-card {
  flex: 0 0 220px; width: 220px; display: flex; flex-direction: column;
  border-radius: 10px; overflow: hidden; background: rgb(var(--color-surface));
  text-decoration: none; color: inherit;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.subkit-card__media { position: relative; aspect-ratio: 5 / 3; background: rgb(var(--color-surface-alt)); }
.subkit-card__media img { width: 100%; height: 100%; object-fit: cover; }
.subkit-card__content { flex: 1 0 auto; padding: 0.7rem 0.85rem 0.9rem; display: flex; flex-direction: column; gap: 0.15rem; }
.subkit-card__sku { font-size: 0.72rem; color: rgb(var(--color-ink-soft)); margin: 0; }
.subkit-card__title { font-size: 0.95rem; margin: 0.15rem 0 0.4rem; }
.subkit-card__skills-title { font-size: 0.78rem; font-weight: 700; color: rgb(var(--color-ink-soft)); margin: 0; }
.subkit-card__skills { margin: 0.3rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; }
.subkit-card__skills li { font-size: 0.8rem; line-height: 1.35; }
.subkit-card__waitlist {
  order: 2; margin-top: auto; display: block; text-align: center; padding: 0.9rem 0.5rem;
  border-radius: 0.5rem; background: linear-gradient(135deg, rgb(var(--color-cta-dark)), rgb(var(--color-cta-light)));
  color: #fff; font-size: 0.9rem; font-weight: 800; text-decoration: none;
}
.subkit-card--unavailable .subkit-card__content {
  background: rgb(var(--color-collage-bg-darkest)); flex: 1 0 auto;
}
.subkit-card--unavailable .subkit-card__sku { order: 0; color: rgba(255, 255, 255, 0.55); }
.subkit-card--unavailable .subkit-card__title { order: 3; color: #fff; margin: 0.6rem 0 0; }

@media (max-width: 640px) {
  .bundle-card { width: 260px; flex-basis: 260px; }
  .bundle-includes { margin-left: 1rem; padding: 0.85rem 0.9rem 0.9rem 2.2rem; }
  .subkit-card { flex-basis: 180px; width: 180px; }
}

/* ========== TESTIMONIAL SLIDER ========== */
.testimonial-slider {
  background: rgb(var(--color-surface-alt));
  padding: 3rem 1.25rem;
  text-align: center;
}
.testimonial-slider > .section-heading { font-size: clamp(1.6rem, 3vw, 2.375rem); font-weight: 400; letter-spacing: 0.6px; }
.testimonial-slider__stage { max-width: 640px; margin: 0 auto; min-height: 9rem; position: relative; }
.testimonial-slider__slide { display: none; }
.testimonial-slider__slide.is-active { display: block; animation: testimonial-fade 0.35s ease; }
@keyframes testimonial-fade { from { opacity: 0; } to { opacity: 1; } }
.testimonial-slider__stars { color: rgb(var(--color-deal-mid)); font-size: 1.1rem; letter-spacing: 0.15em; margin-bottom: 0.6rem; }
.testimonial-slider__heading { margin: 0 0 0.75rem; font-size: 1.3rem; }
.testimonial-slider__quote { font-size: 1.05rem; line-height: 1.55; color: rgb(var(--color-ink-soft)); }
.testimonial-slider__author { font-style: normal; font-weight: 700; display: block; margin-top: 0.5rem; }
.testimonial-slider__controls {
  display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.75rem;
}
.testimonial-slider__button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface)); color: rgb(var(--color-ink)); cursor: pointer; font-size: 1.3rem;
}
.testimonial-slider__button:hover { border-color: rgb(var(--color-cta)); color: rgb(var(--color-cta)); }
.testimonial-slider__counter { font-variant-numeric: tabular-nums; color: rgb(var(--color-ink-soft)); font-size: 0.9rem; }

/* ========== MARKETING VIDEOS ========== */
.marketing-videos { background: rgb(var(--color-ink)); padding: 3rem 1.25rem; }
.marketing-videos__grid {
  display: grid; gap: 1.25rem; grid-template-columns: 1fr; max-width: var(--container-width); margin: 0 auto;
}
@media (min-width: 700px) { .marketing-videos__grid { grid-template-columns: repeat(2, 1fr); } }
.marketing-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.marketing-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ========== PRODUCT DETAIL ========== */
.breadcrumb { font-size: 0.85rem; color: rgb(var(--color-ink-soft)); padding: 1.5rem 0 0; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.product-detail__grid {
  display: grid; gap: 2rem; padding: 1.5rem 0 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .product-detail__grid { grid-template-columns: 1.1fr 1fr; align-items: start; }
}

/* Product photos aren't a uniform shape (mostly 3:2, some near-square), so
   the frame takes its height from the active image instead of cropping
   everything to a square. */
.product-gallery__main {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: rgb(var(--color-surface-alt));
}
.product-gallery__img {
  width: 100%; height: 100%; object-fit: contain;
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.15s ease;
}
.product-gallery__img.is-active { opacity: 1; position: relative; height: auto; }
.product-gallery__thumbs { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.product-gallery__thumb {
  width: 64px; height: 64px; padding: 0; border-radius: 8px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer; background: rgb(var(--color-surface-alt));
}
.product-gallery__thumb.is-active { border-color: rgb(var(--color-cta)); }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-detail__sku { font-size: 0.8rem; color: rgb(var(--color-ink-soft)); text-transform: uppercase; letter-spacing: 0.04em; }
.product-detail__info h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
.product-detail__price { font-size: 1.5rem; font-weight: 700; }
.product-detail__note { color: rgb(var(--color-ink-soft)); background: rgb(var(--color-surface-alt)); padding: 0.85rem 1rem; border-radius: var(--radius); }
.product-detail__cta { margin: 0.5rem 0 1.5rem; }
.product-detail__description :is(h2, h3) { margin-top: 1.25em; }
.product-detail__description ul { list-style: disc; padding-left: 1.25em; margin-bottom: 1em; }
.product-detail__description li { margin-bottom: 0.35em; }
.product-detail__description > :first-child { margin-top: 0; }

@media (min-width: 800px) {
  .product-gallery { position: sticky; top: 1.5rem; }
}

.product-section { padding-top: 2rem; padding-bottom: 2rem; }
/* Short rows (a 3-kit package, a lone related product) sit centred under the
   centred heading rather than hugging the left edge of a 4-column grid. */
.product-section .product-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.product-section .product-card { flex: 0 0 calc((100% - 1rem) / 2); }
@media (min-width: 640px) { .product-section .product-card { flex-basis: calc((100% - 2.5rem) / 3); } }
@media (min-width: 960px) { .product-section .product-card { flex-basis: calc((100% - 3.75rem) / 4); } }
.product-section:last-child { padding-bottom: 3rem; }

.resource-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.resource-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
  width: 128px; padding: 1.25rem 0.75rem; text-decoration: none; font-weight: 600; font-size: 0.9rem;
  border: 1px solid rgb(var(--color-border)); border-radius: var(--radius);
  background: rgb(var(--color-surface));
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.resource-tile:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.resource-tile__icon {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  color: #fff; font-size: 1.1rem; line-height: 1;
}
.resource-tile--video .resource-tile__icon { background: rgb(var(--palette-strawberry-red)); }
.resource-tile--doc .resource-tile__icon { background: rgb(var(--color-status-coming)); }

/* ========== PROSE / RTE (policies, about) ========== */
.prose { max-width: 780px; margin: 0 auto; padding-top: 2.5rem; padding-bottom: 4rem; }
.prose h1 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); margin-bottom: 0.75em; }
.prose > h2 { margin-top: 1.75em; }
.prose > h1 + h2 { margin-top: 0; }
.prose > ul { list-style: disc; padding-left: 1.25em; margin-bottom: 1em; }
.prose > ul > li { margin-bottom: 0.35em; }
.rte h2 { font-size: 1.3rem; margin-top: 1.75em; }
.rte h3 { font-size: 1.05rem; margin-top: 1.5em; }
.rte ul { list-style: disc; padding-left: 1.25em; margin-bottom: 1em; }
.rte li { margin-bottom: 0.35em; }
.rte a { color: rgb(var(--color-cta-dark)); }
.rte hr { border: none; border-top: 1px solid rgb(var(--color-border)); margin: 2rem 0; }
.rte table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.9rem; }
.rte table td, .rte table th { border: 1px solid rgb(var(--color-border)); padding: 0.5em 0.75em; text-align: left; }

.contact-card {
  background: rgb(var(--color-surface-alt)); border-radius: var(--radius);
  padding: 1.5rem; margin: 1.5rem 0 2rem;
}
.contact-card .button { margin-top: 0.75rem; }
.contact-card > :last-child { margin-bottom: 0; }

/* ========== FORMAT / TESTIMONIAL / FAQ (marketing pages) ========== */
.format-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin: 1.5rem 0 2rem; }
@media (min-width: 640px) { .format-grid { grid-template-columns: repeat(3, 1fr); } }
.format-card {
  border: 1px solid rgb(var(--color-border)); border-radius: var(--radius); padding: 1.25rem;
}
.format-card h3 { font-size: 1.05rem; }
.format-card ul { list-style: disc; padding-left: 1.1em; margin-top: 0.75em; font-size: 0.9rem; color: rgb(var(--color-ink-soft)); }
.format-card li { margin-bottom: 0.3em; }

.testimonial-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin: 1.5rem 0 2rem; }
@media (min-width: 640px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } }
.testimonial {
  margin: 0; padding: 1.25rem; border-radius: var(--radius); background: rgb(var(--color-surface-alt));
}
.testimonial p { font-style: italic; }
.testimonial cite { font-style: normal; font-weight: 600; font-size: 0.85rem; }

.faq { margin: 1.5rem 0 2rem; }
.faq details {
  border-bottom: 1px solid rgb(var(--color-border)); padding: 0.9rem 0;
}
.faq summary { font-weight: 600; cursor: pointer; }
.faq p { margin-top: 0.6em; color: rgb(var(--color-ink-soft)); }

/* ========== FOOTER ========== */
.site-footer { background: rgb(var(--color-ink)); color: rgba(255,255,255,0.85); margin-top: 3rem; }
.site-footer__trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.75rem;
  padding: 1.5rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 0.82rem; color: rgba(255,255,255,0.65);
}
.trust-badge { display: flex; align-items: center; gap: 0.4em; }
.trust-badge__icon { font-size: 0.5rem; color: rgb(var(--color-status-new)); }
.site-footer__inner {
  max-width: var(--container-width); margin: 0 auto; padding: 2.5rem 1.25rem;
  display: grid; gap: 2rem; grid-template-columns: 1fr;
}
@media (min-width: 700px) { .site-footer__inner { grid-template-columns: repeat(4, 1fr); } }
.site-footer__heading { font-weight: 700; color: #fff; margin-bottom: 0.6em; }
.site-footer__col ul { display: flex; flex-direction: column; gap: 0.4em; }
.site-footer__col a { text-decoration: none; color: inherit; font-size: 0.9rem; }
.site-footer__col a:hover { color: #fff; }
.site-footer__col p { font-size: 0.9rem; }
.site-footer__legal {
  border-top: 1px solid rgba(255,255,255,0.1); padding: 1.25rem; text-align: center;
  font-size: 0.78rem; color: rgba(255,255,255,0.5);
}