/* ============================================================================
   SiteLab platform section stylesheet — served at /theme/platform/sections.css.
   Driven ENTIRELY by the design-token custom properties ({{ design_css }} emits
   :root{--sl-*} per site). Never hardcode a brand value here; add a token.
   ============================================================================ */

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body.sl-body {
  margin: 0;
  font-family: var(--sl-font-body);
  color: var(--sl-text);
  background: var(--sl-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.sl-body h1, .sl-body h2, .sl-body h3, .sl-body h4 {
  font-family: var(--sl-font-heading);
  line-height: 1.15;
  margin: 0 0 .5em;
}
.sl-body img { max-width: 100%; height: auto; }
.sl-body a { color: var(--sl-primary); }

.sl-container {
  max-width: var(--sl-max-w);
  margin-inline: auto;
  padding-inline: 24px;
}
.sl-section { padding-block: var(--sl-section-pad); }
/* THE CHROME IS NOT A BAND, and this exemption has to be unbeatable by a theme.
   A header is a `.sl-section` like everything else, so a theme that writes its own
   `.sl-section { padding-block: … }` ties on specificity with a single-class exemption and wins on
   sheet order -- the per-site stylesheet always loads after this one. The result is a header with a
   full section's padding above and below a 76px bar: on kidoo that was a 220px-tall header with 144px
   of empty white around the logo, which reads as a broken page rather than as a style choice, and no
   part of it fails. Doubling the class makes the exemption (0,2,0) so a bare `.sl-section` rule cannot
   reach it, while a theme that deliberately targets `.sl-section--site-header` still can. */
.sl-section.sl-section--site-header,
.sl-section.sl-section--divider,
.sl-section.sl-section--site-footer { padding-block: 0; }

.sl-eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sl-primary);
  margin-bottom: 10px;
}
.sl-heading { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.sl-subheading { color: var(--sl-muted); max-width: 640px; margin: 0 0 1.2rem; }
.sl-center { text-align: center; }
.sl-center .sl-subheading { margin-inline: auto; }

/* Buttons */
.sl-btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: var(--sl-btn-radius);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .15s ease, background .15s ease;
  font-size: 1rem;
}
.sl-btn.sl-btn--primary { background: var(--sl-primary); color: var(--sl-primary-contrast); }
.sl-btn.sl-btn--primary:hover { filter: brightness(1.08); }
.sl-btn.sl-btn--ghost { background: transparent; color: var(--sl-primary); border-color: var(--sl-primary); }
.sl-btn.sl-btn--ghost:hover { background: color-mix(in srgb, var(--sl-primary) 8%, transparent); }

/* Cards */
.sl-card {
  /* Published as a variable so anything that has to bleed to the card's edge (a feature card's picture)
     cancels the REAL padding rather than a copy of it that goes stale when this number changes. */
  --sl-card-pad: 26px;
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  padding: var(--sl-card-pad);
}

/* ── Site header ──────────────────────────────────────────────────────────── */
.sl-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--sl-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sl-border);
}
.sl-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 66px;
}
.sl-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sl-font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--sl-text);
  text-decoration: none;
}
.sl-header__brand img { height: 40px; width: auto; max-width: 260px; object-fit: contain; }
.sl-header__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.sl-header__nav a {
  padding: 7px 11px;
  border-radius: 8px;
  color: var(--sl-text);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
/* A button-style link in the nav keeps the .sl-btn look (no nav-link padding override). */
.sl-header__nav a.sl-btn { color: var(--sl-primary-contrast); }
.sl-header__nav a.sl-btn:hover { background: var(--sl-primary); }
.sl-header__nav a:hover { background: var(--sl-surface); color: var(--sl-primary); }
.sl-header__cta { margin-left: 8px; }
.sl-header__toggle { display: none; }

/* Language switcher */
.sl-lang { position: relative; margin-left: 4px; }
.sl-lang > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  color: var(--sl-muted);
}
.sl-lang > summary::-webkit-details-marker { display: none; }
.sl-lang[open] > summary, .sl-lang > summary:hover { background: var(--sl-surface); }
.sl-lang__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 140px;
  background: var(--sl-bg);
  border: 1px solid var(--sl-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.sl-lang__menu a {
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--sl-text);
}
.sl-lang__menu a:hover { background: var(--sl-surface); }
.sl-lang__menu a.is-current { color: var(--sl-primary); font-weight: 700; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.sl-hero {
  position: relative;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  min-height: 420px;
}
.sl-hero--tall { min-height: 620px; }
.sl-hero--compact { min-height: 280px; }
.sl-hero__overlay {
  position: absolute;
  inset: 0;
  background: #0b1220;
}
/* Background video sits under the overlay and above the background image, so a browser that
   refuses autoplay degrades to the still rather than to a flat colour. */
.sl-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .sl-hero__video { display: none; }
}
.sl-hero__inner { position: relative; width: 100%; }
.sl-hero__content { max-width: 640px; }
.sl-hero--center { text-align: center; }
.sl-hero--center .sl-hero__content { margin-inline: auto; }
.sl-hero__heading { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.sl-hero__subheading { font-size: 1.15rem; color: var(--sl-muted); margin: 0 0 1.6rem; }
.sl-hero--on-image .sl-hero__heading,
.sl-hero--on-image .sl-hero__subheading { color: #fff; }
.sl-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.sl-hero--center .sl-hero__actions { justify-content: center; }

/* Text beside the picture. The band has no backdrop here, so it takes ordinary section padding and the
   words keep the page's own colours — the `--on-image` white-text rules are deliberately not applied,
   because there is nothing dark behind them to read against. */
.sl-hero--split {
  min-height: 0;
  padding-block: var(--sl-section-pad);
  background-image: none;
}
.sl-hero--split .sl-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}
.sl-hero--split .sl-hero__content { max-width: none; }
.sl-hero--split .sl-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--sl-radius);
}
/* Centre-aligned split reads as one centred column with the picture under it, not as two centred
   halves — otherwise the text is centred against an edge it does not share. */
.sl-hero--split.sl-hero--center .sl-hero__inner { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) {
  .sl-hero--split .sl-hero__inner { grid-template-columns: minmax(0, 1fr); }
}

/* Band heading row: the title and its "see all" link on one baseline. */
.sl-band-header-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: baseline;
  justify-content: space-between;
}
.sl-band-header-row h2 { margin: 0; }
.sl-quote__role { display: block; font-size: .86rem; opacity: .7; }

/* ── Stats band ───────────────────────────────────────────────────────────── */
.sl-stats {
  display: grid;
  gap: 24px 48px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.sl-stats--2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sl-stats--5 { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.sl-stats__rule { height: 1px; background: currentColor; opacity: .18; margin-bottom: 28px; }
.sl-stat__value { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 800; line-height: 1.1; }
.sl-stat__label { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; opacity: .72; margin-top: 4px; }

/* ── Rich text ────────────────────────────────────────────────────────────── */
.sl-rich-text { padding-inline: 24px; }
/* NARROW narrows the whole BAND, not just the paragraph. It used to constrain `__body` alone, so the
   heading -- a sibling outside that box -- kept the container's full width and started 264px to the LEFT
   of the text it introduces. Five bands across three of kidoo's pages, and the gap GREW when the
   container was widened to match the original, because only one half of the pair moved. The narrow
   column is the band's measure; every child shares it. `--split` opts out: it is a two-column layout
   whose head is meant to sit beside the body, not above it. */
.sl-rich-text--narrow:not(.sl-rich-text--split) > * { max-width: 720px; margin-inline: auto; }

/* ── Video ────────────────────────────────────────────────────────────────── */
.sl-video { position: relative; width: 100%; margin-inline: auto; border-radius: var(--sl-radius); overflow: hidden; background: #000; }
.sl-video--narrow { max-width: 760px; }
.sl-video--wide { max-width: 960px; }
.sl-video--full { max-width: 100%; }
.sl-video--16x9 { aspect-ratio: 16 / 9; }
.sl-video--4x3 { aspect-ratio: 4 / 3; }
.sl-video--1x1 { aspect-ratio: 1 / 1; }
.sl-video--21x9 { aspect-ratio: 21 / 9; }
.sl-video > iframe, .sl-video > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; }
.sl-rich-text__heading-icon { color: var(--sl-primary, #0a7d37); margin-right: .4em; }
.sl-rich-text__body :first-child { margin-top: 0; }

/* ── Image with text ──────────────────────────────────────────────────────── */
.sl-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.sl-media-text__media img {
  width: 100%;
  border-radius: var(--sl-radius);
  object-fit: cover;
}
.sl-media-text--media-right .sl-media-text__media { order: 2; }
.sl-media-text__body :first-child { margin-top: 0; }

/* ── Feature grid ─────────────────────────────────────────────────────────── */
.sl-features { display: grid; gap: 20px; }
.sl-features--2 { grid-template-columns: repeat(2, 1fr); }
.sl-features--3 { grid-template-columns: repeat(3, 1fr); }
.sl-features--4 { grid-template-columns: repeat(4, 1fr); }
.sl-feature__icon {
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: 14px;
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--sl-primary) 12%, transparent);
}
.sl-feature h3 { font-size: 1.1rem; margin-bottom: .35em; }
.sl-feature p { color: var(--sl-muted); margin: 0; }
/* A feature card's picture. The card carries its own padding, so the image is pulled out to the card's
   edges — a photo inset by the padding reads as a mistake beside every other media band. */
.sl-feature__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: calc(var(--sl-card-pad, 26px) * -1) calc(var(--sl-card-pad, 26px) * -1) 16px;
  border-radius: var(--sl-radius) var(--sl-radius) 0 0;
  background: var(--sl-surface);
}
.sl-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Gallery ──────────────────────────────────────────────────────────────── */
.sl-gallery { display: grid; gap: 14px; }
.sl-gallery--2 { grid-template-columns: repeat(2, 1fr); }
.sl-gallery--3 { grid-template-columns: repeat(3, 1fr); }
.sl-gallery--4 { grid-template-columns: repeat(4, 1fr); }
.sl-gallery a { display: block; }
.sl-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--sl-radius);
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.sl-faq__list { max-width: 760px; display: flex; flex-direction: column; gap: 10px; }
.sl-center .sl-faq__list { margin-inline: auto; }
.sl-faq__item {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  padding: 0 22px;
}
.sl-faq__item summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.sl-faq__item summary::-webkit-details-marker { display: none; }
.sl-faq__item summary::after { content: "+"; font-size: 1.3rem; color: var(--sl-primary); flex: none; }
.sl-faq__item[open] summary::after { content: "\2212"; }
.sl-faq__answer { padding: 0 0 18px; color: var(--sl-muted); }
.sl-faq__answer :first-child { margin-top: 0; }

/* ── Testimonials ─────────────────────────────────────────────────────────── */
.sl-quotes { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.sl-quote { display: flex; flex-direction: column; gap: 12px; }
.sl-quote__stars { color: #f59e0b; letter-spacing: 2px; }
.sl-quote__text { margin: 0; font-style: italic; }
.sl-quote__author { color: var(--sl-muted); font-weight: 600; font-size: .95rem; }

/* ── Logo strip ───────────────────────────────────────────────────────────── */
.sl-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.sl-logos img { max-height: 44px; width: auto; opacity: .75; }
.sl-logos img:hover { opacity: 1; }

/* ── CTA banner ───────────────────────────────────────────────────────────── */
.sl-cta {
  border-radius: var(--sl-radius);
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
}
.sl-cta--primary { background: var(--sl-primary); color: var(--sl-primary-contrast); }
.sl-cta--primary .sl-heading { color: var(--sl-primary-contrast); }
.sl-cta--primary p { color: color-mix(in srgb, var(--sl-primary-contrast) 82%, transparent); }
.sl-cta--primary .sl-btn--primary { background: var(--sl-primary-contrast); color: var(--sl-primary); }
.sl-cta--surface { background: var(--sl-surface); border: 1px solid var(--sl-border); }
.sl-cta p { max-width: 560px; margin: 0 auto 1.4rem; }

/* ── Contact ──────────────────────────────────────────────────────────────── */
.sl-contact { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; }
.sl-contact--form-only { grid-template-columns: 1fr; max-width: 720px; }
.sl-contact__form { display: flex; flex-direction: column; gap: 14px; }
/* Compact = the short call-back form (name + phone): fields sit on one row and the button joins them. */
.sl-contact__form--compact { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.sl-contact__form--compact > div { flex: 1 1 160px; }
.sl-contact__form--compact > div:last-child { flex: 0 0 auto; }
.sl-contact__form label { font-weight: 600; font-size: .92rem; display: block; margin-bottom: 6px; }
.sl-contact__form input, .sl-contact__form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--sl-border);
  border-radius: 10px;
  background: var(--sl-bg);
  color: var(--sl-text);
  font: inherit;
}
.sl-contact__form input:focus, .sl-contact__form textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--sl-primary) 45%, transparent);
  border-color: var(--sl-primary);
}
.sl-contact__success {
  background: #ecfdf3;
  border: 1px solid #a6f4c5;
  color: #067647;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.sl-contact__info { display: flex; flex-direction: column; gap: 14px; }
.sl-contact__info a { text-decoration: none; }
.sl-contact__info-row { display: flex; gap: 10px; align-items: baseline; }
.sl-contact__info-label { font-weight: 700; min-width: 84px; }
/* The icon variant reads as a card rather than a form: a tinted round badge, and the lines stack beside it
   instead of sitting on one baseline. `--icon` is a MODIFIER, so a panel that never asks for icons keeps
   every declaration above and nothing else moves. */
.sl-review-form__photo-hint { margin: 6px 0 0; font-size: .85em; opacity: .7; }
.sl-pdp__chip--sold-out { opacity: .5; cursor: not-allowed; text-decoration: line-through; }
.sl-pdp__chip--sold-out .sl-pdp__swatch { filter: grayscale(1); }
.sl-pdp__stock--out { opacity: .75; }
.sl-pdp__badges { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.sl-pdp__badges li { display: flex; align-items: center; gap: 8px; }
.sl-pdp__lead { margin: 0 0 14px; opacity: .85; }
.sl-pdp__more { margin-top: 12px; }
.sl-contact__info-row--icon { align-items: flex-start; gap: 14px; }
.sl-contact__info-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; color: var(--sl-primary, #0AC959);
  background: color-mix(in srgb, var(--sl-primary, #0AC959) 12%, transparent); }
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .sl-contact__info-icon { background: rgba(0, 0, 0, .06); }
}
.sl-contact__info-row--icon > span:last-child { padding-top: 8px; line-height: 1.45; }
.sl-contact__info-row--icon .sl-contact__hours-note { display: block; margin: 2px 0 0; opacity: .7; }

/* ── Collection list ──────────────────────────────────────────────────────── */
.sl-collection { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.sl-collection__item { display: flex; flex-direction: column; gap: 10px; }
.sl-collection__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--sl-radius) - 4px);
}
.sl-collection__item h3 { margin: 0; font-size: 1.05rem; }
.sl-collection__item p { margin: 0; color: var(--sl-muted); font-size: .95rem; }

/* ── Map ──────────────────────────────────────────────────────────────────── */
.sl-map iframe {
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: var(--sl-radius);
  display: block;
}

/* ── Divider ──────────────────────────────────────────────────────────────── */
.sl-divider--s { height: 24px; }
.sl-divider--m { height: 56px; }
.sl-divider--l { height: 96px; }
.sl-divider__line { border: 0; border-top: 1px solid var(--sl-border); margin: 0 auto; max-width: var(--sl-max-w); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.sl-footer {
  background: var(--sl-surface);
  border-top: 1px solid var(--sl-border);
  margin-top: 40px;
}
.sl-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding-block: 56px;
}
/* Flex (not a fixed grid) so an unused link column leaves no dead track — the about column is wider. */
.sl-footer__col { flex: 1 1 200px; min-width: 0; }
.sl-footer__col:first-child { flex: 1.6 1 300px; }
.sl-footer__brand { font-family: var(--sl-font-heading); font-weight: 800; font-size: 1.2rem; margin-bottom: 10px; }
.sl-footer__about { color: var(--sl-muted); max-width: 380px; }
.sl-footer h4 { font-size: .92rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sl-muted); }
.sl-footer__links { display: flex; flex-direction: column; gap: 8px; }
.sl-footer__links a { color: var(--sl-text); text-decoration: none; }
.sl-footer__links a:hover { color: var(--sl-primary); }
/* The footer's SECOND link list: its own row under the columns, laid out inline because it is a
   short run of related links (guides, legal, help) rather than a column of navigation. */
.sl-footer__group { margin-top: 28px; }
.sl-footer__group h4 { margin: 0 0 10px; }
.sl-footer__links--inline { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
.sl-footer__bottom {
  border-top: 1px solid var(--sl-border);
  padding-block: 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--sl-muted);
  font-size: .9rem;
}
/* Dark footer (background preset "dark" / a dark custom colour): keep every footer element legible. */
.sl-section.sl-bg--dark.sl-footer,
.sl-section.sl-bg--dark .sl-footer__col,
.sl-section.sl-bg--dark .sl-footer__about { color: rgba(255, 255, 255, .75); }
.sl-section.sl-bg--dark .sl-footer__brand { color: #fff; }
.sl-section.sl-bg--dark .sl-footer h4 { color: rgba(255, 255, 255, .55); }
.sl-section.sl-bg--dark .sl-footer__links a { color: rgba(255, 255, 255, .85); }
.sl-section.sl-bg--dark .sl-footer__links a:hover { color: #fff; }
.sl-section.sl-bg--dark .sl-footer__bottom { color: rgba(255, 255, 255, .5); border-color: rgba(255, 255, 255, .12); }
.sl-section.sl-bg--dark .sl-footer__bottom a { color: rgba(255, 255, 255, .6); }

/* ── Nested blocks (restrictive subsections: container / text / link / … ) ──── */
/* Wrappers carry their own display via the block's tag (span = inline, div = block);
   these rules only add safe defaults + the language-switcher chrome. */
.sl-block { min-width: 0; }
.sl-block--container { display: block; }
.sl-block--spacer { display: block; }
.sl-block--text .sl-heading { margin: 0; }
.sl-block--text p { margin: 0; }
.sl-langswitch a {
  text-decoration: none;
  color: inherit;
  opacity: .7;
  font-weight: 600;
  font-size: .9rem;
}
.sl-langswitch a:hover { opacity: 1; }
.sl-langswitch a.is-current { opacity: 1; color: var(--sl-primary); }
/* Element-scoped on purpose. `.sl-cart` names TWO different things in this file -- the header's
   cart icon (an <a>) and the legacy cart TABLE below -- and an unscoped `display:inline-flex`
   here laid every row of that table out on one line, on every site that rendered it. */
a.sl-cart { position: relative; display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
a.sl-cart:hover { color: var(--sl-primary); }
.sl-cart__count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--sl-primary);
  color: var(--sl-primary-contrast);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* ── Eshop: product grid / PDP / cart ─────────────────────────────────────── */
.sl-products { display: grid; gap: 20px; }
.sl-products--2 { grid-template-columns: repeat(2, 1fr); }
.sl-products--3 { grid-template-columns: repeat(3, 1fr); }
.sl-products--4 { grid-template-columns: repeat(4, 1fr); }
.sl-product-card {
  display: flex;
  flex-direction: column;
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--sl-text);
  transition: box-shadow .15s ease, transform .15s ease;
}
.sl-product-card:hover { box-shadow: 0 10px 28px rgba(16, 24, 40, .10); transform: translateY(-2px); }
.sl-product-card img, .sl-product-card__placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: color-mix(in srgb, var(--sl-primary) 8%, var(--sl-surface));
}
.sl-product-card__body { padding: 14px 16px 16px; }
.sl-product-card__body h3 { font-size: 1rem; margin: 0 0 .3em; }
/* A SHOP'S PRICE IS THE ONE NUMBER ON THE PAGE, so it is written in the shop's own colour --
   every other price surface in this file already is (.sl-lcard__price, .sl-itemhead__price,
   .sl-pricelist__group). The two that were not are the catalogue card and the product page, i.e.
   the only two a customer buys from. kidoo.lv arrived from its standalone app, where the price was
   its brand green and the discount a red pill, and came out of the migration as body text on white:
   the owner's report was "the price lost its colours" and he was reading the same --sl-primary his
   buttons use. The compare-at stays muted and struck; it is the thing the eye must NOT land on.

   CAVEAT, measured 2026-09-12 and left as a note rather than a formula. --sl-primary is a BRAND
   colour with no contrast floor: atceriesmani sets #ca8a04 (2.96:1 on white) and mindfit #C9A03F
   (2.26:1), both under the 3:1 that 1.4rem bold needs, so a price in them would read worse than
   the black it replaced. Neither publishes a product page today -- every page in all three
   non-green shops' sitemaps was swept and none renders either of these two classes -- which is
   why this is not darkened here: blending toward --sl-text would also move kidoo's green off the
   exact token its owner asked to have back, to fix nothing that is currently on screen. The three
   older price surfaces named above have the same exposure and have shipped with it. If a shop on
   a pale palette ever publishes a PDP, darken ALL FIVE together
   (color-mix(in srgb, var(--sl-primary) 85%, var(--sl-text)) puts both golds over 3:1 and leaves
   kidoo visibly green) rather than splitting the rule across two of them. */
.sl-product-card__price { font-weight: 700; color: var(--sl-primary); }
.sl-product-card__price s { color: var(--sl-muted); font-weight: 400; margin-left: 8px; }

/* Price, was-price and the saving on ONE baseline. Stacked, a discounted product reads as three
   unrelated lines and the saving is invisible -- which is the half of "colours" a percentage
   carries. Wraps, so a long compare-at on a narrow phone drops instead of overflowing. */
.sl-pdp__price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 .2em; }
.sl-pdp__price { font-size: 1.4rem; font-weight: 800; margin: 0; color: var(--sl-primary); }
.sl-pdp__compare { margin: 0; }
.sl-pdp__compare s { color: var(--sl-muted); }
/* The same pill as .sl-course-row__save, for the same statement -- one shape for "this is reduced".
   --sl-accent is the attention colour; the fallback is what a site that never set one gets. */
.sl-pdp__save {
  padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap;
  background: var(--sl-accent, #dc3545); color: #fff;
}
.sl-pdp__form { display: flex; flex-direction: column; gap: 16px; margin-block: 12px; }
.sl-pdp__label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.sl-pdp__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-pdp__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--sl-border);
  border-radius: 999px;
  background: var(--sl-bg);
  cursor: pointer;
}
.sl-pdp__chip:has(input:checked) {
  border-color: var(--sl-primary);
  background: color-mix(in srgb, var(--sl-primary) 10%, var(--sl-bg));
}
.sl-pdp__chip input { accent-color: var(--sl-primary); }
.sl-pdp__swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--sl-border); display: inline-block; }
.sl-pdp__qty {
  width: 90px;
  padding: 10px 12px;
  border: 1px solid var(--sl-border);
  border-radius: 10px;
  font: inherit;
}
.sl-pdp__description { color: var(--sl-muted); }
/* The BIG picture, when the gallery follows the colour. A square plate with the photo CONTAINED, which
   is what the retired app used: `cover` on a wide frame crops a bike down to two wheels, which is what
   the live page was showing. Scoped to the opted-in gallery, so a shop using the plain product image is
   untouched. */
.sl-media-text__media img.sl-pdp__main {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #f5f5f5;
  border-radius: var(--sl-radius);
  display: block;
}
/* Thumbnails are a STRIP, so they are all one size. `height: auto` let each one keep its own aspect and
   the row came out ragged, with gaps where a tall photo pushed its neighbours down. */
.sl-pdp__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin-top: 12px; }
.sl-pdp__gallery img { width: 100%; height: auto; border-radius: var(--sl-radius); display: block; }
.sl-pdp__thumb {
  padding: 0;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  background: #f5f5f5;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 1;
}
.sl-pdp__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 0; }
.sl-pdp__thumb:hover, .sl-pdp__thumb:focus-visible { border-color: var(--sl-primary, #0a7d37); outline: none; }
/* The photo as a control: a button that carries the image and adds nothing of its own, so the frame
   above still decides how the picture sits. */
.sl-pdp__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.sl-pdp__zoom:focus-visible { outline: 2px solid var(--sl-primary, #0a7d37); outline-offset: 3px; }
/* The full-size viewer. A <dialog>, so the browser owns the top layer, the focus trap and Esc. */
.sl-lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; padding: 0;
  background: rgba(17,17,17,.94); display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 8px; }
.sl-lightbox::backdrop { background: rgba(17,17,17,.94); }
.sl-lightbox[open] { display: grid; }
.sl-lightbox__img { grid-column: 2; justify-self: center; max-width: min(92vw, 1100px); max-height: 86dvh;
  object-fit: contain; }
.sl-lightbox__nav, .sl-lightbox__close { background: rgba(255,255,255,.12); color: #fff; border: 0;
  cursor: pointer; line-height: 1; border-radius: 999px; }
.sl-lightbox__nav { font-size: 2.4rem; width: 56px; height: 56px; margin-inline: 12px; }
.sl-lightbox__nav--prev { grid-column: 1; }
.sl-lightbox__nav--next { grid-column: 3; }
.sl-lightbox__close { position: absolute; top: 16px; right: 16px; font-size: 1.8rem; width: 44px; height: 44px; }
.sl-lightbox__nav:hover, .sl-lightbox__close:hover { background: rgba(255,255,255,.24); }
.sl-lightbox__count { position: absolute; bottom: 18px; left: 0; right: 0; margin: 0; text-align: center;
  color: rgba(255,255,255,.75); font-size: .9rem; }
@media (max-width: 720px) {
  .sl-lightbox__nav { width: 44px; height: 44px; font-size: 1.8rem; margin-inline: 4px; }
  .sl-lightbox__img { max-width: 96vw; }
}
/* ...and that `display` beats the `hidden` attribute's user-agent rule outright, so a photo marked
   hidden stayed on screen and the per-colour gallery showed every colour at once. Say it here rather
   than reaching for an inline style: the attribute is the state, this is what the state LOOKS like. */
.sl-pdp__gallery img[hidden] { display: none; }

.sl-pdp__specs { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: .95em; }
.sl-pdp__specs th, .sl-pdp__specs td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--sl-border); vertical-align: top; }
.sl-pdp__specs th { color: var(--sl-muted); font-weight: 500; white-space: nowrap; }

/* Product fields — a shop's own declared per-product content, rendered generically. */
.sl-product-fields__row { margin-bottom: 18px; }
.sl-product-fields__label { color: var(--sl-muted); font-weight: 500; margin-bottom: 4px; }
.sl-product-fields__list { margin: 0; padding-left: 1.25em; }
.sl-product-fields--table .sl-product-fields__row { display: grid; grid-template-columns: minmax(120px, 22%) 1fr; gap: 16px; align-items: start; margin-bottom: 12px; }
.sl-product-fields--table .sl-product-fields__label { margin-bottom: 0; }
@media (max-width: 640px) { .sl-product-fields--table .sl-product-fields__row { grid-template-columns: 1fr; gap: 4px; } }

/* The pre-2026-09-10 cart markup. The section no longer emits it, but a site may hold its own
   `sections/cart` copy, so the rules stay -- element-scoped, for the reason stated above. */
table.sl-cart { width: 100%; border-collapse: collapse; }
table.sl-cart td { padding: 12px 8px; border-bottom: 1px solid var(--sl-border); vertical-align: middle; }
.sl-cart__media img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.sl-cart__option { color: var(--sl-muted); }
.sl-cart__qty-form { display: inline-flex; align-items: center; gap: 10px; position: relative; }
.sl-cart__qty-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--sl-border);
  background: var(--sl-surface);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.sl-cart__qty-btn:hover { border-color: var(--sl-primary); color: var(--sl-primary); }
.sl-cart__total { font-weight: 700; text-align: right; }
.sl-cart__remove {
  border: 0;
  background: none;
  color: var(--sl-muted);
  font-size: 1.3rem;
  cursor: pointer;
}
.sl-cart__remove:hover { color: #dc2626; }
.sl-cart__subtotal { font-size: 1.1rem; margin-top: 16px; }
.sl-cart__discount { color: var(--sl-muted); }

/* --- Cart page + order summary -------------------------------------------
   The basket and the checkout share one totals panel (.sl-summary) so the
   number a shopper reads on one page is drawn by the same rules on the next.
   Everything here is token-driven; a site tunes it by changing its tokens. */
.sl-cartpage, .sl-checkout {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}
.sl-cartpage__grid, .sl-checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  align-items: start;
}
.sl-checkout__grid { grid-template-columns: minmax(0, 1fr) 360px; }
@media (max-width: 900px) {
  .sl-cartpage__grid, .sl-checkout__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

.sl-cartpage__empty { text-align: center; padding-block: 24px; }
.sl-cartpage__empty .sl-subheading { margin-inline: auto; }
.sl-cart__empty-icon { font-size: 2.6rem; color: var(--sl-muted); margin: 0 0 8px; }
.sl-cart__empty-hint { color: var(--sl-muted); margin: 0 0 20px; }

.sl-cartpage__lines { display: grid; gap: 14px; }

.sl-cartline {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto auto 34px;
  grid-template-areas: "media body qty amount remove";
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  background: var(--sl-surface);
}
.sl-cartline__media { grid-area: media; }
.sl-cartline__media img,
.sl-cartline__media-empty {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: calc(var(--sl-radius) * .7);
}
.sl-cartline__media-empty {
  background: color-mix(in srgb, var(--sl-border) 45%, transparent);
  border: 1px dashed var(--sl-border);
}
.sl-cartline__body { grid-area: body; min-width: 0; }
.sl-cartline__name { margin: 0; font-weight: 600; line-height: 1.35; }
.sl-cartline__meta { margin: 4px 0 0; color: var(--sl-muted); font-size: .9rem; }
.sl-cartline__unit { margin: 6px 0 0; color: var(--sl-muted); font-size: .9rem; }
.sl-cartline__unit span { opacity: .8; }
.sl-cartline__badge {
  display: inline-block;
  margin: 8px 0 0;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--sl-primary) 12%, transparent);
  color: var(--sl-primary);
}
.sl-cartline__qty { grid-area: qty; }
.sl-cartline__qty-form { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.sl-cartline__qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--sl-border);
  background: var(--sl-bg);
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.sl-cartline__qty-btn:hover { border-color: var(--sl-primary); color: var(--sl-primary); }
.sl-cartline__qty-value { min-width: 26px; text-align: center; font-weight: 600; }
.sl-cartline__amount { grid-area: amount; font-weight: 700; white-space: nowrap; }
.sl-cartline__remove { grid-area: remove; justify-self: end; }
.sl-cartline__remove-btn {
  border: 0;
  background: none;
  color: var(--sl-muted);
  font-size: 1.25rem;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
  border-radius: 8px;
}
.sl-cartline__remove-btn:hover { color: #dc2626; background: color-mix(in srgb, #dc2626 8%, transparent); }
@media (max-width: 640px) {
  .sl-cartline {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      "media body remove"
      "media qty  amount";
    gap: 10px 14px;
  }
  .sl-cartline__media img, .sl-cartline__media-empty { width: 64px; height: 64px; }
  .sl-cartline__amount { justify-self: end; }
}

.sl-cartpage__warning {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: calc(var(--sl-radius) * .7);
  background: color-mix(in srgb, var(--sl-accent, #f59e0b) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--sl-accent, #f59e0b) 35%, transparent);
}
.sl-cartpage__continue { margin: 18px 0 0; }
.sl-cartpage__continue a { text-decoration: none; font-weight: 600; }
.sl-cartpage__continue a:hover { text-decoration: underline; }

.sl-summary {
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  background: var(--sl-surface);
  padding: 24px;
  position: sticky;
  top: 24px;
}
@media (max-width: 900px) { .sl-summary { position: static; } }
.sl-summary__title { font-size: 1.15rem; margin: 0 0 16px; }
.sl-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  color: var(--sl-muted);
}
.sl-summary__row span:last-child { color: var(--sl-text); font-weight: 600; }
.sl-summary__row--accent span:last-child { color: var(--sl-primary); }
.sl-summary__row code { font-family: inherit; font-weight: 600; }
.sl-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--sl-border);
  font-weight: 600;
}
.sl-summary__total strong { font-size: 1.35rem; }
.sl-summary__cta {
  display: block;
  width: 100%;
  margin-top: 18px;
  text-align: center;
}
.sl-summary__note {
  margin: 12px 0 0;
  color: var(--sl-muted);
  font-size: .85rem;
  text-align: center;
}

/* Customs and import duty, when the parcel leaves the shop's VAT union. Deliberately NOT muted like
   the note above it: it warns about money somebody else asks for AFTER the buyer has paid us, so it
   has to be read before the pay button rather than discovered at their own door. Amber, because the
   shop's own accent colour means "error" everywhere else on this page. */
.sl-summary__customs {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: calc(var(--sl-radius) * .6);
  border: 1px solid color-mix(in srgb, #b45309 35%, transparent);
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  color: var(--sl-text);
  font-size: .85rem;
  line-height: 1.5;
}

/* The terms tick, when the shop asks for it on the cart rather than on the checkout form. The button
   is inside this form, so the spacing that belonged to `.sl-summary__cta` still applies to it. */
.sl-summary__terms { margin-top: 18px; }
.sl-summary__terms .sl-check { font-size: .88rem; }
.sl-summary__terms .sl-summary__cta { margin-top: 14px; }
.sl-summary__terms-link { margin: 8px 0 0; font-size: .85rem; }
.sl-summary__terms-warn {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-radius: calc(var(--sl-radius) * .6);
  background: color-mix(in srgb, #dc2626 10%, transparent);
  border: 1px solid color-mix(in srgb, #dc2626 30%, transparent);
  font-size: .85rem;
}
.sl-checkout__terms-done { margin: 4px 0 0; color: var(--sl-muted); font-size: .92rem; }
.sl-summary__lines { display: grid; gap: 12px; margin-bottom: 16px; }
.sl-summary__line { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.sl-summary__line img,
.sl-summary__line-media {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
}
.sl-summary__line-media {
  background: color-mix(in srgb, var(--sl-border) 45%, transparent);
  border: 1px dashed var(--sl-border);
}
.sl-summary__line-name { font-size: .92rem; line-height: 1.3; }
.sl-summary__line-qty { color: var(--sl-muted); font-size: .82rem; }
/* A renewing line is read at a glance, the same pill the cart prints — the checkout is the last
   screen before the money leaves, so this is the one place it must not be missable. */
.sl-summary__line-sub {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--sl-primary) 12%, transparent);
  color: var(--sl-primary);
}
.sl-summary__line-amount { font-weight: 600; white-space: nowrap; }
.sl-summary__divider { border: 0; border-top: 1px solid var(--sl-border); margin: 16px 0; }

/* --- Checkout ------------------------------------------------------------
   The form is the page; the summary rides beside it so what is being bought
   stays on screen while the buyer types. */
.sl-checkout__panel {
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  background: var(--sl-bg);
  padding: 28px;
  text-align: start;
}
.sl-checkout__signin { margin: 0 0 20px; color: var(--sl-muted); }
/* NOT `.sl-step` -- `process-steps` already owns that name and centres its text, which silently
   centred every label on the checkout form the first time these shipped. The `.sl-cart` lesson,
   two hundred lines up, one week later. */
.sl-checkout__step { border: 0; padding: 0; margin: 0 0 26px; text-align: start; }
.sl-checkout__step:last-of-type { margin-bottom: 0; }
.sl-checkout__step-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sl-font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 14px;
  padding: 0;
}
.sl-checkout__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--sl-primary);
  color: var(--sl-primary-contrast);
  font-size: .85rem;
}
.sl-field { margin-bottom: 14px; }
.sl-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--sl-muted);
}
.sl-field__req { color: #dc2626; }
.sl-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--sl-border);
  border-radius: calc(var(--sl-radius) * .6);
  background: var(--sl-bg);
  color: var(--sl-text);
  font: inherit;
}
.sl-input:focus { outline: 2px solid var(--sl-primary); outline-offset: 1px; border-color: transparent; }
.sl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .sl-field-row { grid-template-columns: 1fr; } }
.sl-check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 0; font-size: .92rem; }
.sl-check input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }
.sl-alert {
  padding: 12px 16px;
  border-radius: calc(var(--sl-radius) * .6);
  background: color-mix(in srgb, var(--sl-accent, #f59e0b) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--sl-accent, #f59e0b) 35%, transparent);
  margin-bottom: 18px;
}
/* The recurring-charge disclosure, sitting on .sl-alert above the terms tick. */
.sl-checkout__recurring-what { margin: 0; line-height: 1.45; }
.sl-checkout__recurring-note { margin: 8px 0 0; font-size: .88rem; line-height: 1.5; }
.sl-checkout__pay { display: grid; gap: 10px; margin-top: 18px; }
.sl-checkout__pay .sl-btn { width: 100%; text-align: center; }
.sl-coupon { margin-top: 4px; }
.sl-coupon__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.sl-coupon__row .sl-btn { padding-inline: 18px; }
.sl-trust { display: grid; gap: 10px; margin-top: 20px; }
.sl-trust__item { display: flex; align-items: flex-start; gap: 10px; color: var(--sl-muted); font-size: .88rem; }
.sl-trust__item i { color: var(--sl-primary); }
.sl-backlink { display: inline-block; margin-top: 20px; text-decoration: none; font-weight: 600; }
.sl-backlink:hover { text-decoration: underline; }

/* The delivery picker rendered by the shared shared/delivery-options snippet. Class-styled here so a
   site with no CSS of its own still gets a readable list of methods; a theme rule of its own wins. */
.delivery-options { margin-bottom: 14px; }
.delivery-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--sl-border);
  border-radius: calc(var(--sl-radius) * .6);
  margin-bottom: 8px;
  cursor: pointer;
}
.delivery-option:hover { border-color: var(--sl-primary); }
.delivery-option-body { display: grid; }
.delivery-option-label { font-weight: 600; }
.delivery-option-desc { color: var(--sl-muted); font-size: .85rem; }
.delivery-option-price { font-weight: 600; white-space: nowrap; }

/* ── Heading (generic) ────────────────────────────────────────────────────── */
.sl-heading-block--sm .sl-heading { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.sl-heading-block--lg .sl-heading { font-size: clamp(2rem, 4.4vw, 3rem); }
.sl-heading-block .sl-subheading { margin-bottom: 0; }
.sl-align--center .sl-subheading, .sl-heading-block.sl-center .sl-subheading { margin-inline: auto; }

/* ── Custom HTML (generic) ────────────────────────────────────────────────── */
.sl-custom-html--narrow { max-width: 720px; margin-inline: auto; }
.sl-custom-html :first-child { margin-top: 0; }
.sl-custom-html :last-child { margin-bottom: 0; }

/* ── Button row (generic) ─────────────────────────────────────────────────── */
.sl-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.sl-btn-row--center { justify-content: center; }
.sl-btn-row--right { justify-content: flex-end; }
.sl-btn--size-sm { padding: 8px 18px; font-size: .9rem; }
.sl-btn--size-lg { padding: 15px 34px; font-size: 1.1rem; }

/* ── Image block (generic) ────────────────────────────────────────────────── */
.sl-image-block { margin: 0; }
.sl-image-block--narrow { max-width: 560px; margin-inline: auto; }
.sl-image-block--wide { max-width: 880px; margin-inline: auto; }
.sl-image-block img { width: 100%; height: auto; display: block; }
.sl-image-block.is-rounded img { border-radius: var(--sl-radius); }
.sl-image-block__caption { color: var(--sl-muted); font-size: .9rem; margin-top: 10px; text-align: center; }

/* ── Images + text (generic) ──────────────────────────────────────────────── */
.sl-imgduo { display: grid; gap: 20px; }
.sl-imgduo--2 { grid-template-columns: repeat(2, 1fr); }
.sl-imgduo--3 { grid-template-columns: repeat(3, 1fr); }
.sl-imgduo--4 { grid-template-columns: repeat(4, 1fr); }
.sl-imgduo__item { margin: 0; }
.sl-imgduo__item img { width: 100%; height: auto; display: block; border-radius: var(--sl-radius); object-fit: cover; }
.sl-imgduo__item figcaption { color: var(--sl-muted); font-size: .9rem; margin-top: 8px; text-align: center; }
.sl-imgduo__text { margin-block: 18px; }
.sl-imgduo__text :first-child { margin-top: 0; }
.sl-imgduo__text :last-child { margin-bottom: 0; }
@media (max-width: 720px) {
  .sl-imgduo--2, .sl-imgduo--3, .sl-imgduo--4 { grid-template-columns: 1fr 1fr; }
}

/* ── Universal section style controls ─────────────────────────────────────── */
/* Reserved _-prefixed per-instance settings, applied to EVERY section's wrapper by
   SectionPageRenderer (the panel "Style" group). Layout-safe: padding/background/align only. */
.sl-section.sl-pad--none { padding-block: 0; }
.sl-section.sl-pad--s { padding-block: clamp(16px, 2vw, 28px); }
.sl-section.sl-pad--m { padding-block: clamp(28px, 3.4vw, 48px); }
.sl-section.sl-pad--l { padding-block: clamp(48px, 6vw, 88px); }
.sl-section.sl-pad--xl { padding-block: clamp(72px, 9vw, 128px); }
.sl-section.sl-bg--surface { background: var(--sl-surface); }
.sl-section.sl-bg--muted { background: color-mix(in srgb, var(--sl-primary) 6%, var(--sl-surface)); }
.sl-section.sl-bg--primary { background: var(--sl-primary); color: var(--sl-primary-contrast); }
.sl-section.sl-bg--primary :where(h1, h2, h3, h4, .sl-heading, a) { color: var(--sl-primary-contrast); }
.sl-section.sl-bg--primary .sl-subheading { color: color-mix(in srgb, var(--sl-primary-contrast) 82%, transparent); }
.sl-section.sl-bg--dark { background: #0b1220; color: #e5e7eb; }
.sl-section.sl-bg--dark :where(h1, h2, h3, h4, .sl-heading) { color: #fff; }
.sl-section.sl-align--left { text-align: left; }
.sl-section.sl-align--center { text-align: center; }
.sl-section.sl-align--center .sl-subheading, .sl-section.sl-align--center .sl-btn-row { margin-inline: auto; justify-content: center; }
.sl-section.sl-align--right { text-align: right; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .sl-features--4 { grid-template-columns: repeat(2, 1fr); }
  .sl-quotes { grid-template-columns: 1fr; }
  .sl-collection { grid-template-columns: repeat(2, 1fr); }
  .sl-products--3, .sl-products--4 { grid-template-columns: repeat(2, 1fr); }
  .sl-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .sl-section { padding-block: calc(var(--sl-section-pad) * .72); }
  .sl-media-text { grid-template-columns: 1fr; gap: 28px; }
  .sl-media-text--media-right .sl-media-text__media { order: 0; }
  .sl-features--2, .sl-features--3, .sl-features--4 { grid-template-columns: 1fr; }
  .sl-gallery--3, .sl-gallery--4 { grid-template-columns: repeat(2, 1fr); }
  .sl-collection { grid-template-columns: 1fr; }
  .sl-contact { grid-template-columns: 1fr; }
  .sl-footer__inner { grid-template-columns: 1fr; gap: 28px; }

  /* Mobile nav: CSS-only via <details> */
  .sl-header__toggle {
    display: block;
    margin-left: auto;
  }
  /* With a split actions row the ☰ is no longer the only thing on the right: the cart and the language
     switcher sit beside it and must stay OUTSIDE the drawer. Ordered so the actions come first and the
     menu button stays hard right, which is where a thumb expects it. */
  .sl-header__actions { order: 2; margin-left: auto; }
  .sl-header__actions ~ .sl-header__toggle,
  .sl-header__toggle { order: 3; }
  .sl-header__inner:has(.sl-header__actions) .sl-header__toggle { margin-left: 4px; }
  .sl-header__toggle summary {
    list-style: none;
    cursor: pointer;
    padding: 10px;
    font-size: 1.4rem;
    line-height: 1;
  }
  .sl-header__toggle summary::-webkit-details-marker { display: none; }
  .sl-header__nav {
    display: none;
  }
  .sl-header__toggle[open] + .sl-header__nav,
  .sl-header--open .sl-header__nav {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    background: var(--sl-bg);
    border-bottom: 1px solid var(--sl-border);
    padding: 12px 24px 18px;
    gap: 2px;
  }
}

/* ── Page header / band header (page-header, process-steps, gallery-lightbox, review-form) ── */
.sl-section--page-header { background: var(--sl-surface); text-align: center; padding: 72px 0 40px; }
.sl-section--page-header h1 { margin: 0 0 .35em; }
.sl-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: var(--sl-primary); margin: 0 0 .5rem; }
.sl-band-header { text-align: center; margin-bottom: 2rem; }

/* ── Process steps ── */
.sl-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.sl-step { text-align: center; padding: 1rem; }
.sl-step__number { font-size: 1.6rem; font-weight: 700; color: var(--sl-primary); margin-bottom: .5rem; }

/* ── Services grid ── */
.sl-service-card { display: block; text-decoration: none; color: inherit; }
.sl-service-card__icon { font-size: 1.6rem; color: var(--sl-primary); margin-bottom: .5rem; }
.sl-service-card__link { color: var(--sl-primary); font-weight: 600; }

/* ── Reviews wall + review form ──────────────────────────────────────────────
   `reviews-wall` builds every class from its `card_prefix` setting with SINGLE
   dashes -- {p}-card, {p}-stars, {p}-quote, {p}-author, {p}-avatar, {p}-name,
   {p}-context -- which is the contract its own schema documents. The stylesheet
   only ever defined the DOUBLE-UNDERSCORE forms that `testimonials` emits, so of
   the eight classes this section renders exactly one was styled: every managed
   site's review wall drew BLACK stars, bare initials as loose text, and a name
   fused to its date with no card around either. Nothing failed; it just looked
   like a broken page. Written at the default prefix, so a site that set its own
   brings its own CSS and is untouched. */
.sl-reviews-avg { text-align: center; margin-bottom: 1.5rem; }
.sl-reviews-avg .stars { color: #f59e0b; font-size: 1.2rem; }
/* Was a bare `class="count"` -- an unnamespaced global inside a platform section, which any theme
   with a rule of that name would have restyled without either side knowing. */
.sl-reviews-avg__count { color: var(--sl-muted); font-size: .9rem; margin-top: 4px; }

.sl-quote-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  background: #fff;
}
.sl-quote-stars { color: #f59e0b; letter-spacing: 2px; line-height: 1; }
.sl-quote-quote { margin: 0; font-style: italic; }
/* The author row is the one that read as broken copy: the initials sat above the
   name and the name ran straight into the date. */
.sl-quote-author { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.sl-quote-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .5px;
  color: var(--sl-primary, #0a7d37);
  background: rgba(0, 0, 0, .06);
  overflow: hidden;
}
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .sl-quote-avatar { background: color-mix(in srgb, var(--sl-primary, #0a7d37) 12%, transparent); }
}
.sl-quote-avatar--photo { padding: 0; background: none; }
.sl-quote-avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The photo at a size someone can look at. Height-capped rather than width-driven so a portrait and a
   landscape shot sit on the same row without one of them dominating the card. */
.sl-quote-photo { margin: 0; }
.sl-quote-photo img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: var(--sl-radius);
}
.sl-quote-author-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-quote-name { font-weight: 600; }
.sl-quote-context { color: var(--sl-muted); font-size: .85rem; }
@media (max-width: 720px) { .sl-quotes { grid-template-columns: 1fr; } }

/* The review FORM is the only shipped section written in Bootstrap's vocabulary,
   and this stylesheet defines none of it -- so the rating rendered as five raw
   radio buttons interleaved with black stars, the inputs at their browser default
   size, and the textarea floating away from its label. Scoped to the form rather
   than renamed, so a theme that already targets these names keeps working. */
.sl-review-form { max-width: 640px; margin: 0 auto; }
.sl-review-form .form-label { display: block; font-weight: 600; margin-bottom: 6px; }
.sl-review-form .form-control {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
}
.sl-review-form .form-control:focus {
  outline: none;
  border-color: var(--sl-primary, #0a7d37);
  box-shadow: 0 0 0 3px rgba(10, 125, 55, .15);
}
.sl-review-form textarea.form-control { min-height: 150px; resize: vertical; }
.sl-review-form input[type="file"].form-control { padding: 10px 12px; }

/* The radios are rendered 5..1 so a checked one can reach every LOWER star as a
   later sibling; row-reverse puts them back in reading order on screen. The input
   is hidden without `display:none`, which would take it out of the tab order. */
.sl-review-form .star-rating { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.sl-review-form .star-rating input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.sl-review-form .star-rating label { cursor: pointer; font-size: 1.5rem; line-height: 1; color: #d9d9d9; }
.sl-review-form .star-rating input:checked ~ label { color: #f59e0b; }
.sl-review-form .star-rating:hover input ~ label { color: #d9d9d9; }
.sl-review-form .star-rating label:hover,
.sl-review-form .star-rating label:hover ~ label { color: #f59e0b; }
.sl-review-form .star-rating input:focus-visible + label { outline: 2px solid var(--sl-primary, #0a7d37); outline-offset: 2px; }

/* ── Portfolio gallery (filterable lightbox) ── */
.sl-portfolio-filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1.5rem; }
.sl-filter-pill { border: 1px solid var(--sl-border); background: transparent; border-radius: 999px; padding: .35rem 1rem; cursor: pointer; }
.sl-filter-pill.active { background: var(--sl-primary); color: #fff; border-color: var(--sl-primary); }
.sl-portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.sl-portfolio-item img, .sl-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A gallery clip sits in the same tile geometry as a picture — same aspect, same corner, same crop —
   so a mixed band reads as one grid rather than as photos with a video wedged between them. It keeps
   its own controls, which is the whole point of it not being an <img>. */
.sl-gallery__video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--sl-radius);
  display: block;
  background: #000;
}

/* ── Site data: listing grid, filters, category tiles, item detail ─────────── */
/* A filtered-out card must actually disappear even though .sl-card sets display. */
.sl-lgrid [hidden], .sl-empty[hidden] { display: none !important; }

.sl-lgrid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.sl-lgrid--2 { grid-template-columns: repeat(2, 1fr); }
.sl-lgrid--4 { grid-template-columns: repeat(4, 1fr); }
.sl-lcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  padding: 0;
  transition: box-shadow .18s ease, transform .18s ease;
}
a.sl-lcard:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .10); }
.sl-lcard__media { aspect-ratio: 4 / 3; background: var(--sl-surface); }
.sl-lcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-lcard__body { display: flex; flex-direction: column; gap: .5rem; padding: 16px 18px 18px; }
.sl-lcard--no-media .sl-lcard__body { border-top: 3px solid var(--sl-primary); }
.sl-lcard__badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.sl-lcard__title { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.sl-lcard__sub { margin: 0; color: var(--sl-muted); font-size: .92rem; }
.sl-lcard__meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: auto; }
.sl-lcard__chip { font-size: .85rem; color: var(--sl-text); white-space: nowrap; }
.sl-lcard__chip-label { color: var(--sl-muted); }
.sl-lcard__price { font-weight: 700; font-size: 1.15rem; color: var(--sl-primary); }
.sl-lcard__price--note { font-size: 1rem; font-weight: 600; }

.sl-chip {
  display: inline-block;
  border-radius: 999px;
  padding: .15rem .7rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .02em;
  background: color-mix(in srgb, var(--sl-primary) 12%, transparent);
  color: var(--sl-primary);
}
.sl-chip--v-rezervets { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #92400e; }
.sl-chip--v-pardots { background: var(--sl-surface); color: var(--sl-muted); }

.sl-empty { color: var(--sl-muted); text-align: center; padding: 2.5rem 0; margin: 0; }

.sl-filters {
  background: var(--sl-surface);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  padding: 16px 18px;
  margin-bottom: 1.75rem;
}
.sl-filters__tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.sl-filters__tabs a.sl-filter-pill { text-decoration: none; display: inline-block; }
.sl-filters__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.sl-filters__field { display: flex; flex-direction: column; gap: .25rem; min-width: 150px; }
.sl-filters__field--search { flex: 1 1 240px; }
.sl-filters__field--actions { justify-content: flex-end; }
.sl-filters__label { font-size: .78rem; font-weight: 600; color: var(--sl-muted); }
.sl-filters__range { display: flex; gap: 6px; }
.sl-filters__range input { width: 100%; min-width: 0; }
.sl-filters input, .sl-filters select {
  font: inherit;
  padding: .5rem .7rem;
  border: 1px solid var(--sl-border);
  border-radius: calc(var(--sl-radius) / 2);
  background: var(--sl-bg);
  color: var(--sl-text);
  width: 100%;
}
.sl-filters__count { margin: .9rem 0 0; font-size: .88rem; color: var(--sl-muted); }

.sl-cattiles { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); }
.sl-cattiles--2 { grid-template-columns: repeat(2, 1fr); }
.sl-cattiles--3 { grid-template-columns: repeat(3, 1fr); }
.sl-cattile {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  overflow: hidden;
  background: var(--sl-bg);
  transition: box-shadow .18s ease, transform .18s ease;
}
.sl-cattile:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .10); }
.sl-cattile__media { display: block; aspect-ratio: 3 / 2; background: var(--sl-surface); }
.sl-cattile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-cattile__media--icon { display: grid; place-items: center; font-size: 2rem; color: var(--sl-primary); }
.sl-cattile__name { font-weight: 700; padding: 0 16px; }
.sl-cattile__count { color: var(--sl-muted); font-size: .85rem; padding: 0 16px; }
.sl-cattile__intro { color: var(--sl-muted); font-size: .9rem; padding: 0 16px 14px; }
.sl-cattile__name:last-child { padding-bottom: 16px; }

.sl-crumbs { font-size: .88rem; color: var(--sl-muted); margin-bottom: 1rem; }
.sl-crumbs a { color: var(--sl-muted); text-decoration: none; }
.sl-crumbs a:hover { color: var(--sl-primary); }
.sl-crumbs__sep { margin: 0 .4rem; }
.sl-itemhead { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: start; }
.sl-itemhead--no-media { grid-template-columns: 1fr; max-width: 780px; }
.sl-itemhead__badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.sl-itemhead__title { margin: 0 0 .4rem; }
.sl-itemhead__where { color: var(--sl-muted); margin: 0 0 .9rem; }
.sl-itemhead__price { font-size: 1.6rem; font-weight: 700; color: var(--sl-primary); margin: 0 0 .9rem; }
.sl-itemhead__price--note { font-size: 1.15rem; }
.sl-itemhead__intro { margin: 0; }
.sl-itemhead__media img { width: 100%; border-radius: var(--sl-radius); display: block; }

.sl-specs { display: grid; gap: 0 32px; grid-template-columns: repeat(2, 1fr); margin: 0; }
.sl-specs--1 { grid-template-columns: 1fr; }
.sl-specs--3 { grid-template-columns: repeat(3, 1fr); }
.sl-specs__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: .6rem 0;
  border-bottom: 1px solid var(--sl-border);
}
.sl-specs__row dt { color: var(--sl-muted); margin: 0; }
.sl-specs__row dd { margin: 0; font-weight: 600; text-align: right; }
.sl-itembody { margin-top: 2rem; }
.sl-contact__subject { background: var(--sl-surface); border-radius: calc(var(--sl-radius) / 2); padding: .7rem 1rem; margin: 0 0 1rem; }
.sl-contact__subject-label { color: var(--sl-muted); }

@media (max-width: 960px) {
  .sl-lgrid, .sl-lgrid--4 { grid-template-columns: repeat(2, 1fr); }
  .sl-cattiles, .sl-cattiles--3 { grid-template-columns: repeat(2, 1fr); }
  .sl-itemhead { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .sl-lgrid, .sl-lgrid--2, .sl-lgrid--4 { grid-template-columns: 1fr; }
  .sl-cattiles, .sl-cattiles--2, .sl-cattiles--3 { grid-template-columns: repeat(2, 1fr); }
  .sl-specs, .sl-specs--3 { grid-template-columns: 1fr; }
  .sl-filters__field { min-width: 0; flex: 1 1 100%; }
}

/* ── Chrome: current-page nav link + the footer's settings-driven social row ───────────────── */
.sl-header__nav a.is-active { color: var(--sl-primary); font-weight: 700; }
.sl-footer__social { display: flex; gap: 12px; margin-top: 14px; font-size: 1.25rem; }
.sl-footer__social a { color: var(--sl-muted); text-decoration: none; line-height: 1; }
.sl-footer__social a:hover { color: var(--sl-primary); }
.sl-section.sl-bg--dark .sl-footer__social a { color: rgba(255, 255, 255, .75); }
.sl-section.sl-bg--dark .sl-footer__social a:hover { color: #fff; }

/* ── Team ──────────────────────────────────────────────────────────────────────────────────────
   The people band. Added 2026-07-29 after /sl-site-ux-loop round 2 found that no site in the fleet
   had a growable list of any kind, and a persona abandoned "add a third colleague" because the only
   route left was hand-editing Liquid on a live site. */
.sl-team { display: grid; gap: 20px; }
.sl-team--2 { grid-template-columns: repeat(2, 1fr); }
.sl-team--3 { grid-template-columns: repeat(3, 1fr); }
.sl-team--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .sl-team--3, .sl-team--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sl-team { grid-template-columns: 1fr; } }
.sl-person { text-align: center; }
.sl-person__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; display: block; }
.sl-person__initials {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: var(--sl-accent-soft, rgba(0,0,0,.06)); color: var(--sl-accent, inherit);
}
.sl-person__name { margin: 0 0 4px; font-size: 1.05rem; }
.sl-person__role { margin: 0 0 8px; opacity: .75; font-size: .92rem; }
.sl-person__link { font-size: .88rem; }
/* ── post-grid + content-list ──────────────────────────────────────────────────────────────────────
   Promoted from yerbamate 2026-08-05. A blog index and an article body were the two shapes the library
   had nothing for, so every site that wanted one grew its own section — which the owner then could not
   reuse anywhere else. Every class here is also a SETTING on the section, so a theme with its own
   stylesheet points them at its own names and never loads this. */
.sl-post-grid { display: grid; gap: 24px; }
.sl-cols-2 { grid-template-columns: repeat(2, 1fr); }
.sl-cols-3 { grid-template-columns: repeat(3, 1fr); }
.sl-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .sl-cols-3, .sl-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sl-post-grid { grid-template-columns: 1fr; } }

.sl-post-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--sl-border, rgba(0,0,0,.1)); border-radius: 12px;
  color: inherit; text-decoration: none; background: var(--sl-surface, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}
a.sl-post-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.sl-post-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.sl-post-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-post-body { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.sl-post-title { font-weight: 600; font-size: 1.05rem; line-height: 1.35; }
.sl-post-excerpt { opacity: .78; font-size: .92rem; line-height: 1.5; }
.sl-post-more { margin-top: auto; font-size: .88rem; font-weight: 600; color: var(--sl-accent, inherit); }

.sl-text-list > h2 { margin: 32px 0 12px; }
.sl-text-list > h2:first-child { margin-top: 0; }
.sl-text-body { line-height: 1.65; }
.sl-text-body > :first-child { margin-top: 0; }
.sl-text-img { max-width: 100%; height: auto; border-radius: 10px; margin: 16px 0; display: block; }
.sl-text-list details { border-bottom: 1px solid var(--sl-border, rgba(0,0,0,.1)); padding: 14px 0; }
.sl-text-list details > summary { cursor: pointer; font-weight: 600; list-style: revert; }
.sl-text-list details[open] > summary { margin-bottom: 10px; }

/* Page-header extras (breadcrumb + hero image), likewise opt-in and likewise overridable. */
.sl-crumbs { font-size: .85rem; opacity: .7; margin-bottom: 12px; }
.sl-hero-img { max-width: 100%; height: auto; border-radius: 12px; margin-top: 20px; display: block; }

/* ── Tabbed panels + label/value rows + split rich text ────────────────────────────────────────────
   Promoted from adpromo 2026-08-06. "Pick one of N and read about it" and "a price/spec list" were the
   two shapes a brochure site could not express without custom Liquid. Every class here is also a SETTING
   on the section/block, so a theme with its own stylesheet points them at its own names. Token-driven —
   no brand values. */
.sl-tabs {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 28px;
}
.sl-tab {
  flex: none;
  min-height: 48px; padding: 0 24px;
  border: 1px solid var(--sl-border); border-radius: 999px;
  background: var(--sl-bg); color: var(--sl-text);
  font: inherit; font-size: .95rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.sl-tab:hover { border-color: var(--sl-primary); color: var(--sl-primary); }
.sl-tab.is-active {
  background: var(--sl-primary); border-color: var(--sl-primary); color: var(--sl-primary-contrast);
}
.sl-tab.is-active:hover { color: var(--sl-primary-contrast); }
.sl-tab:focus-visible { outline: 2px solid var(--sl-primary); outline-offset: 2px; }
.sl-tabpanel { display: grid; gap: 24px; }
.sl-tabpanel[hidden] { display: none; }
.sl-tabpanel__title { margin: 0; }
.sl-tabpanel__body { line-height: 1.65; max-width: 76ch; }
.sl-tabpanel__body > :first-child { margin-top: 0; }
.sl-tabpanel__body > :last-child { margin-bottom: 0; }
.sl-facts { display: grid; gap: 20px; align-items: start; }
.sl-facts--2 { grid-template-columns: repeat(2, 1fr); }
.sl-facts--3 { grid-template-columns: repeat(3, 1fr); }
.sl-facts--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .sl-facts--3, .sl-facts--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sl-facts { grid-template-columns: 1fr; } }
.sl-fact__body > :first-child { margin-top: 0; }
.sl-fact__body > :last-child { margin-bottom: 0; }

.sl-rows {
  margin: 0;
  border: 1px solid var(--sl-border); border-radius: var(--sl-radius);
  overflow: hidden;
}
.sl-rows__row {
  display: flex; gap: 16px; align-items: baseline;
  padding: 14px 22px;
  border-top: 1px solid var(--sl-border);
}
.sl-rows__row:first-child { border-top: 0; }
.sl-rows__head {
  background: var(--sl-surface);
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sl-muted);
  padding: 10px 22px;
}
.sl-rows__label { flex: 1; margin: 0; font-weight: inherit; }
.sl-rows__value { flex: none; margin: 0; text-align: right; }
.sl-rows__value > :first-child { margin-top: 0; }
.sl-rows__value > :last-child { margin-bottom: 0; }

.sl-rich-text--split { display: grid; gap: 32px 64px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; max-width: none; }
.sl-rich-text--split .sl-rich-text__head > :first-child { margin-top: 0; }
.sl-rich-text--split .sl-rich-text__heading { margin-bottom: 0; }
.sl-feature__body > :first-child { margin-top: 0; }
.sl-feature__body > :last-child { margin-bottom: 0; }
.sl-feature--link { color: inherit; text-decoration: none; display: block; }
.sl-feature__link { color: var(--sl-primary); font-weight: 600; }

/* ── Hero slideshow, hero fact strip (hero `slide` / `fact` blocks) ───────────────────────────── */
.sl-hero__slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sl-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.sl-hero__slide.is-active { opacity: 1; }
.sl-hero__panel { position: absolute; inset: 0; overflow: hidden; }
.sl-hero__fig {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* The diagonal variant: each slide is two 45°-skewed panels of the same picture that slide in from
   opposite edges. The panels are over-wide because a skewed rectangle leaves bare corners otherwise. */
.sl-hero--slides-diagonal .sl-hero__slides::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: rgba(255, 255, 255, .2); z-index: 3; transform: skew(-45deg);
}
.sl-hero--slides-diagonal .sl-hero__slide { opacity: 1; visibility: hidden; transition: visibility 0s .85s; }
.sl-hero--slides-diagonal .sl-hero__slide.is-active { visibility: visible; transition-delay: 0s; }
.sl-hero--slides-diagonal .sl-hero__panel {
  inset: auto; top: 0; bottom: 0; width: 130%; opacity: 0;
  transition: transform .45s ease-in-out, opacity .45s ease-in-out;
}
.sl-hero--slides-diagonal .sl-hero__panel--1 { left: calc(-80% - 15px); transform: skew(-45deg) translate(0, -100%); }
.sl-hero--slides-diagonal .sl-hero__panel--2 { left: calc(50% + 15px); transform: skew(-45deg) translate(0, 100%); transition-delay: .3s; }
.sl-hero--slides-diagonal .sl-hero__slide.is-active .sl-hero__panel { transform: skew(-45deg) translate(0, 0); }
.sl-hero--slides-diagonal .sl-hero__slide.is-active .sl-hero__panel--1 { opacity: .5; }
.sl-hero--slides-diagonal .sl-hero__slide.is-active .sl-hero__panel--2 { opacity: .9; }
.sl-hero--slides-diagonal .sl-hero__fig { left: 0; width: 100%; transform: skew(45deg); }
.sl-hero--slides-diagonal .sl-hero__panel--1 .sl-hero__fig { left: calc(50% + 15px); }
.sl-hero--slides-diagonal .sl-hero__panel--2 .sl-hero__fig { left: calc(-50% - 15px); }
.sl-hero--slides-none .sl-hero__slide { transition: none; }
.sl-hero--slides .sl-hero__overlay, .sl-hero--slides .sl-hero__inner { z-index: 2; }
.sl-hero__strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 40px;
  padding: 14px 16px; border-top: 1px solid var(--sl-border);
  background: rgba(0, 0, 0, .45); color: #fff; font-size: .85rem;
}
.sl-hero--on-image .sl-hero__strip { border-top-color: rgba(255, 255, 255, .16); }
/* A fact that carries a FIGURE is two lines in two type scales — "10+" over "years of experience" —
   because folded into one string it can only render at one size, which is what kept sending a stats
   strip on a hero into site-custom markup. A fact with no figure is unchanged. */
.sl-hero__fact--figure { display: flex; flex-direction: column; gap: 2px; align-items: inherit; }
.sl-hero__fact-value { font-family: var(--sl-font-heading); font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.sl-hero__fact-label { font-size: .82rem; opacity: .7; font-weight: 400; }
/* The overline above the H1 and the lead under the subheading. */
.sl-hero__overline { display: block; font-family: var(--sl-font-heading); font-size: .8rem; text-transform: uppercase; letter-spacing: .18em; margin: 0 0 1rem; opacity: .85; }
.sl-hero__lead { font-size: 1.02rem; margin: 0 0 1.6rem; color: var(--sl-muted); }
.sl-hero--on-image .sl-hero__lead { color: rgba(255, 255, 255, .78); }
/* A rich-text lead or subheading arrives as a DIV of paragraphs, so the band's own vertical rhythm
   has to come from the wrapper rather than from each <p> inside it. */
div.sl-hero__lead > :first-child,
div.sl-hero__subheading > :first-child { margin-top: 0; }
div.sl-hero__lead > :last-child,
div.sl-hero__subheading > :last-child { margin-bottom: 0; }
div.sl-footer__about > :first-child { margin-top: 0; }
div.sl-footer__about > :last-child { margin-bottom: 0; }
/* Slide dots: a rotation with no control reads as the page redrawing itself. */
.sl-hero__dots { display: flex; gap: 4px; margin-top: 1.4rem; }
.sl-hero--center .sl-hero__dots { justify-content: center; }
.sl-hero__dot { width: 26px; height: 26px; padding: 8px; border: 0; background: none; cursor: pointer; box-sizing: content-box; }
.sl-hero__dot::before { content: ""; display: block; width: 10px; height: 10px; border: 1px solid currentColor; opacity: .7; }
.sl-hero__dot.is-active::before { background: var(--sl-primary); border-color: var(--sl-primary); opacity: 1; }
.sl-hero--on-image .sl-hero__dot { color: #fff; }
@media (max-width: 700px) {
  .sl-hero--slides-diagonal .sl-hero__panel { width: 200%; }
  .sl-hero--slides-diagonal .sl-hero__panel--1 { left: calc(-150% - 15px); }
  .sl-hero--slides-diagonal .sl-hero__panel--1 .sl-hero__fig { left: 77%; }
  .sl-hero--slides-diagonal .sl-hero__panel--2 .sl-hero__fig { left: -27%; }
  .sl-hero__strip { gap: 6px 18px; font-size: .74rem; }
}

/* ── Divider shapes (divider `shape: wave`) ───────────────────────────────────────────────────── */
.sl-divider__wave { display: block; width: 100%; height: 72px; opacity: .55; }
.sl-divider__wave path { fill: none; stroke: var(--sl-primary); stroke-width: 3px; stroke-miterlimit: 10; }

/* ── Card overline (feature-grid `eyebrow_field`) ─────────────────────────────────────────────── */
.sl-feature__overline {
  display: block; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--sl-primary); margin-bottom: .4rem;
}

/* ── Tabbed price list (tab-panels `facts_style: rows`, `media_block`) ────────────────────────── */
.sl-tabgroup-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
.sl-tabgroup__media { position: sticky; top: 96px; }
.sl-tabgroup__media img { width: 100%; height: auto; display: block; border-radius: var(--sl-radius); }
.sl-pricelist { display: block; }
.sl-pricelist__group { font-weight: 700; color: var(--sl-primary); margin: 1.6rem 0 .8rem; }
.sl-pricelist__group:first-child { margin-top: 0; }
.sl-pricelist__group small { font-weight: 400; color: var(--sl-muted); }
.sl-pricelist__row { display: flex; align-items: baseline; gap: .7rem; padding: .45rem 0; }
.sl-pricelist__name { font-weight: 600; }
.sl-pricelist__desc { color: var(--sl-muted); font-size: .88rem; }
/* The leader is what makes a price list readable across a wide column — it takes all the slack so the
   value always lands flush right, whatever the name's length. */
.sl-pricelist__leader { flex: 1 1 auto; border-bottom: 1px dotted var(--sl-border); transform: translateY(-4px); }
.sl-pricelist__value { font-weight: 700; white-space: nowrap; }
.sl-tabpanel__body--foot { font-size: .85rem; color: var(--sl-muted); }
@media (max-width: 900px) {
  .sl-tabgroup-split { grid-template-columns: 1fr; }
  .sl-tabgroup__media { position: static; }
}

/* ── Contact form: extra questions, detail rows, hours table, map (contact-form blocks) ───────── */
.sl-contact__field--full { grid-column: 1 / -1; }
.sl-contact__form select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--sl-border);
  border-radius: calc(var(--sl-radius) / 1.6); font: inherit; color: inherit; background: transparent;
}
.sl-contact__form select:focus { outline: none; border-color: var(--sl-primary); }
.sl-contact--info-first > div:first-child { order: 2; }
.sl-contact--info-first .sl-contact__info { order: 1; }
.sl-contact__hours { width: 100%; border-collapse: collapse; }
.sl-contact__hours td { padding: .5rem 0; border-bottom: 1px solid var(--sl-border); font-size: .95rem; }
.sl-contact__hours td:last-child { text-align: right; font-weight: 700; }
.sl-contact__hours-note { font-size: .78rem; color: var(--sl-muted); margin: 0; }
.sl-contact__map { margin: 0; }
.sl-contact__map img { width: 100%; height: auto; display: block; border-radius: var(--sl-radius); }
.sl-contact__map figcaption { margin-top: .7rem; font-size: .85rem; }

/* ── Header phone + flag language switcher, centred footer (site-header / site-footer) ─────────── */
.sl-header__tel { font-weight: 700; white-space: nowrap; text-decoration: none; }
.sl-lang--flags summary,
.sl-lang--flags .sl-lang__menu a { display: inline-flex; align-items: center; gap: 8px; }
.sl-lang--flags .sl-lang__menu a { display: flex; }
.sl-lang--flags img { border-radius: 2px; display: block; }
.sl-footer--centered { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
/* flex-direction is explicit: the base .sl-footer__links stacks in a column for the three-column
   layout, and a centred footer that inherits it renders its nav as a vertical list. */
.sl-footer--centered .sl-footer__links { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }
.sl-footer--centered .sl-footer__social { display: flex; justify-content: center; gap: 16px; }
.sl-footer--centered .sl-footer__bottom { border: 0; display: flex; flex-direction: column; gap: 4px; }
.sl-footer__mark img, .sl-footer__mark svg { display: block; margin: 0 auto; max-width: 100%; }
.sl-footer__note { font-size: .74rem; opacity: .55; margin: 0; }
/* The split actions row (site-header `split_actions`): the language switcher, phone and button live
   beside the ☰ button instead of inside the drawer it opens. */
.sl-header__actions { display: flex; align-items: center; gap: 14px; }

/* ── card grid + band link ────────────────────────────────────────────────────────────────────
   `.sl-card` was styled and `.sl-cards`, the GRID it sits in, was not — so `services-grid` on its
   defaults laid its cards out in a single stacked column on every site that used it. Found by
   SectionClassDefaultsAreStyledTests, which is the point of that guard: nothing renders wrong enough
   to look broken, it just quietly is not a grid. `.sl-stat` and `.sl-fact` are the item wrappers
   whose CHILDREN were already styled; declared here so they are deliberate rather than accidental. */
.sl-cards { display: grid; gap: 24px; }
.sl-cards--2 { grid-template-columns: repeat(2, 1fr); }
.sl-cards--3 { grid-template-columns: repeat(3, 1fr); }
.sl-cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .sl-cards--3, .sl-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sl-cards { grid-template-columns: 1fr; } }
.sl-band-link { font-size: .9rem; font-weight: 600; color: var(--sl-primary, inherit); white-space: nowrap; }
.sl-stat { min-width: 0; }
.sl-fact { min-width: 0; }

/* ── courses ─────────────────────────────────────────────────────────────────────────────────
   `course-grid` and `course-lessons` ship with these as their class DEFAULTS, so a site that adds
   either from the library alone has to land looking like a course list — without this the sections
   render as unstyled stacked text, which is the "present but does nothing" shape, one layer out.
   Every one of them is also a setting, so a theme with its own stylesheet points them elsewhere. */
.sl-course-grid { display: grid; gap: 24px; }
@media (max-width: 600px) { .sl-course-grid { grid-template-columns: 1fr; } }

.sl-course-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--sl-border, rgba(0,0,0,.1)); border-radius: 12px;
  background: var(--sl-surface, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sl-course-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.sl-course-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.sl-course-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-course-body { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.sl-course-title { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.sl-course-title a { color: inherit; text-decoration: none; }
.sl-course-title a:hover { color: var(--sl-primary); }
.sl-course-meta { margin: 0; opacity: .7; font-size: .88rem; }
.sl-course-badge,
.sl-lesson-badge {
  align-self: flex-start; font-size: .74rem; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: var(--sl-accent-soft, rgba(0,0,0,.06)); color: var(--sl-accent, inherit);
}
.sl-course-more { margin-top: auto; font-size: .88rem; font-weight: 600; color: var(--sl-primary, inherit); }

/* The running order. Numbered by CSS rather than by the markup, so a locked lesson still shows its
   position — a list whose numbers skip the lessons you cannot open yet reads as missing content. */
.sl-lesson-list { list-style: none; counter-reset: sl-lesson; margin: 0; padding: 0; }
.sl-lesson {
  counter-increment: sl-lesson;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--sl-border, rgba(0,0,0,.1));
}
.sl-lesson::before {
  content: counter(sl-lesson) ".";
  min-width: 2.1em; font-variant-numeric: tabular-nums; opacity: .55; font-size: .92rem;
}
.sl-lesson a { color: inherit; font-weight: 600; text-decoration: none; }
.sl-lesson a:hover { color: var(--sl-primary); text-decoration: underline; }
/* Muted, never hidden: what the course still holds is the reason to buy it. */
.sl-lesson--locked > span:first-of-type { opacity: .55; }
.sl-lesson-meta { margin-left: auto; opacity: .65; font-size: .85rem; text-align: right; }
/* A REAL number instead of the counter above. The counter cannot be sized, coloured or given a shape
   of its own, and it is not text -- so a list that wants its numbers to look like anything, or wants
   them readable as content, opts into these and the marker steps aside. Exactly one of the two ever
   draws: the modifier is only on the list when the section is emitting spans. */
.sl-lesson-list--numbered .sl-lesson::before { content: none; }
.sl-lesson-num {
  flex: 0 0 auto; min-width: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--sl-primary); opacity: .75;
}

/* The course page's own top band. Two columns where there is room, one where there is not. */
.sl-course-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: start; }
@media (max-width: 800px) { .sl-course-head { grid-template-columns: 1fr; } }
.sl-course-head__media img { width: 100%; border-radius: 12px; display: block; }
.sl-course-head__body { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sl-course-head__body h1 { margin: 0; }
.sl-course-head__meta { margin: 0; opacity: .7; font-size: .92rem; }
.sl-course-head__price { margin: 0; font-size: 1.3rem; font-weight: 700; }
.sl-course-head__price s { font-size: .8em; font-weight: 400; opacity: .55; margin-left: 6px; }
.sl-course-head__back { display: inline-block; margin-bottom: 16px; font-size: .9rem; opacity: .75; }

/* >>> quill-content:start
   HOW QUILL'S OUTPUT RENDERS ONCE IT LEAVES THE EDITOR.

   Everything Quill's own stylesheet does is scoped to .ql-editor, so a block that looks correct in
   the admin has NO rules at all on the published page. This region is that missing half, and it is
   duplicated on purpose: core.css serves the per-app storefronts (memorial, kidoo, rtriga, burtini)
   and sections.css serves managed sites, which never load core.css. QuillContentCssContractTests
   fails the build when the two drift.

   Every selector is qualified by a class Quill or quill-table-up emits — .ql-align-*, li[data-list],
   .ql-table — so a theme's own tables, cart tables and account tables are untouched by construction. */

/* Alignment. */
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }

/* Quill v2 lists. The marker is a real element (li[data-list] > .ql-ui), not a list-style, so
   without these rules a published bullet list renders with no bullets and a numbered list with no
   numbers. Scoped to li[data-list] so ordinary <ol>/<ul> are untouched. */
ol:has(> li[data-list]) { list-style: none; padding-left: 1.5em; counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; }
li[data-list] { list-style: none; }
li[data-list] > .ql-ui { display: inline-block; min-width: 1.2em; margin-left: -1.5em; padding-right: .3em; text-align: right; }
li[data-list=bullet]  > .ql-ui::before { content: '\2022'; }
li[data-list=checked] > .ql-ui::before { content: '\2611'; }
li[data-list=unchecked] > .ql-ui::before { content: '\2610'; }
li[data-list=ordered] { counter-increment: list-0; }
li[data-list=ordered] > .ql-ui::before { content: counter(list-0, decimal) '. '; }

/* Quill indents — public render only goes one or two levels deep in practice. */
.ql-indent-1:not(.ql-direction-rtl) { padding-left: 3em; }
.ql-indent-2:not(.ql-direction-rtl) { padding-left: 6em; }
.ql-indent-3:not(.ql-direction-rtl) { padding-left: 9em; }
li.ql-indent-1[data-list=ordered] { counter-increment: list-1; }
li.ql-indent-1[data-list=ordered] > .ql-ui::before { content: counter(list-1, lower-alpha) '. '; }
li.ql-indent-2[data-list=ordered] { counter-increment: list-2; }
li.ql-indent-2[data-list=ordered] > .ql-ui::before { content: counter(list-2, lower-roman) '. '; }

/* Tables (quill-table-up). Borders and padding come from CLASSES, not inline styles, so a table
   published without this region is a grid of unruled, unpadded text — which is what a comparison
   table looked like on every storefront before this existed. */
.ql-table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.ql-table { border-collapse: collapse; table-layout: fixed; width: auto; margin: 1em 0; }
table.ql-table[data-full] { width: 100%; }
table.ql-table td,
table.ql-table th { border: 1px solid #d4d4d8; padding: 8px 12px; vertical-align: top; text-align: left; }
table.ql-table th { background: #f4f4f5; font-weight: 600; }
table.ql-table caption { caption-side: top; text-align: left; padding-bottom: .5em; font-size: .9em; opacity: .75; }
/* The cell's content lives one level down; it must not become an inline island. */
.ql-table-cell-inner { display: block; }
.ql-table-cell-inner > :first-child { margin-top: 0; }
.ql-table-cell-inner > :last-child { margin-bottom: 0; }

@media (max-width: 640px) {
    /* A min-width is what makes the wrapper's scroll DO anything. Without it a full-width
       fixed-layout table simply squashes its columns to unreadable slivers and never overflows,
       so the overflow-x above never engages. */
    table.ql-table { min-width: 480px; }
}
/* <<< quill-content:end */

/* What a course COSTS. Every figure is formatted server-side; these only lay it out.
   A course is commonly sold per lesson and priced per course, so the per-lesson figure
   leads and the total sits beside it, with the previous price struck through. */
.sl-course-price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin: 12px 0 0;
}
.sl-course-per-lesson { font-size: .9rem; opacity: .75; }
.sl-course-amount { font-size: 1.35rem; font-weight: 700; }
.sl-course-was { opacity: .55; font-size: 1rem; }
.sl-course-vat { font-size: .8rem; opacity: .65; width: 100%; }
.sl-course-saving {
  display: inline-block; margin-top: 6px; padding: 2px 10px;
  border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: var(--sl-accent, #16a34a); color: #fff;
}

/* A reviewer's own photo, where the card would otherwise show their initials. */
.sl-quote-avatar--photo { padding: 0; overflow: hidden; }
.sl-quote-avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A course list as WIDE ROWS: picture | words | price column. The shape a school with four
   richly-priced courses needs, where a catalogue of twenty wants the card grid above. */
.sl-course-row { margin-bottom: 24px; }
.sl-course-row__link {
  display: block; text-decoration: none; color: inherit; overflow: hidden;
  background: var(--sl-surface, #fff);
  border: 1px solid var(--sl-border, rgba(0,0,0,.08));
  border-radius: var(--sl-radius, 12px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sl-course-row__link:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.10); }
.sl-course-row__main { display: flex; align-items: stretch; gap: 0; }
.sl-course-row__img { width: 240px; flex: 0 0 240px; overflow: hidden; }
.sl-course-row__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-course-row__img--placeholder { background: var(--sl-muted-bg, rgba(0,0,0,.04)); }
.sl-course-row__body { flex: 1 1 auto; padding: 20px 24px; min-width: 0; }
.sl-course-row__title { margin: 0 0 8px; font-size: 1.25rem; }
.sl-course-row__desc { opacity: .8; line-height: 1.6; }
.sl-course-row__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sl-course-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px; font-size: .85rem;
  background: var(--sl-muted-bg, rgba(0,0,0,.05));
}
.sl-course-row__pricing {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
  justify-content: center; gap: 4px; padding: 20px 24px; text-align: right;
  border-left: 1px solid var(--sl-border, rgba(0,0,0,.06));
}
.sl-course-row__price { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.sl-course-row__vat { font-size: .75rem; opacity: .6; }
.sl-course-row__compare { opacity: .55; text-decoration: line-through; }
.sl-course-row__save {
  padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: var(--sl-accent, #16a34a); color: #fff;
}
.sl-course-row__cta { margin-top: 8px; font-weight: 600; }

/* The instalments the same course is also sold in. */
.sl-course-row__variants {
  padding: 16px 24px; border-top: 1px solid var(--sl-border, rgba(0,0,0,.06));
  background: var(--sl-muted-bg, rgba(0,0,0,.02));
}
.sl-course-row__variants-label { display: block; font-size: .85rem; opacity: .7; margin-bottom: 8px; }
.sl-course-row__parts { list-style: none; margin: 0; padding: 0; }
.sl-course-part { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; }
.sl-course-part__num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
  background: var(--sl-muted-bg, rgba(0,0,0,.06));
}
.sl-course-part__body { flex: 1 1 auto; min-width: 0; }
.sl-course-part__name { display: block; font-size: .95rem; }
.sl-course-part__desc { display: block; font-size: .8rem; opacity: .65; }
.sl-course-part__price { flex: 0 0 auto; font-weight: 700; }
.sl-course-row__parts-hint { display: block; margin-top: 10px; font-size: .8rem; opacity: .7; }

@media (max-width: 780px) {
  .sl-course-row__main { flex-direction: column; }
  .sl-course-row__img { width: 100%; flex: 0 0 auto; max-height: 200px; }
  .sl-course-row__pricing {
    align-items: flex-start; text-align: left;
    border-left: 0; border-top: 1px solid var(--sl-border, rgba(0,0,0,.06));
  }
}

/* A band that presents something and then points at the whole of it — a video with
   "see all lessons", a wall of quotes with "see all reviews". */
.sl-band-cta-row { margin: 18px 0 0; text-align: center; }
.sl-band-cta {
  display: inline-block; padding: 10px 22px; border-radius: 999px;
  text-decoration: none; font-weight: 600;
  border: 1px solid var(--sl-accent, currentColor); color: var(--sl-accent, inherit);
}
.sl-band-cta:hover { background: var(--sl-accent, transparent); color: var(--sl-on-accent, #fff); }
.sl-video__body { margin: 0 0 18px; opacity: .85; }

/* The cart in the site header: an icon with the live line count on it. */
/* Two classes for the same reason `.sl-btn--primary` carries two: `.sl-body a` is (0,1,1) and would
   otherwise repaint the cart glyph in the primary colour. A cart is chrome and reads as text, not as a
   link — the retired kidoo app drew it at #1A1A1A. */
.sl-body a.sl-header__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--sl-text);
  padding: 6px;
}
.sl-body a.sl-header__cart:hover { color: var(--sl-primary); }
.sl-header__cart-count {
  position: absolute; top: -6px; right: -10px; min-width: 17px; height: 17px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px; border-radius: 999px; font-size: 11px; line-height: 1;
  background: var(--sl-accent, #16a34a); color: #fff;
}

/* What a course IS, as a row of pills -- the lesson count and what one lesson costs. Opt-in:
   `course-header` still draws one paragraph per fact unless a page asks for pills. */
.sl-course-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; }

/* The panel that SELLS a course: price, what it was, the button, and a card per instalment.
   `course-header` describes the course; this is the only place on that page that takes money. */
.sl-course-buy {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px; max-width: 420px;
  background: var(--sl-surface, #fff);
  border: 1px solid var(--sl-border, rgba(0,0,0,.08));
  border-radius: var(--sl-radius, 12px);
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
}
.sl-course-buy__note { margin: -8px 0 0; font-size: .85rem; opacity: .7; }
/* Every button here submits its own form, so each form is a layout box of its own. */
.sl-course-buy__form { margin: 0; }
.sl-course-buy__cta { width: 100%; text-align: center; }
.sl-course-buy__parts-title {
  margin: 6px 0 0; font-size: .95rem; font-weight: 700;
  display: flex; align-items: center; gap: 6px;
}
.sl-course-buy__parts { display: flex; flex-direction: column; gap: 10px; }
.sl-course-buy__part {
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: var(--sl-muted-bg, rgba(0,0,0,.03));
  border: 1px solid var(--sl-border, rgba(0,0,0,.08));
  border-radius: calc(var(--sl-radius, 12px) - 4px);
}
.sl-course-buy__part-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sl-course-buy__part-head .sl-course-part__price { white-space: nowrap; }
.sl-course-buy__part .sl-course-part__desc { margin: 0; }
.sl-course-buy__part-cta { width: 100%; text-align: center; }

@media (max-width: 780px) {
  .sl-course-buy { max-width: none; }
}