/*
 * Compact Keyword SEO Builder Pro — Section Styles
 *
 * Self-contained rules per section. All selectors are scoped under
 * .ck-page and use ck- prefixed class names. Sections that don't
 * exist yet will get their styles added here in their own turn.
 */

/* ── Global section containment ────────────────────────
 *
 * Every section sits INSIDE the global Page width. The entire box
 * (background, slider, padding, everything) is capped at
 * var(--ck-max-width) and centered with auto margins, so the user
 * sees white space on either side instead of edge-to-edge bleed.
 *
 * Per-section width pickers continue to control the INNER wrapper
 * (i.e. they let you nest text narrower than the section). They no
 * longer override the outer box.
 *
 * To opt a single section back into full-bleed, use Master CSS:
 *   .ck-page .ck-hero { max-width: none; }
 */
.ck-page [data-ck-section],
.ck-page .ck-hero-header-stack {
  max-width: var(--ck-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* ── Hero ────────────────────────────────────────────── */
/*
 * Structural layers:
 *   .ck-hero                     ← outer container (background + height)
 *     .ck-site-brand             ← optional brand strip
 *     .ck-hero-wrapper           ← inner container (alignment, max width)
 *
 * Legacy BEM selectors (`.ck-hero__heading`, etc.) are kept as
 * aliases so existing custom CSS keeps working.
 */

.ck-page .ck-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--ck-pad-normal) 0;
  --ck-hero-overlay-alpha: 0.35;
}

.ck-page .ck-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, var(--ck-hero-overlay-alpha, 0.35));
  pointer-events: none;
  z-index: 0;
}
.ck-page .ck-hero > * { position: relative; z-index: 1; }

/* Height variants — applied to .ck-hero. */
.ck-page .ck-hero--size-small  { min-height: 200px; }
.ck-page .ck-hero--size-medium { min-height: 360px; }
.ck-page .ck-hero--size-large  { min-height: 520px; }
.ck-page .ck-hero--size-full   { min-height: 100vh; }
.ck-page .ck-hero--size-medium,
.ck-page .ck-hero--size-large,
.ck-page .ck-hero--size-full {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Site brand — base typography. The element is now an <h1> (per the
 * "brand is H1 on every page" rule), so we explicitly reset the
 * browser-default <h1> font-size + margin and re-impose our own. */
.ck-page h1.ck-site-brand,
.ck-page .ck-site-brand {
  font-size: var(--ck-font-size-sm);
  font-weight: var(--ck-fw-medium);
  letter-spacing: 0.04em;
  color: inherit;
  padding: 0.5rem 1rem;
  margin: 0;
  text-align: left;
  line-height: 1.2;
  opacity: 0.85;
}

/* Placement A — sibling DIV before .ck-hero (full-page-width strip). */
.ck-page .ck-site-brand--above-section {
  padding: 0.75rem 1rem;
  background: var(--ck-bg-light);
  color: var(--ck-text-color);
  border-bottom: 1px solid var(--ck-border-color);
  opacity: 1;
}

/* Placement B — inside .ck-hero, above the wrapper. (Default.) */
.ck-page .ck-site-brand--above-wrapper {
  /* Inherits base typography; sits flush at the top of the hero. */
}

/* Placement C — first child of .ck-hero-wrapper, above the eyebrow. */
.ck-page .ck-site-brand--inside-wrapper {
  padding: 0 0 0.5rem;
  margin: 0 0 0.75rem;
  border-bottom: 1px solid currentColor;
  opacity: 0.7;
}

/* Inner wrapper — owns alignment + max width + padding.
 *
 * Base width comes from the global Page width setting (via the
 * --ck-max-width variable). The per-hero width picker can override
 * this with one of the named modifier classes below, which lets a
 * specific hero be wider or narrower than the rest of the page —
 * useful for nesting a focused intro inside a wide layout.
 */
.ck-page .ck-hero-wrapper {
  margin: 0 auto;
  padding: 1rem;
  max-width: var(--ck-max-width);
}
.ck-page .ck-hero-wrapper--width-narrow { max-width: 640px;  }
.ck-page .ck-hero-wrapper--width-wide   { max-width: 1200px; }
.ck-page .ck-hero-wrapper--width-xwide  { max-width: 1400px; }
.ck-page .ck-hero-wrapper--width-full   { max-width: 100%;   }

.ck-page .ck-hero-wrapper--align-left   { text-align: left;   }
.ck-page .ck-hero-wrapper--align-center { text-align: center; }
.ck-page .ck-hero-wrapper--align-right  { text-align: right;  }

/* Centred wrappers should keep tags / CTA visually balanced. */
.ck-page .ck-hero-wrapper--align-center .ck-hero-tags,
.ck-page .ck-hero-wrapper--align-center .ck-hero__tags { justify-content: center; }
.ck-page .ck-hero-wrapper--align-right  .ck-hero-tags,
.ck-page .ck-hero-wrapper--align-right  .ck-hero__tags { justify-content: flex-end; }

/* Typography (new flat selectors + legacy BEM aliases). */
.ck-page .ck-hero-context-label,
.ck-page .ck-hero__eyebrow {
  font-size: var(--ck-font-size-sm);
  font-weight: var(--ck-fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ck-text-muted);
  margin: 0 0 0.5rem;
}

.ck-page .ck-hero-heading,
.ck-page .ck-hero__heading {
  font-size: 2.25rem;
  font-weight: var(--ck-fw-bold);
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

.ck-page .ck-hero-subheading,
.ck-page .ck-hero__subheading {
  font-size: var(--ck-font-size-lg);
  color: var(--ck-text-muted);
  margin: 0 0 1.25rem;
}

/*
 * Tagline variant — the subheading sits ABOVE the H1 and acts as the
 * page tagline. Make it visually subordinate to the H1 below it:
 * slightly smaller, lighter weight, tight bottom margin so it pairs
 * cleanly with the heading.
 */
.ck-page .ck-hero-subheading.ck-hero-subheading--tagline,
.ck-page .ck-hero__subheading.ck-hero-subheading--tagline {
  font-size: var(--ck-font-size-md);
  font-weight: var(--ck-fw-normal);
  margin: 0 0 0.4rem;
  opacity: 0.9;
}

.ck-page .ck-hero-content-box,
.ck-page .ck-hero__content-box {
  margin: 0.75rem 0 1.25rem;
  line-height: var(--ck-line-height);
  color: var(--ck-text-color);
}
.ck-page .ck-hero-content-box p,
.ck-page .ck-hero__content-box p { margin: 0 0 0.75rem; }
.ck-page .ck-hero-content-box p:last-child,
.ck-page .ck-hero__content-box p:last-child { margin-bottom: 0; }

/*
 * Theme-resistant hero typography.
 *
 * Why this exists: a lot of WP themes (especially block themes that
 * use `.has-<colour>-background-color` utility classes, or page
 * builders that bake `body .entry-content h1 { ... !important }`
 * into their stylesheets) will reach in and re-style the bare
 * `<h1>` and `<p>` elements inside the hero — recolouring them,
 * changing the font family, adding margins, or even forcing a
 * different background. That's especially obvious when the user
 * sets a coloured hero background and the theme's headline rules
 * suddenly clash.
 *
 * Defensive strategy:
 *   1. Scope every reset to `.ck-page .ck-hero`.
 *   2. Use `:where()` around the actual hero element class. This
 *      keeps the reset strong enough to beat bare theme rules like
 *      `h1 { ... }` or `.entry-content p { ... }`, but NOT so
 *      specific that editor Custom CSS becomes painful.
 *   3. Avoid `!important` for text properties editors should
 *      reasonably override (color, font-size, weight, spacing).
 *      A simple Custom CSS rule like `.ck-hero__subheading { ... }`
 *      is transformed to `.ck-page .ck-hero__subheading { ... }`
 *      and appears later in the cascade, so it wins cleanly.
 *
 * This block intentionally lives BELOW the cosmetic hero rules
 * above so its overrides apply on top of the same properties.
 */
.ck-page .ck-hero :where(.ck-hero-heading, .ck-hero__heading) {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--ck-fw-bold);
  font-size: 2.25rem;
  line-height: 1.15;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  text-shadow: none;
  color: inherit;
  background: none;
  border: 0;
  margin: 0 0 0.75rem;
  padding: 0;
}

.ck-page .ck-hero :where(.ck-hero-subheading, .ck-hero__subheading) {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--ck-fw-normal, 400);
  font-size: var(--ck-font-size-lg);
  line-height: var(--ck-line-height);
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  color: var(--ck-text-muted);
  background: none;
  border: 0;
  margin: 0 0 1.25rem;
  padding: 0;
}

.ck-page .ck-hero :where(.ck-hero-content-p, .ck-hero__content-p) {
  font-family: inherit;
  font-style: normal;
  font-weight: var(--ck-fw-normal, 400);
  font-size: 1rem;
  line-height: var(--ck-line-height);
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  color: inherit;
  background: none;
  border: 0;
  margin: 0 0 0.75rem;
  padding: 0;
}
.ck-page .ck-hero :where(.ck-hero-content-p, .ck-hero__content-p):last-child {
  margin-bottom: 0;
}

.ck-page .ck-hero :where(.ck-hero-context-label, .ck-hero__eyebrow) {
  font-family: inherit;
  font-style: normal;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
}

/*
 * On dark/coloured hero backgrounds the headline and content text
 * default to white. Themes love to override this with their own
 * heading colour rules; the same defensive specificity + !important
 * rule applies here so the contrast stays readable.
 */
.ck-page :where(.ck-hero--has-bg-image, .ck-hero--has-overlay, .ck-hero--has-bg-gradient, .ck-hero--has-bg-color)
  :where(.ck-hero-heading, .ck-hero__heading) {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.ck-page :where(.ck-hero--has-bg-image, .ck-hero--has-overlay, .ck-hero--has-bg-gradient, .ck-hero--has-bg-color)
  :where(.ck-hero-subheading, .ck-hero__subheading) {
  color: rgba(255, 255, 255, 0.9);
}

.ck-page :where(.ck-hero--has-bg-image, .ck-hero--has-overlay, .ck-hero--has-bg-gradient, .ck-hero--has-bg-color)
  :where(.ck-hero-content-p, .ck-hero__content-p) {
  color: rgba(255, 255, 255, 0.92);
}

/*
 * Hero tags row.
 *
 * Defensive reset block: themes love to style bare <ul>/<li> with
 * margins, backgrounds, padding and border-radius — which is the
 * mystery "white rounded rectangle" some hero outputs end up with.
 * The explicit `background: transparent; border: 0; box-shadow: none;
 * padding: 0` cancels anything a parent stylesheet may have leaked
 * in, so the plain tag row really is plain unless the editor opts
 * into a wrapper via the `tags_box` field.
 */
.ck-page .ck-hero-tags,
.ck-page .ck-hero__tags {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.ck-page .ck-hero-tag,
.ck-page .ck-hero__tag {
  display: inline-flex;          /* inline-flex sits inside the parent flex
                                    container without UA inline-block quirks
                                    around descender whitespace. */
  align-items: center;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--ck-border-color);
  border-radius: 999px;
  background: var(--ck-bg-light);
  color: var(--ck-text-color);
  font-size: var(--ck-font-size-sm);
  line-height: 1.2;
  white-space: nowrap;           /* short tags like "uk lawn recovery" should
                                    not split a single pill across two lines. */
}

/*
 * Inline display mode.
 *
 * Same <ul><li> markup as pills mode (keeps the list semantics
 * intact for screen readers), but the per-tag pill chrome is
 * stripped and a `·` separator is rendered before every item
 * EXCEPT the first via ::before. flex-wrap stays on so a long
 * line still reflows nicely on narrow viewports.
 */
.ck-page .ck-hero-tags--mode-inline {
  gap: 0;                /* the · separator handles spacing */
  align-items: baseline;
  flex-wrap: wrap;
}
.ck-page .ck-hero-tags--mode-inline .ck-hero-tag,
.ck-page .ck-hero-tags--mode-inline .ck-hero__tag {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  white-space: normal;   /* allow long phrases to wrap mid-sentence */
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.ck-page .ck-hero-tags--mode-inline .ck-hero-tag + .ck-hero-tag::before,
.ck-page .ck-hero-tags--mode-inline .ck-hero__tag + .ck-hero__tag::before {
  content: " · ";
  color: var(--ck-text-muted);
  margin: 0 0.35em;
}
/* When the inline row sits over a dark hero, separator follows
 * the white text colour applied higher up the cascade. */
.ck-page .ck-hero--has-bg-image .ck-hero-tags--mode-inline .ck-hero-tag + .ck-hero-tag::before,
.ck-page .ck-hero--has-overlay  .ck-hero-tags--mode-inline .ck-hero-tag + .ck-hero-tag::before,
.ck-page .ck-hero--has-bg-gradient .ck-hero-tags--mode-inline .ck-hero-tag + .ck-hero-tag::before {
  color: rgba(255, 255, 255, 0.7);
}

/*
 * Opt-in wrapper for the tags row. The shared `.ck-hero-tags--box`
 * applies the geometry common to every variant: padding (so pills
 * have breathing room and never overlap the wrapper border) and
 * the rounded corners. Each variant adds its own fill / outline.
 *
 * Margin-top is set on the wrapper itself so the box doesn't sit
 * flush against the content above when the editor opts in.
 */
.ck-page .ck-hero-tags--box {
  padding: 0.7rem 0.85rem;
  border-radius: var(--ck-radius);
  margin-top: 0.25rem;
}
.ck-page .ck-hero-tags--box-soft {
  background: var(--ck-bg-light);
  border: 0;
}
.ck-page .ck-hero-tags--box-card {
  background: var(--ck-bg-white);
  border: 1px solid var(--ck-border-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.ck-page .ck-hero-tags--box-outline {
  background: transparent;
  border: 1px solid var(--ck-border-color);
}

/* When a tags box sits over a dark hero (bg image / overlay / gradient),
 * flip the fill/border to a translucent-on-white so the box reads against
 * the imagery and the pills inside it keep their light pill look. */
.ck-page .ck-hero--has-bg-image .ck-hero-tags--box-card,
.ck-page .ck-hero--has-overlay  .ck-hero-tags--box-card,
.ck-page .ck-hero--has-bg-gradient .ck-hero-tags--box-card {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.30);
}
.ck-page .ck-hero--has-bg-image .ck-hero-tags--box-soft,
.ck-page .ck-hero--has-overlay  .ck-hero-tags--box-soft,
.ck-page .ck-hero--has-bg-gradient .ck-hero-tags--box-soft {
  background: rgba(255, 255, 255, 0.10);
}
.ck-page .ck-hero--has-bg-image .ck-hero-tags--box-outline,
.ck-page .ck-hero--has-overlay  .ck-hero-tags--box-outline,
.ck-page .ck-hero--has-bg-gradient .ck-hero-tags--box-outline {
  border-color: rgba(255, 255, 255, 0.35);
}

.ck-page .ck-hero__cta-wrap { margin: 0; }

/* Soft CTA — text link with a chevron, not a filled button. */
.ck-page .ck-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--ck-primary-color);
  text-decoration: none;
  font-weight: var(--ck-fw-medium);
  transition: gap 120ms ease-out, opacity 120ms;
}
.ck-page .ck-hero__cta:hover,
.ck-page .ck-hero__cta:focus { gap: 0.55rem; opacity: 0.85; }
.ck-page .ck-hero__cta-arrow { line-height: 1; }

/* When a background image / gradient / overlay is in play, white-out
 * the typography so the content stays readable on dark imagery. */
.ck-page .ck-hero--has-bg-image,
.ck-page .ck-hero--has-overlay,
.ck-page .ck-hero--has-bg-gradient {
  color: #ffffff;
}
.ck-page .ck-hero--has-bg-image .ck-hero-context-label,
.ck-page .ck-hero--has-bg-image .ck-hero__eyebrow,
.ck-page .ck-hero--has-bg-image .ck-hero-subheading,
.ck-page .ck-hero--has-bg-image .ck-hero__subheading,
.ck-page .ck-hero--has-overlay  .ck-hero-context-label,
.ck-page .ck-hero--has-overlay  .ck-hero__eyebrow,
.ck-page .ck-hero--has-overlay  .ck-hero-subheading,
.ck-page .ck-hero--has-overlay  .ck-hero__subheading {
  color: rgba(255, 255, 255, 0.88);
}
.ck-page .ck-hero--has-bg-image .ck-hero-tag,
.ck-page .ck-hero--has-bg-image .ck-hero__tag,
.ck-page .ck-hero--has-overlay  .ck-hero-tag,
.ck-page .ck-hero--has-overlay  .ck-hero__tag {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}
.ck-page .ck-hero--has-bg-image .ck-hero__cta,
.ck-page .ck-hero--has-overlay  .ck-hero__cta {
  color: #ffffff;
}

@media (max-width: 640px) {
  .ck-page .ck-hero-heading,
  .ck-page .ck-hero__heading    { font-size: 1.625rem; }
  .ck-page .ck-hero-subheading,
  .ck-page .ck-hero__subheading { font-size: var(--ck-font-size-md); }
  .ck-page .ck-hero--size-full  { min-height: 70vh; }
}

/* ── Shared section frame ─────────────────────────────── */

.ck-page [data-ck-section] {
  margin: 0 auto;
}

/*
 * Section-to-section vertical spacing.
 *
 * Driven by `--ck-section-gap` (set in variables.css with viewport
 * breakpoints at 1024px / 600px). The adjacent-sibling combinator
 * means the FIRST section on the page never gets a top margin —
 * only gaps BETWEEN sections are produced.
 *
 * Per-section overrides come from the style engine as `ck-gap-*`
 * modifier classes on the section root.
 */
.ck-page [data-ck-section] + [data-ck-section] {
  margin-top: var(--ck-section-gap);
}
.ck-page [data-ck-section] + [data-ck-section].ck-gap-none { margin-top: 0; }
.ck-page [data-ck-section] + [data-ck-section].ck-gap-sm   { margin-top: 24px; }
.ck-page [data-ck-section] + [data-ck-section].ck-gap-md   { margin-top: 48px; }
.ck-page [data-ck-section] + [data-ck-section].ck-gap-lg   { margin-top: 64px; }
.ck-page [data-ck-section] + [data-ck-section].ck-gap-xl   { margin-top: 96px; }

/*
 * Inner wrappers handle horizontal containment only — vertical
 * rhythm is owned exclusively by --ck-section-gap above. Removing
 * the old `padding: var(--ck-pad-normal) 0` here is what fixes the
 * "lots of space" report after stacking sections.
 */
.ck-page .ck-faq__inner,
.ck-page .ck-conditions__inner,
.ck-page .ck-main-content__inner,
.ck-page .ck-listicle__inner,
.ck-page .ck-howto__inner,
.ck-page .ck-seasonal-advice__inner,
.ck-page .ck-products__inner {
  max-width: var(--ck-max-width);
  margin: 0 auto;
  padding: 0;
}

.ck-page [data-ck-section] h2 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: var(--ck-fw-bold);
  line-height: 1.25;
}

/* Section intro copy must use explicit section classes. Avoid broad
 * paragraph selectors here, because they accidentally style hero
 * subheading/body text and make browser inspect point at
 * `[data-ck-section]` instead of the real element class. */
.ck-page .ck-faq__description,
.ck-page .ck-conditions__description,
.ck-page .ck-main-content__description,
.ck-page .ck-listicle__description,
.ck-page .ck-howto__description,
.ck-page .ck-seasonal-advice__description,
.ck-page .ck-products__description {
  color: var(--ck-text-muted);
}

/* ── Listicle ─────────────────────────────────────────── */

.ck-page .ck-listicle__items {
  /* Base — no marker. List-style is set by the --list-* modifier
   * below so numbered/bulleted/plain each get exactly one rule. */
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

/* Top-level list markers. `inside` keeps the marker aligned with the
 * item title rather than hanging to the left of the row, which is
 * what looks right for an inline-title layout. */
.ck-page .ck-listicle--list-numbered .ck-listicle__items { list-style: decimal inside; }
.ck-page .ck-listicle--list-bulleted .ck-listicle__items { list-style: disc inside; }
.ck-page .ck-listicle--list-plain    .ck-listicle__items { list-style: none; }

.ck-page .ck-listicle__item {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--ck-border-color);
}
.ck-page .ck-listicle__item:last-child { border-bottom: 0; }
.ck-page .ck-listicle__item-title {
  display: inline;
  font-weight: var(--ck-fw-medium);
  margin: 0 0.25rem 0 0;
}

/* Item description body — now accepts inline HTML (paragraphs, lists,
 * links, etc.). The wrapper is a <div>, so paragraphs inside paint
 * with normal block spacing. */
.ck-page .ck-listicle__item-description {
  margin: 0.25rem 0 0;
}
.ck-page .ck-listicle__item-description > p {
  margin: 0 0 0.5em;
}
.ck-page .ck-listicle__item-description > p:last-child {
  margin-bottom: 0;
}

/* Nested lists inside the description — always render with their own
 * markers regardless of the section-level list-style. The default
 * browser styles would hide them inside `inside`-styled parents in
 * some themes, so we force visible markers + indent here. */
.ck-page .ck-listicle__item-description ul,
.ck-page .ck-listicle__item-description ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
  list-style-position: outside;
}
.ck-page .ck-listicle__item-description ul { list-style-type: disc; }
.ck-page .ck-listicle__item-description ol { list-style-type: decimal; }
.ck-page .ck-listicle__item-description li {
  margin: 0.15em 0;
  padding: 0;
  border: 0;
  display: list-item;
}

/* ── How-To ───────────────────────────────────────────── */

.ck-page .ck-howto__steps {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.75rem;
}
.ck-page .ck-howto__step {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--ck-bg-light);
  border-radius: var(--ck-radius);
}
.ck-page .ck-howto__step-marker {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--ck-primary-color);
  font-weight: var(--ck-fw-bold);
}
.ck-page .ck-howto__step-title {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
}

/* ── Seasonal Advice ──────────────────────────────────── */

.ck-page .ck-seasonal-advice__items {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}
.ck-page .ck-seasonal-advice__item {
  padding: 0.75rem 1rem;
  background: var(--ck-bg-light);
  border-left: 3px solid var(--ck-primary-color);
  border-radius: var(--ck-radius);
}
.ck-page .ck-seasonal-advice__item-title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
}

/* ── FAQ ──────────────────────────────────────────────── */

.ck-page .ck-faq__items {
  margin: 1rem 0 0;
}
.ck-page .ck-faq__item {
  border: 1px solid var(--ck-border-color);
  border-radius: var(--ck-radius);
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--ck-bg-white);
}
.ck-page .ck-faq__item[open] {
  background: var(--ck-bg-light);
}
.ck-page .ck-faq__question {
  cursor: pointer;
  font-weight: var(--ck-fw-medium);
  list-style: none;
  padding: 0.25rem 0;
}
.ck-page .ck-faq__question::-webkit-details-marker { display: none; }
.ck-page .ck-faq__answer {
  padding: 0.5rem 0 0.25rem;
}

/* Mode: open by default — `<details open>`. The base [open] rule
 * already handles the visual; this modifier just exists so users
 * can target only "open by default" cards from custom CSS. */
.ck-page .ck-faq--mode-open .ck-faq__item {
  background: var(--ck-bg-light);
}

/* Mode: static — answers always shown, no toggle UI at all. The
 * template renders `<div>` instead of `<details>`, with an `<h3>`
 * for each question. We strip the cursor/marker affordances so it
 * reads as a flat Q+A list. */
.ck-page .ck-faq--mode-static .ck-faq__item {
  background: var(--ck-bg-light);
}
.ck-page .ck-faq__question--static {
  cursor: default;
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: var(--ck-fw-medium);
  padding: 0.25rem 0;
}

/* ── Conditions ───────────────────────────────────────── */

/*
 * Conditions row — layout is driven by modifier classes set in the
 * template based on the section's `row_layout` and `card_size` fields.
 *
 *   • `--card-{size}` controls the per-card minimum width via a CSS
 *     custom property so each layout reads the same value.
 *   • `--layout-auto-fit` (DEFAULT) wraps cards onto multiple rows when
 *     the inner column is narrower than n × min-card-width — this is
 *     what stops 5 cards forcing a horizontal scrollbar on desktop.
 *   • `--layout-equal` keeps a single row of equal-width columns and
 *     lets cards shrink under their min size if needed.
 *   • `--layout-wrap` keeps cards at their natural size and drops to
 *     additional flex lines instead of scrolling.
 *   • `--layout-scroll` is the original behaviour — a single
 *     non-wrapping flex row that overflows-scrolls horizontally.
 *
 * Per-card visual rules (background, padding, alignment, icon stack)
 * live in the consolidated `.ck-conditions__item` block lower down.
 */
.ck-page .ck-conditions__items {
  /* Default min-card-width — overridden by --card-{size} modifiers. */
  --ck-cond-card-min: 170px;
  --ck-cond-gap: 0.75rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0 0 6px;
  gap: var(--ck-cond-gap);
}

/* Card-size modifiers — set the shared variable so every layout reads
 * the same value without duplicated rules. */
.ck-page .ck-conditions__items--card-compact     { --ck-cond-card-min: 130px; }
.ck-page .ck-conditions__items--card-normal      { --ck-cond-card-min: 170px; }
.ck-page .ck-conditions__items--card-comfortable { --ck-cond-card-min: 210px; }
.ck-page .ck-conditions__items--card-wide        { --ck-cond-card-min: 260px; }

/* Layout: auto-fit (default) — CSS grid that wraps gracefully and
 * never produces a horizontal scrollbar. The `min(min-card-width,
 * 100%)` guard keeps a single very-narrow card from blowing out the
 * grid track on tiny phones. */
.ck-page .ck-conditions__items--layout-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--ck-cond-card-min), 100%), 1fr));
  justify-content: center;
}

/* Layout: equal — single row, cards share width evenly even when
 * that means going below the nominal min size. */
.ck-page .ck-conditions__items--layout-equal {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

/* Layout: wrap — flex line wrapping; cards keep at least min size. */
.ck-page .ck-conditions__items--layout-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.ck-page .ck-conditions__items--layout-wrap .ck-conditions__item {
  flex: 0 1 var(--ck-cond-card-min);
}

/* Layout: scroll — original behaviour for users who deliberately
 * want a single-row scroller. Flex-nowrap + min-card-width forces
 * overflow when there's not enough room. */
.ck-page .ck-conditions__items--layout-scroll {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.ck-page .ck-conditions__items--layout-scroll .ck-conditions__item {
  flex: 1 0 var(--ck-cond-card-min);
  scroll-snap-align: start;
}

/* Section max-width modifiers (applied to the section root). The
 * inner `.ck-conditions__inner` is what actually clamps the content
 * — we centre it so the section can sit inside a full-bleed parent. */
.ck-page .ck-conditions--width-default .ck-conditions__inner { /* inherit theme width */ }
.ck-page .ck-conditions--width-wide .ck-conditions__inner {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.ck-page .ck-conditions--width-full .ck-conditions__inner {
  max-width: none;
}

.ck-page .ck-conditions__item-title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  text-align: center;
}
.ck-page .ck-conditions__item-description {
  margin: 0;
  text-align: center;
  color: var(--ck-text-muted);
}

/* ── Main Content ─────────────────────────────────────── */

.ck-page .ck-main-content__body {
  margin-top: 1rem;
  line-height: var(--ck-line-height);
}
.ck-page .ck-main-content__body p {
  margin: 0 0 1rem;
}

/* ── Product Grid ─────────────────────────────────────── */

.ck-page .ck-products__list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 1rem;
}
.ck-page .ck-products__list--cols-1 { grid-template-columns: 1fr; }
.ck-page .ck-products__list--cols-2 { grid-template-columns: repeat(2, 1fr); }
.ck-page .ck-products__list--cols-3 { grid-template-columns: repeat(3, 1fr); }
.ck-page .ck-products__list--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
  .ck-page .ck-products__list--cols-3,
  .ck-page .ck-products__list--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .ck-page .ck-products__list--cols-2,
  .ck-page .ck-products__list--cols-3,
  .ck-page .ck-products__list--cols-4 { grid-template-columns: 1fr; }
}
.ck-page .ck-product {
  border: 1px solid var(--ck-border-color);
  border-radius: var(--ck-radius);
  background: var(--ck-bg-white);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ck-page .ck-product__link {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ck-page .ck-product__media {
  background: var(--ck-bg-light);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.ck-page .ck-product__image {
  width: 100%;
  height: auto;
  display: block;
}

/* Image-size variants. Different WP sizes load different files; for
 * the smaller sizes we also constrain the rendered box so the choice
 * is visible in the card (a thumbnail next to a 1024px image looks
 * the same otherwise). Larger sizes keep the full-bleed default. */
.ck-page .ck-product__media--size-thumbnail,
.ck-page .ck-product__media--size-woocommerce_gallery_thumbnail {
  aspect-ratio: 1 / 1;
  max-width: 150px;
  margin: 0.75rem auto 0;
  border-radius: 6px;
}
.ck-page .ck-product__media--size-thumbnail .ck-product__image,
.ck-page .ck-product__media--size-woocommerce_gallery_thumbnail .ck-product__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ck-page .ck-product__media--size-medium,
.ck-page .ck-product__media--size-woocommerce_thumbnail {
  max-width: 300px;
  margin: 0 auto;
}
.ck-page .ck-product__media--size-medium_large {
  max-width: 480px;
  margin: 0 auto;
}
/* large / full / woocommerce_single keep the default full-bleed media,
 * since the visible difference is mostly sharpness on retina screens. */
.ck-page .ck-product__body {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.ck-page .ck-product__title {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--ck-fw-medium);
}
.ck-page .ck-product__description {
  margin: 0;
  color: var(--ck-text-muted);
  font-size: var(--ck-font-size-sm);
}
/* Manual description (editor-supplied) — looks like a real
 * description rather than a muted placeholder, preserves line breaks
 * the editor typed, and doesn't get truncated. */
.ck-page .ck-product__description--manual {
  color: inherit;
  font-size: 0.95rem;
  line-height: 1.45;
  white-space: pre-line;
}
.ck-page .ck-product__price {
  margin-top: auto;
  font-weight: var(--ck-fw-bold);
  color: var(--ck-primary-color);
}
.ck-page .ck-product__cta-wrap {
  margin: 0;
  padding: 0.5rem 0.75rem 0.75rem;
}
.ck-page .ck-product__cta {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: var(--ck-radius);
  background-color: var(--ck-primary-color);
  color: #ffffff;
  text-decoration: none;
  font-size: var(--ck-font-size-sm);
  font-weight: var(--ck-fw-medium);
}
.ck-page .ck-product__cta:hover,
.ck-page .ck-product__cta:focus {
  filter: brightness(0.95);
}

/* ── Keyword Strip ───────────────────────────────────── */

.ck-page .ck-keyword-strip {
  padding: var(--ck-pad-compact) 0;
}
.ck-page .ck-keyword-strip__inner {
  max-width: var(--ck-max-width);
  margin: 0 auto;
}
.ck-page .ck-keyword-strip__title {
  margin: 0 0 0.5rem;
  font-size: var(--ck-font-size-sm);
  font-weight: var(--ck-fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ck-text-muted);
}
.ck-page .ck-keyword-strip__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.ck-page .ck-keyword-strip__item {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--ck-border-color);
  border-radius: 999px;
  background: var(--ck-bg-light);
  color: var(--ck-text-color);
  font-size: var(--ck-font-size-sm);
  line-height: 1.2;
}

/* ── Conditions: per-card visuals ─────────────────────
 *
 * The card-size modifiers (`--size-{compact|normal|comfortable|wide}`)
 * set a `max-width` so the card never grows freakishly wide in the
 * auto-fit grid when only 1–2 cards exist. They also tweak padding so
 * compact cards don't waste space.
 *
 * Width *floors* (min-card-width) for grid/scroll/wrap layouts come
 * from `--ck-cond-card-min` set on the parent `.ck-conditions__items`
 * block above — keep both blocks in sync.
 */
.ck-page .ck-conditions__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1rem;
  background: var(--ck-bg-light);
  border-radius: var(--ck-radius);
  min-width: 0;
}
.ck-page .ck-conditions__item--size-compact     { max-width: 220px; padding: 0.75rem; }
.ck-page .ck-conditions__item--size-normal      { max-width: 260px; }
.ck-page .ck-conditions__item--size-comfortable { max-width: 320px; }
.ck-page .ck-conditions__item--size-wide        { max-width: 380px; }
.ck-page .ck-conditions__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--ck-bg-white);
  color: var(--ck-primary-color);
  border: 1px solid var(--ck-border-color);
}
.ck-page .ck-conditions__icon {
  font-size: 1.25rem;
  line-height: 1;
}
.ck-page .ck-conditions__icon--bundled,
.ck-page .ck-bundled-icon {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--ck-primary-color);
  display: inline-block;
}
.ck-page .ck-conditions__item-body {
  /* Body wrapper sits below the icon in the new column layout — full
   * width of the card so the centered title/description aren't pulled
   * off-axis by their own intrinsic widths. */
  min-width: 0;
  width: 100%;
}

/* ── Hero image layouts ──────────────────────────────── */

.ck-page .ck-hero--layout-top {
  display: flex;
  flex-direction: column;
}
.ck-page .ck-hero--layout-top .ck-hero__media--top {
  order: -1;
  margin: 0 auto 1rem;
  width: 100%;
  max-width: var(--ck-max-width);
}

.ck-page .ck-hero--layout-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: center;
  max-width: var(--ck-max-width);
  margin: 0 auto;
}
.ck-page .ck-hero--layout-side .ck-hero__inner { max-width: none; }
.ck-page .ck-hero--layout-side .ck-hero__media--side { margin: 0; }
@media (max-width: 720px) {
  .ck-page .ck-hero--layout-side { grid-template-columns: 1fr; }
}

.ck-page .ck-hero--layout-overlay {
  position: relative;
  min-height: 320px;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 3rem 1.5rem;
  border-radius: var(--ck-radius);
  overflow: hidden;
}
.ck-page .ck-hero--layout-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.55));
  pointer-events: none;
}
.ck-page .ck-hero--layout-overlay > * { position: relative; z-index: 1; }
.ck-page .ck-hero--layout-overlay .ck-hero__inner {
  text-align: center;
  margin: 0 auto;
}
.ck-page .ck-hero--layout-overlay .ck-hero__heading,
.ck-page .ck-hero--layout-overlay .ck-hero__subheading,
.ck-page .ck-hero--layout-overlay .ck-hero__eyebrow {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.ck-page .ck-hero__media { margin: 0; }
.ck-page .ck-hero__image { display: block; width: 100%; height: auto; }
.ck-page .ck-hero__caption {
  font-size: var(--ck-font-size-sm);
  color: var(--ck-text-muted);
  margin-top: 0.25rem;
  text-align: center;
}

.ck-page .ck-hero--img-ratio-square    .ck-hero__image { aspect-ratio: 1 / 1;   object-fit: cover; }
.ck-page .ck-hero--img-ratio-landscape .ck-hero__image { aspect-ratio: 16 / 9; object-fit: cover; }
.ck-page .ck-hero--img-ratio-banner    .ck-hero__image { aspect-ratio: 21 / 9; object-fit: cover; }

.ck-page .ck-hero--img-size-small  .ck-hero__media { max-width: 320px; }
.ck-page .ck-hero--img-size-medium .ck-hero__media { max-width: 560px; }
.ck-page .ck-hero--img-size-large  .ck-hero__media { max-width: 900px; }
.ck-page .ck-hero--img-size-full   .ck-hero__media { max-width: 100%; }

.ck-page .ck-hero--img-radius-none    .ck-hero__image { border-radius: 0; }
.ck-page .ck-hero--img-radius-soft    .ck-hero__image { border-radius: var(--ck-radius); }
.ck-page .ck-hero--img-radius-rounded .ck-hero__image { border-radius: 1.25rem; }

.ck-page .ck-hero--img-shadow .ck-hero__image {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

/* ── Hero — Slider ───────────────────────────────────── */
/*
 * The slider sits behind everything else inside .ck-hero. The hero
 * wrapper (text + CTA) is given a positive z-index so it stays on
 * top of the active slide. Slides crossfade via opacity transitions
 * driven by the JS toggling `is-active` on one slide at a time.
 *
 * Mobile resize: each slide is a full-bleed background; the inner
 * <img> is hidden visually (background-image carries the picture)
 * but kept in the DOM for accessibility (alt text is exposed via
 * the IMG, screen readers ignore the background-image layer).
 */
.ck-page .ck-hero--has-slider {
  position: relative;
  overflow: hidden;
}

/* Lift the hero wrapper above the slider layer. */
.ck-page .ck-hero--has-slider .ck-hero-wrapper,
.ck-page .ck-hero--has-slider .ck-site-brand,
.ck-page .ck-hero--has-slider .ck-hero__overlay {
  position: relative;
  z-index: 2;
}

.ck-page .ck-hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none; /* arrows re-enable below */
}

.ck-page .ck-hero-slider__viewport {
  position: absolute;
  inset: 0;
  /*
   * Ken Burns scales slides up to 1.18×. Without overflow:hidden the
   * scaled image would bleed past the hero section's bounds when the
   * theme container doesn't clip its children.
   */
  overflow: hidden;
}

.ck-page .ck-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 700ms ease-in-out;
}

.ck-page .ck-hero-slide.is-active {
  opacity: 1;
}

/* ──────────────────────────────────────────────────────────────────
 * Ken Burns effect (opt-in via .ck-hero-slider--kenburns)
 *
 * Each slide animates transform: scale() + translate() over the full
 * autoplay interval (+1s buffer set inline as --ck-kenburns-secs).
 * Four keyframe variants are assigned by nth-child so consecutive
 * slides never pan in the same direction — avoids the "all slides
 * zoom into the same corner" tedium of single-variant Ken Burns.
 *
 * The transform restarts when .is-active is removed-then-re-added by
 * the slider JS, so revisiting a slide always plays the animation
 * from the start.
 *
 * `ease-out` matches a typical documentary Ken Burns rhythm — quick
 * initial motion that settles toward the end of the slide, so the
 * crossfade to the next slide happens during a "calm" moment of the
 * current zoom rather than its busiest acceleration.
 * ────────────────────────────────────────────────────────────── */

@keyframes ck-kenburns-a {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.18) translate3d(-2.5%, -1.5%, 0); }
}

@keyframes ck-kenburns-b {
  from { transform: scale(1.18) translate3d(2%, 1%, 0); }
  to   { transform: scale(1.04) translate3d(0, 0, 0); }
}

@keyframes ck-kenburns-c {
  from { transform: scale(1.08) translate3d(-1%, -1%, 0); }
  to   { transform: scale(1.16) translate3d(2.5%, 1.5%, 0); }
}

@keyframes ck-kenburns-d {
  from { transform: scale(1.15) translate3d(1.5%, -1.5%, 0); }
  to   { transform: scale(1.02) translate3d(-1.5%, 1.5%, 0); }
}

.ck-page .ck-hero-slider--kenburns .ck-hero-slide.is-active {
  animation: ck-kenburns-a var(--ck-kenburns-secs, 9s) ease-out forwards;
  transform-origin: 50% 50%;
  will-change: transform;
}

.ck-page .ck-hero-slider--kenburns .ck-hero-slide:nth-child(4n+2).is-active {
  animation-name: ck-kenburns-b;
  transform-origin: 30% 30%;
}

.ck-page .ck-hero-slider--kenburns .ck-hero-slide:nth-child(4n+3).is-active {
  animation-name: ck-kenburns-c;
  transform-origin: 70% 70%;
}

.ck-page .ck-hero-slider--kenburns .ck-hero-slide:nth-child(4n+4).is-active {
  animation-name: ck-kenburns-d;
  transform-origin: 70% 30%;
}

/* Honour the user's reduced-motion preference. We also disable the
 * underlying opacity transition so a sensitive user gets a clean
 * instant switch rather than a half-disabled effect. */
@media (prefers-reduced-motion: reduce) {
  .ck-page .ck-hero-slider--kenburns .ck-hero-slide,
  .ck-page .ck-hero-slider--kenburns .ck-hero-slide.is-active {
    animation: none !important;
    transform: none !important;
  }
}

/* The inline IMG carries the alt text for screen readers but the
 * visible picture comes from background-image. Hide visually,
 * leave in the accessibility tree. */
.ck-page .ck-hero-slide__img {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

/* Arrows — circular nudges anchored to each side. */
.ck-page .ck-hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease;
}

.ck-page .ck-hero-slider__arrow:hover,
.ck-page .ck-hero-slider__arrow:focus {
  background: rgba(0, 0, 0, 0.65);
  outline: none;
}

.ck-page .ck-hero-slider__arrow--prev { left: 12px; }
.ck-page .ck-hero-slider__arrow--next { right: 12px; }

/* Mobile — smaller arrows so they don't crowd the picture. */
@media (max-width: 640px) {
  .ck-page .ck-hero-slider__arrow {
    width: 36px;
    height: 36px;
    font-size: 22px;
  }
  .ck-page .ck-hero-slider__arrow--prev { left: 8px; }
  .ck-page .ck-hero-slider__arrow--next { right: 8px; }
}

/* When a slider is overlaid behind hero text, force the text to stay
 * legible just like the existing has-bg-image rules do. */
.ck-page .ck-hero--has-slider :where(.ck-hero-heading, .ck-hero__heading),
.ck-page .ck-hero--has-slider :where(.ck-hero-subheading, .ck-hero__subheading),
.ck-page .ck-hero--has-slider :where(.ck-hero-context-label, .ck-hero__eyebrow) {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* ── Navigation Menu ─────────────────────────────────── */
.ck-page .ck-navigation {
  width: 100%;
  color: var(--ck-text);
}

.ck-page .ck-navigation__inner {
  max-width: var(--ck-max-width);
  margin: 0 auto;
}

.ck-page .ck-navigation__toggle {
  display: none;
}

.ck-page .ck-navigation__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ck-page .ck-navigation--align-center .ck-navigation__list {
  justify-content: center;
}

.ck-page .ck-navigation--align-left .ck-navigation__list {
  justify-content: flex-start;
}

.ck-page .ck-navigation__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
}

.ck-page .ck-navigation__link {
  color: inherit;
  text-decoration: none;
  font-weight: var(--ck-fw-medium);
  line-height: 1.4;
  border-bottom: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.ck-page .ck-navigation__link:hover,
.ck-page .ck-navigation__link:focus,
.ck-page .ck-navigation__item.is-current .ck-navigation__link {
  color: var(--ck-primary-color);
  border-bottom-color: currentColor;
  outline: none;
}

.ck-page .ck-navigation__separator {
  color: var(--ck-text-muted);
  opacity: 0.75;
}

@media (max-width: 700px) {
  .ck-page .ck-navigation__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .ck-page .ck-navigation__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    align-self: flex-start;
    border: 1px solid var(--ck-border-color);
    border-radius: var(--ck-radius);
    background: var(--ck-bg-white);
    color: var(--ck-text);
    padding: 0.55rem 0.75rem;
    font: inherit;
    font-weight: var(--ck-fw-medium);
    cursor: pointer;
  }

  .ck-page .ck-navigation--align-center .ck-navigation__toggle {
    align-self: center;
  }

  .ck-page .ck-navigation__toggle-bars,
  .ck-page .ck-navigation__toggle-bars::before,
  .ck-page .ck-navigation__toggle-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
    content: "";
  }

  .ck-page .ck-navigation__toggle-bars {
    position: relative;
  }

  .ck-page .ck-navigation__toggle-bars::before,
  .ck-page .ck-navigation__toggle-bars::after {
    position: absolute;
    left: 0;
  }

  .ck-page .ck-navigation__toggle-bars::before { top: -6px; }
  .ck-page .ck-navigation__toggle-bars::after { top: 6px; }

  .ck-page .ck-navigation__list {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 0.7rem;
    padding: 0.5rem;
    border: 1px solid var(--ck-border-color);
    border-radius: var(--ck-radius);
    background: var(--ck-bg-white);
  }

  .ck-page .ck-navigation.is-open .ck-navigation__list {
    display: flex;
  }

  .ck-page .ck-navigation__item {
    display: block;
  }

  .ck-page .ck-navigation__link {
    display: block;
    padding: 0.65rem 0.75rem;
    border-bottom: 0;
    border-radius: calc(var(--ck-radius) * 0.75);
  }

  .ck-page .ck-navigation__link:hover,
  .ck-page .ck-navigation__link:focus,
  .ck-page .ck-navigation__item.is-current .ck-navigation__link {
    background: var(--ck-bg-tint);
    border-bottom-color: transparent;
  }

  .ck-page .ck-navigation__separator {
    display: none;
  }
}

/* ──────────────────────────────────────────────────────────────────
 * Hero header stack (external H1 + H2)
 *
 * Rendered above .ck-hero when the brand is set to "above-section"
 * AND/OR the heading H2 is set to "above-hero". The gap modifier
 * controls the tight visual spacing between the brand H1 and the
 * heading H2 (5px or 10px — both deliberately small so the two
 * read as one stacked header above the hero block).
 *
 * The stack has zero side padding so it inherits the page's flow
 * width — wrap it yourself if you need a max-width on it.
 * ────────────────────────────────────────────────────────────── */
.ck-page .ck-hero-header-stack {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

/* Reset h1/h2 default margin INSIDE the stack so the gap modifier is
 * the single source of truth. Without this, default browser h1/h2
 * margins would dwarf the 5/10px gap and the toggle would look broken. */
.ck-page .ck-hero-header-stack > h1,
.ck-page .ck-hero-header-stack > h2 {
  margin: 0;
}

/* Gap between brand H1 and heading H2 — only applies when BOTH
 * children are present. With one child only, this is a no-op. */
.ck-page .ck-hero-header-stack--gap-5 > * + * { margin-top: 5px; }
.ck-page .ck-hero-header-stack--gap-10 > * + * { margin-top: 10px; }

/* External H2 — when the heading sits OUTSIDE .ck-hero (above the
 * section), give it sensible defaults that don't rely on the dark
 * hero background. Keep the visual weight close to the in-wrapper
 * version so toggling position doesn't dramatically change the page.
 *
 * .ck-hero-heading is already styled by the in-wrapper rules above;
 * this block layers on the "external" modifier without fighting the
 * base size declaration. */
.ck-page .ck-hero-heading.ck-hero-heading--external,
.ck-page .ck-hero-heading--external {
  margin: 0;
  padding: 0.25rem 1rem 0.5rem;
  color: inherit;
  line-height: 1.2;
  /* Inherit the size variable. The font-size-* modifier (below)
   * still wins because it lands later in the cascade. */
}

/* ──────────────────────────────────────────────────────────────────
 * Font-size override modifiers
 *
 * Applied per-element on .ck-site-brand (brand H1) and
 * .ck-hero-heading (heading H2). The values use clamp() so they
 * scale on mobile without separate breakpoints. "default" emits
 * NO modifier — the inherited / global style wins.
 *
 * Brand and heading have separate ramps because the brand is
 * functionally a wordmark (smaller, lighter) while the heading is
 * the page topic line (larger, bolder).
 * ────────────────────────────────────────────────────────────── */

/* Brand H1 size overrides. */
.ck-page h1.ck-site-brand.ck-site-brand--font-size-small,
.ck-page .ck-site-brand.ck-site-brand--font-size-small   { font-size: clamp(0.85rem, 1.5vw, 1rem);    }
.ck-page h1.ck-site-brand.ck-site-brand--font-size-medium,
.ck-page .ck-site-brand.ck-site-brand--font-size-medium  { font-size: clamp(1rem, 2vw, 1.25rem);      }
.ck-page h1.ck-site-brand.ck-site-brand--font-size-large,
.ck-page .ck-site-brand.ck-site-brand--font-size-large   { font-size: clamp(1.25rem, 2.5vw, 1.65rem); }
.ck-page h1.ck-site-brand.ck-site-brand--font-size-xl,
.ck-page .ck-site-brand.ck-site-brand--font-size-xl      { font-size: clamp(1.5rem, 3vw, 2.25rem);    }

/* Heading H2 size overrides. We deliberately use higher selector
 * specificity (h2.ck-...) so these win over the legacy
 * `.ck-hero-heading { font-size: 2.25rem; }` declaration further
 * up the file without resorting to !important.
 *
 * Reference points:
 *   - Default (no modifier) is 2.25rem ≈ 36px (the existing rule above).
 *   - 'Small' is intentionally still heading-sized (24-30px) — not
 *     body-text size — so an H2 reads as an H2 in any picker state.
 *   - 'XL' is genuinely hero-large (44-60px) for landing pages.
 * The ramp progresses by ~1.25× between adjacent steps. clamp() lets
 * each step scale down on phones without separate breakpoints. */
.ck-page h2.ck-hero-heading.ck-hero-heading--font-size-small,
.ck-page .ck-hero-heading.ck-hero-heading--font-size-small  { font-size: clamp(1.5rem, 3vw, 1.85rem);   }
.ck-page h2.ck-hero-heading.ck-hero-heading--font-size-medium,
.ck-page .ck-hero-heading.ck-hero-heading--font-size-medium { font-size: clamp(1.85rem, 4vw, 2.35rem);  }
.ck-page h2.ck-hero-heading.ck-hero-heading--font-size-large,
.ck-page .ck-hero-heading.ck-hero-heading--font-size-large  { font-size: clamp(2.35rem, 5vw, 2.9rem);   }
.ck-page h2.ck-hero-heading.ck-hero-heading--font-size-xl,
.ck-page .ck-hero-heading.ck-hero-heading--font-size-xl     { font-size: clamp(2.85rem, 6vw, 3.75rem);  }

/* ──────────────────────────────────────────────────────────────────
 * Main content font-size overrides
 *
 * Modifier on .ck-main-content controls body paragraph size; H2 title
 * and description get a proportional bump so the three-element block
 * reads as one consistent ramp instead of body text + mismatched
 * title.
 * ────────────────────────────────────────────────────────────── */
.ck-page .ck-main-content--body-font-size-small  .ck-main-content__body p { font-size: clamp(0.9rem,  1.5vw, 1rem); }
.ck-page .ck-main-content--body-font-size-medium .ck-main-content__body p { font-size: clamp(1rem,    1.75vw, 1.125rem); }
.ck-page .ck-main-content--body-font-size-large  .ck-main-content__body p { font-size: clamp(1.05rem, 2vw, 1.25rem); }
.ck-page .ck-main-content--body-font-size-xl     .ck-main-content__body p { font-size: clamp(1.15rem, 2.25vw, 1.4rem); }

/* Main-content title (H2) — same ramp philosophy as the hero H2.
 * Slightly more compact than the hero because this is an inner-page
 * section H2, not a landing-page hero heading. */
.ck-page .ck-main-content--title-font-size-small  .ck-main-content__title { font-size: clamp(1.4rem,  2.5vw, 1.7rem);  }
.ck-page .ck-main-content--title-font-size-medium .ck-main-content__title { font-size: clamp(1.7rem,  3.25vw, 2.1rem); }
.ck-page .ck-main-content--title-font-size-large  .ck-main-content__title { font-size: clamp(2.1rem,  4vw, 2.6rem);    }
.ck-page .ck-main-content--title-font-size-xl     .ck-main-content__title { font-size: clamp(2.5rem,  5vw, 3.15rem);   }

/* ── Iframe Embed ──────────────────────────────────────
 *
 * Responsive embed wrapper. The aspect-ratio modifier on the section
 * root drives the frame's shape; for 'custom' the height is set
 * inline by the template and the named modifier becomes a no-op.
 *
 * The iframe is absolutely positioned so it fills the aspect box on
 * every browser. The wrapping <div> owns the dimensions — never the
 * iframe directly — so an iframe with a stale width/height attribute
 * (from a copy-pasted embed code) still scales correctly.
 * ────────────────────────────────────────────────────── */
.ck-page .ck-iframe-embed {
  padding: var(--ck-pad-normal, 2rem) var(--ck-pad-side, 1rem);
}

.ck-page .ck-iframe-embed__inner {
  width: 100%;
}

.ck-page .ck-iframe-embed__frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}

.ck-page .ck-iframe-embed__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Custom-height variant — wrapper height is set inline, iframe still
 * fills it. We don't need an aspect-ratio rule for this branch. */
.ck-page .ck-iframe-embed--ratio-16-9 .ck-iframe-embed__frame { aspect-ratio: 16 / 9; }
.ck-page .ck-iframe-embed--ratio-4-3  .ck-iframe-embed__frame { aspect-ratio: 4 / 3; }
.ck-page .ck-iframe-embed--ratio-1-1  .ck-iframe-embed__frame { aspect-ratio: 1 / 1; }
.ck-page .ck-iframe-embed--ratio-21-9 .ck-iframe-embed__frame { aspect-ratio: 21 / 9; }

.ck-page .ck-iframe-embed__caption {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ck-text-color, inherit);
  opacity: 0.8;
}

/* ── Hero slider shadow / frame variants ───────────────
 *
 * Applied via `ck-hero--slider-shadow-{variant}` on .ck-hero. The
 * shadow lives on the hero section itself (not the inner slider) so
 * it sits OUTSIDE the slider's overflow:hidden viewport and is
 * actually visible.
 *
 * For the TV variant we use the hero's padding+background as the
 * bezel, then absolutely re-inset the slider inside that padding so
 * it doesn't bleed through.
 *
 * Variants:
 *   none      — no shadow (default; modifier not emitted)
 *   soft      — subtle drop shadow
 *   lifted    — deeper drop shadow, more dramatic
 *   tv        — dark bezel + rounded corners + glass highlight
 *   polaroid  — white frame + offset drop shadow
 *   inset     — internal glow only, hero unchanged externally
 * ────────────────────────────────────────────────────── */
.ck-page .ck-hero--slider-shadow-soft {
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.25);
  border-radius: 6px;
}

.ck-page .ck-hero--slider-shadow-lifted {
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.45),
    0 10px 20px -10px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
}

/* TV — dark bezel around the slider. The .ck-hero owns the bezel
 * (padding + dark background + rounded corners + chunky shadow). The
 * slider is re-inset by --ck-tv-bezel so it sits INSIDE the bezel
 * with a slightly tighter radius (the "screen" inside the frame). */
.ck-page .ck-hero--slider-shadow-tv {
  --ck-tv-bezel: 14px;
  background-color: #0d0d0d;
  padding: var(--ck-tv-bezel);
  border-radius: 18px;
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.55),
    0 8px 20px -5px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.ck-page .ck-hero--slider-shadow-tv .ck-hero-slider {
  inset: var(--ck-tv-bezel);
  border-radius: 6px;
  overflow: hidden;
}
.ck-page .ck-hero--slider-shadow-tv .ck-hero-slider__viewport {
  border-radius: 6px;
}
/* Glass-screen highlight at the top of the slider — subtle reflective
 * sheen so the TV reads as a screen, not just a black box. */
.ck-page .ck-hero--slider-shadow-tv .ck-hero-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(0, 0, 0, 0) 70%,
    rgba(0, 0, 0, 0.15) 100%
  );
  z-index: 2;
  border-radius: 6px;
}

/* Polaroid — white frame with a chunky bottom edge. */
.ck-page .ck-hero--slider-shadow-polaroid {
  --ck-polaroid-frame: 12px;
  background-color: #fff;
  padding: var(--ck-polaroid-frame) var(--ck-polaroid-frame) calc(var(--ck-polaroid-frame) * 3);
  border-radius: 4px;
  box-shadow:
    0 20px 40px -15px rgba(0, 0, 0, 0.35),
    0 4px 10px -2px rgba(0, 0, 0, 0.18);
}
.ck-page .ck-hero--slider-shadow-polaroid .ck-hero-slider {
  inset: var(--ck-polaroid-frame) var(--ck-polaroid-frame) calc(var(--ck-polaroid-frame) * 3);
}

/* Inset — keeps the hero edge flush but adds a dark inner glow,
 * useful when the slider sits flush against a darker page bg. */
.ck-page .ck-hero--slider-shadow-inset .ck-hero-slider {
  box-shadow: inset 0 0 60px 10px rgba(0, 0, 0, 0.6);
}

/* ── Image (single or gallery) ─────────────────────────
 *
 * The grid uses CSS grid with a column-count modifier on the section
 * root. Mobile always collapses to 1 column for readability; the
 * picked column count only kicks in above 600px.
 *
 * Aspect ratios force a uniform shape across all images in the grid.
 * `natural` keeps each image's own ratio (handy for portrait/landscape
 * mixes) — in that mode the image takes 100% width and its height
 * floats.
 *
 * Caption overlay positions the figcaption inside the image bounds
 * (bottom strip) which only looks right with a forced aspect ratio
 * or fixed-height image — overlay + natural can look uneven on a
 * mixed grid; that's the editor's choice.
 * ────────────────────────────────────────────────────── */
.ck-page .ck-image {
  padding: var(--ck-pad-normal, 2rem) var(--ck-pad-side, 1rem);
}

.ck-page .ck-image__inner {
  width: 100%;
}

.ck-page .ck-image__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.ck-page .ck-image--gap-sm .ck-image__grid { gap: 8px; }
.ck-page .ck-image--gap-md .ck-image__grid { gap: 16px; }
.ck-page .ck-image--gap-lg .ck-image__grid { gap: 24px; }

@media (min-width: 600px) {
  .ck-page .ck-image--cols-2 .ck-image__grid { grid-template-columns: repeat(2, 1fr); }
  .ck-page .ck-image--cols-3 .ck-image__grid { grid-template-columns: repeat(3, 1fr); }
  .ck-page .ck-image--cols-4 .ck-image__grid { grid-template-columns: repeat(4, 1fr); }
}

/* Single-image alignment. The grid shrink-wraps to the image's
 * intrinsic width so margin: 0 auto / 0 0 / 0 auto 0 0 can move it.
 * Multi-column stays full-width. */
.ck-page .ck-image--cols-1 .ck-image__grid {
  max-width: max-content;
}
.ck-page .ck-image--cols-1.ck-image--align-left   .ck-image__grid { margin-left: 0;    margin-right: auto; }
.ck-page .ck-image--cols-1.ck-image--align-center .ck-image__grid { margin-left: auto; margin-right: auto; }
.ck-page .ck-image--cols-1.ck-image--align-right  .ck-image__grid { margin-left: auto; margin-right: 0;    }

.ck-page .ck-image__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-page .ck-image__figure {
  position: relative;
  margin: 0;
  padding: 0;
  display: block;
}

.ck-page .ck-image__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Forced aspect ratios — the image fills the box and crops as needed. */
.ck-page .ck-image:not(.ck-image--aspect-natural) .ck-image__figure {
  width: 100%;
  overflow: hidden;
  background: #f3f3f3;
}
.ck-page .ck-image--aspect-1-1  .ck-image__figure { aspect-ratio: 1 / 1; }
.ck-page .ck-image--aspect-16-9 .ck-image__figure { aspect-ratio: 16 / 9; }
.ck-page .ck-image--aspect-4-3  .ck-image__figure { aspect-ratio: 4 / 3; }
.ck-page .ck-image--aspect-3-2  .ck-image__figure { aspect-ratio: 3 / 2; }
.ck-page .ck-image:not(.ck-image--aspect-natural) .ck-image__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Corner radius. Applied to both the figure (so the overflow clips
 * the image) and the image (for the natural-ratio case where the
 * figure has no overflow:hidden). */
.ck-page .ck-image--radius-sm .ck-image__figure,
.ck-page .ck-image--radius-sm .ck-image__img    { border-radius: 4px; }
.ck-page .ck-image--radius-md .ck-image__figure,
.ck-page .ck-image--radius-md .ck-image__img    { border-radius: 10px; }
.ck-page .ck-image--radius-lg .ck-image__figure,
.ck-page .ck-image--radius-lg .ck-image__img    { border-radius: 20px; }

.ck-page .ck-image__caption {
  display: block;
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  font-style: italic;
  text-align: center;
  color: var(--ck-text-color, inherit);
  opacity: 0.8;
}

/* Overlay caption — pinned to the bottom of the image with a
 * gradient scrim so text stays readable against any photo. */
.ck-page .ck-image--cap-overlay .ck-image__figure { overflow: hidden; }
.ck-page .ck-image--cap-overlay .ck-image__caption {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 1.25rem 1rem 0.75rem;
  text-align: left;
  font-style: normal;
  color: #fff;
  opacity: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
}

.ck-page .ck-image__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.ck-page .ck-image__link:hover .ck-image__img { opacity: 0.92; }

/* ── Footer (copyright) ────────────────────────────────
 *
 * Variables let the editor's color picker plug into the cascade
 * without an inline `color:` per element. Each var has a sensible
 * fallback so an unset value just inherits from the page.
 *
 * Font-size modifier uses the same vocabulary as the other section
 * font-size pickers so editors don't have to learn a new scale.
 * ────────────────────────────────────────────────────── */
.ck-page .ck-footer {
  padding: var(--ck-pad-normal, 2rem) var(--ck-pad-side, 1rem);
  color: var(--ck-footer-color, inherit);
}

.ck-page .ck-footer__inner {
  width: 100%;
}

.ck-page .ck-footer__text {
  margin: 0;
  line-height: 1.55;
}

.ck-page .ck-footer__text a {
  color: var(--ck-footer-link, inherit);
  text-decoration: underline;
}

.ck-page .ck-footer--align-left   .ck-footer__text { text-align: left;   }
.ck-page .ck-footer--align-center .ck-footer__text { text-align: center; }
.ck-page .ck-footer--align-right  .ck-footer__text { text-align: right;  }

.ck-page .ck-footer--size-small  .ck-footer__text { font-size: 0.8rem;  }
.ck-page .ck-footer--size-medium .ck-footer__text { font-size: 1.05rem; }
.ck-page .ck-footer--size-large  .ck-footer__text { font-size: 1.2rem;  }

/* Divider line above the footer text. Padding adds the breathing
 * room so the line doesn't crash into the previous section's
 * content. The divider colour falls back to a neutral light grey. */
.ck-page .ck-footer--has-divider .ck-footer__inner {
  border-top: 1px solid var(--ck-footer-divider, rgba(0, 0, 0, 0.12));
  padding-top: 1.25rem;
}