/* KIK scoped CSS delivery */

/* Named fluid recipes for Hero Stage (Figma 11486:661 desktop / 11486:1307 mobile). */
.kik-hero-d75a4703cb-fluid-pt-5 { padding-top: clamp(40px,calc(34.41484px + 1.349073vw),56px); }


.kik-hero-d75a4703cb-fluid-pb-6 { padding-bottom: clamp(40px,calc(34.41484px + 1.349073vw),56px); }



/* The designed button hover ring (interaction-states.json) reads --kik-color-border-primary,
   which the Theme token inventory does not define; value from the HTML reference :root. */
.kik-hero-d75a4703cb { --kik-color-border-primary: #1C5544; }



/* Host components.css `body { letter-spacing: var(--type-base-spacing) }` inherits into every
   wrapper; the source frame has no root tracking. Text nodes keep their own tracking utilities. */
.kik-hero-d75a4703cb { letter-spacing: normal; }



/* Host components.css `h1, h2, ... { font-family: var(--type-base-primary) ... !important }`
   beats the heading token class, so re-assert the Figma heading token (11486:670 / 11486:1315)
   with matching importance, scoped to this Section. */
.kik-hero-d75a4703cb h1[data-figma-node],
.kik-hero-d75a4703cb h2[data-figma-node] { font-family: var(--kik-text-font-heading) !important; }



/* Designed CTA hover fill (HTML reference `.btn--alt:hover` background
   var(--kik-color-action-secondary-hover) = #F5F5F5; interaction-states.json maps it to bg-alt-1).
   The resting token rule `.kik-hero-d75a4703cb .kik\:bg-action-secondary` (0,2,0) stays untouched;
   this hover-only rule (0,3,0) paints the designed hover fill and reverses on leave. */
.kik-hero-d75a4703cb [data-kik-hero-cta]:hover { background-color: var(--kik-color-bg-alt-1, #F5F5F5); }



/* 02 What Makes It an Outdoor TV - owned Section styles (bento weights, scrim, mobile swipe). */

/* Host body sets letter-spacing (var(--type-base-spacing) / --text-letter-spacing), which every
   Section node inherits as 0.375-0.425px. The source tracks at normal; explicit tracking on the
   spec line and chips still overrides this on their own elements. */
.kik-outdoor-tv-features-b973182e14 {
  letter-spacing: normal;
}



/* Host components.css declares `h1, h2, h3 ... { font-family: var(--type-base-primary) ... !important }`,
   which beats the token utility on the Section heading and tile titles. Re-assert the bound
   heading token with matching importance; the value still comes from the platform token contract. */
.kik-outdoor-tv-features-b973182e14 .kik-outdoor-tv-features-b973182e14-heading {
  font-family: var(--kik-text-font-heading) !important;
}



.kik-outdoor-tv-features-b973182e14-scrim {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--kik-otf-scrim-color, #000000) calc(var(--kik-otf-scrim-opacity, 62) * 1%), transparent) 0%,
    color-mix(in srgb, var(--kik-otf-scrim-color, #000000) calc(var(--kik-otf-scrim-opacity, 62) * 0.19355%), transparent) 55%,
    transparent 100%
  );
}



@media (min-width: 768px) {
  /* Bento rhythm: each tile grows by its design width weight inside its row. */
  .kik-outdoor-tv-features-b973182e14-tile {
    flex: var(--kik-otf-weight, 1) 1 0px;
  }}



@media (width < 768px) {
  .kik-outdoor-tv-features-b973182e14 .kik-outdoor-tv-features-b973182e14-bento[data-layout="swipe"] {
    flex-direction: row;
    align-items: stretch;
    column-gap: 12px;
    row-gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed to the screen edge so the next tile peeks; matches the Section side margin. */
    margin-inline: calc(-1 * clamp(16px, calc(16px - 26.52951096px + 6.40809444vw), 92px));
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }


  .kik-outdoor-tv-features-b973182e14 .kik-outdoor-tv-features-b973182e14-bento[data-layout="swipe"]::-webkit-scrollbar {
    display: none;
  }


  .kik-outdoor-tv-features-b973182e14 .kik-outdoor-tv-features-b973182e14-bento[data-layout="swipe"] .kik-outdoor-tv-features-b973182e14-tile {
    flex: 0 0 85vw;
    min-height: 260px;
    scroll-snap-align: start;
  }}



/* Tab row scrolls sideways on narrow screens without showing a scrollbar. */
.kik-indoor-vs-outdoor-85412c6a85-tabs {
  scrollbar-width: none;
}


.kik-indoor-vs-outdoor-85412c6a85-tabs::-webkit-scrollbar {
  display: none;
}



/* Progress bar under the active tab. JS drives --kik-indoor-vs-outdoor-85412c6a85-p (0..1);
   before the timer starts (and under compare/capture) the Figma 18px start segment shows. */
.kik-indoor-vs-outdoor-85412c6a85-fill {
  width: 0;
}


.kik-indoor-vs-outdoor-85412c6a85-tab[aria-selected="true"] .kik-indoor-vs-outdoor-85412c6a85-fill {
  width: max(18px, calc(var(--kik-indoor-vs-outdoor-85412c6a85-p, 0) * 100%));
}



/* Cross-fade between tab media (~300ms, per the owner note). */
.kik-indoor-vs-outdoor-85412c6a85-layer {
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}


.kik-indoor-vs-outdoor-85412c6a85-layer[data-active="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease, visibility 0s linear 0s;
}


@media (prefers-reduced-motion: reduce) {
  .kik-indoor-vs-outdoor-85412c6a85-layer,
  .kik-indoor-vs-outdoor-85412c6a85-layer[data-active="true"] {
    transition: none;
  }}



/* Play/pause glyph swap follows aria-pressed. */
.kik-indoor-vs-outdoor-85412c6a85-pp .kik-indoor-vs-outdoor-85412c6a85-play {
  display: none;
}


.kik-indoor-vs-outdoor-85412c6a85-pp[aria-pressed="true"] .kik-indoor-vs-outdoor-85412c6a85-play {
  display: flex;
}


.kik-indoor-vs-outdoor-85412c6a85-pp[aria-pressed="true"] .kik-indoor-vs-outdoor-85412c6a85-pause {
  display: none;
}



/* Media fills its layer whether it is an <img> or a <video> mounted later by sth-responsive-video. */
.kik-indoor-vs-outdoor-85412c6a85-layer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}



/* Host theme isolation.
   components.css sets `font-family: var(--type-base-primary) !important` on body, button and h1-h6,
   and body/button/h1-h6 carry their own letter-spacing; both leak Neurial Grotesk and 0.025em
   tracking into this Section. Pin the Figma body font and normal tracking on the root so
   descendants inherit them, and re-assert inheritance on the elements the host targets directly.
   Per-node font/tracking utilities on spans and paragraphs are untouched and still apply. */
.kik-indoor-vs-outdoor-85412c6a85.kik-indoor-vs-outdoor-85412c6a85 {
  font-family: var(--kik-text-font-body) !important;
  letter-spacing: normal;
}


.kik-indoor-vs-outdoor-85412c6a85 :is(button, h1, h2, h3, h4, h5, h6) {
  font-family: inherit !important;
  letter-spacing: inherit;
}


.kik-indoor-vs-outdoor-85412c6a85 .kik-indoor-vs-outdoor-85412c6a85-heading {
  font-family: var(--kik-text-font-heading) !important;
}



/* 04 Built to Stay Out There — centre-mode scene carousel with progress tabs.
 * Layout and paint come from Tailwind utilities and the platform token stylesheet;
 * this file owns only the runtime slide geometry and the tab/progress states that
 * the custom element toggles. Mobile is the base, desktop starts at 768px to match
 * the token contract's breakpoint. */

/* Host theme collisions. components.css declares
 *   body, input, textarea, button, select { font-family: var(--type-base-primary), … !important;
 *                                           letter-spacing: var(--type-base-spacing); }
 *   h1 … h6 { font-family: var(--type-base-primary), … !important; }
 * so the section inherited the host tracking everywhere, and its headings and
 * controls rendered in the host font. Only !important beats !important; these
 * rules restore the section's own token families and leave sizes to the tokens. */
.kik-built-to-stay-out-c46f48cb20 {
  letter-spacing: normal;
  /* components.css sets body { text-rendering: optimizeSpeed }, which drops
     kerning and widens every w-max tab label inherited from it. */
  text-rendering: auto;
}



/* App blocks keep the host tracking they were written for. */
.kik-built-to-stay-out-c46f48cb20 .kik-built-to-stay-out-c46f48cb20-app {
  letter-spacing: var(--type-base-spacing, normal);
}



.kik-built-to-stay-out-c46f48cb20 .kik-built-to-stay-out-c46f48cb20-heading {
  font-family: var(--kik-text-font-heading) !important;
}



.kik-built-to-stay-out-c46f48cb20 :is(.kik-built-to-stay-out-c46f48cb20-arrow, .kik-built-to-stay-out-c46f48cb20-tab) {
  font-family: var(--kik-font-family-sans, Montserrat, "Helvetica Neue", Arial, sans-serif) !important;
  letter-spacing: normal;
}



.kik-built-to-stay-out-c46f48cb20-viewport {
  /* Active scene width, neighbour scale and visible gap between scenes. */
  --kik-built-to-stay-out-c46f48cb20-sw: min(calc(100% - 47px), 560px);
  --kik-built-to-stay-out-c46f48cb20-ss: 0.86;
  --kik-built-to-stay-out-c46f48cb20-gap: 8px;
  height: 595px;
  touch-action: pan-y;
}



.kik-built-to-stay-out-c46f48cb20-slide {
  --s: 1;
  --n: 0;
  position: absolute;
  top: 0;
  left: calc((100% - var(--kik-built-to-stay-out-c46f48cb20-sw)) / 2);
  width: var(--kik-built-to-stay-out-c46f48cb20-sw);
  height: 100%;
  z-index: 1;
  opacity: 0.5;
  /* Distance between centres: half of the active scene, half of a scaled
     neighbour and the gap; every further step adds one scaled scene + gap. */
  translate: calc(var(--s) * ((1 + var(--kik-built-to-stay-out-c46f48cb20-ss)) / 2 * 100% + var(--kik-built-to-stay-out-c46f48cb20-gap) + var(--n) * (var(--kik-built-to-stay-out-c46f48cb20-ss) * 100% + var(--kik-built-to-stay-out-c46f48cb20-gap)))) 0;
  scale: var(--kik-built-to-stay-out-c46f48cb20-ss);
  transition: translate 0.45s ease, scale 0.45s ease, opacity 0.35s ease;
}



.kik-built-to-stay-out-c46f48cb20-slide[data-active="true"] {
  translate: 0 0;
  scale: 1;
  opacity: 1;
  z-index: 2;
}



/* Scenes far outside the viewport are parked without animating across it. */
.kik-built-to-stay-out-c46f48cb20-slide[data-jump="true"] {
  transition: none;
}



.kik-built-to-stay-out-c46f48cb20-slide img {
  object-position: var(--kik-built-to-stay-out-c46f48cb20-focal-mobile, var(--kik-built-to-stay-out-c46f48cb20-focal, 50% 50%));
}



.kik-built-to-stay-out-c46f48cb20-caption {
  transition: opacity 0.35s ease;
}



.kik-built-to-stay-out-c46f48cb20-slide:not([data-active="true"]) .kik-built-to-stay-out-c46f48cb20-caption {
  opacity: 0;
}



.kik-built-to-stay-out-c46f48cb20-arrow {
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}



.kik-built-to-stay-out-c46f48cb20-arrow[data-dir="-1"] {
  left: calc((100% - var(--kik-built-to-stay-out-c46f48cb20-sw)) / 2 + 8px);
}



.kik-built-to-stay-out-c46f48cb20-arrow[data-dir="1"] {
  right: calc((100% - var(--kik-built-to-stay-out-c46f48cb20-sw)) / 2 + 8px);
}



@media (hover: hover) and (pointer: fine) {
  .kik-built-to-stay-out-c46f48cb20 .kik-built-to-stay-out-c46f48cb20-arrow:hover {
    background-color: var(--kik-color-bg-page);
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
  }}



.kik-built-to-stay-out-c46f48cb20-arrow:disabled {
  opacity: 0.5;
  cursor: default;
}



/* Tabs scroll sideways on mobile, as the frame shows them running off the edge. */
.kik-built-to-stay-out-c46f48cb20-tablist {
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}



.kik-built-to-stay-out-c46f48cb20-tablist::-webkit-scrollbar {
  display: none;
}



.kik-built-to-stay-out-c46f48cb20-tab {
  cursor: pointer;
}



.kik-built-to-stay-out-c46f48cb20-label {
  transition: color 0.2s ease;
}



/* Both tab states are declared here so a tab rendered in either state follows
   aria-selected; the selectors outrank the initial token utilities on the label. */
.kik-built-to-stay-out-c46f48cb20 .kik-built-to-stay-out-c46f48cb20-tab[aria-selected="false"] .kik-built-to-stay-out-c46f48cb20-label {
  font-family: var(--kik-text-font-body);
  font-size: var(--kik-text-size-body-lg);
  font-weight: 500;
  line-height: var(--kik-text-line-height-body-lg);
  letter-spacing: 0.025em;
  color: var(--kik-color-text-disabled);
}



/* Selected tab: the highlighted H4 style (bold, larger, dark green). */
.kik-built-to-stay-out-c46f48cb20 .kik-built-to-stay-out-c46f48cb20-tab[aria-selected="true"] .kik-built-to-stay-out-c46f48cb20-label {
  font-family: var(--kik-text-font-heading);
  font-size: clamp(var(--kik-text-size-h4--mobile), calc(var(--kik-text-size-h4--mobile) - 0.69814503px + 0.16863406vw), var(--kik-text-size-h4--desktop));
  font-weight: 700;
  line-height: var(--kik-text-line-height-h4);
  letter-spacing: 0;
  color: var(--kik-color-action-primary);
}



@media (hover: hover) and (pointer: fine) {
  .kik-built-to-stay-out-c46f48cb20 .kik-built-to-stay-out-c46f48cb20-tab[aria-selected="false"]:hover .kik-built-to-stay-out-c46f48cb20-label {
    color: var(--kik-color-text-secondary);
  }}



.kik-built-to-stay-out-c46f48cb20-fill {
  width: 0;
}



/* The source draws the selected tab as an 18px dark stub at the left of its
   track (Figma "Rectangle 1", 11486:797 / 11486:1436). With autoplay on the
   stub grows into the dwell timer, driven by --p from the custom element. */
.kik-built-to-stay-out-c46f48cb20-tab[aria-selected="true"] .kik-built-to-stay-out-c46f48cb20-fill {
  width: max(18px, calc(var(--p, 0) * 100%));
}



/* Autoplay off: nothing to time, so the selected tab keeps the source stub. */
[data-autoplay="false"] .kik-built-to-stay-out-c46f48cb20-tab[aria-selected="true"] .kik-built-to-stay-out-c46f48cb20-fill {
  width: 18px;
}



@media (min-width: 768px) {
  .kik-built-to-stay-out-c46f48cb20-viewport {
    --kik-built-to-stay-out-c46f48cb20-sw: 100%;
    --kik-built-to-stay-out-c46f48cb20-ss: 0.955;
    --kik-built-to-stay-out-c46f48cb20-gap: clamp(8px, calc(5.2074199px + 0.67453626vw), 16px);
    height: auto;
    aspect-ratio: 1416 / 586;
    /* The 1416 / 586 frame ratio holds from ~1015px up. Narrower desktop widths
       would shrink the scene until its bottom caption reaches the centred
       arrows (295px tall at 768), so the scene keeps a usable minimum height. */
    min-height: 440px;
  }


  .kik-built-to-stay-out-c46f48cb20-slide {
    opacity: 1;
  }


  /* Desktop centres the tab row inside its scroller. Alignment instead of auto
     margins keeps the row's box free of content-derived margins; "safe" keeps
     the first tab reachable if the labels ever overflow. */
  .kik-built-to-stay-out-c46f48cb20 .kik-built-to-stay-out-c46f48cb20-tablist {
    align-items: safe center;
  }


  .kik-built-to-stay-out-c46f48cb20-slide img {
    object-position: var(--kik-built-to-stay-out-c46f48cb20-focal, 50% 50%);
  }


  .kik-built-to-stay-out-c46f48cb20-arrow[data-dir="-1"] {
    left: 24px;
  }


  .kik-built-to-stay-out-c46f48cb20-arrow[data-dir="1"] {
    right: 24px;
  }}



@media (prefers-reduced-motion: reduce) {
  .kik-built-to-stay-out-c46f48cb20-slide,
  .kik-built-to-stay-out-c46f48cb20-caption,
  .kik-built-to-stay-out-c46f48cb20-label {
    transition: none;
  }}



/* Measuring pass for the held panel-list height: no transitions while panels are toggled. */
.kik-daylight-brightness-a91aa657a7-measure,
.kik-daylight-brightness-a91aa657a7-measure * {
  transition: none !important;
}



/* Below the split layout the row (desktop node 11486:823) stacks media over the panel list and
   uses the mobile column gap (kik-space/gap/xl fluid). The platform token sheet loads after the
   page bundle and turns gap-kik-space-scale-80 on from 768px, so this needs the extra class
   weight; from 1024px the token rule's 80px applies untouched. */
@media (max-width: 1023.98px) {
  .kik-daylight-brightness-a91aa657a7 .kik-daylight-brightness-a91aa657a7-row.kik-daylight-brightness-a91aa657a7-row {
    gap: clamp(var(--kik-space-gap-xl--mobile), calc(var(--kik-space-gap-xl--mobile) - 2.7925801px + 0.67453626vw), var(--kik-space-gap-xl--desktop));
  }}



/* Host theme leaks. body (components.css) sets letter-spacing: var(--type-base-spacing), which every
   node inherits; "h1, h2, h3, p, a, button" (theme.css) and "body, input, textarea, button, select"
   (components.css, !important) set the host font-family directly on those elements. Restore the
   Section's own inheritance and its heading/body font tokens. !important is required to beat the
   host's !important button rule. */
.kik-daylight-brightness-a91aa657a7.kik-daylight-brightness-a91aa657a7 {
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: normal !important;
}


.kik-daylight-brightness-a91aa657a7.kik-daylight-brightness-a91aa657a7 :is(h2, h3, p, a, button) {
  font-family: inherit !important;
}


.kik-daylight-brightness-a91aa657a7.kik-daylight-brightness-a91aa657a7 button {
  letter-spacing: inherit !important;
}


.kik-daylight-brightness-a91aa657a7.kik-daylight-brightness-a91aa657a7 .kik-daylight-brightness-a91aa657a7-fh {
  font-family: var(--kik-text-font-heading) !important;
}


.kik-daylight-brightness-a91aa657a7.kik-daylight-brightness-a91aa657a7 .kik-daylight-brightness-a91aa657a7-fb {
  font-family: var(--kik-text-font-body) !important;
}



/* Media framing (desktop node 11486:846, mobile 11486:1458). The per-image focus and zoom settings
   arrive as custom properties on the img; object-position and transform-origin share the focus so
   the zoom keeps the chosen point in place. Declared here rather than as arbitrary utilities so the
   framing always applies (the hosted render showed the zoom centred at 50% 50%), with class weight
   above host img rules. */
.kik-daylight-brightness-a91aa657a7 .kik-daylight-brightness-a91aa657a7-media.kik-daylight-brightness-a91aa657a7-media {
  object-fit: cover;
  object-position: var(--kik-db-pos-m, 50% 50%);
  transform-origin: var(--kik-db-pos-m, 50% 50%);
  scale: var(--kik-db-zoom-m, 1);
}


@media (min-width: 1024px) {
  .kik-daylight-brightness-a91aa657a7 .kik-daylight-brightness-a91aa657a7-media.kik-daylight-brightness-a91aa657a7-media {
    object-position: var(--kik-db-pos-d, 50% 50%);
    transform-origin: var(--kik-db-pos-d, 50% 50%);
    scale: var(--kik-db-zoom-d, 1);
  }}



/* Panels 2+ (desktop-only nodes 11486:837 / 11486:841) keep their source kik-space/gap/xl token,
   which the token sheet only defines from 768px. Below that they are the stacked repeats of the
   mobile panel 11486:1461 (kik-space/gap/md, 16px between the 3px track and the copy), so give every
   panel the mobile gap there instead of the browser's normal 0. */
@media (width < 768px) {
  .kik-daylight-brightness-a91aa657a7 .kik-daylight-brightness-a91aa657a7-panel.kik-daylight-brightness-a91aa657a7-panel {
    column-gap: var(--kik-space-gap-md);
    row-gap: var(--kik-space-gap-md);
  }}



/* Panel headings 11486:840 / 11486:844 keep the source kik-text/size/h2 token class (40px at the
   desktop canvas). Between the breakpoints they follow the same fluid h2 recipe as the paired
   heading 11486:829 / 11486:1465, which resolves to that 40px at the desktop endpoint, so all panel
   headings share one size and the two-line "An Anti-Glare Screen, / Not a Mirror" structure holds
   in the narrower 1024px text column. */
.kik-daylight-brightness-a91aa657a7 .kik-daylight-brightness-a91aa657a7-panel.kik-daylight-brightness-a91aa657a7-panel [data-kik-db-toggle] {
  font-size: clamp(var(--kik-text-size-h2--mobile), calc(var(--kik-text-size-h2--mobile) - 2.7925801px + 0.67453626vw), var(--kik-text-size-h2--desktop));
}



/* Split-layout text column (desktop node 11486:824). The source shares the row 716:620 with the
   media at the 1600 canvas, where the 40px heading line "An Anti-Glare Screen," (11486:840, 10.44em
   in the bold HarmonyOS Sans face) fits on one line. Near 1024px that share drops to ~352px while the
   fluid h2 is still ~36px, so the line broke into three. Hold the column at least wide enough for a
   10.5em heading line plus the 3px track and the panel gap; the media (fixed 716/470 ratio) yields
   the difference. From ~1180px the source ratio already exceeds this, so the 1600 frame is unchanged. */
@media (min-width: 1024px) {
  .kik-daylight-brightness-a91aa657a7 .kik-daylight-brightness-a91aa657a7-row > [data-kik-db-panels] {
    min-width: min(100%, calc(clamp(var(--kik-text-size-h2--mobile), calc(var(--kik-text-size-h2--mobile) - 2.7925801px + 0.67453626vw), var(--kik-text-size-h2--desktop)) * 10.5 + 3px + var(--kik-space-gap-xl)));
  }}



/* Root: the token contract emits py-kik-space-gutter-none after pb-kik-space-section-lg-fluid at equal
   specificity, which would zero the 50px mobile bottom padding. Re-assert the same bound pb recipe; this file loads after the token CSS. */
.kik-outdoor-sound-0201c1c4a2.kik-outdoor-sound-0201c1c4a2-root.kik-outdoor-sound-0201c1c4a2-root {
  padding-bottom: clamp(var(--kik-space-gutter-none--desktop), calc(var(--kik-space-section-lg--mobile) + 17.45362563px - 4.2158516vw), var(--kik-space-section-lg--mobile));
}



/* Backgrounds: the token contract emits each frame's alias unconditionally (bg-page vs bg-surface-inverse,
   bg-page vs bg-surface). Bind them per breakpoint: mobile 11486:1478 page / 11486:1494 surface,
   desktop 11486:849 inverse / 11486:866 page. */
.kik-outdoor-sound-0201c1c4a2.kik-outdoor-sound-0201c1c4a2-root.kik-outdoor-sound-0201c1c4a2-root {
  background-color: var(--kik-color-bg-page);
}


.kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-specs.kik-outdoor-sound-0201c1c4a2-specs {
  background-color: var(--kik-color-bg-surface);
}


@media (min-width: 768px) {
  .kik-outdoor-sound-0201c1c4a2.kik-outdoor-sound-0201c1c4a2-root.kik-outdoor-sound-0201c1c4a2-root {
    background-color: var(--kik-color-bg-inverse);
  }

  .kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-specs.kik-outdoor-sound-0201c1c4a2-specs {
    background-color: var(--kik-color-bg-page);
  }}



/* Host theme collisions: components.css sets `body, button` and `h1..h6` font-family with !important
   and a body/heading letter-spacing that inherits into the section. Re-own family and tracking here;
   elements with their own tracking utility keep it (higher specificity than the root). */
.kik-outdoor-sound-0201c1c4a2.kik-outdoor-sound-0201c1c4a2-root.kik-outdoor-sound-0201c1c4a2-root {
  font-family: var(--kik-text-font-body);
  letter-spacing: normal;
}


.kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-src.kik-outdoor-sound-0201c1c4a2-src {
  font-family: var(--kik-text-font-body) !important;
  letter-spacing: normal;
}


.kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-heading.kik-outdoor-sound-0201c1c4a2-heading {
  font-family: var(--kik-text-font-heading) !important;
  letter-spacing: normal;
}



/* Scene stack: one layer per source, cross-faded. */
.kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-scene {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}


.kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-scene[data-active="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease;
}


/* Framing: cover, anchored by the merchant focal point or the block's vertical alignment, then
   zoomed by the block's zoom setting around the same anchor (Figma crops the scene fill top-centre). */
.kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-scene img,
.kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-scene video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--kik-os-focal, 50% var(--kik-os-anchor, 50%));
  transform-origin: var(--kik-os-focal, 50% var(--kik-os-anchor, 50%));
  scale: var(--kik-os-zoom, 100%);
}


@media (max-width: 767px) {
  .kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-scene img,
  .kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-scene video {
    object-position: var(--kik-os-focal-mobile, var(--kik-os-focal, 50% var(--kik-os-anchor, 50%)));
    transform-origin: var(--kik-os-focal-mobile, var(--kik-os-focal, 50% var(--kik-os-anchor, 50%)));
    scale: var(--kik-os-zoom-mobile, 100%);
  }}


/* Desktop stage: 11486:850 stays static at md so the scene layer (11486:1479) is positioned against the
   root and also covers the root's fluid bottom padding; otherwise the inverse root background showed as a
   solid strip under the hero between 768px and ~1535px. */
@media (min-width: 768px) {
  .kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-stage.kik-outdoor-sound-0201c1c4a2-stage {
    position: static;
  }

  /* Keep the desktop frame's crop (Figma fills 11486:1479 at 1600 x 728) at narrower widths: the media
     covers a virtual box at least as wide as the design ratio, centred, so a taller-than-design box never
     reveals more of the image vertically than the source frame shows. Wider boxes cover normally. */
  .kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-scene {
    container-type: size;
  }

  .kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-scene img,
  .kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-scene video {
    left: 50%;
    right: auto;
    width: max(100cqw, 100cqh * 1600 / 728);
    translate: -50% 0;
  }}


/* Host lazy-image fade rules can hide a <video> that only carries <source> children. */
.kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-scene video {
  opacity: 1;
}



.kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-shade {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.72) 100%);
}


@media (min-width: 768px) {
  .kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-shade {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0) 75%);
  }}



/* Supporting lines: stacked in one grid cell, only the active one is shown. */
.kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-line {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}


.kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-line[data-active="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}



/* Source selector: horizontally scrolling pill row on mobile. */
.kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-sel {
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--kik-space-side-margin-default);
}


.kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-sel::-webkit-scrollbar {
  display: none;
}


/* (0,3,0)+ selectors: the token-contract aliases on each pill describe its Figma frame state;
   these rules make the paint follow the live aria-selected state in both directions. */
.kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-sel .kik-outdoor-sound-0201c1c4a2-src {
  scroll-snap-align: start;
  border-width: 1px;
  border-style: solid;
  border-radius: var(--kik-radius-sm);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}


.kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-sel .kik-outdoor-sound-0201c1c4a2-src[aria-selected="false"] {
  background-color: var(--kik-color-bg-surface);
  border-color: transparent;
}


.kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-sel .kik-outdoor-sound-0201c1c4a2-src[aria-selected="false"] .kik-outdoor-sound-0201c1c4a2-tick {
  background-color: #b4b4b4;
}


.kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-sel .kik-outdoor-sound-0201c1c4a2-src[aria-selected="false"] .kik-outdoor-sound-0201c1c4a2-label {
  color: var(--kik-color-text-secondary);
}


.kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-sel .kik-outdoor-sound-0201c1c4a2-src[aria-selected="true"] {
  background-color: var(--kik-color-bg-page);
  border-color: var(--kik-color-border-accent, #20413b);
  opacity: 1;
}


.kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-sel .kik-outdoor-sound-0201c1c4a2-src[aria-selected="true"] .kik-outdoor-sound-0201c1c4a2-tick {
  background-color: var(--kik-color-action-primary);
}


.kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-sel .kik-outdoor-sound-0201c1c4a2-src[aria-selected="true"] .kik-outdoor-sound-0201c1c4a2-label {
  color: var(--kik-color-text-primary);
}


@media (hover: hover) and (pointer: fine) and (max-width: 767px) {
  .kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-sel .kik-outdoor-sound-0201c1c4a2-src[aria-selected="false"]:hover .kik-outdoor-sound-0201c1c4a2-label {
    color: var(--kik-color-text-primary);
  }}


@media (min-width: 768px) {
  .kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-sel .kik-outdoor-sound-0201c1c4a2-src {
    border-radius: 10px;
  }

  .kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-sel .kik-outdoor-sound-0201c1c4a2-src[aria-selected="false"] {
    background-color: transparent;
  }

  .kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-sel .kik-outdoor-sound-0201c1c4a2-src[aria-selected="false"] .kik-outdoor-sound-0201c1c4a2-tick {
    background-color: var(--kik-color-text-inverse);
  }

  .kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-sel .kik-outdoor-sound-0201c1c4a2-src[aria-selected="false"] .kik-outdoor-sound-0201c1c4a2-label {
    color: var(--kik-color-text-inverse);
  }

  .kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-sel .kik-outdoor-sound-0201c1c4a2-src[aria-selected="true"] {
    border-radius: var(--kik-radius-sm);
    border-color: transparent;
  }}


@media (prefers-reduced-motion: reduce) {
  .kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-scene,
  .kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-line,
  .kik-outdoor-sound-0201c1c4a2 .kik-outdoor-sound-0201c1c4a2-sel .kik-outdoor-sound-0201c1c4a2-src {
    transition: none;
  }}



/* 07 Ports, Rear Panel & Google TV — owned Section styles.
 * The delivery bundle can load this file before the platform token
 * stylesheet, so the responsive gap choices below use !important to win over
 * the single-breakpoint token gap classes regardless of load order. */

/* Host theme: body letter-spacing (var(--type-base-spacing)) is inherited
 * into the Section; the source uses normal tracking unless a node sets it. */
.kik-ports-google-tv-b6a32575c9.kik-ports-google-tv-b6a32575c9 {
  letter-spacing: normal;
}



/* Host components.css forces `font-family … !important` on h1–h6 and button
 * and sets heading letter-spacing; restore the source heading font. */
.kik-ports-google-tv-b6a32575c9 :is(h2, h3) {
  font-family: var(--kik-text-font-heading) !important;
  letter-spacing: normal !important;
}


.kik-ports-google-tv-b6a32575c9 button {
  font-family: inherit !important;
  letter-spacing: inherit !important;
}



/* Port rows: a single 1px top divider between rows, no other sides. */
.kik-ports-google-tv-b6a32575c9 .kik-ports-google-tv-b6a32575c9-port {
  border-style: solid;
  border-width: 1px 0 0;
}


.kik-ports-google-tv-b6a32575c9 .kik-ports-google-tv-b6a32575c9-port:first-child {
  border-top-width: 0;
}



/* Rear panel photo is cropped to the layout frame (Figma 11486:1527 mobile
 * 382x220, 11486:899 desktop 676x480) with object-cover; the merchant focal
 * point decides what survives the crop. */
.kik-ports-google-tv-b6a32575c9 .kik-ports-google-tv-b6a32575c9-rear {
  aspect-ratio: 382 / 220;
}


@media (min-width: 1024px) {
  .kik-ports-google-tv-b6a32575c9 .kik-ports-google-tv-b6a32575c9-rear {
    aspect-ratio: 676 / 480;
  }}



/* Streaming app logo grid: mobile frame uses gap/sm, desktop frame gap/md. */
.kik-ports-google-tv-b6a32575c9 .kik-ports-google-tv-b6a32575c9-apps {
  row-gap: var(--kik-space-gap-sm) !important;
  column-gap: var(--kik-space-gap-sm) !important;
}


@media (min-width: 768px) {
  .kik-ports-google-tv-b6a32575c9 .kik-ports-google-tv-b6a32575c9-apps {
    row-gap: var(--kik-space-gap-md) !important;
    column-gap: var(--kik-space-gap-md) !important;
  }}



/* Google TV panel: stacked (scale/24) on mobile, split row (gap/2xl) on desktop. */
.kik-ports-google-tv-b6a32575c9 .kik-ports-google-tv-b6a32575c9-gtv {
  row-gap: var(--kik-space-scale-24) !important;
  column-gap: var(--kik-space-scale-24) !important;
}


@media (min-width: 1024px) {
  .kik-ports-google-tv-b6a32575c9 .kik-ports-google-tv-b6a32575c9-gtv {
    row-gap: var(--kik-space-gap-2xl) !important;
    column-gap: var(--kik-space-gap-2xl) !important;
  }}



/* App logos keep their artwork proportions at the merchant-set height. */
.kik-ports-google-tv-b6a32575c9 .kik-ports-google-tv-b6a32575c9-logo {
  display: block;
  width: auto;
  max-width: none;
  height: var(--kik-ports-google-tv-b6a32575c9-logo-h-mobile, 22px);
}


.kik-ports-google-tv-b6a32575c9 .kik-ports-google-tv-b6a32575c9-logo-extra {
  height: calc(var(--kik-ports-google-tv-b6a32575c9-logo-h-mobile, 22px) * 0.9);
}


@media (min-width: 768px) {
  .kik-ports-google-tv-b6a32575c9 .kik-ports-google-tv-b6a32575c9-logo {
    height: var(--kik-ports-google-tv-b6a32575c9-logo-h, 22px);
  }

  .kik-ports-google-tv-b6a32575c9 .kik-ports-google-tv-b6a32575c9-logo-extra {
    height: calc(var(--kik-ports-google-tv-b6a32575c9-logo-h, 22px) * 0.9);
  }}


.kik-ports-google-tv-b6a32575c9 .kik-ports-google-tv-b6a32575c9-loop {
  animation: kik-ports-google-tv-b6a32575c9-loop 14s ease-in-out infinite alternate;
  transform-origin: 50% 40%;
}


.kik-ports-google-tv-b6a32575c9 [data-paused="true"] .kik-ports-google-tv-b6a32575c9-loop,
.kik-ports-google-tv-b6a32575c9 [data-compare="true"] .kik-ports-google-tv-b6a32575c9-loop {
  animation-play-state: paused;
}


@media (prefers-reduced-motion: reduce) {
  .kik-ports-google-tv-b6a32575c9 .kik-ports-google-tv-b6a32575c9-loop {
    animation: none;
  }}



/* Play / pause glyph swap follows aria-pressed (true = paused, shows play). */
.kik-ports-google-tv-b6a32575c9 .kik-ports-google-tv-b6a32575c9-play {
  display: none;
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #ffffff;
}


.kik-ports-google-tv-b6a32575c9 [aria-pressed="true"] .kik-ports-google-tv-b6a32575c9-play {
  display: block;
}


.kik-ports-google-tv-b6a32575c9 [aria-pressed="true"] .kik-ports-google-tv-b6a32575c9-pause {
  display: none;
}



.kik-full-specifications-5977c9b0fe-font-montserrat {
  font-family: "Montserrat";
}



/* The host theme forces its own family onto body, button and h1-h6 with
   !important (components.css), which beats the token utilities. Re-assert the
   source families on exactly those elements; buttons inherit the Section's own
   family because their visible labels carry their own font utilities. */
.kik-full-specifications-5977c9b0fe .kik-full-specifications-5977c9b0fe-ff-heading {
  font-family: var(--kik-text-font-heading) !important;
}


.kik-full-specifications-5977c9b0fe .kik-full-specifications-5977c9b0fe-ff-body {
  font-family: var(--kik-text-font-body) !important;
}


.kik-full-specifications-5977c9b0fe .kik-full-specifications-5977c9b0fe-ff-inherit {
  font-family: inherit !important;
}



/* The tab row starts on the Section's side margin and bleeds only through the
   right margin (same fluid formula as the root padding), so tabs clip at the
   viewport edge while the first pill stays aligned with the heading. */
.kik-full-specifications-5977c9b0fe .kik-full-specifications-5977c9b0fe-tabs {
  --kik-full-specifications-5977c9b0fe-bleed: clamp(var(--kik-space-side-margin-default--mobile), calc(var(--kik-space-side-margin-default--mobile) - 26.52951096px + 6.40809444vw), var(--kik-space-side-margin-default--desktop));
  width: calc(100% + var(--kik-full-specifications-5977c9b0fe-bleed));
  margin-inline-end: calc(-1 * var(--kik-full-specifications-5977c9b0fe-bleed));
  padding-inline-end: var(--kik-full-specifications-5977c9b0fe-bleed);
  scrollbar-width: none;
}


.kik-full-specifications-5977c9b0fe-tabs::-webkit-scrollbar {
  display: none;
}



/* Figma strokes sit inside their frames, so a CSS border would add to the
   measured box (56px Learn More button, 46px/50px spec rows). Paint those
   strokes as inset shadows so the source geometry holds. */
.kik-full-specifications-5977c9b0fe .kik-full-specifications-5977c9b0fe-more {
  box-shadow: inset 0 0 0 1px #000;
}


.kik-full-specifications-5977c9b0fe .kik-full-specifications-5977c9b0fe-row + .kik-full-specifications-5977c9b0fe-row {
  box-shadow: inset 0 1px 0 0 var(--kik-color-border-subtle);
}



/* When two cards share a grid row the shorter one stretches (Figma 11486:1006
   self-stretch) and its last row carries a bottom divider (11486:1021 border-b).
   The filler takes the leftover height and paints that divider on its top edge;
   in the tallest card it has zero height, so nothing doubles the card border. */
.kik-full-specifications-5977c9b0fe .kik-full-specifications-5977c9b0fe-fill {
  box-shadow: inset 0 1px 0 0 var(--kik-color-border-subtle);
}



/* Host theme isolation.
   components.css forces its family with !important on body, button, input and h3-h6, and theme.css
   sets h1-h3/p/a/button to neurial_grotesk; both beat the token font utilities. The source family
   (kik-text/font/body and /heading, both HarmonyOS Sans) therefore needs !important here. */
.kik-find-your-fit-e33a8fff91,
.kik-find-your-fit-e33a8fff91 * {
  font-family: var(--kik-text-font-body) !important;
}


.kik-find-your-fit-e33a8fff91 [class~="kik:font-kik-text-font-heading"] {
  font-family: var(--kik-text-font-heading) !important;
}



/* body/heading/control rules in the host set letter-spacing (0.375px); the source has none unless a
   tracking utility is present. Reset the root and the elements the host targets directly, leaving
   every tracking utility in charge of its own element. */
.kik-find-your-fit-e33a8fff91 {
  letter-spacing: normal;
}


.kik-find-your-fit-e33a8fff91 :is(h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea):not([class*="tracking-"]) {
  letter-spacing: inherit;
}



/* Screen-reader status line: host p:last-child { margin-bottom: 0 } outranks the sr-only utility. */
.kik-find-your-fit-e33a8fff91 .kik-find-your-fit-e33a8fff91-status {
  margin: -1px;
}



/* Mobile frame: chip rows sit 8px apart (columns stay 12px).
   The token stylesheet's unconditional gap/colour rules have the same specificity, so these follow it. */
@media (width < 768px) {
  .kik-find-your-fit-e33a8fff91 .kik-find-your-fit-e33a8fff91-chips {
    row-gap: 8px;
  }

  /* Fit panels stack 16px apart on mobile (gap/md); the desktop row keeps scale/24. */
  .kik-find-your-fit-e33a8fff91 .kik-find-your-fit-e33a8fff91-panels {
    gap: var(--kik-space-gap-md);
  }}



/* Chip label: the inner mobile span paints #4d4d4d (kik:text-[#4d4d4d]); from 768px it inherits the
   outer span's token colour (text-secondary), so desktop keeps the source token. */
@media (min-width: 768px) {
  .kik-find-your-fit-e33a8fff91 .kik-find-your-fit-e33a8fff91-chip-label-mobile {
    color: inherit;
  }}


.kik-find-your-fit-e33a8fff91 [aria-pressed="true"] .kik-find-your-fit-e33a8fff91-chip-label-mobile {
  color: #ffffff;
}



/* Selected size chip: label turns white on the action-primary fill (button fill is a Tailwind state utility). */
.kik-find-your-fit-e33a8fff91 [aria-pressed="true"] > .kik-find-your-fit-e33a8fff91-chip-label {
  color: #ffffff;
}



/* Outline CTA hover: fill with action-primary and invert the label.
   The token stylesheet's bg-action-secondary rule would otherwise win over a Tailwind hover utility. */
.kik-find-your-fit-e33a8fff91 .kik-find-your-fit-e33a8fff91-cta {
  transition: background-color 0.2s ease, color 0.2s ease;
}


.kik-find-your-fit-e33a8fff91 .kik-find-your-fit-e33a8fff91-cta:hover {
  background-color: var(--kik-color-action-primary);
}


.kik-find-your-fit-e33a8fff91 .kik-find-your-fit-e33a8fff91-cta:hover .kik-find-your-fit-e33a8fff91-cta-label {
  color: #ffffff;
}



@media (prefers-reduced-motion: reduce) {
  .kik-find-your-fit-e33a8fff91 .kik-find-your-fit-e33a8fff91-cta {
    transition: none;
  }}



/* Mobile light tabs: selected paint follows aria-selected after JS switches tabs
   (the markup's initial bg/text utilities only describe the server-rendered first tab). */
.kik-find-your-fit-e33a8fff91 .kik-find-your-fit-e33a8fff91-tab[aria-selected="true"] {
  background-color: var(--kik-color-action-primary);
  border-color: var(--kik-color-action-primary);
}


.kik-find-your-fit-e33a8fff91 .kik-find-your-fit-e33a8fff91-tab[aria-selected="false"] {
  background-color: #ffffff;
  border-color: #e8e8e8;
}


.kik-find-your-fit-e33a8fff91 .kik-find-your-fit-e33a8fff91-tab[aria-selected="false"]:hover {
  border-color: var(--kik-color-action-primary);
}


.kik-find-your-fit-e33a8fff91 [aria-selected="true"] > .kik-find-your-fit-e33a8fff91-tab-label {
  color: #ffffff;
}


.kik-find-your-fit-e33a8fff91 [aria-selected="false"] > .kik-find-your-fit-e33a8fff91-tab-label {
  color: #4d4d4d;
}



/* Desktop image safe area (block settings crop_top/right/bottom/left, in %).
   The view box trims the photo first, then object-fit: cover fills the card from what remains, so the
   trimmed edges never reappear at any card width. Browsers without object-view-box zoom from the
   untrimmed corner instead. A separately chosen mobile image is shown untrimmed below 768px. */
.kik-find-your-fit-e33a8fff91 .kik-find-your-fit-e33a8fff91-media-img {
  --kik-fyf-ct: calc(var(--kik-fyf-crop-t, 0) * 1%);
  --kik-fyf-cr: calc(var(--kik-fyf-crop-r, 0) * 1%);
  --kik-fyf-cb: calc(var(--kik-fyf-crop-b, 0) * 1%);
  --kik-fyf-cl: calc(var(--kik-fyf-crop-l, 0) * 1%);
}


@supports (object-view-box: inset(0%)) {
  .kik-find-your-fit-e33a8fff91 .kik-find-your-fit-e33a8fff91-media-img {
    object-view-box: inset(var(--kik-fyf-ct) var(--kik-fyf-cr) var(--kik-fyf-cb) var(--kik-fyf-cl));
  }}


@supports not (object-view-box: inset(0%)) {
  .kik-find-your-fit-e33a8fff91 .kik-find-your-fit-e33a8fff91-media-img {
    transform-origin: calc(var(--kik-fyf-crop-l, 0) / (var(--kik-fyf-crop-l, 0) + var(--kik-fyf-crop-r, 0) + 0.0001) * 100%)
      calc(var(--kik-fyf-crop-t, 0) / (var(--kik-fyf-crop-t, 0) + var(--kik-fyf-crop-b, 0) + 0.0001) * 100%);
    transform: scale(calc(100 / (100 - max(var(--kik-fyf-crop-t, 0) + var(--kik-fyf-crop-b, 0), var(--kik-fyf-crop-l, 0) + var(--kik-fyf-crop-r, 0)))));
  }}


@media (width < 768px) {
  .kik-find-your-fit-e33a8fff91 .kik-find-your-fit-e33a8fff91-media-img[data-has-mobile="true"] {
    object-view-box: none;
    transform: none;
  }}



/* Host theme guards: components.css sets body/h1-h6/button font-family with !important and a body
   letter-spacing that every descendant inherits; the section restores its own type tokens. */
.kik-real-backyards-73a83a2fec {
  font-family: var(--kik-text-font-body);
  letter-spacing: normal;
}


.kik-real-backyards-73a83a2fec h2 {
  font-family: var(--kik-text-font-heading) !important;
  letter-spacing: normal;
}


.kik-real-backyards-73a83a2fec button,
.kik-real-backyards-73a83a2fec a {
  font-family: inherit !important;
  letter-spacing: inherit;
}



/* Slides sit on one centre line; data-offset places them (0 = active, -1/1 = peeking neighbours, -2/2 = parked). */
.kik-real-backyards-73a83a2fec-slide {
  --kik-rb-o: 2;
  transform: translateX(calc(-50% + var(--kik-rb-o) * (100% + var(--kik-space-gap-md, 16px))));
  transition: transform 0.5s ease, opacity 0.5s ease, visibility 0s linear 0.5s;
  visibility: hidden;
}


.kik-real-backyards-73a83a2fec-slide[data-offset="-2"] { --kik-rb-o: -2; }


.kik-real-backyards-73a83a2fec-slide[data-offset="-1"] { --kik-rb-o: -1; visibility: visible; transition-delay: 0s; }


.kik-real-backyards-73a83a2fec-slide[data-offset="0"] { --kik-rb-o: 0; visibility: visible; transition-delay: 0s; }


.kik-real-backyards-73a83a2fec-slide[data-offset="1"] { --kik-rb-o: 1; visibility: visible; transition-delay: 0s; }


.kik-real-backyards-73a83a2fec-slide[data-jump] { transition: none; }


/* Overrides host [hidden] resets so slides of other settings never paint. */
.kik-real-backyards-73a83a2fec .kik-real-backyards-73a83a2fec-slide[hidden],
.kik-real-backyards-73a83a2fec [data-kik-rb-nav][hidden],
.kik-real-backyards-73a83a2fec [data-kik-rb-shop][hidden],
.kik-real-backyards-73a83a2fec [data-kik-rb-caption][hidden] { display: none; }



.kik-real-backyards-73a83a2fec-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Merchant "image zoom" crops inside the frame. Using the same point for object-position and
     transform-origin keeps that point fixed, so the position picks which part of the zoomed photo shows. */
  object-position: var(--kik-rb-pos-mobile, 50% 50%);
  transform-origin: var(--kik-rb-pos-mobile, 50% 50%);
  scale: calc(var(--kik-rb-zoom-mobile, 100) / 100);
}


@media (min-width: 1024px) {
  .kik-real-backyards-73a83a2fec-media {
    object-position: var(--kik-rb-pos, 50% 50%);
    transform-origin: var(--kik-rb-pos, 50% 50%);
    scale: calc(var(--kik-rb-zoom, 100) / 100);
  }}



/* Tab progress line: the fill grows with --kik-rb-p (0..1) set on the tab by the timer. It starts at the
   source's 18px segment (11486:1152 / 11486:1764), so the active line is never empty, and fills the track. */
.kik-real-backyards-73a83a2fec-fill {
  width: calc(18px + (100% - 18px) * var(--kik-rb-p, 0));
}


.kik-real-backyards-73a83a2fec-tabs {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}


.kik-real-backyards-73a83a2fec-tabs::-webkit-scrollbar { display: none; }


/* Mobile source (11486:1754) starts at the side margin and runs off the right frame edge: the scrolling
   strip bleeds through the wrapper's right padding to the viewport edge. Equal trailing padding keeps a
   non-overflowing strip centred and leaves the side-margin gutter after the last tab when scrolled. */
@media (max-width: 1023.98px) {
  .kik-real-backyards-73a83a2fec-tabs {
    margin-right: calc(-1 * var(--kik-space-side-margin-default));
    padding-right: var(--kik-space-side-margin-default);
    max-width: calc(100% + var(--kik-space-side-margin-default));
  }}



@media (prefers-reduced-motion: reduce) {
  .kik-real-backyards-73a83a2fec-slide { transition: none; }}



/* The host body sets letter-spacing: var(--text-letter-spacing) (0.425px), which every
   node inherits. The source uses normal tracking; clip captions keep their own tracking. */
.kik-owner-videos-d7d95e0ad4 {
  letter-spacing: normal;
}



/* Host components.css declares h1-h6 { font-family: var(--type-base-primary) ... !important },
   which beats the token class. Re-assert the source heading token at matching importance. */
.kik-owner-videos-d7d95e0ad4 .kik-owner-videos-d7d95e0ad4-heading {
  font-family: var(--kik-text-font-heading) !important;
}



/* Host components.css declares body, input, textarea, button, select
   { font-family: var(--type-base-primary) ... !important }, so the play button and its
   icon descendants resolved to the host font instead of the Section's own font.
   Inherit the Section font through the control at matching importance. */
.kik-owner-videos-d7d95e0ad4 .kik-owner-videos-d7d95e0ad4-play {
  font-family: inherit !important;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}



/* Swipe rail below the 4-up grid: hide the scrollbar, keep touch/trackpad scrolling. */
.kik-owner-videos-d7d95e0ad4-rail {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}


.kik-owner-videos-d7d95e0ad4-rail::-webkit-scrollbar {
  display: none;
}



/* The token fluid paddings (figma-tokens.css) hit a 0px endpoint at 414 (outer frame) and
   1600 (content column), but the calc leaves a 1e-8px float residue there. Re-use the same
   token formulas, rounded to 0.01px, so the measured endpoints resolve to exactly 0. */
@supports (width: round(nearest, 1px, 1px)) {
  kik-owner-videos-rail.kik-owner-videos-d7d95e0ad4.kik-owner-videos-d7d95e0ad4-frame {
    padding-left: round(nearest, clamp(var(--kik-space-side-margin-full--mobile), calc(var(--kik-space-side-margin-full--mobile) - 32.11467116px + 7.75716695vw), var(--kik-space-side-margin-default--desktop)), 0.01px);
    padding-right: round(nearest, clamp(var(--kik-space-side-margin-full--mobile), calc(var(--kik-space-side-margin-full--mobile) - 32.11467116px + 7.75716695vw), var(--kik-space-side-margin-default--desktop)), 0.01px);
  }

  .kik-owner-videos-d7d95e0ad4 div.kik-owner-videos-d7d95e0ad4-column {
    padding-left: round(nearest, clamp(var(--kik-space-gutter-none--desktop), calc(var(--kik-space-side-margin-default--mobile) + 5.5851602px - 1.34907251vw), var(--kik-space-side-margin-default--mobile)), 0.01px);
    padding-right: round(nearest, clamp(var(--kik-space-gutter-none--desktop), calc(var(--kik-space-side-margin-default--mobile) + 5.5851602px - 1.34907251vw), var(--kik-space-side-margin-default--mobile)), 0.01px);
  }}



/* The host theme fades lazy media that has no src attribute; a <video> fed by
   <source> children never has one, so keep the mounted player visible. */
.kik-owner-videos-d7d95e0ad4 .kik-owner-videos-d7d95e0ad4-player {
  opacity: 1;
}



@media (prefers-reduced-motion: reduce) {
  .kik-owner-videos-d7d95e0ad4 .kik-owner-videos-d7d95e0ad4-play {
    transition: none;
  }}



/* Named fluid recipes (named-styles.json): theme tab inline padding 12px @414 -> 16px @1600. */
.kik-owner-press-proof-8c71e165ce-fluid-pr-10 { padding-right: clamp(12px,calc(10.60371px + 0.337268vw),16px); }


.kik-owner-press-proof-8c71e165ce-fluid-pl-11 { padding-left: clamp(12px,calc(10.60371px + 0.337268vw),16px); }


.kik-owner-press-proof-8c71e165ce-fluid-pr-12 { padding-right: clamp(12px,calc(10.60371px + 0.337268vw),16px); }


.kik-owner-press-proof-8c71e165ce-fluid-pl-13 { padding-left: clamp(12px,calc(10.60371px + 0.337268vw),16px); }


.kik-owner-press-proof-8c71e165ce-fluid-pr-14 { padding-right: clamp(12px,calc(10.60371px + 0.337268vw),16px); }


.kik-owner-press-proof-8c71e165ce-fluid-pl-15 { padding-left: clamp(12px,calc(10.60371px + 0.337268vw),16px); }


.kik-owner-press-proof-8c71e165ce-fluid-pr-16 { padding-right: clamp(12px,calc(10.60371px + 0.337268vw),16px); }


.kik-owner-press-proof-8c71e165ce-fluid-pl-17 { padding-left: clamp(12px,calc(10.60371px + 0.337268vw),16px); }


.kik-owner-press-proof-8c71e165ce-fluid-pr-18 { padding-right: clamp(12px,calc(10.60371px + 0.337268vw),16px); }


.kik-owner-press-proof-8c71e165ce-fluid-pl-19 { padding-left: clamp(12px,calc(10.60371px + 0.337268vw),16px); }



/* Horizontal scrollers (tabs row, review rail): scroll by touch/keyboard/arrows, no visible scrollbar. */
.kik-owner-press-proof-8c71e165ce-scroller { scrollbar-width: none; }


.kik-owner-press-proof-8c71e165ce-scroller::-webkit-scrollbar { display: none; }



/* Theme tab selected state follows aria-pressed, so paint reverses when another tab is chosen.
   Selectors out-rank the token-contract classes (.kik-owner-press-proof-8c71e165ce .kik:bg-*) on purpose.
   The pill stroke is a Figma inside stroke (11486:1212-1216 / 11486:1811-1815: 46px tall incl. stroke), drawn as an
   inset box-shadow so it does not add 2px to the box the way a CSS border would. */
.kik-owner-press-proof-8c71e165ce .kik-owner-press-proof-8c71e165ce-tab { border-width: 0; }


.kik-owner-press-proof-8c71e165ce .kik-owner-press-proof-8c71e165ce-tab[aria-pressed="true"] {
  background-color: var(--kik-color-action-primary);
  box-shadow: inset 0 0 0 1px #000000;
}


.kik-owner-press-proof-8c71e165ce .kik-owner-press-proof-8c71e165ce-tab[aria-pressed="false"] {
  background-color: #ffffff;
  box-shadow: inset 0 0 0 1px #e8e8e8;
}


.kik-owner-press-proof-8c71e165ce .kik-owner-press-proof-8c71e165ce-tab[aria-pressed="true"] .kik-owner-press-proof-8c71e165ce-tab-label {
  color: var(--kik-color-text-inverse, #ffffff);
}


/* Unselected label: mobile frame #4d4d4d (I11486:1812-1815;8938:112), desktop text-secondary (I11486:1213-1216;8938:112). */
.kik-owner-press-proof-8c71e165ce .kik-owner-press-proof-8c71e165ce-tab[aria-pressed="false"] .kik-owner-press-proof-8c71e165ce-tab-label {
  color: #4d4d4d;
}


@media (min-width: 1024px) {
  .kik-owner-press-proof-8c71e165ce .kik-owner-press-proof-8c71e165ce-tab[aria-pressed="false"] .kik-owner-press-proof-8c71e165ce-tab-label {
    color: var(--kik-color-text-secondary);
  }}


@media (hover: hover) and (pointer: fine) {
  .kik-owner-press-proof-8c71e165ce .kik-owner-press-proof-8c71e165ce-tab[aria-pressed="true"]:hover {
    background-color: #336256;
  }

  .kik-owner-press-proof-8c71e165ce .kik-owner-press-proof-8c71e165ce-tab[aria-pressed="false"]:hover {
    box-shadow: inset 0 0 0 1px var(--kik-color-border-default, #cccccc);
  }}



/* Rail arrows (11486:1229 / 11486:1230): HTML reference `.dirbtn:hover:not(:disabled)` paints #e8e8e8 (bg-alt-2)
   over the #fafafa surface as a 0.2s background-color change. Hosted review (round 0, F1) showed the computed hover
   value without the paint reaching the frame while the arrow also carried overflow:clip + a pill radius and a
   competing 22px inset-shadow transition. The arrow now uses exactly the mechanism the theme tabs prove paints:
   no clip, a background-color-only transition utility in markup, and this owned background-color hover. It
   out-ranks the token-contract `.kik-owner-press-proof-8c71e165ce .kik:bg-surface` (0,2,0) and host `button`
   resets; a disabled end arrow keeps its surface fill, and the paint reverses on leave. */
.kik-owner-press-proof-8c71e165ce button.kik-owner-press-proof-8c71e165ce-dirbtn { box-shadow: none; }


@media (hover: hover) {
  .kik-owner-press-proof-8c71e165ce button.kik-owner-press-proof-8c71e165ce-dirbtn:hover:not(:disabled) {
    background-color: var(--kik-color-bg-alt-2, #e8e8e8);
  }}



/* Review rail (11486:1218 / 11486:1816): Figma clips the rail to the cards in view (mobile h-[293px]); the owned
   script sets its height to the tallest card currently in view so an off-screen, taller card cannot push the
   rail controls and everything below them down. Vertical overflow stays clipped, never scrollable. */
.kik-owner-press-proof-8c71e165ce .kik-owner-press-proof-8c71e165ce-rail { overflow-y: hidden; transition: height 0.2s ease; }


@media (prefers-reduced-motion: reduce) {
  .kik-owner-press-proof-8c71e165ce .kik-owner-press-proof-8c71e165ce-rail { transition: none; }}



/* Cards filtered out by a theme tab. Beats the card's flex display utility. */
.kik-owner-press-proof-8c71e165ce .kik-owner-press-proof-8c71e165ce-card[hidden] { display: none; }



/* Host theme collisions (assembled Page):
   - components.css sets `h1…h6` and `body, button, …` font-family with !important, which beats the
     token-contract font classes; these rules out-rank it so HarmonyOS Sans reaches every annotated node.
   - components.css/theme.css set letter-spacing on body and button (inherited 0.425px); reset to normal at
     the Section root and let buttons inherit, so only the explicit tracking utilities apply.
   - components.css `p { margin: 0 0 calc(var(--gutter) / 2) }` adds spacing the flex gaps already own. */
.kik-owner-press-proof-8c71e165ce { letter-spacing: normal; }


.kik-owner-press-proof-8c71e165ce button { font-family: inherit !important; letter-spacing: inherit; }


.kik-owner-press-proof-8c71e165ce .kik-owner-press-proof-8c71e165ce-font-heading { font-family: var(--kik-text-font-heading) !important; }


.kik-owner-press-proof-8c71e165ce .kik-owner-press-proof-8c71e165ce-font-body { font-family: var(--kik-text-font-body) !important; }


.kik-owner-press-proof-8c71e165ce :is(h2, h3, p, blockquote, figure, figcaption) { margin: 0; }



/*
 * Interaction colours from the supplied HTML reference. The Theme's
 * action-*-hover aliases resolve to #000/#fff store-wide; scope the reference
 * values to this Section so the hover utilities paint the designed state.
 */
.kik-buying-guide-cta-5343f3aab0 {
  --kik-color-action-primary-hover: #336256;
  --kik-color-action-secondary-hover: #f5f5f5;
}



/* Placeholder paint is not addressable from the input's own utilities. */
.kik-buying-guide-cta-5343f3aab0-input::placeholder {
  color: var(--kik-color-text-tertiary);
  opacity: 1;
}



/* Inline form feedback: state class is toggled by the Section JS. */
.kik-buying-guide-cta-5343f3aab0-msg-ok,
.kik-buying-guide-cta-5343f3aab0-msg-error {
  display: none;
}


.kik-buying-guide-cta-5343f3aab0-form[data-state="success"] .kik-buying-guide-cta-5343f3aab0-msg-ok {
  display: block;
  color: #20413b;
}


.kik-buying-guide-cta-5343f3aab0-form[data-state="error"] .kik-buying-guide-cta-5343f3aab0-msg-error {
  display: block;
  color: #db3535;
}


.kik-buying-guide-cta-5343f3aab0-form[data-state="error"] .kik-buying-guide-cta-5343f3aab0-field {
  box-shadow: inset 0 0 0 1px #db3535;
}



/*
 * Feedback sits under the field without taking layout space, so an empty
 * status line adds no height and a shown message does not move the heading,
 * the promises or the divider.
 */
.kik-buying-guide-cta-5343f3aab0 .kik-buying-guide-cta-5343f3aab0-msg {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 4px;
}



/*
 * The field (11486:1292) owns the only border. Host input rules paint a border
 * on :invalid / [aria-invalid] / :focus inputs, which drew a second box inside
 * the field after a rejected submit; keep the inner input borderless.
 */
.kik-buying-guide-cta-5343f3aab0 .kik-buying-guide-cta-5343f3aab0-input,
.kik-buying-guide-cta-5343f3aab0 .kik-buying-guide-cta-5343f3aab0-input:focus,
.kik-buying-guide-cta-5343f3aab0 .kik-buying-guide-cta-5343f3aab0-input:invalid,
.kik-buying-guide-cta-5343f3aab0 .kik-buying-guide-cta-5343f3aab0-input[aria-invalid] {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background-color: transparent !important;
}



/*
 * Mobile media (11486:1861): Figma scales the band to 118.22% x 114.03% of the
 * 200px frame, anchored near the top, which hides the asset's lower strip.
 * Host img sizing rules (height/max-height) collapsed the box to the frame
 * height, so cover re-exposed that strip; restate the source geometry.
 */
@media (max-width: 1023px) {
  .kik-buying-guide-cta-5343f3aab0 .kik-buying-guide-cta-5343f3aab0-media-img {
    position: absolute;
    left: -9.07%;
    top: -0.12%;
    width: 118.22%;
    height: 114.03% !important;
    max-width: none;
    max-height: none !important;
    object-fit: cover;
  }}


.kik-buying-guide-cta-5343f3aab0-form[data-state="pending"] .kik-buying-guide-cta-5343f3aab0-submit {
  opacity: 0.6;
  cursor: progress;
}



/*
 * The contract's text-tertiary class paints the placeholder node; a typed
 * address reads in the primary text colour, as in the HTML reference.
 */
.kik-buying-guide-cta-5343f3aab0 .kik-buying-guide-cta-5343f3aab0-input:not(:placeholder-shown) {
  color: var(--kik-color-text-primary);
}



/*
 * Hover paint. The token stylesheet's background classes are scoped under the
 * Section root (0,2,0) and load after the Theme utilities, so they would mask
 * the hover utilities in markup; restate the designed hover state above them.
 */
@media (hover: hover) and (pointer: fine) {
  .kik-buying-guide-cta-5343f3aab0 .kik-buying-guide-cta-5343f3aab0-cta:hover {
    background-color: var(--kik-color-action-primary-hover);
  }

  .kik-buying-guide-cta-5343f3aab0 .kik-buying-guide-cta-5343f3aab0-submit:hover {
    background-color: var(--kik-color-action-secondary-hover);
    box-shadow: inset 0 0 0 1px var(--kik-color-border-primary);
  }}



/*
 * Host isolation. The host components.css declares font-family with
 * !important on body, h1-h6, input, button, textarea and select, and sets a
 * body letter-spacing that every descendant inherits. Restate the source
 * values at matching strength, scoped to this Section's owned elements.
 */
.kik-buying-guide-cta-5343f3aab0 {
  letter-spacing: normal;
}


.kik-buying-guide-cta-5343f3aab0 .kik-buying-guide-cta-5343f3aab0-heading {
  font-family: var(--kik-text-font-heading) !important;
}


.kik-buying-guide-cta-5343f3aab0 .kik-buying-guide-cta-5343f3aab0-input,
.kik-buying-guide-cta-5343f3aab0 .kik-buying-guide-cta-5343f3aab0-submit {
  font-family: var(--kik-text-font-body) !important;
}


.kik-buying-guide-cta-5343f3aab0 input[type="hidden"] {
  font-family: inherit !important;
  letter-spacing: inherit;
}


/*
 * Host label rules size the visually hidden label, and from 769px the host
 * body type (18px / 1.6) reaches it through inheritance. Pin the isolated
 * 16px / 1.6 type instead of inheriting it.
 */
.kik-buying-guide-cta-5343f3aab0 .kik-buying-guide-cta-5343f3aab0-label {
  font-size: 16px !important;
  line-height: 25.6px !important;
  letter-spacing: normal;
  margin: 0;
}


/* Host hr { color: inherit } paints the rule's currentColor black; restore the UA grey. */
.kik-buying-guide-cta-5343f3aab0 hr {
  color: rgb(128, 128, 128);
}



/*
 * Guide Capture (11486:1275): on desktop the email form is vertically centred
 * against the heading + promises column (11486:1276, 799px), 64px apart. The
 * heading, form and ordered block column stay sibling children so app blocks
 * keep their own content column; mobile keeps the source stack heading ->
 * form (11486:1862) -> promises.
 */
/*
 * The capture element also carries the mobile gap-md utility, whose token
 * rule has the same (0,2,0) specificity; the doubled class keeps the desktop
 * 64px column gap and 12px heading -> promises gap (11486:1276) regardless of
 * stylesheet order in the finalized bundle.
 */
@media (min-width: 1024px) {
  .kik-buying-guide-cta-5343f3aab0 .kik-buying-guide-cta-5343f3aab0-capture.kik-buying-guide-cta-5343f3aab0-capture {
    display: grid;
    grid-template-columns: minmax(0, 799px) minmax(400px, 1fr);
    grid-template-areas:
      "heading form"
      "blocks form";
    column-gap: 64px;
    row-gap: var(--kik-space-gap-sm);
    align-items: start;
  }

  .kik-buying-guide-cta-5343f3aab0 .kik-buying-guide-cta-5343f3aab0-capture-heading {
    grid-area: heading;
  }

  .kik-buying-guide-cta-5343f3aab0 .kik-buying-guide-cta-5343f3aab0-capture-blocks {
    grid-area: blocks;
  }

  .kik-buying-guide-cta-5343f3aab0 .kik-buying-guide-cta-5343f3aab0-capture-form {
    grid-area: form;
    align-self: center;
    min-width: 0;
  }}



/* Hidden below the viewport until the hero button has scrolled out of view. */
.kik-page-component-sticky-ad-993895dc3b {
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.25s;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}


.kik-page-component-sticky-ad-993895dc3b[data-visible="true"] {
  transform: none;
  visibility: visible;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}


@media (prefers-reduced-motion: reduce) {
  .kik-page-component-sticky-ad-993895dc3b,
  .kik-page-component-sticky-ad-993895dc3b[data-visible="true"] {
    transition: none;
  }}



/* While the bar is pinned the page reserves its height so it never covers content. */
html.kik-page-component-sticky-ad-993895dc3b-on {
  scroll-padding-bottom: calc(var(--kik-page-component-sticky-ad-993895dc3b-h, 0px) + 16px);
}


html.kik-page-component-sticky-ad-993895dc3b-on body {
  padding-bottom: var(--kik-page-component-sticky-ad-993895dc3b-h, 0px);
}



/* The compare-at price stays in the DOM so a variant with a compare-at price can reveal it;
   it is hidden while the selected variant has none. Beats the isolation display reset. */
.kik-page-component-sticky-ad-993895dc3b [data-kik-sticky-compare][hidden] {
  display: none;
}



/* Bar row gap. The row token gap computed as `normal` in the assembled page at 768, so the
   truncated product info ran into the price. Pin the source gaps on the row itself:
   mobile source 11486:1914 uses gap-sm (12px); desktop 11486:1901 keeps the info group apart
   from the Action group by at least that group's own 24px gap. */
.kik-page-component-sticky-ad-993895dc3b [data-figma-node="11486:1901 11486:1914"] {
  column-gap: var(--kik-space-gap-sm, 12px);
}


@media (min-width: 768px) {
  .kik-page-component-sticky-ad-993895dc3b [data-figma-node="11486:1901 11486:1914"] {
    column-gap: var(--kik-space-scale-24, 24px);
  }}



/* Product identity at intermediate desktop widths (finding F9, 768px). Real product titles
   with a variant suffix are far longer than the source sample, so a single nowrap line cut
   the model name. From 768px the title (11486:1903) may wrap to two lines before clamping and
   the rating line (11486:1906) wraps instead of truncating; wide viewports where the text fits
   still render the source single line. Between 768px and 1023px the CTA uses the short
   button label (markup) so the info column keeps enough width. */
@media (min-width: 768px) {
  .kik-page-component-sticky-ad-993895dc3b [data-figma-node="11486:1903"] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .kik-page-component-sticky-ad-993895dc3b [data-figma-node="11486:1906"] {
    white-space: normal;
    text-overflow: clip;
  }}



/* Box model baseline below Tailwind utilities: border-box sizing and zero-width
   borders so border-style utilities never paint the UA "medium" (3px) width.
   The host theme supplies the same reset, so isolated and hosted renders agree. */
@layer base {
  .kik-model-compare-faq-27751ad5d2,
  .kik-model-compare-faq-27751ad5d2 *,
  .kik-model-compare-faq-27751ad5d2 ::before,
  .kik-model-compare-faq-27751ad5d2 ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
  }}



/* Host theme collisions (assets/components.css):
   - body/button/h1-h6 force the host font family with !important;
   - body letter-spacing (--type-base-spacing) is inherited and h1-h6 set
     --type-header-spacing, font-weight and text-transform directly.
   Body and heading tokens both resolve to HarmonyOS Sans in this Section.
   App block markup (Shopify wraps it in id="shopify-block-...") keeps its own typography. */
.kik-model-compare-faq-27751ad5d2 {
  font-family: var(--kik-text-font-body);
  letter-spacing: normal;
}


.kik-model-compare-faq-27751ad5d2 :where(*):not([id^="shopify-block-"], [id^="shopify-block-"] *) {
  font-family: var(--kik-text-font-body) !important;
}


.kik-model-compare-faq-27751ad5d2 :is(h2, h3, h4) {
  font-family: var(--kik-text-font-heading) !important;
  letter-spacing: normal;
  text-transform: none;
}


.kik-model-compare-faq-27751ad5d2 .kik-model-compare-faq-27751ad5d2-weight-bold {
  font-weight: 700;
}


.kik-model-compare-faq-27751ad5d2 .kik-model-compare-faq-27751ad5d2-weight-normal {
  font-weight: 400;
}



/* Compare cards share one row track set (CSS subgrid) so the header, every spec
   row and the button sit on common lines whatever the native product title
   length. Column/row counts come from the Section (visible cards and rows).
   Each spec list is display: contents (utility), so its rows are the grid items.
   Unlayered on purpose: the host theme's unlayered `article { display: block }`
   normalize rule beat the earlier @layer base version, so the cards fell back to
   independent block stacks. These elements carry no display utilities. */
.kik-model-compare-faq-27751ad5d2 .kik-model-compare-faq-27751ad5d2-cards {
  display: grid;
  grid-template-columns: repeat(var(--kik-compare-cols, 2), minmax(0, 1fr));
  align-items: stretch;
}


.kik-model-compare-faq-27751ad5d2 article.kik-model-compare-faq-27751ad5d2-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: subgrid;
  grid-row: span var(--kik-compare-rows, 7);
  row-gap: 0;
}


/* Host theme forces `min-height: 0` on these card parts; restore the UA auto
   minimum. Parts with their own min-h utility keep it (excluded here). */
.kik-model-compare-faq-27751ad5d2 .kik-model-compare-faq-27751ad5d2-card > div:not([class*="min-h-"]),
.kik-model-compare-faq-27751ad5d2 .kik-model-compare-faq-27751ad5d2-specs > div:not([class*="min-h-"]) {
  min-height: auto;
}



/* Figma card strokes (11486:1848/1849, 11171:349/11486:1261) are drawn outside
   auto-layout: the 187px mobile card keeps a 155px text column inside its 16px
   inset. A CSS border would take 2px of that column and wrap "Deck Pro QLED 3.0"
   onto two lines, so the 1px stroke is painted by an overlay instead. The card
   keeps its border colour/style utilities; the overlay inherits that colour. */
.kik-model-compare-faq-27751ad5d2 article.kik-model-compare-faq-27751ad5d2-card {
  border-width: 0;
}


.kik-model-compare-faq-27751ad5d2 article.kik-model-compare-faq-27751ad5d2-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid;
  border-color: inherit;
  border-radius: inherit;
  pointer-events: none;
}



/* Fluid basis = layout width, not window width, for the card title column only.
   The token recipes scale with `vw`, which includes a classic scrollbar; the
   card column gap and card header inset are re-expressed in `cqw` on the frame
   (an inline-size container as wide as the layout) so they land on the measured
   8px / 16px at 414 (16px / 24px at 1600) and keep the title column close to
   its measured 155px.
   The Section side margins stay on the token `vw` recipe (utility classes on the
   section), which the platform measures as the source-anchored fluid rule. */
.kik-model-compare-faq-27751ad5d2-frame {
  container-type: inline-size;
}


.kik-model-compare-faq-27751ad5d2-frame .kik-model-compare-faq-27751ad5d2 .kik-model-compare-faq-27751ad5d2-cards {
  column-gap: clamp(var(--kik-space-gap-xs--mobile), calc(var(--kik-space-gap-xs--mobile) - 2.7925801px + 0.67453626cqw), var(--kik-space-gap-md--desktop));
}


.kik-model-compare-faq-27751ad5d2-frame .kik-model-compare-faq-27751ad5d2 .kik-model-compare-faq-27751ad5d2-inset {
  padding-left: clamp(16px, calc(16px - 2.7925801px + 0.67453626cqw), var(--kik-space-inset-lg--desktop));
}


.kik-model-compare-faq-27751ad5d2-frame .kik-model-compare-faq-27751ad5d2 .kik-model-compare-faq-27751ad5d2-inset {
  padding-right: clamp(16px, calc(16px - 2.7925801px + 0.67453626cqw), var(--kik-space-inset-lg--desktop));
}