/* KIK scoped CSS delivery */

/* Section kik-category-quick-nav-b16ecf820c (page: home, section: category-quick-nav).
   Only what Tailwind utilities cannot express: the host theme's bare <a> reset,
   the focus ring, and hiding the mobile scrollbar on a rail the design draws
   without one. Every selector stays inside the kik-category-quick-nav-b16ecf820c
   namespace.

   Desktop frame 12548:34680 (1600x46) centres eight pills with a 48px gap;
   the paired mobile frame 13354:67233 (414x43) left-aligns them with a 32px gap
   and lets them run past the 414px viewport, so the rail scrolls horizontally. */

.kik-category-quick-nav-b16ecf820c-rail {
  /* The mobile frame overflows its own 414px canvas (last pill ends at 863px),
     so the rail is a scroller there. Firefox/IE need their own opt-out. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}



.kik-category-quick-nav-b16ecf820c-rail::-webkit-scrollbar {
  display: none;
}



/* The host theme styles bare <a>; these keep the pill on the Figma design. */
.kik-category-quick-nav-b16ecf820c-item {
  text-decoration: none;
  border-radius: var(--kik-radius-none, 0);
  white-space: nowrap;
  transition:
    color var(--kik-motion-duration-fast, 150ms) var(--kik-motion-ease-out, ease-out),
    border-color var(--kik-motion-duration-fast, 150ms) var(--kik-motion-ease-out, ease-out);
}



.kik-category-quick-nav-b16ecf820c-item:focus-visible {
  outline: var(--kik-color-focus-ring-width, 2px) solid var(--kik-color-focus-ring, #1e1e1e);
  outline-offset: var(--kik-color-focus-ring-offset, 2px);
}



@media (prefers-reduced-motion: reduce) {
  .kik-category-quick-nav-b16ecf820c-rail {
    scroll-behavior: auto;
  }


  .kik-category-quick-nav-b16ecf820c-item {
    transition: none;
  }}



/* Section kik-shop-by-category-28a99b477b (page: home, section: shop-by-category).
   Only what Tailwind utilities cannot express: the two Figma media box ratios,
   the merchant focal point, and the resets the host theme's bare <ul>/<li>/<a>
   rules would otherwise win. Every selector stays inside the
   kik-shop-by-category-28a99b477b namespace. */

/* The host theme styles bare <ul>/<li>; the category list is a plain stack. */
.kik-shop-by-category-28a99b477b-list {
  list-style: none;
  margin: 0;
  padding: 0;
}



.kik-shop-by-category-28a99b477b-list > li {
  list-style: none;
  margin: 0;
}



/* The category rows are links; the host theme underlines and recolours bare <a>. */
.kik-shop-by-category-28a99b477b-row {
  text-decoration: none;
  border-radius: var(--kik-radius-none, 0);
  transition: color var(--kik-motion-duration-base, 200ms) var(--kik-motion-ease-out, ease-out);
}



a.kik-shop-by-category-28a99b477b-row:hover {
  color: var(--kik-color-action-primary, #cad66a);
}



a.kik-shop-by-category-28a99b477b-row:focus-visible {
  outline: var(--kik-color-focus-ring-width, 2px) solid var(--kik-color-focus-ring, #1e1e1e);
  outline-offset: var(--kik-color-focus-ring-offset, 2px);
}



/* Figma media boxes: mobile 382x382 (14233:54352), desktop 1152x643 for the pair
   (I12876:29136;12557:15194). The box crops the photograph to a layout shape, so
   it keeps the authored ratio at each breakpoint instead of following the upload. */
.kik-shop-by-category-28a99b477b-media {
  aspect-ratio: 382 / 382;
}



.kik-shop-by-category-28a99b477b-media img {
  object-position: var(--kik-shop-by-category-28a99b477b-focal, 50% 50%);
}



@media (min-width: 768px) {
  .kik-shop-by-category-28a99b477b-media {
    aspect-ratio: 1152 / 643;
  }


  .kik-shop-by-category-28a99b477b-media img {
    object-position: var(--kik-shop-by-category-28a99b477b-focal-md, 50% 50%);
  }}



@media (prefers-reduced-motion: reduce) {
  .kik-shop-by-category-28a99b477b-row {
    transition: none;
  }}



/* Section kik-shop-by-activity-5e9127ac72 (page: home, section: shop-by-activity).
   Only what Tailwind utilities cannot express: the two stage crops, the frosted
   tab bar and product panel, hotspot placement, the desktop/mobile split of the
   product card region and the hotspot glyph swap. Every selector stays inside
   the kik-shop-by-activity-5e9127ac72 namespace. */

.kik-shop-by-activity-5e9127ac72-panel[data-active="false"] {
  display: none;
}



/* Desktop frame 12786:25351 is 1600x835, mobile frame 15261:22401 stages the
   photograph at 414x626. The box crops a photograph to a layout shape, so it
   keeps the authored height and the merchant focal point decides what survives
   the crop. */
.kik-shop-by-activity-5e9127ac72-stage-box {
  box-sizing: border-box;
  aspect-ratio: 414 / 626;
  min-height: 420px;
  background-color: var(--kik-color-bg-inverse, #1e1e1e);
}



.kik-shop-by-activity-5e9127ac72-media img,
.kik-shop-by-activity-5e9127ac72-media video {
  object-fit: cover;
  object-position: var(--kik-shop-by-activity-5e9127ac72-focal, 50% 50%);
}



/* Desktop frame paints a flat 10% black wash over the photograph; the mobile
   frame has none. */
.kik-shop-by-activity-5e9127ac72-scrim {
  background-color: transparent;
}



.kik-shop-by-activity-5e9127ac72-rule {
  background-color: var(--kik-color-text-inverse, #ffffff);
}



.kik-shop-by-activity-5e9127ac72-cta {
  text-decoration: none;
  border-radius: var(--kik-radius-none, 0);
}



/* Tab bar: frosted chip rail pinned to the bottom of the stage. Full width on
   mobile (it scrolls), centred and content-width from 768px. */
.kik-shop-by-activity-5e9127ac72-tabs {
  position: absolute;
  left: var(--kik-spacing-page-default, 16px);
  right: var(--kik-spacing-page-default, 16px);
  bottom: var(--kik-spacing-section-lg, 48px);
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: var(--kik-spacing-4, 4px);
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  overflow-x: auto;
  scrollbar-width: none;
}



.kik-shop-by-activity-5e9127ac72-tabs::-webkit-scrollbar {
  display: none;
}



.kik-shop-by-activity-5e9127ac72-tab {
  appearance: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  cursor: pointer;
  background-color: transparent;
  color: var(--kik-color-text-inverse, #ffffff);
  font: inherit;
  line-height: 1.6;
}



.kik-shop-by-activity-5e9127ac72-tab[data-active="true"] {
  background-color: var(--kik-color-bg-accent, #cad66a);
  color: var(--kik-color-text-primary, #1e1e1e);
}



.kik-shop-by-activity-5e9127ac72-tab:focus-visible,
.kik-shop-by-activity-5e9127ac72-hotspot:focus-visible,
.kik-shop-by-activity-5e9127ac72-cta:focus-visible {
  outline: var(--kik-color-focus-ring-width, 2px) solid var(--kik-color-focus-ring-inverse, #cad66a);
  outline-offset: var(--kik-color-focus-ring-offset, 2px);
}



/* Hotspots carry their own percentage position so the same markup serves both
   crops; the merchant edits the position per breakpoint. */
.kik-shop-by-activity-5e9127ac72-hotspot {
  position: absolute;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  display: block;
  width: 48px;
  height: 48px;
  left: var(--kik-shop-by-activity-5e9127ac72-x, 50%);
  top: var(--kik-shop-by-activity-5e9127ac72-y, 50%);
  transform: translate(-50%, -50%);
}



.kik-shop-by-activity-5e9127ac72-hotspot-dot {
  display: block;
  width: 48px;
  height: 48px;
}



.kik-shop-by-activity-5e9127ac72-hotspot-dot--on,
.kik-shop-by-activity-5e9127ac72-hotspot[aria-expanded="true"] .kik-shop-by-activity-5e9127ac72-hotspot-dot--idle {
  display: none;
}



.kik-shop-by-activity-5e9127ac72-hotspot[aria-expanded="true"] .kik-shop-by-activity-5e9127ac72-hotspot-dot--on {
  display: block;
}



/* Mobile: the products sit in a horizontal card rail under the photograph
   (frame 15261:22016). Every card is readable without touching a hotspot. */
.kik-shop-by-activity-5e9127ac72-cards {
  display: flex;
  gap: var(--kik-spacing-16, 16px);
  padding: var(--kik-spacing-24, 24px) var(--kik-spacing-page-default, 16px) var(--kik-spacing-section-xl, 56px);
  background-color: var(--kik-color-bg-surface, #f5f5f5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}



.kik-shop-by-activity-5e9127ac72-card {
  box-sizing: border-box;
  width: 302px;
  max-width: 85%;
  align-items: center;
  scroll-snap-align: start;
  background-color: var(--kik-color-bg-page, #ffffff);
  color: var(--kik-color-text-primary, #1e1e1e);
}



.kik-shop-by-activity-5e9127ac72-card-media {
  width: 100px;
  height: 100px;
  background-color: var(--kik-color-bg-page, #ffffff);
}



.kik-shop-by-activity-5e9127ac72-card-rating {
  color: var(--kik-color-bg-star, #fecf84);
}



.kik-shop-by-activity-5e9127ac72-card-link {
  text-decoration: none;
  border-color: var(--kik-color-action-secondary, #1e1e1e);
  color: var(--kik-color-action-secondary, #1e1e1e);
}



.kik-shop-by-activity-5e9127ac72-card-arrow {
  display: block;
  width: 18px;
  height: 18px;
}



.kik-shop-by-activity-5e9127ac72-card-arrow--light {
  display: none;
}



@media (min-width: 768px) {
  .kik-shop-by-activity-5e9127ac72-stage-box {
    aspect-ratio: 1600 / 835;
    min-height: 560px;
  }


  .kik-shop-by-activity-5e9127ac72-media img,
  .kik-shop-by-activity-5e9127ac72-media video {
    object-position: var(--kik-shop-by-activity-5e9127ac72-focal-md, 50% 50%);
  }


  .kik-shop-by-activity-5e9127ac72-scrim {
    background-color: rgba(0, 0, 0, 0.1);
  }


  .kik-shop-by-activity-5e9127ac72-tabs {
    left: 50%;
    right: auto;
    max-width: calc(100% - (2 * var(--kik-spacing-page-default, 24px)));
    transform: translateX(-50%);
    bottom: var(--kik-spacing-section-lg, 72px);
  }


  .kik-shop-by-activity-5e9127ac72-hotspot {
    left: var(--kik-shop-by-activity-5e9127ac72-x-md, 50%);
    top: var(--kik-shop-by-activity-5e9127ac72-y-md, 50%);
  }


  /* Desktop: the product panel is an overlay on the right of the stage
     (frame node I12786:25351;13353:64601) and only the selected hotspot's card
     is shown. The default state of the section shows no card at all. */
  .kik-shop-by-activity-5e9127ac72-cards {
    position: absolute;
    top: 50%;
    right: var(--kik-spacing-page-default, 24px);
    transform: translateY(-50%);
    display: block;
    width: 232px;
    padding: 0;
    background-color: transparent;
    overflow: visible;
  }


  .kik-shop-by-activity-5e9127ac72-card {
    display: none;
    width: 232px;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--kik-spacing-12, 12px);
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: var(--kik-color-text-inverse, #ffffff);
  }


  .kik-shop-by-activity-5e9127ac72-card[data-active="true"] {
    display: flex;
  }


  .kik-shop-by-activity-5e9127ac72-card-media {
    width: 200px;
    height: 200px;
  }


  .kik-shop-by-activity-5e9127ac72-card-link {
    border-color: var(--kik-color-action-inverse, #ffffff);
    color: var(--kik-color-action-inverse, #ffffff);
  }


  .kik-shop-by-activity-5e9127ac72-card-arrow--light {
    display: block;
  }


  .kik-shop-by-activity-5e9127ac72-card-arrow--dark {
    display: none;
  }}



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



/* Section kik-best-sellers-906fb42221 (page: home, section: best-sellers).
   Only what Tailwind utilities cannot express: the square media crop both
   frames draw, the merchant focal point, the whole-card link overlay and the
   host-theme control resets. Every selector stays inside the
   kik-best-sellers-906fb42221 namespace. */

/* Image Placeholder is aspect-[352/352] on desktop (I12856:28683;13354:65987)
   and aspect-[304/304] on mobile (I13369:75075;13354:66013) - one square crop
   at both breakpoints. The card is a layout shape, so it keeps its ratio and
   the merchant's focal point decides what survives the crop. */
.kik-best-sellers-906fb42221-media {
  aspect-ratio: 1 / 1;
}



.kik-best-sellers-906fb42221-media img {
  object-position: var(--kik-best-sellers-906fb42221-focal, 50% 50%);
}



/* The frames give the card no separate call to action, so the card itself is
   the link. The overlay only exists when the block carries a destination, so a
   card with no link is plain content rather than a dead affordance. */
.kik-best-sellers-906fb42221-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-decoration: none;
}



.kik-best-sellers-906fb42221-title {
  overflow-wrap: anywhere;
}



/* The host theme styles bare <a>; these rules keep the header button on the
   Figma design instead of the theme's own component look. */
.kik-best-sellers-906fb42221-cta {
  text-decoration: none;
  border-radius: var(--kik-radius-none, 0);
}



.kik-best-sellers-906fb42221-cta:focus-visible,
.kik-best-sellers-906fb42221-overlay:focus-visible {
  outline: var(--kik-color-focus-ring-width, 2px) solid var(--kik-color-focus-ring, #1e1e1e);
  outline-offset: var(--kik-color-focus-ring-offset, 2px);
}



.kik-best-sellers-906fb42221-badge {
  border-radius: var(--kik-radius-none, 0);
}



@media (min-width: 768px) {
  .kik-best-sellers-906fb42221-media img {
    object-position: var(--kik-best-sellers-906fb42221-focal-md, 50% 50%);
  }}



/* Section kik-community-225cfa79a7 (page: home, section: community).
   Only what Tailwind utilities cannot express: the two-column split, the story
   image crop and its Figma gradient, and the step rail with its numbered
   progress track. Every selector stays inside the kik-community-225cfa79a7
   namespace. */

/* Mobile frame 12548:34249 stacks a 1:1 story image over the copy column;
   the desktop frame 12548:34762 splits the band 800/800 with the image column
   stretched to the height of the copy column. */
.kik-community-225cfa79a7-media {
  aspect-ratio: 1 / 1;
  background-color: var(--kik-color-bg-inverse, #1e1e1e);
}



.kik-community-225cfa79a7-media-frame img,
.kik-community-225cfa79a7-media-frame video {
  object-fit: cover;
  object-position: var(--kik-community-225cfa79a7-focal, 50% 50%);
}



/* Figma gradient on the story image: transparent to 72.605%, then black 80%. */
.kik-community-225cfa79a7-scrim {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 72.605%, rgba(0, 0, 0, 0.8) 100%);
}



.kik-community-225cfa79a7-rule {
  background-color: var(--kik-color-bg-accent, #cad66a);
}



.kik-community-225cfa79a7-cta {
  text-decoration: none;
  border-radius: var(--kik-radius-none, 0);
  border-color: var(--kik-color-action-secondary, #1e1e1e);
  color: var(--kik-color-text-primary, #1e1e1e);
}



.kik-community-225cfa79a7-cta:focus-visible,
.kik-community-225cfa79a7-step-no:focus-visible {
  outline: var(--kik-color-focus-ring-width, 2px) solid var(--kik-color-focus-ring, #1e1e1e);
  outline-offset: var(--kik-color-focus-ring-offset, 2px);
}



.kik-community-225cfa79a7-step-no:focus-visible {
  outline-color: var(--kik-color-focus-ring-inverse, #cad66a);
}



/* Step rail sits over the bottom of the story image. */
.kik-community-225cfa79a7-steps {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--kik-spacing-md, 12px);
  padding-block: var(--kik-spacing-lg, 16px);
}



.kik-community-225cfa79a7-steps-row {
  display: flex;
  align-items: flex-end;
  gap: var(--kik-spacing-16, 16px);
  padding-inline: var(--kik-spacing-lg, 16px);
}



/* The mobile frame shows the active step only; the desktop frame shows all
   three side by side. */
.kik-community-225cfa79a7-step {
  display: none;
}



.kik-community-225cfa79a7-step[data-active="true"] {
  display: flex;
}



.kik-community-225cfa79a7-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kik-spacing-sm, 4px);
  padding-inline: var(--kik-spacing-lg, 16px);
}



.kik-community-225cfa79a7-step-no {
  appearance: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: var(--kik-spacing-sm, 4px);
  background-color: transparent;
  color: var(--kik-color-text-inverse, #ffffff);
  font: inherit;
  line-height: 1.6;
  opacity: 0.6;
  white-space: nowrap;
}



button.kik-community-225cfa79a7-step-no {
  cursor: pointer;
}



.kik-community-225cfa79a7-step-no[data-active="true"] {
  color: var(--kik-color-bg-accent, #cad66a);
  opacity: 1;
}



.kik-community-225cfa79a7-line {
  display: block;
  flex: 1 0 0;
  min-width: 1px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.5);
}



.kik-community-225cfa79a7-line-fill {
  display: block;
  height: 2px;
  width: 0;
  background-color: var(--kik-color-bg-accent, #cad66a);
}



.kik-community-225cfa79a7-line[data-state="done"] .kik-community-225cfa79a7-line-fill {
  width: 100%;
}



/* Only the line after the active step animates, and only while the rail is
   advancing on its own; with auto-advance off it stays empty. */
.kik-community-225cfa79a7-line[data-state="running"] .kik-community-225cfa79a7-line-fill {
  width: 100%;
  transition: width var(--kik-community-225cfa79a7-step-duration, 6s) linear;
}



@media (min-width: 768px) {
  .kik-community-225cfa79a7-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }


  .kik-community-225cfa79a7-media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 100%;
  }


  .kik-community-225cfa79a7-media-frame img,
  .kik-community-225cfa79a7-media-frame video {
    object-position: var(--kik-community-225cfa79a7-focal-md, 50% 50%);
  }


  .kik-community-225cfa79a7-steps {
    gap: var(--kik-spacing-md, 16px);
    padding-block: var(--kik-spacing-lg, 24px);
  }


  .kik-community-225cfa79a7-steps-row,
  .kik-community-225cfa79a7-track {
    padding-inline: var(--kik-spacing-lg, 24px);
  }


  .kik-community-225cfa79a7-track {
    gap: var(--kik-spacing-sm, 8px);
  }


  .kik-community-225cfa79a7-step {
    display: flex;
  }}



@media (prefers-reduced-motion: reduce) {
  .kik-community-225cfa79a7-line[data-state="running"] .kik-community-225cfa79a7-line-fill {
    transition: none;
  }}



/* Section kik-our-story-bd6758f809 (page: home, section: our-story).
   Only what Tailwind utilities cannot express: the media stage ratio, the
   layered behind/in-front artwork registration, the oversized overlay
   wordmark and the host-theme <a> reset. Every selector stays inside the
   kik-our-story-bd6758f809 namespace. */

/* The stage holds one authored composition (photo behind the wordmark, a
   transparent cut-out in front of it). Both Figma frames draw it at the same
   ratio - mobile 414 x 432.112 and desktop 800 x 835 are both 0.958 - so one
   preferred ratio serves both breakpoints. On desktop the stage is a stretched
   grid item, so the text column's height wins whenever it is the taller of the
   two and the ratio only supplies the floor. */
.kik-our-story-bd6758f809-stage {
  aspect-ratio: 800 / 835;
  background-color: var(--kik-color-bg-surface-alt-1, #e8e8e8);
}



/* The behind and in-front layers are two crops of the same photograph and have
   to register with each other, so they share one object-position. The merchant
   focal point of the layer behind the text drives both; the Figma default is
   the bottom of the frame. */
.kik-our-story-bd6758f809-layer img {
  object-fit: cover;
  object-position: var(--kik-our-story-bd6758f809-focal, 50% 100%);
}



@media (min-width: 768px) {
  .kik-our-story-bd6758f809-layer img {
    object-position: var(--kik-our-story-bd6758f809-focal-md, 50% 100%);
  }}



/* Figma: 62.1px over a 414px frame and 120px over an 800px column - the same
   15% of the stage width at both breakpoints - so the wordmark is sized from
   the viewport and capped at the drawn size rather than pinned to one canvas. */
.kik-our-story-bd6758f809-overlay {
  font-size: min(15vw, 72px);
  line-height: 1.1;
  white-space: pre-line;
}



@media (min-width: 768px) {
  .kik-our-story-bd6758f809-overlay {
    font-size: min(7.5vw, 120px);
  }}



.kik-our-story-bd6758f809-heading,
.kik-our-story-bd6758f809-body {
  white-space: pre-line;
}



/* Figma stacks the eyebrow 8px (spacing/sm) under the heading while the rest of
   the column is spaced by spacing/xl. The blocks are independent and
   merchant-reorderable, so the tighter pairing is expressed as an adjacency
   rule: it applies in the captured order and simply stops applying when the
   merchant moves either block. */
.kik-our-story-bd6758f809-eyebrow + .kik-our-story-bd6758f809-heading {
  margin-top: calc(var(--kik-spacing-sm, 4px) - var(--kik-spacing-xl, 24px));
}



/* The host theme styles bare <a>; this keeps the CTA on the Figma outline. */
.kik-our-story-bd6758f809-cta {
  text-decoration: none;
  border-radius: var(--kik-radius-none, 0);
}



.kik-our-story-bd6758f809-cta:focus-visible {
  outline: var(--kik-color-focus-ring-width, 2px) solid var(--kik-color-focus-ring, #1e1e1e);
  outline-offset: var(--kik-color-focus-ring-offset, 2px);
}