/*
 * 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-ink, 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%;
}

/* A picture printed with its width and height (ResponsiveImages) keeps its shape until a component sets its height. */
:where(.kit-root) :where(img[width][height]) { height: auto; }

/* 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;
  /* --pgs-tint (CMS 4.21.1): the block's own word on the shade, 1 unless it asked for a lighter or a darker one. */
  --kit-section-shade: min(94%, calc(58% * var(--pgs-tint, 1)));
  background-image: linear-gradient(color-mix(in srgb, #000 var(--kit-section-shade), transparent), color-mix(in srgb, #000 var(--kit-section-shade), 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; }

/* Features (the feature_list block) on a phone: compact rows with the icon beside the title, or two to a row with a
   smaller icon above when every title and description is short (kit-features--pairs), never a tall card each. */
@media (max-width: 639.98px) {
  .kit-grid.kit-features { gap: 1.25rem 1rem; }
  .kit-grid.kit-features:not(.kit-features--pairs) > .kit-stack {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 0.9rem;
    row-gap: 0.2rem;
  }
  .kit-grid.kit-features:not(.kit-features--pairs) > .kit-stack::before { grid-column: 1 / -1; }
  .kit-grid.kit-features:not(.kit-features--pairs) > .kit-stack > .kit-icon { grid-row: span 2; position: static; }
  .kit-grid.kit-features:not(.kit-features--pairs) > .kit-stack > :not(.kit-icon) { grid-column: 2; margin: 0; }
  .kit-grid.kit-features > .kit-stack { gap: 0.35rem; }
  .kit-grid.kit-features .kit-icon--large { width: 1.6rem; height: 1.6rem; }
  .kit-grid.kit-features .kit-heading--3 { font-size: 1.08rem; line-height: 1.3; }
  .kit-grid.kit-features .kit-text-block { font-size: 0.94rem; line-height: 1.5; }
}

/* 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,
  /* A marquee measures its own width (container-type), so it has none of its content's: in a centred stack it shrank to nothing. */
  .kit-marquee),
.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; }

/* A sticky element of a module section taller than the window would hide its own end (a form's Send button) until the
   page's very end: kit.js marks it and it scrolls with the page instead, until it fits the window again. Important: a
   section's own sticky rule is more specific than this one. */
.kit-is-unstuck { position: static !important; }

@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; }
/* A heading of more than 90 characters (KitRenderer::LONG_HEADING) reads as a lead line, a step smaller. */
.kit-heading.kit-heading--long { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.65rem); line-height: 1.3; letter-spacing: normal; }
.kit-heading--3.kit-heading--long { font-size: 1.125rem; }

/* The page title header (Renderer::pageTitleHeader): a page whose content draws no h1 gets its title here, under the
   theme's breadcrumb. It is a title, not a hero: the theme's own h1 at four fifths of its size (the themes' h1 sizes differ
   widely, and four fifths stays at or above each theme's section headings), and close to what follows. */
.pgs-page-title .kit-section { padding-block: var(--kit-pad-compact) 0; }
.pgs-page-title .kit-heading--1 { zoom: 0.8; }
.pgs-page-title + .kit-root > .kit-section:first-child { padding-block-start: var(--kit-pad-compact); }

.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;
}

/* The measure of running text: about 68 characters a line, however wide the section. A paragraph, a lead line and the
   paragraphs, quotes, headings and plain lists of rich text keep to it; a centred one stays centred as a block. Pictures,
   tables and figures in rich text, kit lists, grids and cards are not touched, and anything in a narrower column is already
   inside the measure. A theme sets --kit-measure to change it. */
.kit-text-block,
.kit-rich-text > :is(p, blockquote, h2, h3, h4, ul, ol) {
  max-inline-size: var(--kit-measure, 68ch);
}
.kit-text-block.kit-text--center,
:where(.kit-align--center, .kit-section--align-center, .kit-text--center) > .kit-text-block,
:where(.kit-align--center, .kit-section--align-center, .kit-text--center) .kit-rich-text > :is(p, blockquote, h2, h3, h4) {
  margin-inline: auto;
}

.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; }
/* Their layout is the shared table style's (resilience.css, .kit-table); the kit gives the type and the lines. */
.kit-rich-text table { font-size: 0.95em; }
.kit-rich-text :is(th, td) { border-bottom: 1px solid var(--kit-line); }
.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 leader of fine, spaced dots, then the price. The price's figures are all one width and lining, so the
   prices of a list line up digit under digit (a serif's old-style figures rise and fall). */
.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;
  height: 2px;
  background: radial-gradient(circle, color-mix(in srgb, var(--kit-muted) 75%, transparent) 0.7px, transparent 1px) left bottom / 5px 2px repeat-x;
  transform: translateY(-0.3em);
}
.kit-list--menu .kit-list-item__meta { font-variant-numeric: tabular-nums lining-nums; }
.kit-list--menu .kit-list-item__title { order: 0; }
/* A price longer than the room beside its title wraps at a space ("2000 € / diena" puts "/ diena" under the amount) instead of
   running past the card; the price list keeps an amount and a unit whole with no-break spaces. The price never breaks inside a
   word (body has overflow-wrap: anywhere) and never shrinks below its longest part (resilience.css gives every element in main
   min-width: 0), so a long title wraps instead.
   The price keeps its own width (it does not shrink) but never more than half the row: a sentence written where a price belongs,
   whose no-break spaces make it one long word, wraps inside that half (breaking inside its words only when it must) instead of
   running off the card. An ordinary price is far shorter than half a row, so its amount is never split. */
.kit-list--menu .kit-list-item__meta {
  order: 2; flex: 0 0 auto; min-width: 0; max-width: 50%;
  white-space: normal; text-align: right; overflow-wrap: anywhere; word-break: normal;
}

/* ------------------------------------------------------------------ 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;
}

/* A step of the steps block (kit-blocks/process_steps.php, .kit-steps) has one lead mark. With an icon, the icon leads and the
   number becomes a small quiet label over the title, whatever look a theme gives a card's number (a chip, a pebble); without
   one the number keeps the theme's look and leads. resilience.css lays the same pieces on one line on a phone. */
.kit-steps .kit-card__content:has(> .kit-card__body > .kit-icon:first-child) > .kit-card__body { display: contents; }
.kit-steps .kit-card__content:has(> .kit-card__body > .kit-icon:first-child) > .kit-card__body > .kit-icon:first-child { order: -2; margin-bottom: 0.5rem; }
.kit-steps .kit-card__content:has(> .kit-card__body > .kit-icon:first-child) > .kit-card__eyebrow {
  order: -1;
  display: block;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--kit-muted);
  font-family: inherit;
  font-size: 0.8125rem;
  font-style: normal;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: none;
}

.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); }

/* A zoomable picture is a link to its file; kit.js opens it large. A small magnifier shows on hover and focus (always on touch screens). */
.kit-picture--zoom { cursor: zoom-in; }
.kit-picture__zoom {
  position: relative;
  display: block;
  height: 100%;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.kit-picture__zoom:focus-visible { outline-offset: -4px; }
.kit-picture__zoom-icon {
  position: absolute;
  inset-block-end: 0.5rem;
  inset-inline-end: 0.5rem;
  width: 2rem;
  height: 2rem;
  padding: 0.4rem;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.6);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.kit-picture__zoom:hover .kit-picture__zoom-icon,
.kit-picture__zoom:focus-visible .kit-picture__zoom-icon { opacity: 1; }
@media (hover: none) { .kit-picture__zoom-icon { opacity: 0.85; } }

/* 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;
  /* A label longer than the room wraps inside the chip instead of running off the card; a short one keeps its line. */
  max-width: 100%;
  /* anywhere, not break-word: the chip is a flex box, and only anywhere lets its text be narrower than its longest word. */
  overflow-wrap: anywhere;
}

.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; }

/* A value longer than a few words (KitRenderer marks it past 40 characters) goes under its label, left-aligned and in the
   normal weight: a sentence or a list squeezed to the right in bold reads as a ragged block. Two classes so a theme's own
   row and value rules do not win over it. */
.kit-key-values__row.kit-key-values__row--long { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0.2rem; }
.kit-key-values__row.kit-key-values__row--long dd { margin-inline-start: 0; text-align: start; font-weight: 400; line-height: 1.55; overflow-wrap: break-word; }

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

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

/* A label names its field quietly: the field, not its name, is what the eye looks for. */
.kit-field__label {
  color: var(--kit-text);
  font-size: 0.875rem;
  font-weight: 500;
  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); }
/* A soft ring: a thin line of the focus colour a little away from the field, with a faint halo of it in the gap, so the
   field looks lit rather than boxed. The line itself keeps the full colour, 3:1 against the surface around it
   (kit-defaults.test.mjs measures it in every theme). */
.kit-input:focus-visible {
  outline: 2px solid var(--kit-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kit-focus) 16%, transparent);
}
.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; }
/* A long list of choices (nine or more) flows into columns as wide as the space allows, instead of one very tall column. */
.kit-radios:has(> .kit-check:nth-of-type(9)) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); column-gap: 1.5rem; }
.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); }
/* The answer opens and closes with a short motion of its height (browsers that can animate to auto; the others open at once),
   so the page under it glides rather than jumps. None for visitors who prefer less motion. */
.kit-accordion { interpolate-size: allow-keywords; }
.kit-accordion__item::details-content {
  block-size: 0;
  overflow: clip;
  overflow-clip-margin: 0.25rem; /* a link's focus ring in the answer is not cut */
  /* A curve that never overshoots (a theme's springy --kit-ease would bounce the page under it). */
  transition: block-size var(--kit-accordion-speed, 0.26s) cubic-bezier(0.2, 0, 0, 1), content-visibility var(--kit-accordion-speed, 0.26s) allow-discrete;
}
.kit-accordion__item[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  .kit-accordion__item::details-content { transition: none; }
}
.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;
}

/* Marquee: one row drifting sideways for ever. Each copy is at least as wide as the row, so moving by one copy loops without a gap. */
.kit-marquee {
  container-type: inline-size;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.kit-marquee__track {
  display: flex;
  width: max-content;
  animation: kit-marquee var(--kit-marquee-duration, 40s) linear infinite;
}
.kit-marquee--slow { --kit-marquee-duration: 60s; }
.kit-marquee--normal { --kit-marquee-duration: 40s; }
.kit-marquee--fast { --kit-marquee-duration: 24s; }
.kit-marquee__group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-around;
  gap: var(--kit-gap-large);
  min-width: 100cqi;
  padding-inline-end: var(--kit-gap-large);
}
.kit-marquee__group > * { flex: 0 0 auto; width: clamp(6.5rem, 14vw, 10rem); }
.kit-marquee:hover .kit-marquee__track,
.kit-marquee:focus-within .kit-marquee__track { animation-play-state: paused; }
[dir="rtl"] .kit-marquee__track { animation-direction: reverse; }
@keyframes kit-marquee { to { transform: translateX(-50%); } }

.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;
}

/* modules 10: the lines a form's notes add under its summary (what happens next, the deposit, the terms). */
.kit-form__notes { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--kit-muted); }
.kit-form__summary .kit-key-values + .kit-form__notes { margin-block-start: 0.85rem; padding-block-start: 0.85rem; border-block-start: 1px solid var(--kit-line); }
.kit-form__note { display: flex; align-items: flex-start; gap: 0.5rem; line-height: 1.45; }
.kit-form__note-icon { flex: none; width: 1rem; height: 1rem; margin-block-start: 0.15rem; color: var(--kit-accent-text); }

/* kit 9: the page's main action (page_action) is never drawn where it stands: the theme's phone action bar reads it. */
.kit-page-action { display: none; }

/* modules 10: "Or call" with the website's number under the send button. */
.kit-form__call { margin: 0; color: var(--kit-muted); font-size: 0.875rem; }
.kit-form__call[hidden] { display: none; }
.kit-form__call-link { color: var(--kit-accent-text); font-weight: 600; text-decoration: none; white-space: nowrap; }
.kit-form__call-link:hover { text-decoration: underline; }

/* modules 10: a search form (method "get") is one compact bar on a wide screen: the stay, the other fields and the button in a
   row, the button on the line of the boxes; on a phone they stack. */
.kit-form--search { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.kit-form--search > .kit-form__item { flex: 1 1 6.5rem; min-width: 0; }
.kit-form--search > .kit-form__item:has(.kit-dates) { flex: 2 1 16rem; }
.kit-form--search > .kit-form__actions { flex: 1 1 100%; }
.kit-form--search .kit-form__actions .kit-button { width: 100%; justify-content: center; }
.kit-form--search .kit-form__error { display: none; }
@media (min-width: 48rem) {
  .kit-form--search > .kit-form__actions { flex: 0 0 auto; }
  .kit-form--search .kit-form__actions .kit-button { width: auto; white-space: nowrap; }
}

.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; }

/* kit 7: the item a form is about (module_form about), named above its fields. */
.kit-form__about {
  margin: 0 0 0.25rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--kit-radius-sm);
  background: var(--kit-soft);
  color: var(--kit-text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* 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; }
/* A yes/no question of a stock form (CMS 4.21.0): its two answers side by side. */
.kit-enquiry .kit-radios { grid-template-columns: repeat(auto-fill, minmax(5.5rem, max-content)); column-gap: 1.5rem; }
/* image_gallery layout whole (CMS 4.21.0): one picture at its own shape, never taller than the screen, centred; two side by side. */
.kit-whole--1 { display: flex; justify-content: center; }
.kit-whole .kit-grid { align-items: start; }
.kit-whole .kit-picture { justify-self: center; width: fit-content; max-width: 100%; background: none; }
.kit-whole .kit-picture img { width: auto; max-width: 100%; height: auto; max-height: 85vh; }

/* 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. On a narrow screen the status wraps
   between its words; the buttons keep theirs whole ("Kitas" once broke in two). */
.kit-pagination {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  gap: 0.75rem;
}

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

/* kit 7: numbered pages between previous and next (numbers=true); a narrow screen shows "Page 2 of 5" instead. */
.kit-pagination__pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kit-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  border-radius: var(--kit-button-radius);
  color: var(--kit-text);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--kit-speed) var(--kit-ease);
}

a.kit-pagination__page:hover { background: var(--kit-soft); }
a.kit-pagination__page:focus-visible { outline: 2px solid var(--kit-focus); outline-offset: 2px; }
.kit-pagination__page--current { background: var(--kit-primary); color: var(--kit-on-primary); font-weight: var(--kit-button-weight); }
.kit-pagination__gap { min-width: 1.25rem; color: var(--kit-muted); text-align: center; }
.kit-pagination--numbers .kit-pagination__status--narrow { display: none; }

@media (max-width: 39.99rem) {
  .kit-pagination--numbers .kit-pagination__pages { display: none; }
  .kit-pagination--numbers .kit-pagination__status--narrow { display: block; }
}

/* kit 7: a frame where a picture would be (placeholder_icon on card and gallery): the soft accent tint over the alternate
   surface, with one icon in the middle in the muted ink. */
.kit-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(var(--kit-soft), var(--kit-soft)), var(--kit-surface-alt);
  color: var(--kit-muted);
}

.kit-placeholder .kit-placeholder__icon, .kit-placeholder svg { width: clamp(1.75rem, 22%, 3.5rem); height: auto; opacity: 0.7; stroke-width: 1.5; }
.kit-gallery__placeholder { width: 100%; border-radius: var(--kit-media-radius); }

/* kit 7: tree_nav, nested links such as categories. The current link has the soft background and a bar at its start. */
.kit-tree { min-width: 0; }
.kit-tree__item { min-width: 0; }
.kit-tree__item--branch > .kit-tree__row .kit-tree__link { padding-inline-end: 0.375rem; }
.kit-tree__link--plain { cursor: default; }

.kit-tree__list {
  display: grid;
  gap: 0.125rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kit-tree__list--nested {
  margin: 0.125rem 0 0.25rem 0.75rem;
  padding-inline-start: 0.5rem;
  border-inline-start: 1px solid var(--kit-line);
}

.kit-tree__list[hidden] { display: none; }
.kit-tree__row { display: flex; align-items: center; gap: 0.25rem; }

.kit-tree__link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.625rem;
  border-radius: var(--kit-radius-sm);
  color: var(--kit-text);
  text-decoration: none;
  transition: background-color var(--kit-speed) var(--kit-ease);
}

.kit-tree__label { min-width: 0; overflow-wrap: anywhere; }
a.kit-tree__link:hover { background: var(--kit-soft); }
.kit-tree__link[aria-current] { background: var(--kit-soft); box-shadow: inset 3px 0 0 var(--kit-accent); font-weight: 600; }
[dir="rtl"] .kit-tree__link[aria-current] { box-shadow: inset -3px 0 0 var(--kit-accent); }
.kit-tree__count { flex: none; color: var(--kit-muted); font-size: 0.85em; font-weight: 400; font-variant-numeric: tabular-nums; }

.kit-tree__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--kit-radius-sm);
  background: transparent;
  color: var(--kit-muted);
  cursor: pointer;
}

.kit-tree__toggle[hidden] { display: none; }
.kit-tree__toggle:hover { background: var(--kit-soft); color: var(--kit-text); }
.kit-tree__toggle svg { width: 1rem; height: 1rem; transition: transform var(--kit-speed) var(--kit-ease); }
.kit-tree__toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
[dir="rtl"] .kit-tree__toggle[aria-expanded="false"] svg { transform: rotate(90deg); }
.kit-tree__link:focus-visible, .kit-tree__toggle:focus-visible { outline: 2px solid var(--kit-focus); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .kit-tree__toggle svg { transition: none; }
}

/* A list drawn again by its page links takes keyboard focus (kit 7), without a ring around the whole list. */
.kit-root[tabindex="-1"]:focus { outline: none; }

/* kit 7: while a module's next page comes in place (a section's instant links), the page fades a little, after a moment so a
   quick move does not flicker. The heading that takes focus afterwards gets no ring. */
.kit-is-visiting { opacity: 0.55; transition: opacity 160ms ease 120ms; }
main h1[tabindex="-1"]:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .kit-is-visiting { transition: none; }
}

/* 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 min(94%, calc(55% * var(--pgs-tint, 1))), transparent), color-mix(in srgb, #000 min(94%, calc(55% * var(--pgs-tint, 1))), transparent)), var(--kit-slide-image, none);
  background-position: center;
  background-size: cover;
}

/* On a phone a section or slide behind a picture shows its smaller copy, when it has one (ResponsiveImages::background).
   Important beats the wide picture in the style attribute; every theme rule that reads the property follows. */
@media (max-width: 767px) {
  .kit-section--image[style*="--kit-section-image-phone"] { --kit-section-image: var(--kit-section-image-phone) !important; }
  .kit-slide--image[style*="--kit-slide-image-phone"] { --kit-slide-image: var(--kit-slide-image-phone) !important; }
}

.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; }

/* ------------------------------------------------------------------ 10b. Dates (a form's date_range field, modules 9) */

/* Without scripts the field is two date boxes side by side; kit.js swaps them for the calendar once it knows the taken nights. */
.kit-dates { position: relative; display: flex; flex-direction: column; gap: 0.6rem; }
.kit-dates__fallback { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; }
.kit-dates__value { display: none; }
.kit-dates__value.is-ready {
  display: block;
  position: absolute;
  inset: auto auto 0 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.kit-dates__panel {
  display: grid;
  gap: 0.75rem;
  padding: clamp(0.75rem, 2.5vw, 1.25rem);
  border: 1px solid var(--kit-line);
  border-radius: var(--kit-radius);
  background: var(--kit-surface);
  color: var(--kit-text);
}

/* Inside a card or a dialog the card is the calendar's frame: the panel draws no second border or surface of its own. The
   popover that opens over the page (kit-dates__panel--popup) keeps its frame. */
:is(.kit-card, .kit-dialog) .kit-dates__panel:not(.kit-dates__panel--popup) { padding: 0; border: 0; border-radius: 0; background: transparent; }
:is(.kit-card, .kit-dialog) .kit-form__item.is-invalid .kit-dates__panel:not(.kit-dates__panel--popup) { outline: 1px solid var(--kit-danger); outline-offset: 0.5rem; border-radius: var(--kit-radius-sm); }

/* The status row has the whole width: the stay in words, the nights (or the next step) under it in a quieter line, and a
   small Clear at its end. The month arrows sit on the month headings, so they never share a line with these words. */
.kit-dates__status {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.25rem;
}

.kit-dates__status-words { display: grid; gap: 0.1rem; min-width: 0; }
.kit-dates__status-text { font-weight: 600; line-height: 1.35; overflow-wrap: break-word; }
.kit-dates__status-note { color: var(--kit-muted); font-size: 0.875rem; font-weight: 400; line-height: 1.4; }
.kit-dates__status-note[hidden] { display: none; }

.kit-dates__clear {
  flex: none;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--kit-line);
  border-radius: var(--kit-button-radius);
  background: transparent;
  color: var(--kit-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color var(--kit-speed) ease, color var(--kit-speed) ease;
}

.kit-dates__clear:hover { background: var(--kit-soft); color: var(--kit-text); }
.kit-dates__clear[hidden] { display: none; }

/* The arrows lie over the heading row of the months: previous at the left of the first month's heading, next at the right
   of the last one's. The headings keep room for them, so a long month name never runs under an arrow. */
.kit-dates__frame { position: relative; }
.kit-dates__nav {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.25rem;
  pointer-events: none;
}

.kit-dates__nav .kit-dates__step { pointer-events: auto; }

.kit-dates__step {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--kit-line-strong);
  border-radius: 999px;
  background: var(--kit-surface);
  color: inherit;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--kit-speed) ease, opacity var(--kit-speed) ease;
}

.kit-dates__step:hover:not(:disabled) { background: var(--kit-soft); }
.kit-dates__step:disabled { cursor: default; opacity: 0.3; }

/* A month is at least 15rem wide where there is room for it, and never wider than the field: in a narrow column (the booking
   card beside a place's photos at 768px) a 15rem month ran past the card's right edge (CMS 4.20.1). */
.kit-dates__months { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1.25rem 2rem; }
.kit-dates.is-loading .kit-dates__months { opacity: 0.55; transition: opacity var(--kit-speed) ease; }

.kit-dates__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  margin-bottom: 0.5rem;
  padding-inline: 2.75rem;
  font-family: var(--font-heading, inherit);
  font-weight: var(--kit-heading-weight, 600);
  line-height: 1.2;
  text-align: center;
}

.kit-dates__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px 0; }

.kit-dates__weekday {
  padding-bottom: 0.35rem;
  color: var(--kit-muted);
  font-size: 0.75rem;
  text-align: center;
  text-transform: capitalize;
}

.kit-dates__day {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-height: 2.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.kit-dates__number {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(2.5rem, 100%);
  aspect-ratio: 1;
  border-radius: 999px;
  transition: background-color var(--kit-speed) ease, color var(--kit-speed) ease;
}

.kit-dates__day.is-outside { visibility: hidden; cursor: default; }
.kit-dates__day:hover:not([aria-disabled="true"]) .kit-dates__number { background: var(--kit-soft); }
.kit-dates__day:focus-visible { outline: none; }
.kit-dates__day:focus-visible .kit-dates__number { outline: 2px solid var(--kit-focus); outline-offset: 1px; }
.kit-dates__day.is-today .kit-dates__number { box-shadow: inset 0 0 0 1px var(--kit-line-strong); font-weight: 600; }
.kit-dates__day[aria-disabled="true"] { cursor: default; }
.kit-dates__day.is-past { color: color-mix(in srgb, var(--kit-muted) 55%, transparent); }

/* A taken night has one mark, readable without colour: its number is struck through (and quieter). It is no arrival; it can
   still be the morning of departure. */
.kit-dates__day.is-taken { color: color-mix(in srgb, var(--kit-muted) 85%, transparent); }
.kit-dates__day.is-taken .kit-dates__number {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.kit-dates.is-choosing-departure .kit-dates__day.is-taken:not([aria-disabled="true"]) { color: var(--kit-text); }

/* The stay: a band from the arrival to the departure, with both ends filled in the accent colour. */
.kit-dates__day.is-between::before,
.kit-dates__day.is-start::before,
.kit-dates__day.is-end::before {
  content: "";
  position: absolute;
  inset: 12% 0;
  background: var(--kit-soft);
}

.kit-dates__day.is-start::before { left: 50%; }
.kit-dates__day.is-end::before { right: 50%; }
.kit-dates:not(.has-range) .kit-dates__day.is-start::before { display: none; }
.kit-dates__day.is-between { color: var(--kit-text); }
.kit-dates__day.is-between .kit-dates__number { background: transparent; text-decoration: none; }

.kit-dates__day.is-start .kit-dates__number,
.kit-dates__day.is-end .kit-dates__number {
  background: var(--kit-accent);
  color: var(--kit-on-accent);
  font-weight: 600;
  text-decoration: none;
}

.kit-dates__legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; color: var(--kit-muted); font-size: 0.8125rem; }
.kit-dates__key { display: inline-flex; align-items: center; gap: 0.4rem; }
.kit-dates__swatch { width: 0.9rem; height: 0.9rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--kit-line-strong); }
/* The key of a taken night is the same mark: a line struck through. */
.kit-dates__key.is-taken .kit-dates__swatch { background: linear-gradient(to bottom, transparent calc(50% - 0.75px), currentColor calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)); }
.kit-dates__key.is-selected .kit-dates__swatch { background: var(--kit-accent); box-shadow: none; }

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

/* modules 10: a closed night (the place does not open, such as a winter break) is greyed without a strike, so it never reads as
   booked; the legend shows its key only while a closed day is in view. */
.kit-dates__day.is-closed { color: color-mix(in srgb, var(--kit-muted) 60%, transparent); }
.kit-dates__day.is-closed .kit-dates__number { background: color-mix(in srgb, var(--kit-muted) 10%, transparent); }
.kit-dates.is-choosing-departure .kit-dates__day.is-closed:not([aria-disabled="true"]) { color: var(--kit-text); }
.kit-dates__key.is-closed .kit-dates__swatch { background: color-mix(in srgb, var(--kit-muted) 22%, transparent); box-shadow: none; }
.kit-dates__key[hidden] { display: none; }

/* modules 10: in a search form the calendar opens from a box that says the stay, over the page. */
.kit-dates__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: start;
  cursor: pointer;
}
.kit-dates__toggle-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-dates__toggle-icon { flex: none; width: 1.1rem; height: 1.1rem; color: var(--kit-accent-text); }
/* CMS 4.20.1: the open calendar lies over the page (kit.js puts it in the browser's top layer as a popover, or fixes it to the
   screen where popovers are missing) and places it under the box, or above it, with top, left and width of its own: no card,
   section or slider can cut it off, and opening it moves nothing on the page. The values here only reset what a browser gives a
   popover (inset, margin, border, padding, colours) to the panel's own look. */
.kit-dates__panel--popup {
  position: fixed;
  box-sizing: border-box;
  inset: auto;
  top: 0;
  left: 0;
  z-index: 1000;
  margin: 0;
  width: min(42rem, calc(100vw - 2rem));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--kit-line);
  padding: clamp(0.75rem, 2.5vw, 1.25rem);
  background: var(--kit-surface);
  color: var(--kit-text);
  box-shadow: var(--kit-shadow-hover, 0 12px 32px rgb(0 0 0 / 0.16));
}
.kit-dates__panel--popup[hidden] { display: none; }
.kit-dates__panel--popup:popover-open { display: grid; }

/* The search bar's date field is a field like every other: the same gap under its label as .kit-field, so its label and box
   sit level with the labels and boxes beside it. (Without the popup the calendar keeps its wider gap under the label.) */
.kit-dates[data-kit-dates-popup] { gap: 0.4rem; }

@media (max-width: 30rem) {
  .kit-dates__day { min-height: 2.5rem; }
}

/* ------------------------------------------------------------------ 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-marquee { -webkit-mask-image: none; mask-image: none; }
  .kit-marquee__track { width: auto; animation: none; }
  .kit-marquee__group { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; min-width: 0; padding-inline-end: 0; }
  .kit-marquee__group[aria-hidden="true"] { display: none; }
  .kit-picture__zoom-icon { transition: 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-dates__panel,
  .kit-gallery__thumb { border-color: CanvasText; }
  .kit-dates__day.is-start .kit-dates__number,
  .kit-dates__day.is-end .kit-dates__number { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .kit-dates__day.is-taken .kit-dates__number { text-decoration: line-through; }
  .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; }
}