/*
 * Pagestic Theme Kit: shared styles for every kit-* class that KitRenderer and FormEngine write.
 *
 * Everything is built from the theme's own variables (--background, --surface, --surface-alt, --primary,
 * --primary-alt, --accent, --text-primary, --text-secondary, --font-heading, --font-body) plus the --kit-*
 * variables below. A theme changes the look in themes/<theme>/assets/css/kit-theme.css, which is linked
 * after this file: it sets these variables on .kit-root and adds the few rules that cannot be a variable.
 *
 * Plain CSS, no build step, no fonts or images from outside. Starts at 320px wide.
 *
 * Contents: 1 tokens, 2 base, 3 layout, 4 text, 5 actions, 6 content, 7 forms, 8 interactive, 9 frames,
 * 10 module forms, kit levels 3 and 5 (pagination, compare, slideshow; the shop components), 11 motion and contrast.
 */

/* ------------------------------------------------------------------ 1. Tokens */

/* Zero specificity: a theme's own `.kit-root { --kit-radius: 0 }` always wins, wherever it is linked. Only .kit-root declares
   these (never the section inside it), so a value a theme sets there is inherited, not shadowed. */
:where(.kit-root) {
  /* Colour roles. Sections with a dark or accent background redefine these for everything inside. */
  --kit-text: var(--text-primary, #1c1c1c);
  --kit-muted: var(--text-secondary, #5b5b5b);
  --kit-surface: var(--surface, #fff);
  --kit-surface-alt: var(--surface-alt, #f3f3f1);
  --kit-primary: var(--primary, #1c1c1c);
  --kit-primary-hover: var(--primary-alt, var(--primary, #000));
  --kit-on-primary: var(--on-primary, #fff);
  --kit-accent: var(--accent, var(--primary, #1c1c1c));
  /* Used for text in the accent colour (eyebrows, links): a pale accent is deepened with the text colour so it stays readable. */
  --kit-accent-text: var(--accent-ink, color-mix(in srgb, var(--kit-accent) 62%, var(--kit-text)));
  --kit-on-accent: var(--on-accent, #fff);
  --kit-line: var(--border, color-mix(in srgb, var(--kit-text) 14%, transparent));
  --kit-line-strong: color-mix(in srgb, var(--kit-text) 30%, transparent);
  --kit-soft: color-mix(in srgb, var(--kit-accent) 12%, transparent);
  --kit-focus: var(--kit-accent);
  --kit-info: #1d4ed8;
  --kit-success: #15803d;
  --kit-warning: #b45309;
  --kit-danger: #b91c1c;
  --kit-star: #d97706;

  /* Shape. */
  --kit-radius: 0.5rem;
  --kit-radius-sm: 0.5rem;
  --kit-button-radius: var(--kit-radius-sm);
  --kit-input-radius: var(--kit-radius-sm);
  --kit-chip-radius: 999px;
  --kit-media-radius: var(--kit-radius);
  --kit-shadow: 0 1px 2px color-mix(in srgb, var(--kit-text) 6%, transparent), 0 10px 28px -16px color-mix(in srgb, var(--kit-text) 22%, transparent);
  --kit-shadow-hover: 0 2px 4px color-mix(in srgb, var(--kit-text) 8%, transparent), 0 18px 36px -18px color-mix(in srgb, var(--kit-text) 32%, transparent);

  /* Type. */
  --kit-heading-weight: 700;
  --kit-heading-tracking: -0.01em;
  --kit-heading-transform: none;
  --kit-button-weight: 600;
  --kit-button-tracking: 0;
  --kit-button-transform: none;
  --kit-eyebrow-tracking: 0.14em;

  /* Space. */
  --kit-space: 1.25rem;
  --kit-gap-small: 0.5rem;
  --kit-gap-medium: 1.25rem;
  --kit-gap-large: 2.25rem;
  --kit-card-pad: 1.25rem;
  --kit-gutter: clamp(1rem, 4vw, 2rem);
  --kit-width-normal: 72rem;
  --kit-width-narrow: 44rem;
  --kit-width-wide: 90rem;
  --kit-pad-normal: clamp(3rem, 6vw, 5.5rem);
  --kit-pad-compact: clamp(1.5rem, 3vw, 2.5rem);
  --kit-pad-spacious: clamp(4rem, 9vw, 8rem);

  /* Motion. */
  --kit-speed: 160ms;
  --kit-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ------------------------------------------------------------------ 2. Base */

.kit-root {
  display: block;
  color: var(--kit-text);
  font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

/* Themes reset margins differently, so start from none. :where() keeps these rules out of the way. */
:where(.kit-root) :where(h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, fieldset, legend, output) {
  margin: 0;
}

:where(.kit-root) :where(fieldset) {
  min-width: 0;
  padding: 0;
  border: 0;
}

:where(.kit-root) :where(img, video, iframe) {
  display: block;
  max-width: 100%;
}

/* The hidden attribute always wins over a component's own display. */
.kit-root [hidden],
.kit-root[hidden] {
  display: none !important;
}

.kit-root :focus-visible {
  outline: 2px solid var(--kit-focus);
  outline-offset: 2px;
}

.kit-root svg.lucide {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
}

html.kit-scroll-lock {
  overflow: hidden;
}

/* ------------------------------------------------------------------ 3. Layout */

.kit-section {
  position: relative;
  isolation: isolate;
  padding-block: var(--kit-pad-normal);
  color: var(--kit-text);
}

.kit-section--pad-compact { padding-block: var(--kit-pad-compact); }
.kit-section--pad-spacious { padding-block: var(--kit-pad-spacious); }
.kit-section--align-center { text-align: center; }
.kit-section--muted { background-color: var(--kit-surface-alt); }

/* Dark and accent bands: every colour role flips, so cards, buttons and fields stay readable. */
.kit-section--inverse,
.kit-section--accent,
.kit-section--image,
.kit-slide {
  background-color: var(--kit-section-bg);
  color: var(--kit-section-fg);
  --kit-text: var(--kit-section-fg);
  --kit-muted: color-mix(in srgb, var(--kit-section-fg) 78%, transparent);
  --kit-surface: color-mix(in srgb, var(--kit-section-fg) 9%, transparent);
  --kit-surface-alt: color-mix(in srgb, var(--kit-section-fg) 14%, transparent);
  --kit-primary: var(--kit-section-fg);
  --kit-primary-hover: color-mix(in srgb, var(--kit-section-fg) 88%, var(--kit-section-bg));
  --kit-on-primary: var(--kit-section-bg);
  --kit-accent: var(--kit-section-fg);
  --kit-accent-text: var(--kit-section-fg);
  --kit-on-accent: var(--kit-section-bg);
  --kit-line: color-mix(in srgb, var(--kit-section-fg) 26%, transparent);
  --kit-line-strong: color-mix(in srgb, var(--kit-section-fg) 52%, transparent);
  --kit-soft: color-mix(in srgb, var(--kit-section-fg) 14%, transparent);
  --kit-focus: var(--kit-section-fg);
  --kit-info: #93c5fd;
  --kit-success: #86efac;
  --kit-warning: #fcd34d;
  --kit-danger: #fca5a5;
  --kit-star: #fbbf24;
}

.kit-section--inverse {
  --kit-section-bg: var(--primary, #1c1c1c);
  --kit-section-fg: var(--on-primary, #fff);
}

.kit-section--accent {
  --kit-section-bg: var(--accent, #1c1c1c);
  --kit-section-fg: var(--on-accent, #fff);
}

/* Where the browser can work it out, text on the primary and accent colours is black or white, whichever reads
   better, unless the palette names its own --on-primary or --on-accent. Elsewhere it stays white. */
@supports (color: oklch(from red l c h)) {
  :where(.kit-root) {
    --kit-on-primary: var(--on-primary, oklch(from var(--kit-primary) calc(0.15 + clamp(0, (0.64 - l) * 1000, 1) * 0.85) 0 0));
    --kit-on-accent: var(--on-accent, oklch(from var(--kit-accent) calc(0.15 + clamp(0, (0.64 - l) * 1000, 1) * 0.85) 0 0));
  }

  .kit-section--inverse { --kit-section-fg: var(--on-primary, oklch(from var(--primary, #1c1c1c) calc(0.15 + clamp(0, (0.64 - l) * 1000, 1) * 0.85) 0 0)); }
  .kit-section--accent { --kit-section-fg: var(--on-accent, oklch(from var(--accent, #1c1c1c) calc(0.15 + clamp(0, (0.64 - l) * 1000, 1) * 0.85) 0 0)); }
}

.kit-section--image {
  --kit-section-bg: #17181a;
  --kit-section-fg: #fff;
  background-image: linear-gradient(color-mix(in srgb, #000 58%, transparent), color-mix(in srgb, #000 58%, transparent)), var(--kit-section-image, none);
  background-position: center;
  background-size: cover;
}

.kit-section__inner,
.kit-container {
  width: 100%;
  margin-inline: auto;
  max-width: calc(var(--kit-w, var(--kit-width-normal)) + 2 * var(--kit-gutter));
  padding-inline: var(--kit-gutter);
}

.kit-width--normal { --kit-w: var(--kit-width-normal); }
.kit-width--narrow { --kit-w: var(--kit-width-narrow); }
.kit-width--wide { --kit-w: var(--kit-width-wide); }
.kit-width--full { max-width: none; }
.kit-section__inner.kit-width--full { padding-inline: 0; }

/* A container inside a section is already inset by the section, so it only narrows the content. */
.kit-section__inner:not(.kit-width--full) .kit-container {
  max-width: var(--kit-w, var(--kit-width-normal));
  padding-inline: 0;
}

.kit-section__inner.kit-width--full .kit-container { max-width: calc(var(--kit-w, var(--kit-width-normal)) + 2 * var(--kit-gutter)); }

/* Vertical rhythm for containers that are not flex or grid. */
:where(.kit-section__inner, .kit-container, .kit-card__body, .kit-tab__body, .kit-dialog__body, .kit-accordion__body, .kit-notice__body, .kit-list-item__body) > :where(* + *) {
  margin-block-start: var(--kit-space);
}

:where(.kit-section__inner, .kit-container, .kit-card__body, .kit-tab__body, .kit-dialog__body, .kit-accordion__body) > .kit-heading-group + :where(.kit-text-block, .kit-rich-text) {
  margin-block-start: 0.75rem;
}

.kit-gap--small { --kit-gap: var(--kit-gap-small); gap: var(--kit-gap); }
.kit-gap--medium { --kit-gap: var(--kit-gap-medium); gap: var(--kit-gap); }
.kit-gap--large { --kit-gap: var(--kit-gap-large); gap: var(--kit-gap); }

.kit-grid {
  --kit-col-min: 16rem;
  display: grid;
  /* At most --kit-columns columns, and never narrower than --kit-col-min: columns wrap on small screens. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--kit-col-min), calc((100% - (var(--kit-columns, 3) - 1) * var(--kit-gap, 1.25rem)) / var(--kit-columns, 3)))), 1fr));
}

.kit-grid--min-small { --kit-col-min: 11rem; }
.kit-grid--min-medium { --kit-col-min: 16rem; }
.kit-grid--min-large { --kit-col-min: 22rem; }
.kit-grid > * { min-width: 0; }

/* Column counts from the columns and per_view options. Classes, not inline styles, so a section stylesheet can set
   --kit-columns or --kit-per-view on the same element for one screen size. */
.kit-cols--1 { --kit-columns: 1; }
.kit-cols--2 { --kit-columns: 2; }
.kit-cols--3 { --kit-columns: 3; }
.kit-cols--4 { --kit-columns: 4; }
.kit-cols--5 { --kit-columns: 5; }
.kit-cols--6 { --kit-columns: 6; }
.kit-per-view--1 { --kit-per-view: 1; }
.kit-per-view--2 { --kit-per-view: 2; }
.kit-per-view--3 { --kit-per-view: 3; }
.kit-per-view--4 { --kit-per-view: 4; }

.kit-stack {
  display: flex;
  flex-direction: column;
}

.kit-stack > * { min-width: 0; }
.kit-align--start { align-items: flex-start; }
.kit-align--center { align-items: center; text-align: center; }
.kit-align--end { align-items: flex-end; text-align: end; }

/* Blocks that should always fill the width, whatever the stack's alignment. */
.kit-stack > :is(.kit-card, .kit-picture, .kit-grid, .kit-split, .kit-tabs, .kit-accordion, .kit-carousel, .kit-key-values, .kit-form, .kit-list, .kit-notice, .kit-frame, .kit-video, .kit-rich-text, .kit-quote, .kit-container, .kit-row, .kit-empty,
  .kit-gallery, .kit-cart-lines, .kit-summary, .kit-filters, .kit-breadcrumbs, .kit-address, .kit-account-nav, .kit-skeleton, .kit-skeleton-swap, .kit-drawer-wrap),
.kit-stack.kit-align--start > :is(.kit-heading-group, .kit-text-block) {
  align-self: stretch;
}

.kit-row {
  display: flex;
  flex-wrap: wrap;
}

.kit-row > * { min-width: 0; }

.kit-justify--start { justify-content: flex-start; }
.kit-justify--center { justify-content: center; }
.kit-justify--end { justify-content: flex-end; }
.kit-justify--between { justify-content: space-between; }
.kit-valign--start { align-items: flex-start; }
.kit-valign--center { align-items: center; }
.kit-valign--end { align-items: flex-end; }

.kit-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kit-gap-large);
}

.kit-split > * { min-width: 0; }

@media (min-width: 48rem) {
  .kit-split--1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit-split--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .kit-split--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .kit-split--reverse > :first-child { order: 2; }
}

/* ------------------------------------------------------------------ 4. Text */

.kit-heading-group.kit-text--center { text-align: center; }
.kit-heading-group.kit-text--left { text-align: start; }

.kit-eyebrow {
  margin: 0 0 0.5rem;
  color: var(--kit-accent-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--kit-eyebrow-tracking);
  line-height: 1.3;
  text-transform: uppercase;
}

.kit-heading {
  color: var(--kit-text);
  font-family: var(--font-heading, inherit);
  font-weight: var(--kit-heading-weight);
  letter-spacing: var(--kit-heading-tracking);
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-transform: var(--kit-heading-transform);
  text-wrap: balance;
}

.kit-heading--1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.5rem); }
.kit-heading--2 { font-size: clamp(1.625rem, 1.2rem + 1.9vw, 2.5rem); }
.kit-heading--3 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.65rem); }
.kit-heading--4 { font-size: 1.125rem; line-height: 1.3; }

.kit-text-block {
  color: var(--kit-text);
  font-size: 1rem;
  line-height: 1.65;
  /* anywhere, not break-word: a long word must also let a centred stack shrink to the screen, not only wrap inside it. */
  overflow-wrap: anywhere;
}

.kit-text--left { text-align: start; }
.kit-text--center { text-align: center; }
.kit-text--lead { font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3rem); line-height: 1.55; }
.kit-text--small { font-size: 0.875rem; line-height: 1.55; }
.kit-text--muted { color: var(--kit-muted); }
.kit-text--lead:not(.kit-text--muted) { color: color-mix(in srgb, var(--kit-text) 86%, transparent); }

.kit-rich-text {
  color: var(--kit-text);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.kit-rich-text > * + * { margin-block-start: 1em; }
.kit-rich-text :is(h2, h3, h4) {
  color: var(--kit-text);
  font-family: var(--font-heading, inherit);
  font-weight: var(--kit-heading-weight);
  letter-spacing: var(--kit-heading-tracking);
  line-height: 1.25;
  margin-block-start: 1.6em;
}
.kit-rich-text h2 { font-size: 1.6rem; }
.kit-rich-text h3 { font-size: 1.3rem; }
.kit-rich-text h4 { font-size: 1.1rem; }
.kit-rich-text :is(h2, h3, h4) + * { margin-block-start: 0.6em; }
.kit-rich-text :is(ul, ol) { padding-inline-start: 1.4em; }
.kit-rich-text ul { list-style: disc; }
.kit-rich-text ol { list-style: decimal; }
.kit-rich-text li + li { margin-block-start: 0.35em; }
.kit-rich-text a { color: var(--kit-accent-text); text-decoration: underline; text-underline-offset: 0.2em; }
.kit-rich-text a:hover { text-decoration-thickness: 2px; }
.kit-rich-text blockquote { padding-inline-start: 1em; border-inline-start: 3px solid var(--kit-accent); color: var(--kit-muted); }
.kit-rich-text hr { border: 0; border-top: 1px solid var(--kit-line); }
.kit-rich-text :is(code, pre) { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }
.kit-rich-text code { padding: 0.1em 0.35em; border-radius: 0.3em; background: var(--kit-surface-alt); }
.kit-rich-text pre { padding: 1em; overflow-x: auto; border-radius: var(--kit-radius-sm); background: var(--kit-surface-alt); }
.kit-rich-text pre code { padding: 0; background: none; }
/* Pictures and tables reach rich text only from a website's own compiled article (the article_body kit block). */
.kit-rich-text :is(img, video) { max-width: 100%; height: auto; border-radius: var(--kit-media-radius); }
.kit-rich-text figure { margin-inline: 0; }
.kit-rich-text figcaption { margin-block-start: 0.5em; color: var(--kit-muted); font-size: 0.875rem; }
.kit-rich-text table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.95em; }
.kit-rich-text :is(th, td) { padding: 0.55em 1em 0.55em 0; border-bottom: 1px solid var(--kit-line); text-align: start; vertical-align: top; }
.kit-rich-text th { color: var(--kit-text); font-weight: 600; }

/* Lists */
.kit-list {
  display: grid;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}

.kit-list--bullets,
.kit-list--numbers { padding-inline-start: 1.4rem; }
.kit-list--bullets { list-style: disc; }
.kit-list--numbers { list-style: decimal; }
.kit-list--bullets > .kit-list-item,
.kit-list--numbers > .kit-list-item { display: list-item; }
.kit-list--bullets > .kit-list-item::marker,
.kit-list--numbers > .kit-list-item::marker { color: var(--kit-accent-text); }
.kit-list--bullets > .kit-list-item:has(> .kit-list-item__icon),
.kit-list--numbers > .kit-list-item:has(> .kit-list-item__icon) { display: flex; }

.kit-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.kit-list-item__icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  color: var(--kit-accent-text);
}

.kit-list-item__main { flex: 1 1 auto; min-width: 0; }

.kit-list-item__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.15rem 0.75rem;
}

.kit-list-item__title {
  color: var(--kit-text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

a.kit-list-item__title { text-decoration: none; }
a.kit-list-item__title:hover { color: var(--kit-accent-text); text-decoration: underline; text-underline-offset: 0.2em; }

.kit-list-item__meta {
  color: var(--kit-text);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.kit-list-item__note {
  display: block;
  margin-top: 0.1rem;
  color: var(--kit-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

.kit-list-item__body { color: var(--kit-muted); font-size: 0.9375rem; }

.kit-list--check > .kit-list-item::before {
  content: "";
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.22rem;
  background: var(--kit-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kit-list--check > .kit-list-item:has(.kit-list-item__icon)::before { display: none; }

/* A menu: the title, a dotted line, then the price. */
.kit-list--menu { gap: 1.1rem; }
.kit-list--menu .kit-list-item__line { flex-wrap: nowrap; align-items: baseline; gap: 0.6rem; }
.kit-list--menu .kit-list-item__line:has(.kit-list-item__meta)::after {
  content: "";
  order: 1;
  flex: 1 1 1rem;
  min-width: 1rem;
  border-bottom: 2px dotted var(--kit-line-strong);
  transform: translateY(-0.3em);
}
.kit-list--menu .kit-list-item__title { order: 0; }
.kit-list--menu .kit-list-item__meta { order: 2; }

/* ------------------------------------------------------------------ 5. Actions */

.kit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--kit-button-radius);
  background: transparent;
  color: var(--kit-text);
  cursor: pointer;
  font-family: var(--font-body, inherit);
  font-size: 0.9375rem;
  font-weight: var(--kit-button-weight);
  letter-spacing: var(--kit-button-tracking);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: var(--kit-button-transform);
  transition: background-color var(--kit-speed) ease, border-color var(--kit-speed) ease, color var(--kit-speed) ease, box-shadow var(--kit-speed) ease, transform var(--kit-speed) var(--kit-ease);
  -webkit-appearance: none;
  appearance: none;
}

.kit-button > span { min-width: 0; overflow-wrap: anywhere; }
.kit-button__icon { width: 1.15em; height: 1.15em; }
.kit-button--small { min-height: 2.25rem; padding: 0.45rem 1rem; font-size: 0.8125rem; }
.kit-button--small .kit-button__icon { width: 1.05em; height: 1.05em; }

.kit-button--primary {
  border-color: var(--kit-primary);
  background: var(--kit-primary);
  color: var(--kit-on-primary);
}

.kit-button--primary:hover {
  border-color: var(--kit-primary-hover);
  background: var(--kit-primary-hover);
}

.kit-button--secondary {
  border-color: var(--kit-accent);
  color: var(--kit-accent-text);
}

.kit-button--secondary:hover {
  border-color: var(--kit-accent);
  background: var(--kit-accent);
  color: var(--kit-on-accent);
}

.kit-button--ghost { color: var(--kit-accent-text); }
.kit-button--ghost:hover { background: var(--kit-soft); }

.kit-button--light {
  border-color: var(--surface, #fff);
  background: var(--surface, #fff);
  color: var(--text-primary, #1c1c1c);
}

.kit-button--light:hover {
  border-color: color-mix(in srgb, var(--surface, #fff) 86%, var(--text-primary, #1c1c1c));
  background: color-mix(in srgb, var(--surface, #fff) 86%, var(--text-primary, #1c1c1c));
}

.kit-button:active { transform: translateY(1px); }
.kit-button:disabled,
.kit-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.kit-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.kit-link {
  color: var(--kit-accent-text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.kit-link:hover { text-decoration-thickness: 2px; }

/* A Cookie settings link is a button that looks like a link. */
button.kit-consent-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

/* Cookie table: what the website stores about a visitor, per category (the privacy register). */
.kit-cookie-table {
  display: grid;
  gap: 2rem;
}

.kit-cookie-table__group {
  display: grid;
  gap: 0.75rem;
}

.kit-cookie-table__title { font-size: 1.15em; font-weight: 700; line-height: 1.3; }
.kit-cookie-table__text { color: var(--kit-muted); }
.kit-cookie-table__scroll { overflow-x: auto; }

.kit-cookie-table__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  line-height: 1.5;
}

/* The category's heading above the table names it; the caption is for screen readers. */
.kit-cookie-table__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.kit-cookie-table__table th,
.kit-cookie-table__table td {
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--kit-line);
  text-align: left;
  vertical-align: top;
}

.kit-cookie-table__table thead th { color: var(--kit-muted); font-weight: 600; white-space: nowrap; }
.kit-cookie-table__name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 600; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ 6. Content */

.kit-ratio--1-1 { aspect-ratio: 1 / 1; }
.kit-ratio--4-3 { aspect-ratio: 4 / 3; }
.kit-ratio--16-9 { aspect-ratio: 16 / 9; }
.kit-ratio--3-4 { aspect-ratio: 3 / 4; }
.kit-ratio--21-9 { aspect-ratio: 21 / 9; }
.kit-ratio--3-2 { aspect-ratio: 3 / 2; }

/* Card */
.kit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--kit-radius);
  color: var(--kit-text);
  transition: box-shadow var(--kit-speed) ease, border-color var(--kit-speed) ease, transform var(--kit-speed) var(--kit-ease);
}

.kit-card--surface {
  border-color: var(--kit-line);
  background: var(--kit-surface);
  box-shadow: var(--kit-shadow);
}

.kit-card--outline { border-color: var(--kit-line-strong); background: transparent; }
.kit-card--plain { border-color: transparent; background: transparent; border-radius: 0; }
.kit-card--plain .kit-card__media { border-radius: var(--kit-media-radius); }
.kit-card--plain .kit-card__content { padding-inline: 0; }

.kit-card__media { flex-shrink: 0; overflow: hidden; background: var(--kit-surface-alt); }
.kit-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--kit-ease);
}

.kit-card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.4rem;
  padding: var(--kit-card-pad);
}

.kit-card__eyebrow {
  color: var(--kit-accent-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--kit-eyebrow-tracking);
  text-transform: uppercase;
}

.kit-card__title {
  color: var(--kit-text);
  font-family: var(--font-heading, inherit);
  font-size: 1.2rem;
  font-weight: var(--kit-heading-weight);
  letter-spacing: var(--kit-heading-tracking);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.kit-card__link { color: inherit; text-decoration: none; }
.kit-card__meta { color: var(--kit-muted); font-size: 0.875rem; }
.kit-card__body { color: var(--kit-muted); font-size: 0.9375rem; line-height: 1.6; }
.kit-card__body > * + * { margin-block-start: 0.6rem; }

/* The whole card is the link. */
.kit-card--linked .kit-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* Links, buttons and forms inside a linked card (a heart, Add to cart) stay clickable above the card's own link. */
.kit-card--linked .kit-card__body :where(a, button, form, input, select, label) { position: relative; z-index: 2; }

.kit-card--linked .kit-card__link:focus-visible { outline: none; }
.kit-card--linked .kit-card__link:focus-visible::after {
  outline: 2px solid var(--kit-focus);
  outline-offset: 2px;
}

.kit-card--linked:hover { border-color: var(--kit-line-strong); }
.kit-card--linked.kit-card--surface:hover { box-shadow: var(--kit-shadow-hover); }
.kit-card--linked:hover .kit-card__link { color: var(--kit-accent-text); }
.kit-card--linked:hover .kit-card__media img { transform: scale(1.04); }

/* Picture */
.kit-picture {
  position: relative;
  overflow: hidden;
  background: var(--kit-surface-alt);
}

.kit-picture img { width: 100%; height: auto; }
.kit-picture:not(.kit-ratio--auto) img { height: 100%; }
.kit-fit--cover img { object-fit: cover; }
.kit-fit--contain img { object-fit: contain; }
.kit-picture.kit-rounded { border-radius: var(--kit-media-radius); }

/* Icon */
.kit-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--kit-text);
  stroke-width: 1.8;
}

.kit-icon--small { width: 1.1rem; height: 1.1rem; }
.kit-icon--large { width: 2.25rem; height: 2.25rem; stroke-width: 1.5; }
.kit-tone--accent { color: var(--kit-accent-text); }
.kit-tone--muted { color: var(--kit-muted); }

/* Chip */
.kit-chip {
  --kit-tone: var(--kit-text);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--kit-tone) 24%, transparent);
  border-radius: var(--kit-chip-radius);
  background: color-mix(in srgb, var(--kit-tone) 10%, transparent);
  color: var(--kit-tone);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.kit-chip--info { --kit-tone: var(--kit-info); }
.kit-chip--success { --kit-tone: var(--kit-success); }
.kit-chip--warning { --kit-tone: var(--kit-warning); }
.kit-chip--danger { --kit-tone: var(--kit-danger); }
.kit-chip--accent { --kit-tone: var(--kit-accent-text); }

/* Price */
.kit-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.4rem;
  color: var(--kit-text);
}

.kit-price__amount {
  font-family: var(--font-heading, inherit);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--kit-heading-weight);
  line-height: 1.2;
}

.kit-price--large .kit-price__amount { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); letter-spacing: var(--kit-heading-tracking); }
.kit-price__period { color: var(--kit-muted); font-size: 0.9375rem; }
.kit-price__note { flex-basis: 100%; color: var(--kit-muted); font-size: 0.8125rem; }

/* Rating */
.kit-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
}

.kit-rating__star {
  --kit-star-off: color-mix(in srgb, var(--kit-text) 20%, transparent);
  width: 1.15rem;
  height: 1.15rem;
  background: var(--kit-star-off);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kit-rating__star--full { background: var(--kit-star); }
.kit-rating__star--half { background: linear-gradient(90deg, var(--kit-star) 50%, var(--kit-star-off) 50%); }
.kit-rating__count { margin-inline-start: 0.5rem; color: var(--kit-muted); font-size: 0.875rem; }

/* Stat */
.kit-stat {
  display: grid;
  gap: 0.2rem;
}

.kit-stat__value {
  color: var(--kit-text);
  font-family: var(--font-heading, inherit);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  font-variant-numeric: tabular-nums;
  font-weight: var(--kit-heading-weight);
  letter-spacing: var(--kit-heading-tracking);
  line-height: 1.1;
}

.kit-stat__suffix { margin-inline-start: 0.1em; color: var(--kit-accent-text); }
.kit-stat__label { color: var(--kit-muted); font-size: 0.9375rem; }

/* Avatar */
.kit-avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--kit-soft);
  color: var(--kit-accent-text);
  font-family: var(--font-heading, inherit);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}

.kit-avatar img { width: 100%; height: 100%; object-fit: cover; }
.kit-avatar--initials { letter-spacing: 0.02em; text-transform: uppercase; }
.kit-avatar--small { width: 2rem; height: 2rem; font-size: 0.8rem; }
.kit-avatar--large { width: 4.5rem; height: 4.5rem; font-size: 1.5rem; }

/* Quote */
.kit-quote {
  padding-inline-start: 1.25rem;
  border-inline-start: 3px solid var(--kit-accent);
}

.kit-quote__text {
  color: var(--kit-text);
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.125rem, 1.05rem + 0.5vw, 1.4rem);
  font-style: italic;
  line-height: 1.5;
}

.kit-quote__author {
  margin-top: 0.75rem;
  color: var(--kit-text);
  font-size: 0.9375rem;
  font-weight: 600;
}

.kit-quote__role {
  display: block;
  color: var(--kit-muted);
  font-size: 0.8125rem;
  font-weight: 400;
}

/* Key values */
.kit-key-values {
  display: grid;
  align-content: start;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--kit-gap-large);
}

@media (min-width: 40rem) {
  .kit-key-values { grid-template-columns: repeat(var(--kit-columns, 1), minmax(0, 1fr)); }
}

.kit-key-values__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.15rem 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--kit-line);
}

.kit-key-values__row dt { color: var(--kit-muted); font-size: 0.9375rem; }
.kit-key-values__row dd { color: var(--kit-text); font-weight: 600; margin-inline-start: auto; text-align: end; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ 7. Fields (calculators and module forms) */

.kit-field {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.kit-field__label {
  color: var(--kit-text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.kit-input {
  display: block;
  width: 100%;
  min-height: 2.875rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--kit-line-strong);
  border-radius: var(--kit-input-radius);
  background-color: var(--kit-surface);
  color: var(--kit-text);
  font-family: var(--font-body, inherit);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--kit-speed) ease, box-shadow var(--kit-speed) ease, background-color var(--kit-speed) ease;
  -webkit-appearance: none;
  appearance: none;
}

.kit-input::placeholder { color: color-mix(in srgb, var(--kit-muted) 75%, transparent); opacity: 1; }
.kit-input:hover { border-color: color-mix(in srgb, var(--kit-text) 48%, transparent); }
.kit-input:focus { border-color: var(--kit-focus); }
.kit-input:focus-visible {
  outline: 2px solid var(--kit-focus);
  outline-offset: 0;
}
.kit-input:disabled { cursor: not-allowed; opacity: 0.6; }
.kit-input[aria-invalid="true"] { border-color: var(--kit-danger); }
.kit-input[aria-invalid="true"]:focus-visible { outline-color: var(--kit-danger); }

.kit-textarea { min-height: 7.5rem; resize: vertical; }

.kit-select {
  padding-inline-end: 2.5rem;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.3rem) 50%, calc(100% - 0.95rem) 50%;
  background-repeat: no-repeat;
  background-size: 0.35rem 0.35rem;
}

[dir="rtl"] .kit-select,
.kit-root[dir="rtl"] .kit-select { background-position: 0.95rem 50%, 1.3rem 50%; }

.kit-input[type="date"],
.kit-input[type="time"] { min-width: 0; }

/* The file picker keeps the browser's own button, drawn like a quiet kit button inside the field. */
.kit-file {
  padding-block: 0.45rem;
  cursor: pointer;
}

.kit-file::file-selector-button {
  margin-inline-end: 0.75rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--kit-line-strong);
  border-radius: var(--kit-button-radius, var(--kit-input-radius));
  background: var(--kit-surface-alt, var(--kit-surface));
  color: var(--kit-text);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

/* A form that stays in the browser (the kit's form component) lays its fields out like a module form. */
.kit-form--local { margin: 0; }

/* Tick boxes and radio buttons keep the browser's own control, tinted with the accent. */
.kit-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
}

.kit-check__input {
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.2rem 0 0;
  accent-color: var(--kit-accent);
  cursor: pointer;
}

.kit-check label {
  color: var(--kit-text);
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.kit-radios { display: grid; gap: 0.6rem; }
.kit-radios > .kit-field__label { margin-bottom: 0.1rem; padding: 0; }

.kit-output {
  display: block;
  color: var(--kit-text);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.kit-output--large {
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  font-weight: var(--kit-heading-weight);
  line-height: 1.15;
}

/* ------------------------------------------------------------------ 8. Interactive */

/* Tabs. Without JavaScript the panels simply follow each other, each with its title. */
.kit-tab__label {
  margin-bottom: 0.75rem;
  color: var(--kit-text);
  font-family: var(--font-heading, inherit);
  font-size: 1.25rem;
  font-weight: var(--kit-heading-weight);
}

.kit-tab + .kit-tab { margin-top: 2rem; }
.kit-tabs--ready > .kit-tab + .kit-tab { margin-top: 0; }
.kit-tabs--ready > .kit-tab > .kit-tab__label { display: none; }

.kit-tabs__list {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--kit-line);
  scrollbar-width: thin;
}

.kit-tabs__tab {
  position: relative;
  flex-shrink: 0;
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: var(--kit-radius-sm) var(--kit-radius-sm) 0 0;
  background: transparent;
  color: var(--kit-muted);
  cursor: pointer;
  font-family: var(--font-body, inherit);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: color var(--kit-speed) ease, background-color var(--kit-speed) ease;
}

.kit-tabs__tab::after {
  content: "";
  position: absolute;
  inset: auto 0.5rem 0;
  height: 2px;
  background: transparent;
  transition: background-color var(--kit-speed) ease;
}

.kit-tabs__tab:hover { color: var(--kit-text); background: var(--kit-soft); }
.kit-tabs__tab[aria-selected="true"] { color: var(--kit-text); }
.kit-tabs__tab[aria-selected="true"]::after { background: var(--kit-accent); }
.kit-tab:focus-visible { outline-offset: 4px; }

/* Accordion */
.kit-accordion {
  border-top: 1px solid var(--kit-line);
}

.kit-accordion__item { border-bottom: 1px solid var(--kit-line); }

.kit-accordion__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0.25rem;
  color: var(--kit-text);
  cursor: pointer;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
}

.kit-accordion__title::-webkit-details-marker { display: none; }
.kit-accordion__title::marker { content: ""; }
.kit-accordion__title:hover { color: var(--kit-accent-text); }

.kit-accordion__chevron {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--kit-muted);
  transition: transform var(--kit-speed) var(--kit-ease);
}

.kit-accordion__item[open] .kit-accordion__chevron { transform: rotate(180deg); }
.kit-accordion__body { padding: 0 0.25rem 1.25rem; color: var(--kit-muted); }

/* Dialog */
.kit-dialog-wrap { display: inline-block; max-width: 100%; }

.kit-dialog {
  width: min(40rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--kit-line);
  border-radius: var(--kit-radius);
  background: var(--kit-surface);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
  color: var(--kit-text);
  text-align: start;
}

/* A dialog opened from a dark or accent band is a plain panel, so it takes the theme's ordinary colours back. */
:is(.kit-section--inverse, .kit-section--accent, .kit-section--image) :is(.kit-dialog, .kit-drawer) {
  --kit-text: var(--text-primary, #1c1c1c);
  --kit-muted: var(--text-secondary, #5b5b5b);
  --kit-surface: var(--surface, #fff);
  --kit-surface-alt: var(--surface-alt, #f3f3f1);
  --kit-primary: var(--primary, #1c1c1c);
  --kit-primary-hover: var(--primary-alt, var(--primary, #000));
  --kit-on-primary: var(--on-primary, #fff);
  --kit-accent: var(--accent, var(--primary, #1c1c1c));
  --kit-accent-text: var(--accent-ink, color-mix(in srgb, var(--kit-accent) 62%, var(--kit-text)));
  --kit-on-accent: var(--on-accent, #fff);
  --kit-line: var(--border, color-mix(in srgb, var(--kit-text) 14%, transparent));
  --kit-line-strong: color-mix(in srgb, var(--kit-text) 30%, transparent);
  --kit-soft: color-mix(in srgb, var(--kit-accent) 12%, transparent);
  --kit-focus: var(--kit-accent);
  --kit-info: #1d4ed8;
  --kit-success: #15803d;
  --kit-warning: #b45309;
  --kit-danger: #b91c1c;
}

.kit-dialog::backdrop {
  background: rgba(10, 12, 16, 0.55);
  backdrop-filter: blur(2px);
}

.kit-dialog[open] { animation: kit-dialog-in 200ms var(--kit-ease); }

@keyframes kit-dialog-in {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.kit-dialog__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem 0.5rem;
  background: var(--kit-surface);
}

.kit-dialog__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--kit-text);
  font-family: var(--font-heading, inherit);
  font-size: 1.3rem;
  font-weight: var(--kit-heading-weight);
  letter-spacing: var(--kit-heading-tracking);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.kit-dialog__close {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: -0.35rem -0.45rem 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--kit-muted);
  cursor: pointer;
  transition: background-color var(--kit-speed) ease, color var(--kit-speed) ease;
}

.kit-dialog__close:hover { background: var(--kit-surface-alt); color: var(--kit-text); }
.kit-dialog__close svg { width: 1.25rem; height: 1.25rem; }
.kit-dialog__body { padding: 0.5rem 1.25rem 1.5rem; }

/* Carousel. Scroll-snapping makes it work by itself; kit.js adds the arrow buttons. */
.kit-carousel {
  --kit-pv: var(--kit-per-view, 1);
  position: relative;
}

@media (max-width: 63.99rem) { .kit-carousel { --kit-pv: min(var(--kit-per-view, 1), 2); } }
@media (max-width: 39.99rem) { .kit-carousel { --kit-pv: 1; } }

.kit-carousel__track {
  display: flex;
  gap: var(--kit-gap-medium);
  padding-bottom: 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.kit-carousel__track > * {
  flex: 0 0 calc((100% - (var(--kit-pv) - 1) * var(--kit-gap-medium)) / var(--kit-pv));
  min-width: 0;
  scroll-snap-align: start;
}

.kit-carousel__controls {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.kit-carousel__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--kit-line-strong);
  border-radius: 50%;
  background: var(--kit-surface);
  color: var(--kit-text);
  cursor: pointer;
  transition: background-color var(--kit-speed) ease, border-color var(--kit-speed) ease, opacity var(--kit-speed) ease;
}

.kit-carousel__button:hover:not(:disabled) { border-color: var(--kit-accent); background: var(--kit-soft); }
.kit-carousel__button:disabled { cursor: default; opacity: 0.4; }
.kit-carousel__button svg { width: 1.25rem; height: 1.25rem; }

/* Notice */
.kit-notice {
  --kit-tone: var(--kit-info);
  padding: 1rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--kit-tone) 30%, transparent);
  border-inline-start: 4px solid var(--kit-tone);
  border-radius: var(--kit-radius-sm);
  background: color-mix(in srgb, var(--kit-tone) 8%, var(--kit-surface));
  color: var(--kit-text);
}

.kit-notice--success { --kit-tone: var(--kit-success); }
.kit-notice--warning { --kit-tone: var(--kit-warning); }
.kit-notice--danger { --kit-tone: var(--kit-danger); }
.kit-notice__title { color: var(--kit-text); font-weight: 700; }
.kit-notice__body,
.kit-notice__text { color: var(--kit-text); font-size: 0.9375rem; }
.kit-notice__title + .kit-notice__body { margin-top: 0.25rem; }

/* Toasts: short messages an action answers with, in the corner of the page. */
.kit-toasts {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline: 1rem;
  z-index: 2147483000;
  display: grid;
  justify-items: end;
  gap: 0.5rem;
  pointer-events: none;
}

.kit-toast {
  --kit-tone: var(--kit-info);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: min(26rem, 100%);
  padding: 0.75rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--kit-tone) 35%, transparent);
  border-inline-start: 4px solid var(--kit-tone);
  border-radius: var(--kit-radius-sm);
  background: var(--kit-surface);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.14);
  color: var(--kit-text);
  font-size: 0.9375rem;
  line-height: 1.4;
  pointer-events: auto;
}

.kit-toast--success { --kit-tone: var(--kit-success); }
.kit-toast--warning { --kit-tone: var(--kit-warning); }
.kit-toast--danger { --kit-tone: var(--kit-danger); }
.kit-toast__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

.kit-toast__close {
  flex: 0 0 auto;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--kit-muted);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.kit-toast__close:hover { color: var(--kit-text); }

/* A value a form sends without showing it. */
.kit-hidden { display: none; }

/* A form that calls an action: a form, busy while its call is on its way. */
.kit-action-form[aria-busy="true"] { opacity: 0.7; }

/* A section or widget being drawn again (api.refresh, an action's refresh): dimmed a little, still readable and clickable. */
.kit-root.kit-is-refreshing {
  opacity: 0.65;
  transition: opacity 0.15s ease-out;
}

/* Empty state */
.kit-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 2.5rem 1.25rem;
  border: 1px dashed var(--kit-line-strong);
  border-radius: var(--kit-radius);
  color: var(--kit-muted);
  text-align: center;
}

.kit-empty__icon { width: 2rem; height: 2rem; margin-bottom: 0.35rem; color: var(--kit-muted); stroke-width: 1.5; }
.kit-empty__title { color: var(--kit-text); font-weight: 600; }
.kit-empty__text { max-width: 28rem; font-size: 0.9375rem; }

/* ------------------------------------------------------------------ 9. Frames (embed, map, video) */

.kit-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--kit-media-radius);
  background: var(--kit-surface-alt);
}

.kit-frame > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.kit-video .kit-frame { aspect-ratio: 16 / 9; }

/* Waiting for the visitor's consent: a quiet placeholder instead of the outside page. */
.kit-frame--waiting {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 11rem;
  overflow: visible;
  border: 1px dashed var(--kit-line-strong);
}

.kit-frame__notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: 30rem;
  padding: 1.25rem;
  color: var(--kit-muted);
  font-size: 0.9375rem;
  text-align: center;
}

.kit-frame__notice p { line-height: 1.5; }
.kit-video .kit-frame--waiting { min-height: 0; }

/* ------------------------------------------------------------------ 10. Module forms */

.kit-form,
.kit-form__step {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  min-width: 0;
}

.kit-form > *,
.kit-form__step > * { grid-column: 1 / -1; min-width: 0; }

@media (min-width: 40rem) {
  .kit-form__item--half { grid-column: auto; }
}

.kit-form__step-title {
  color: var(--kit-text);
  font-family: var(--font-heading, inherit);
  font-size: 1.2rem;
  font-weight: var(--kit-heading-weight);
  letter-spacing: var(--kit-heading-tracking);
  line-height: 1.3;
}

.kit-form__progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--kit-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.kit-form__progress-bar {
  display: flex;
  flex: 1 1 auto;
  gap: 0.3rem;
}

.kit-form__progress-bar > span {
  flex: 1 1 0;
  height: 4px;
  border-radius: 999px;
  background: var(--kit-line-strong);
  transition: background-color var(--kit-speed) ease;
}

.kit-form__progress-bar > .is-done,
.kit-form__progress-bar > .is-current { background: var(--kit-accent); }

.kit-form__error {
  margin-top: 0.4rem;
  color: var(--kit-danger);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.kit-form__item.is-invalid .kit-field__label { color: var(--kit-danger); }

.kit-form__summary {
  padding: 1rem 1.15rem;
  border: 1px solid var(--kit-line);
  border-radius: var(--kit-radius);
  background: var(--kit-surface-alt);
}

.kit-form__summary:empty { display: none; }
.kit-form__summary .kit-key-values { grid-template-columns: minmax(0, 1fr); }
.kit-form__summary .kit-key-values__row:last-child { border-bottom: 0; padding-bottom: 0; }
.kit-form__summary .kit-key-values__row:first-child { padding-top: 0; }

.kit-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.kit-form__message {
  padding: 0.9rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--kit-tone, var(--kit-info)) 30%, transparent);
  border-inline-start: 4px solid var(--kit-tone, var(--kit-info));
  border-radius: var(--kit-radius-sm);
  background: color-mix(in srgb, var(--kit-tone, var(--kit-info)) 8%, var(--kit-surface));
  color: var(--kit-text);
  font-size: 0.9375rem;
}

.kit-form__message--success { --kit-tone: var(--kit-success); }
.kit-form__message--error { --kit-tone: var(--kit-danger); }
.kit-form__message:focus { outline: none; }

/* The spam trap stays in the page for bots but out of sight and out of the tab order. */
.kit-form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.kit-form[aria-busy="true"] { cursor: progress; }
.kit-form[aria-busy="true"] .kit-button[type="submit"],
.kit-form[aria-busy="true"] .kit-button[data-kit-step-next] {
  position: relative;
  pointer-events: none;
}

.kit-form[aria-busy="true"] .kit-button[type="submit"]::after {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: kit-spin 700ms linear infinite;
}

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

/* After sending, only the thank-you message stays. */
.kit-form[data-kit-state="sent"] > :not(.kit-form__message) { display: none; }

/* ------------------------------------------------------------------ Kit level 3: pagination, compare, slideshow, section video */

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

/* The website's enquiry form in a kit block: the theme's script sends it (.contact-form); the trap field stays out of sight. */
.kit-enquiry { display: grid; gap: var(--kit-gap-medium, 1rem); }
.kit-enquiry__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.kit-enquiry__error:empty { display: none; }
.kit-enquiry .kit-form__actions .kit-button { width: 100%; justify-content: center; }

/* Download (kit 4): a document's name, with its type and size under it. */
.kit-download {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--kit-line);
  border-radius: var(--kit-radius-sm);
  background: var(--kit-surface);
  color: var(--kit-text);
  text-decoration: none;
  transition: border-color var(--kit-speed, 0.2s) ease, background-color var(--kit-speed, 0.2s) ease;
}

.kit-download:hover { border-color: var(--kit-accent); background: var(--kit-soft); }
.kit-download__icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--kit-accent-text); }
.kit-download__text { display: flex; flex-direction: column; min-width: 0; }
.kit-download__label { font-weight: 600; overflow-wrap: anywhere; }
.kit-download__meta { color: var(--kit-muted); font-size: 0.85em; }

/* Pagination: previous, "Page 2 of 5", next; an absent link keeps its place. */
.kit-pagination {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
}

.kit-pagination__prev { justify-self: end; }
.kit-pagination__next { justify-self: start; }
.kit-pagination__status { color: var(--kit-muted); font-size: 0.95em; white-space: nowrap; }

/* Compare: side by side without JavaScript; stacked with a line to slide once kit.js is ready. */
.kit-compare { margin: 0; }

.kit-compare__frame {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kit-gap-small, 0.5rem);
}

.kit-compare:not(.is-ready) .kit-compare__frame { aspect-ratio: auto; }

.kit-compare__side {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--kit-media-radius);
  background: var(--kit-surface-alt);
}

.kit-compare__side img { display: block; width: 100%; height: 100%; object-fit: cover; }

.kit-compare__label {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, #000 62%, transparent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
}

.kit-compare__range,
.kit-compare__knob { display: none; }

.kit-compare.is-ready .kit-compare__frame {
  display: block;
  overflow: hidden;
  border-radius: var(--kit-media-radius);
}

.kit-compare.is-ready .kit-compare__side {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.kit-compare.is-ready .kit-compare__side--before { z-index: 0; }
.kit-compare.is-ready .kit-compare__side--after { clip-path: inset(0 0 0 var(--kit-compare, 50%)); }
.kit-compare.is-ready .kit-compare__side--after .kit-compare__label { left: auto; right: 0.75rem; }

.kit-compare.is-ready .kit-compare__frame::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--kit-compare, 50%);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, #000 22%, transparent);
  pointer-events: none;
}

/* The range input covers the frame, invisible, so a drag anywhere moves the line; the knob shows where it is. */
.kit-compare.is-ready .kit-compare__range {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}

.kit-compare.is-ready .kit-compare__knob {
  position: absolute;
  top: 50%;
  left: var(--kit-compare, 50%);
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  margin: -1.375rem 0 0 -1.375rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: color-mix(in srgb, #000 45%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, #000 30%, transparent);
  pointer-events: none;
}

.kit-compare.is-ready .kit-compare__knob::before,
.kit-compare.is-ready .kit-compare__knob::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
}

.kit-compare.is-ready .kit-compare__knob::before { left: 0.6rem; transform: rotate(-45deg); }
.kit-compare.is-ready .kit-compare__knob::after { right: 0.6rem; transform: rotate(135deg); }

.kit-compare__range:focus-visible + .kit-compare__knob { outline: 3px solid var(--kit-focus, #fff); outline-offset: 3px; }

.kit-compare__caption { margin-top: 0.75rem; color: var(--kit-muted); font-size: 0.9rem; text-align: center; }

/* Slideshow: the first slide alone without JavaScript; one slide at a time, fading, once kit.js is ready. */
.kit-slideshow { position: relative; isolation: isolate; }
.kit-slideshow__track { display: grid; }

.kit-slide {
  --kit-section-bg: #17181a;
  --kit-section-fg: #fff;
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  min-height: clamp(26rem, 62vh, 40rem);
  padding: clamp(3rem, 8vw, 6rem) var(--kit-gutter);
}

.kit-slide--image {
  background-image: linear-gradient(color-mix(in srgb, #000 55%, transparent), color-mix(in srgb, #000 55%, transparent)), var(--kit-slide-image, none);
  background-position: center;
  background-size: cover;
}

.kit-slide__inner {
  width: 100%;
  max-width: calc(var(--kit-width-narrow, 48rem) + 2 * var(--kit-gutter));
  margin-inline: auto;
}

.kit-slide--center .kit-slide__inner { text-align: center; }
.kit-slide--left .kit-slide__inner { max-width: calc(var(--kit-width-normal, 72rem) + 2 * var(--kit-gutter)); }

.kit-slideshow:not(.is-ready) .kit-slide + .kit-slide { display: none; }

.kit-slideshow.is-ready .kit-slide {
  padding-bottom: 5.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.kit-slideshow.is-ready .kit-slide.is-current {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease;
}

.kit-slideshow__controls {
  position: absolute;
  inset-inline: 0;
  bottom: 1rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}

.kit-slideshow__controls > * { pointer-events: auto; }

.kit-slideshow__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, #fff 60%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, #000 35%, transparent);
  color: #fff;
  cursor: pointer;
  transition: background-color var(--kit-speed, 0.2s) ease;
}

.kit-slideshow__button:hover { background: color-mix(in srgb, #000 58%, transparent); }
.kit-slideshow__button svg { width: 1.25rem; height: 1.25rem; }
.kit-slideshow__button--pause { margin-inline-start: 0.5rem; }

.kit-slideshow__dots { display: flex; }

.kit-slideshow__dot {
  position: relative;
  width: 1.5rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.kit-slideshow__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.6rem;
  height: 0.6rem;
  margin: -0.3rem 0 0 -0.3rem;
  border-radius: 50%;
  background: color-mix(in srgb, #fff 55%, transparent);
  transition: transform var(--kit-speed, 0.2s) ease, background-color var(--kit-speed, 0.2s) ease;
}

.kit-slideshow__dot[aria-current="true"]::before { background: #fff; transform: scale(1.35); }

.kit-slideshow :focus-visible { outline-color: #fff; }

/* A section's background video: the picture shows until the video plays, then the video takes the same shade. */
.kit-section--video { position: relative; isolation: isolate; overflow: hidden; }

.kit-section__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.kit-section__video.is-playing { opacity: 1; }

.kit-section--video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, #000 58%, transparent);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.kit-section--video:has(.kit-section__video.is-playing)::before { opacity: 1; }

@media (max-width: 47.99rem) {
  .kit-section__video { display: none; }
}

/* ------------------------------------------------------------------ Kit level 5: the shop components */

/* Price extras: "From", the old price struck through, a tax note and the sale badge. */
.kit-price__from {
  margin-inline-end: 0.1rem;
  color: var(--kit-muted);
  font-size: 0.875rem;
  font-weight: 500;
}

.kit-price__compare {
  color: var(--kit-muted);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.kit-price--reduced .kit-price__amount { color: var(--kit-danger); }
.kit-price__tax { color: var(--kit-muted); font-size: 0.8125rem; }

/* Badge: Sale and New are filled, Low stock and Sold out are quiet. The tone variables carry the colours. */
.kit-badge {
  --kit-badge-bg: var(--kit-surface-alt);
  --kit-badge-fg: var(--kit-text);
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--kit-chip-radius);
  background: var(--kit-badge-bg);
  color: var(--kit-badge-fg);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

.kit-badge--sale { --kit-badge-bg: var(--kit-danger); --kit-badge-fg: #fff; }
.kit-badge--new { --kit-badge-bg: var(--kit-accent); --kit-badge-fg: var(--kit-on-accent); }
.kit-badge--sold-out { --kit-badge-bg: var(--kit-surface-alt); --kit-badge-fg: var(--kit-muted); border-color: var(--kit-line-strong); }

.kit-badge--low-stock {
  --kit-badge-bg: color-mix(in srgb, var(--kit-warning) 14%, var(--kit-surface));
  --kit-badge-fg: var(--kit-warning);
  border-color: color-mix(in srgb, var(--kit-warning) 40%, transparent);
}

/* In dark and accent bands the danger colour is a pale red, so its text turns dark. */
:is(.kit-section--inverse, .kit-section--accent, .kit-section--image, .kit-slide) .kit-badge--sale { --kit-badge-fg: #17181a; }

/* Gallery. The main pictures are a scrolling row that snaps to one picture, so swiping, the keyboard and the
   scroll wheel work without JavaScript; kit.js adds the arrows, the counter and the large view. */
.kit-gallery {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  text-align: start;
}

.kit-gallery__stage {
  position: relative;
  min-width: 0;
}

.kit-gallery__slides {
  display: flex;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--kit-media-radius);
  background: var(--kit-surface-alt);
}

.kit-gallery__slides::-webkit-scrollbar { display: none; }

.kit-gallery--single .kit-gallery__slides { overflow: hidden; }

.kit-gallery__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.kit-gallery__zoom {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

.kit-gallery__zoom,
.kit-gallery__open { -webkit-tap-highlight-color: transparent; }

/* The picture fills its slide and the row clips what lies outside, so the focus ring is drawn inside. */
.kit-gallery__zoom:focus-visible,
.kit-gallery__open:focus-visible { outline-offset: -4px; }

/* Once scripts run the link is a button around the picture. */
.kit-gallery__open {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: zoom-in;
  font: inherit;
}

.kit-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
}

.kit-gallery__thumbs {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 4px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}

.kit-gallery__thumbitem { flex: 0 0 auto; }

.kit-gallery__thumb {
  display: block;
  width: 4.25rem;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--kit-radius-sm);
  background: var(--kit-surface-alt);
  cursor: pointer;
  font: inherit;
  opacity: 0.72;
  transition: opacity var(--kit-speed) ease, border-color var(--kit-speed) ease;
}

.kit-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kit-gallery__thumb:hover { opacity: 1; }
.kit-gallery__thumb[aria-current="true"] { border-color: var(--kit-accent); opacity: 1; }
.kit-gallery__thumb:focus-visible { outline-offset: 1px; }

.kit-gallery__button {
  position: absolute;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -1.375rem 0 0;
  padding: 0;
  border: 1px solid var(--kit-line-strong);
  border-radius: 50%;
  background: color-mix(in srgb, var(--kit-surface) 90%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, #000 18%, transparent);
  color: var(--kit-text);
  cursor: pointer;
  transition: opacity var(--kit-speed) ease, background-color var(--kit-speed) ease;
}

.kit-gallery__button--previous { inset-inline-start: 0.75rem; }
.kit-gallery__button--next { inset-inline-end: 0.75rem; }
.kit-gallery__button:hover:not(:disabled) { background: var(--kit-surface); }
.kit-gallery__button:disabled { opacity: 0; pointer-events: none; }

/* The arrow is a chevron drawn with two borders. */
.kit-gallery__button::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  border-top: 2px solid currentColor;
  border-inline-start: 2px solid currentColor;
}

.kit-gallery__button--previous::before { transform: translateX(0.12rem) rotate(-45deg); }
.kit-gallery__button--next::before { transform: translateX(-0.12rem) rotate(135deg); }
.kit-gallery__button--previous:dir(rtl)::before { transform: translateX(-0.12rem) rotate(135deg); }
.kit-gallery__button--next:dir(rtl)::before { transform: translateX(0.12rem) rotate(-45deg); }

.kit-gallery__count {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-end: 0.75rem;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, #000 62%, transparent);
  color: #fff;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.5;
  pointer-events: none;
}

@media (pointer: coarse) {
  .kit-gallery__button { display: none; }
}

/* The large view of a picture: a dark layer over the page with the picture fitted to the screen; a click on the
   picture shows it at its own size, which can be scrolled. */
.kit-gallery__viewer {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 0;
  background: rgb(10 12 16 / 0.94);
  color: #fff;
  overscroll-behavior: contain;
}

.kit-gallery__viewer::backdrop { background: transparent; }

.kit-gallery__viewer-stage {
  display: flex;
  min-width: 100%;
  min-height: 100%;
  padding: 4rem 1rem;
}

.kit-gallery__viewer-picture {
  display: block;
  margin: auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.kit-gallery__viewer-picture img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 8rem);
  object-fit: contain;
}

.kit-gallery__viewer.is-actual .kit-gallery__viewer-picture { cursor: zoom-out; }
.kit-gallery__viewer.is-actual .kit-gallery__viewer-picture img { max-width: none; max-height: none; }

.kit-gallery__viewer-close {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, #000 55%, transparent);
  color: #fff;
  cursor: pointer;
}

.kit-gallery__viewer-close::before,
.kit-gallery__viewer-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.kit-gallery__viewer-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.kit-gallery__viewer-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.kit-gallery__viewer .kit-gallery__button {
  position: fixed;
  z-index: 2;
  border-color: color-mix(in srgb, #fff 45%, transparent);
  background: color-mix(in srgb, #000 55%, transparent);
  color: #fff;
}

.kit-gallery__viewer .kit-gallery__button:hover:not(:disabled) { background: color-mix(in srgb, #000 78%, transparent); }

/* The arrows of the large view stay on touch screens: there is no row to swipe in it. */
.kit-gallery__viewer .kit-gallery__button { display: inline-flex; }

.kit-gallery__viewer-count {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline: 0;
  z-index: 2;
  color: color-mix(in srgb, #fff 80%, transparent);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  pointer-events: none;
}

.kit-gallery__viewer :focus-visible { outline-color: #fff; }

/* Quantity: minus, the number, plus. Without JavaScript only the number input shows, with the browser's own arrows. */
.kit-quantity {
  display: inline-flex;
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  min-height: 2.75rem;
  overflow: hidden;
  border: 1px solid var(--kit-line-strong);
  border-radius: var(--kit-button-radius);
  background: var(--kit-surface);
  color: var(--kit-text);
  transition: border-color var(--kit-speed) ease;
}

.kit-quantity:hover { border-color: color-mix(in srgb, var(--kit-text) 48%, transparent); }
.kit-quantity:has(:focus-visible) { outline: 2px solid var(--kit-focus); outline-offset: 2px; }
.kit-quantity :focus-visible { outline: none; }

.kit-quantity__input {
  width: 4.5rem;
  min-width: 0;
  padding: 0 0.5rem;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: center;
}

.kit-quantity.is-ready .kit-quantity__input {
  width: 3rem;
  border-inline: 1px solid var(--kit-line);
  -moz-appearance: textfield;
  appearance: textfield;
}

.kit-quantity.is-ready .kit-quantity__input::-webkit-outer-spin-button,
.kit-quantity.is-ready .kit-quantity__input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.kit-quantity__button {
  position: relative;
  flex: 0 0 auto;
  width: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--kit-speed) ease;
}

/* The minus and the plus are drawn with bars, so they need no icon font. */
.kit-quantity__button::before,
.kit-quantity__button--plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.kit-quantity__button--plus::after { width: 2px; height: 0.8rem; }
.kit-quantity__button:hover:not(:disabled) { background: var(--kit-soft); }
.kit-quantity__button:disabled { cursor: not-allowed; opacity: 0.35; }

.kit-quantity--small { min-height: 2.25rem; font-size: 0.875rem; }
.kit-quantity--small .kit-quantity__button { width: 2.25rem; }
.kit-quantity--small .kit-quantity__input { font-size: 0.9375rem; }
.kit-quantity--small.is-ready .kit-quantity__input { width: 2.5rem; }

/* Option picker: buttons and swatches are radio buttons stretched over their face, so the whole face clicks. */
.kit-options { display: grid; gap: 0.5rem; text-align: start; }
.kit-options__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.kit-options__chosen { color: var(--kit-muted); font-weight: 500; }

.kit-option {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  cursor: pointer;
}

.kit-option__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.kit-option__face {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.95rem;
  border: 1px solid var(--kit-line-strong);
  border-radius: var(--kit-button-radius);
  background: var(--kit-surface);
  color: var(--kit-text);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: border-color var(--kit-speed) ease, background-color var(--kit-speed) ease, color var(--kit-speed) ease;
}

.kit-option__text { overflow-wrap: anywhere; }
.kit-option:hover .kit-option__face { border-color: var(--kit-accent); }

.kit-option__input:checked + .kit-option__face {
  border-color: var(--kit-primary);
  background: var(--kit-primary);
  color: var(--kit-on-primary);
}

.kit-option__input:focus-visible + .kit-option__face {
  outline: 2px solid var(--kit-focus);
  outline-offset: 2px;
}

/* Not available: dashed, quiet and crossed through. The choice can still be made unless it is disabled. */
.kit-option.is-unavailable .kit-option__face { border-style: dashed; color: var(--kit-muted); }

.kit-option.is-unavailable .kit-option__face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--kit-line-strong) calc(50% - 0.5px), var(--kit-line-strong) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  pointer-events: none;
}

.kit-option.is-unavailable .kit-option__input:checked + .kit-option__face { color: var(--kit-on-primary); }
.kit-option.is-disabled { cursor: not-allowed; opacity: 0.5; }
.kit-option.is-disabled .kit-option__input { cursor: not-allowed; }

.kit-option--swatch .kit-option__face {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 0;
  min-height: 0;
  padding: 3px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
}

.kit-option--swatch:hover .kit-option__face { border-color: var(--kit-line-strong); }

.kit-option--swatch .kit-option__input:checked + .kit-option__face {
  border-color: var(--kit-accent);
  background: transparent;
  color: var(--kit-text);
}

.kit-option__swatch {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.kit-option__swatch--image { object-fit: cover; }
.kit-option__swatch circle { stroke: var(--kit-line-strong); stroke-width: 1; }
.kit-option--swatch.is-unavailable .kit-option__face { border-style: solid; }
.kit-option--swatch.is-unavailable .kit-option__input:checked + .kit-option__face { color: var(--kit-text); }

/* Drawer: a dialog that slides in from the right or the bottom. Until kit.js has run it is part of the page. */
.kit-drawer-wrap { display: block; max-width: 100%; }

.kit-drawer {
  position: static;
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: start;
}

.kit-drawer:not([open]) { display: none; }
.kit-drawer__header { display: none; }

.kit-drawer.is-ready {
  position: fixed;
  max-width: 100%;
  max-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: contain;
  border: 1px solid var(--kit-line);
  background: var(--kit-surface);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
  color: var(--kit-text);
}

.kit-drawer.is-ready[open] {
  display: flex;
  flex-direction: column;
}

.kit-drawer--right.is-ready {
  inset-block: 0;
  inset-inline: auto 0;
  width: min(26rem, 100%);
  height: 100dvh;
  border-width: 0;
  border-inline-start-width: 1px;
  border-start-start-radius: var(--kit-radius);
  border-end-start-radius: var(--kit-radius);
}

.kit-drawer--bottom.is-ready {
  inset-block: auto 0;
  inset-inline: 0;
  width: 100%;
  max-height: min(85dvh, 40rem);
  border-width: 1px 0 0;
  border-start-start-radius: var(--kit-radius);
  border-start-end-radius: var(--kit-radius);
}

.kit-drawer.is-ready::backdrop {
  background: rgba(10, 12, 16, 0.55);
  backdrop-filter: blur(2px);
}

/* A drawer that stays open while its section is drawn again does not slide in a second time. */
.kit-drawer.is-ready.is-restoring { animation: none !important; }
.kit-drawer--right.is-ready[open] { animation: kit-drawer-in-right 220ms var(--kit-ease); }
.kit-drawer--bottom.is-ready[open] { animation: kit-drawer-in-bottom 220ms var(--kit-ease); }
.kit-drawer--right.is-ready.is-closing { animation: kit-drawer-out-right 180ms ease-in forwards; }
.kit-drawer--bottom.is-ready.is-closing { animation: kit-drawer-out-bottom 180ms ease-in forwards; }

@keyframes kit-drawer-in-right { from { transform: translateX(100%); } to { transform: none; } }
@keyframes kit-drawer-out-right { from { transform: none; } to { transform: translateX(100%); } }
@keyframes kit-drawer-in-bottom { from { transform: translateY(100%); } to { transform: none; } }
@keyframes kit-drawer-out-bottom { from { transform: none; } to { transform: translateY(100%); } }
.kit-drawer--right.is-ready:dir(rtl)[open] { animation-name: kit-drawer-in-left; }
.kit-drawer--right.is-ready.is-closing:dir(rtl) { animation-name: kit-drawer-out-left; }
@keyframes kit-drawer-in-left { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes kit-drawer-out-left { from { transform: none; } to { transform: translateX(-100%); } }

.kit-drawer.is-ready .kit-drawer__header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--kit-line);
  background: var(--kit-surface);
}

.kit-drawer__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--kit-text);
  font-family: var(--font-heading, inherit);
  font-size: 1.2rem;
  font-weight: var(--kit-heading-weight);
  letter-spacing: var(--kit-heading-tracking);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.kit-drawer__close {
  position: relative;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  margin-inline-end: -0.4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--kit-muted);
  cursor: pointer;
  transition: background-color var(--kit-speed) ease, color var(--kit-speed) ease;
}

.kit-drawer__close::before,
.kit-drawer__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.kit-drawer__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.kit-drawer__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.kit-drawer__close:hover { background: var(--kit-surface-alt); color: var(--kit-text); }

.kit-drawer.is-ready .kit-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.kit-drawer__body > * + * { margin-block-start: var(--kit-space); }

/* From the width an inline_from option names, the content sits in the page as it is: no panel, no button. */
@media (min-width: 40rem) {
  .kit-drawer-wrap--inline-small > .kit-drawer__trigger.kit-button,
  .kit-drawer-wrap--inline-small > .kit-drawer.kit-drawer--inline-small .kit-drawer__header { display: none; }
  .kit-drawer-wrap--inline-small > .kit-drawer.kit-drawer--inline-small { display: block; }
  .kit-drawer-wrap--inline-small > .kit-drawer.kit-drawer--inline-small.is-ready { position: static; width: auto; max-width: none; height: auto; max-height: none; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: none; transform: none; }
  .kit-drawer-wrap--inline-small > .kit-drawer.kit-drawer--inline-small.is-ready .kit-drawer__body { padding: 0; overflow: visible; }
}

@media (min-width: 48rem) {
  .kit-drawer-wrap--inline-medium > .kit-drawer__trigger.kit-button,
  .kit-drawer-wrap--inline-medium > .kit-drawer.kit-drawer--inline-medium .kit-drawer__header { display: none; }
  .kit-drawer-wrap--inline-medium > .kit-drawer.kit-drawer--inline-medium { display: block; }
  .kit-drawer-wrap--inline-medium > .kit-drawer.kit-drawer--inline-medium.is-ready { position: static; width: auto; max-width: none; height: auto; max-height: none; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: none; transform: none; }
  .kit-drawer-wrap--inline-medium > .kit-drawer.kit-drawer--inline-medium.is-ready .kit-drawer__body { padding: 0; overflow: visible; }
}

@media (min-width: 64rem) {
  .kit-drawer-wrap--inline-large > .kit-drawer__trigger.kit-button,
  .kit-drawer-wrap--inline-large > .kit-drawer.kit-drawer--inline-large .kit-drawer__header { display: none; }
  .kit-drawer-wrap--inline-large > .kit-drawer.kit-drawer--inline-large { display: block; }
  .kit-drawer-wrap--inline-large > .kit-drawer.kit-drawer--inline-large.is-ready { position: static; width: auto; max-width: none; height: auto; max-height: none; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: none; transform: none; }
  .kit-drawer-wrap--inline-large > .kit-drawer.kit-drawer--inline-large.is-ready .kit-drawer__body { padding: 0; overflow: visible; }
}

/* Toast regions: the one in the corner is the kit's; position top moves it to the top of the page. */
.kit-toasts--top { inset-block: 1rem auto; }
.kit-toast { animation: kit-toast-in 200ms var(--kit-ease); }
@keyframes kit-toast-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }

/* Filters: chips for what is on, then the groups, each one a fold. */
.kit-filters {
  display: grid;
  gap: 1rem;
  min-width: 0;
  text-align: start;
}

.kit-filters__active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.kit-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kit-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2rem;
  padding: 0.15rem 0.6rem 0.15rem 0.85rem;
  border: 1px solid var(--kit-line-strong);
  border-radius: var(--kit-chip-radius);
  background: var(--kit-surface);
  color: var(--kit-text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color var(--kit-speed) ease, background-color var(--kit-speed) ease;
}

.kit-filter-chip:hover { border-color: var(--kit-accent); background: var(--kit-soft); }

.kit-filter-chip__x {
  position: relative;
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
}

.kit-filter-chip__x::before,
.kit-filter-chip__x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8rem;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
}

.kit-filter-chip__x::before { transform: translate(-50%, -50%) rotate(45deg); }
.kit-filter-chip__x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.kit-filters__chip { min-width: 0; }
.kit-filters__clear { font-size: 0.875rem; }
.kit-filters__form { display: grid; min-width: 0; }
.kit-filters__groups { display: grid; }
.kit-filters__actions { margin-top: 1rem; }
.kit-filters__actions .kit-button { width: 100%; }

.kit-filter-group {
  min-width: 0;
  border-top: 1px solid var(--kit-line);
}

.kit-filter-group:last-child { border-bottom: 1px solid var(--kit-line); }

.kit-filter-group__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0.25rem;
  color: var(--kit-text);
  cursor: pointer;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
}

.kit-filter-group__title::-webkit-details-marker { display: none; }
.kit-filter-group__title::marker { content: ""; }
.kit-filter-group__title:hover { color: var(--kit-accent-text); }

.kit-filter-group__chevron {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.2rem;
  border-inline-end: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  color: var(--kit-muted);
  transform: rotate(45deg);
  transition: transform var(--kit-speed) var(--kit-ease);
}

.kit-filter-group[open] > .kit-filter-group__title .kit-filter-group__chevron { margin-top: 0.2rem; transform: rotate(-135deg); }

.kit-filter-group__body {
  min-width: 0;
  margin: 0;
  padding: 0 0.25rem 1rem;
  border: 0;
}

.kit-filter-group__list {
  display: grid;
  gap: 0.25rem;
  max-height: 16rem;
  margin: 0;
  padding: 0.3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.kit-filter-group__item .kit-check { align-items: center; }

.kit-filter-group__item .kit-check label {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  padding-block: 0.2rem;
}

.kit-filter-group__text { min-width: 0; overflow-wrap: anywhere; }

.kit-filter-group__count {
  flex: none;
  color: var(--kit-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.kit-filter-group__item.is-empty label { color: var(--kit-muted); cursor: not-allowed; }
.kit-filter-group__item.is-empty .kit-check__input { cursor: not-allowed; }

/* Range: two number inputs; with scripts a slider with two handles above them. */
.kit-range__body { display: grid; gap: 0.75rem; }
.kit-range__field { min-width: 0; }

.kit-range__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.kit-range__input { min-height: 2.5rem; padding-inline: 0.7rem; }

.kit-range__slider {
  position: relative;
  height: 1.5rem;
  margin: 0 0 0.85rem;
}

.kit-range__track {
  position: absolute;
  top: 50%;
  inset-inline: 0.6rem;
  height: 4px;
  margin-top: -2px;
  border-radius: 4px;
  background: var(--kit-line-strong);
}

.kit-range__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: var(--kit-range-from, 0%);
  inset-inline-end: calc(100% - var(--kit-range-to, 100%));
  border-radius: 4px;
  background: var(--kit-accent);
}

.kit-range__handle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.kit-range__handle.is-top { z-index: 1; }
.kit-range__handle::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.kit-range__handle::-moz-range-track { height: 100%; background: transparent; }

.kit-range__handle::-webkit-slider-thumb {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.15rem;
  border: 2px solid var(--kit-accent);
  border-radius: 50%;
  background: var(--kit-surface);
  box-shadow: 0 1px 4px color-mix(in srgb, #000 25%, transparent);
  cursor: grab;
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
}

.kit-range__handle::-moz-range-thumb {
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid var(--kit-accent);
  border-radius: 50%;
  background: var(--kit-surface);
  box-shadow: 0 1px 4px color-mix(in srgb, #000 25%, transparent);
  cursor: grab;
  pointer-events: auto;
}

.kit-range__handle:active::-webkit-slider-thumb { cursor: grabbing; }
.kit-range__handle:active::-moz-range-thumb { cursor: grabbing; }

/* Sort: a label and a menu on one line; the button is for visitors without scripts. */
.kit-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.kit-sort__submit { flex: none; }
.kit-sort__label { color: var(--kit-muted); font-size: 0.875rem; white-space: nowrap; }
.kit-sort__select { width: auto; min-width: 10rem; max-width: 100%; min-height: 2.5rem; }

/* Cart lines: picture, the name with its details and the stepper, the line's total. */
.kit-cart-lines {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: start;
}

.kit-cart-line {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.5rem 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--kit-line);
}

.kit-cart-line:first-child { padding-top: 0; }
.kit-cart-line:last-child { border-bottom: 0; }

.kit-cart-line__media {
  width: 5rem;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--kit-media-radius);
  background: var(--kit-surface-alt);
}

.kit-cart-line__media img { width: 100%; height: 100%; object-fit: cover; }

.kit-cart-line__main {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.kit-cart-line__name {
  color: var(--kit-text);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-decoration: none;
}

a.kit-cart-line__name:hover { color: var(--kit-accent-text); text-decoration: underline; text-underline-offset: 0.2em; }

.kit-cart-line__options,
.kit-cart-line__note,
.kit-cart-line__each,
.kit-cart-line__qty {
  color: var(--kit-muted);
  font-size: 0.875rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.kit-cart-line__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.5rem;
}

.kit-cart-line__controls > .kit-action-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.kit-cart-line__total {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: end;
  white-space: nowrap;
}

.kit-cart-line__update { flex: none; }
.kit-cart-line__remove { flex: none; min-height: 2.25rem; padding-inline: 0.5rem; color: var(--kit-muted); }
.kit-cart-line__media--none { border: 1px dashed var(--kit-line); }
.kit-cart-lines--compact .kit-cart-line { grid-template-columns: 3.5rem minmax(0, 1fr) auto; padding-block: 0.75rem; }
.kit-cart-lines--compact .kit-cart-line__media { width: 3.5rem; }

/* Summary: labelled rows, then the total. */
.kit-summary { display: grid; gap: 0.75rem; text-align: start; }

.kit-summary__title {
  color: var(--kit-text);
  font-family: var(--font-heading, inherit);
  font-size: 1.1rem;
  font-weight: var(--kit-heading-weight);
  letter-spacing: var(--kit-heading-tracking);
  line-height: 1.3;
}

.kit-summary__rows { display: grid; gap: 0.6rem; }

.kit-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.kit-summary__row dt { min-width: 0; color: var(--kit-muted); overflow-wrap: anywhere; }

.kit-summary__row dd {
  margin: 0;
  color: var(--kit-text);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: end;
}

.kit-summary__note {
  display: block;
  color: var(--kit-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
}

.kit-summary__row--discount dd { color: var(--kit-success); }

.kit-summary__row--total {
  margin-top: 0.3rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--kit-line-strong);
}

.kit-summary__row--total dt { color: var(--kit-text); font-size: 1.05rem; font-weight: 700; }

.kit-summary__amount {
  font-family: var(--font-heading, inherit);
  font-size: 1.35rem;
  font-weight: var(--kit-heading-weight);
  line-height: 1.2;
}

/* Breadcrumbs: links with a small chevron between them. */
.kit-breadcrumbs { text-align: start; }

.kit-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.5rem;
  margin: 0;
  padding: 0;
  color: var(--kit-muted);
  font-size: 0.875rem;
  list-style: none;
}

.kit-breadcrumbs__item { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }

.kit-breadcrumbs__item + .kit-breadcrumbs__item::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-top: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor;
  opacity: 0.6;
  transform: rotate(45deg);
}

.kit-breadcrumbs__item + .kit-breadcrumbs__item:dir(rtl)::before { transform: rotate(-135deg); }
.kit-breadcrumbs__link { padding-block: 0.2rem; color: var(--kit-muted); text-decoration: none; }
.kit-breadcrumbs__link:hover { color: var(--kit-text); text-decoration: underline; text-underline-offset: 0.2em; }
.kit-breadcrumbs__current { color: var(--kit-text); font-weight: 600; overflow-wrap: anywhere; }

/* Address fields: two columns where two fields share a line, one on a narrow screen. */
.kit-address {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  text-align: start;
}

.kit-address__item { min-width: 0; }
.kit-address__item--full { grid-column: 1 / -1; }

@media (max-width: 29.99rem) {
  .kit-address__item--half { grid-column: 1 / -1; }
}

/* Account navigation: the tabs of My account, as links. */
.kit-account-nav {
  overflow-x: auto;
  border-bottom: 1px solid var(--kit-line);
  scrollbar-width: thin;
  text-align: start;
}

.kit-account-nav__list {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kit-account-nav__item { flex-shrink: 0; }

.kit-account-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.6rem 1rem;
  border-radius: var(--kit-radius-sm) var(--kit-radius-sm) 0 0;
  color: var(--kit-muted);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--kit-speed) ease, background-color var(--kit-speed) ease;
}

.kit-account-nav__link::after {
  content: "";
  position: absolute;
  inset: auto 0.5rem 0;
  height: 2px;
  background: transparent;
  transition: background-color var(--kit-speed) ease;
}

.kit-account-nav__link:hover { background: var(--kit-soft); color: var(--kit-text); }
.kit-account-nav__link.is-current { color: var(--kit-text); }
.kit-account-nav__link.is-current::after { background: var(--kit-accent); }
.kit-account-nav__icon { width: 1.1rem; height: 1.1rem; }

.kit-account-nav__count {
  padding: 0 0.5rem;
  border-radius: var(--kit-chip-radius);
  background: var(--kit-soft);
  color: var(--kit-accent-text);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}

/* Skeleton: grey shapes with a slow shimmer. Around content they take its place while the section is drawn again. */
.kit-skeleton {
  --kit-skeleton-a: color-mix(in srgb, var(--kit-text) 8%, transparent);
  --kit-skeleton-b: color-mix(in srgb, var(--kit-text) 15%, transparent);
  min-width: 0;
}

.kit-skeleton__line,
.kit-skeleton__media,
.kit-skeleton__thumb,
.kit-skeleton--picture {
  background: linear-gradient(90deg, var(--kit-skeleton-a) 25%, var(--kit-skeleton-b) 37%, var(--kit-skeleton-a) 63%) 0 0 / 400% 100%;
  animation: kit-shimmer 1.6s ease-in-out infinite;
}

@keyframes kit-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

.kit-skeleton--text,
.kit-skeleton--title { display: block; }

.kit-skeleton__line {
  display: block;
  height: 0.9rem;
  margin-block: 0.4rem;
  border-radius: var(--kit-radius-sm);
}

.kit-skeleton__line--short { width: 60%; }
.kit-skeleton__line--title { width: 60%; height: 1.75rem; }
.kit-skeleton--picture { width: 100%; border-radius: var(--kit-media-radius); }

.kit-skeleton--card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: var(--kit-gap-medium);
}

.kit-skeleton__card { display: grid; gap: 0.15rem; min-width: 0; }
.kit-skeleton__media { border-radius: var(--kit-media-radius); margin-bottom: 0.4rem; }
.kit-skeleton__row { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: center; gap: 1rem; padding-block: 0.6rem; }
.kit-skeleton__thumb { aspect-ratio: 1 / 1; border-radius: var(--kit-media-radius); }
.kit-skeleton__text { min-width: 0; }

/* The shapes lie over the content and are cut to its box, so the content keeps its size and the block never grows. */
.kit-skeleton-swap { position: relative; min-width: 0; }

.kit-skeleton-swap__shapes {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.kit-root.kit-is-refreshing .kit-skeleton-swap__shapes { visibility: visible; }
.kit-root.kit-is-refreshing .kit-skeleton-swap__content { visibility: hidden; }

/* ------------------------------------------------------------------ 11. Motion and contrast */

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

  .kit-card--linked:hover .kit-card__media img,
  .kit-button:active { transform: none; }
  .kit-section__video { display: none; }
  .kit-root.kit-is-refreshing { transition: none; }
  .kit-gallery__slides { scroll-behavior: auto; }
  .kit-skeleton__line,
  .kit-skeleton__media,
  .kit-skeleton__thumb,
  .kit-skeleton--picture { animation: none; }
}

@media (forced-colors: active) {
  .kit-button,
  .kit-input,
  .kit-card,
  .kit-notice,
  .kit-chip,
  .kit-badge,
  .kit-quantity,
  .kit-option__face,
  .kit-filter-chip,
  .kit-gallery__thumb { border-color: CanvasText; }
  .kit-button--primary { background: ButtonText; color: ButtonFace; }
  .kit-option__input:checked + .kit-option__face { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
  .kit-gallery__thumb[aria-current="true"],
  .kit-account-nav__link.is-current::after { forced-color-adjust: none; border-color: Highlight; background-color: Highlight; }
  .kit-gallery__thumb[aria-current="true"] { background-color: transparent; }
  .kit-rating__star { forced-color-adjust: none; }
  .kit-tabs__tab[aria-selected="true"]::after { background: Highlight; }
  .kit-slideshow__dot[aria-current="true"]::before,
  .kit-compare.is-ready .kit-compare__frame::after { forced-color-adjust: none; background: Highlight; }
}