/* KIK scoped CSS delivery */

/*
  Shop by Activity — the few rules Tailwind utilities cannot express.
  Every selector is scoped to the Section's pinned class namespace.
*/

/* Tab/hotspot visibility. A utility cannot carry an attribute-driven state that
   must also beat the `tw:lg:*` display utilities on the same element, so the
   toggle rule is written at (0,2,0). */
.kik-shop-by-activity-a65a9eec29-toggle[data-active="false"] {
  display: none;
}



/* The product panel is desktop-only (`tw:hidden tw:lg:flex`) AND closed until a
   marker is hovered, focused or clicked. The closed state outranks `tw:lg:flex`. */
.kik-shop-by-activity-a65a9eec29-card[data-open="false"] {
  display: none;
}



.kik-shop-by-activity-a65a9eec29-rail {
  scroll-behavior: smooth;
}



/* Below 1024px the rail carries the activity products. Above it the products
   live in the marker panel, so the rail is only rendered when the merchant has
   actually placed an app block inside it. */
@media (min-width: 1024px) {
  kik-shop-by-activity [data-sba-products]:not(:has([data-sba-app])) {
    display: none;
  }}



/* Tapping a marker on mobile scrolls its card into the rail; mark the target so
   the tap has a visible result. */
.kik-shop-by-activity-a65a9eec29-toggle[data-sba-rail-card][data-focus="true"] {
  outline: 2px solid var(--kik-color-bg-accent, #cad66a);
  outline-offset: -2px;
}



@media (prefers-reduced-motion: reduce) {
  .kik-shop-by-activity-a65a9eec29-rail {
    scroll-behavior: auto;
  }}



/* Owned by sections/kik-community-5390527817.liquid.
   Only what Tailwind utilities cannot express: the state-dependent gradient stops,
   the progressively filling rail (its duration is a runtime custom property) and the
   active-step reveal, which depends on an ancestor state attribute. */

.kik-community-5390527817-layer {
  opacity: 0;
  transition: opacity 550ms var(--kik-motion-ease-out);
}



.kik-community-5390527817-layer[data-active] {
  opacity: 1;
}



/* The authored stop (72.605%) was drawn for the 835px desktop block. Below 1024 the
   media is 1:1 and the step copy starts higher, so the stop follows the geometry. */
.kik-community-5390527817-grad {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.85) 100%);
}



.kik-community-5390527817-steps {
  min-height: 112px;
}



.kik-community-5390527817-step-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 350ms var(--kik-motion-ease-out);
}



.kik-community-5390527817-step[data-active] .kik-community-5390527817-step-body {
  max-height: none;
  opacity: 1;
}



/* Mobile renders the active step only; the other headings are a desktop composition. */
@media (max-width: 1023px) {
  .kik-community-5390527817-step:not([data-active]) {
    display: none;
  }}



@media (min-width: 1024px) {
  .kik-community-5390527817-grad {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 72.605%, rgba(0, 0, 0, 0.8) 100%);
  }


  /* Step 2's photograph is a bright cloud bank where the authored stop leaves the
     step copy under a 3:1 contrast floor, so that state gets its own stop. */
  .kik-community-5390527817-stage[data-step-state="2"] .kik-community-5390527817-grad {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.88) 100%);
  }


  .kik-community-5390527817-steps {
    min-height: 132px;
  }}



.kik-community-5390527817-track {
  background: rgba(255, 255, 255, 0.5);
}



.kik-community-5390527817-fill {
  width: 0;
  transition: width var(--kik-community-5390527817-fill, 4200ms) linear;
}



/* The script freezes a part-filled bar on exit and resumes only the remainder. */
.kik-community-5390527817-fill[data-frozen] {
  transition: none;
}



.kik-community-5390527817-num {
  opacity: 0.6;
  transition:
    color 350ms var(--kik-motion-ease-out),
    opacity 350ms var(--kik-motion-ease-out);
}



.kik-community-5390527817-num[data-active] {
  color: var(--kik-color-bg-accent);
  opacity: 1;
}



@media (prefers-reduced-motion: reduce) {
  .kik-community-5390527817-layer,
  .kik-community-5390527817-step-body,
  .kik-community-5390527817-num,
  .kik-community-5390527817-fill {
    transition: none;
  }}



/* Owned by sections/kik-our-story-265caa35c0.liquid.
   Only what Tailwind utilities cannot express. Layout, spacing, typography and the
   layering of background photograph, display headline and foreground cut-out are all
   utilities on the markup. */

/* Shopify wraps a Section in its own element. A sticky child cannot pin through an
   ancestor that establishes a scrollport, so the wrapper is held open here instead of
   relying on the host theme to leave it alone. */
.kik-our-story-265caa35c0-section {
  overflow: visible;
}



/* The copy column and the display headline pin while the taller image column scrolls
   past them. The Figma Prototype frame pins at the top of its own band; the host theme
   publishes a header offset as --height-header (snippets/css-variables.liquid, kept
   current by assets/header.js), so the pin clears a sticky header where the page has
   one and falls back to the frame's own top: 0 where it does not. `top` is inert while
   the element is static, so this needs no breakpoint of its own. */
.kik-our-story-265caa35c0-pin {
  top: var(--height-header, 0px);
}



/* The overlay supplies its own scrim; avoid the native dialog's second dimming layer. */
kik-on-the-trail-gallery [data-kik-lightbox]::backdrop {
  background: transparent;
}



/* Cover projection can place a product outside the visible photo; never clamp its marker. */
kik-shop-by-activity [data-sba-pin]:not([data-sba-positioned="true"]) {
  display: none;
}