/* ==========================================================================
   Kandy's Treats — V2 Design System
   Foundation: tokens, reset, typography, buttons, form primitives, utilities
   --------------------------------------------------------------------------
   Brand logic
   - White & warm cream carry the layout. Pink is a tool, not a wallpaper.
   - Pink is reserved for: primary CTAs, active states, price emphasis,
     brand marks, and the "ring" motif borrowed from the circular logo badge.
   - Deep plum grounds the heavy sections (promo band, footer) so the page has
     weight without ever going flat grey.
   ========================================================================== */

:root {
  /* ---- Brand -------------------------------------------------------- */
  --kt-pink: #d4177e;
  --kt-pink-hover: #bd1470;
  --kt-pink-press: #a41063;
  --kt-pink-bright: #f74ba2;
  --kt-pink-200: #ffc8e2;
  --kt-pink-100: #ffe1f0;
  --kt-pink-50: #fff2f8;

  --kt-plum: #2b0e20;
  --kt-plum-2: #3f1730;
  --kt-plum-3: #57223f;

  /* ---- Warm neutrals ------------------------------------------------ */
  --ink: #1c1017;
  --ink-2: #4c3b45;
  --ink-3: #7e6e78;
  --ink-4: #a99da4;

  --line: #f0e9ed;
  --line-2: #e3d9df;

  --surface: #ffffff;
  --surface-2: #fffbf8; /* warm cream — page background */
  --surface-3: #faf5f7; /* recessed panels */

  /* ---- Functional accents (used sparingly, for meaning only) --------- */
  --amber: #f5a524;
  --mint: #0fa47f;
  --mint-50: #e8f7f2;
  --chili: #e4572e;
  --chili-50: #fdeee9;

  /* ---- Radii -------------------------------------------------------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* ---- Elevation (warm-tinted, never neutral grey) ------------------- */
  --sh-1: 0 1px 2px rgba(28, 16, 23, 0.05), 0 2px 8px rgba(28, 16, 23, 0.04);
  --sh-2: 0 2px 6px rgba(28, 16, 23, 0.06), 0 12px 28px rgba(28, 16, 23, 0.07);
  --sh-3: 0 4px 12px rgba(28, 16, 23, 0.07), 0 24px 56px rgba(28, 16, 23, 0.1);
  --sh-pink: 0 6px 18px rgba(212, 23, 126, 0.28);
  --sh-pink-lg: 0 10px 30px rgba(212, 23, 126, 0.32);

  /* ---- Motion ------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast: 140ms;
  --t-mid: 260ms;
  --t-slow: 520ms;

  /* ---- Layout ------------------------------------------------------- */
  --wrap: 1240px;
  --gutter: 24px;
  --nav-h: 76px;
  --mobile-nav-h: 66px;

  /* ---- Type --------------------------------------------------------- */
  --font-display: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", sans-serif;
  --font-ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
}

/* ==========================================================================
   Dark theme
   --------------------------------------------------------------------------
   Same design, different ground. Only tokens are redefined here — no layout,
   spacing, type or component rule is touched, so the light and dark versions
   are guaranteed to stay structurally identical.

   Three blocks on purpose:
     :root                              light (above) — always defined
     prefers-color-scheme + :not(light)  system preference, when unset
     [data-theme="dark"]                 explicit choice, wins over system
   Nothing gets its ONLY definition inside a media query, so an explicit
   choice can always override the system in either direction.

   --surface-rgb exists so translucent surfaces (sticky nav, glass cards)
   can flip ground colour withoutevery rule needing a dark variant.
   ========================================================================== */

:root {
  /* Translucent surfaces are declared per theme as complete colours.
     rgba(var(--rgb), a) looked tidier but does NOT reliably re-resolve when
     the variable changes on an element that also transitions
     background-color — .nav kept its old colour while .tabbar (no transition)
     updated. Explicit values remove the ambiguity. */
  /* --kt-plum is a dark plum used mostly as a BACKGROUND, so it must not be
     inverted for dark mode. These two are the places it is used as TEXT, and
     they do need to flip. */
  --ink-on-light-chip: var(--kt-plum);
  /* Pink text on a pale pink pill (status badges, the active support tab).
     Needs a per-theme value: --kt-pink reads at only 3.9 on the dark pill,
     while the brighter pink is unreadable on the light one. */
  --ink-on-pink-pill: var(--kt-pink);
  --ink-on-selection: var(--kt-plum);

  --surface-glass: rgba(255, 255, 255, 0.82);
  --surface-glass-strong: rgba(255, 255, 255, 0.92);
  --surface-glass-bar: rgba(255, 255, 255, 0.94);
  --surface-glass-sticky: rgba(255, 255, 255, 0.93);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* #d92c85, not a lighter pink: white-on-fill needs >=4.5 for the
       primary button, and lighter pinks drop that to ~3.5. Pink TEXT on
       the dark ground still clears the 3:1 UI threshold at 4.28. */
    --kt-pink: #d92c85;
    --kt-pink-hover: #f65ba9;
    --kt-pink-press: #c02275;
    --kt-pink-bright: #ff6fb4;
    --kt-pink-200: #5d2242;
    --kt-pink-100: #3d1730;
    --kt-pink-50: #2a1020;


    --ink: #f6eef2;
    --ink-2: #cdbcc6;
    --ink-3: #9d8b96;
    --ink-4: #74636d;

    --line: #2c2028;
    --line-2: #3d2d37;

    --surface: #1a1217;
    --surface-2: #120c10;
    --surface-3: #221820;
    /* Pure white, not --ink (#f6eef2, a pink-tinted near-white): on the
       dark chip over the hero photo that tint reads as dim grey next to
       the neighbouring white chips. Only the "Kitchen is open" chip
       uses this token. */
    --ink-on-light-chip: #ffffff;
    --ink-on-pink-pill: #ff8cc4;
    --ink-on-selection: var(--ink);
    --surface-glass: rgba(26, 18, 23, 0.86);
    --surface-glass-strong: rgba(26, 18, 23, 0.94);
    --surface-glass-bar: rgba(18, 12, 16, 0.96);
    --surface-glass-sticky: rgba(18, 12, 16, 0.95);

    --mint-50: #10312a;
    --chili-50: #3a1a12;

    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.32);
    --sh-2: 0 2px 6px rgba(0, 0, 0, 0.46), 0 12px 28px rgba(0, 0, 0, 0.4);
    --sh-3: 0 4px 12px rgba(0, 0, 0, 0.5), 0 24px 56px rgba(0, 0, 0, 0.55);
    --sh-pink: 0 6px 18px rgba(240, 67, 155, 0.32);
    --sh-pink-lg: 0 10px 30px rgba(240, 67, 155, 0.36);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  /* #d92c85, not a lighter pink: white-on-fill needs >=4.5 for the
       primary button, and lighter pinks drop that to ~3.5. Pink TEXT on
       the dark ground still clears the 3:1 UI threshold at 4.28. */
    --kt-pink: #d92c85;
  --kt-pink-hover: #f65ba9;
  --kt-pink-press: #c02275;
  --kt-pink-bright: #ff6fb4;
  --kt-pink-200: #5d2242;
  --kt-pink-100: #3d1730;
  --kt-pink-50: #2a1020;


  --ink: #f6eef2;
  --ink-2: #cdbcc6;
  --ink-3: #9d8b96;
  --ink-4: #74636d;

  --line: #2c2028;
  --line-2: #3d2d37;

  --surface: #1a1217;
  --surface-2: #120c10;
  --surface-3: #221820;
  --ink-on-light-chip: #ffffff;
  --ink-on-pink-pill: #ff8cc4;
  --ink-on-selection: var(--ink);
  --surface-glass: rgba(26, 18, 23, 0.86);
  --surface-glass-strong: rgba(26, 18, 23, 0.94);
  --surface-glass-bar: rgba(18, 12, 16, 0.96);
  --surface-glass-sticky: rgba(18, 12, 16, 0.95);

  --mint-50: #10312a;
  --chili-50: #3a1a12;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.32);
  --sh-2: 0 2px 6px rgba(0, 0, 0, 0.46), 0 12px 28px rgba(0, 0, 0, 0.4);
  --sh-3: 0 4px 12px rgba(0, 0, 0, 0.5), 0 24px 56px rgba(0, 0, 0, 0.55);
  --sh-pink: 0 6px 18px rgba(240, 67, 155, 0.32);
  --sh-pink-lg: 0 10px 30px rgba(240, 67, 155, 0.36);

  color-scheme: dark;
}


/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `clip` (not `hidden`) so stray overflow never widens the mobile layout
     viewport — which would push fixed elements like the tab bar off-screen —
     while position: sticky keeps working. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.is-locked {
  overflow: hidden;
}

img {
  max-width: 100%;
  display: block;
}

/* Author-level `display` on a class beats the UA rule for [hidden],
   which would otherwise leave empty badges and toggles on screen. */
[hidden] {
  display: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--kt-pink-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--kt-pink-100);
  color: var(--ink-on-selection);
}

/* ==========================================================================
   Typography
   ========================================================================== */

.display-xl,
.display-lg,
.display-md,
.display-sm {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.02;
  color: var(--ink);
  text-wrap: balance;
}

.display-xl {
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
}
.display-lg {
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  line-height: 1.06;
}
.display-md {
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.12;
}
.display-sm {
  font-size: clamp(1.2rem, 2.1vw, 1.45rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.lede {
  font-size: clamp(1rem, 1.35vw, 1.115rem);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 52ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kt-pink);
}

.eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2.5px solid currentColor;
}

.eyebrow--light {
  color: var(--kt-pink-bright);
}

.muted {
  color: var(--ink-3);
}

/* Pink underline swash — a brand device, used on one word per heading max */
.swash {
  position: relative;
  display: inline-block;
  color: var(--kt-pink);
  white-space: nowrap;
}
.swash::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 0.03em;
  height: 0.34em;
  background: var(--kt-pink-100);
  border-radius: var(--r-pill);
  z-index: -1;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(56px, 7vw, 104px);
}

.section--tight {
  padding-block: clamp(40px, 5vw, 68px);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: clamp(26px, 3.2vw, 44px);
}

.section-head__text {
  max-width: 62ch;
}

.section-head__text .display-lg {
  margin-top: 12px;
}

.section-head__text .lede {
  margin-top: 12px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  --btn-bg: var(--kt-pink);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  height: 50px;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out),
    background-color var(--t-fast) linear, box-shadow var(--t-mid) var(--ease-out),
    color var(--t-fast) linear;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.btn:disabled:hover {
  transform: none;
}

.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 60ms;
}

.btn--primary {
  box-shadow: var(--sh-pink);
}
.btn--primary:hover {
  --btn-bg: var(--kt-pink-hover);
  box-shadow: var(--sh-pink-lg);
}
.btn--primary:active {
  --btn-bg: var(--kt-pink-press);
}

.btn--dark {
  --btn-bg: var(--kt-plum);
  box-shadow: 0 6px 18px rgba(43, 14, 32, 0.24);
}
.btn--dark:hover {
  --btn-bg: var(--kt-plum-2);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: 1.5px solid var(--line-2);
}
.btn--ghost:hover {
  --btn-bg: var(--surface);
  border-color: var(--kt-pink-200);
  --btn-fg: var(--kt-pink);
}

.btn--soft {
  --btn-bg: var(--kt-pink-50);
  --btn-fg: var(--kt-pink);
}
.btn--soft:hover {
  --btn-bg: var(--kt-pink-100);
}

.btn--onDark {
  --btn-bg: #fff;
  --btn-fg: var(--kt-plum);
}
.btn--onDark:hover {
  --btn-bg: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.btn--lg {
  height: 58px;
  padding: 0 32px;
  font-size: 1rem;
}
.btn--sm {
  height: 40px;
  padding: 0 18px;
  font-size: 0.86rem;
}
.btn--block {
  width: 100%;
}

.btn svg {
  flex: none;
}

/* Icon-only round button */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ink-2);
  background: transparent;
  transition: background-color var(--t-fast) linear,
    color var(--t-fast) linear, transform var(--t-fast) var(--ease-out);
}
.icon-btn:hover {
  background: var(--surface-3);
  color: var(--ink);
}
.icon-btn:active {
  transform: scale(0.92);
}

/* ==========================================================================
   Chips / badges / pills
   ========================================================================== */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1.5px solid var(--line-2);
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--t-fast) var(--ease-out);
}
.chip:hover {
  border-color: var(--kt-pink-200);
  color: var(--kt-pink);
}
.chip[aria-pressed="true"],
.chip.is-active {
  background: var(--kt-pink);
  border-color: var(--kt-pink);
  color: #fff;
  box-shadow: var(--sh-pink);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--surface-3);
  color: var(--ink-2);
}
.tag--hot {
  background: var(--chili-50);
  color: var(--chili);
}
.tag--new {
  background: var(--kt-pink-100);
  color: var(--kt-pink);
}
.tag--veg {
  background: var(--mint-50);
  color: var(--mint);
}
.tag--deal {
  background: var(--kt-plum);
  color: #fff;
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
}
.rating svg {
  color: var(--amber);
}

/* ==========================================================================
   The "ring" — signature motif lifted from the circular logo badge
   ========================================================================== */

.ring {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--kt-pink-100);
  transition: box-shadow var(--t-mid) var(--ease-out),
    transform var(--t-mid) var(--ease-out);
}
.ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.field {
  display: block;
}

.field__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 7px;
  letter-spacing: -0.005em;
}

.input,
.select,
.textarea {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.95rem;
  transition: border-color var(--t-fast) linear, box-shadow var(--t-fast) linear;
}
.textarea {
  height: auto;
  min-height: 110px;
  padding: 14px 16px;
  resize: vertical;
}
.input::placeholder,
.textarea::placeholder {
  color: var(--ink-4);
}
.input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--kt-pink);
  box-shadow: 0 0 0 4px var(--kt-pink-50);
}

.field__hint {
  font-size: 0.78rem;
  color: var(--ink-3);
  margin-top: 6px;
}

.input-group {
  position: relative;
}
.input-group .input {
  padding-left: 46px;
}
.input-group__icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-4);
  pointer-events: none;
}
.input-group__action {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-3);
}
.input-group__action:hover {
  background: var(--surface-3);
  color: var(--ink);
}

/* ==========================================================================
   Quantity stepper
   ========================================================================== */

.stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  padding: 4px;
}
.stepper__btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink-2);
  background: var(--surface);
  box-shadow: var(--sh-1);
  transition: transform var(--t-fast) var(--ease-spring),
    color var(--t-fast) linear;
}
.stepper__btn:hover {
  color: var(--kt-pink);
}
.stepper__btn:active {
  transform: scale(0.88);
}
.stepper__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.stepper__value {
  min-width: 34px;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}

/* ==========================================================================
   Price
   ========================================================================== */

.price {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.price--lg {
  font-size: 1.6rem;
}
.price--strike {
  color: var(--ink-4);
  font-weight: 600;
  text-decoration: line-through;
  font-size: 0.9em;
}

/* ==========================================================================
   Skeleton / empty states
   ========================================================================== */

.empty {
  text-align: center;
  padding: clamp(40px, 7vw, 80px) 24px;
}
.empty__art {
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--kt-pink-50);
  color: var(--kt-pink);
}
.empty h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}
.empty p {
  color: var(--ink-3);
  margin: 8px auto 22px;
  max-width: 40ch;
}

/* ==========================================================================
   Scroll rails (horizontal, snap)
   ========================================================================== */

.rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.rail::-webkit-scrollbar {
  display: none;
}
.rail > * {
  scroll-snap-align: start;
  flex: none;
}

.rail-nav {
  display: inline-flex;
  gap: 8px;
}
.rail-nav__btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  transition: all var(--t-fast) var(--ease-out);
}
.rail-nav__btn:hover:not(:disabled) {
  background: var(--kt-pink);
  border-color: var(--kt-pink);
  color: #fff;
}
.rail-nav__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--kt-pink);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-weight: 700;
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus {
  top: 12px;
}

.divider {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

.stack-8 > * + * {
  margin-top: 8px;
}
.stack-16 > * + * {
  margin-top: 16px;
}
.stack-24 > * + * {
  margin-top: 24px;
}

/* ==========================================================================
   Backend availability
   The storefront renders from the bundled menu snapshot even when Firebase
   cannot load. In that state ordering is disabled rather than guessed at.
   ========================================================================== */

.no-services [data-checkout],
.no-services [data-pay],
.no-services [data-pay-wallet] {
  opacity: 0.45;
  pointer-events: none;
}

.offline-note {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 10px 16px;
  background: var(--chili-50);
  color: var(--chili);
  font-size: 0.82rem;
  font-weight: 600;
}

/* <picture> exists only to offer a WebP source; it must not become a layout
   box of its own, or images sized against their parent (cards, the product
   hero) would size against the wrapper instead. */
picture {
  display: contents;
}


/* Applied for a single frame while the theme swaps — see KT.theme.apply(). */
:root.is-theme-switching,
:root.is-theme-switching *,
:root.is-theme-switching *::before,
:root.is-theme-switching *::after {
  transition: none !important;
}

/* ---- Our story ---------------------------------------------------------- */

.story__inner {
  max-width: 68ch;
}
.story__body {
  color: var(--ink-2);
  margin: 0 0 18px;
}
.story__stamp {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kt-pink);
}

/* ==========================================================================
   Install Kandy's — Add to Home Screen card (js/components/install-prompt.js)
   Inline at the top of browsing pages only; never an overlay.
   ========================================================================== */

.ktinstall-wrap {
  padding-top: 14px;
  padding-bottom: 4px;
}
.ktinstall-wrap--end {
  padding-top: 8px;
  padding-bottom: 32px;
}

.ktinstall {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
  padding: 16px 16px 14px;
  border: 1px solid var(--kt-pink-100);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--kt-pink-50) 0%, transparent 60%),
    var(--surface);
  box-shadow: var(--sh-2);
  color: var(--ink);
  font-family: var(--font-ui);
  animation: ktinstall-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes ktinstall-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ktinstall { animation: none; }
}

.ktinstall__head {
  display: grid;
  grid-template-columns: 52px 1fr 40px;
  gap: 12px;
  align-items: start;
}

.ktinstall__icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 4px 12px rgba(43, 14, 32, 0.10);
}

.ktinstall__intro { min-width: 0; }

.ktinstall__title {
  margin: 2px 0 4px;
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.2;
  color: var(--ink);
}

.ktinstall__lede {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.ktinstall__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: -6px -8px 0 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.ktinstall__close:hover,
.ktinstall__close:focus-visible {
  background: var(--surface-2);
  color: var(--ink);
}

.ktinstall__steps {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 12px;
  list-style: none;
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.ktinstall__steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--ink);
}

.ktinstall__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--kt-pink);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
}

.ktinstall__glyph {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-inline: 2px;
  vertical-align: middle;
  border-radius: 7px;
  background: var(--surface);
  color: #0a84ff;             /* the colour of Safari's own Share glyph */
  box-shadow: 0 0 0 1px var(--line);
}

.ktinstall__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
.ktinstall__actions .btn { min-width: 104px; }

@media (max-width: 400px) {
  .ktinstall__actions .btn { flex: 1 1 0; min-width: 0; }
}