/* =========================================================================
   KimBeauty — design system
   =========================================================================

   One file, split into: tokens, base, typography, components.

   The rule that holds it all together: the content makes the design, not the
   chrome. Separation comes from white space and 1px rules, not from boxes,
   shadows and gradients.

   Do not add new colours here. If an element needs a colour, it needs a token —
   otherwise the palette falls apart within three months.
   ========================================================================= */

/* ---------- Tokens ----------------------------------------------------- */

:root {
  /* Surfaces. The page is a warm ivory, never pure white: pure white makes the
     product photographs look cold and pushes every card forward. */
  --kb-canvas: #fefaf6;
  --kb-surface: #ffffff;
  --kb-surface-sunken: #f7f1ea;
  --kb-blush: #f7e7e4;

  /* Text. A warm black, not #000: on ivory, pure black vibrates. */
  --kb-ink: #2b211e;
  --kb-ink-muted: #6b5d57;
  --kb-ink-faint: #9a8b83;
  --kb-hairline: #eadfd7;

  /* Accents. Clay pink is the only saturated colour on a screen. */
  --kb-primary: #c2565b;
  --kb-primary-press: #a4464b;
  --kb-primary-tint: #f7e7e4;
  --kb-accent: #c79a57;
  --kb-success: #5c7f6b;
  --kb-success-tint: #eaf1ec;
  --kb-warn: #b4713c;
  --kb-warn-tint: #f9ede3;

  /* Shape */
  --kb-radius-sm: 8px;
  --kb-radius: 12px;
  --kb-radius-lg: 20px;
  --kb-radius-pill: 999px;

  /* Elevation. Two steps, that is all. */
  --kb-shadow: 0 1px 2px rgba(43, 33, 30, 0.04);
  --kb-shadow-lift: 0 6px 20px rgba(43, 33, 30, 0.08);

  /* Rhythm */
  --kb-space-xs: 4px;
  --kb-space-sm: 8px;
  --kb-space-md: 16px;
  --kb-space-lg: 24px;
  --kb-space-xl: 40px;
  --kb-space-2xl: 64px;
  --kb-space-3xl: 96px;

  --kb-container: 1200px;
  --kb-measure: 680px;

  --kb-font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --kb-font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --kb-header-height: 72px;

  color-scheme: light;
}

/* Dark mode keeps the warmth: the same relationships, shifted downwards. The
   pink lightens, or it loses its legibility against a dark ground. */
@media (prefers-color-scheme: dark) {
  :root:not([data-kb-theme="light"]) {
    --kb-canvas: #1a1513;
    --kb-surface: #241d1a;
    --kb-surface-sunken: #2d2521;
    --kb-blush: #332624;

    --kb-ink: #f4ece6;
    --kb-ink-muted: #b5a49b;
    --kb-ink-faint: #8a7a71;
    --kb-hairline: #3a2f2a;

    --kb-primary: #e08a8e;
    --kb-primary-press: #ee9fa3;
    --kb-primary-tint: #3a2725;
    --kb-accent: #dcb679;
    --kb-success: #8db99e;
    --kb-success-tint: #24302a;
    --kb-warn: #d59a68;
    --kb-warn-tint: #33261d;

    --kb-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --kb-shadow-lift: 0 6px 20px rgba(0, 0, 0, 0.4);

    color-scheme: dark;
  }
}

/* ---------- Base ------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--kb-canvas);
  color: var(--kb-ink);
  font-family: var(--kb-font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

/* The focus ring is never removed. Half the audience of a commerce site
   navigates by keyboard at some point. */
:focus-visible {
  outline: 2px solid var(--kb-primary);
  outline-offset: 2px;
  border-radius: var(--kb-radius-sm);
}

::selection {
  background: var(--kb-primary-tint);
  color: var(--kb-ink);
}

a {
  color: var(--kb-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ---------- Typography -------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--kb-font-serif);
  font-weight: 400;
  color: var(--kb-ink);
  margin: 0;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  line-height: 1.08;
}

h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.5rem);
  line-height: 1.12;
}

h3 {
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 500;
}

h4 {
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 500;
}

p {
  margin: 0 0 1em;
}

.kb-eyebrow {
  font-family: var(--kb-font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kb-primary);
  margin: 0 0 var(--kb-space-sm);
}

.kb-eyebrow--gold {
  color: var(--kb-accent);
}

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

.kb-deck {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--kb-ink-muted);
  margin: 0;
  max-width: 52ch;
}

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

.kb-meta {
  font-size: 0.875rem;
  color: var(--kb-ink-muted);
}

.kb-fine {
  font-size: 0.75rem;
  color: var(--kb-ink-faint);
  line-height: 1.5;
}

/* Visually hidden, but read out by screen readers. */
.kb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The skip-navigation link — visible only on focus. */
.kb-skip {
  position: absolute;
  left: var(--kb-space-md);
  top: -60px;
  z-index: 100;
  background: var(--kb-surface);
  color: var(--kb-ink);
  padding: var(--kb-space-sm) var(--kb-space-md);
  border-radius: var(--kb-radius-sm);
  box-shadow: var(--kb-shadow-lift);
  transition: top 0.15s ease;
}

.kb-skip:focus {
  top: var(--kb-space-md);
}

/* ---------- Layout ------------------------------------------------------ */

.kb-container {
  width: 100%;
  max-width: var(--kb-container);
  margin: 0 auto;
  padding: 0 var(--kb-space-lg);
}

.kb-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.kb-main {
  flex: 1;
  padding-bottom: var(--kb-space-3xl);
}

.kb-section {
  margin-top: var(--kb-space-2xl);
}

.kb-section--tight {
  margin-top: var(--kb-space-xl);
}

/* A section head: serif title on the left, a quiet link on the right, a 1px rule
   underneath. Repeated identically down the whole home page. */
.kb-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kb-space-md);
  padding-bottom: var(--kb-space-md);
  border-bottom: 1px solid var(--kb-hairline);
  margin-bottom: var(--kb-space-lg);
}

.kb-section-head h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.kb-section-head__link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--kb-ink-muted);
  white-space: nowrap;
}

.kb-section-head__link:hover {
  color: var(--kb-primary);
}

.kb-band {
  background: var(--kb-blush);
  padding: var(--kb-space-2xl) 0;
  margin-top: var(--kb-space-2xl);
}

/* ---------- Header ---------------------------------------------------- */

.kb-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--kb-canvas) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--kb-hairline);
}

.kb-header__inner {
  display: flex;
  align-items: center;
  gap: var(--kb-space-lg);
  min-height: var(--kb-header-height);
}

.kb-wordmark {
  font-family: var(--kb-font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--kb-ink);
  white-space: nowrap;
  text-decoration: none;
}

.kb-wordmark:hover {
  text-decoration: none;
}

.kb-wordmark em {
  font-style: normal;
  color: var(--kb-primary);
}

.kb-header__nav {
  display: flex;
  align-items: center;
  gap: var(--kb-space-lg);
  margin-left: auto;
}

.kb-header__nav a {
  color: var(--kb-ink);
  font-size: 0.9375rem;
  font-weight: 500;
}

.kb-header__nav a:hover,
.kb-header__nav a.active {
  color: var(--kb-primary);
  text-decoration: none;
}

.kb-header__toggle {
  display: none;
  background: none;
  border: 0;
  padding: var(--kb-space-sm);
  cursor: pointer;
  color: var(--kb-ink);
  border-radius: var(--kb-radius-sm);
}

/* The category bar, below the header. It scrolls on a phone, with no visible
   scrollbar. */
.kb-categorybar {
  border-bottom: 1px solid var(--kb-hairline);
  background: var(--kb-canvas);
}

.kb-categorybar__inner {
  display: flex;
  gap: var(--kb-space-lg);
  overflow-x: auto;
  scrollbar-width: none;
  padding: var(--kb-space-sm) 0;
}

.kb-categorybar__inner::-webkit-scrollbar {
  display: none;
}

.kb-categorybar a {
  color: var(--kb-ink-muted);
  font-size: 0.9375rem;
  white-space: nowrap;
  padding: var(--kb-space-xs) 0;
}

.kb-categorybar a:hover,
.kb-categorybar a.active {
  color: var(--kb-primary);
  text-decoration: none;
}

/* ---------- Search ----------------------------------------------------- */

.kb-search {
  position: relative;
  flex: 1;
  max-width: 520px;
}

.kb-search__input {
  width: 100%;
  height: 44px;
  padding: 0 var(--kb-space-xl) 0 44px;
  border: 1px solid var(--kb-hairline);
  border-radius: var(--kb-radius-pill);
  background: var(--kb-surface);
  color: var(--kb-ink);
  font-size: 0.9375rem;
}

.kb-search__input::placeholder {
  color: var(--kb-ink-faint);
}

.kb-search__icon {
  position: absolute;
  left: var(--kb-space-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--kb-ink-faint);
  pointer-events: none;
}

.kb-search__clear {
  position: absolute;
  right: var(--kb-space-sm);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--kb-ink-muted);
  cursor: pointer;
  padding: var(--kb-space-xs);
  border-radius: var(--kb-radius-pill);
}

.kb-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--kb-surface);
  border: 1px solid var(--kb-hairline);
  border-radius: var(--kb-radius);
  box-shadow: var(--kb-shadow-lift);
  overflow: hidden;
  z-index: 50;
}

.kb-suggestions__item {
  display: flex;
  align-items: baseline;
  gap: var(--kb-space-sm);
  width: 100%;
  padding: var(--kb-space-sm) var(--kb-space-md);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--kb-hairline);
  text-align: left;
  cursor: pointer;
  color: var(--kb-ink);
}

.kb-suggestions__item:last-child {
  border-bottom: 0;
}

.kb-suggestions__item:hover,
.kb-suggestions__item:focus-visible {
  background: var(--kb-surface-sunken);
  text-decoration: none;
}

.kb-suggestions__sub {
  font-size: 0.8125rem;
  color: var(--kb-ink-muted);
  margin-left: auto;
  white-space: nowrap;
}

/* ---------- Buttons ----------------------------------------------------- */

.kb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kb-space-sm);
  min-height: 44px;
  padding: 0 var(--kb-space-lg);
  border-radius: var(--kb-radius-pill);
  border: 1px solid transparent;
  background: var(--kb-primary);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.kb-btn:hover {
  background: var(--kb-primary-press);
  color: #fff;
  text-decoration: none;
}

.kb-btn--outline {
  background: transparent;
  border-color: var(--kb-primary);
  color: var(--kb-primary);
}

.kb-btn--outline:hover {
  background: var(--kb-primary-tint);
  color: var(--kb-primary-press);
}

.kb-btn--quiet {
  background: transparent;
  border-color: var(--kb-hairline);
  color: var(--kb-ink);
}

.kb-btn--quiet:hover {
  background: var(--kb-surface-sunken);
  color: var(--kb-ink);
}

.kb-btn--text {
  background: none;
  border: 0;
  min-height: 0;
  padding: 0;
  color: var(--kb-ink-muted);
  font-weight: 500;
}

.kb-btn--text:hover {
  background: none;
  color: var(--kb-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kb-btn--sm {
  min-height: 36px;
  padding: 0 var(--kb-space-md);
  font-size: 0.875rem;
}

.kb-btn--block {
  width: 100%;
}

.kb-btn:disabled,
.kb-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* The heart button on a product card. */
.kb-heart {
  position: absolute;
  top: var(--kb-space-sm);
  right: var(--kb-space-sm);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--kb-radius-pill);
  border: 1px solid var(--kb-hairline);
  background: color-mix(in srgb, var(--kb-surface) 88%, transparent);
  color: var(--kb-ink-muted);
  cursor: pointer;
  z-index: 2;
}

.kb-heart:hover,
.kb-heart[aria-pressed="true"] {
  color: var(--kb-primary);
  border-color: var(--kb-primary);
}

/* ---------- Chips ------------------------------------------------------- */

.kb-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--kb-space-xs);
  padding: 3px var(--kb-space-sm);
  border-radius: var(--kb-radius-sm);
  background: var(--kb-surface-sunken);
  color: var(--kb-ink-muted);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.kb-chip--good {
  background: var(--kb-success-tint);
  color: var(--kb-success);
}

.kb-chip--warn {
  background: var(--kb-warn-tint);
  color: var(--kb-warn);
}

/* The "AI" chip: straw yellow behind golden-brown text. It reads as a marginal
   note, not as a warning — the field is filled in, just not by a human. */
.kb-chip--ai {
  background: #f7efd2;
  color: #78590b;
  letter-spacing: 0.06em;
  font-size: 0.625rem;
  font-weight: 700;
}

.kb-chip--filter {
  background: var(--kb-blush);
  color: var(--kb-ink);
  padding: var(--kb-space-xs) var(--kb-space-sm);
  border: 0;
  cursor: pointer;
  font-weight: 500;
}

.kb-chip--filter:hover {
  background: color-mix(in srgb, var(--kb-primary) 18%, var(--kb-blush));
}

.kb-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space-sm);
  align-items: center;
}

/* ---------- Cards and grids -------------------------------------------- */

.kb-card {
  background: var(--kb-surface);
  border-radius: var(--kb-radius);
  box-shadow: var(--kb-shadow);
}

.kb-card--pad {
  padding: var(--kb-space-lg);
}

.kb-grid {
  display: grid;
  gap: var(--kb-space-lg);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kb-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kb-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The list view. The same cards, laid on their side: the plate becomes a
   thumbnail on the left, and the text gains the width long product names need —
   useful when comparing eight serums with nearly identical names. */
.kb-grid--list {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kb-space-md);
}

.kb-grid--list .kb-product {
  flex-direction: row;
}

.kb-grid--list .kb-product__plate {
  flex: 0 0 148px;
  width: 148px;
  aspect-ratio: 1;
  padding: var(--kb-space-md);
}

.kb-grid--list .kb-product__body {
  justify-content: center;
}

.kb-grid--list .kb-product__name {
  font-size: 1.25rem;
  -webkit-line-clamp: 1;
}

.kb-grid--list .kb-product__price {
  margin-top: var(--kb-space-sm);
}

@media (max-width: 560px) {
  .kb-grid--list .kb-product__plate {
    flex: 0 0 104px;
    width: 104px;
  }

  .kb-grid--list .kb-product__name {
    font-size: 1rem;
  }
}

/* The product card. No border — the lift on hover is the only effect. */
.kb-product {
  display: flex;
  flex-direction: column;
  background: var(--kb-surface);
  border-radius: var(--kb-radius);
  overflow: hidden;
  box-shadow: var(--kb-shadow);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
  height: 100%;
}

.kb-product:hover {
  box-shadow: var(--kb-shadow-lift);
  transform: translateY(-2px);
}

.kb-product__plate {
  position: relative;
  aspect-ratio: 1;
  background: var(--kb-blush);
  display: grid;
  place-items: center;
  padding: var(--kb-space-lg);
}

.kb-product__plate img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.kb-product__body {
  padding: var(--kb-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--kb-space-xs);
  flex: 1;
}

.kb-product__brand {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kb-ink-muted);
}

.kb-product__name {
  font-family: var(--kb-font-serif);
  font-size: 1.125rem;
  line-height: 1.25;
  color: var(--kb-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kb-product a.kb-product__name:hover {
  color: var(--kb-primary);
  text-decoration: none;
}

.kb-product__price {
  margin-top: auto;
  padding-top: var(--kb-space-sm);
}

/* The price. The figure is the visual anchor of the entire site, so it is the
   one sans-serif element allowed to compete with the headings. */
.kb-price {
  display: flex;
  align-items: baseline;
  gap: var(--kb-space-sm);
  flex-wrap: wrap;
}

.kb-price__prefix {
  font-size: 0.8125rem;
  color: var(--kb-ink-muted);
}

.kb-price__value {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--kb-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.kb-price__value--lg {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
}

.kb-price__was {
  font-size: 0.875rem;
  color: var(--kb-ink-faint);
  text-decoration: line-through;
}

/* ---------- Stars ------------------------------------------------------- */

.kb-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--kb-accent);
  line-height: 1;
}

.kb-stars svg {
  width: 15px;
  height: 15px;
  display: block;
}

.kb-stars--lg svg {
  width: 20px;
  height: 20px;
}

.kb-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--kb-space-sm);
  font-size: 0.875rem;
  color: var(--kb-ink-muted);
}

.kb-rating__value {
  font-weight: 700;
  color: var(--kb-ink);
  font-variant-numeric: tabular-nums;
}

/* The star distribution: thin gold bars on a blush track. */
.kb-bars {
  display: grid;
  gap: var(--kb-space-sm);
  margin-top: var(--kb-space-md);
}

.kb-bars__row {
  display: grid;
  grid-template-columns: 3.5rem 1fr 2.5rem;
  align-items: center;
  gap: var(--kb-space-sm);
  font-size: 0.8125rem;
  color: var(--kb-ink-muted);
}

.kb-bars__track {
  height: 6px;
  border-radius: var(--kb-radius-pill);
  background: var(--kb-blush);
  overflow: hidden;
}

.kb-bars__fill {
  height: 100%;
  background: var(--kb-accent);
  border-radius: var(--kb-radius-pill);
}

/* ---------- The comparison table (the hero component) ------------------ */

.kb-compare {
  border-top: 1px solid var(--kb-hairline);
}

.kb-compare__row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--kb-space-md);
  padding: var(--kb-space-md);
  border-bottom: 1px solid var(--kb-hairline);
  border-left: 3px solid transparent;
}

/* The winning row: a dropped background, a sage border, nothing more. A lower
   price does not need a fanfare to be noticed. */
.kb-compare__row--best {
  background: var(--kb-surface-sunken);
  border-left-color: var(--kb-success);
}

.kb-compare__row--out {
  opacity: 0.6;
}

.kb-compare__logo {
  width: 48px;
  height: 48px;
  border-radius: var(--kb-radius-sm);
  background: var(--kb-surface-sunken);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--kb-ink-muted);
  overflow: hidden;
}

.kb-compare__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kb-compare__merchant {
  min-width: 0;
}

.kb-compare__name {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--kb-space-sm);
  flex-wrap: wrap;
}

.kb-compare__price {
  text-align: right;
  font-weight: 700;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Reviews ----------------------------------------------------- */

.kb-review {
  padding: var(--kb-space-lg) 0;
  border-bottom: 1px solid var(--kb-hairline);
}

.kb-review:last-child {
  border-bottom: 0;
}

.kb-review__head {
  display: flex;
  align-items: center;
  gap: var(--kb-space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--kb-space-sm);
}

.kb-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--kb-radius-pill);
  background: var(--kb-blush);
  color: var(--kb-primary);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.9375rem;
  flex: 0 0 auto;
}

.kb-review__author {
  font-weight: 600;
}

.kb-review__body {
  margin: var(--kb-space-sm) 0;
  color: var(--kb-ink);
}

.kb-review__actions {
  display: flex;
  gap: var(--kb-space-lg);
  align-items: center;
}

.kb-review__summary {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto;
  gap: var(--kb-space-xl);
  align-items: start;
  padding-bottom: var(--kb-space-lg);
  border-bottom: 1px solid var(--kb-hairline);
}

.kb-review__score {
  font-family: var(--kb-font-serif);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--kb-ink);
}

/* ---------- Editorial ------------------------------------------------- */

.kb-article-card {
  display: flex;
  flex-direction: column;
  gap: var(--kb-space-sm);
}

.kb-article-card__image {
  aspect-ratio: 3 / 2;
  border-radius: var(--kb-radius);
  overflow: hidden;
  background: var(--kb-surface-sunken);
}

.kb-article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kb-article-card h3 {
  font-size: 1.375rem;
  line-height: 1.22;
}

.kb-article-card a:hover h3 {
  color: var(--kb-primary);
}

/* An article body: a narrow column, an unhurried rhythm. */
.kb-prose {
  max-width: var(--kb-measure);
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.75;
}

.kb-prose h2 {
  font-size: 1.75rem;
  margin: var(--kb-space-xl) 0 var(--kb-space-md);
}

.kb-prose h3 {
  font-size: 1.375rem;
  margin: var(--kb-space-lg) 0 var(--kb-space-sm);
}

.kb-prose ul,
.kb-prose ol {
  padding-left: 1.25em;
  margin: 0 0 1em;
}

.kb-prose li {
  margin-bottom: 0.4em;
}

.kb-prose blockquote {
  margin: var(--kb-space-xl) 0;
  padding-left: var(--kb-space-lg);
  border-left: 2px solid var(--kb-primary);
  font-family: var(--kb-font-serif);
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--kb-ink);
}

/* The promotion block: a blush band, two columns, one single button. */
.kb-promo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--kb-space-2xl);
  align-items: center;
}

.kb-promo__image {
  aspect-ratio: 4 / 3;
  border-radius: var(--kb-radius-lg);
  overflow: hidden;
  background: color-mix(in srgb, var(--kb-surface) 60%, var(--kb-blush));
  display: grid;
  place-items: center;
  padding: var(--kb-space-lg);
}

.kb-promo__image img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.kb-promo h1,
.kb-promo h2 {
  margin-bottom: var(--kb-space-md);
}

.kb-promo__actions {
  display: flex;
  align-items: center;
  gap: var(--kb-space-lg);
  margin-top: var(--kb-space-lg);
  flex-wrap: wrap;
}

/* The brand strip: white plates, names in serif, nothing else. */
.kb-brandstrip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--kb-space-md);
}

.kb-brandstrip__item {
  background: var(--kb-surface);
  border-radius: var(--kb-radius);
  box-shadow: var(--kb-shadow);
  padding: var(--kb-space-lg) var(--kb-space-md);
  text-align: center;
  font-family: var(--kb-font-serif);
  font-size: 1.125rem;
  color: var(--kb-ink);
  transition: box-shadow 0.18s ease;
}

.kb-brandstrip__item:hover {
  box-shadow: var(--kb-shadow-lift);
  text-decoration: none;
  color: var(--kb-primary);
}

/* ---------- Ad slot ---------------------------------------------------- */

/* The placeholder never disguises itself as content. The dotted border is a
   deliberate signal: "an ad will go here", not "an ad is here". */
.kb-ad {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100%;
  background: var(--kb-surface-sunken);
  border: 1px dashed var(--kb-hairline);
  border-radius: var(--kb-radius-sm);
  color: var(--kb-ink-faint);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--kb-space-md);
  overflow: hidden;
}

.kb-ad--live {
  background: transparent;
  border: 0;
  padding: 0;
}

.kb-ad-wrap {
  display: flex;
  justify-content: center;
  margin: var(--kb-space-xl) 0;
}

/* ---------- Filters ----------------------------------------------------- */

.kb-catalog {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: var(--kb-space-xl);
  align-items: start;
}

.kb-filters__group {
  padding: var(--kb-space-md) 0;
  border-bottom: 1px solid var(--kb-hairline);
}

.kb-filters__group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kb-ink-muted);
  list-style: none;
}

.kb-filters__group > summary::-webkit-details-marker {
  display: none;
}

.kb-filters__options {
  display: grid;
  gap: var(--kb-space-sm);
  margin-top: var(--kb-space-md);
}

.kb-check {
  display: flex;
  align-items: center;
  gap: var(--kb-space-sm);
  cursor: pointer;
  font-size: 0.9375rem;
}

.kb-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--kb-primary);
  flex: 0 0 auto;
}

.kb-check__count {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--kb-ink-faint);
  font-variant-numeric: tabular-nums;
}

.kb-field {
  display: grid;
  gap: 6px;
  margin-bottom: var(--kb-space-md);
}

.kb-field > label {
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--kb-space-sm);
}

.kb-input,
.kb-select,
.kb-textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--kb-space-sm) var(--kb-space-md);
  border: 1px solid var(--kb-hairline);
  border-radius: var(--kb-radius);
  background: var(--kb-surface);
  color: var(--kb-ink);
  font-size: 0.9375rem;
}

.kb-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

.kb-input:focus,
.kb-select:focus,
.kb-textarea:focus {
  border-color: var(--kb-primary);
  outline: 2px solid color-mix(in srgb, var(--kb-primary) 30%, transparent);
  outline-offset: 0;
}

.kb-field__hint {
  font-size: 0.8125rem;
  color: var(--kb-ink-faint);
}

.kb-field__hint--warn {
  color: var(--kb-warn);
}

.kb-field__error {
  font-size: 0.8125rem;
  color: var(--kb-primary);
}

.kb-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kb-space-md);
  flex-wrap: wrap;
  margin-bottom: var(--kb-space-lg);
}

/* ---------- Empty state ------------------------------------------------ */

.kb-empty {
  text-align: center;
  padding: var(--kb-space-3xl) var(--kb-space-lg);
  max-width: 420px;
  margin: 0 auto;
}

.kb-empty svg {
  margin: 0 auto var(--kb-space-lg);
  color: var(--kb-ink-faint);
}

.kb-empty h2 {
  font-size: 1.5rem;
  margin-bottom: var(--kb-space-sm);
}

/* ---------- Pagination -------------------------------------------------- */

.kb-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kb-space-sm);
  margin-top: var(--kb-space-xl);
}

.kb-pager a,
.kb-pager span {
  min-width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--kb-radius-sm);
  color: var(--kb-ink-muted);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.kb-pager a:hover {
  background: var(--kb-surface-sunken);
  text-decoration: none;
}

.kb-pager .active {
  color: var(--kb-primary);
  font-weight: 700;
}

/* The "back" arrow is the same icon, flipped. */
.kb-flip {
  transform: scaleX(-1);
}

/* ---------- Breadcrumb -------------------------------------------------- */

.kb-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kb-space-xs);
  font-size: 0.8125rem;
  color: var(--kb-ink-faint);
  padding: var(--kb-space-lg) 0 0;
}

.kb-breadcrumb a {
  color: var(--kb-ink-muted);
}

/* ---------- The price chart -------------------------------------------- */

.kb-chart {
  width: 100%;
  height: 220px;
}

.kb-chart__line {
  fill: none;
  stroke: var(--kb-primary);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.kb-chart__area {
  fill: color-mix(in srgb, var(--kb-primary) 10%, transparent);
  stroke: none;
}

.kb-chart__grid {
  stroke: var(--kb-hairline);
  stroke-width: 1;
}

.kb-chart__label {
  font-size: 11px;
  fill: var(--kb-ink-faint);
  font-family: var(--kb-font-sans);
}

/* ---------- Specifications --------------------------------------------- */

.kb-specs {
  display: grid;
  margin: 0;
}

.kb-specs__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--kb-space-md);
  padding: var(--kb-space-sm) 0;
  border-bottom: 1px solid var(--kb-hairline);
  font-size: 0.9375rem;
}

.kb-specs__row dt {
  color: var(--kb-ink-muted);
}

.kb-specs__row dd {
  margin: 0;
}

/* ---------- Notifications ---------------------------------------------- */

.kb-note {
  display: flex;
  gap: var(--kb-space-sm);
  padding: var(--kb-space-md);
  border-radius: var(--kb-radius);
  background: var(--kb-surface-sunken);
  color: var(--kb-ink);
  font-size: 0.9375rem;
  border-left: 3px solid var(--kb-hairline);
}

.kb-note--good {
  background: var(--kb-success-tint);
  border-left-color: var(--kb-success);
}

.kb-note--warn {
  background: var(--kb-warn-tint);
  border-left-color: var(--kb-warn);
}

.kb-note--error {
  background: var(--kb-primary-tint);
  border-left-color: var(--kb-primary);
}

/* ---------- Footer ---------------------------------------------------- */

.kb-footer {
  border-top: 1px solid var(--kb-hairline);
  padding: var(--kb-space-2xl) 0 var(--kb-space-xl);
  background: var(--kb-canvas);
}

.kb-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--kb-space-xl);
}

.kb-footer h4 {
  font-family: var(--kb-font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kb-ink-muted);
  margin-bottom: var(--kb-space-md);
}

.kb-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--kb-space-sm);
}

.kb-footer a {
  color: var(--kb-ink);
  font-size: 0.9375rem;
}

.kb-footer a:hover {
  color: var(--kb-primary);
}

.kb-footer__legal {
  margin-top: var(--kb-space-xl);
  padding-top: var(--kb-space-md);
  border-top: 1px solid var(--kb-hairline);
}

/* ---------- Back office ------------------------------------------------- */

/* The same palette, a different register: the back office is a tool, not a
   magazine. Denser, serif only on the page title, one obvious primary action per
   screen. */

.kb-admin {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--kb-canvas);
}

/* The sidebar is a light blush, not a dark panel. Its contrast against the ivory
   content comes from saturation rather than brightness — the back office stays
   inside the brand's colour family instead of looking like a borrowed tool. */
.kb-admin__side {
  background: #ffdad9;
  color: var(--kb-ink);
  padding: var(--kb-space-lg) 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid rgba(43, 33, 30, 0.06);
}

.kb-admin__side .kb-wordmark {
  color: var(--kb-ink);
  font-size: 1.375rem;
  padding: 0 var(--kb-space-lg);
}

.kb-admin__side .kb-wordmark em {
  color: var(--kb-primary);
  font-weight: 600;
}

.kb-admin__badge {
  padding: 0 var(--kb-space-lg);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kb-ink-muted);
  margin-top: 2px;
}

.kb-admin__nav {
  margin-top: var(--kb-space-xl);
  display: grid;
  gap: 2px;
  padding: 0 var(--kb-space-md);
}

.kb-admin__nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--kb-space-sm);
  padding: 10px var(--kb-space-md);
  border-radius: var(--kb-radius-sm);
  color: var(--kb-ink-muted);
  font-size: 0.875rem;
  font-weight: 500;
}

.kb-admin__nav a:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--kb-ink);
  text-decoration: none;
}

/* The active item is a raised white plate with a pink bar along its edge — it
   reads as "you are here", not as a mere splash of colour. */
.kb-admin__nav a.active {
  background: var(--kb-surface);
  color: var(--kb-ink);
  font-weight: 600;
  box-shadow: var(--kb-shadow);
}

.kb-admin__nav a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--kb-primary);
  border-radius: 0 3px 3px 0;
}

.kb-admin__nav a.active .kb-icon {
  color: var(--kb-primary);
}

.kb-admin__nav .kb-admin__count {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--kb-primary);
  color: #fff;
  border-radius: var(--kb-radius-pill);
  padding: 1px 7px;
}

.kb-admin__user {
  margin-top: auto;
  padding: var(--kb-space-md) var(--kb-space-lg);
  background: #f7cfce;
  border-top: 1px solid rgba(43, 33, 30, 0.06);
  display: flex;
  align-items: center;
  gap: var(--kb-space-sm);
}

.kb-admin__user .kb-avatar {
  background: var(--kb-primary);
  color: #fff;
}

.kb-admin__logout {
  margin-left: auto;
  background: none;
  border: 0;
  padding: var(--kb-space-xs);
  border-radius: var(--kb-radius-sm);
  color: var(--kb-ink-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.kb-admin__logout:hover {
  color: var(--kb-ink);
  background: rgba(255, 255, 255, 0.6);
}

.kb-admin__body {
  min-width: 0;

  /* Past 1600px the back-office tables become unreadable: the eye loses the row
     somewhere between the first and the last column. */
  max-width: 1600px;
  padding: var(--kb-space-lg) var(--kb-space-xl) var(--kb-space-3xl);
}

/* The compact top bar on the editing screens: breadcrumb on the left, exits on
   the right. A visible way back, so the editor does not depend on the browser's
   own back button. */
.kb-admin__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kb-space-md);
  flex-wrap: wrap;
  min-height: 56px;
  margin: calc(var(--kb-space-lg) * -1) calc(var(--kb-space-xl) * -1) var(--kb-space-lg);
  padding: var(--kb-space-sm) var(--kb-space-xl);
  background: var(--kb-canvas);
  border-bottom: 1px solid var(--kb-hairline);
}

.kb-admin__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--kb-space-lg);
  flex-wrap: wrap;
  padding-bottom: var(--kb-space-lg);
  margin-bottom: var(--kb-space-lg);
  border-bottom: 1px solid var(--kb-hairline);
}

/* Back-office headings are Manrope bold, not serif. The serif is the editorial
   voice of the public site; in a tool it would sound affected. */
.kb-admin__head h1,
.kb-admin__body h1 {
  font-family: var(--kb-font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
}

.kb-admin__body h3,
.kb-admin__body h4 {
  font-family: var(--kb-font-sans);
  font-weight: 600;
}

/* The figure plates on the dashboard. The one demanding action gets the accent. */
.kb-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--kb-space-md);
}

.kb-stat {
  position: relative;
  overflow: hidden;
  background: var(--kb-surface);
  border: 1px solid var(--kb-hairline);
  border-radius: var(--kb-radius);
  box-shadow: var(--kb-shadow);
  padding: var(--kb-space-md);
}

/* The plate demanding action gets a pink bar along its left edge. On the edge
   rather than above it: the row of plates reads left to right, so the accent
   falls exactly where the figure begins. */
.kb-stat--action {
  border-color: color-mix(in srgb, var(--kb-primary) 30%, transparent);
}

.kb-stat--action::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--kb-primary);
}

.kb-stat__value {
  font-family: var(--kb-font-sans);
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 1.1;
  color: var(--kb-ink);
  font-variant-numeric: tabular-nums;
}

.kb-stat__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--kb-ink-muted);
  margin-top: var(--kb-space-xs);
}

/* The back-office table. No vertical rules, just as on the site. */
.kb-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--kb-surface);
  border-radius: var(--kb-radius);
  overflow: hidden;
  box-shadow: var(--kb-shadow);
}

.kb-table th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kb-ink-muted);
  padding: var(--kb-space-md);
  border-bottom: 1px solid var(--kb-hairline);
  white-space: nowrap;
}

.kb-table td {
  padding: var(--kb-space-md);
  border-bottom: 1px solid var(--kb-hairline);
  vertical-align: middle;
  font-size: 0.9375rem;
}

.kb-table tbody tr:last-child td {
  border-bottom: 0;
}

.kb-table tbody tr:hover {
  background: var(--kb-surface-sunken);
}

.kb-table__thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--kb-radius-sm);
  background: var(--kb-blush);
  object-fit: contain;
  padding: 4px;
}

.kb-table__actions {
  display: flex;
  gap: var(--kb-space-md);
  justify-content: flex-end;
  white-space: nowrap;
}

.kb-table-scroll {
  overflow-x: auto;
}

/* The import progress list. */
.kb-steps {
  display: grid;
  background: var(--kb-surface);
  border-radius: var(--kb-radius);
  box-shadow: var(--kb-shadow);
  overflow: hidden;
}

.kb-steps__row {
  display: flex;
  align-items: center;
  gap: var(--kb-space-md);
  padding: var(--kb-space-md);
  border-bottom: 1px solid var(--kb-hairline);
}

.kb-steps__row:last-child {
  border-bottom: 0;
}

.kb-steps__row--pending {
  color: var(--kb-ink-faint);
}

.kb-steps__icon {
  width: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.kb-steps__time {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--kb-ink-faint);
  font-variant-numeric: tabular-nums;
}

/* The action bar pinned to the bottom of the editing screens. */
.kb-actionbar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kb-space-md);
  flex-wrap: wrap;
  background: var(--kb-surface);
  border-top: 1px solid var(--kb-hairline);
  padding: var(--kb-space-md) var(--kb-space-xl);
  margin: var(--kb-space-xl) calc(var(--kb-space-xl) * -1) 0;
  box-shadow: 0 -1px 2px rgba(43, 33, 30, 0.04);
  z-index: 10;
}

/* 7/5, as in the designs: the content column needs width for the description and
   the INCI list, while the right-hand one needs only as much as a card. */
.kb-admin__form {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--kb-space-xl);
  align-items: start;
}

@media (max-width: 1100px) {
  .kb-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kb-admin__form {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .kb-admin {
    grid-template-columns: minmax(0, 1fr);
  }

  .kb-admin__side {
    position: static;
    height: auto;
  }

  .kb-admin__body {
    padding: var(--kb-space-lg);
  }

  .kb-actionbar {
    margin: var(--kb-space-lg) calc(var(--kb-space-lg) * -1) 0;
    padding: var(--kb-space-md) var(--kb-space-lg);
  }
}

/* ---------- Components added from the revised designs ------------------ */

/* A card head: title on the left, a discreet number on the right. The number
   answers "how many are there?" before the eye starts counting rows. */
.kb-cardhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kb-space-md);
  padding: var(--kb-space-md) var(--kb-space-lg);
  border-bottom: 1px solid var(--kb-hairline);
}

.kb-cardhead h3 {
  font-family: var(--kb-font-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0;
}

/* The count pill, for lists of the "342 căutări" kind. A fixed minimum width, so
   the pills line up into a column. */
.kb-countpill {
  display: inline-block;
  min-width: 90px;
  text-align: center;
  padding: 2px var(--kb-space-sm);
  border-radius: var(--kb-radius-pill);
  background: var(--kb-blush);
  color: var(--kb-primary);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  flex: 0 0 auto;
}

.kb-listrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kb-space-md);
  padding: var(--kb-space-sm) 0;
  border-bottom: 1px solid var(--kb-hairline);
  font-size: 0.8125rem;
}

.kb-listrow:last-child {
  border-bottom: 0;
}

.kb-listrow__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

/* Social links as monograms rather than logos: four platform logos would bring
   four foreign palettes onto a screen that is allowed exactly one saturated
   accent. */
.kb-social {
  display: flex;
  gap: var(--kb-space-sm);
  margin-top: var(--kb-space-md);
}

.kb-social a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--kb-radius-pill);
  background: var(--kb-surface);
  border: 1px solid var(--kb-hairline);
  color: var(--kb-ink-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.kb-social a:hover {
  color: var(--kb-primary);
  border-color: var(--kb-primary);
  text-decoration: none;
}

/* The grid/list toggle in the sort bar. */
.kb-viewtoggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--kb-hairline);
  border-radius: var(--kb-radius-pill);
  background: var(--kb-surface);
}

.kb-viewtoggle button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--kb-radius-pill);
  background: none;
  color: var(--kb-ink-muted);
  cursor: pointer;
}

.kb-viewtoggle button[aria-pressed="true"] {
  background: var(--kb-surface-sunken);
  color: var(--kb-primary);
}

/* An on/off switch, for publishing and promoting. */
.kb-switchrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--kb-space-md);
  padding: var(--kb-space-sm) 0;
}

.kb-switchrow + .kb-switchrow {
  border-top: 1px solid var(--kb-hairline);
}

.kb-switchrow__text {
  min-width: 0;
}

.kb-switchrow__text strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
}

.kb-switch {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 20px;
  cursor: pointer;
}

.kb-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.kb-switch span {
  position: absolute;
  inset: 0;
  border-radius: var(--kb-radius-pill);
  background: var(--kb-hairline);
  transition: background 0.15s ease;
  pointer-events: none;
}

.kb-switch span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(43, 33, 30, 0.2);
  transition: transform 0.15s ease;
}

.kb-switch input:checked + span {
  background: var(--kb-primary);
}

.kb-switch input:checked + span::after {
  transform: translateX(16px);
}

.kb-switch input:focus-visible + span {
  outline: 2px solid var(--kb-primary);
  outline-offset: 2px;
}

/* Collapsible sections, used on the product page on a phone. */
.kb-collapse {
  background: var(--kb-surface);
  border: 1px solid var(--kb-hairline);
  border-radius: var(--kb-radius);
  overflow: hidden;
  box-shadow: var(--kb-shadow);
}

.kb-collapse > details + details {
  border-top: 1px solid var(--kb-hairline);
}

.kb-collapse summary {
  display: flex;
  align-items: center;
  gap: var(--kb-space-sm);
  padding: var(--kb-space-md);
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
  list-style: none;
}

.kb-collapse summary::-webkit-details-marker {
  display: none;
}

.kb-collapse summary:hover {
  background: var(--kb-surface-sunken);
}

.kb-collapse summary .kb-collapse__lead {
  color: var(--kb-primary);
  display: grid;
  place-items: center;
}

.kb-collapse summary .kb-collapse__chevron {
  margin-left: auto;
  color: var(--kb-ink-muted);
  transition: transform 0.15s ease;
}

.kb-collapse details[open] summary .kb-collapse__chevron {
  transform: rotate(180deg);
}

.kb-collapse__body {
  padding: var(--kb-space-md);
  border-top: 1px solid var(--kb-hairline);
  font-size: 0.9375rem;
  color: var(--kb-ink-muted);
  line-height: 1.65;
}

/* The search field inside a filter group. */
.kb-filters__search {
  position: relative;
  margin-bottom: var(--kb-space-sm);
}

.kb-filters__search input {
  width: 100%;
  min-height: 34px;
  padding: 0 var(--kb-space-sm) 0 30px;
  border: 0;
  border-radius: var(--kb-radius-sm);
  background: var(--kb-surface-sunken);
  color: var(--kb-ink);
  font-size: 0.8125rem;
}

.kb-filters__search input:focus {
  background: var(--kb-surface);
  outline: 2px solid color-mix(in srgb, var(--kb-primary) 35%, transparent);
}

.kb-filters__search .kb-icon {
  position: absolute;
  left: var(--kb-space-sm);
  top: 50%;
  transform: translateY(-50%);
  color: var(--kb-ink-faint);
  pointer-events: none;
}

/* ---- Phone-only components ------------------------------------------- */

/* The bottom navigation bar. Four destinations, no more: on a phone screen, a
   fifth has no width left for a readable label. */
.kb-bottomnav {
  display: none;
}

/* The buy bar pinned to the bottom of the product page. The price stays in view
   at all times — on a 4000px page you would otherwise have to scroll back up. */
.kb-buybar {
  display: none;
}

@media (max-width: 760px) {
  .kb-bottomnav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: var(--kb-space-xs);
    padding: var(--kb-space-xs) var(--kb-space-md);
    padding-bottom: calc(var(--kb-space-xs) + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--kb-canvas) 95%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--kb-hairline);
  }

  .kb-bottomnav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--kb-space-xs);
    min-width: 56px;
    color: var(--kb-ink-muted);
    font-size: 0.625rem;
    font-weight: 500;
  }

  .kb-bottomnav a:hover,
  .kb-bottomnav a.active {
    color: var(--kb-primary);
    text-decoration: none;
  }

  .kb-buybar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 46;
    display: flex;
    align-items: center;
    gap: var(--kb-space-md);
    padding: var(--kb-space-sm) var(--kb-space-md);
    padding-bottom: calc(var(--kb-space-sm) + env(safe-area-inset-bottom));
    background: var(--kb-surface);
    border-top: 1px solid var(--kb-hairline);
    box-shadow: 0 -4px 12px rgba(43, 33, 30, 0.04);
  }

  .kb-buybar__price {
    flex: 0 0 auto;
  }

  .kb-buybar__price small {
    display: block;
    font-size: 0.6875rem;
    color: var(--kb-ink-muted);
  }

  .kb-buybar__price strong {
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .kb-buybar .kb-btn {
    flex: 1;
  }

  /* The two bars do not coexist: on the product page, the buy bar replaces the
     navigation bar. */
  body:has(.kb-buybar) .kb-bottomnav {
    display: none;
  }

  /* Room so the last section does not end up underneath the pinned bars. */
  .kb-main {
    padding-bottom: calc(var(--kb-space-3xl) + 64px);
  }
}

/* ---------- Loading ---------------------------------------------------- */

.kb-skeleton {
  background: linear-gradient(
    90deg,
    var(--kb-surface-sunken) 25%,
    color-mix(in srgb, var(--kb-surface-sunken) 60%, var(--kb-surface)) 50%,
    var(--kb-surface-sunken) 75%
  );
  background-size: 200% 100%;
  animation: kb-shimmer 1.4s linear infinite;
  border-radius: var(--kb-radius);
}

@keyframes kb-shimmer {
  to {
    background-position: -200% 0;
  }
}

.kb-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--kb-primary) 30%, transparent);
  border-top-color: var(--kb-primary);
  border-radius: 50%;
  animation: kb-spin 0.7s linear infinite;
  flex: 0 0 auto;
}

@keyframes kb-spin {
  to {
    transform: rotate(360deg);
  }
}

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

  .kb-product:hover {
    transform: none;
  }
}

/* ---------- Responsive -------------------------------------------------- */

@media (max-width: 1080px) {
  .kb-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kb-brandstrip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kb-footer__cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .kb-catalog {
    grid-template-columns: minmax(0, 1fr);
  }

  .kb-promo {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kb-space-lg);
  }

  .kb-review__summary {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kb-space-lg);
  }
}

@media (max-width: 760px) {
  :root {
    --kb-space-2xl: 40px;
    --kb-space-3xl: 56px;
  }

  .kb-header__nav {
    display: none;
  }

  .kb-header__nav--open {
    display: flex;
    position: absolute;
    top: var(--kb-header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--kb-surface);
    border-bottom: 1px solid var(--kb-hairline);
    box-shadow: var(--kb-shadow-lift);
    padding: var(--kb-space-sm) var(--kb-space-lg) var(--kb-space-lg);
  }

  .kb-header__nav--open a {
    padding: var(--kb-space-md) 0;
    border-bottom: 1px solid var(--kb-hairline);
  }

  .kb-header__toggle {
    display: grid;
    place-items: center;
    margin-left: auto;
  }

  .kb-search {
    max-width: none;
  }

  /* The grid never drops to a single column: this audience browses visually, and
     one column turns browsing into a list to scroll through. */
  .kb-grid,
  .kb-grid--3,
  .kb-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kb-space-md);
  }

  .kb-brandstrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kb-footer__cols {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kb-space-lg);
  }

  /* The comparison table becomes a card on a phone: the price and the button drop
     to a second row so they stay tappable. */
  .kb-compare__row {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas:
      "logo merchant"
      "price price"
      "action action";
    row-gap: var(--kb-space-sm);
  }

  .kb-compare__logo {
    grid-area: logo;
    width: 40px;
    height: 40px;
  }

  .kb-compare__merchant {
    grid-area: merchant;
  }

  .kb-compare__price {
    grid-area: price;
    text-align: left;
    font-size: 1.25rem;
  }

  .kb-compare__action {
    grid-area: action;
  }

  .kb-compare__action .kb-btn {
    width: 100%;
  }

  .kb-product__name {
    font-size: 1rem;
  }

  .kb-review__score {
    font-size: 2.75rem;
  }
}