/* ============================================================================
   TENDEX — Kik shared primitives
   ============================================================================
   Loaded once from layout/theme.liquid, after theme.css.
   Used by the `kik-*` sections, plus the "Global theme alignment" block at
   the end, which restyles Impact's stock headings and buttons to the Kik
   styleguide so theme pages match the custom pages.

   NO COLOURS ARE HARD-CODED HERE.
   Every primitive reads local custom properties (--kik-btn-bg, --kik-card-bg,
   …) that the consuming section sets from its own theme-editor settings, whose
   defaults are the Figma values. Fallbacks below are neutral, not brand
   values, so a section that forgets to set one is visibly wrong rather than
   quietly plausible.

   Tokens for type / spacing / radii come from snippets/kik-tokens.liquid.
   ========================================================================= */

/* --- Section shell ------------------------------------------------------- */

.kik-section {
  padding-block: var(--kik-section-pt, var(--kik-section-md)) var(--kik-section-pb, var(--kik-section-md));
  background-color: var(--kik-section-bg, transparent);
  color: var(--kik-section-fg, inherit);
}

.kik-container {
  width: 100%;
  max-width: calc(var(--kik-container) + (var(--kik-gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--kik-gutter);
}

/* Full-bleed child inside a contained section. */
.kik-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* --- Type ---------------------------------------------------------------- */

.kik-display,
.kik-h2,
.kik-h3,
.kik-h5,
.kik-h6 {
  margin: 0;
  font-family: var(--kik-font-heading);
  font-weight: var(--kik-weight-medium);
  line-height: var(--kik-leading-heading);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.kik-display { font-size: var(--kik-size-display); line-height: var(--kik-leading-display); }
.kik-h2 { font-size: var(--kik-size-h2); }
.kik-h3 { font-size: var(--kik-size-h3); }
.kik-h5 { font-size: var(--kik-size-h5); }
.kik-h6 { font-size: var(--kik-size-h6); }

.kik-body { margin: 0; font-size: var(--kik-size-body-md); line-height: var(--kik-leading-body); }
.kik-body--lg { font-size: var(--kik-size-body-lg); }
.kik-body--sm { font-size: var(--kik-size-body-sm); }
.kik-body--xsm { font-size: var(--kik-size-body-xsm); }

/* --- Button -------------------------------------------------------------- */
/* Sections set --kik-btn-bg / -fg / -border per button (style + colour
   override are editor settings). `text` style is the borderless arrow link. */

.kik-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kik-gap-xs);
  padding: 0.875rem 1.75rem;
  border: 1px solid var(--kik-btn-border, transparent);
  border-radius: var(--kik-radius-pill);
  background-color: var(--kik-btn-bg, transparent);
  color: var(--kik-btn-fg, currentcolor);
  font-family: var(--kik-font-body);
  font-size: var(--kik-size-body-md);
  font-weight: var(--kik-weight-medium);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.kik-btn:hover { opacity: 0.85; }
.kik-btn:active { transform: translateY(1px); }

.kik-btn--text {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.kik-btn--text:hover { opacity: 1; }

/* Hover underline sits under the LABEL ONLY, never the arrow — hence the
   inner span. Dev note calls this out explicitly. */
.kik-btn__label {
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.kik-btn--text:hover .kik-btn__label,
.kik-btn--text:focus-visible .kik-btn__label {
  border-bottom-color: currentcolor;
}

.kik-btn__icon {
  flex: none;
  width: 1em;
  height: 1em;
}

/* --- Chip ---------------------------------------------------------------- */

.kik-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--kik-gap-xs);
  /* Figma pill: py gap/xs (4/8), px gap/md (8/16). */
  padding: var(--kik-gap-xs) var(--kik-gap-md);
  border: 1px solid var(--kik-chip-border, transparent);
  border-radius: var(--kik-radius-pill);
  background-color: var(--kik-chip-bg, transparent);
  color: var(--kik-chip-fg, currentcolor);
  font-size: var(--kik-size-body-sm);
  line-height: 1.25;
  white-space: nowrap;
}

/* --- Card ---------------------------------------------------------------- */

.kik-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--kik-radius-sm);
  background-color: var(--kik-card-bg, transparent);
  color: var(--kik-card-fg, inherit);
}

/* --- Media --------------------------------------------------------------- */

.kik-media {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--kik-media-bg, color-mix(in srgb, currentcolor 5%, transparent));
}

.kik-media > img,
.kik-media > video,
.kik-media > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kik-media--fill {
  position: absolute;
  inset: 0;
}

/* --- Rails / carousels --------------------------------------------------- */

.kik-rail {
  display: flex;
  gap: var(--kik-rail-gap, var(--kik-gap-lg));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.kik-rail::-webkit-scrollbar { display: none; }
.kik-rail > * { flex: none; scroll-snap-align: start; }

/* --- Controls ------------------------------------------------------------ */

.kik-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--kik-ctrl-border, transparent);
  border-radius: 50%;
  background-color: var(--kik-ctrl-bg, transparent);
  color: var(--kik-ctrl-fg, currentcolor);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.kik-ctrl[disabled] { opacity: 0.35; cursor: default; }
.kik-ctrl svg { width: 1.25rem; height: 1.25rem; }

.kik-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kik-gap-xs);
}

.kik-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--kik-dot-bg, currentcolor);
  opacity: 0.3;
  cursor: pointer;
  transition: opacity 0.2s ease, width 0.2s ease;
}

.kik-dot[aria-current='true'] {
  width: 24px;
  border-radius: var(--kik-radius-pill);
  opacity: 1;
}

/* Hero slide progress bars. --kik-progress is driven by kik.js (0 → 1). */
.kik-progress {
  position: relative;
  flex: 1;
  height: 2px;
  overflow: hidden;
  border: 0;
  padding: 0;
  background-color: color-mix(in srgb, currentcolor 30%, transparent);
  cursor: pointer;
}

.kik-progress::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: scaleX(var(--kik-progress, 0));
  transform-origin: left;
  background-color: currentcolor;
}

/* --- Slider state ---------------------------------------------------------- */

/* Set by assets/kik.js (KikSlider.render) when a slide's true loop offset
   falls outside the ±2 positions any kik-* slider section actually styles —
   happens once a loop holds 6+ slides. Clamping such a slide onto the
   nearest edge slot would stack a second slide directly on top of the one
   already there, so it's hidden outright instead. !important so this always
   wins over whatever position-specific opacity/transform the consuming
   section's own scoped CSS set for that slide. */
[data-kik-slide][data-kik-offstage] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* --- A11y ---------------------------------------------------------------- */

.kik-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.kik-section :focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .kik-section *,
  .kik-section *::before,
  .kik-section *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Custom element defaults -------------------------------------------- */

/* An unknown element defaults to display:inline, and an inline box paints its
   background only behind its own text fragments — block children still render
   normally. The result is a component whose content appears but whose
   background, border and box sizing silently do nothing. That is exactly how
   the header bar shipped: white on a white page at rest, see-through the
   moment the hero scrolled under it.

   Declared as bare element selectors so this is the weakest rule in the
   cascade; any section that wants flex, grid or something else just sets it. */
kik-hero,
kik-carousel,
kik-tabs,
kik-rail,
kik-accordion,
kik-header,
kik-spotlight,
kik-dismiss {
  display: block;
}

kik-dismiss[hidden] {
  display: none;
}

/* --- Scroll lock (mobile drawer) ---------------------------------------- */

/* html only, never body: an overflow other than visible turns body into a
   scroll container, and the sticky header then sticks to body's box (which is
   scrolled away) instead of the viewport — the bar vanished above an open
   drawer whenever the page was scrolled. */
.kik-scroll-locked {
  overflow: hidden;
}

/* --- Header region disclosure ------------------------------------------- */

.kik-region {
  position: relative;
}

.kik-region__trigger {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.kik-region__trigger::-webkit-details-marker {
  display: none;
}

/* Trigger anatomy shared by header, drawer and footer (Figma: flag 20, gap 8,
   label, gap 16, caret 16). The header section restates these with its own
   tokens; the footer relies on them. */
.kik-region .kik-nav__region-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  line-height: 1.5;
}

.kik-region .kik-nav__region-inner > * {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kik-region .kik-nav__flag {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.kik-ft .kik-region {
  font-size: var(--kik-size-body-xsm);
}

.kik-region__caret {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.kik-region[open] .kik-region__caret {
  transform: rotate(180deg);
}

/* Figma footer 12755:4514 draws the caret in border/on-inverse (#393534),
   not in the white label colour; the section's field-border setting carries
   that token. */
.kik-ft .kik-region__caret {
  color: var(--kik-ft-border, #393534);
}

.kik-region__panel {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + 8px);
  z-index: 20;
  min-width: 160px;
  display: grid;
  gap: var(--kik-gap-xs, 8px);
  padding: var(--kik-inset-sm, 12px);
  background-color: #fff;
  color: var(--kik-color-text-primary, #231f1e);
  border: 1px solid var(--kik-nav-border, #d4d4d4);
  border-radius: var(--kik-radius-sm);
  box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
  white-space: nowrap;
}

/* Header copy lifted into the top layer by <kik-header> (see kik.js): the
   UA popover box (fixed, inset 0, margin auto = centred in the viewport) is
   reset and the panel is pinned under its trigger with inline top/right.
   Keyed to [popover], NOT :popover-open — that state ends the moment
   hidePopover() runs, while the element stays in the top layer for the exit
   transition, and the UA centring would flash it mid-page for those 200ms.

   Open and close ease in rather than pop. The top-layer copy transitions
   opacity and a 6px rise; `display` and `overlay` are transitioned as
   discrete so the exit can play before the popover leaves the top layer,
   and @starting-style gives the entry a from-state. The plain <details>
   fallback is newly rendered on open, so it gets the same motion as a
   keyframe animation. */
/* Country mode lists every market country (the EU market alone is 27 rows),
   so the list scrolls inside the panel — like Impact's popover on uat —
   instead of running off the viewport. */
.kik-region--country .kik-region__list {
  max-height: min(420px, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.kik-region__panel[popover] {
  position: fixed;
  inset: auto;
  width: max-content;
  height: auto;
  margin: 0;
  overflow: visible;
  opacity: 0;
  transform: translateY(var(--kik-region-shift, -6px));
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    display 0.2s allow-discrete,
    overlay 0.2s allow-discrete;
}

.kik-region__panel:popover-open {
  opacity: 1;
  transform: none;
}

@starting-style {
  .kik-region__panel:popover-open {
    opacity: 0;
    transform: translateY(var(--kik-region-shift, -6px));
  }
}

/* The footer copy opens upward, so it rises from below instead. */
.kik-ft .kik-region {
  --kik-region-shift: 6px;
}

.kik-region[open] > .kik-region__panel:not([popover]) {
  animation: kik-region-in 0.2s ease;
}

@keyframes kik-region-in {
  from {
    opacity: 0;
    transform: translateY(var(--kik-region-shift, -6px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .kik-region__panel[popover] {
    transition: none;
  }

  .kik-region[open] > .kik-region__panel:not([popover]) {
    animation: none;
  }
}

/* The footer opens upward: its selector sits on the last line of the page. */
.kik-ft .kik-region__panel {
  inset-block-start: auto;
  inset-block-end: calc(100% + 8px);
}

.kik-region__title {
  margin: 0;
  padding-inline: 10px;
  font-size: var(--kik-size-body-xsm);
  color: var(--kik-color-text-secondary, #57514f);
}

.kik-region__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kik-region__option {
  display: flex;
  align-items: center;
  gap: var(--kik-gap-xs, 8px);
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--kik-radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--kik-size-body-sm);
  line-height: 1.5;
  text-align: start;
  cursor: pointer;
}

.kik-region__option:hover {
  background-color: rgb(0 0 0 / 5%);
}

/* Selected row: action-primary text on an 8% tint, plus a check on the
   trailing edge so the current country reads at a glance in a 22-row list. */
.kik-region__option[aria-selected="true"] {
  font-weight: var(--kik-weight-medium, 500);
  color: var(--kik-color-action-primary, #6e57a7);
  background-color: rgb(110 87 167 / 8%);
}

.kik-region__option[aria-selected="true"]:hover {
  background-color: rgb(110 87 167 / 14%);
}

.kik-region__option[aria-selected="true"]::after {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  margin-inline-start: auto;
  padding-inline-start: 8px;
  background-color: currentcolor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

/* ============================================================================
   Global theme alignment — ClickUp 86ey1tgze "Global Adjustment"
   ============================================================================
   Impact's stock `.h0…h6` and `.button` rules sit in theme.css, which is
   linked BEFORE this file, so equal-specificity rules here win. Font sizes
   already arrive through the --text-h* → --kik-text-size-* bridge in
   snippets/kik-tokens.liquid; this block only overrides what Impact
   hard-codes per class.

   Source: Figma Typography styleguide 11608:4074 — H1–H6 line-height 120 %,
   Display 110 %, weight 500, letter-spacing 0.
   ------------------------------------------------------------------------- */

/* Impact ships 1.1 / 1.1 / 1.2 / 1.3 / 1.4 / 1.4 for h1…h6 and 1 for h0.
   The selector list mirrors theme.css so `.prose` headings keep parity. */
.h1, .h2, .h3, .h4, .h5, .h6,
.prose :is(h1, h2, h3, h4, h5, h6):not(.h0, .h1, .h2, .h3, .h4, .h5, .h6) {
  line-height: var(--kik-leading-heading);
}

.h0 {
  line-height: var(--kik-leading-display);
}

/* Button — Figma component set 11608:3470 (Design System → button).
   Size variants (height / text / padding-inline):
     large  48 / body-md  16 / 24      ← Impact .button--lg and .button--xl
     medium 40 / body-sm  14 / 24      ← Impact .button (base)
     small  36 / body-xsm 12 / 18      ← Impact .button--sm
   Text: HarmonyOS Sans 500, line-height 1.5, tracking 0, pill radius.
   Height is met exactly by `padding-block: calc((H - 1.5em) / 2)`, which
   keeps the label centred whichever breakpoint the size token resolves to.
   Types: Figma "primary" = Impact .button; Figma "primary-alt" (white fill,
   token action/secondary) = Impact .button--secondary; Figma "secondary"
   (transparent, 1px primary border, primary text) = Impact .button--outline.
   Hover (Figma State=hover): primary → action/primary-hover #5C4890;
   primary-alt and secondary → primary fill with inverse text. Figma only
   defines hover for token-coloured buttons, so the rules below skip buttons
   whose section passed a custom colour (Impact's button snippet then writes
   an inline `--button-background`); those keep Impact's own "fade" hover
   from css-variables.liquid. */
.button, .btn {
  font-family: var(--kik-font-body);
  font-weight: var(--kik-weight-medium);
  font-size: var(--kik-text-size-body-sm);
  letter-spacing: 0;
  line-height: 1.5;
  padding-block: calc((40px - 1.5em) / 2);
  padding-inline: var(--kik-space-inset-lg);
}

.button--sm {
  font-size: var(--kik-text-size-body-xsm);
  padding-block: calc((36px - 1.5em) / 2);
  padding-inline: 18px;
}

.button--lg,
.button--xl {
  font-size: var(--kik-text-size-body-md);
  padding-block: calc((48px - 1.5em) / 2);
  padding-inline: var(--kik-space-inset-lg);
}

/* Figma "secondary": 1px border, not Impact's 2px inset ring. */
.button--outline {
  box-shadow: inset 0 0 0 1px;
}

@media screen and (pointer: fine) {
  .button:not([disabled]):not(.button--outline):not(.button--secondary):not(.button--subdued):not([style*="--button-background"]):hover,
  .btn:not([disabled]):not([style*="--button-background"]):hover {
    --button-background-opacity: 1;
    background-color: var(--kik-color-action-primary-hover);
    color: var(--kik-color-text-inverse);
  }

  .button--secondary:not([disabled]):not([style*="--button-background"]):hover,
  .button--outline:not([disabled]):not([style*="--button-background"]):not([style*="--button-text-color"]):hover {
    --button-background-opacity: 1;
    background-color: var(--kik-color-action-primary);
    color: var(--kik-color-text-inverse);
    box-shadow: inset 0 0 0 1px var(--kik-color-action-primary);
  }
}

/* Shopify's "Buy it now" (dynamic checkout) button: Impact forces bolder
   weight and its own padding with !important, so the same recipe is
   restated with !important to land Figma primary / large. */
.shopify-payment-button__button--unbranded {
  font-family: var(--kik-font-body) !important;
  font-weight: var(--kik-weight-medium) !important;
  font-size: var(--kik-text-size-body-md) !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  padding: calc((48px - 1.5em) / 2) var(--kik-space-inset-lg) !important;
}

/* Shopify's checkout stylesheet reads this as the button's min-height;
   Impact sets 54px (60px ≥ 700px). Figma large is 48px. */
shopify-accelerated-checkout,
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: 48px;
}

@media screen and (pointer: fine) {
  .shopify-payment-button__button--unbranded:not([disabled]):hover {
    --button-background-opacity: 1;
    background: var(--kik-color-action-primary-hover) !important;
    color: var(--kik-color-text-inverse) !important;
  }
}