/** Shopify CDN: Minification failed

Line 720:2 Unexpected "}"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:contact-form (INDEX:18) */
/* Heading tag + size are merchant settings. tw:text-h* can't drive the size
     (the base theme styles h1-h6 in unlayered CSS, beating layered tw:
     utilities), so font-size is set inline from the heading_size token. This
     class re-asserts the size-independent heading bits for any h1-h6 tag. */
  .section-contact-form__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    margin: 0;
  }

  /* Kicker / description — re-assert size + line-height + margin class-qualified
     to beat the base theme's unlayered p { ... } rule. */
  .section-contact-form__kicker {
    font-size: var(--kik-text-size-body-sm);
    line-height: var(--kik-line-height-body);
    margin: 0;
  }
  .section-contact-form__description {
    font-size: var(--kik-text-size-body-lg);
    line-height: var(--kik-line-height-body);
    margin: 0;
  }
/* END_SECTION:contact-form */

/* START_SECTION:kik-award (INDEX:45) */
/* ── Heading ─────────────────────────────────────────────
     Base theme styles h1-h6 in unlayered CSS (beats tw: utilities) —
     re-assert class-qualified. Size comes from the inline heading_size token. */
  .section-kik-award__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    margin: 0;
  }

  /* ── Award-seal row ──────────────────────────────────────
     Padding + gap set here (not tw: utilities): the px-lg/py-xl utilities
     aren't pre-built in kik-theme.css, and the 24px row gap is fixed on both
     breakpoints. Seals keep their intrinsic aspect, capped by height:
     80 (mobile) → 129 (desktop). */
  .section-kik-award__badges {
    padding-inline: var(--kik-spacing-lg);
    padding-block: 20px;
  }
  .section-kik-award__badge-row {
    gap: var(--kik-spacing-24);
  }
  /* Stack the optional caption under the seal, centered. */
  .section-kik-award__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kik-spacing-8);
  }
  .section-kik-award__badge-img {
    display: block;
    width: auto;
    height: 80px;
    object-fit: contain;
  }
  /* Optional per-item caption (award seals + press logos). */
  .section-kik-award__caption {
    font-size: var(--kik-text-size-body-sm);
    font-weight: var(--kik-font-weight-regular);
    line-height: var(--kik-line-height-body);
    color: rgb(var(--kik-color-text-primary));
    text-align: center;
    margin: 0;
  }

  /* ── Quote card ──────────────────────────────────────────
     One-off shadow (no shadow token in kik-global-variables). */
  .section-kik-award__card {
    padding: var(--kik-spacing-xl);
    overflow: clip;
    box-shadow: 4px 4px 50px rgba(0, 0, 0, 0.06);
  }

  /* Quote stack — every logo's quote lives in the SAME grid cell, so the card
     always reserves the tallest quote's height and switching quotes causes no
     layout shift. Only the active quote is visible; the rest fade to 0. */
  .section-kik-award__quotes {
    display: grid;
  }
  /* Quote — base theme styles <p> (line-height) in unlayered CSS; re-assert.
     Colour #333 is the Figma "Dark" value, which has no --kik-color-* token. */
  .section-kik-award__quote {
    grid-area: 1 / 1;
    font-size: var(--kik-text-size-body-lg);
    line-height: var(--kik-line-height-body);
    color: #333;
    margin: 0;
    white-space: pre-line; /* preserve authored line breaks */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .section-kik-award__quote.is-active {
    opacity: 1;
  }

  /* ── Press-logo strip ────────────────────────────────────
     Mobile: a 3-up <kik-swiper> carousel (swipe only).
     Desktop (≥750): Swiper disabled — a static space-between row. Logos keep
     intrinsic aspect, capped by height 30 (mobile) → 40 (desktop); each logo
     sits in a container 60 (mobile) → 70 (desktop) tall. */
  .section-kik-award__logos {
    display: block;
    width: 100%;
  }
  .section-kik-award__logos-track {
    width: 100%;
  }
  .section-kik-award__logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--kik-spacing-8);
    height: auto;
    min-height: 60px;
  }
  .section-kik-award__logo-img {
    display: block;
    width: auto;
    height: 30px;
    object-fit: contain;
  }
  /* Logos carrying a quote are selectable — click to swap the card quote.
     Dimmed until active/hovered, so the active logo signals which quote shows. */
  .section-kik-award__logo[data-kik-award-logo] {
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.2s ease;
  }
  .section-kik-award__logo[data-kik-award-logo]:hover,
  .section-kik-award__logo[data-kik-award-logo].is-active {
    opacity: 1;
  }
  .section-kik-award__logo[data-kik-award-logo]:focus-visible {
    opacity: 1;
    outline: 2px solid rgb(var(--kik-color-text-primary));
    outline-offset: 4px;
  }

  @media screen and (min-width: 750px) {
    .section-kik-award__badges {
      padding-block: var(--kik-spacing-xl);
    }
    .section-kik-award__badge-img {
      height: 129px;
    }
    .section-kik-award__logo-img {
      height: 40px;
    }
    /* Desktop — Swiper is disabled at this breakpoint; force the static
       space-between row back (override Swiper's flex track + inline transform). */
    .section-kik-award__logos-track {
      overflow: visible;
    }
    .section-kik-award__logos-track .swiper-wrapper {
      display: flex !important;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--kik-spacing-xl);
      transform: none !important;
    }
    .section-kik-award__logos-track .swiper-slide {
      width: auto !important;
      min-height: 70px;
    }
  }
/* END_SECTION:kik-award */

/* START_SECTION:kik-blog-post-list (INDEX:46) */
/* Class-qualified, unlayered — beats the base theme's bare h1-h6 / p rules
     (which are unlayered too, so layered tw: utilities can't win). See
     docs/kik-guide/section-structure.md cascade note. */
  .section-kik-blog-post-list__kicker {
    font-size: var(--kik-text-size-body-sm);
    line-height: var(--kik-line-height-body);
    margin: 0;
  }
  .section-kik-blog-post-list__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    margin: 0;
  }
  .section-kik-blog-post-list__description {
    font-size: var(--kik-text-size-body-lg);
    line-height: var(--kik-line-height-body);
  }
  .section-kik-blog-post-list__description > :first-child { margin-top: 0; }
  .section-kik-blog-post-list__description > :last-child  { margin-bottom: 0; }

  /* "View all" carousel-slide tile — matches the original card frame so the
     last item visually balances the article cards next to it. */
  .section-kik-blog-post-list__last-item {
    border: 1px solid rgb(var(--kik-color-border-subtle));
  }
/* END_SECTION:kik-blog-post-list */

/* START_SECTION:kik-brand-product-range (INDEX:47) */
/* ── Inner column — header above the cards grid (32px both breakpoints) ─── */
  .section-kik-brand-product-range__inner {
    display: flex;
    flex-direction: column;
    gap: var(--kik-spacing-32);
    width: 100%;
  }
  .section-kik-brand-product-range__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kik-spacing-md);
    width: 100%;
  }

  /* ── Typography re-assertions (base theme styles h1-h6 / p / li unlayered) ─
     The header trio sits on the recolorable section background, so its colour
     follows the color scheme (--color-normal-text) instead of a fixed token —
     stays legible on dark schemes. Card text keeps its fixed dark colour
     because the cards are always white. */
  .section-kik-brand-product-range__kicker {
    font-size: var(--kik-text-size-body-sm);
    line-height: var(--kik-line-height-body);
    color: rgba(var(--color-normal-text-rgb), 0.7);
    margin: 0;
  }
  .section-kik-brand-product-range__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    color: var(--color-normal-text);
    margin: 0;
  }
  .section-kik-brand-product-range__description {
    font-size: var(--kik-text-size-body-lg);
    line-height: var(--kik-line-height-body);
    color: rgba(var(--color-normal-text-rgb), 0.7);
    margin: 0;
  }

  /* ── Cards grid ─────────────────────────────────────────────────────────
     Mobile: one column. Tablet/laptop: 2-up. Wide desktop (≥1300): 4-up. Grid
     stretch gives every card in a row equal height with NO fixed heights.
     4-up only engages at 1300 — below that the columns are too narrow, the
     accessory card's wrapped bullets balloon its height, and the equal-height
     grid leaves large empty space under the brand cards. The 2-up layout keeps
     cards wide enough to stay balanced through that range. */
  .section-kik-brand-product-range__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--kik-spacing-16);
    width: 100%;
  }
  @media screen and (min-width: 750px) {
    .section-kik-brand-product-range__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media screen and (min-width: 1300px) {
    .section-kik-brand-product-range__grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* ── Card shell (shared by brand + accessory) ──────────────────────────── */
  .section-kik-brand-product-range__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: rgb(var(--kik-color-bg-page));
    border-radius: var(--kik-radius-md);
    overflow: clip;
    text-decoration: none;
    color: inherit;
  }

  /* ── Card header band ──────────────────────────────────────────────────── */
  .section-kik-brand-product-range__card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--kik-spacing-4);
    padding: var(--kik-spacing-8);
    width: 100%;
  }
  @media screen and (min-width: 750px) {
    .section-kik-brand-product-range__card-header {
      min-height: 80px; /* Figma fixes the band at 80px; min-height lets a long tagline grow it */
      padding-block: var(--kik-spacing-12);
      padding-inline: var(--kik-spacing-16);
    }
  }
  .section-kik-brand-product-range__brand-logo {
    height: 28px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
  .section-kik-brand-product-range__brand-logo-text {
    font-size: var(--kik-text-size-h6);
    line-height: var(--kik-line-height-heading);
    margin: 0;
  }
  .section-kik-brand-product-range__brand-tagline,
  .section-kik-brand-product-range__accessory-subtitle {
    font-size: var(--kik-text-size-body-sm);
    line-height: var(--kik-line-height-body);
    margin: 0;
  }
  .section-kik-brand-product-range__accessory-title {
    font-size: var(--kik-text-size-h6);
    line-height: var(--kik-line-height-heading);
    margin: 0;
  }

  /* ── Brand card media ───────────────────────────────────────────────────
     Fixed image height per the Figma spec — mobile 191px, desktop 243px (NOT
     an aspect ratio, which let the height track the card width and drift off
     the spec). Grid stretch still equalises the card boxes; the slack falls
     below the body, never into the image. */
  .section-kik-brand-product-range__media {
    position: relative;
    width: 100%;
    height: 191px;
    flex: 0 0 auto;
    overflow: hidden;
  }
  @media screen and (min-width: 750px) {
    .section-kik-brand-product-range__media {
      height: 243px;
    }
  }
  .section-kik-brand-product-range__media img,
  .section-kik-brand-product-range__media .section-kik-brand-product-range__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ── Brand card body ───────────────────────────────────────────────────── */
  .section-kik-brand-product-range__brand-body {
    display: flex;
    flex-direction: column;
    gap: var(--kik-spacing-8);
    padding: var(--kik-spacing-md);
    width: 100%;
  }
  @media screen and (min-width: 750px) {
    .section-kik-brand-product-range__brand-body {
      gap: var(--kik-spacing-16);
    }
  }
  .section-kik-brand-product-range__brand-description {
    font-size: var(--kik-text-size-body-sm);
    line-height: var(--kik-line-height-body);
    margin: 0;
  }
  .section-kik-brand-product-range__features {
    display: flex;
    flex-direction: column;
    gap: var(--kik-spacing-sm);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .section-kik-brand-product-range__feature {
    display: flex;
    align-items: center;
    gap: var(--kik-spacing-8);
  }
  .section-kik-brand-product-range__check {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: rgb(var(--kik-color-text-primary));
  }
  @media screen and (min-width: 750px) {
    .section-kik-brand-product-range__check {
      width: 20px;
      height: 20px;
    }
  }
  .section-kik-brand-product-range__feature-label {
    font-size: var(--kik-text-size-body-sm);
    line-height: var(--kik-line-height-body);
    margin: 0;
  }

  /* ── Accessory card rows ───────────────────────────────────────────────── */
  .section-kik-brand-product-range__rows {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .section-kik-brand-product-range__row {
    display: flex;
    align-items: center;
    gap: var(--kik-spacing-md);
    padding: var(--kik-spacing-md);
    width: 100%;
    text-decoration: none;
    color: inherit;
  }
  .section-kik-brand-product-range__row:not(:last-child) {
    border-block-end: 1px solid rgb(var(--kik-color-border-subtle));
  }
  .section-kik-brand-product-range__thumb {
    flex: 0 0 100px;
    width: 100px;
    height: 100px;
    border-radius: var(--kik-radius-8);
    overflow: hidden;
  }
  .section-kik-brand-product-range__thumb img,
  .section-kik-brand-product-range__thumb .section-kik-brand-product-range__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .section-kik-brand-product-range__row-text {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: var(--kik-spacing-4);
  }
  .section-kik-brand-product-range__row-title {
    /* Fixed 18px on all breakpoints per Figma — does NOT follow the body-lg
       16→18 flip, so a literal value rather than a --kik token. */
    font-size: 18px;
    line-height: var(--kik-line-height-body);
    margin: 0;
  }
  .section-kik-brand-product-range__row-items {
    display: flex;
    flex-direction: column;
    gap: var(--kik-spacing-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .section-kik-brand-product-range__row-item {
    display: flex;
    align-items: center;
    gap: var(--kik-spacing-8);
    padding-inline-start: var(--kik-spacing-8);
    font-size: var(--kik-text-size-body-sm);
    line-height: var(--kik-line-height-body);
    margin: 0;
  }
  /* Custom bullet — a small (3px), vertically centered dot to match Figma's
     marker. The browser's default disc is larger and baseline-aligned, so
     list-style:none + this flex-centered dot is used instead. */
  .section-kik-brand-product-range__row-item::before {
    content: '';
    flex: 0 0 auto;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: currentColor;
  }
/* END_SECTION:kik-brand-product-range */

/* START_SECTION:kik-brand-statement-banner (INDEX:48) */
.section-kik-brand-statement-banner__banner {
    /* Fallback when no media is set, and a dark base so white text stays legible. */
    background-color: rgb(var(--kik-color-bg-inverse));
  }

  /* ── Media + overlay ─────────────────────────────── */
  .section-kik-brand-statement-banner__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .section-kik-brand-statement-banner__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .section-kik-brand-statement-banner__media-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Video desktop/mobile toggle (images use <picture>, so no toggle needed). */
  .section-kik-brand-statement-banner__media--mobile {
    display: none;
  }
  @media screen and (max-width: 749px) {
    .section-kik-brand-statement-banner__media--mobile {
      display: block;
    }
    .section-kik-brand-statement-banner__media--desktop.section-kik-brand-statement-banner__media--has-mobile {
      display: none;
    }
  }

  /* ── Anchored content groups ─────────────────────── */
  .section-kik-brand-statement-banner__top,
  .section-kik-brand-statement-banner__bottom {
    position: absolute;
    inset-inline: 0;
    z-index: 2;
  }
  .section-kik-brand-statement-banner__top {
    inset-block-start: 0;
  }
  .section-kik-brand-statement-banner__bottom {
    inset-block-end: 0;
  }

  /* ── Heading ─────────────────────────────────────── */
  /* heading_size drives font-size inline (base theme styles h1-h6 unlayered,
     beating any `tw:text-h*`); re-assert the size-independent bits + white. */
  .section-kik-brand-statement-banner__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    color: rgb(var(--kik-color-text-inverse));
    margin: 0;
  }

  /* ── Cards — <kik-swiper> mobile carousel / static desktop row ──
     Mobile: slidesPerView 'auto' reads the slide width from CSS (300px) so
     a sliver of the next card peeks. Desktop: the 750 breakpoint sets
     slidesPerView to the card count, so Swiper writes equal inline widths
     and the row is effectively static (nothing left to slide). */
  .section-kik-brand-statement-banner__slider {
    display: block;
    width: 100%;
  }
  @media screen and (max-width: 749px) {
    /* Full-bleed-right carousel — anchor the slider to the content's left
       gutter (align-self overrides the parent's center) and extend its width by
       one inline gutter so the right edge meets the screen edge and the peek of
       the next card bleeds off-screen. The banner's overflow:hidden clips there.
       Heading + CTA stay centred within .kik-content-container. The var mirrors
       the container's gutter floor (custom/sm/lg set it; otherwise 16px). */
    .section-kik-brand-statement-banner__slider {
      align-self: flex-start;
      width: calc(100% + var(--section-kik-padding-inline, 16px));
    }
    .section-kik-brand-statement-banner__slider .swiper-slide {
      width: 300px;
    }
  }

  /* Single card (no Swiper) — centred, capped so it doesn't stretch wide. */
  .section-kik-brand-statement-banner__cards--single {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .section-kik-brand-statement-banner__cards--single .section-kik-brand-statement-banner__card {
    width: 100%;
    max-width: 360px;
  }

  /* ── Card — frosted glass ────────────────────────── */
  .section-kik-brand-statement-banner__card {
    box-sizing: border-box;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--kik-spacing-12);
    padding-inline: var(--kik-spacing-24);
    padding-block: var(--kik-spacing-32);
    border-radius: var(--kik-radius-md);
    background-color: rgba(var(--kik-color-text-inverse), 0.2);
    border: 1px solid rgba(var(--kik-color-text-inverse), 0.2);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
  }
  /* Slightly more opaque fill where backdrop-blur is unsupported. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .section-kik-brand-statement-banner__card {
      background-color: rgba(var(--kik-color-text-inverse), 0.28);
    }
  }

  /* Card title — H6, semibold, white. Mobile line-height 1.4 (no token); the
     responsive `--kik-line-height-heading` (1.2) takes over from 750px. */
  .section-kik-brand-statement-banner__card-title {
    font-family: var(--kik-text-font-heading);
    font-size: var(--kik-text-size-h6);
    font-weight: var(--kik-font-weight-semibold);
    line-height: 1.4;
    color: rgb(var(--kik-color-text-inverse));
    margin: 0;
  }
  /* Card body — body-md, regular, white. */
  .section-kik-brand-statement-banner__card-body {
    font-family: var(--kik-text-font-body);
    font-size: var(--kik-text-size-body-md);
    font-weight: var(--kik-font-weight-regular);
    line-height: var(--kik-line-height-body);
    color: rgb(var(--kik-color-text-inverse));
    margin: 0;
  }

  @media screen and (min-width: 750px) {
    .section-kik-brand-statement-banner__card-title {
      line-height: var(--kik-line-height-heading);
    }
  }
/* END_SECTION:kik-brand-statement-banner */

/* START_SECTION:kik-brand-values (INDEX:49) */
/* ── Layout ─────────────────────────────────────────────
     Mobile: a single column — text block above the cards.
     Desktop (≥750px): two columns — text left (prefers 732px, shrinks on
     narrow desktop), cards fill the remaining width. */
  .section-kik-brand-values__layout {
    display: flex;
    flex-direction: column;
    gap: var(--kik-spacing-xl);
    width: 100%;
  }
  .section-kik-brand-values__text {
    display: flex;
    flex-direction: column;
    gap: var(--kik-spacing-4);
  }

  /* ── Typography re-assertions ───────────────────────────
     Base theme styles h1-h6 / p in unlayered CSS, beating layered tw: utilities
     — re-assert class-qualified (unlayered, wins). Heading size comes from the
     inline heading_size token on the element. */
  .section-kik-brand-values__kicker {
    font-size: var(--kik-text-size-body-sm);
    line-height: var(--kik-line-height-body);
    margin: 0;
  }
  .section-kik-brand-values__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    margin: 0;
  }
  .section-kik-brand-values__description {
    font-size: var(--kik-text-size-body-lg);
    line-height: var(--kik-line-height-body);
    margin: 0;
  }

  /* ── Cards ──────────────────────────────────────────────
     Two stacked rows (16 between them). Each row is a flex row whose cards
     stretch to fill; the in-row gap steps up 12 → 16 on desktop. */
  .section-kik-brand-values__cards {
    display: flex;
    flex-direction: column;
    gap: var(--kik-spacing-16);
    width: 100%;
  }
  .section-kik-brand-values__row {
    display: flex;
    gap: var(--kik-spacing-md);
    width: 100%;
  }
  .section-kik-brand-values__card {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: var(--kik-spacing-4);
    padding: var(--kik-spacing-lg);
    border-radius: var(--kik-radius-md);
    background-color: rgb(var(--kik-color-bg-surface));
  }
  .section-kik-brand-values__card-value {
    font-size: var(--kik-text-size-h3);
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    margin: 0;
    /* Reserve one line of height up front. <kik-countto> renders empty until the
       deferred component JS upgrades it, which collapses this <p> to 0px and shifts
       the layout (CLS) when the number paints. 1lh = this element's own line-height,
       so the box holds its final height from first paint at both breakpoints. */
    min-height: 1lh;
  }
  .section-kik-brand-values__card-label {
    font-size: var(--kik-text-size-body-md);
    line-height: var(--kik-line-height-body);
    margin: 0;
  }

  /* Two-column only kicks in once the fixed 732px text column and the 5 cards
     both fit (~1240px+). Below that the section stays stacked — full-width text
     above the full-width 2 + 3 card rows — so the cards never get crushed.
     (Desktop type sizes are token-driven and still flip at 750px independently.) */

    @media screen and (max-width: 1240px) {
    .section-kik-brand-values__row, .section-kik-brand-values__cards{
    gap:8px;
    }
      .section-kik-brand-values__card{
        padding: 10px;
      }
    .section-kik-brand-values__card-label{
    font-size: var(--kik-text-size-body-sm);
    }
    }
  }
/* END_SECTION:kik-brand-values */

/* START_SECTION:kik-capabilities (INDEX:50) */
.section-kik-caps {
    --ink: #0a0a0a;
    --muted: #5a5a5a;
    --line: #e6e6e6;
    --tint: #f6f6f6;
    --r: 14px;
    color: var(--ink);
    padding: var(--sec-pt-m, 64px) 0 var(--sec-pb-m, 64px);
  }
  .section-kik-caps--bg-tint { background: var(--tint); }
  @media screen and (min-width: 750px) {
    .section-kik-caps { padding: var(--sec-pt-d, 80px) 0 var(--sec-pb-d, 80px); }
  }

  .section-kik-caps__shell { width: min(100% - 2.5rem, 1120px); margin-inline: auto; }

  .section-kik-caps__head { text-align: center; max-width: 680px; margin: 0 auto 2.75rem; }
  .section-kik-caps__heading {
    margin: 0;
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 600;
  }
  .section-kik-caps__sub { margin: 0.9rem 0 0; color: var(--muted); font-size: 1.02rem; line-height: 1.55; }

  .section-kik-caps__grid {
    display: grid;
    grid-template-columns: repeat(var(--ac-cols, 5), 1fr);
    gap: 1rem;
  }

  .section-kik-caps__img {
    aspect-ratio: 4 / 3;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--tint);
  }
  .section-kik-caps__img img,
  .section-kik-caps__img .section-kik-caps__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .section-kik-caps__title { margin: 0.85rem 0 0.3rem; font-size: 1rem; font-weight: 600; line-height: 1.3; }
  .section-kik-caps__text { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

  @media (max-width: 1024px) {
    .section-kik-caps__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 768px) {
    .section-kik-caps__grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:kik-capabilities */

/* START_SECTION:kik-carousel (INDEX:51) */
/* The base theme styles <p> and <h1>–<h6> in UNLAYERED CSS, which beats any
     layered tw: text utility — so each text role is re-asserted here,
     class-qualified (also unlayered, higher specificity), to win the cascade.

     Text COLOUR follows the active color scheme: the section deliberately omits
     the fixed `tw:text-text-*` utilities and instead consumes the scheme's
     --color-normal-text (set by the `color-{scheme}` wrapper). This keeps the
     copy legible on the store's dark schemes (scheme-2 / scheme-5). Secondary
     roles use the same colour at 0.7 alpha — on the default light scheme that
     resolves to ~#4d4d4d, matching --kik-color-text-secondary. */
  .section-kik-carousel__kicker {
    font-size: var(--kik-text-size-body-sm);
    line-height: var(--kik-line-height-body);
    color: rgba(var(--color-normal-text-rgb), 0.7);
    margin: 0;
  }
  .section-kik-carousel__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    color: rgb(var(--color-normal-text));
    margin: 0;
  }
  .section-kik-carousel__description {
    font-size: var(--kik-text-size-body-lg);
    line-height: var(--kik-line-height-body);
    color: rgba(var(--color-normal-text-rgb), 0.7);
    margin: 0;
  }

  /* Card title — a FIXED <h3>, so its size lives in this class-qualified rule
     (no inline style needed, unlike the section heading whose tag is dynamic). */
  .section-kik-carousel__card-title {
    font-size: var(--kik-text-size-h6);
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    color: rgb(var(--color-normal-text));
    margin: 0;
  }
  .section-kik-carousel__card-text {
    font-size: var(--kik-text-size-body-md);
    line-height: var(--kik-line-height-body);
    color: rgba(var(--color-normal-text-rgb), 0.7);
    margin: 0;
  }

  /* Card image — fixed 4:3 ratio, cover-cropped, rounded. */
  .section-kik-carousel__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--kik-radius-lg);
  }

  /* Equal-height cards: clear Swiper's `.swiper-slide { height: 100% }` so the
     wrapper's stretch makes all cards the tallest card's height (mt-auto then
     bottom-aligns the button). Scoped under the slider to out-specify Swiper. */
  .section-kik-carousel__slider .swiper-slide {
    height: auto;
  }

  /* Swiper theming — drive the bundled Navigation + Pagination modules through
     Swiper's own CSS variables (kik-swiper.css is loaded globally in head). */
  .section-kik-carousel__slider {
    --swiper-theme-color: rgb(var(--color-normal-text));
    --swiper-pagination-bullet-size: 8px;
    --swiper-pagination-bullet-horizontal-gap: 4px;
  }

  /* Pagination flows BELOW the cards (static) instead of overlaying them. */
  .section-kik-carousel__slider .swiper-pagination {
    position: static;
    margin-top: var(--kik-spacing-lg);
  }
  .section-kik-carousel__slider .swiper-pagination-bullet {
    background-color: rgb(var(--color-normal-text));
    opacity: 0.3;
    transition: opacity 0.3s ease;
  }
  .section-kik-carousel__slider .swiper-pagination-bullet-active {
    opacity: 1;
  }

  /* Navigation arrows — give Swiper's default buttons a surface that tracks the
     scheme (border + glyph follow the text colour; fill is the scheme bg) so they
     stay visible on light and dark schemes. Hidden on mobile where swiping is the
     natural gesture. Scoped under the slider to out-specify Swiper's own rules. */
  .section-kik-carousel__slider .swiper-button-prev,
  .section-kik-carousel__slider .swiper-button-next {
    width: 40px;
    height: 40px;
    margin-top: 0;
    transform: translateY(-50%);
    background-color: var(--color-background);
    border: 1px solid rgba(var(--color-normal-text-rgb), 0.2);
    border-radius: var(--kik-radius-pill);
    display: none;
  }
  .section-kik-carousel__slider .swiper-button-prev::after,
  .section-kik-carousel__slider .swiper-button-next::after {
    font-size: 16px;
  }
  @media screen and (min-width: 750px) {
    .section-kik-carousel__slider .swiper-button-prev,
    .section-kik-carousel__slider .swiper-button-next {
      display: flex;
    }
  }
/* END_SECTION:kik-carousel */

/* START_SECTION:kik-certification-timeline (INDEX:52) */
/* ══════════════════════════════════════════════════════════
 *  section-kik-certificate
 * ══════════════════════════════════════════════════════════ */

/* ── Two-column layout ─────────────────────────────────── */
.kik-cert__layout {
  display: flex;
  flex-direction: column;
  gap: var(--kik-spacing-24);
}

@media screen and (min-width: 750px) {
  .kik-cert__layout {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--kik-spacing-2xl);
  }
}

/* ── Left column ───────────────────────────────────────── */
.kik-cert__left {
  flex: 0 0 auto;
  width: 100%;
}

@media screen and (min-width: 750px) {
  .kik-cert__left {
    width: 394px;
  }
}

.kik-cert__heading {
  margin: 0 0 var(--kik-spacing-xl);
  line-height: var(--kik-line-height-heading);
}

/* ── Vertical dot nav ──────────────────────────────────── */
.kik-cert__nav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Vertical track line — JS sets top + height */
.kik-cert__nav-line {
  position: absolute;
  left: 5px; /* centre of 10px dot */
  top: 0;
  width: 2px;
  height: 100%;
  background-color: rgb(var(--kik-color-border-subtle, 220 220 220));
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-50%);
}

.kik-cert__nav-fill {
  display: block;
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 0%;
  background-color: rgb(var(--kik-color-text-primary, 20 20 20));
  transition: height 0.4s ease;
}
.kik-cert__nav-stop.is-passed .kik-cert__nav-fill {
  height:100%;
}
/* Each stop */
.kik-cert__nav-stop {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--kik-spacing-2xl);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  position: relative;
}

/* Dot */
.kik-cert__nav-dot {
  flex-shrink: 0;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgb(var(--kik-color-border-subtle, 220 220 220));
  transition: background-color 0.2s ease, transform 0.2s ease;
  position: relative;
  z-index: 1;
}

/* Meta — year + title + body */
.kik-cert__nav-meta {
  display: flex;
  flex-direction: column;
  gap: var(--kik-spacing-12);
  padding-bottom: var(--kik-spacing-md);
}

.kik-cert__nav-year {
  font-size: var(--kik-text-size-body-xsm);
  color: rgb(var(--kik-color-text-secondary));
  line-height: var(--kik-line-height-body);
}

.kik-cert__nav-title {
  font-size: var(--kik-text-size-h6);
  font-weight: var(--font-heading-weight);
  line-height: var(--kik-line-height-heading);
}

.kik-cert__nav-body {
  margin: 0;
  font-size: var(--kik-text-size-body-sm);
  line-height: var(--kik-line-height-body);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.35s ease;
}

/* ── Active + passed states ────────────────────────────── */
.kik-cert__nav-stop.is-active .kik-cert__nav-dot,
.kik-cert__nav-stop.is-passed .kik-cert__nav-dot {
  background-color: rgb(var(--kik-color-text-primary, 20 20 20));
}


.kik-cert__nav-stop.is-active .kik-cert__nav-title {
  color: rgb(var(--kik-color-text-primary));
}

/* Reveal body text only on active */
.kik-cert__nav-stop.is-active .kik-cert__nav-body {
  max-height: 200px;
  opacity: 1;
}
/* ── Right column ──────────────────────────────────────── */
.kik-cert__right {
  flex: 1 1 auto;
  min-width: 0;
}

.kik-cert__carousel,
.kik-cert__swiper {
  width: 100%;
  height: 100%;
}

.kik-cert__slide {
  display: flex;
  flex-direction: column;
  gap: var(--kik-spacing-lg);
}

/* ── Award card ────────────────────────────────────────── */
.kik-cert__award {
  display: flex;
  align-items: center;
  gap: var(--kik-spacing-lg);
  background-color: rgb(var(--kik-color-bg-alt-1, 245 245 245));
  border-radius: var(--kik-radius-md);
  padding: var(--kik-spacing-lg);
  max-width: 828px;
    margin: 0 auto;
    width: 100%;
}

.kik-cert__award-img-wrap {
  flex-shrink: 0;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kik-cert__award-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kik-cert__award-title {
  font-size: var(--kik-text-size-h4);
  line-height: var(--kik-line-height-heading);
  color: #333333;
  font-weight: var(--font-heading-weight);
}

/* ── Certificates row ──────────────────────────────────── */
.kik-cert__certs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--kik-spacing-xl);
  overflow-x: auto;
  padding-bottom: var(--kik-spacing-sm); /* room for scrollbar */
  scrollbar-width: thin;
}

.kik-cert__cert-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kik-spacing-md);
  width: 140px;
}

.kik-cert__cert-img-wrap {
  width: 100%;
  height:140px;
  overflow: hidden;
}

.kik-cert__cert-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kik-cert__cert-img--ph {
  object-fit: contain;
}

.kik-cert__cert-label {
  font-size: var(--kik-text-size-body-md);
  text-align: center;
  line-height: var(--kik-line-height-body);
}
  .kik-cert__cert-item {
    width: 81px;
  }
    .kik-cert__cert-item.double {
    width: 180px;
  }
@media screen and (min-width: 750px) {
  .kik-cert__cert-item {
    width: 145px;
  }
    .kik-cert__cert-item.double {
    width: 264px;
  }
  .kik-cert__cert-img-wrap {
    height: 204px;
}
}
@media screen and (max-width: 749px) {
  .kik-cert__heading {
   text-align:center;
}
.kik-cert__layout {
    margin-right: -16px;
}
.kik-cert__nav {
    flex-direction: row;
}
.kik-cert__award-title {
    font-size: var(--kik-text-size-h5);
}
.kik-cert__nav-title {
    font-size: var(--kik-text-size-h5);
   text-transform:uppercase;
}
.kik-cert__nav-stop {
    flex-direction: column;
    gap: var(--kik-spacing-48);
    width: 293px;
    flex: 0 0 293px;
    padding-right: var(--kik-spacing-2xl);
}
.kik-cert__nav-body {
    font-size: var(--kik-text-size-body-md);
}
.kik-cert__cert-item {
    gap: var(--kik-spacing-8);
}
.kik-cert__nav-line {
    left: 0;
    top: 4px;
    height: 2px;
    width: 100%;
    transform: unset; 
}
.kik-cert__nav-fill {
  height: 100%;
  transition: width 0.4s ease;
  width:0;
}
.kik-cert__nav-stop.is-passed .kik-cert__nav-fill {
  width:100%;
}
.kik-cert__award {
      gap: 10px;
    width: calc(100% - 16px);
    margin: 0;
}
.kik-cert__certs {
  padding-right: var(--kik-spacing-lg); /* room for scrollbar */
}
}
/* END_SECTION:kik-certification-timeline */

/* START_SECTION:kik-collection-banner (INDEX:53) */
/* Re-assert size-independent heading bits — `tw:text-h*` can't drive the
     size (base theme styles h1-h6 in unlayered CSS, which beats layered
     `tw:` utilities), so font-size is set inline from the heading_size
     token. This class-qualified rule is also unlayered and wins. */
  .section-kik-collection-banner__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    margin: 0;
  }
/* END_SECTION:kik-collection-banner */

/* START_SECTION:kik-faq-accordion (INDEX:54) */
/* ── Header ──────────────────────────────────────────────── */
.section-kik-faq-accordion__header {
  text-align: start;
}
@media screen and (min-width: 750px) {
  .section-kik-faq-accordion__header {
    align-items: center;
    text-align: center;
  }
}
.section-kik-faq-accordion__kicker {
  font-size: var(--kik-text-size-body-sm);
  line-height: var(--kik-line-height-body);
  color: rgba(var(--color-normal-text-rgb), 0.7);
  margin: 0;
}
.section-kik-faq-accordion__heading {
  line-height: var(--kik-line-height-heading);
  letter-spacing: normal;
  color: rgb(var(--color-normal-text));
  margin: 0;
}
.section-kik-faq-accordion__description {
  font-size: var(--kik-text-size-body-lg);
  line-height: var(--kik-line-height-body);
  color: rgba(var(--color-normal-text-rgb), 0.7);
}
.section-kik-faq-accordion__description > :first-child { margin-block-start: 0; }
.section-kik-faq-accordion__description > :last-child  { margin-block-end: 0; }

/* ── FAQ list ─────────────────────────────────────────────── */
.section-kik-faq-accordion__list {
  display: flex;
  flex-direction: column;
  gap: var(--kik-spacing-16);
  width: 100%;
}

/* ── Item card ────────────────────────────────────────────── */
.section-kik-faq-accordion__item {
  background-color: rgb(var(--kik-color-bg-surface));
  border-radius: var(--kik-radius-sm);
}

/* ── Trigger (question row) ───────────────────────────────── */
.section-kik-faq-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kik-spacing-8);
  width: 100%;
  padding: 16px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: start;
}
@media screen and (min-width: 750px) {
  .section-kik-faq-accordion__trigger {
    padding: 20px 24px;
  }
}

/* ── Question text ────────────────────────────────────────── */
.section-kik-faq-accordion__question {
  font-family: var(--kik-text-font-heading);
  font-weight: var(--kik-font-weight-semibold);
  font-size: var(--kik-text-size-body-lg);
  line-height: var(--kik-line-height-body);
  color: rgb(var(--kik-color-text-primary));
  text-align: start;
}

/* ── Plus / minus icon ────────────────────────────────────── */
.section-kik-faq-accordion__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--kik-color-text-primary));
}
.kik-faq-icon__v {
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
}
.section-kik-faq-accordion__item.is-open .kik-faq-icon__v {
  transform: scaleY(0);
  opacity: 0;
}

/* ── Answer panel ─────────────────────────────────────────── */
.section-kik-faq-accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}
.section-kik-faq-accordion__item.is-open .section-kik-faq-accordion__panel {
  max-height: 800px;
}
.section-kik-faq-accordion__panel-inner {
  padding-inline: 20px;
  padding-block-end: 16px;
}
@media screen and (min-width: 750px) {
  .section-kik-faq-accordion__panel-inner {
    padding-inline: 24px;
    padding-block-end: 20px;
  }
}
.section-kik-faq-accordion__panel-inner p {
  font-size: var(--kik-text-size-body-lg);
  line-height: var(--kik-line-height-body);
  color: rgb(var(--kik-color-text-secondary));
  margin: 0;
}

/* ── Overflow items (hidden until "See All" clicked) ──────── */
.section-kik-faq-accordion__item--overflow {
  display: none;
}

/* ── CTA ──────────────────────────────────────────────────── */
.section-kik-faq-accordion__cta {
  display: flex;
  justify-content: flex-start;
}
@media screen and (min-width: 750px) {
  .section-kik-faq-accordion__cta {
    justify-content: center;
  }
}
/* END_SECTION:kik-faq-accordion */

/* START_SECTION:kik-faqs (INDEX:55) */
/* Class-qualified, unlayered — beats the base theme's bare h1-h6 / p rules
     (which are unlayered too, so layered tw: utilities can't win). See
     docs/kik-guide/section-structure.md cascade note. */
  .section-kik-faqs__kicker {
    font-size: var(--kik-text-size-body-sm);
    line-height: var(--kik-line-height-body);
    margin: 0;
  }
  .section-kik-faqs__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    margin: 0;
  }
  .section-kik-faqs__description {
    font-size: var(--kik-text-size-body-lg);
    line-height: var(--kik-line-height-body);
  }
  .section-kik-faqs__description > :first-child { margin-top: 0; }
  .section-kik-faqs__description > :last-child  { margin-bottom: 0; }
/* END_SECTION:kik-faqs */

/* START_SECTION:kik-feature-collection (INDEX:56) */
/* Binding host for the progress bar — flex column laying out header / carousel
     / controls / bottom CTA, gap steps 24 → 32. */
  .section-kik-feature-collection__inner {
    display: flex;
    flex-direction: column;
    gap: var(--kik-spacing-xl);
    width: 100%;
  }

  /* ── Header — heading left, "View All" right (desktop only); heading-only on
     mobile (the CTA drops to a full-width button at the bottom). ──────────── */
  .section-kik-feature-collection__header {
    display: flex;
    align-items: center;
    gap: var(--kik-spacing-2xl);
    width: 100%;
  }
  .section-kik-feature-collection__heading {
    flex: 1 1 0;
    min-width: 0;
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    color: rgb(var(--kik-color-text-primary));
    margin: 0;
  }

  /* "View All" — top instance shows on desktop only; bottom instance shows on
     mobile only and stretches full-width. */
  .section-kik-feature-collection__view-all--top {
    display: none;
    flex: 0 0 auto;
  }
  .section-kik-feature-collection__view-all--bottom {
    display: flex;
    width: 100%;
  }
  @media screen and (min-width: 750px) {
    .section-kik-feature-collection__view-all--top {
      display: inline-flex;
    }
    .section-kik-feature-collection__view-all--bottom {
      display: none;
    }
  }

  /* ── Carousel — block-level host; the track bleeds right (sized by the
     ID-scoped <style>), so the host keeps overflow visible. ───────────────── */
  .section-kik-feature-collection__carousel {
    display: block;
    width: 100%;
  }
  .section-kik-feature-collection__track {
    width: 100%;
  }
  .section-kik-feature-collection__slide {
    height: auto;
  }

  /* ── Carousel controls — progress bar + prev/next arrows. Shown only on
     breakpoints in carousel mode (display toggled by the ID-scoped <style>; the
     base stays hidden until known). ──────────────────────────────────────── */
  .section-kik-feature-collection__controls {
    align-items: center;
    gap: var(--kik-spacing-24);
    width: 100%;
  }

  /* Progress bar — a left-anchored fill whose LENGTH grows as the carousel
     advances (driven by <kik-feature-collection>). */
  .section-kik-feature-collection__progress {
    position: relative;
    flex: 1 1 0;
    block-size: 3px;
    border-radius: var(--kik-radius-xsm);
    /* border-subtle, not bg-surface: this section sits on the page white, so a
       near-white track (#f5f5f5) is invisible. A visible grey track + black fill
       reads as a progress bar on white. */
    background: rgb(var(--kik-color-border-subtle));
    overflow: hidden;
  }
  .section-kik-feature-collection__progress-fill {
    display: block;
    block-size: 100%;
    inline-size: 15%;
    border-radius: var(--kik-radius-xsm);
    background: rgb(var(--kik-color-bg-inverse));
    transition: inline-size 0.3s ease;
  }

  .section-kik-feature-collection__nav {
    display: flex;
    align-items: center;
    gap: var(--kik-spacing-16);
    flex: 0 0 auto;
  }
  /* Swiper nav buttons — reset Swiper's default size/arrow, paint the Figma chip. */
  .section-kik-feature-collection__arrow.swiper-button-prev,
  .section-kik-feature-collection__arrow.swiper-button-next {
    position: static;
    margin: 0;
    inline-size: 24px;
    block-size: 24px;
    padding: 0;
    /* Subtle border so the near-white (#f5f5f5) chip reads on the white page bg
       (unlike kik-product-categories, which sits on a grey surface). */
    border: 1px solid rgb(var(--kik-color-border-subtle));
    border-radius: var(--kik-radius-pill);
    background: rgb(var(--kik-color-bg-surface));
    color: rgb(var(--kik-color-text-primary));
    cursor: pointer;
    transition: opacity 0.2s ease, background-color 0.2s ease;
  }
  .section-kik-feature-collection__arrow.swiper-button-prev::after,
  .section-kik-feature-collection__arrow.swiper-button-next::after {
    content: none;
  }
  .section-kik-feature-collection__arrow svg {
    inline-size: auto;
    block-size: 8px;
  }
  /* The chevron is stroke-only. The theme's global `svg path { fill }` rule
     overrides the SVG's fill="none" attribute (CSS beats presentation attrs),
     filling the open path into a solid triangle — force it back off here. */
  .section-kik-feature-collection__arrow svg path {
    fill: none;
  }
  /* The carousel-arrow points right; flip it for the previous button. */
  .section-kik-feature-collection__arrow.swiper-button-prev svg {
    transform: rotate(180deg);
  }
  .section-kik-feature-collection__arrow.swiper-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
/* END_SECTION:kik-feature-collection */

/* START_SECTION:kik-global-components (INDEX:57) */
/* The base theme's unlayered `p { margin }` would break the flex gaps here. */
  .section-kik-global-components p {
    margin: 0;
  }

  /* Type specimens: re-assert the line-height tokens. The base theme sets
     `p { line-height }` in unlayered CSS, which beats any layered tw: utility —
     so a class-qualified selector (also unlayered) is needed to win. */
  .section-kik-global-components .kik-type-heading {
    line-height: var(--kik-line-height-heading);
  }
  .section-kik-global-components .kik-type-body {
    line-height: var(--kik-line-height-body);
  }
/* END_SECTION:kik-global-components */

/* START_SECTION:kik-global-map-stats (INDEX:58) */
/* Heading tag + size are merchant settings. `tw:text-h*` can't drive the size
     (the base theme styles h1-h6 in unlayered CSS, which beats layered `tw:`
     utilities), so font-size is set inline from the heading_size token. This
     class re-asserts the size-independent heading bits for any h1-h6 tag. */
  .section-kik-global-map-stats__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    margin: 0;
  }

  /* Kicker — small uppercase eyebrow above the heading. Re-assert size /
     line-height / margin class-qualified to beat the base theme's unlayered
     `p { ... }` rule. */
  .section-kik-global-map-stats__kicker {
    font-size: var(--kik-text-size-body-sm);
    line-height: var(--kik-line-height-body);
    margin: 0;
  }

  /* Description sits below the heading. Re-assert body-lg size + body line-height
     class-qualified because the base theme styles `p { font-size; line-height }`
     unlayered, which beats the layered `tw:text-body-lg` / `tw:leading-body`
     utilities on a `<p>`. */
  .section-kik-global-map-stats__description {
    font-size: var(--kik-text-size-body-lg);
    line-height: var(--kik-line-height-body);
    margin: 0;
  }

  /* The theme's global `p` margin would break the card's 4px text gap. */
  .section-kik-global-map-stats__card p {
    margin: 0;
  }


  /* Re-assert card typography. The base theme styles `p { font-size; line-height }`
     in UNLAYERED CSS, which beats layered `tw:text-h6` / `tw:text-body-sm` /
     `tw:leading-*` utilities — so those classes are silently dead on a `<p>`.
     Class-qualified selectors here are also unlayered and win on specificity.
     Rules live in the SECTION stylesheet (not the snippet) because a snippet's
     `stylesheet` tag isn't aggregated by Shopify. Tokens stay responsive — h6 /
     body-sm flip at 750px via the responsive --kik-text-size-* tokens. */
  .section-kik-global-map-stats__card-country {
    font-size: var(--kik-text-size-h6);
    line-height: var(--kik-line-height-heading);
  }
  .section-kik-global-map-stats__card-output {
    /* One line — the desktop card is sized wide enough to fit the output at body-sm. */
    font-size: var(--kik-text-size-body-sm);
    line-height: 1.6;
    white-space: nowrap;
  }

  /* Hotspot pin — a zero-size point on the map at (--gms-x, --gms-y). */
  .section-kik-global-map-stats__pin {
    position: absolute;
    left: var(--gms-x, 50%);
    top: var(--gms-y, 50%);
    width: 0;
    height: 0;
  }

  /* Hotspot marker — a translucent circle with a white dot. The dot is dimmed
     until its location is active; exactly one location is active at a time. */
  .section-kik-global-map-stats__marker {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--kik-spacing-24);
    height: var(--kik-spacing-24);
    padding: 0;
    translate: -50% -50%;
    border: 0;
    border-radius: var(--kik-radius-pill);
    background-color: rgba(var(--kik-color-bg-inverse), 0.5);
    cursor: pointer;
  }
  .section-kik-global-map-stats__marker-dot {
    width: var(--kik-spacing-12);
    height: var(--kik-spacing-12);
    border-radius: var(--kik-radius-pill);
    background-color: rgb(var(--kik-color-bg-page));
    opacity: 0.5;
    transition: opacity 0.2s ease;
  }

  /* The active location's dot is full opacity (both breakpoints). */
  .section-kik-global-map-stats__pin.is-active .section-kik-global-map-stats__marker-dot {
    opacity: 1;
  }

  /* Desktop — markers scale up; only the active location's card is pinned. */
  @media screen and (min-width: 750px) {
    .section-kik-global-map-stats__marker {
      width: var(--kik-spacing-48);
      height: var(--kik-spacing-48);
    }
    .section-kik-global-map-stats__marker-dot {
      width: var(--kik-spacing-24);
      height: var(--kik-spacing-24);
    }
    .section-kik-global-map-stats__pin-card {
      position: absolute;
      z-index: 2; /* the popup card always sits above every marker */
      width: 380px;
    }
    /* Only the active location's card shows; the rest stay hidden. */
    .section-kik-global-map-stats__pin.is-active .section-kik-global-map-stats__pin-card {
      display: block;
    }
    /* Offset clears the marker plus a small gap. */
    .section-kik-global-map-stats__pin[data-card^='top'] .section-kik-global-map-stats__pin-card {
      bottom: var(--kik-spacing-40);
    }
    .section-kik-global-map-stats__pin[data-card^='bottom'] .section-kik-global-map-stats__pin-card {
      top: var(--kik-spacing-40);
    }
    .section-kik-global-map-stats__pin[data-card$='right'] .section-kik-global-map-stats__pin-card {
      left: 0;
    }
    .section-kik-global-map-stats__pin[data-card$='left'] .section-kik-global-map-stats__pin-card {
      right: 0;
    }
  }

  /* Mobile — full-bleed right for the cards carousel only. The swiper extends
     past the section's right padding to reach the viewport's right edge, while
     staying left-aligned with the section content. The map panel stays inside
     the section padding. Reads --section-kik-padding-inline (set by the
     section_padding modifier class or the custom override style block) so it
     adapts to whatever side padding the merchant chose. */
  @media screen and (max-width: 749px) {
    .section-kik-global-map-stats kik-swiper {
      align-self: flex-start;
      width: calc(100% + var(--section-kik-padding-inline, var(--kik-spacing-xl)));
    }
  }

  /* Mobile carousel pagination — wide active bar, small inactive dots. */
  .section-kik-global-map-stats .swiper-pagination {
    position: static;
    display: flex;
    justify-content: center;
    gap: var(--kik-spacing-8);
    margin-top: var(--kik-spacing-md);
    padding: 15px;
  }
  .section-kik-global-map-stats .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0;
    background-color: rgb(var(--kik-color-bg-alt-1));
    opacity: 1;
    border-radius: var(--kik-radius-pill);
    transition: width 0.3s ease, background-color 0.3s ease;
  }
  .section-kik-global-map-stats .swiper-pagination-bullet-active {
    width: 60px;
    background-color: rgb(var(--kik-color-action-primary));
  }

  /* Compensate pagination centering — the swiper is full-bleed-right on mobile,
     so its content centre shifts right by half the extension. Asymmetric padding
     pulls the dots' centre back over the section content. Must come AFTER the
     base pagination rule above so source-order beats it on equal specificity. */
  @media screen and (max-width: 749px) {
    .section-kik-global-map-stats .swiper-pagination {
      padding-right: calc(15px + var(--section-kik-padding-inline, var(--kik-spacing-xl)));
    }
  }
/* END_SECTION:kik-global-map-stats */

/* START_SECTION:kik-growth-partner (INDEX:59) */
.section-kik-partner {
    --ink: #0a0a0a;
    --muted: #5a5a5a;
    --line: #e6e6e6;
    --tint: #f6f6f6;
    --r: 14px;
    color: var(--ink);
    padding: var(--sec-pt-m, 64px) 0 var(--sec-pb-m, 64px);
  }
  .section-kik-partner--bg-tint { background: var(--tint); }
  @media screen and (min-width: 750px) {
    .section-kik-partner { padding: var(--sec-pt-d, 80px) 0 var(--sec-pb-d, 80px); }
  }

  .section-kik-partner__shell { width: min(100% - 2.5rem, 1120px); margin-inline: auto; }

  .section-kik-partner__head { text-align: center; max-width: 680px; margin: 0 auto 2.75rem; }
  .section-kik-partner__heading {
    margin: 0;
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 600;
  }
  .section-kik-partner__sub { margin: 0.9rem 0 0; color: var(--muted); font-size: 1.02rem; line-height: 1.55; }

  .section-kik-partner__grid {
    display: grid;
    grid-template-columns: repeat(var(--ac-cols, 4), 1fr);
    gap: 1rem;
  }

  .section-kik-partner__card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.5rem 1.25rem;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 0.55rem;
    min-height: 100%;
  }
  .section-kik-partner__n {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--muted);
  }
  .section-kik-partner__title { margin: 0; font-size: 1.08rem; font-weight: 600; line-height: 1.3; }
  .section-kik-partner__text { margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.5; }

  @media (max-width: 1024px) {
    .section-kik-partner__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 768px) {
    .section-kik-partner__grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:kik-growth-partner */

/* START_SECTION:kik-hero (INDEX:60) */
/* Full-bleed hero — background image + scrim edge-to-edge, content bottom-left
     over it. Min-height is set per-instance from the merchant's mobile + desktop
     ranges via the ID-scoped style block above. */
  .section-kik-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: rgb(var(--kik-color-text-inverse));
    background-color: rgb(var(--kik-color-bg-inverse));
  }

  .section-kik-hero__bg {
    position: absolute;
    inset: 0;
  }
  .section-kik-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Diagonal scrim — darkest at the (left) content edge, fading across the image
     so the copy stays legible. `--kik-hero-scrim` (merchant opacity) scales the
     darkest stop; falls back to 0.78. */
  .section-kik-hero__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      rgba(0, 0, 0, var(--kik-hero-scrim, 0.78)) 0%,
      rgba(0, 0, 0, calc(var(--kik-hero-scrim, 0.78) * 0.54)) 55%,
      rgba(0, 0, 0, calc(var(--kik-hero-scrim, 0.78) * 0.32)) 100%
    );
  }

  /* Content column — rides on the theme container for horizontal width/gutter
     parity with the sections below it (page-width cap + 16/60 gutters). The
     container drives its own vertical padding from --section-kik-padding-*, so
     the hero's breathing room is fed through those vars rather than a
     padding-block declaration (which the container rule would out-specify).
     width:100% so it fills the flex row and the gutter centering resolves. */
  .section-kik-hero__body {
    position: relative;
    z-index: 1;
    width: 100%;
    --section-kik-padding-top: var(--kik-spacing-48);
    --section-kik-padding-bottom: var(--kik-spacing-40);
  }
  @media screen and (min-width: 750px) {
    .section-kik-hero__body {
      --section-kik-padding-top: 72px;
      --section-kik-padding-bottom: 52px;
    }
  }

  .section-kik-hero__eyebrow {
    margin: 0 0 var(--kik-spacing-12);
    font-size: var(--kik-text-size-body-sm);
    font-weight: var(--kik-font-weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
  }

  /* Heading uses a fluid size (unlayered `body h*` beats `tw:` utilities, so set
     font-size here, class-qualified) and locks its line-height + margin. */
  .section-kik-hero__heading {
    margin: 0;
    max-width: 16ch;
    font-size: clamp(2.15rem, 4.8vw, 3.5rem);
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
  }

  /* The kik `body p` override is unlayered — re-assert the lead size here. */
  .section-kik-hero__lead {
    margin: var(--kik-spacing-16) 0 0;
    max-width: 52ch;
    font-size: var(--kik-text-size-body-lg);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
  }

  /* Glass credential bar — five stats in a translucent, blurred card. */
  .section-kik-hero__creds {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--kik-spacing-12);
    margin: var(--kik-spacing-32) 0 var(--kik-spacing-24);
    padding: var(--kik-spacing-16);
    list-style: none;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--kik-radius-lg);
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .section-kik-hero__creds li {
    display: grid;
    gap: 2px;
  }
  .section-kik-hero__creds strong {
    font-size: var(--kik-text-size-body-lg);
    font-weight: var(--kik-font-weight-semibold);
    line-height: 1.2;
  }
  .section-kik-hero__creds span {
    font-size: var(--kik-text-size-body-xsm);
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.72);
  }

  .section-kik-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kik-spacing-12);
  }

  @media screen and (max-width: 1024px) {
    .section-kik-hero__creds {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media screen and (max-width: 749px) {
    .section-kik-hero__creds {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .section-kik-hero__cta .kik-btn {
      flex: 1 1 auto;
    }
  }
/* END_SECTION:kik-hero */

/* START_SECTION:kik-how-it-works (INDEX:62) */
/* Binding host for the progress bar — layout-transparent. */
  kik-how-it-works {
    display: block;
    inline-size: 100%;
  }

  /* Inner column — header / track / controls. The Swiper config <script> is
     display:none, so a flex column adds no phantom gap. */
  .section-kik-how-it-works__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kik-spacing-xl);
    inline-size: 100%;
  }

  .section-kik-how-it-works__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kik-spacing-md);
    inline-size: 100%;
  }

  /* ── Header typography — base theme styles h1-h6 / p unlayered; re-assert
     class-qualified so these win. ─────────────────────────────────────────── */
  .section-kik-how-it-works__kicker {
    font-size: var(--kik-text-size-body-sm);
    line-height: var(--kik-line-height-body);
    color: rgb(var(--kik-color-text-secondary));
    margin: 0;
  }
  .section-kik-how-it-works__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    color: rgb(var(--kik-color-text-primary));
    margin: 0;
  }
  .section-kik-how-it-works__description {
    font-size: var(--kik-text-size-body-lg);
    line-height: var(--kik-line-height-body);
    color: rgb(var(--kik-color-text-secondary));
    margin: 0;
  }

  /* ── Track (.swiper) — carousel below 750; forced to a static flex row at
     ≥750 by the desktop overrides further down. ──────────────────────────── */
  .section-kik-how-it-works__track {
    inline-size: 100%;
  }
  /* Carousel (mobile through tablet / laptop, < 1300px) — the track bleeds
     full-width to the right: its left edge stays at the content gutter, but the
     right edge reaches the viewport edge so the peek runs to the screen edge,
     independent of the section's side padding. The symmetric gutter makes
     calc(50vw + 50%) resolve to exactly that at any width below the page-width cap.
     The static one-row timeline only runs at ≥1300px (see below). */
  @media screen and (max-width: 1299px) {
    .section-kik-how-it-works__track {
      inline-size: calc(50vw + 50%);
      align-self: flex-start;
    }
  }
  /* Slide stretches to the tallest (equal-height cards) and hosts the card. */
  .section-kik-how-it-works__slide {
    display: flex;
    block-size: auto;
    inline-size: 230px;
  }

  /* Card — icon + body, equal height (card flex:1 fills the stretched slide). */
  .section-kik-how-it-works__card {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: var(--kik-spacing-16);
    min-inline-size: 0;
    padding-block: var(--kik-spacing-24);
    padding-inline: var(--kik-spacing-16);
    border: 1px solid rgb(var(--kik-color-border-subtle));
    border-radius: var(--kik-radius-md);
    background: rgb(var(--kik-color-bg-page));
  }

  .section-kik-how-it-works__icon {
    flex: 0 0 auto;
    inline-size: 32px;
    block-size: 32px;
    object-fit: contain;
  }

  .section-kik-how-it-works__body {
    display: flex;
    flex-direction: column;
    gap: 6px; /* spec: no spacing token for 6px */
    min-inline-size: 0;
  }
  /* Step number + title — fixed 18px / 1.4 at both breakpoints (Figma Mobile/H6;
     no --kik-text-size token resolves to 18px on desktop). Colour is #333
     (--kik-color-text-dark), the Figma step-number/title colour. */
  .section-kik-how-it-works__title {
    font-family: var(--kik-text-font-heading);
    font-weight: var(--kik-font-weight-semibold);
    font-size: 18px;
    line-height: 1.4;
    color: rgb(var(--kik-color-text-dark));
    margin: 0;
  }
  /* Number sits in a fixed indent column so the title aligns past it — matches
     Figma's list-decimal `ms-27px`, a wider gap than a single space. */
  .section-kik-how-it-works__step-num {
    display: inline-block;
    min-inline-size: 27px;
  }
  /* Description — fixed 12px at both breakpoints (Figma Mobile/B3). */
  .section-kik-how-it-works__desc {
    font-family: var(--kik-text-font-body);
    font-weight: var(--kik-font-weight-regular);
    font-size: 12px;
    line-height: var(--kik-line-height-body);
    color: rgb(var(--kik-color-text-secondary));
    margin: 0;
  }

  /* Connector — thin decorative bar bridging the gap to the next card. Absolute
     so it sits in the inter-card gap (Swiper spaceBetween / desktop wrapper gap)
     without being a flex/swiper item. Width = that gap (60 mobile / 82 desktop). */
  .section-kik-how-it-works__connector {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 100%;
    transform: translateY(-50%);
    inline-size: 60px;
    block-size: 2px;
    background: rgb(var(--kik-color-border-subtle));
  }

  /* ── Desktop (≥1300) — Swiper is disabled; force the wrapper to a static row.
     Cards hold a fixed-ish 230px width (floored at 190px) instead of stretching
     equally, and the connecting line fills whatever gap is left between them
     (justify-content: space-between) — so the CARDS keep their width and the LINE
     absorbs the extra space as the viewport grows. Below 1300 the row gets tight
     for 5 cards, so the carousel runs there — the JS disables Swiper at 1300. ── */
  @media screen and (min-width: 1300px) {
    .section-kik-how-it-works__track.swiper {
      overflow: visible;
    }
    .section-kik-how-it-works__track .swiper-wrapper {
      position: relative;
      /* gap = the MINIMUM line length; space-between grows it beyond this as the
         viewport widens. Without a floor the cards fill the row and the line
         collapses to 0 at the narrow end of this breakpoint. */
      gap: var(--kik-spacing-24);
      justify-content: space-between;
      transform: none !important;
    }
    /* Single continuous connector line behind the row, at the cards' vertical
       centre. The opaque cards (white bg, z-index 1) mask it where they sit, so
       it shows only in the gaps — and each visible segment auto-sizes to its gap.
       Replaces the per-card absolute bars, hidden below. */
    .section-kik-how-it-works__track .swiper-wrapper::before {
      content: '';
      position: absolute;
      inset-block-start: 50%;
      inset-inline: 0;
      block-size: 2px;
      transform: translateY(-50%);
      background: rgb(var(--kik-color-border-subtle));
      z-index: 0;
    }
    .section-kik-how-it-works__slide {
      flex: 0 1 230px;
      min-inline-size: 190px;
      inline-size: auto;
      position: relative;
      z-index: 1;
      margin: 0 !important;
    }
    .section-kik-how-it-works__connector {
      display: none;
    }
  }

  /* ── Carousel controls — progress bar + prev/next arrows; mobile only.
     Hidden by default so desktop never shows them; revealed below 750. ─────── */
  .section-kik-how-it-works__controls {
    display: none;
    align-items: center;
    gap: var(--kik-spacing-24);
    inline-size: 100%;
  }
  @media screen and (max-width: 1299px) {
    .section-kik-how-it-works__controls {
      display: flex;
    }
  }

  .section-kik-how-it-works__progress {
    position: relative;
    flex: 1 1 0;
    block-size: 3px;
    border-radius: var(--kik-radius-xsm);
    background: rgb(var(--kik-color-bg-surface));
    overflow: hidden;
  }
  .section-kik-how-it-works__progress-fill {
    display: block;
    block-size: 100%;
    inline-size: 15%;
    border-radius: var(--kik-radius-xsm);
    background: rgb(var(--kik-color-text-primary));
    transition: inline-size 0.3s ease;
  }

  .section-kik-how-it-works__nav {
    display: flex;
    align-items: center;
    gap: var(--kik-spacing-16);
    flex: 0 0 auto;
  }
  /* Swiper nav buttons — reset Swiper's default size/arrow, paint the Figma chip. */
  .section-kik-how-it-works__arrow.swiper-button-prev,
  .section-kik-how-it-works__arrow.swiper-button-next {
    position: static;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 24px;
    block-size: 24px;
    padding: 0;
    border: none;
    border-radius: var(--kik-radius-pill);
    background: rgb(var(--kik-color-bg-surface));
    color: rgb(var(--kik-color-text-primary));
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .section-kik-how-it-works__arrow.swiper-button-prev::after,
  .section-kik-how-it-works__arrow.swiper-button-next::after {
    content: none;
  }
  .section-kik-how-it-works__arrow svg {
    inline-size: auto;
    block-size: 8px;
  }
  /* The chevron is stroke-only; the theme's global `svg path { fill }` rule
     would fill the open path into a triangle — force it back off. */
  .section-kik-how-it-works__arrow svg path {
    fill: none;
  }
  .section-kik-how-it-works__arrow.swiper-button-prev svg {
    transform: rotate(180deg);
  }
  .section-kik-how-it-works__arrow.swiper-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
/* END_SECTION:kik-how-it-works */

/* START_SECTION:kik-icon-with-text (INDEX:63) */
/* Class-qualified, unlayered — beats the base theme's bare h1-h6 / p rules. */
  .section-kik-icon-with-text__kicker {
    font-size: var(--kik-text-size-body-sm);
    line-height: var(--kik-line-height-body);
    margin: 0;
  }
  .section-kik-icon-with-text__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    margin: 0;
  }
  .section-kik-icon-with-text__description {
    font-size: var(--kik-text-size-body-lg);
    line-height: var(--kik-line-height-body);
  }
  .section-kik-icon-with-text__description > :first-child { margin-top: 0; }
  .section-kik-icon-with-text__description > :last-child  { margin-bottom: 0; }
/* END_SECTION:kik-icon-with-text */

/* START_SECTION:kik-image-banner (INDEX:64) */
/* Full-bleed banner — image + overlay edge-to-edge, content centred over it.
     Height is set per-instance from the merchant's mobile + desktop ranges via
     the ID-scoped style block above. */
  .section-kik-image-banner__banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: rgb(var(--kik-color-bg-inverse));
  }

  .section-kik-image-banner__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Flat dark scrim — `--kik-banner-overlay` (the merchant opacity) is set on the
     banner in the ID-scoped block; falls back to the Figma 0.4. */
  .section-kik-image-banner__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(var(--kik-color-bg-inverse), var(--kik-banner-overlay, 0.4));
  }

  /* Content column — centred, capped at the Figma 982px content width with a
     24px gutter so text never touches the edge on mobile. border-box keeps the
     content area at 982 (cap = 982 + the two gutters). The text↔button gap is
     32 on mobile, 48 on desktop (Figma) — two different tokens, so a media query
     rather than one responsive token. */
  .section-kik-image-banner__content {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(982px + 2 * var(--kik-spacing-24));
    margin-inline: auto;
    padding-inline: var(--kik-spacing-24);
    gap: var(--kik-spacing-32);
  }
  @media screen and (min-width: 750px) {
    .section-kik-image-banner__content {
      gap: var(--kik-spacing-48);
    }
  }

  /* Heading font-size is set inline from heading_size (beats the unlayered
     `body h*` theme override); only reset margin + lock the heading line-height. */
  .section-kik-image-banner__heading {
    margin: 0;
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
  }

  /* The kik `body p` override (font-size + line-height) is unlayered, so the
     `tw:` body utilities are silently beaten — re-assert body-lg + 1.6 here,
     class-qualified so it wins. Margin reset so no stray gap under the copy. */
  .section-kik-image-banner__description {
    margin: 0;
    font-size: var(--kik-text-size-body-lg);
    line-height: 1.6;
  }
  /* Statement style — a semibold heading-style description: heading font, H5 (22) on
     mobile / H4 (28) on desktop, lh 1.2. No single token spans 22→28, so the size
     flips by media query. Placed after the base rule so it wins on source order. */
  .section-kik-image-banner__description--statement {
    font-family: var(--kik-text-font-heading);
    font-weight: var(--kik-font-weight-semibold);
    font-size: var(--kik-text-size-h5);
    line-height: var(--kik-line-height-heading);
  }
  @media screen and (min-width: 750px) {
    .section-kik-image-banner__description--statement {
      font-size: var(--kik-text-size-h4);
    }
  }

  /* Merchant opt-in: keep the link CTA's underline on at rest (md/sm links
     normally only underline on hover). Mirrors the .kik-btn--link hover rule. */
  .section-kik-image-banner__link--underline.kik-btn--link {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
/* END_SECTION:kik-image-banner */

/* START_SECTION:kik-image-with-text-icons (INDEX:65) */
/* ── Layout ─────────────────────────────────────────────
     Mobile: a single flex column. The media + content wrappers are
     `display: contents`, so every block becomes a direct flex child and
     sorts by its `--iwt-order` (its global index in section.blocks) — giving
     the exact Figma reading order regardless of which DOM wrapper it sits in.
     Desktop: the wrappers become two real columns (image left, content right). */
  .section-kik-image-with-text-icons__layout {
    display: flex;
    flex-direction: column;
    gap: var(--kik-spacing-32);
    width: 100%;
  }
  /* Mobile group rhythm: the section gap (32) frames the heading at the top and
     the button at the bottom; the image / feature-list / icon-list form one
     content group with a 40 internal gap. Base gap is the 32 section gap, so the
     two intra-group transitions (image→features, features→icons) take the extra
     8 to reach 40. Reset on desktop, where the content column owns its own gap. */
  .section-kik-image-with-text-icons__features,
  .section-kik-image-with-text-icons__icons {
    margin-top: var(--kik-spacing-8);
  }
  .section-kik-image-with-text-icons__media,
  .section-kik-image-with-text-icons__content {
    display: contents;
  }
  .section-kik-image-with-text-icons__region {
    order: var(--iwt-order, 0);
    width: 100%;
  }

  .section-kik-image-with-text-icons__media-region picture {
    display: block;
    width: 100%;
    height: 100%;
  }
  .section-kik-image-with-text-icons__image {
    display: block;
    width: 100%;
    height: 344px;
    object-fit: cover;
    border-radius: var(--kik-radius-md);
  }

  /* Adapt to image — show the full image at its natural aspect ratio (no crop)
     instead of filling the column / fixed mobile height. */
  .section-kik-image-with-text-icons__media--adapt .section-kik-image-with-text-icons__image {
    height: auto;
    object-fit: contain;
  }

  @media screen and (min-width: 750px) {
    .section-kik-image-with-text-icons__layout {
      flex-direction: row;
      align-items: center;
      gap: 60px;
    }
    .section-kik-image-with-text-icons__media {
      display: flex;
      flex: 1 1 0;
      min-width: 0;
      align-self: stretch;
    }
    .section-kik-image-with-text-icons__content {
      display: flex;
      flex-direction: column;
      flex: 1 1 0;
      min-width: 0;
      gap: 60px;
      justify-content: center;
    }
    /* The content column owns a uniform 60 gap — drop the mobile group offset. */
    .section-kik-image-with-text-icons__features,
    .section-kik-image-with-text-icons__icons {
      margin-top: 0;
    }
    .section-kik-image-with-text-icons__media-region {
      height: 100%;
    }
    .section-kik-image-with-text-icons__image {
      height: 100%;
    }
    /* Adapt — don't stretch to the column height; centre the natural-size image. */
    .section-kik-image-with-text-icons__media--adapt {
      align-self: center;
    }
    .section-kik-image-with-text-icons__media--adapt .section-kik-image-with-text-icons__media-region {
      height: auto;
    }

    /* Sticky — top-align the image and pin it (below the sticky header) while
       the content column scrolls past. Needs a natural-height image so the
       column is shorter than the content; otherwise there's nothing to stick. */
    .section-kik-image-with-text-icons__media--sticky {
      align-self: flex-start;
      position: sticky;
      top: calc(var(--header-height, 0px) + var(--kik-spacing-xl));
    }
    .section-kik-image-with-text-icons__media--sticky .section-kik-image-with-text-icons__media-region {
      height: auto;
    }
    .section-kik-image-with-text-icons__media--sticky .section-kik-image-with-text-icons__image {
      height: auto;
      object-fit: contain;
    }
  }

  /* ── Typography re-assertions ───────────────────────────
     The base theme styles h1-h6 and p in unlayered CSS, which beats layered
     `tw:` size/line-height utilities — so re-assert them here (class-qualified,
     unlayered → wins). Size comes from the inline heading_size / title_size token. */
  .section-kik-image-with-text-icons__heading,
  .section-kik-image-with-text-icons__features-title {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    margin: 0;
  }
  .section-kik-image-with-text-icons__description {
    font-size: var(--kik-text-size-body-lg);
    line-height: var(--kik-line-height-body);
    margin: 0;
  }

  /* ── Feature list ───────────────────────────────────────── */
  .section-kik-image-with-text-icons__feature-rows {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .section-kik-image-with-text-icons__feature-row {
    margin: 0;
  }
  .section-kik-image-with-text-icons__feature-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: rgb(var(--kik-color-text-primary));
  }
  .section-kik-image-with-text-icons__feature-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }
  .section-kik-image-with-text-icons__feature-text {
    font-size: var(--kik-text-size-body-md);
    line-height: var(--kik-line-height-body);
  }

  /* ── Icon (certification) row ─────────────────────────────
     Gap is set here (not a `tw:gap-*` utility) so it always resolves to the
     32px token on both breakpoints, regardless of Tailwind's arbitrary-value
     compilation. */
  .section-kik-image-with-text-icons__icons {
    gap: var(--kik-spacing-32);
  }
  .section-kik-image-with-text-icons__icon {
    display: block;
    width: 60px;
    height: 60px;
    object-fit: contain;
  }
/* END_SECTION:kik-image-with-text-icons */

/* START_SECTION:kik-image-with-text (INDEX:66) */
/* Class-qualified, unlayered — beats the base theme's bare h1-h6 rules
     (which are unlayered too, so layered tw: utilities can't win). */
  .section-kik-image-with-text__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    margin: 0;
  }
/* END_SECTION:kik-image-with-text */

/* START_SECTION:kik-marketing-resources (INDEX:68) */
/* Binding host for the progress bar — layout-transparent. */
  kik-marketing-resources {
    display: block;
    width: 100%;
  }

  /* ── Inner column — header / track / controls, gap steps 24 → 32. Flex
     column so the display:none Swiper config <script> adds no phantom gap. ── */
  .section-kik-marketing-resources__inner {
    display: flex;
    flex-direction: column;
    gap: var(--kik-spacing-xl);
    width: 100%;
  }
  .section-kik-marketing-resources__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kik-spacing-md);
    width: 100%;
  }

  /* ── Header typography (base theme styles h1-h6 / p unlayered — re-assert
     class-qualified; colour follows the recolorable scheme) ──────────────── */
  .section-kik-marketing-resources__kicker {
    font-size: var(--kik-text-size-body-sm);
    line-height: var(--kik-line-height-body);
    color: rgba(var(--color-normal-text-rgb), 0.7);
    margin: 0;
  }
  .section-kik-marketing-resources__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    color: var(--color-normal-text);
    margin: 0;
  }
  .section-kik-marketing-resources__description {
    font-size: var(--kik-text-size-body-lg);
    line-height: var(--kik-line-height-body);
    color: rgba(var(--color-normal-text-rgb), 0.7);
    margin: 0;
  }

  /* ── Track (.swiper) — carousel layout is Swiper's; grid mode is forced per
     breakpoint by the ID-scoped <style> the section emits. ───────────────── */
  .section-kik-marketing-resources__track {
    width: 100%;
  }
  .section-kik-marketing-resources__slide {
    height: auto;
  }
  /* The card fills its slide / grid cell. */
  .section-kik-marketing-resources__slide > .section-kik-marketing-resources__card {
    width: 100%;
  }

  /* ── Card — portrait media with bottom-anchored content over a fade ────── */
  .section-kik-marketing-resources__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    aspect-ratio: 3 / 4;
    padding: var(--kik-spacing-16);
    border-radius: var(--kik-radius-md);
    overflow: hidden;
    color: var(--card-text, rgb(var(--kik-color-text-primary)));
  }
  .section-kik-marketing-resources__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .section-kik-marketing-resources__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .section-kik-marketing-resources__img--placeholder {
    background: rgb(var(--kik-color-bg-alt-1));
  }
  /* Bottom fade for legibility — fades from transparent to ~85% of the
     merchant's overlay colour. */
  .section-kik-marketing-resources__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      transparent 50%,
      color-mix(in srgb, var(--card-overlay, #ffffff) 85%, transparent) 100%
    );
  }
  .section-kik-marketing-resources__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kik-spacing-8);
    width: 100%;
    color: var(--card-text, rgb(var(--kik-color-text-primary)));
  }
  .section-kik-marketing-resources__card-title {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    color: var(--card-text, rgb(var(--kik-color-text-primary)));
    margin: 0;
  }
  .section-kik-marketing-resources__card-desc {
    font-size: var(--kik-text-size-body-xsm);
    line-height: var(--kik-line-height-body);
    color: var(--card-text, rgb(var(--kik-color-text-primary)));
    margin: 0;
  }

  /* ── Carousel controls — Swiper scrollbar (progress) + prev/next arrows.
     Shown only on breakpoints in carousel mode (toggled by the ID-scoped
     <style>); display set there so the base stays hidden until known. ─────── */
  .section-kik-marketing-resources__controls {
    align-items: center;
    gap: var(--kik-spacing-24);
    width: 100%;
  }

  /* Progress bar — a left-anchored fill whose LENGTH grows as the carousel
     advances (driven by <kik-marketing-resources>). Track is the subtle line;
     the fill width steps up per slide and reaches 100% at the last. */
  .section-kik-marketing-resources__progress {
    position: relative;
    flex: 1 1 0;
    block-size: 3px;
    border-radius: var(--kik-radius-xsm);
    background: rgb(var(--kik-color-bg-page)); /* white track per Figma */
    overflow: hidden;
  }
  .section-kik-marketing-resources__progress-fill {
    display: block;
    block-size: 100%;
    inline-size: 15%;
    border-radius: var(--kik-radius-xsm);
    background: var(--color-normal-text);
    transition: inline-size 0.3s ease;
  }

  .section-kik-marketing-resources__nav {
    display: flex;
    align-items: center;
    gap: var(--kik-spacing-16);
    flex: 0 0 auto;
  }
  /* Swiper nav buttons — reset Swiper's default size/arrow, paint Figma chip. */
  .section-kik-marketing-resources__arrow.swiper-button-prev,
  .section-kik-marketing-resources__arrow.swiper-button-next {
    position: static;
    margin: 0;
    inline-size: 24px;
    block-size: 24px;
    padding: 0;
    border: none;
    border-radius: var(--kik-radius-pill);
    background: rgb(var(--kik-color-bg-page));
    color: rgb(var(--kik-color-text-primary));
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .section-kik-marketing-resources__arrow.swiper-button-prev::after,
  .section-kik-marketing-resources__arrow.swiper-button-next::after {
    content: none;
  }
  .section-kik-marketing-resources__arrow svg {
    inline-size: auto;
    block-size: 10px;
  }
  /* The chevron is stroke-only. The theme's global `svg path { fill }` rule
     overrides the SVG's fill="none" attribute (CSS beats presentation attrs),
     filling the open path into a solid triangle — force it back off here. */
  .section-kik-marketing-resources__arrow svg path {
    fill: none;
  }
  /* The carousel-arrow points right; flip it for the previous button. */
  .section-kik-marketing-resources__arrow.swiper-button-prev svg {
    transform: rotate(180deg);
  }
  .section-kik-marketing-resources__arrow.swiper-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
/* END_SECTION:kik-marketing-resources */

/* START_SECTION:kik-multi-columns (INDEX:70) */
/* Base theme styles bare `p` / `h1`-`h6` in unlayered CSS, which beats any
     layered `tw:` size/leading utility. Re-assert the trio's text bits here
     class-qualified (also unlayered) so the kik tokens win. */
  .section-kik-multi-columns__kicker {
    font-size: var(--kik-text-size-body-sm);
    line-height: var(--kik-line-height-body);
    margin: 0;
  }
  .section-kik-multi-columns__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    margin: 0;
  }
  .section-kik-multi-columns__description {
    font-size: var(--kik-text-size-body-lg);
    line-height: var(--kik-line-height-body);
    margin: 0;
  }
  .section-kik-multi-columns__item-heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    margin: 0;
  }
/* END_SECTION:kik-multi-columns */

/* START_SECTION:kik-ops-stats (INDEX:72) */
.section-kik-ops {
    background: #111;
    color: #fff;
    padding: var(--sec-pt-m, 56px) 0 var(--sec-pb-m, 56px);
  }
  @media screen and (min-width: 750px) {
    .section-kik-ops { padding: var(--sec-pt-d, 72px) 0 var(--sec-pb-d, 72px); }
  }

  .section-kik-ops__shell { width: min(100% - 2.5rem, 1120px); margin-inline: auto; }

  .section-kik-ops__head { text-align: center; max-width: 680px; margin: 0 auto 2.75rem; color: #fff; }
  .section-kik-ops__heading {
    margin: 0;
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 600;
  }
  .section-kik-ops__lead {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    font-size: 1.15rem;
    margin: 0.65rem 0 0;
  }
  .section-kik-ops__sub {
    margin: 0.9rem auto 0;
    max-width: 62ch;
    color: rgba(255, 255, 255, 0.68);
    font-size: 1.02rem;
    line-height: 1.55;
  }

  .section-kik-ops__grid {
    display: grid;
    grid-template-columns: repeat(var(--ac-cols, 3), 1fr);
    gap: 1.5rem 1.25rem;
  }

  .section-kik-ops__stat { display: grid; gap: 0.3rem; align-content: start; }
  .section-kik-ops__value { font-size: 2rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
  .section-kik-ops__value--long {
    line-height: 1.25;
    max-width: 22ch;
  }
  .section-kik-ops__subtitle { font-size: 0.95rem; font-weight: 500; }
  .section-kik-ops__text { margin: 0; color: rgba(255, 255, 255, 0.62); font-size: 0.9rem; line-height: 1.5; }

  .section-kik-ops__stat--highlight {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 1.25rem 1.35rem;
  }
  .section-kik-ops__stat--highlight .section-kik-ops__value { color: #fff; }
  .section-kik-ops__stat--highlight .section-kik-ops__value--long {
    max-width: none;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
  }

  @media (max-width: 1024px) {
    .section-kik-ops__grid { grid-template-columns: repeat(2, 1fr); }
    .section-kik-ops__stat--highlight { grid-column: 1 / -1; }
  }
  @media (max-width: 768px) {
    .section-kik-ops__grid { grid-template-columns: 1fr; }
    .section-kik-ops__stat--highlight { grid-column: auto; }
  }
/* END_SECTION:kik-ops-stats */

/* START_SECTION:kik-product-carousel (INDEX:73) */
/* ── Section overflow ── */
  .section-kik-product-carousel {
    overflow-x: clip;
  }

  .kik-product-carousel__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    margin: 0;
  }

  .kik-product-carousel__btn {
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border: 1px solid rgb(var(--kik-color-text-primary));
    white-space: nowrap;
    text-decoration: none;
  }

  /* Gap between header row and carousel: 24px mobile / 32px desktop */
  .kik-product-carousel__col {
    gap: 24px;
  }

  @media (min-width: 750px) {
    .kik-product-carousel__col {
      gap: 32px;
    }
  }

  /* ── Carousel wrapper — bleed right, keep left padding ── */
  .section-kik-product-carousel .kik-product-carousel__carousel-wrapper {
    margin-inline-end: -16px;
  }
  @media screen and (min-width: 750px) {
    .section-kik-product-carousel .kik-product-carousel__carousel-wrapper {
      margin-inline-end: -60px;
    }
  }

  /* ── Swiper — allow right bleed; section overflow-x:clip handles the edge ── */
  .section-kik-product-carousel .swiper {
    overflow: visible;
  }

  /* ── Equal-height slides ── */
  .section-kik-product-carousel .swiper-wrapper {
    align-items: stretch;
  }
  .section-kik-product-carousel .swiper-slide {
    height: auto;
  }

  /* ── Navigation arrows ── */
  .section-kik-product-carousel .kik-product-carousel__btn-prev,
  .section-kik-product-carousel .kik-product-carousel__btn-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: rgb(var(--kik-color-bg-page));
    border: 1px solid rgb(var(--kik-color-border-subtle));
    border-radius: var(--kik-radius-full, 9999px);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
  .section-kik-product-carousel .kik-product-carousel__btn-prev {
    left: 0;
  }
  .section-kik-product-carousel .kik-product-carousel__btn-next {
    right: 0;
  }
  .section-kik-product-carousel:hover .kik-product-carousel__btn-prev,
  .section-kik-product-carousel:hover .kik-product-carousel__btn-next,
  .section-kik-product-carousel .kik-product-carousel__btn-prev:focus-visible,
  .section-kik-product-carousel .kik-product-carousel__btn-next:focus-visible {
    opacity: 1;
    visibility: visible;
  }
  .section-kik-product-carousel .kik-product-carousel__btn-prev.swiper-button-disabled,
  .section-kik-product-carousel .kik-product-carousel__btn-next.swiper-button-disabled {
    opacity: 0.3;
    pointer-events: none;
  }
/* END_SECTION:kik-product-carousel */

/* START_SECTION:kik-product-categories-hp (INDEX:74) */
/* Binding host for the progress bar — layout-transparent. */
  kik-product-categories-hp {
    display: block;
    width: 100%;
  }

  /* ── Inner column — header / track / controls, gap steps 24 → 32. Flex
     column so the display:none Swiper config <script> adds no phantom gap. ── */
  .section-kik-product-categories-hp__inner {
    display: flex;
    flex-direction: column;
    gap: var(--kik-spacing-xl);
    width: 100%;
  }
  .section-kik-product-categories-hp__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kik-spacing-4);
    width: 100%;
  }

  /* ── Header typography (base theme styles h1-h6 / p unlayered — re-assert
     class-qualified; colour follows the recolorable scheme) ──────────────── */
  .section-kik-product-categories-hp__kicker {
    font-size: var(--kik-text-size-body-sm);
    line-height: var(--kik-line-height-body);
    color: rgba(var(--color-normal-text-rgb), 0.7);
    margin: 0;
  }
  .section-kik-product-categories-hp__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    color: var(--color-normal-text);
    margin: 0;
  }
  .section-kik-product-categories-hp__description {
    font-size: var(--kik-text-size-body-md);
    line-height: var(--kik-line-height-body);
    color: rgb(var(--kik-color-text-secondary)); /* solid #4d4d4d per Figma (was rgba opacity) */
    margin: 0;
  }

  /* ── Track (.swiper) — carousel layout is Swiper's; grid mode is forced per
     breakpoint by the ID-scoped <style> the section emits. ───────────────── */
  .section-kik-product-categories-hp__track {
    width: 100%;
  }
  .section-kik-product-categories-hp__slide {
    height: auto;
  }
  .section-kik-product-categories-hp__slide > .section-kik-product-categories-hp__tile {
    width: 100%;
  }

  /* ── Tile — a fixed-height media box over a centered title ─────────────── */
  .section-kik-product-categories-hp__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kik-spacing-16);
    min-width: 0;
    width: 100%;
    text-decoration: none;
    color: inherit;
  }
  /* Media box — mobile is a 4:3 ratio (≈150px tall at the 200px carousel tile,
     per Figma) so it scales with the tile width; desktop overrides to a fixed
     210px below. Product cutouts sit on the light surface (matches Figma; not
     edge-to-edge crops). */
  .section-kik-product-categories-hp__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--kik-radius-md);
    background: rgb(var(--kik-color-bg-surface));
    overflow: hidden;
  }
  @media screen and (min-width: 750px) {
    .section-kik-product-categories-hp__media {
      height: 210px;
    }
  }
  /* Mobile: COVER — the 4:3 mobile box is narrower than the landscape source
     images, so contain would leave big vertical gaps and the product reads
     small. Cover fills the box (cropping the transparent side-margins, not the
     product), matching Figma's filled tiles. Desktop box is wide enough for the
     landscape image, so it stays CONTAIN (whole cutout shown). */
  .section-kik-product-categories-hp__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  @media screen and (min-width: 750px) {
    .section-kik-product-categories-hp__img {
      object-fit: contain;
    }
  }
  .section-kik-product-categories-hp__img--placeholder {
    object-fit: cover;
    background: rgb(var(--kik-color-bg-alt-1));
  }
  .section-kik-product-categories-hp__title {
    line-height: var(--kik-line-height-body);
    letter-spacing: normal;
    color: var(--color-normal-text);
    margin: 0;
  }

  /* ── Carousel controls — progress bar + prev/next arrows. Shown only on
     breakpoints in carousel mode (toggled by the ID-scoped <style>); display
     set there so the base stays hidden until known. ──────────────────────── */
  .section-kik-product-categories-hp__controls {
    align-items: center;
    gap: var(--kik-spacing-24);
    width: 100%;
  }

  /* Progress bar — a left-anchored fill whose LENGTH grows as the carousel
     advances (driven by <kik-product-categories>). */
  .section-kik-product-categories-hp__progress {
    position: relative;
    flex: 1 1 0;
    block-size: 3px;
    border-radius: var(--kik-radius-xsm);
    background: rgb(var(--kik-color-bg-page)); /* white track per Figma */
    overflow: hidden;
  }
  .section-kik-product-categories-hp__progress-fill {
    display: block;
    block-size: 100%;
    inline-size: 15%;
    border-radius: var(--kik-radius-xsm);
    background: var(--color-normal-text);
    transition: inline-size 0.3s ease;
  }

  .section-kik-product-categories-hp__nav {
    display: flex;
    align-items: center;
    gap: var(--kik-spacing-16);
    flex: 0 0 auto;
  }
  /* Swiper nav buttons — reset Swiper's default size/arrow, paint Figma chip. */
  .section-kik-product-categories-hp__arrow.swiper-button-prev,
  .section-kik-product-categories-hp__arrow.swiper-button-next {
    position: static;
    margin: 0;
    inline-size: 24px;
    block-size: 24px;
    padding: 0;
    border: none;
    border-radius: var(--kik-radius-pill);
    background: rgb(var(--kik-color-bg-page));
    color: rgb(var(--kik-color-text-primary));
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .section-kik-product-categories-hp__arrow.swiper-button-prev::after,
  .section-kik-product-categories-hp__arrow.swiper-button-next::after {
    content: none;
  }
  .section-kik-product-categories-hp__arrow svg {
    inline-size: auto;
    block-size: 10px;
  }
  /* The chevron is stroke-only. The theme's global `svg path { fill }` rule
     overrides the SVG's fill="none" attribute (CSS beats presentation attrs),
     filling the open path into a solid triangle — force it back off here. */
  .section-kik-product-categories-hp__arrow svg path {
    fill: none;
  }
  /* The carousel-arrow points right; flip it for the previous button. */
  .section-kik-product-categories-hp__arrow.swiper-button-prev svg {
    transform: rotate(180deg);
  }
  .section-kik-product-categories-hp__arrow.swiper-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
/* END_SECTION:kik-product-categories-hp */

/* START_SECTION:kik-product-categories (INDEX:75) */
/* ── Section background ──────────────────────────────────────── */
.section-kik-product-categories {
  background: rgb(var(--kik-color-bg-surface));
}

/* ── Container layout ────────────────────────────────────────── */
.section-kik-product-categories__layout {
  display: flex;
  flex-direction: column;
  gap: var(--kik-spacing-xl); /* 24px mobile → 32px desktop */
}

/* ── Header ──────────────────────────────────────────────────── */
.section-kik-product-categories__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

.section-kik-product-categories__kicker {
  font-size: var(--kik-text-size-body-sm);
  line-height: var(--kik-line-height-body);
  margin: 0;
}

.section-kik-product-categories__heading {
  line-height: var(--kik-line-height-heading);
  letter-spacing: normal;
  margin: 0;
}

.section-kik-product-categories__description {
  font-size: var(--kik-text-size-body-md); /* 14px mobile / 16px desktop — matches Figma */
  line-height: var(--kik-line-height-body);
  margin: 0;
}

.section-kik-product-categories__description p {
  margin: 0;
}

/* ── Slider wrapper ──────────────────────────────────────────── */
.section-kik-product-categories__slider {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* ── Track ───────────────────────────────────────────────────── */
.section-kik-product-categories__track {
  display: flex;
  gap: var(--kik-spacing-xl); /* 24px mobile → 32px desktop */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.section-kik-product-categories__track::-webkit-scrollbar {
  display: none;
}

@media (min-width: 750px) {
  .section-kik-product-categories__track {
    overflow-x: visible;
    scroll-snap-type: none;
    align-items: stretch;
  }
}

/* ── Desktop: Slider mode ────────────────────────────────────── */
@media (min-width: 750px) {
  .section-kik-product-categories__slider--desktop-slider .section-kik-product-categories__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    height: auto; /* size to content — the image box is now aspect-driven */
    scrollbar-width: none;
  }
  .section-kik-product-categories__slider--desktop-slider .section-kik-product-categories__track::-webkit-scrollbar {
    display: none;
  }
  .section-kik-product-categories__slider--desktop-slider .section-kik-product-categories__card {
    scroll-snap-align: start;
  }
  .section-kik-product-categories__slider--desktop-slider .section-kik-product-categories__pagination {
    display: flex;
  }
}

/* ── Desktop: Grid mode ──────────────────────────────────────── */
/* Flex-wrap (not CSS grid) so a partial last row centers instead of leaving an
   empty trailing cell. Cards keep their 1/N width from the base desktop rule. */
@media (min-width: 750px) {
  .section-kik-product-categories__slider--desktop-grid .section-kik-product-categories__track {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    height: auto;
  }
  .section-kik-product-categories__slider--desktop-grid .section-kik-product-categories__card {
    height: auto;
  }
  .section-kik-product-categories__slider--desktop-grid .section-kik-product-categories__image-wrap {
    flex: 0 0 auto;
    /* height comes from the 2:1 aspect-ratio on the base rule */
  }
}

/* ── Card ────────────────────────────────────────────────────── */
.section-kik-product-categories__card {
  flex: none;
  /* Mobile: width = (100% - (N-1) * gap) / N, gap = 24px (--kik-spacing-xl mobile) */
  width: calc((100% - (var(--kik-pc-cols-mobile, 2) - 1) * 24px) / var(--kik-pc-cols-mobile, 2));
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  scroll-snap-align: start;

}

@media (min-width: 750px) {
  .section-kik-product-categories__card {
    /* Desktop: width = (100% - (N-1) * gap) / N, gap = 32px (--kik-spacing-xl desktop) */
    flex: 0 0 calc((100% - (var(--kik-pc-cols, 5) - 1) * 32px) / var(--kik-pc-cols, 5));
    min-width: 0;
    height: 100%;
    scroll-snap-align: none;
  }
}

.section-kik-product-categories__card-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}



/* ── Image wrapper ───────────────────────────────────────────── */
.section-kik-product-categories__image-wrap {
  /* Fixed Figma media size (270.4 × 211). */
  width: 270.4px;
  height: 211px;
  background: rgb(var(--kik-color-bg-surface));
  border-radius: var(--kik-radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* max-height: 211px; */
}

.section-kik-product-categories__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── Card label ──────────────────────────────────────────────── */
.section-kik-product-categories__label {
  font-family: var(--kik-text-font-heading);
  font-weight: var(--kik-font-weight-semibold);
  font-size: var(--kik-text-size-body-lg); /* 16px mobile / 18px desktop */
  line-height: var(--kik-line-height-body);
  color: rgb(var(--kik-color-text-primary));
  text-align: center;
  margin: 0;
  flex-shrink: 0;
}

/* ── Pagination row (mobile only) ────────────────────────────── */
.section-kik-product-categories__pagination {
  display: flex;
  align-items: center;
  gap: 24px;
}

@media (min-width: 750px) {
  .section-kik-product-categories__pagination {
    display: none;
  }
}

/* ── Progress bar ────────────────────────────────────────────── */
.section-kik-product-categories__progress-bar {
  flex: 1 1 0;
  height: 3px;
  background: rgb(var(--kik-color-action-secondary)); /* white */
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.section-kik-product-categories__progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgb(var(--kik-color-action-primary)); /* black */
  border-radius: 2px;
  width: 0%;
  transition: width 0.15s ease;
}

/* ── Nav buttons ─────────────────────────────────────────────── */
.section-kik-product-categories__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.section-kik-product-categories__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: rgb(var(--kik-color-action-secondary)); /* white */
  border: none;
  border-radius: var(--kik-radius-pill);
  color: rgb(var(--kik-color-action-primary)); /* black icon */
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.section-kik-product-categories__nav-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
/* Mobile: image box is the Figma 200 × 150 (≈ 4:3) card media (desktop keeps the
   2:1 on the base rule below). The card's ~192px total height falls out of this
   box + 16px gap + label — no need to size the card-inner itself. */
   @media (max-width: 749px) {
  .section-kik-product-categories__image-wrap {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 200 / 150.43 !important;
  }
}
@media screen and (max-width: 430px) {
  .section-kik-product-categories__card {
    max-width: 200px;
  }
}
/* END_SECTION:kik-product-categories */

/* START_SECTION:kik-product-grid (INDEX:76) */
/* Zero out the base theme's .section padding on both the outer shopify
     wrapper and the inner sht-collections-compare — both carry .section and
     would otherwise stack with .kik-section-container's padding.
     Double-class / descendant gives (0,2,0) specificity — beats bare .section (0,1,0). */
  .section-kik-product-grid.section {
    padding: 0;
  }
  .section-kik-product-grid .sections-collections-compare {
    padding: 0;
  }

  /* Class-qualified, unlayered — beats the base theme's bare h1-h6 / p rules.
     See docs/kik-guide/section-structure.md cascade note. */
  .section-kik-product-grid__kicker {
    font-size: var(--kik-text-size-body-sm);
    line-height: var(--kik-line-height-body);
    margin: 0;
  }
  .section-kik-product-grid__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    margin: 0;
  }
  .section-kik-product-grid__description {
    font-size: var(--kik-text-size-body-lg);
    line-height: var(--kik-line-height-body);
  }
  .section-kik-product-grid__description > :first-child { margin-top: 0; }
  .section-kik-product-grid__description > :last-child  { margin-bottom: 0; }
/* END_SECTION:kik-product-grid */

/* START_SECTION:kik-proof (INDEX:77) */
.section-kik-proof {
    --ink: #0a0a0a;
    --muted: #5a5a5a;
    --line: #e6e6e6;
    --tint: #f6f6f6;
    --r: 14px;
    --pill: 999px;
    color: var(--ink);
    padding: var(--sec-pt-m, 64px) 0 var(--sec-pb-m, 64px);
  }
  .section-kik-proof--bg-tint { background: var(--tint); }
  @media screen and (min-width: 750px) {
    .section-kik-proof { padding: var(--sec-pt-d, 80px) 0 var(--sec-pb-d, 80px); }
  }

  .section-kik-proof__shell { width: min(100% - 2.5rem, 1120px); margin-inline: auto; }

  .section-kik-proof__head { text-align: center; max-width: 680px; margin: 0 auto 2.75rem; }
  .section-kik-proof__heading {
    margin: 0;
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 600;
  }
  .section-kik-proof__sub { margin: 0.9rem 0 0; color: var(--muted); font-size: 1.02rem; line-height: 1.55; }

  /* —— KPI strip —— */
  .section-kik-proof__kpis {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: 2rem;
  }
  .section-kik-proof__kpi {
    padding: 1.5rem 1rem 1.4rem;
    text-align: center;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 0.45rem;
    justify-items: center;
    border-right: 1px solid var(--line);
  }
  .section-kik-proof__kpi:last-child { border-right: 0; }
  .section-kik-proof__kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: grid;
    place-items: center;
    margin-bottom: 0.15rem;
  }
  .section-kik-proof__kpi-icon svg { width: 22px; height: 22px; display: block; }
  .section-kik-proof__kpi-value {
    margin: 0;
    font-size: clamp(1.15rem, 1.6vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
  }
  .section-kik-proof__kpi-note { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.4; max-width: 16ch; }

  /* —— Endorse panel —— */
  .section-kik-proof__endorse {
    margin-top: 0.5rem;
    border: 1px solid #d6e2f0;
    border-radius: var(--r);
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 48%);
    padding: 2.15rem 0.75rem 1.35rem;
    position: relative;
  }
  .section-kik-proof__pill {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    margin: 0;
    background: var(--ink);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.4rem 1rem;
    border-radius: var(--pill);
    white-space: nowrap;
  }

  .section-kik-proof__erow { display: grid; grid-template-columns: repeat(6, 1fr); align-items: start; }
  .section-kik-proof__eitem {
    display: grid;
    grid-template-rows: 40px 36px auto;
    justify-items: center;
    align-content: start;
    gap: 0.35rem;
    padding: 0.5rem 0.6rem;
    text-align: center;
    border-right: 1px solid #e2e8f0;
    min-height: 132px;
  }
  .section-kik-proof__eitem:last-child { border-right: 0; }
  .section-kik-proof__eitem--award { grid-template-rows: 1fr auto; align-content: center; gap: 0.55rem; }

  .section-kik-proof__brand {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    line-height: 1.1;
    align-self: center;
  }
  .section-kik-proof__brand--default { font-size: 1.1rem; font-weight: 700; color: #111; }
  .section-kik-proof__brand--goodbed { font-size: 1.2rem; font-weight: 700; color: #0d7a6f; letter-spacing: -0.02em; text-transform: lowercase; }
  .section-kik-proof__brand--tiktok { font-size: 0.95rem; font-weight: 700; color: #111; }
  .section-kik-proof__tiktok {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: #111;
    color: #69c9d0;
    font-size: 0.7rem;
    font-weight: 700;
    box-shadow: 1px 1px 0 #ee1d52;
  }
  .section-kik-proof__brand--amazon {
    position: relative;
    flex-direction: column;
    font-size: 1.25rem;
    font-weight: 700;
    color: #111;
    letter-spacing: -0.03em;
    font-family: Arial, Helvetica, sans-serif;
    padding-bottom: 0.2rem;
  }
  .section-kik-proof__amazon-smile { width: 56px; height: 10px; margin-top: -2px; }
  .section-kik-proof__brand--walmart { font-size: 1.05rem; font-weight: 700; color: #0071ce; gap: 0.2rem; }
  .section-kik-proof__spark { color: #ffc220; font-size: 0.95rem; line-height: 1; }
  .section-kik-proof__brand--forbes { font-family: "Times New Roman", Times, Georgia, serif; font-size: 1.35rem; font-weight: 700; color: #111; letter-spacing: -0.02em; }
  .section-kik-proof__brand--award { position: relative; width: 88px; height: 40px; display: grid; place-items: center; align-self: end; }
  .section-kik-proof__brand--award svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .section-kik-proof__brand--award span {
    position: relative;
    z-index: 1;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.15;
    color: #111;
    text-align: center;
    text-transform: uppercase;
  }

  .section-kik-proof__rating {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 28px;
    font-weight: 700;
    line-height: 1;
  }
  .section-kik-proof__stars { letter-spacing: 0.02em; font-size: 0.85rem; }
  .section-kik-proof__rating--default { color: #111; font-size: 0.95rem; }
  .section-kik-proof__rating--goodbed { color: #1f9d57; font-size: 0.92rem; }
  .section-kik-proof__rating--goodbed .section-kik-proof__stars { color: #1f9d57; }
  .section-kik-proof__rating--tiktok { color: #e91e63; font-size: 1.55rem; letter-spacing: -0.03em; }
  .section-kik-proof__rating--amazon { color: #111; font-size: 0.92rem; }
  .section-kik-proof__rating--amazon .section-kik-proof__stars { color: #ff9900; }
  .section-kik-proof__rating--walmart { color: #0071ce; font-size: 1.05rem; }
  .section-kik-proof__vetted {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1.5px solid #2f6fed;
    border-radius: 6px;
    padding: 0.2rem 0.45rem 0.2rem 0.3rem;
    color: #2f6fed;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .section-kik-proof__vetted-check {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #2f6fed;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.58rem;
    line-height: 1;
  }

  .section-kik-proof__edesc { margin: 0; font-size: 0.8rem; color: #222; line-height: 1.35; font-weight: 400; }

  .section-kik-proof__foot {
    margin-top: 1.35rem;
    padding-top: 1.15rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 0.55rem 0.85rem;
    text-align: left;
    max-width: 720px;
    margin-inline: auto;
  }
  .section-kik-proof__shield { width: 22px; height: 22px; color: var(--ink); display: inline-grid; place-items: center; }
  .section-kik-proof__shield svg { width: 18px; height: 18px; }
  .section-kik-proof__trust { display: grid; gap: 0.35rem; flex: 1; min-width: min(100%, 280px); }
  .section-kik-proof__trust strong { color: var(--ink); font-weight: 600; font-size: 1.02rem; line-height: 1.3; }
  .section-kik-proof__trust span { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

  @media (max-width: 1024px) {
    .section-kik-proof__kpis { grid-template-columns: repeat(3, 1fr); }
    .section-kik-proof__kpi { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .section-kik-proof__kpi:nth-child(3n) { border-right: 0; }
    .section-kik-proof__erow { grid-template-columns: repeat(3, 1fr); }
    .section-kik-proof__eitem { border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
    .section-kik-proof__eitem:nth-child(3n) { border-right: 0; }
  }
  @media (max-width: 768px) {
    .section-kik-proof__kpis,
    .section-kik-proof__erow { grid-template-columns: 1fr; }
    /* Single-column: one divider between every item, none on the last */
    .section-kik-proof__kpi { border-right: 0; border-bottom: 1px solid var(--line); }
    .section-kik-proof__kpi:last-child { border-bottom: 0; }
    .section-kik-proof__eitem { border-right: 0; border-bottom: 1px solid #e2e8f0; }
    .section-kik-proof__eitem:last-child { border-bottom: 0; }
    /* Keep the shield icon to the left of the title on mobile */
    .section-kik-proof__foot { flex-wrap: nowrap; }
    .section-kik-proof__trust { min-width: 0; }
  }
/* END_SECTION:kik-proof */

/* START_SECTION:kik-reviews (INDEX:78) */
/* ── Section background & overflow ── */
.section-kik-reviews {
  background-color: rgb(var(--kik-color-bg-surface));
  overflow-x: clip;
}

/* ── Container flex + gap ── */
.section-kik-reviews .kik-section-container {
  display: flex;
  flex-direction: column;
  gap: var(--kik-spacing-2xl);
}

/* ── Header ── */
.section-kik-reviews__header {
  gap: var(--kik-spacing-4);
}

.section-kik-reviews__kicker {
  font-size: var(--kik-text-size-body-md);
  font-weight: var(--kik-font-weight-regular);
  line-height: var(--kik-line-height-body);
  color: rgb(var(--kik-color-text-primary));
  margin: 0;
}

.section-kik-reviews__heading {
  line-height: var(--kik-line-height-heading);
  letter-spacing: normal;
  color: rgb(var(--kik-color-text-primary));
  margin: 0;
}

.section-kik-reviews__description p {
  font-size: var(--kik-text-size-body-lg);
  line-height: var(--kik-line-height-body);
  color: rgb(var(--kik-color-text-secondary));
  margin: 0;
}

/* ── Carousel wrapper — bleed right, keep left padding ── */
.section-kik-reviews .kik-reviews__carousel-wrapper {
  margin-inline-end: -16px;
}
@media screen and (min-width: 750px) {
  .section-kik-reviews .kik-reviews__carousel-wrapper {
    margin-inline-end: -60px;
  }
}

/* ── Swiper — allow right bleed; section overflow-x:clip handles the edge ── */
.section-kik-reviews .swiper {
  overflow: visible;
}

/* ── Swiper — equal-height slides ── */
.section-kik-reviews .swiper-wrapper {
  align-items: stretch;
}
.section-kik-reviews .swiper-slide {
  height: auto;
}

/* ── Navigation arrows ── */
.section-kik-reviews .kik-reviews__btn-prev,
.section-kik-reviews .kik-reviews__btn-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: rgb(var(--kik-color-bg-page));
  border: 1px solid rgb(var(--kik-color-border-subtle));
  border-radius: var(--kik-radius-full, 9999px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.section-kik-reviews .kik-reviews__btn-prev {
  left: 0;
}
.section-kik-reviews .kik-reviews__btn-next {
  right: 0;
}
.section-kik-reviews:hover .kik-reviews__btn-prev,
.section-kik-reviews:hover .kik-reviews__btn-next,
.section-kik-reviews .kik-reviews__btn-prev:focus-visible,
.section-kik-reviews .kik-reviews__btn-next:focus-visible {
  opacity: 1;
  visibility: visible;
}
.section-kik-reviews .kik-reviews__btn-prev.swiper-button-disabled,
.section-kik-reviews .kik-reviews__btn-next.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ── Card — fills full carousel item height for equal-height rows ── */
.section-kik-reviews__card {
  height: 100%;
  background-color: rgb(var(--kik-color-bg-page));
  border-radius: var(--kik-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Card media ── */
.section-kik-reviews__card-media {
  block-size: 256px;
  flex-shrink: 0;
  overflow: hidden;
}

.section-kik-reviews__card-img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.section-kik-reviews__card-placeholder {
  inline-size: 100%;
  block-size: 100%;
  background-color: rgb(var(--kik-color-bg-alt-1));
  display: block;
}

/* ── Card content ── */
.section-kik-reviews__card-content {
  display: flex;
  flex-direction: column;
  gap: var(--kik-spacing-32);
  padding-inline: 20px;
  padding-block-start: var(--kik-spacing-24);
  padding-block-end: var(--kik-spacing-40);
  flex: 1;
}

/* ── Rating row ── */
.section-kik-reviews__rating {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kik-spacing-8);
}

.section-kik-reviews__stars {
  display: flex;
  align-items: center;
  color: rgb(var(--kik-color-bg-star));
}

.section-kik-reviews__star {
  flex-shrink: 0;
  inline-size: 20px;
  block-size: 20px;
  display: block;
}

.section-kik-reviews__star--empty {
  color: rgb(var(--kik-color-border-subtle));
}

.section-kik-reviews__date {
  font-size: var(--kik-text-size-body-xsm);
  font-weight: var(--kik-font-weight-regular);
  line-height: var(--kik-line-height-body);
  color: rgb(var(--kik-color-text-primary));
  white-space: nowrap;
}

/* ── Review body ── */
.section-kik-reviews__review {
  display: flex;
  flex-direction: column;
  gap: var(--kik-spacing-4);
  flex: 1;
}

.section-kik-reviews__review-title {
  font-size: var(--kik-text-size-body-lg);
  font-weight: var(--kik-font-weight-semibold);
  line-height: var(--kik-line-height-body);
  color: rgb(var(--kik-color-text-primary));
  margin: 0;
}

.section-kik-reviews__review-text {
  font-size: var(--kik-text-size-body-sm);
  font-weight: var(--kik-font-weight-regular);
  line-height: var(--kik-line-height-body);
  color: rgb(var(--kik-color-text-secondary));
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  -webkit-box-orient: vertical;
}

/* ── Reviewer name ── */
.section-kik-reviews__reviewer {
  font-size: var(--kik-text-size-body-sm);
  font-weight: var(--kik-font-weight-semibold);
  line-height: var(--kik-line-height-body);
  color: rgb(var(--kik-color-text-primary));
  margin: 0;
}
/* END_SECTION:kik-reviews */

/* START_SECTION:kik-rich-text (INDEX:79) */
/* Class-qualified, unlayered — beats the base theme's bare h1-h6 / p rules
     (which are unlayered too, so layered tw: utilities can't win). See
     docs/kik-guide/section-structure.md cascade note. */
  .section-kik-rich-text__kicker {
    font-size: var(--kik-text-size-body-sm);
    line-height: var(--kik-line-height-body);
    margin: 0;
  }
  .section-kik-rich-text__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    margin: 0;
  }
  /* Description is a richtext field — wrapper is a <div> so merchant <p>/<h*>/
     <ul>/etc. render inside. Reset outer margins so the inner content owns the
     spacing rhythm (the .rte class supplies the inner type styles). */
  .section-kik-rich-text__description {
    font-size: var(--kik-text-size-body-lg);
    line-height: var(--kik-line-height-body);
  }
  .section-kik-rich-text__description > :first-child { margin-top: 0; }
  .section-kik-rich-text__description > :last-child  { margin-bottom: 0; }
/* END_SECTION:kik-rich-text */

/* START_SECTION:kik-sleep-scene (INDEX:80) */
.section-kik-scene {
    --ink: #0a0a0a;
    --muted: #5a5a5a;
    --tint: #f6f6f6;
    --pill: 999px;
    color: var(--ink);
    padding: var(--sec-pt-m, 64px) 0 var(--sec-pb-m, 64px);
  }
  .section-kik-scene--bg-tint { background: var(--tint); }
  @media screen and (min-width: 750px) {
    .section-kik-scene { padding: var(--sec-pt-d, 80px) 0 var(--sec-pb-d, 80px); }
  }

  .section-kik-scene__shell { width: min(100% - 2.5rem, 1120px); margin-inline: auto; }

  .section-kik-scene__head { text-align: center; max-width: 680px; margin: 0 auto 2.75rem; }
  .section-kik-scene__heading {
    margin: 0;
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 600;
  }
  .section-kik-scene__sub { margin: 0.9rem 0 0; color: var(--muted); font-size: 1.02rem; line-height: 1.55; }

  .section-kik-scene__scene { max-width: 960px; margin-inline: auto; }
  .section-kik-scene__visual {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #ddd;
    aspect-ratio: 16 / 10;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
  }
  .section-kik-scene__visual > img,
  .section-kik-scene__visual > .section-kik-scene__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .section-kik-scene__callouts {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
  }
  .section-kik-scene__callout {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.4rem 0.7rem 0.4rem 0.45rem;
    border-radius: var(--pill);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    white-space: nowrap;
  }
  .section-kik-scene__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ink);
    flex-shrink: 0;
  }

  @media (max-width: 768px) {
    .section-kik-scene__visual { aspect-ratio: 4 / 5; }
    .section-kik-scene__callout { font-size: 0.7rem; padding: 0.32rem 0.55rem 0.32rem 0.4rem; }
  }
/* END_SECTION:kik-sleep-scene */

/* START_SECTION:kik-slideshow (INDEX:81) */
/* Heading tag + size are per-slide settings. `tw:text-h*` can't drive the size
     (the base theme styles h1-h6 in unlayered CSS, which beats layered `tw:`
     utilities), so font-size is set inline from the heading_size token. This
     class re-asserts the size-independent heading bits for any h1-h6 tag. */
  .section-kik-slideshow__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    margin: 0;
  }

  /* Slide height is set per-instance from the merchant's mobile + desktop range
     settings via the ID-scoped style block above. */
  .section-kik-slideshow__slide {
    position: relative;
    overflow: hidden;
    background-color: rgb(var(--kik-color-bg-inverse));
  }

  .section-kik-slideshow__scrim {
    position: absolute;
    inset: 0;
    /* Figma scrim — top half fully transparent, then fades to 50% black at the bottom. */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50.1%, rgba(0, 0, 0, 0.5) 100%);
  }

  .section-kik-slideshow__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* The kik typography override `body p { font-size; line-height }` is
     unlayered, so the layered `tw:text-body-lg` / `tw:leading-[1.6]` utilities
     are silently beaten — re-assert the Figma body-lg size + 1.6 line-height
     here (class-qualified, unlayered → wins). Margin is reset so the theme's
     `p` margin doesn't add an unwanted gap below the copy. */
  .section-kik-slideshow__description {
    font-size: var(--kik-text-size-body-lg);
    line-height: 1.6;
    margin-bottom: 0;
  }

  /* Trim the caption box to cap-height/baseline so the uppercase letters
     optically centre against the star row (flex `items-center` then aligns
     the actual caps, not the leading-padded line box). */
  .section-kik-slideshow__caption {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }

  .section-kik-slideshow__star {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  /* Dots sit inside the section's vertical padding (--kik-spacing-xl).
     `--swiper-pagination-bullet-size` is Swiper's own variable for bullet
     width/height — declared here so the bullet rules and the items-container
     padding-bottom (below) share the same source of truth. */
  .section-kik-slideshow {
    --swiper-pagination-bottom: var(--kik-spacing-xl);
    --swiper-pagination-bullet-size: 8px;
  }
  /* Container collapses to dot height — Swiper's default text-align/inline-block
     leaves a taller line-box around the dots, adding visible vertical space. */
  .section-kik-slideshow .swiper-pagination {
    display: flex;
    justify-content: center;
  }
  /* Slideshow's "default" block padding — the pagination-aware override that
     keeps the content ↔ pagination gap at --kik-spacing-xl on both breakpoints.
     pb = xl (gap above dots) + bullet-size (dot/container height) + xl (--swiper-pagination-bottom).
     Specificity (0,2,0) — the global block_padding modifier rules (0,3,0) and the
     ID-scoped custom override beat this when the merchant picks a non-default tier. */
  .section-kik-slideshow__slide > .kik-content-container {
    --section-kik-padding-top:    var(--kik-spacing-xl);
    --section-kik-padding-bottom: calc(var(--kik-spacing-xl) * 2 + var(--swiper-pagination-bullet-size));
  }
  .section-kik-slideshow .swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-size);
    height: var(--swiper-pagination-bullet-size);
    background-color: rgb(var(--kik-color-bg-page));
    opacity: 0.2;
    border-radius: var(--kik-radius-pill);
    transition: opacity 0.3s ease;
  }
  .section-kik-slideshow .swiper-pagination-bullet-active {
    opacity: 1;
  }
/* END_SECTION:kik-slideshow */

/* START_SECTION:kik-solutions-bridge (INDEX:82) */
.section-kik-vs {
    --ink: #0a0a0a;
    --muted: #5a5a5a;
    --line: #e6e6e6;
    --tint: #f6f6f6;
    --r: 14px;
    color: var(--ink);
    padding: var(--sec-pt-m, 64px) 0 var(--sec-pb-m, 64px);
  }
  .section-kik-vs--bg-tint { background: var(--tint); }
  @media screen and (min-width: 750px) {
    .section-kik-vs { padding: var(--sec-pt-d, 80px) 0 var(--sec-pb-d, 80px); }
  }

  .section-kik-vs__shell { width: min(100% - 2.5rem, 1120px); margin-inline: auto; }

  .section-kik-vs__head { text-align: center; max-width: 680px; margin: 0 auto 2.75rem; }
  .section-kik-vs__heading {
    margin: 0;
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 600;
  }
  .section-kik-vs__sub { margin: 0.9rem 0 0; color: var(--muted); font-size: 1.02rem; line-height: 1.55; }

  .section-kik-vs__grid {
    display: grid;
    grid-template-columns: 1fr auto 1.15fr;
    gap: 1rem;
    align-items: stretch;
  }

  .section-kik-vs__col {
    border-radius: var(--r);
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--line);
    background: #fff;
  }
  .section-kik-vs__col--pain { background: #fafafa; color: #6b6b6b; }
  .section-kik-vs__col--gain {
    background: #fff;
    color: var(--ink);
    border-color: var(--ink);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    position: relative;
  }

  .section-kik-vs__col-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1.15rem;
    padding-bottom: 0.55rem;
    border-bottom: 2px solid currentColor;
    display: inline-block;
  }
  .section-kik-vs__col--pain .section-kik-vs__col-title { color: #5c5c5c; }
  .section-kik-vs__col--gain .section-kik-vs__col-title { color: var(--ink); }

  .section-kik-vs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
  .section-kik-vs__item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--ink);
    font-weight: 500;
    font-size: 0.98rem;
  }
  .section-kik-vs__item:last-child { border-bottom: 0; }
  .section-kik-vs__col--pain .section-kik-vs__item { color: #555; font-weight: 400; }

  .section-kik-vs__mark {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
  }
  .section-kik-vs__col--pain .section-kik-vs__mark { background: #d8d8d8; color: #555; }
  .section-kik-vs__col--gain .section-kik-vs__mark { background: var(--ink); color: #fff; }

  .section-kik-vs__bridge {
    align-self: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 1.1rem;
  }

  @media (max-width: 768px) {
    .section-kik-vs__grid { grid-template-columns: 1fr; }
    .section-kik-vs__bridge {
      justify-self: center;
      margin: -0.25rem auto;
      transform: rotate(90deg); /* square circle → arrow points down, no stretch */
    }
  }
/* END_SECTION:kik-solutions-bridge */

/* START_SECTION:kik-story-timeline (INDEX:83) */
/* ── Header ──────────────────────────────────────────────── */
.section-kik-timeline__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kik-spacing-4);
  width: 100%;
  margin-bottom: var(--kik-spacing-24);
}
.section-kik-timeline__header p{
  margin:0;
}
/* ── Swiper wrapper ──────────────────────────────────────── */
.kik-timeline-swiper {
  display: flex;
  gap: var(--kik-spacing-8);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}

.section-kik-timeline__arrow {
  flex: 0 0 var(--kik-spacing-24);
}

/* ── Slide ───────────────────────────────────────────────── */
.section-kik-timeline__slide {
  width: 100%;
  height: auto;
}

/* ── Card ────────────────────────────────────────────────── */
.kik-timeline-card {
  display: flex;
  flex-direction: column;
  background-color: var(--White, #fff);
  border-radius: var(--kik-radius-md, 16px);
  overflow: hidden;
  height: 100%;
  gap: 0;
}

/* ── Text panel ──────────────────────────────────────────── */
.kik-timeline-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--kik-spacing-4);
  flex: 0 0 auto;
  padding: var(--kik-spacing-24);
  text-align: center;
  align-items: center;
}

/* Year badge */
.kik-timeline-card__year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--kik-color-bg-inverse, 20 20 20));
  color: var(--White, #fff);
  font-size: var(--kik-text-size-body-md);
  font-weight: var(--kik-font-weight-semibold, 600);
  padding: var(--kik-spacing-4) var(--kik-spacing-8);
  border-radius: var(--kik-radius-xsm);
  width: fit-content;
  line-height: var(--kik-line-height-body);
}

/* Title */
.kik-timeline-card__title {
  margin: 0;
  font-size: var(--kik-text-size-h5);
  line-height: var(--kik-line-height-heading, 1.2);
  color: rgb(var(--kik-color-text-primary, 20 20 20));
}

/* Body */
.kik-timeline-card__body {
  margin: 0;
  font-size: var(--kik-text-size-body-md);
  line-height: var(--kik-line-height-body);
}

/* ── Image panel ─────────────────────────────────────────── */
.kik-timeline-card__media {
  flex: 1 1 auto;
  overflow: hidden;
  height: 192px;
}

.kik-timeline-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Arrow buttons ───────────────────────────────────────── */
.section-kik-timeline__arrow.swiper-button-prev,
.section-kik-timeline__arrow.swiper-button-next {
  position: static;
  margin: 0;
  inline-size: 24px;
  block-size: 24px;
  padding: 0;
  border: none;
  border-radius: var(--kik-radius-pill);
  background: rgb(var(--kik-color-bg-page));
  color: rgb(var(--kik-color-text-primary));
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.section-kik-timeline__arrow.swiper-button-prev::after,
.section-kik-timeline__arrow.swiper-button-next::after {
  content: none;
}
.section-kik-timeline__arrow svg {
  inline-size: auto;
  block-size: 10px;
}
.section-kik-timeline__arrow svg path {
  fill: none;
}
.section-kik-timeline__arrow.swiper-button-prev svg {
  transform: rotate(180deg);
}
.section-kik-timeline__arrow.swiper-button-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════
 *  Bottom timeline nav
 * ════════════════════════════════════════════════════════════ */
.kik-timeline-nav {
  margin-top: var(--kik-spacing-24);
}

/* ── Stops row — reference frame for the absolute line ────── */
.kik-timeline-nav__stops {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.kik-timeline-nav__line {
  position: absolute;
  bottom: 6px;
  left: 0;      /* JS will override */
  width: 100%;  /* JS will override */
  height: var(--kik-spacing-4);
  background-color: rgb(var(--kik-color-border-subtle, 220 220 220));
  overflow: hidden;
  pointer-events: none;
}

/* Fill — starts at left:0 of the line (= first dot centre) and grows right */
.kik-timeline-nav__line-fill {
  display: block;
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 0%;   /* JS drives this 0→100% */
  background-color: rgb(var(--kik-color-text-primary, 20 20 20));
  transition: width 0.4s ease;
}

/* ── Each stop (button) ──────────────────────────────────── */
.kik-timeline-nav__stop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  flex: 1 1 0;
}

/* Year label */
.kik-timeline-nav__year {
    font-size: var(--kik-text-size-body-lg);
    line-height: var(--kik-line-height-body);
    color: rgb(var(--kik-color-text-secondary, 120 120 120));
    padding: var(--kik-spacing-4) var(--kik-spacing-8);
    background-color: rgb(var(--kik-color-border-subtle, 220 220 220));
    border-radius: var(--kik-radius-xsm);
    transition: color 0.2s ease, font-weight 0.2s ease;
    white-space: nowrap;
}

/* Dot */
.kik-timeline-nav__dot {
  display: block;
  width: var(--kik-spacing-16);
  height: var(--kik-spacing-16);
  border-radius: 50%;
  background-color:rgb(var(--kik-color-border-subtle, 220 220 220));
  transition: background-color 0.2s ease, transform 0.2s ease;
  position: relative; /* sits above the line */
  z-index: 1;
}

/* ── Active state ────────────────────────────────────────── */
.kik-timeline-nav__stop.is-active .kik-timeline-nav__year,
.kik-timeline-nav__stop.is-passed .kik-timeline-nav__year  {
  color: var(--White, #fff);
  background-color:rgb(var(--kik-color-bg-inverse, 20 20 20))
}

.kik-timeline-nav__stop.is-active .kik-timeline-nav__dot,
.kik-timeline-nav__stop.is-passed .kik-timeline-nav__dot {
  background-color: rgb(var(--kik-color-text-primary, 20 20 20));
}

/* ── Responsive ──────────────────────────────────────────── */
@media screen and (min-width: 750px) {
  .section-kik-timeline__header {
    margin-bottom: var(--kik-spacing-32);
  }
  .kik-timeline-swiper {
    gap: var(--kik-spacing-24);
  }
  .kik-timeline-card {
    flex-direction: row;
    align-items: stretch;
    min-height: 324px;
    gap: var(--kik-spacing-page-default);
  }
  .kik-timeline-card__content {
    width: calc(50% - var(--kik-spacing-page-default) / 2);
    text-align: left;
    align-items: flex-start;
  }
  .kik-timeline-card__media {
    min-height: unset;
    border-radius: 0 var(--kik-radius-lg, 16px) var(--kik-radius-lg, 16px) 0;
    height:324px;
  }
  .kik-timeline-nav {
    margin-top: var(--kik-spacing-32);
  }
}
.section-kik-timeline__carousel{
    flex: 0 0 calc(100% - 96px);
    width: calc(100% - 96px);
}
@media screen and (max-width: 750px) {
.section-kik-timeline__carousel{
    flex: 0 0 calc(100% - 64px);
    width: calc(100% - 64px);
}
}
/* END_SECTION:kik-story-timeline */

/* START_SECTION:kik-testimonials (INDEX:84) */
/* Binding host for the progress bar — flex column laying out header / carousel
     / controls, gap steps 24 → 32. */
  .section-kik-testimonials__inner {
    display: flex;
    flex-direction: column;
    gap: var(--kik-spacing-xl);
    width: 100%;
  }

  /* ── Header — centered kicker + heading (+ optional description). Colour
     follows the recolorable scheme. Base theme styles h1-h6 / p unlayered, so
     sizes/line-heights are re-asserted class-qualified to win on specificity. ─ */
  .section-kik-testimonials__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--kik-spacing-4);
    width: 100%;
  }
  .section-kik-testimonials__kicker {
    font-size: var(--kik-text-size-body-md);
    line-height: var(--kik-line-height-body);
    color: var(--color-normal-text);
    margin: 0;
  }
  .section-kik-testimonials__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    color: var(--color-normal-text);
    margin: 0;
  }
  .section-kik-testimonials__description {
    font-size: var(--kik-text-size-body-md);
    line-height: var(--kik-line-height-body);
    color: rgba(var(--color-normal-text-rgb), 0.7);
    margin: 0;
  }

  /* ── Carousel — slidesPerView:'auto'; each slide's WIDTH is set in the
     ID-scoped <style> the section emits (fixed-pixel peek). When peek is on the
     track bleeds to the right edge (also ID-scoped) so the sliver sits at the
     viewport edge with the left content-aligned; Swiper clips inside it. ───── */
  .section-kik-testimonials__carousel {
    display: block;
    width: 100%;
  }

  /* Slides stretch to a common height (Swiper's flex wrapper); the card fills
     it via tw:h-full, so every card matches the tallest regardless of review
     length. `height: auto` is the cross-axis (lets stretch equalise) — the
     inline width is set per breakpoint by the ID-scoped <style>. */
  .section-kik-testimonials__slide {
    height: auto;
  }

  /* ── Carousel controls — progress bar + prev/next arrows. Mobile only:
     desktop overflows by drag (matches the Figma desktop frame). ──────────── */
  .section-kik-testimonials__controls {
    display: flex;
    align-items: center;
    gap: var(--kik-spacing-24);
    width: 100%;
  }
  @media screen and (min-width: 750px) {
    .section-kik-testimonials__controls {
      display: none;
    }
  }

  /* Progress bar — a left-anchored fill whose LENGTH grows as the carousel
     advances (driven by <kik-testimonials>). Track/fill follow the scheme so
     they read on the recoloured surface. */
  .section-kik-testimonials__progress {
    position: relative;
    flex: 1 1 0;
    block-size: 3px;
    border-radius: var(--kik-radius-xsm);
    background: rgba(var(--color-normal-text-rgb), 0.15);
    overflow: hidden;
  }
  .section-kik-testimonials__progress-fill {
    display: block;
    block-size: 100%;
    inline-size: 15%;
    border-radius: var(--kik-radius-xsm);
    background: var(--color-normal-text);
    transition: inline-size 0.3s ease;
  }

  .section-kik-testimonials__nav {
    display: flex;
    align-items: center;
    gap: var(--kik-spacing-16);
    flex: 0 0 auto;
  }
  /* Swiper nav buttons — reset Swiper's default size/arrow, paint the Figma chip
     (white circle on the grey surface). */
  .section-kik-testimonials__arrow.swiper-button-prev,
  .section-kik-testimonials__arrow.swiper-button-next {
    position: static;
    margin: 0;
    inline-size: 24px;
    block-size: 24px;
    padding: 0;
    border: none;
    border-radius: var(--kik-radius-pill);
    background: rgb(var(--kik-color-bg-page));
    color: rgb(var(--kik-color-text-primary));
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  .section-kik-testimonials__arrow.swiper-button-prev::after,
  .section-kik-testimonials__arrow.swiper-button-next::after {
    content: none;
  }
  .section-kik-testimonials__arrow svg {
    inline-size: auto;
    block-size: 10px;
  }
  /* The chevron is stroke-only. The theme's global `svg path { fill }` rule
     overrides the SVG's fill="none" attribute (CSS beats presentation attrs),
     filling the open path into a solid triangle — force it back off here. */
  .section-kik-testimonials__arrow svg path {
    fill: none;
  }
  /* The carousel-arrow points right; flip it for the previous button. */
  .section-kik-testimonials__arrow.swiper-button-prev svg {
    transform: rotate(180deg);
  }
  .section-kik-testimonials__arrow.swiper-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
/* END_SECTION:kik-testimonials */

/* START_SECTION:kik-user-dashboard (INDEX:86) */
/* ── Layout — CSS grid handles the reorder between breakpoints.
     Mobile: greeting → cards → buttons (single column).
     Desktop: greeting + buttons on one row (items-end), cards full-width below. */
  .section-kik-user-dashboard__inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      'greeting'
      'cards'
      'buttons';
    gap: var(--kik-spacing-xl);
    inline-size: 100%;
  }
  /* Tablet / small-laptop (750–1159): the greeting + 4 buttons don't fit side by
     side (the greeting column crushes to a few px), so stay single-column and
     drop the buttons to a row directly below the greeting. */
  @media screen and (min-width: 750px) and (max-width: 1159px) {
    .section-kik-user-dashboard__inner {
      grid-template-areas:
        'greeting'
        'buttons'
        'cards';
    }
  }
  /* Desktop (≥1160): greeting + buttons share the top row, cards full-width below. */
  @media screen and (min-width: 1160px) {
    .section-kik-user-dashboard__inner {
      grid-template-columns: 1fr auto;
      grid-template-areas:
        'greeting buttons'
        'cards    cards';
      column-gap: var(--kik-spacing-48);
      row-gap: var(--kik-spacing-xl);
      align-items: end;
    }
  }

  /* ── Greeting ──────────────────────────────────────────────────────────── */
  .section-kik-user-dashboard__greeting {
    grid-area: greeting;
    display: flex;
    flex-direction: column;
    gap: var(--kik-spacing-4);
    min-inline-size: 0;
  }
  /* Base theme styles h1-h6 / p in unlayered CSS — re-assert class-qualified. */
  .section-kik-user-dashboard__heading {
    line-height: var(--kik-line-height-heading);
    letter-spacing: normal;
    color: rgb(var(--kik-color-text-primary));
    margin: 0;
  }
  .section-kik-user-dashboard__spend {
    font-size: var(--kik-text-size-body-lg);
    font-weight: var(--kik-font-weight-regular);
    line-height: var(--kik-line-height-body);
    color: rgb(var(--kik-color-text-primary));
    margin: 0;
  }
  .section-kik-user-dashboard__spend-value {
    font-weight: var(--kik-font-weight-semibold);
  }

  /* ── Actions — full-width stack on mobile, right-aligned row on desktop ──── */
  .section-kik-user-dashboard__actions {
    grid-area: buttons;
    display: flex;
    flex-direction: column;
    gap: var(--kik-spacing-16);
    inline-size: 100%;
  }
  .section-kik-user-dashboard__actions > span {
    display: contents;
  }
  /* Figma fixes the button label at 16px on BOTH breakpoints; the shared `md`
     size is body-md (14 mobile → 16 desktop), so pin the label to 16px here.
     !important + the extra class beat .kik-btn's own !important font-size. */
  .section-kik-user-dashboard__actions .kik-btn {
    font-size: 16px !important;
  }
  @media screen and (max-width: 749px) {
    .section-kik-user-dashboard__actions .kik-btn {
      inline-size: 100%;
    }
  }
  /* ≥750: buttons become a horizontal wrapping row. Through the tablet range
     they sit full-width, left-aligned, directly below the greeting. */
  @media screen and (min-width: 750px) {
    .section-kik-user-dashboard__actions {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
    }
  }
  /* ≥1160: buttons move to the right of the greeting on the shared top row. */
  @media screen and (min-width: 1160px) {
    .section-kik-user-dashboard__actions {
      justify-content: flex-end;
      inline-size: auto;
    }
  }

  /* ── Stat cards ────────────────────────────────────────────────────────── */
  .section-kik-user-dashboard__stats {
    grid-area: cards;
    display: flex;
    flex-wrap: wrap;
    gap: var(--kik-spacing-8);
    inline-size: 100%;
  }
  .section-kik-user-dashboard__card {
    flex: 1 1 0;
    min-inline-size: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px; /* spec: 12px mobile / 24px desktop — no responsive token spans it */
    padding: var(--kik-spacing-lg);
    border-radius: var(--kik-radius-md);
    background: rgb(var(--kik-color-bg-surface));
  }
  /* Mobile — card 1 spans its own row; cards 2 & 3 share the next row 50/50. */
  @media screen and (max-width: 749px) {
    .section-kik-user-dashboard__card:first-child {
      flex-basis: 100%;
    }
  }
  @media screen and (min-width: 750px) {
    .section-kik-user-dashboard__stats {
      flex-wrap: nowrap;
      gap: var(--kik-spacing-16);
    }
    .section-kik-user-dashboard__card {
      gap: var(--kik-spacing-24);
    }
  }

  .section-kik-user-dashboard__icon {
    flex: 0 0 auto;
    display: block;
    inline-size: 24px;
    block-size: 24px;
    color: rgb(var(--kik-color-text-primary));
  }
  /* Theme styles bare `svg { fill: rgb(var(--color-normal-text-rgb)) }` — a CSS
     fill beats the inline fill="currentColor" attribute, so re-assert it here. */
  .section-kik-user-dashboard__icon svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    fill: currentColor;
  }
  @media screen and (min-width: 750px) {
    .section-kik-user-dashboard__icon {
      inline-size: 40px;
      block-size: 40px;
    }
  }

  .section-kik-user-dashboard__card-body {
    display: flex;
    flex-direction: column;
    gap: var(--kik-spacing-4);
    min-inline-size: 0;
  }
  /* Number — 22px mobile / 28px desktop (Figma Mobile/H5 → Desktop/H4; no single
     --kik-text-size token spans 22→28). */
  .section-kik-user-dashboard__card-value {
    font-weight: var(--kik-font-weight-semibold);
    font-size: 22px;
    line-height: var(--kik-line-height-heading);
    color: rgb(var(--kik-color-text-primary));
    margin: 0;
  }
  @media screen and (min-width: 750px) {
    .section-kik-user-dashboard__card-value {
      font-size: 28px;
    }
  }
  /* Label — H6 (18 → 22), line-height 1.4 (no --kik-line-height token for 1.4). */
  .section-kik-user-dashboard__card-label {
    font-weight: var(--kik-font-weight-regular);
    font-size: var(--kik-text-size-h6);
    line-height: 1.4;
    color: rgb(var(--kik-color-text-primary));
    margin: 0;
  }
/* END_SECTION:kik-user-dashboard */

/* START_SECTION:kik-why-choose (INDEX:87) */
.section-kik-why {
    --ink: #0a0a0a;
    --muted: #5a5a5a;
    --line: #e6e6e6;
    --tint: #f6f6f6;
    --r: 14px;
    color: var(--ink);
    padding: var(--sec-pt-m, 64px) 0 var(--sec-pb-m, 64px);
  }
  .section-kik-why--bg-tint { background: var(--tint); }
  @media screen and (min-width: 750px) {
    .section-kik-why { padding: var(--sec-pt-d, 80px) 0 var(--sec-pb-d, 80px); }
  }

  .section-kik-why__shell { width: min(100% - 2.5rem, 1120px); margin-inline: auto; }

  .section-kik-why__head { text-align: center; max-width: 680px; margin: 0 auto 2.75rem; }
  .section-kik-why__heading {
    margin: 0;
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    font-weight: 600;
  }
  .section-kik-why__sub { margin: 0.9rem 0 0; color: var(--muted); font-size: 1.02rem; line-height: 1.55; }

  .section-kik-why__grid {
    display: grid;
    grid-template-columns: repeat(var(--ac-cols, 4), 1fr);
    gap: 1rem;
    align-items: stretch;
  }

  .section-kik-why__reason {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 1.1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.5rem 1.25rem 1.4rem;
    min-height: 100%;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  }
  .section-kik-why__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: grid;
    place-items: center;
  }
  .section-kik-why__icon svg { width: 28px; height: 28px; display: block; }

  .section-kik-why__copy { display: grid; gap: 0.65rem; align-content: start; }
  .section-kik-why__title {
    margin: 0;
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.35;
    font-weight: 600;
  }
  .section-kik-why__text { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }

  @media (max-width: 1024px) {
    .section-kik-why__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 768px) {
    .section-kik-why__grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:kik-why-choose */