/* ==========================================================================
   KoolAllure Experience — NOVA X identity, AirPods-Max page architecture
   (approved direction 2026-07-20): sticky buy bar, centered editorial hero,
   pinned scroll scene, closer-look view switcher, spec tiles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THIS FILE NO LONGER DECLARES COLOUR.

   Every token that used to live in a :root block here — --ka-bg,
   --ka-bg-elevated, --ka-surface, --ka-border, --ka-text, --ka-text-dim,
   --ka-accent, --ka-accent-ink, --ka-radius, --ka-shadow-warm, --ka-font,
   --ka-ease, and the warm-ivory family before them — now has exactly one
   definition, in assets/css/tokens.css, which loads first as a declared
   dependency. The names are unchanged, so the rules below are unchanged; only
   the place their values come from moved.

   Two of them changed TYPE in the move and that is worth knowing before
   editing here:

     --ka-border  is now an HSL TRIPLET (`32 16% 84%`), not an rgba() colour,
                  so it reads as hsl(var(--ka-border)) and can be tinted with
                  hsl(var(--ka-border) / 0.4). Every use in this file was
                  rewritten accordingly.
     --ka-accent  is still the gold. The primary BUTTON no longer uses it —
                  see the .ka-btn family — because #b8892f behind body-sized
                  text measures about 2.5:1.

   --ka-nav-clear stays: it is a layout measurement belonging to this file's
   fixed application bar, not a design token any other surface reads.
   -------------------------------------------------------------------------- */
:root {
  --ka-nav-clear: 92px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ka-bg); }
body {
  margin: 0;
  background: var(--ka-bg);
  color: var(--ka-text);
  font-family: var(--ka-font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --------------------------------------------------------------------------
   Brand nav — one canonical warm-ivory application bar across every route
   (immersive homepage, AI results, Shop, category, product). Full viewport
   width, no floating capsule, no margins, no radius on desktop; only a warm
   hairline and a very soft shadow separate it from the page. The immersive
   route differs by opacity alone (immersive-store.css).
   -------------------------------------------------------------------------- */
.ka-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px clamp(16px, 3vw, 32px);
  background: var(--ka-ivory-glass);
  border: 0;
  border-bottom: 1px solid var(--ka-line-warm);
  box-shadow: var(--ka-shadow-warm);
  color: var(--ka-ink);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: opacity 0.4s var(--ka-ease), transform 0.4s var(--ka-ease);
}
body.past-hero .ka-nav { opacity: 0; transform: translateY(-16px); pointer-events: none; }

.ka-nav__brand { color: var(--ka-ink); text-decoration: none; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.95rem; }
/* Rhythm, not an even comb: a small gap between siblings, a larger one where
   the bar changes subject — navigation, then the control and the action, then
   the customer's own things. The group gaps live on the first item of each
   group (.ka-currency, .ka-nav__signin, .ka-account). */
.ka-nav__actions { display: flex; align-items: center; gap: var(--ka-nav-gap, 6px); }
.ka-nav__brand.has-logo {
  display: inline-flex;
  align-items: center;
}
/* One logo scale everywhere: never oversized on Shop/product routes. */
.ka-nav__logo { display: block; height: 32px; width: auto; }

/*
 * THE WORDMARK IS NOT COMPRESSIBLE.
 *
 * The bar is a flex row and the brand was a shrinkable item in it, so on a
 * narrow screen the actions took the space they wanted and the logo gave up
 * the rest. Measured on a 375px viewport: 14px wide by 30px tall — a vertical
 * sliver of a wide wordmark, which is what the customer met the brand as on
 * every phone.
 *
 * The actions shrink instead; they are text and controls and they have their
 * own smaller sizes at this width.
 */
.ka-nav__brand,
.ka-nav__brand.has-logo { flex: 0 0 auto; }
.ka-nav__logo { flex: 0 0 auto; max-width: 46vw; object-fit: contain; object-position: left center; }
.ka-nav__actions { min-width: 0; }

/* --------------------------------------------------------------------------
   THE HEADER CONTROL SYSTEM
   ---------------------------------------------------------------------------
   The bar held six controls drawn from four different component families: an
   outlined pill (Shop), bare text (Research, Sign in), a 6px-radius field
   (currency) and a gold pill (Ask Us) — with three font sizes between them and
   no shared height. Each read fine alone; together they read as parts.
   Everything below exists to make them one system.
   UNIFORMITY IS NOT SAMENESS. Three tiers, each with a job:
     navigation  Shop, Research   quiet text, accent + underline when active
     control     currency         neutral outline, secondary
     action      Ask Us           gold outline and surface, the loudest thing
   The tokens carry the uniformity — one height, one radius family, one type
   size, one border weight — so a responsive step changes a variable rather
   than six selectors, which is how the sizes drifted apart in the first place.
   -------------------------------------------------------------------------- */
.ka-nav {
  --ka-nav-control-h: 36px;
  --ka-nav-pad-x: 16px;      /* the outlined controls */
  --ka-nav-pad-x-sm: 12px;   /* the text-level ones */
  --ka-nav-font: 0.85rem;
  --ka-nav-gap: 6px;         /* between siblings inside a group */
  --ka-nav-gap-group: 18px;  /* between groups: nav | control · action | utility */
}

/* One box for everything in the bar. */
.ka-nav__shop,
.ka-nav__research,
.ka-nav__signin,
.ka-nav__chat,
.ka-account__trigger,
.ka-currency select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ka-nav-control-h);
  white-space: nowrap;
  font-family: inherit;
  font-size: var(--ka-nav-font);
  font-weight: 500;
  line-height: 1;
  border-radius: var(--ka-radius-pill);
  cursor: pointer;
  transition: color 0.25s var(--ka-ease), background 0.25s var(--ka-ease),
    border-color 0.25s var(--ka-ease);
}

/* One focus ring. Shop and Ask Us previously had none at all — the two
   controls a keyboard reaches first were the two it could not see. */
.ka-nav__shop:focus-visible,
.ka-nav__research:focus-visible,
.ka-nav__signin:focus-visible,
.ka-nav__chat:focus-visible,
.ka-nav__cart:focus-visible,
.ka-account__trigger:focus-visible,
.ka-currency select:focus-visible {
  outline: var(--ka-focus-width) solid hsl(var(--ka-focus));
  outline-offset: var(--ka-focus-offset);
}

/*
 * SHOP AND RESEARCH ARE PEERS.
 *
 * Shop used to be an outlined pill and Research a bare word, so the two halves
 * of what a visitor can do here — buy something, read what we found — did not
 * look like the same kind of thing. Shop also read as a call to action while
 * the actual call to action sat two controls away in gold.
 *
 * Both are now text at rest with one shared active indicator, which leaves
 * exactly one outlined neutral control (currency) and one accent control
 * (Ask Us) in the bar. Shop lights up while its menu is open, Research while
 * you are on a research route: same colour, same underline, same logic.
 */
.ka-nav__navitem {
  position: relative;
  padding: 0 var(--ka-nav-pad-x-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ka-ink);
  text-decoration: none;
}
.ka-nav__navitem:hover {
  color: hsl(var(--ka-primary));
  background: var(--ka-gold-08);
}
.ka-nav__navitem::after {
  content: "";
  position: absolute;
  left: var(--ka-nav-pad-x-sm);
  right: var(--ka-nav-pad-x-sm);
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.5);
  transition: opacity 0.2s var(--ka-ease), transform 0.2s var(--ka-ease);
}
/* Drawn, not inserted: an underline that changes the box would nudge every
   control to its right each time a menu opened. */
.ka-nav__navitem[aria-current="page"],
.ka-nav__navitem[aria-expanded="true"] { color: hsl(var(--ka-primary)); }
.ka-nav__navitem[aria-current="page"]::after,
.ka-nav__navitem[aria-expanded="true"]::after { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ka-nav__navitem::after { transition: none; }
}

/*
 * Research — Shop's peer, and quieter than Ask Us.
 *
 * Both are destinations rather than actions, so neither competes with the one
 * control that moves a customer through the shop.
 *
 * HIDDEN BELOW 560px, AND THAT IS A COMPROMISE, NOT A PREFERENCE. The note
 * further down this file records the measurement: five controls and a wordmark
 * already needed about 481px of a 375px row, and were only made to fit by
 * compacting all of them. A sixth re-breaks it, and a nav item that has left
 * the right edge of the screen is worse than one that was never drawn. So on
 * phones the route lives in the footer instead — see footer.php, which carries
 * it at every width. The real fix is a proper mobile menu for the whole bar,
 * which is a larger job than adding one link to it.
 *
 * Its box, its type and its states now come from .ka-nav__navitem, which it
 * shares with Shop.
 */
/* The wrapper's own base rule lives HERE, above the breakpoint that hides it,
   and not down with the submenu styles where it would read more naturally. It
   sets display, the breakpoint unsets it, and at equal specificity the later
   declaration wins — so writing them the other way round put the whole item
   back on a 375px bar and pushed two controls off the right edge. Measured,
   after doing exactly that. */
.ka-nav__research-wrap { position: relative; display: inline-flex; }

@media (max-width: 560px) {
  .ka-nav__research-wrap { display: none; }
}

/* --------------------------------------------------------------------------
   The research submenu — Findings, the topics, How We Research.

   Opens with no JavaScript at all: :hover for a mouse, :focus-within for a
   keyboard. The second one is what makes it usable rather than decorative —
   tabbing to Research opens the panel, tabbing past the last item closes it,
   and there is no script that can fail to load and take three routes with it.

   The gap between the trigger and the panel is bridged by the trigger's own
   padding-bottom rather than left open, because a 6px hole between a link and
   the menu it opened closes the menu when the cursor crosses it.
   -------------------------------------------------------------------------- */
.ka-nav__submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 70;
  margin-top: 12px;
  width: 280px;
  padding: 10px;
  border: 1px solid var(--ka-line-warm);
  border-radius: var(--ka-radius-md);
  background: var(--ka-ivory-glass);
  box-shadow: 0 18px 44px rgba(67, 57, 45, 0.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  transform: translate(-50%, -6px);
  pointer-events: none;
  transition: opacity 0.18s var(--ka-ease), transform 0.18s var(--ka-ease);
}
/*
 * The bridge across the 12px gap.
 *
 * :hover on the wrapper is set by hovering ANY descendant, the panel included
 * — so the panel keeps itself open once reached. Getting there is the problem:
 * without this invisible strip the cursor crosses bare page between the link
 * and the menu, the wrapper stops being hovered, and the menu closes under a
 * cursor that was travelling towards it.
 */
.ka-nav__submenu::before {
  content: "";
  position: absolute;
  inset: -12px 0 auto;
  height: 12px;
}
/*
 * Hover only where a pointer can hover. On a touch screen :hover fires on tap
 * and sticks, so the panel would open on top of the page the tap was already
 * navigating to. There, Research is simply a link — and it goes to the
 * research home, which carries all of these routes on the page itself.
 */
@media (hover: hover) {
  .ka-nav__research-wrap:hover .ka-nav__submenu {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
  }
}
.ka-nav__research-wrap:focus-within .ka-nav__submenu {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.ka-nav__submenu-item {
  display: block;
  padding: 9px 12px;
  border-radius: var(--ka-radius-sm);
  color: var(--ka-ink);
  font-size: 0.875rem;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color 0.15s var(--ka-ease), color 0.15s var(--ka-ease);
}
.ka-nav__submenu-item:hover,
.ka-nav__submenu-item:focus-visible {
  background: rgba(67, 57, 45, 0.06);
  color: hsl(var(--ka-primary));
}
.ka-nav__submenu-item small {
  display: block;
  margin-top: 2px;
  color: var(--ka-ink-dim);
  font-size: 0.75rem;
}
.ka-nav__submenu-item--topic span { font-weight: 500; }
/*
 * The topics sit under their label, not beside it.
 *
 * Findings, the five topics and How We Research were all flush to the same
 * left edge, so RESEARCH TOPICS read as a third sibling in the list rather
 * than as the heading of the five items below it.
 *
 * The indent is on the item's margin, not its padding, so the whole block
 * moves — hover and active backgrounds included — and the tagline, which is a
 * block-level <small> inside the same box, keeps its exact alignment with the
 * title above it without any indent of its own. Findings and How We Research
 * carry no --topic modifier and do not move.
 */
.ka-nav__submenu-item--topic { margin-left: 12px; }

.ka-nav__submenu-label {
  margin: 10px 12px 4px;
  color: var(--ka-ink-dim);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ka-nav__submenu-item--ruled {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--ka-line-warm);
}

@media (prefers-reduced-motion: reduce) {
  .ka-nav__submenu { transition: none; }
}
/*
 * Currency — the one neutral control in the bar.
 *
 * It was a 6px-radius box among pills at a smaller type size, which is exactly
 * what a browser's own form control looks like. The native appearance is off
 * and the chevron is drawn, so it sits in the same radius family and on the
 * same baseline as everything else while staying secondary: dimmer text, no
 * fill, narrower box.
 */
.ka-currency { display: inline-flex; align-items: center; margin-left: var(--ka-nav-gap-group); }
.ka-currency select {
  appearance: none;
  -webkit-appearance: none;
  max-width: 96px;
  border: 1px solid var(--ka-line-warm);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%23736d66' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 9px 6px;
  color: var(--ka-ink-dim);
  padding: 0 26px 0 var(--ka-nav-pad-x-sm);
  text-align: left;
}
.ka-currency select:hover { border-color: var(--ka-accent); color: var(--ka-ink); }

/*
 * Ask Us — the loudest thing in the bar, and a member of it.
 *
 * It keeps the gold and the sparkle. What changed is that it now shares the
 * bar's height, radius, border weight, padding scale and type size, so it
 * reads as the emphasised member of one family rather than a component
 * borrowed from another. Its text was a hardcoded #8f6a20; that is exactly
 * --ka-accent-deep, so it is now the token.
 */
.ka-nav__chat {
  gap: 6px;
  border: 1px solid var(--ka-gold-35);
  background: var(--ka-gold-12);
  color: var(--ka-accent-deep);
  padding: 0 var(--ka-nav-pad-x);
}
.ka-nav__chat:hover { border-color: var(--ka-accent); background: var(--ka-gold-20); }
/* Quieter than .ka-nav__chat on purpose: "Ask Us" is the primary action on
   this storefront, and signing in is something the customer reaches for, not
   something we push them toward. */
/* The account menu: the customer's own name, and everything that belongs to
   them behind it. Same quiet weight as Sign in — a way back, not a call to act. */
.ka-account { position: relative; display: inline-flex; margin-left: var(--ka-nav-gap-group); }

/* Signed in, this stands where Sign in stands, so it takes the same box and
   the same tokens. Its border was two raw rgba values of its own. */
.ka-account__trigger {
	border: 1px solid var(--ka-line-warm);
	background: none;
	color: var(--ka-ink);
	padding: 0 var(--ka-nav-pad-x-sm);
}
.ka-account__trigger:hover { border-color: var(--ka-accent); background: var(--ka-gold-08); }
/* The only header label whose length the site does not choose. It shrinks
   before the cart does. */
.ka-account { min-width: 0; }
.ka-account__trigger { min-width: 0; }
.ka-account__who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ka-account__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 60;
	width: min(20rem, calc(100vw - 2rem));
	max-height: 70vh;
	overflow-y: auto;
	padding: .6rem;
	background: var(--ka-paper, #faf7f2);
	border: 1px solid rgba(40, 36, 31, 0.12);
	border-radius: var(--ka-radius-sm);
	box-shadow: 0 12px 40px rgba(40, 36, 31, 0.14);
	text-align: left;
}

.ka-account__label {
	margin: .2rem .4rem .4rem;
	font-size: .68rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	opacity: .55;
}

.ka-account__projects { display: flex; flex-direction: column; gap: .1rem; }

.ka-account__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .1rem;
	width: 100%;
	padding: .5rem .55rem;
	font: inherit;
	font-size: .88rem;
	color: var(--ka-ink);
	text-align: left;
	text-decoration: none;
	background: none;
	border: 0;
	border-radius: var(--ka-radius-xs);
	cursor: pointer;
}
.ka-account__item:hover { background: rgba(40, 36, 31, 0.06); }
.ka-account__item:focus-visible { outline: var(--ka-focus-width) solid hsl(var(--ka-focus)); outline-offset: var(--ka-focus-offset); }

.ka-account__meta { font-size: .74rem; opacity: .6; }

/* A project and the one action that ends it, on one line. */
.ka-account__row { display: flex; align-items: center; gap: .2rem; }
.ka-account__row .ka-account__item { flex: 1 1 auto; }

.ka-account__archive {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: var(--ka-radius-xs);
	background: none;
	color: var(--ka-ink);
	opacity: .45;
	cursor: pointer;
}
.ka-account__archive:hover { opacity: 1; background: rgba(40, 36, 31, 0.08); }
.ka-account__archive:focus-visible { outline: var(--ka-focus-width) solid hsl(var(--ka-focus)); outline-offset: var(--ka-focus-offset); }
.ka-account__archive[disabled] { opacity: .25; cursor: default; }
.ka-account__note { margin: .2rem .55rem .4rem; font-size: .82rem; opacity: .7; }
.ka-account__rule { margin: .45rem .3rem; border: 0; border-top: 1px solid rgba(40, 36, 31, 0.1); }

/* Losing unsaved work is the one thing that gets a modal. */
.ka-confirm {
	position: fixed;
	inset: auto 0 0 0;
	margin: 0 auto 1.5rem;
	z-index: 80;
	width: min(26rem, calc(100vw - 2rem));
	padding: 1.1rem 1.2rem;
	background: var(--ka-paper, #faf7f2);
	border: 1px solid rgba(40, 36, 31, 0.14);
	border-radius: var(--ka-radius-sm);
	box-shadow: 0 18px 50px rgba(40, 36, 31, 0.2);
}
.ka-confirm__title { margin: 0 0 .35rem; font-size: 1rem; }
.ka-confirm__body { margin: 0 0 .9rem; font-size: .86rem; line-height: 1.45; opacity: .8; }
.ka-confirm__actions { display: flex; flex-wrap: wrap; gap: .4rem; }

/*
 * The dialog's buttons take the page's ink.
 *
 * They are .ka-imm__chip, which is drawn pale-stone for the dark hero film.
 * The project section already overrides that for itself; this dialog lives on
 * the body, outside that scope, so the three controls on the one screen that
 * decides whether work is lost were cream on cream.
 */
.ka-confirm .ka-imm__chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--ka-ink);
	border: 1px solid rgba(40, 36, 31, .26);
	border-radius: var(--ka-radius-pill);
	padding: 7px 13px;
	font: inherit;
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: none;
	cursor: pointer;
}
.ka-confirm .ka-imm__chip:hover { background: rgba(40, 36, 31, .06); border-color: rgba(40, 36, 31, .5); }
.ka-confirm .ka-imm__chip:focus-visible { outline: var(--ka-focus-width) solid hsl(var(--ka-focus)); outline-offset: var(--ka-focus-offset); }

/* Saving is the one that keeps the work, so it reads as the primary. */
.ka-confirm .ka-confirm__actions .ka-imm__chip:first-child {
	border-color: var(--ka-gold-55);
	background: var(--ka-gold-12);
	color: #6f5115;
}

/* My Projects: same quiet weight as Sign in — a way back, not a call to act. */
.ka-nav__projects {
	white-space: nowrap;
	border: 1px solid rgba(40, 36, 31, 0.18);
	background: none;
	color: var(--ka-ink);
	border-radius: var(--ka-radius-pill);
	padding: 7px 14px;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.25s var(--ka-ease), background 0.25s var(--ka-ease);
}
.ka-nav__projects:hover { border-color: rgba(40, 36, 31, 0.4); background: rgba(0, 0, 0, 0.04); }
.ka-nav__projects:focus-visible { outline: var(--ka-focus-width) solid hsl(var(--ka-focus)); outline-offset: var(--ka-focus-offset); }

.ka-projects {
	position: fixed;
	top: 64px;
	right: clamp(12px, 3vw, 28px);
	z-index: 60;
	width: min(22rem, calc(100vw - 2rem));
	max-height: 60vh;
	overflow-y: auto;
	padding: 1rem;
	background: var(--ka-paper, #faf7f2);
	border: 1px solid rgba(40, 36, 31, 0.12);
	border-radius: var(--ka-radius-sm);
	box-shadow: 0 12px 40px rgba(40, 36, 31, 0.14);
}

.ka-projects__title {
	margin: 0 0 .6rem;
	font-size: .72rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	opacity: .6;
}

.ka-projects__list { display: flex; flex-direction: column; gap: .25rem; }

.ka-projects__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .15rem;
	width: 100%;
	padding: .55rem .6rem;
	font: inherit;
	text-align: left;
	background: none;
	border: 0;
	border-radius: var(--ka-radius-xs);
	cursor: pointer;
}
.ka-projects__item:hover { background: rgba(40, 36, 31, 0.06); }
.ka-projects__item:focus-visible { outline: var(--ka-focus-width) solid hsl(var(--ka-focus)); outline-offset: var(--ka-focus-offset); }

.ka-projects__name { font-size: .92rem; }
.ka-projects__meta { font-size: .75rem; opacity: .6; }
.ka-projects__note { margin: 0; font-size: .82rem; opacity: .7; line-height: 1.45; }

/* Utility, not navigation: the same box, type and hover as Shop and Research,
   but never an active indicator — signing in is not a place you can be. */
.ka-nav__signin {
  margin-left: var(--ka-nav-gap-group);
  padding: 0 var(--ka-nav-pad-x-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ka-ink);
  text-decoration: none;
}
.ka-nav__signin:hover { color: hsl(var(--ka-primary)); background: var(--ka-gold-08); }

/* A square of the same height as everything else, so the icon lands on the
   bar's centreline instead of near it. */
.ka-nav__cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ka-nav-control-h);
  min-width: var(--ka-nav-control-h);
  border-radius: var(--ka-radius-pill);
  color: var(--ka-ink);
  transition: color 0.25s var(--ka-ease), background 0.25s var(--ka-ease);
}
.ka-nav__cart:hover { color: hsl(var(--ka-primary)); background: var(--ka-gold-08); }
/* The badge sat at -4/-6 — clear of the glyph, reading as a separate object.
   Tucked onto the icon's corner and ringed in the bar's own colour, it reads
   as part of the cart. */
.ka-nav__badge {
  position: absolute;
  top: 3px; right: 3px;
  min-width: 17px; height: 17px;
  border-radius: var(--ka-radius-pill);
  background: var(--ka-accent);
  color: var(--ka-accent-ink);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0 4px;
  box-shadow: 0 0 0 2px hsl(var(--ka-background));
}

/* --------------------------------------------------------------------------
   Sticky local buy bar (Apple-style product nav)
   -------------------------------------------------------------------------- */
.ka-buybar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 65;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 5vw;
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid hsl(var(--ka-border));
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transform: translateY(-110%);
  transition: transform 0.45s var(--ka-ease);
}
body.past-hero .ka-buybar { transform: none; }
.ka-buybar__name { font-weight: 700; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ka-buybar__right { display: flex; align-items: center; gap: 14px; flex: none; }
.ka-buybar__price { color: var(--ka-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.ka-buybar__btn {
  background: hsl(var(--ka-espresso));
  color: hsl(var(--ka-espresso-foreground));
  border: none;
  border-radius: var(--ka-radius-pill);
  padding: var(--ka-control-pad-y-sm) var(--ka-control-pad-x);
  font-weight: var(--ka-weight-medium);
  font-size: var(--ka-type-control);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.25s var(--ka-ease);
}
.ka-buybar__btn:hover { transform: translateY(-1px); }
.ka-buybar__btn:disabled { background: var(--ka-surface); color: var(--ka-text-dim); cursor: not-allowed; }
.ka-buybar__ai {
  background: transparent;
  border: 1px solid hsl(var(--ka-border));
  color: var(--ka-text);
  border-radius: var(--ka-radius-pill);
  padding: 8px 16px;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
}
.ka-buybar__ai:hover { border-color: var(--ka-accent); color: var(--ka-accent); }

/* --------------------------------------------------------------------------
   WS2B Video hero (front page): cinematic ambient background for the first
   viewport. The poster paints immediately as the media layer's CSS
   background — the always-present static fallback. JS attaches the muted,
   inline video only after window load + idle and only when motion is allowed
   and the connection allows it; any failure simply leaves the poster. Ask AI
   (fixed, hero mode) centers over this section; the product scene follows.
   -------------------------------------------------------------------------- */
.ka-vidhero {
  position: relative;
  height: 100svh;
  overflow: hidden;
}
.ka-vidhero__media {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
}
.ka-vidhero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Blend the ambience into the page background toward the product scene. */
.ka-vidhero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 30vh;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(251, 250, 248, 0.92) 0%,
    rgba(251, 250, 248, 0.45) 55%,
    transparent 100%);
}
.ka-vidhero__cue {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  z-index: 2;
  color: var(--ka-text-dim);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ka-vidhero__cue span {
  display: inline-block;
  padding-bottom: 14px;
  background: linear-gradient(var(--ka-text-dim), var(--ka-text-dim)) bottom center / 1px 10px no-repeat;
}

/* --------------------------------------------------------------------------
   AI discovery framing (owner mandate 2026-07-27): the product scene below
   the video hero is the discovery section — "Today's discovery." until an
   Ask AI answer retitles it "Recommended for you." and transforms the scene
   into the AI-selected product. It is the scroll target of every product
   transition.
   -------------------------------------------------------------------------- */
.ka-discovery {
  padding: clamp(48px, 9vh, 96px) 24px 0;
  text-align: center;
}
.ka-discovery__kicker {
  margin: 0;
  color: var(--ka-accent);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 600;
}

/* Supplier-candidate stage mode (set via .ka-stage--supplier from
   experience.js): the stage presents a temporary supplier candidate —
   image, title, final price and the available-on-request note only. The
   previous product's fact sections never show stale facts for it, and the
   cart call to action is disabled by JS (its form fields still belong to
   the previous local product). */
.ka-stage--supplier .ka-chapter,
.ka-stage--supplier .ka-options,
.ka-stage--supplier .ka-closer,
.ka-stage--supplier .ka-specs,
.ka-stage--supplier .ka-description,
.ka-stage--supplier .ka-clip-tools { display: none; }
.ka-stage--supplier .js-addToCart { opacity: 0.45; cursor: not-allowed; }
.ka-hero__onrequest {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  margin: 0;
  width: min(340px, 80vw);
  text-align: right;
  color: var(--ka-text-dim);
  font-size: 0.86rem;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  /* Static poster only — the video element is never populated and stays hidden. */
  .ka-vidhero__video { display: none; }
}

/* --------------------------------------------------------------------------
   Hero: centered editorial, product giant below
   -------------------------------------------------------------------------- */
.ka-hero {
  height: 100svh;
  display: block;
  position: relative;
  overflow: hidden;
  padding: 0;
  text-align: left;
  background: linear-gradient(180deg, #fbfaf8 0%, #f3f1ec 100%);
}

.ka-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42vh;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(251, 250, 248, 0.97) 0%,
    rgba(251, 250, 248, 0.86) 22%,
    rgba(251, 250, 248, 0.45) 52%,
    transparent 100%);
}

.ka-hero__copy {
  position: absolute;
  left: 5vw;
  bottom: 7vh;
  z-index: 4;
  max-width: min(52vw, 660px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ka-hero__another {
  margin-top: 14px;
  border: none;
  background: none;
  padding: 0;
  color: var(--ka-text-dim);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  border-bottom: 1px solid hsl(var(--ka-border));
  line-height: 1.9;
}
.ka-hero__another:hover { color: var(--ka-accent); border-bottom-color: var(--ka-accent); }

.ka-hero__kicker {
  color: var(--ka-accent);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-size: 0.74rem;
  font-weight: 600;
  margin: 0 0 14px;
  opacity: 0;
  animation: ka-rise 0.8s 0.1s var(--ka-ease) forwards;
}

.ka-hero__title {
  font-size: 3.5rem;
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
  background: linear-gradient(180deg, #1b1b20 30%, #4a4a54 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  animation: ka-rise 0.8s 0.24s var(--ka-ease) forwards;
  outline: none;
}

.ka-hero__buyrow {
  position: absolute;
  right: 5vw;
  bottom: 7vh;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 8px 8px 26px;
  border-radius: var(--ka-radius-pill);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid hsl(var(--ka-border));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  opacity: 0;
  animation: ka-rise 0.8s 0.38s var(--ka-ease) forwards;
}
.ka-hero__prices { display: flex; align-items: baseline; gap: 10px; }
.ka-hero__price { font-size: 1.3rem; font-weight: 700; color: var(--ka-accent); font-variant-numeric: tabular-nums; }
.ka-hero__was { color: var(--ka-text-dim); font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   .ka-btn — the site's original button, now built from the control system.

   Kept as its own class rather than replaced by .ka-c-btn because it appears
   in encoded AliDropship markup and in three templates this pass has no
   reason to open. Same geometry, same tokens, same espresso: it IS the
   control system, wearing the name the markup already uses.

   What changed, and why:
     700 -> 500        weight was doing emphasis that colour and placement
                       already do; at 700 every button on the page shouted.
     0.95rem -> token  one control size, not the sixth of sixteen.
     gold -> espresso  #b8892f behind a body-sized label is ~2.5:1 on ivory.
                       Espresso is ~13:1. The gold keeps prices and hairlines.
     glow -> none      it carried `0 12px 34px rgba(184,137,47,0.35)` at rest
                       and a 44px one on hover. Hierarchy here is surface,
                       border and space.
     focus             was the 2.5:1 gold at 3px offset; now the shared focus
                       colour, width and offset, the same as every other
                       control on the site.
   -------------------------------------------------------------------------- */
.ka-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ka-control-gap);
  border-radius: var(--ka-radius-pill);
  padding: var(--ka-control-pad-y) var(--ka-control-pad-x);
  font-family: var(--ka-font-body);
  font-size: var(--ka-type-control);
  font-weight: var(--ka-weight-medium);
  line-height: var(--ka-leading-snug);
  cursor: pointer;
  transition: background-color var(--ka-dur) var(--ka-ease), border-color var(--ka-dur) var(--ka-ease), color var(--ka-dur) var(--ka-ease), transform var(--ka-dur-fast) var(--ka-ease);
}
.ka-btn:active { transform: scale(0.985); }
.ka-btn:focus-visible {
  outline: var(--ka-focus-width) solid hsl(var(--ka-focus));
  outline-offset: var(--ka-focus-offset);
}
.ka-btn--primary {
  background: hsl(var(--ka-espresso));
  color: hsl(var(--ka-espresso-foreground));
  border: none;
  box-shadow: none;
}
.ka-btn--primary:hover { background: hsl(var(--ka-espresso) / 0.88); }
/* Muted, not faded. `opacity: .4` on a 13:1 label leaves about 5:1, and the
   cheapest way to write this state is the way that makes it unreadable. */
.ka-btn--primary:disabled {
  background: hsl(var(--ka-muted));
  color: hsl(var(--ka-muted-foreground));
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.ka-btn--ghost {
  background: hsl(var(--ka-card));
  color: hsl(var(--ka-foreground));
  border: 1px solid hsl(var(--ka-border));
}
.ka-btn--ghost:hover {
  border-color: hsl(var(--ka-primary) / 0.45);
  background: hsl(var(--ka-secondary) / 0.7);
}

/* Pinned scene: product sticky through the first chapter */
.ka-scene { height: 230svh; position: relative; }
.ka-scene__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  overflow: hidden;
}

/* Holographic product stage: 3D tilt plane, specular light, floor
   reflection, scroll turntable over the product's real photos. */
.ka-stage3d { position: absolute; inset: var(--ka-nav-clear) 0 0; perspective: 1300px; display: grid; place-items: center; opacity: 0; animation: ka-img-in 1.1s 0.5s var(--ka-ease) forwards; will-change: transform, opacity; }
.ka-motion-hero { position: relative; width: 100%; height: 100%; max-height: none; display: grid; place-items: center; background: transparent; }
.ka-hero .ka-motion-canvas, .ka-hero .ka-motion-video { display: none !important; }
.ka-hero .ka-motion-fallback { opacity: 1 !important; visibility: visible !important; }
.ka-motion-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 0; object-fit: contain; opacity: 0; transition: opacity 0.45s var(--ka-ease); }
.ka-motion-canvas[hidden] { display: none; }
.ka-motion-canvas.is-ready { opacity: 1; }
.ka-motion-video { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: contain; background: transparent; opacity: 0; transition: opacity 0.35s var(--ka-ease); z-index: 3; }
.ka-motion-video[hidden] { display: none; }
.ka-motion-hero.has-final-video .ka-motion-video { opacity: 1; }
.ka-motion-hero.has-final-video .ka-motion-canvas { opacity: 0; }
.ka-motion-fallback { display: grid; place-items: center; width: 100%; height: 100%; transition: opacity 0.3s var(--ka-ease); }
.ka-motion-hero.is-ready .ka-motion-fallback { opacity: 0; visibility: hidden; }
.ka-clip-tools { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px; min-height: 34px; position: absolute; left: 5vw; top: 13vh; z-index: 5; }
.ka-clip-tools[hidden] { display: none; }
.ka-clip-command { min-height: 32px; padding: 6px 11px; border: 1px solid hsl(var(--ka-border)); border-radius: var(--ka-radius-xs); background: transparent; color: var(--ka-text); font-family: inherit; font-size: 0.78rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; }
.ka-clip-command:hover { border-color: var(--ka-accent); color: var(--ka-accent); }
.ka-clip-command:focus-visible { outline: var(--ka-focus-width) solid hsl(var(--ka-focus)); outline-offset: var(--ka-focus-offset); }
.ka-clip-command:disabled { color: var(--ka-text-dim); cursor: wait; }
.ka-clip-command[hidden] { display: none; }
.ka-clip-status { min-width: 160px; color: var(--ka-text-dim); font-size: 0.78rem; text-align: left; }
.ka-stage3d__tilt { position: relative; width: 100%; height: 100%; display: grid; place-items: center; transform-style: preserve-3d; will-change: transform; }
.ka-stage3d__frame { position: relative; width: min(94vw, 1280px); height: 100%; max-height: 100%; aspect-ratio: auto; border-radius: 0; overflow: visible; box-shadow: none; background: transparent; }
.ka-stage3d__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 0.18s linear; }
.ka-stage3d__frame img.hidden { opacity: 0; }
.ka-stage3d__spec { display: none; position: absolute; inset: 0; border-radius: var(--ka-radius-lg); pointer-events: none; mix-blend-mode: screen; background: radial-gradient(300px 240px at var(--sx, 30%) var(--sy, 20%), rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.06) 45%, transparent 70%); }
.ka-stage3d__refl { display: none; position: absolute; top: calc(100% + 10px); left: 0; width: 100%; aspect-ratio: 1; transform: scaleY(-1); border-radius: var(--ka-radius-lg); overflow: hidden; opacity: 0.16; -webkit-mask-image: linear-gradient(to bottom, transparent 55%, rgba(0, 0, 0, 0.9)); mask-image: linear-gradient(to bottom, transparent 55%, rgba(0, 0, 0, 0.9)); pointer-events: none; }
.ka-stage3d__refl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ka-stage3d__shadow { display: none; position: absolute; bottom: -26px; left: 50%; width: 46%; height: 26px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(0, 0, 0, 0.13), transparent 70%); filter: blur(12px); will-change: transform; }
.ka-stage3d__floor { display: none; position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); width: 130%; height: 120px; background: radial-gradient(ellipse at center, var(--ka-gold-12), transparent 70%); filter: blur(18px); pointer-events: none; }
@keyframes ka-img-in {
  from { opacity: 0; transform: scale(1.06) translateY(30px); }
  to   { opacity: 1; transform: none; }
}

.ka-hero__sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.12) 50%, transparent 58%);
  transform: translateX(-130%);
  animation: ka-sweep 1.5s 1.2s var(--ka-ease) forwards;
  pointer-events: none;
}

/* Chapter that scrolls over the pinned product */
.ka-chapter {
  position: absolute;
  top: 94svh;
  left: 0; right: 0;
  text-align: center;
  padding: 0 5vw;
}
.ka-chapter h2, .ka-h2 {
  font-size: 3.4rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.06;
  margin: 0 0 14px;
  text-wrap: balance;
}
.ka-sub { color: var(--ka-text-dim); max-width: 52ch; margin: 0 auto 40px; font-size: 1.02rem; }

/* Highlights: verified-fact cards */
.ka-high {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
}
.ka-high__card {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-xs);
  padding: 26px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ka-high__card .n { font-size: 2rem; font-weight: 800; color: var(--ka-accent); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ka-high__card p { margin: 6px 0 0; color: var(--ka-text-dim); font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   Options (variations) — inside the cart form
   -------------------------------------------------------------------------- */
.ka-options { padding: 12vh 5vw 4vh; text-align: center; position: relative; z-index: 5; background: var(--ka-bg); }
.ka-sku__group { border: none; margin: 0 auto 26px; padding: 0; max-width: 760px; }
.ka-sku__group legend {
  color: var(--ka-text-dim);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 auto 12px;
}
.ka-sku__options { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ka-sku__opt {
  border: 2px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-md);
  cursor: pointer;
  transition: border-color 0.25s, transform 0.25s var(--ka-ease);
  color: var(--ka-text);
  font-size: 0.86rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ka-sku__opt.is-text { padding: 9px 18px; }
.ka-sku__opt.is-img { padding: 3px; width: 56px; height: 56px; overflow: hidden; }
.ka-sku__opt.is-img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--ka-radius-sm); }
.ka-sku__opt:hover, .ka-sku__opt:focus-visible { border-color: var(--ka-accent); outline: none; transform: translateY(-2px); }
.ka-sku__opt.active { border-color: var(--ka-accent); box-shadow: 0 0 0 1px var(--ka-accent); }

/* --------------------------------------------------------------------------
   Take a closer look: view switcher
   -------------------------------------------------------------------------- */
.ka-closer { padding: 14vh 5vw 10vh; text-align: center; background: var(--ka-bg); position: relative; z-index: 5; }
.ka-closer__stage {
  max-width: 760px;
  margin: 0 auto 26px;
  border-radius: var(--ka-radius-lg);
  overflow: hidden;
  background: var(--ka-bg-elevated);
  border: 1px solid hsl(var(--ka-border));
  aspect-ratio: 1;               /* stable dimensions: no layout shift */
}
.ka-closer__stage img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.4s var(--ka-ease); }
.ka-closer__stage img.fading { opacity: 0; }
.ka-views { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ka-view {
  width: 64px; height: 64px;
  border-radius: var(--ka-radius-md);
  overflow: hidden;
  border: 2px solid hsl(var(--ka-border));
  background: none;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.25s, transform 0.25s var(--ka-ease);
}
.ka-view img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ka-view:hover, .ka-view:focus-visible { border-color: var(--ka-accent); outline: none; transform: translateY(-2px); }
.ka-view.active { border-color: var(--ka-accent); box-shadow: 0 0 0 1px var(--ka-accent); }

/* --------------------------------------------------------------------------
   Specs & description
   -------------------------------------------------------------------------- */
.ka-specs { padding: 6vh 5vw 6vh; max-width: 1000px; margin: 0 auto; position: relative; z-index: 5; background: var(--ka-bg); text-align: center; }
.ka-specs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 40px 0 0;
}
.ka-specs__grid > div {
  background: var(--ka-surface);
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius);
  padding: 22px;
}
.ka-specs__grid dt { color: var(--ka-text-dim); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; }
.ka-specs__grid dd { margin: 8px 0 0; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.ka-description { padding: 4vh 5vw 12vh; max-width: 860px; margin: 0 auto; color: var(--ka-text-dim); position: relative; z-index: 5; background: var(--ka-bg); }
.ka-description img { border-radius: var(--ka-radius); }

/* reveal on scroll */
.js-ka-reveal {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity 0.9s var(--ka-ease), transform 0.9s var(--ka-ease);
}
.js-ka-reveal.is-visible { opacity: 1; transform: none; }

/* Transition layer: retire 0.28s → atomic swap → arrive 0.7s */
.ka-stage { transition: opacity 0.28s var(--ka-ease), transform 0.28s var(--ka-ease); }
.ka-stage.is-leaving { opacity: 0; transform: translateY(18px) scale(0.995); }
.ka-stage.is-arriving { animation: ka-arrive 0.7s var(--ka-ease); }
@keyframes ka-arrive {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Ask AI dock
   -------------------------------------------------------------------------- */
.ka-chat {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 70;
  width: min(400px, calc(100vw - 40px));
  max-height: 72svh;
  display: flex;
  flex-direction: column;
  border-radius: var(--ka-radius-sm);
  background: rgba(248, 245, 239, 0.96);
  border: 1px solid var(--ka-line-warm);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 18px 48px rgba(67, 57, 45, 0.14);
  animation: ka-rise 0.4s var(--ka-ease);
}
.ka-chat[hidden] { display: none; }
.ka-chat__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--ka-line-warm); font-weight: 600; color: var(--ka-ink); }
.ka-chat__head-actions { display: flex; align-items: center; gap: 4px; }
.ka-chat__close { background: none; border: none; color: var(--ka-text-dim); font-size: 1.4rem; cursor: pointer; line-height: 1; }
.ka-chat__sound { width: 34px; height: 34px; display: grid; place-items: center; background: none; border: none; color: var(--ka-text-dim); cursor: pointer; }
.ka-chat__sound[hidden] { display: none; }
.ka-chat__sound[aria-pressed="true"] { color: var(--ka-accent); }
.ka-chat__log { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.ka-chat__msg { max-width: 85%; padding: 10px 14px; border-radius: var(--ka-radius-md); font-size: 0.92rem; }
.ka-chat__msg--user { align-self: flex-end; background: var(--ka-accent); color: var(--ka-accent-ink); border-bottom-right-radius: 4px; }
.ka-chat__msg--ai { align-self: flex-start; background: var(--ka-surface); border: 1px solid hsl(var(--ka-border)); border-bottom-left-radius: 4px; }
.ka-chat__msg--thinking { color: var(--ka-text-dim); font-style: italic; }

/* F1: match-state chips — the honest outcome label under an assistant reply */
.ka-chat__state {
  align-self: flex-start;
  margin: 0;
  padding: 3px 10px;
  border-radius: var(--ka-radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid hsl(var(--ka-border));
  color: var(--ka-text-dim);
  background: var(--ka-surface);
}
.ka-chat__state--no_credible_match { border-color: var(--ka-gold-35); color: var(--ka-accent); }
.ka-chat__state--partial_match { border-color: var(--ka-gold-35); }
.ka-chat__state--search_error { border-color: rgba(176, 58, 46, 0.45); color: #b03a2e; }
.ka-chat__state--strong_match { border-color: rgba(46, 125, 78, 0.45); color: #2e7d4e; }

/* Supplier-catalog exact match card (owner mandate 2026-07-27): product
 * facts only; theme-neutral, matches the chat surface tokens. */
.ka-chat__supplier {
  align-self: flex-start;
  display: flex;
  gap: 12px;
  max-width: 85%;
  padding: 10px;
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-md);
  background: var(--ka-surface);
}
.ka-chat__supplier img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--ka-radius-sm); flex: none; }
.ka-chat__supplier-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ka-chat__supplier-title { margin: 0; font-size: 0.9rem; font-weight: 600; }
.ka-chat__supplier-price { margin: 0; font-size: 0.88rem; color: var(--ka-accent); font-weight: 600; }
.ka-chat__supplier-note { margin: 0; font-size: 0.74rem; color: var(--ka-text-dim); }

/* WS15-V variant choices inside the supplier card: a compact, scrollable
 * strip of option previews. Tapping only previews — the choice is confirmed
 * by telling Ask AI. */
.ka-chat__variants { display: flex; align-items: center; gap: 6px; margin-top: 4px; overflow-x: auto; scrollbar-width: thin; }
.ka-chat__variants-label { flex: none; font-size: 0.72rem; color: var(--ka-text-dim); }
.ka-chat__variant {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1px solid hsl(var(--ka-border)); border-radius: var(--ka-radius-pill);
  padding: 2px 8px 2px 2px; cursor: pointer; font-size: 0.72rem; color: var(--ka-text);
  transition: border-color 0.25s var(--ka-ease);
}
.ka-chat__variant img { width: 20px; height: 20px; border-radius: var(--ka-radius-pill); object-fit: cover; }
.ka-chat__variant:hover { border-color: var(--ka-accent); }
.ka-chat__variant.active { border-color: var(--ka-accent); box-shadow: 0 0 0 1px var(--ka-accent); }

/* WS15-V supplier detail chapter (stage): variant picker + spec sheet for
 * the enriched candidate. Visible only while populated in supplier mode. */
.ka-supplier-detail { padding: 48px 24px; max-width: 960px; margin: 0 auto; }
.ka-supplier-detail h2 { margin: 0 0 4px; }
.ka-variant-group { margin: 18px 0 0; }
.ka-variant-group__label { margin: 0 0 8px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; }
.ka-variant-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ka-variant {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ka-surface); border: 1px solid hsl(var(--ka-border)); border-radius: var(--ka-radius-sm);
  padding: 6px 12px 6px 6px; cursor: pointer; font-size: 0.82rem; color: var(--ka-text);
  transition: border-color 0.25s var(--ka-ease), box-shadow 0.25s var(--ka-ease);
}
.ka-variant img { width: 34px; height: 34px; border-radius: var(--ka-radius-sm); object-fit: cover; }
.ka-variant:hover { border-color: var(--ka-accent); }
.ka-variant.active { border-color: var(--ka-accent); box-shadow: 0 0 0 1px var(--ka-accent); }
.ka-supplier-detail__match { margin: 16px 0 0; font-size: 0.85rem; color: var(--ka-accent); }
.ka-supplier-detail__desc { margin: 22px 0 0; color: var(--ka-text-dim); line-height: 1.6; white-space: pre-line; }
.ka-supplier-specs { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.ka-supplier-specs li {
  border: 1px solid hsl(var(--ka-border)); border-radius: var(--ka-radius-pill); padding: 4px 12px;
  font-size: 0.76rem; color: var(--ka-text-dim); background: var(--ka-surface);
}
@media (prefers-reduced-motion: reduce) {
  .ka-chat__variant, .ka-variant { transition: none; }
}

.ka-chat__suggestions { display: flex; gap: 8px; flex-wrap: wrap; align-self: flex-start; }
.ka-chat__suggestion {
  background: none; border: 1px solid hsl(var(--ka-border)); border-radius: var(--ka-radius-pill);
  color: var(--ka-text-dim); font-size: 0.78rem; padding: 4px 12px; cursor: pointer;
  transition: border-color 0.25s var(--ka-ease), color 0.25s var(--ka-ease);
}
.ka-chat__suggestion:hover { border-color: var(--ka-accent); color: var(--ka-accent); }
.ka-chat__affiliate { display: flex; flex-direction: column; gap: 6px; align-self: flex-start; margin: 4px 0; }
.ka-chat__affiliate-line { color: var(--ka-text-dim); font-size: 0.82rem; }
.ka-chat__affiliate-link {
  display: inline-block; background: none; border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-pill); color: var(--ka-text-dim); font-size: 0.78rem;
  padding: 4px 12px; text-decoration: none; align-self: flex-start;
  transition: border-color 0.25s var(--ka-ease), color 0.25s var(--ka-ease);
}
.ka-chat__affiliate-link:hover { border-color: var(--ka-accent); color: var(--ka-accent); }
.ka-chat__form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--ka-line-warm); }
.ka-chat__form input {
  flex: 1;
  min-width: 0;
  background: hsl(var(--ka-card));
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-pill);
  color: hsl(var(--ka-foreground));
  padding: 0.5rem var(--ka-field-pad-left);
  min-height: var(--ka-tap-min);
  font-size: var(--ka-type-body);
  outline: none;
  font-family: inherit;
}
.ka-chat__form input:focus { border-color: var(--ka-accent); }
.ka-chat__send {
  background: hsl(var(--ka-espresso));
  color: hsl(var(--ka-espresso-foreground));
  border: none;
  border-radius: var(--ka-radius-pill);
  padding: 0 var(--ka-control-pad-x-sm);
  min-height: var(--ka-tap-min);
  font-weight: var(--ka-weight-medium);
  cursor: pointer;
  font-family: inherit;
}
.ka-chat__voice, .ka-chat__voice-cancel {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid hsl(var(--ka-border));
  border-radius: 50%;
  background: var(--ka-bg-elevated);
  color: var(--ka-text);
  cursor: pointer;
}
.ka-chat__voice[hidden], .ka-chat__voice-cancel[hidden] { display: none; }
.ka-chat__voice.is-listening { border-color: var(--ka-accent); color: var(--ka-accent); box-shadow: 0 0 0 4px var(--ka-gold-12); }
.ka-chat__voice-status { display: block; min-height: 18px; padding: 0 16px 8px; color: var(--ka-text-dim); font-size: 0.76rem; }
.ka-chat__voice-status { display: block; min-height: 18px; padding: 0 16px 8px; color: var(--ka-text-dim); font-size: 0.76rem; }

/* Voice-language selector. Small, quiet, lives inside the form near the mic.
   position:relative is load-bearing (owner defect 2026-08-07): without it the
   menu's containing block was a clipped/scrolled ancestor, so the menu opened
   where the customer could neither see nor click it. */
.ka-chat__lang-select {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  background: none;
  border: 0;
  color: var(--ka-text-dim);
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  transition: color 160ms ease;
}
.ka-chat__lang-select[hidden] { display: none; }
.ka-chat__lang-select:hover { color: var(--ka-accent); }
.ka-chat__lang-menu {
  /* Portal (2026-08-08): appended to <body> and positioned by JS from the
     button's viewport rect, so it escapes any overflow/transform clipping
     of the chat dock. */
  position: fixed;
  margin: 0;
  padding: 6px;
  list-style: none;
  /* Owner directive 2026-08-07 §6: same warm-ivory language as Ask Us —
     never a cramped dark list. Values mirror the --kas-* tokens of
     storefront.css (not loaded on non-catalog routes, so repeated here):
     ivory #F8F5EF at 0.97, hairline rgba(74,58,32,0.16), kas shadow. */
  background: rgba(248, 245, 239, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(74, 58, 32, 0.16);
  border-radius: var(--ka-radius-sm);
  box-shadow: 0 14px 34px rgba(76, 58, 26, 0.10);
  min-width: 240px;
  max-height: 264px;
  overflow-y: auto;
  z-index: 130;
}
.ka-chat__lang-menu li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 12px;
  border-radius: var(--ka-radius-sm);
  color: #241c11;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.ka-chat__lang-menu li .ka-chat__lang-code {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #7c6f5b;
}
.ka-chat__lang-menu li:hover,
.ka-chat__lang-menu li:focus-visible {
  background: var(--ka-gold-12);
  outline: none;
}
.ka-chat__lang-menu li[aria-selected="true"] {
  background: var(--ka-gold-12);
  font-weight: 500;
}
.ka-chat__lang-menu li[aria-selected="true"] .ka-chat__lang-code {
  color: #8f6a20;
}

.ka-chat__hints { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 14px 14px; }
.ka-chat__hints button {
  background: transparent;
  border: 1px solid hsl(var(--ka-border));
  color: var(--ka-text-dim);
  border-radius: var(--ka-radius-pill);
  padding: 6px 12px;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: inherit;
}
.ka-chat__hints button:hover { border-color: var(--ka-accent); color: var(--ka-accent); }
.ka-chat__hints .ka-chat__end-session {
  margin-left: auto;
  border-color: transparent;
  color: var(--ka-text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ka-chat__hints .ka-chat__end-session:hover { border-color: transparent; color: var(--ka-text); }
.ka-chat__hints .ka-chat__end-session:disabled { cursor: wait; opacity: 0.55; }

/* --------------------------------------------------------------------------
   WS2 Ask AI homepage — hero mode
   The same #ka-chat node opens as the central initial-viewport experience on
   the front page, then docks lower-right on scroll. The transition itself is
   driven by JS (WAAPI FLIP along a restrained curved path); these rules only
   define the two resting states. Without JS the chat stays a hidden dock and
   the classic one-product hero is untouched (progressive enhancement).
   -------------------------------------------------------------------------- */
.ka-chat__hero-intro { display: none; }
.ka-chat--hero .ka-chat__hero-intro { display: block; padding: 26px 26px 6px; }
.ka-chat__hero-kicker {
  margin: 0 0 10px;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ka-accent);
}
.ka-chat__hero-title {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.ka-chat__hero-sub { margin: 0; color: var(--ka-text-dim); font-size: 0.95rem; line-height: 1.55; }

.ka-chat--hero {
  /* MASTER-CHAT-SAFETY — CENTERED_ENTRY: the initial Ask US box stays CENTERED
   * on the hero/video until the customer submits the first message. It is a
   * compact conversational entry, not a bottom-right dock and not a form. */
  left: 50%; right: auto; bottom: auto; top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: 86svh;
  z-index: 80;
  border-radius: var(--ka-radius-lg);
  box-shadow: 0 32px 96px rgba(0, 0, 0, 0.22);
  animation: none; /* hero state is the resting state; entrance handled by JS policy */
}
.ka-chat--hero .ka-chat__head { padding: 16px 26px 10px; }
.ka-chat--hero .ka-chat__log { min-height: 96px; }
.ka-chat--hero .ka-chat__form { padding: 14px 18px; }
.ka-chat--hero .ka-chat__form input { font-size: 1.02rem; padding: 12px 14px; }
.ka-chat--hero .ka-chat__hints { padding: 0 18px 16px; }

/* --------------------------------------------------------------------------
   CONVERSATIONAL-SHOPPING-UX — results companion mode.
   Once a decision-ready product is on stage, the assistant docks beside the
   results (fixed lower-right, taller than the compact dock) and stays there
   while the customer refines. It is the SAME #ka-chat node — conversation
   state is never moved or rebuilt, only the resting geometry changes.
   -------------------------------------------------------------------------- */
.ka-chat--results {
  left: auto; right: 24px; bottom: 24px; top: auto;
  transform: none;
  width: min(400px, calc(100vw - 48px));
  max-height: 76svh;
  z-index: 70;
  border-radius: var(--ka-radius-md);
  box-shadow: 0 24px 64px rgba(67, 57, 45, 0.18);
  animation: none;
}
.ka-chat--results .ka-chat__head { padding: 14px 20px 10px; }
.ka-chat--results .ka-chat__log { min-height: 140px; }

/* Subtle "work is happening" indicator — never raw source/API/LLM detail. */
.ka-chat__activity {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--ka-radius-pill);
  font-size: 0.78rem;
  color: var(--ka-text-dim);
  background: var(--ka-surface);
  border: 1px solid hsl(var(--ka-border));
}
.ka-chat__activity::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: var(--ka-radius-pill);
  background: var(--ka-accent);
  animation: ka-pulse 1.2s var(--ka-ease) infinite;
}
@keyframes ka-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ka-chat__activity::before { animation: none; opacity: 0.7; }
}

/* While the hero assistant is up, the product scene stays visible behind a
   restrained veil — atmosphere, not distraction. The veil never intercepts
   pointer input, so the page keeps scrolling and clicking normally. */
body.ka-ask-hero::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 75;
  pointer-events: none;
  background: rgba(250, 250, 252, 0.38);
  backdrop-filter: blur(3px) saturate(0.92);
  -webkit-backdrop-filter: blur(3px) saturate(0.92);
}
/* The nav must stay usable above the veil. */
body.ka-ask-hero .ka-nav { z-index: 90; }

/* Inline FLIP transition state (JS sets explicit geometry mid-flight). */
.ka-chat--docking { animation: none; will-change: left, top, width, height, transform; }

@media (max-width: 760px) {
  /* MASTER-CHAT-SAFETY — CENTERED_ENTRY stays centered on small viewports too:
   * a compact centered card, not a bottom sheet (the bottom sheet is the
   * HERO_CHAT docked state, reached only after the first submit). */
  .ka-chat--hero {
    width: calc(100vw - 24px);
    max-height: 78svh;
    border-radius: var(--ka-radius-md);
  }
  .ka-chat--results {
    left: 12px; right: 12px; bottom: 12px; top: auto;
    transform: none;
    width: auto;
    max-height: 60svh;
  }
  .ka-chat--hero .ka-chat__hero-intro { padding: 20px 20px 4px; }
  .ka-chat--hero .ka-chat__head { padding: 12px 20px 8px; }
  .ka-chat--hero .ka-chat__form input { font-size: 16px; /* keep iOS from zooming */ }

  /* F4: the docked assistant rests as a compact pill on small viewports.
     One DOM node — conversation state is untouched; a tap expands it. */
  .ka-chat--pill {
    width: auto;
    max-height: none;
    border-radius: var(--ka-radius-pill);
    cursor: pointer;
    overflow: hidden;
  }
  .ka-chat--pill .ka-chat__head { border-bottom: none; padding: 12px 18px; font-size: 0.9rem; }
  .ka-chat--pill .ka-chat__head-actions,
  .ka-chat--pill .ka-chat__log,
  .ka-chat--pill .ka-history,
  .ka-chat--pill .ka-chat__form,
  .ka-chat--pill .ka-chat__voice-status,
  .ka-chat--pill .ka-chat__hints,
  .ka-chat--pill .ka-chat__hero-intro { display: none; }
}

.ka-chat__form input { text-overflow: ellipsis; /* F7: never let a long placeholder bleed out */ }

@media (prefers-reduced-motion: reduce) {
  body.ka-ask-hero::after { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .ka-chat--docking { will-change: auto; }
}

/* --------------------------------------------------------------------------
   WS5 candidate history tray + comparison dialog
   -------------------------------------------------------------------------- */
.ka-chat__history-btn {
  background: none; border: 1px solid hsl(var(--ka-border)); border-radius: var(--ka-radius-pill);
  color: var(--ka-text-dim); font-size: 0.78rem; padding: 4px 10px; cursor: pointer;
  transition: border-color 0.25s var(--ka-ease), color 0.25s var(--ka-ease);
}
.ka-chat__history-btn:hover, .ka-chat__history-btn[aria-expanded="true"] { border-color: var(--ka-accent); color: var(--ka-accent); }
.ka-chat__history-btn[hidden] { display: none; }

.ka-history { border-top: 1px solid hsl(var(--ka-border)); padding: 10px 16px 12px; max-height: 30svh; overflow-y: auto; }
.ka-history[hidden] { display: none; }
.ka-history__title { margin: 0 0 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ka-text-dim); }
.ka-history__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ka-history__item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid hsl(var(--ka-border)); border-radius: var(--ka-radius-sm); background: var(--ka-surface); }
.ka-history__item--rejected { opacity: 0.72; }
.ka-history__thumb { width: 36px; height: 36px; object-fit: cover; border-radius: var(--ka-radius-sm); flex: none; }
.ka-history__meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ka-history__name { font-size: 0.84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ka-history__sub { font-size: 0.72rem; color: var(--ka-text-dim); }
.ka-history__view {
  background: none; border: 1px solid hsl(var(--ka-border)); border-radius: var(--ka-radius-pill);
  font-size: 0.74rem; padding: 3px 10px; cursor: pointer; color: var(--ka-text);
  transition: border-color 0.25s var(--ka-ease), color 0.25s var(--ka-ease);
}
.ka-history__view:hover { border-color: var(--ka-accent); color: var(--ka-accent); }
.ka-history__pick { display: inline-flex; align-items: center; }
.ka-history__pick input { width: 15px; height: 15px; accent-color: var(--ka-accent); cursor: pointer; }
.ka-history__actions { display: flex; justify-content: flex-end; padding-top: 8px; }
.ka-history__compare-btn {
  background: var(--ka-accent); color: var(--ka-accent-ink); border: none; border-radius: var(--ka-radius-pill);
  font-size: 0.78rem; font-weight: 600; padding: 6px 14px; cursor: pointer;
}
.ka-history__compare-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.ka-compare {
  position: fixed; inset: 0; z-index: 95;
  display: grid; place-items: center;
  background: rgba(17, 17, 22, 0.42);
  padding: 20px;
}
.ka-compare[hidden] { display: none; }
.ka-compare__panel {
  background: #fff; border-radius: var(--ka-radius-md); border: 1px solid hsl(var(--ka-border));
  box-shadow: 0 32px 96px rgba(0, 0, 0, 0.28);
  width: min(880px, calc(100vw - 40px)); max-height: 86svh; overflow-y: auto;
  padding: 20px 22px 22px;
}
.ka-compare__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ka-compare__head h3 { margin: 0; font-size: 1.15rem; }
.ka-compare__close { background: none; border: none; color: var(--ka-text-dim); font-size: 1.5rem; cursor: pointer; line-height: 1; }
.ka-compare__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.ka-compare__col { border: 1px solid hsl(var(--ka-border)); border-radius: var(--ka-radius-sm); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ka-compare__col img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--ka-radius-sm); }
.ka-compare__col h4 { margin: 0; font-size: 0.92rem; line-height: 1.3; }
.ka-compare__col dl { margin: 0; display: grid; gap: 4px; font-size: 0.8rem; }
.ka-compare__col dt { color: var(--ka-text-dim); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ka-compare__col dd { margin: 0 0 4px; }

@media (max-width: 760px) {
  .ka-compare__panel { padding: 14px 16px 16px; }
  .ka-compare__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* --------------------------------------------------------------------------
   Generic pages / footer
   -------------------------------------------------------------------------- */
.ka-page { padding: 16vh 5vw 10vh; max-width: 1000px; margin: 0 auto; }
.ka-page__title { font-size: 2.4rem; }
.ka-empty { min-height: 60svh; display: grid; place-items: center; color: var(--ka-text-dim); }

.ka-footer { border-top: 1px solid hsl(var(--ka-border)); padding: 44px 5vw; color: var(--ka-text-dim); font-size: 0.85rem; position: relative; z-index: 5; background: var(--ka-bg); }
.ka-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; max-width: 1160px; margin: 0 auto; }
.ka-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ka-footer__logo { display: inline-flex; }
.ka-footer__logo img { display: block; height: 48px; width: auto; }
.ka-footer__col h3 { color: var(--ka-text); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 12px; }
.ka-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ka-footer__menu a { color: var(--ka-text-dim); text-decoration: none; transition: color 0.2s var(--ka-ease); }
.ka-footer__menu a:hover { color: var(--ka-accent); }

/* --------------------------------------------------------------------------
   Shop mega menu (WS17): grouped category columns + featured imagery in a
   warm ivory shell. Desktop = centered premium panel; mobile = stacked
   drawer. Same open/close contract as the legacy full-screen list.
   -------------------------------------------------------------------------- */
.ka-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(36, 28, 17, 0.34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
  padding: clamp(12px, 4vh, 48px) clamp(12px, 4vw, 56px);
}
.ka-menu__panel {
  max-width: 1180px;
  margin: 0 auto;
  background: #F5F0E7;
  border: 1px solid rgba(74, 58, 32, 0.16);
  border-radius: var(--ka-radius-lg);
  box-shadow: 0 30px 80px rgba(46, 34, 14, 0.28);
  padding: clamp(22px, 3.5vw, 44px);
}
.ka-menu__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(18px, 3vh, 32px); }
.ka-menu__eyebrow { color: var(--ka-accent); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; }
.ka-menu__close {
  border: 1px solid hsl(var(--ka-border));
  background: transparent;
  color: var(--ka-text);
  border-radius: var(--ka-radius-pill);
  width: 40px; height: 40px;
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
}
.ka-menu__close:hover { border-color: var(--ka-accent); }
.ka-menu__close:focus-visible { outline: var(--ka-focus-width) solid hsl(var(--ka-focus)); outline-offset: var(--ka-focus-offset); }

.ka-menu__body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.6fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.ka-menu__groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 26px 22px;
}
.ka-menu__group-title {
  display: inline-block;
  font-family: var(--ka-font-display);
  font-size: 1.45rem;
  line-height: 1.2;
  color: #241c11;
  text-decoration: none;
  margin-bottom: 10px;
  transition: color 0.2s var(--ka-ease);
}
.ka-menu__group-title:hover, .ka-menu__group-title:focus-visible { color: var(--ka-accent); }
.ka-menu__sub { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ka-menu__sub a {
  color: #6f6350;
  text-decoration: none;
  font-size: 0.92rem;
  transition: color 0.2s var(--ka-ease), padding-left 0.2s var(--ka-ease);
}
.ka-menu__sub a:hover, .ka-menu__sub a:focus-visible { color: var(--ka-accent); padding-left: 4px; }

.ka-menu__featured { display: grid; gap: 16px; }
.ka-menu__feature {
  position: relative;
  display: block;
  border-radius: var(--ka-radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  text-decoration: none;
  border: 1px solid rgba(74, 58, 32, 0.16);
}
.ka-menu__feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ka-ease); }
.ka-menu__feature:hover img, .ka-menu__feature:focus-visible img { transform: scale(1.04); }
.ka-menu__feature:focus-visible { outline: var(--ka-focus-width) solid hsl(var(--ka-focus)); outline-offset: var(--ka-focus-offset); }
.ka-menu__feature-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(30, 22, 10, 0.62) 100%);
}
.ka-menu__feature-caption {
  position: absolute;
  inset: auto 16px 14px;
  display: grid;
  gap: 2px;
  color: #fdf8ee;
}
.ka-menu__feature-caption strong { font-family: var(--ka-font-display); font-weight: 400; font-size: 1.3rem; }
.ka-menu__feature-cta { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: #e9cf9a; }

@media (max-width: 860px) {
  .ka-menu { padding: 0; background: #F5F0E7; }
  .ka-menu__panel {
    min-height: 100%;
    border-radius: 0;
    border: 0;
    box-shadow: none;
  }
  .ka-menu__body { grid-template-columns: 1fr; }
  .ka-menu__featured { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .ka-menu__featured { grid-template-columns: 1fr; }
  .ka-menu__groups { grid-template-columns: 1fr 1fr; }
}

/* --------------------------------------------------------------------------
   The store — owner's hero imagery as the catalog gateway
   -------------------------------------------------------------------------- */
.ka-store { padding: 10vh 5vw 12vh; max-width: 1160px; margin: 0 auto; text-align: center; }
.ka-store__panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.ka-store__panel {
  position: relative;
  border-radius: var(--ka-radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: block;
  text-decoration: none;
  border: 1px solid hsl(var(--ka-border));
}
.ka-store__panel picture, .ka-store__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ka-store__panel img { transition: transform 0.7s var(--ka-ease); }
.ka-store__panel:hover img { transform: scale(1.05); }
.ka-store__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 8, 12, 0.82) 0%, rgba(8, 8, 12, 0.12) 55%); }
.ka-store__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 22px 18px;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.ka-store__caption strong { color: #fff; font-size: 1.15rem; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.ka-store__cta {
  color: hsl(var(--ka-espresso-foreground));
  background: hsl(var(--ka-espresso));
  border-radius: var(--ka-radius-pill);
  padding: var(--ka-control-pad-y-sm) var(--ka-control-pad-x-sm);
  font-size: var(--ka-type-control-sm);
  font-weight: var(--ka-weight-medium);
}

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */
@keyframes ka-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes ka-sweep { to { transform: translateX(130%); } }
/* --------------------------------------------------------------------------
   Responsive & accessibility
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .ka-hero__title { font-size: 2.9rem; }
  .ka-stage3d { inset: var(--ka-nav-clear) 0 0; }
  .ka-chapter h2, .ka-h2 { font-size: 2.7rem; }
  .ka-page__title { font-size: 2rem; }
  .ka-store__panels { grid-template-columns: 1fr; }
  .ka-store__panel { aspect-ratio: 16 / 9; }
  .ka-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .ka-nav { padding-inline: 14px; }
  .ka-nav__brand { font-size: 0.8rem; }
  .ka-nav__logo { height: 30px; }
  /* Owner review 2026-08-10 (second pass): the top bar keeps its subtle warm
     tints — the black legibility pass is scoped to INSIDE the Ask Us box. */
  :root, .ka-hero { --ka-nav-clear: 82px; }
  /* The bar compacts by moving its variables, so every control shrinks by the
     same rule. Overriding six selectors one at a time is how their sizes came
     apart in the first place. */
  .ka-nav {
    --ka-nav-pad-x: 12px;
    --ka-nav-pad-x-sm: 9px;
    --ka-nav-gap: 4px;
    --ka-nav-gap-group: 10px;
  }
  .ka-currency select { max-width: 66px; padding-right: 22px; background-position: right 7px center; }
  .ka-footer__grid { grid-template-columns: 1fr; gap: 26px; }
}

/*
 * THE TOP BAR ON A PHONE.
 *
 * Five controls and a wordmark need about 481px of row at their ≤760px sizes,
 * and a phone has 360–430. The row does not wrap and does not scroll, so the
 * excess simply left the screen: measured at 375px, Sign in ended at x=409 and
 * the cart at x=449 — both past the right edge, both unreachable, on every
 * phone. Nothing reported it because the bar is position:fixed, so the page
 * never grew a horizontal scrollbar to give the problem away.
 *
 * Everything is kept and everything is made smaller, rather than dropping a
 * control: the cart and sign-in are not optional, and a currency the customer
 * cannot see is a price they cannot trust.
 */
@media (max-width: 430px) {
  .ka-nav {
    padding-inline: 10px;
    gap: 6px;
    --ka-nav-pad-x: 8px;
    --ka-nav-pad-x-sm: 5px;
    --ka-nav-gap: 2px;
    --ka-nav-gap-group: 6px;
    --ka-nav-font: 0.8rem;
  }
  .ka-nav__logo { height: 24px; max-width: 38vw; }
  .ka-nav__shop,
  .ka-nav__chat { letter-spacing: 0.04em; }
  /* The chevron gutter has to come out of a 46px box, and at this size the
     code loses its last letter before the chevron loses its room: measured at
     375px, "USD" rendered as "US". The gutter tightens and the box gains six
     pixels — a currency the customer cannot read in full is a price they
     cannot trust. */
  /* min-width, not max-width: the select's own intrinsic width is what was
     squeezing the code, so raising the cap alone changed nothing. */
  .ka-currency select {
    min-width: 54px;
    max-width: 58px;
    padding: 0 14px 0 6px;
    background-position: right 4px center;
    background-size: 7px 5px;
  }
  .ka-nav__cart { min-width: var(--ka-nav-control-h); }
  /* Measured at 375px signed in: the greeting ran the cart to x=389 on a
     375px bar. Capped, it truncates and every control stays on screen. */
  .ka-account__trigger { max-width: 72px; }
}

/*
 * The top bar is touched, too.
 *
 * The project chips were given a 44px box for coarse pointers; the nav was not,
 * and it is the one row present on every screen. Measured at 390px: Shop 34px,
 * Ask Us 34px, Sign in 38px, the cart 28px. Only the box grows — the type,
 * the letterspacing and the compaction steps above are unchanged.
 */
/* The research entry is touch-sized only where it is actually drawn.
   Listing it with the others below would re-show it on a phone: this block
   sets display:inline-flex, it appears later in the file than the
   max-width:560px rule that hides it, and at equal specificity the later
   declaration wins. Measured at 375px with it in that list — Sign in and the
   cart were both pushed off the right edge, silently, because the bar is
   position:fixed and the page never grows a scrollbar to show it. */
@media (pointer: coarse) {
  /* One variable grows the whole row to a thumb-sized target, so nothing can
     be left behind at 36px the way Research once was. */
  .ka-nav { --ka-nav-control-h: 44px; }
  /* The wordmark is a link home, so it is a target like the rest. Its IMAGE
     keeps its own height; the link around it grows to meet the thumb. */
  .ka-nav__brand { min-height: 44px; align-items: center; }
}

/* The narrow end of the same problem: 360px is still a common phone, and the
   ≤430 step leaves it about 15px short. */
@media (max-width: 380px) {
  .ka-nav {
    padding-inline: 8px;
    --ka-nav-pad-x: 6px;
    --ka-nav-pad-x-sm: 4px;
  }
  .ka-nav__logo { height: 22px; max-width: 34vw; }
  /* Same reasoning as the ≤430 step, one notch tighter. It has to move
     min-width, not max-width: min wins over max in CSS, so a smaller cap here
     would simply be a declaration that never applies. */
  .ka-currency select { min-width: 52px; max-width: 56px; padding: 0 12px 0 5px; background-position: right 3px center; }
  .ka-hero__title { font-size: 2.05rem; }
  .ka-hero__copy { left: 6vw; right: 6vw; bottom: 20vh; max-width: none; }
  .ka-hero__buyrow {
    left: 6vw; right: 6vw; bottom: 4vh;
    justify-content: space-between;
    padding: 6px 6px 6px 18px;
    gap: 10px;
  }
  .ka-hero__was { display: none; }
  .ka-hero__price { white-space: nowrap; font-size: 1.15rem; }
  .ka-hero__buyrow .ka-btn--primary { white-space: nowrap; padding: 11px 20px; font-size: 0.88rem; }
  .ka-stage3d { inset: var(--ka-nav-clear) 0 0; }
  .ka-stage3d__frame { width: 100vw; }
  .ka-stage3d__frame img { object-fit: cover; }
  .ka-hero::after {
    height: 58vh;
    background: linear-gradient(to top,
      rgba(251, 250, 248, 0.98) 0%,
      rgba(251, 250, 248, 0.93) 34%,
      rgba(251, 250, 248, 0.62) 62%,
      transparent 100%);
  }
  .ka-chapter h2, .ka-h2 { font-size: 2.15rem; }
  .ka-page__title { font-size: 1.75rem; }
  .ka-buybar__name { font-size: 0.82rem; }
  .ka-buybar__ai { display: none; }
	.ka-clip-status { width: 100%; min-width: 0; text-align: center; }
  .ka-stage3d__frame { width: min(80vw, 300px); }
  .ka-stage3d__refl { display: none; }
	.ka-chat__form { gap: 6px; }
	.ka-chat__send { padding: 10px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js-ka-reveal, .ka-hero__kicker, .ka-hero__title, .ka-hero__buyrow, .ka-stage3d { opacity: 1; transform: none; }
	.ka-motion-canvas, .ka-motion-video { transition: none; }
}

/* ------------------------------------------------------- Ask project (legacy)
   Phase 3F-B. The legacy dock renders the project conversation into the chat
   log it already has, so it is announced by the existing aria-live region and
   needs only line styling — no second panel and no second state machine. */
.ka-chat__ask {
	margin: 0.35rem 0;
	font-size: 0.85rem;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.ka-chat__ask--error { color: var(--ka-accent); }
.ka-chat__ask--note { opacity: 0.8; font-style: italic; }

.ka-chat__ask-market {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	margin: 0.4rem 0;
}

.ka-chat__ask-market .ka-ask__market-select {
	flex: 1 1 9rem;
	/* Same reason as the immersive selector: the widest country name would
	   otherwise set the control's width and push it past the dock. */
	min-width: 0;
	max-width: 100%;
	padding: 0.4rem 0.5rem;
	font: inherit;
	font-size: 0.85rem;
}

@media (max-width: 600px) {
	.ka-chat__ask-market { flex-direction: column; align-items: stretch; }
	.ka-chat__ask-market .ka-ask__market-select { width: 100%; }
}

/* ---------------------------------------------------------------------------
 * Embedded authentication panel (Phase A)
 * ------------------------------------------------------------------------- */
.ka-auth {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(17, 17, 22, 0.42);
	backdrop-filter: blur(2px);
}
.ka-auth[hidden] { display: none; }

.ka-auth__panel {
	width: 100%;
	max-width: 26rem;
	background: var(--ka-ivory);
	color: var(--ka-ink);
	border-radius: var(--ka-radius-sm);
	box-shadow: 0 24px 60px rgba(17, 17, 22, 0.28);
	overflow: hidden;
}

.ka-auth__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.25rem 0.75rem;
}
.ka-auth__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.3;
}
.ka-auth__close {
	border: 0;
	background: transparent;
	color: var(--ka-ink-dim, #5c5347);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 0.25rem;
}

.ka-auth__body { padding: 0.25rem 1.25rem 1.25rem; }
.ka-auth__lead {
	margin: 0 0 1rem;
	color: var(--ka-ink-dim, #5c5347);
	font-size: 0.92rem;
	line-height: 1.45;
}

.ka-auth__field {
	display: block;
	margin-bottom: 0.85rem;
}
.ka-auth__field span {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.82rem;
	color: var(--ka-ink-dim, #5c5347);
}
.ka-auth__field input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.65rem 0.7rem;
	font: inherit;
	font-size: 0.95rem;
	color: var(--ka-ink);
	background: #fff;
	border: 1px solid var(--ka-line-warm, rgba(67, 57, 45, 0.2));
	border-radius: var(--ka-radius-sm);
}
.ka-auth__field input:focus {
	outline: none;
	border-color: var(--ka-accent);
	box-shadow: 0 0 0 3px var(--ka-gold-20);
}

.ka-auth__submit {
	width: 100%;
	margin-top: 0.25rem;
	padding: var(--ka-control-pad-y) var(--ka-control-pad-x);
	min-height: var(--ka-tap-min);
	font: inherit;
	font-family: var(--ka-font-body);
	font-size: var(--ka-type-control);
	font-weight: var(--ka-weight-medium);
	color: hsl(var(--ka-espresso-foreground));
	background: hsl(var(--ka-espresso));
	border: 0;
	border-radius: var(--ka-radius-pill);
	cursor: pointer;
}
.ka-auth__submit:hover { background: hsl(var(--ka-espresso) / 0.88); }

.ka-auth__toggle {
	display: block;
	width: 100%;
	margin-top: 0.75rem;
	padding: 0.4rem;
	font: inherit;
	font-size: 0.85rem;
	color: var(--ka-ink-dim, #5c5347);
	background: transparent;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
}
.ka-auth__toggle:hover { color: var(--ka-ink); }

.ka-auth__error {
	margin: 0;
	padding: 0.75rem 1.25rem;
	background: var(--ka-gold-12);
	color: #7a3b2e;
	font-size: 0.88rem;
	line-height: 1.4;
}
.ka-auth__error[hidden] { display: none; }

/* ------------------------------------------------------------------ */
/* Project basket (Phase D) — grouped multi-product workspace.         */
/* ------------------------------------------------------------------ */
.ka-project-basket {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 60;
	width: min(360px, calc(100vw - 2rem));
	max-height: 70vh;
	overflow: auto;
	padding: 1rem 1.25rem;
	background: var(--ka-ivory);
	color: var(--ka-ink);
	border: 1px solid rgba(40, 36, 31, 0.12);
	border-radius: var(--ka-radius-md);
	box-shadow: 0 12px 32px rgba(40, 36, 31, 0.18);
}
.ka-project-basket[hidden] { display: none; }

.ka-project-basket__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}
.ka-project-basket__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.ka-project-basket__add-all {
	padding: 0.5rem 0.9rem;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	color: hsl(var(--ka-espresso-foreground));
	background: hsl(var(--ka-espresso));
	border: 0;
	border-radius: var(--ka-radius-sm);
	cursor: pointer;
}
.ka-project-basket__add-all:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.ka-project-basket__add-all:not(:disabled):hover { filter: brightness(1.04); }

.ka-project-basket__items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ka-project-basket__item {
	display: flex;
	/* Centred, not baseline: a 40px thumbnail sits beside the text now, and
	   baseline alignment would hang it off the first line. */
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(40, 36, 31, 0.08);
}
.ka-project-basket__item:last-child { border-bottom: 0; }
.ka-project-basket__item-thumb {
	flex: none;
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: var(--ka-radius-xs);
	background: rgba(40, 36, 31, 0.06);
}
.ka-project-basket__item-thumb.is-empty { display: inline-block; }
.ka-project-basket__item-title {
	flex: 1 1 auto;
	font-size: 0.9rem;
	line-height: 1.35;
}
.ka-project-basket__item-meta {
	flex: none;
	font-size: 0.85rem;
	color: var(--ka-ink-dim, #5c5347);
	white-space: nowrap;
}
.ka-project-basket__status {
	margin: 0.75rem 0 0;
	font-size: 0.85rem;
	color: var(--ka-ink-dim, #5c5347);
	line-height: 1.4;
}

/* ------------------------------------------------------------------ */
/* Checkout reassurance (Phase E) — truthful handoff note.             */
/* ------------------------------------------------------------------ */
.ka-checkout-reassurance {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 60;
	width: min(360px, calc(100vw - 2rem));
	padding: 0.9rem 1.1rem;
	background: var(--ka-ivory);
	color: var(--ka-ink);
	border: 1px solid rgba(40, 36, 31, 0.12);
	border-radius: var(--ka-radius-sm);
	box-shadow: 0 10px 28px rgba(40, 36, 31, 0.16);
}
.ka-checkout-reassurance[hidden] { display: none; }
.ka-checkout-reassurance__text {
	margin: 0 0 0.5rem;
	font-size: 0.88rem;
	line-height: 1.45;
}
.ka-checkout-reassurance__link {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ka-accent);
	text-decoration: none;
}
.ka-checkout-reassurance__link:hover { text-decoration: underline; }

/* ============================================================== cart drawer
 * Reviewing the cart is a glance, not a departure. The drawer slides over the
 * page and the workspace stays behind it, so a customer mid-conversation can
 * check what they picked without losing the film, the project or the
 * assistant. Checkout is a separate, deliberate click.
 */
.ka-drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
}

.ka-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(28, 25, 21, 0.38);
	opacity: 0;
	transition: opacity 240ms var(--ka-ease, ease);
}
.ka-drawer.is-open .ka-drawer__scrim { opacity: 1; }

.ka-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(26rem, 100vw);
	display: flex;
	flex-direction: column;
	background: var(--ka-paper, #faf7f2);
	box-shadow: -18px 0 50px rgba(40, 36, 31, 0.18);
	transform: translateX(100%);
	transition: transform 260ms var(--ka-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.ka-drawer.is-open .ka-drawer__panel { transform: translateX(0); }

/* A customer who asked for less motion gets the drawer without the slide. */
@media (prefers-reduced-motion: reduce) {
	.ka-drawer__panel { transition: none; }
	.ka-drawer__scrim { transition: none; }
}

.ka-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem 1.2rem 0.8rem;
	border-bottom: 1px solid rgba(40, 36, 31, 0.1);
}
.ka-drawer__title { margin: 0; font-size: 1rem; font-weight: 500; }
.ka-drawer__close {
	border: 0;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: var(--ka-ink);
	padding: 0 0.2rem;
}
.ka-drawer__close:focus-visible { outline: var(--ka-focus-width) solid hsl(var(--ka-focus)); outline-offset: var(--ka-focus-offset); }

.ka-drawer__items {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0.6rem 1.2rem;
}
.ka-drawer.is-busy .ka-drawer__items { opacity: 0.55; pointer-events: none; }

.ka-drawer__item {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 0.75rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid rgba(40, 36, 31, 0.08);
}
.ka-drawer__item:last-child { border-bottom: 0; }

.ka-drawer__thumb {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--ka-radius-xs);
	background: rgba(40, 36, 31, 0.06);
	display: block;
}

.ka-drawer__meta { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.ka-drawer__name {
	font-size: 0.88rem;
	line-height: 1.3;
	color: var(--ka-ink);
	text-decoration: none;
}
.ka-drawer__name:hover { text-decoration: underline; }
.ka-drawer__price { font-size: 0.85rem; }

.ka-drawer__qty { display: inline-flex; align-items: center; gap: 0.5rem; }
.ka-drawer__step {
	width: 1.6rem;
	height: 1.6rem;
	border: 1px solid rgba(40, 36, 31, 0.22);
	border-radius: var(--ka-radius-xs);
	background: none;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	color: var(--ka-ink);
}
.ka-drawer__step:hover { background: rgba(40, 36, 31, 0.06); }
.ka-drawer__count { font-size: 0.85rem; min-width: 1rem; text-align: center; }

.ka-drawer__remove {
	align-self: flex-start;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 0.76rem;
	color: var(--ka-ink);
	opacity: 0.55;
	cursor: pointer;
	text-decoration: underline;
}
.ka-drawer__remove:hover { opacity: 1; }

.ka-drawer__empty { margin: 1.5rem 0; font-size: 0.86rem; opacity: 0.7; line-height: 1.5; }

.ka-drawer__foot {
	flex: none;
	padding: 1rem 1.2rem calc(1rem + env(safe-area-inset-bottom));
	border-top: 1px solid rgba(40, 36, 31, 0.1);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.ka-drawer__total { margin: 0 0 0.2rem; font-size: 0.95rem; }

/* The only route to checkout, and it reads as the commitment it is. */
.ka-drawer__checkout {
	display: block;
	text-align: center;
	padding: 0.75rem 1rem;
	border-radius: var(--ka-radius-pill);
	background: hsl(var(--ka-espresso));
	color: var(--ka-accent-ink, #fff);
	text-decoration: none;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
}
.ka-drawer__checkout:hover { filter: brightness(0.95); }
.ka-drawer.is-empty .ka-drawer__checkout { display: none; }

.ka-drawer__keep {
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.8rem;
	opacity: 0.65;
	cursor: pointer;
	padding: 0.2rem;
	color: var(--ka-ink);
}
.ka-drawer__keep:hover { opacity: 1; }

/* The page behind must not scroll while the drawer owns the screen. */
body.ka-drawer-open { overflow: hidden; }

/* The last thing before the AliDropship checkout: what you are completing.
   The checkout document cannot carry project context, so this does. */
.ka-drawer__continuity {
	margin: 0 0 0.6rem;
	padding: 0.7rem 0.8rem;
	border-radius: var(--ka-radius-xs);
	background: var(--ka-gold-08);
	border: 1px solid var(--ka-gold-35);
}
.ka-drawer__continuity-title { margin: 0 0 0.2rem; font-size: 0.88rem; }
.ka-drawer__continuity-facts { margin: 0; font-size: 0.76rem; opacity: 0.75; }
.ka-drawer__continuity-warn { margin: 0.3rem 0 0; font-size: 0.78rem; color: #8a2f2f; }

/* --------------------------------------------------------------- auth: Google
 * The alternative to email and password. It sits below the form and reads as
 * the second option, not the first: a plain bordered surface against the
 * accent-filled submit above it, so the panel still has one obvious primary
 * action while making the shorter path easy to find.
 */
.ka-auth__alt {
	margin-top: 1rem;
}

/* A rule with the word set into it, rather than a line and a caption. */
.ka-auth__alt-rule {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.75rem;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ka-ink-dim, #5c5347);
	opacity: 0.65;
}
.ka-auth__alt-rule::before,
.ka-auth__alt-rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(40, 36, 31, 0.14);
}

.ka-auth__google {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100%;
	min-height: 44px;
	padding: 0.65rem 1rem;
	font: inherit;
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--ka-ink);
	text-decoration: none;
	background: #fff;
	border: 1px solid rgba(40, 36, 31, 0.18);
	border-radius: var(--ka-radius-sm);
	transition: border-color 0.25s var(--ka-ease), background 0.25s var(--ka-ease);
}
.ka-auth__google:hover { border-color: rgba(40, 36, 31, 0.38); background: #fcfbf9; }
.ka-auth__google:focus-visible { outline: var(--ka-focus-width) solid hsl(var(--ka-focus)); outline-offset: var(--ka-focus-offset); }
.ka-auth__google-mark { display: inline-flex; flex: none; }

/* ------------------------------------------------------------- contact form
 * The same field language as the auth panel, at page width. Nothing here is a
 * spam control: every one of those lives on the server, because a check the
 * browser performs is a check a bot declines to run.
 */
.ka-contact { max-width: 34rem; margin: 2rem 0 0; }

.ka-contact__notice {
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	font-size: 0.92rem;
	background: rgba(40, 36, 31, 0.05);
	border-left: 3px solid rgba(40, 36, 31, 0.25);
	border-radius: var(--ka-radius-xs);
}
.ka-contact__notice.is-good {
	background: rgba(47, 111, 79, 0.08);
	border-left-color: #2f6f4f;
}

.ka-contact__lead { margin: 0 0 1.25rem; color: var(--ka-ink-dim, #5c5347); }

.ka-contact__field { display: block; margin-bottom: 1rem; }
.ka-contact__field > span {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.85rem;
	color: var(--ka-ink-dim, #5c5347);
}
.ka-contact__field input,
.ka-contact__field textarea {
	width: 100%;
	min-height: 44px;
	padding: 0.6rem 0.75rem;
	font: inherit;
	color: var(--ka-ink);
	background: #fff;
	border: 1px solid rgba(40, 36, 31, 0.18);
	border-radius: var(--ka-radius-sm);
}
.ka-contact__field textarea { min-height: 8rem; resize: vertical; }
.ka-contact__field input:focus-visible,
.ka-contact__field textarea:focus-visible {
	outline: var(--ka-focus-width) solid hsl(var(--ka-focus)); outline-offset: var(--ka-focus-offset);
}

/*
 * THE HONEYPOT.
 *
 * Moved out of sight rather than removed from the layout: display:none and the
 * hidden attribute are the two things a bot checks before deciding whether a
 * field is bait. It is also out of the tab order and aria-hidden in the markup,
 * so nobody using a keyboard or a screen reader ever reaches it.
 */
.ka-contact__hp {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ka-contact__captcha { margin-bottom: 1rem; }

.ka-contact__submit {
	min-height: 44px;
	padding: 0.7rem 1.5rem;
	font: inherit;
	font-weight: 500;
	color: hsl(var(--ka-espresso-foreground));
	background: hsl(var(--ka-espresso));
	border: 0;
	border-radius: var(--ka-radius-sm);
	cursor: pointer;
}
.ka-contact__submit:hover { filter: brightness(1.04); }
.ka-contact__submit:focus-visible { outline: var(--ka-focus-width) solid hsl(var(--ka-focus)); outline-offset: var(--ka-focus-offset); }