/* K&K Joinery — site stylesheet (assets/site). Design system: docs/design-briefs/kk-joinery/04-design-direction.md
   Colours/fonts/radius read the admin Design tokens (--sl-*) first, so the owner can re-brand from Settings. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,100..125,400..800;1,100..125,400..800&display=swap");

:root {
  --kk-bg: var(--sl-bg, #F5F6F2);
  --kk-surface: var(--sl-surface, #FBFBF9);
  --kk-surface-2: #E8EBE4;
  --kk-text: var(--sl-text, #151B17);
  --kk-muted: var(--sl-muted, #59625C);
  --kk-line: var(--sl-border, #D3D8CF);
  --kk-line-strong: #848D86;
  --kk-primary: var(--sl-primary, #1E3D30);
  --kk-primary-hover: color-mix(in oklab, var(--kk-primary) 78%, black);
  --kk-primary-contrast: var(--sl-primary-contrast, #F5F6F2);
  --kk-accent: #E3A13B;
  --kk-accent-hover: color-mix(in oklab, var(--kk-accent) 86%, black);
  --kk-success: #2A7143;
  --kk-warning: #A8520C;
  --kk-danger: #B42318;
  --kk-dark: #111915;
  --kk-dark-surface: #18231E;
  --kk-dark-text: #EEF0EA;
  --kk-dark-muted: #A3ADA6;
  --kk-dark-line: #2C3A33;
  --kk-dark-accent: #E9AB4A;

  --kk-font: var(--sl-font-heading, 'Archivo'), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --kk-font-body: var(--sl-font-body, 'Archivo'), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --kk-r: var(--sl-radius, 6px);
  --kk-r-sm: 3px;
  --kk-max: var(--sl-max-w, 1280px);
  --kk-gutter: clamp(16px, 4vw, 40px);
  --kk-gap: clamp(16px, 2vw, 24px);
  --kk-section: clamp(3.5rem, 2.333rem + 5.185vw, 7rem);

  --kk-shadow-sm: 0 0 0 1px rgb(21 27 23 / .06), 0 1px 2px rgb(21 27 23 / .06);
  --kk-shadow-md: 0 0 0 1px rgb(21 27 23 / .07), 0 14px 32px -14px rgb(21 27 23 / .28);
  --kk-shadow-lg: 0 24px 64px -16px rgb(12 17 14 / .42);

  --kk-dur-fast: 160ms;
  --kk-dur-base: 240ms;
  --kk-dur-slow: 400ms;
  --kk-dur-reveal: 640ms;
  --kk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --kk-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --kk-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --kk-header-h: 72px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kk-header-h) + 16px); }
body.sl-body {
  margin: 0; background: var(--kk-bg); color: var(--kk-text);
  font-family: var(--kk-font-body); font-size: 1rem; line-height: 1.6;
  font-stretch: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  color-scheme: light;
}
main { display: block; min-height: 50vh; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--kk-primary); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: color-mix(in oklab, var(--kk-accent) 45%, white); color: var(--kk-text); }
:focus-visible { outline: 2px solid var(--kk-primary); outline-offset: 2px; border-radius: 2px; }
.kk-dark :focus-visible, .kk-footer :focus-visible, .kk-hero--photo :focus-visible { outline-color: var(--kk-dark-accent); }
h1, h2, h3, h4 { font-family: var(--kk-font); color: inherit; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.kk-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kk-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--kk-primary); color: var(--kk-primary-contrast); padding: 10px 16px; border-radius: var(--kk-r); font-weight: 600; transition: top var(--kk-dur-fast) var(--kk-ease-out); }
.kk-skip:focus { top: 12px; }
.kk-container { width: 100%; max-width: calc(var(--kk-max) + 2 * var(--kk-gutter)); margin-inline: auto; padding-inline: var(--kk-gutter); }
.kk-num, .kk-price, .kk-money { font-variant-numeric: tabular-nums lining-nums; }

/* platform section wrappers: our kk-* sections own their spacing */
.sl-section[class*="sl-section--kk-"] { padding: 0 !important; margin: 0; max-width: none; background: none; }
.kk-band { padding-block: var(--kk-section); }
.kk-band--tight { padding-block: clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem); }
.kk-band--sage { background: var(--kk-surface-2); }
.kk-band--white { background: var(--kk-surface); }
.kk-band--green { background: var(--kk-primary); color: var(--kk-dark-text); }
.kk-band--dark { background: var(--kk-dark); color: var(--kk-dark-text); }

/* ---------- type ---------- */
.kk-display { font-size: clamp(2.5rem, 1.75rem + 3.333vw, 4.75rem); font-weight: 750; font-stretch: 112%; letter-spacing: -0.028em; line-height: 1.02; }
.kk-h1 { font-size: clamp(2.125rem, 1.667rem + 2.037vw, 3.5rem); font-weight: 700; font-stretch: 110%; letter-spacing: -0.02em; line-height: 1.06; }
.kk-h2 { font-size: clamp(1.75rem, 1.458rem + 1.296vw, 2.625rem); font-weight: 700; font-stretch: 108%; letter-spacing: -0.016em; line-height: 1.1; }
.kk-h3 { font-size: clamp(1.25rem, 1.125rem + 0.556vw, 1.625rem); font-weight: 650; font-stretch: 104%; letter-spacing: -0.01em; line-height: 1.2; }
.kk-display em, .kk-h1 em, .kk-h2 em { font-style: italic; font-weight: inherit; color: var(--kk-primary); padding-bottom: .06em; }
.kk-band--green .kk-h2 em, .kk-band--dark .kk-h2 em, .kk-hero--photo .kk-display em { color: var(--kk-dark-accent); }
.kk-lead { font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.25rem); line-height: 1.55; color: var(--kk-muted); max-width: 58ch; }
.kk-band--green .kk-lead, .kk-band--dark .kk-lead { color: color-mix(in oklab, var(--kk-dark-text) 82%, transparent); }
.kk-eyebrow, .kk-stamp { font-family: var(--kk-font); font-size: .75rem; font-weight: 650; font-stretch: 120%; letter-spacing: .12em; text-transform: uppercase; line-height: 1; }
.kk-eyebrow { display: inline-flex; align-items: center; gap: .6em; color: var(--kk-primary); margin-bottom: 18px; }
.kk-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--kk-accent); }
.kk-band--green .kk-eyebrow, .kk-band--dark .kk-eyebrow { color: var(--kk-dark-accent); }
.kk-muted { color: var(--kk-muted); }
.kk-small { font-size: .875rem; }
.kk-prose { max-width: 70ch; }
.kk-prose > * + * { margin-top: 1em; }
.kk-prose h2 { font-size: 1.5rem; font-stretch: 106%; font-weight: 700; margin-top: 1.8em; }
.kk-prose h3 { font-size: 1.2rem; font-weight: 650; margin-top: 1.5em; }
.kk-prose ul, .kk-prose ol { padding-left: 1.2em; }
.kk-prose li + li { margin-top: .35em; }
.kk-prose ul li::marker { color: var(--kk-accent); }

/* ---------- section heads ---------- */
.kk-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 3.5vw, 48px); max-width: 760px; }
.kk-head--row { max-width: none; grid-template-columns: 1fr auto; align-items: end; column-gap: 32px; }
.kk-head--row .kk-lead { grid-column: 1; }
.kk-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.kk-head__link { grid-column: 2; grid-row: 1 / span 3; align-self: end; white-space: nowrap; }

/* ---------- buttons ---------- */
.kk-btn {
  --b-bg: var(--kk-primary); --b-fg: var(--kk-primary-contrast); --b-bd: var(--kk-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: var(--sl-btn-radius, var(--kk-r));
  background: var(--b-bg); color: var(--b-fg); border: 1.5px solid var(--b-bd);
  font-family: var(--kk-font); font-size: .9375rem; font-weight: 650; font-stretch: 105%; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background-color var(--kk-dur-fast) var(--kk-ease-out), color var(--kk-dur-fast), border-color var(--kk-dur-fast), transform 100ms var(--kk-ease-out), box-shadow var(--kk-dur-base) var(--kk-ease-out);
}
.kk-btn:hover { background: var(--kk-primary-hover); border-color: var(--kk-primary-hover); text-decoration: none; }
.kk-btn:active { transform: scale(.97); }
.kk-btn i { font-size: 1.15em; }
.kk-btn--sm { min-height: 40px; padding: 0 16px; font-size: .875rem; }
.kk-btn--lg { min-height: 56px; padding: 0 28px; font-size: 1rem; }
.kk-btn--block { width: 100%; }
.kk-btn--secondary { --b-bg: transparent; --b-fg: var(--kk-text); --b-bd: var(--kk-text); }
.kk-btn--secondary:hover { background: color-mix(in oklab, var(--kk-text) 7%, transparent); border-color: var(--kk-text); color: var(--kk-text); }
.kk-btn--amber { --b-bg: var(--kk-accent); --b-fg: #151B17; --b-bd: var(--kk-accent); }
.kk-btn--amber:hover { background: var(--kk-accent-hover); border-color: var(--kk-accent-hover); color: #151B17; }
.kk-btn--ghost-light { --b-bg: transparent; --b-fg: var(--kk-dark-text); --b-bd: color-mix(in oklab, var(--kk-dark-text) 70%, transparent); }
.kk-btn--ghost-light:hover { background: rgb(255 255 255 / .08); border-color: var(--kk-dark-text); color: var(--kk-dark-text); }
.kk-btn[disabled], .kk-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.kk-btn[aria-busy="true"] { cursor: progress; }
.kk-link { font-weight: 650; font-stretch: 104%; color: var(--kk-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.kk-link i { transition: transform var(--kk-dur-base) var(--kk-ease-out); }
.kk-link:hover { text-decoration: underline; }
.kk-link:hover i { transform: translateX(4px); }
.kk-band--green .kk-link, .kk-band--dark .kk-link { color: var(--kk-dark-accent); }

/* ---------- stamps / chips ---------- */
.kk-stamp { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: var(--kk-r-sm); white-space: nowrap; }
.kk-stamp i { font-size: 14px; }
.kk-stamp--made { background: color-mix(in oklab, var(--kk-accent) 22%, var(--kk-surface)); border: 1px solid color-mix(in oklab, var(--kk-accent) 55%, var(--kk-surface)); color: var(--kk-text); }
.kk-stamp--soft { background: var(--kk-surface-2); color: var(--kk-primary); }
.kk-stamp--line { border: 1px solid var(--kk-line-strong); color: var(--kk-muted); }
.kk-stamp--sale { background: color-mix(in oklab, var(--kk-danger) 10%, var(--kk-surface)); color: var(--kk-danger); }
.kk-chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.kk-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--kk-surface); box-shadow: var(--kk-shadow-sm); color: var(--kk-text); font-size: .9375rem; font-weight: 550; text-decoration: none; transition: background-color var(--kk-dur-fast), color var(--kk-dur-fast), box-shadow var(--kk-dur-fast); }
.kk-chip:hover { box-shadow: var(--kk-shadow-md); text-decoration: none; }
.kk-chip.is-active, .kk-chip[aria-current="page"] { background: var(--kk-primary); color: var(--kk-primary-contrast); box-shadow: none; }
.kk-chip small { color: inherit; opacity: .6; font-weight: 500; }

/* dimension line motif */
.kk-dim { position: relative; display: inline-block; padding-bottom: 7px; }
.kk-dim::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-left: 1px solid currentColor; border-right: 1px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; opacity: .55; }

/* ---------- forms ---------- */
.kk-field { display: grid; gap: 7px; }
.kk-field label, .kk-label { font-size: .875rem; font-weight: 600; color: var(--kk-text); }
.kk-field .kk-help { font-size: .8125rem; color: var(--kk-muted); }
.kk-input, .kk-select, .kk-textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border-radius: var(--kk-r);
  border: 1.5px solid var(--kk-line-strong); background: var(--kk-surface); color: var(--kk-text);
  font: inherit; font-size: 1rem; transition: border-color var(--kk-dur-fast), box-shadow var(--kk-dur-fast);
}
.kk-textarea { min-height: 112px; resize: vertical; }
.kk-input:focus, .kk-select:focus, .kk-textarea:focus { outline: none; border-color: var(--kk-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--kk-primary) 18%, transparent); }
.kk-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23151B17' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.kk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kk-form { display: grid; gap: 16px; }
.kk-form__note { font-size: .8125rem; color: var(--kk-muted); }
.kk-form__error { color: var(--kk-danger); font-size: .9rem; font-weight: 550; }
.kk-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px dashed var(--kk-line-strong); border-radius: var(--kk-r); color: var(--kk-muted); font-size: .9rem; cursor: pointer; }
.kk-file input { font-size: .85rem; max-width: 100%; }

/* ---------- announcement + header ---------- */
.kk-announce { background: var(--kk-primary); color: var(--kk-primary-contrast); font-size: .8125rem; font-weight: 500; }
.kk-announce .kk-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.kk-announce p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-announce a { color: var(--kk-dark-accent); font-weight: 600; }
.kk-announce__side { display: flex; gap: 18px; white-space: nowrap; opacity: .9; }
.kk-announce__side a { color: inherit; font-weight: 500; text-decoration: none; }
.kk-announce__side a:hover { text-decoration: underline; }

.sl-section--kk-header { position: sticky; top: 0; z-index: 50; }
.kk-header { background: color-mix(in oklab, var(--kk-bg) 94%, transparent); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid transparent; transition: box-shadow var(--kk-dur-base), border-color var(--kk-dur-base); }
.kk-header.is-scrolled { box-shadow: var(--kk-shadow-sm); border-bottom-color: var(--kk-line); }
.kk-header__row { display: flex; align-items: center; gap: 28px; height: var(--kk-header-h); }
.kk-wordmark { display: inline-flex; align-items: baseline; gap: .38em; color: var(--kk-text); text-decoration: none; font-family: var(--kk-font); line-height: 1; white-space: nowrap; }
.kk-wordmark__kk { font-size: 1.35rem; font-weight: 800; font-stretch: 125%; letter-spacing: .01em; }
.kk-wordmark__kk .kk-amp { color: var(--kk-accent); }
.kk-wordmark__j { font-size: .78rem; font-weight: 650; font-stretch: 125%; letter-spacing: .2em; text-transform: uppercase; }
.kk-wordmark:hover { text-decoration: none; }
.kk-nav { margin-left: auto; }
.kk-nav > ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.kk-nav__item { position: relative; }
.kk-nav__link { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; background: none; border: 0; color: var(--kk-text); font: inherit; font-size: .9375rem; font-weight: 550; font-stretch: 104%; text-decoration: none; cursor: pointer; position: relative; }
.kk-nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; background: var(--kk-primary); transform: scaleX(0); transform-origin: left; transition: transform var(--kk-dur-fast) var(--kk-ease-out); }
.kk-nav__link:hover::after, .kk-nav__link[aria-current="page"]::after, .kk-nav__item.is-open > .kk-nav__link::after { transform: scaleX(1); }
.kk-nav__link[aria-current="page"] { font-weight: 650; }
.kk-nav__link:hover { text-decoration: none; color: var(--kk-primary); }
.kk-nav__link i { font-size: 12px; transition: transform var(--kk-dur-fast); }
.kk-nav__item.is-open > .kk-nav__link i { transform: rotate(180deg); }
.kk-menu { position: absolute; top: calc(100% + 6px); left: -12px; min-width: 520px; display: grid; grid-template-columns: 1fr 220px; gap: 24px; padding: 22px; background: var(--kk-surface); border-radius: var(--kk-r); box-shadow: var(--kk-shadow-md), 0 30px 60px -30px rgb(12 17 14 / .35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--kk-dur-fast) var(--kk-ease-out), transform var(--kk-dur-base) var(--kk-ease-out), visibility 0s linear var(--kk-dur-base); z-index: 55; }
.kk-nav__item.is-open > .kk-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.kk-menu--noimg { grid-template-columns: 1fr; min-width: 280px; }
.kk-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kk-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: var(--kk-r); color: var(--kk-text); text-decoration: none; font-weight: 550; font-size: .9375rem; }
.kk-menu a:hover { background: var(--kk-surface-2); color: var(--kk-primary); }
.kk-menu a i { opacity: 0; transform: translateX(-4px); transition: opacity var(--kk-dur-fast), transform var(--kk-dur-fast); }
.kk-menu a:hover i { opacity: 1; transform: none; }
.kk-menu__all { border-top: 1px solid var(--kk-line); margin-top: 6px; padding-top: 6px; }
.kk-menu__all a { color: var(--kk-primary); font-weight: 650; }
.kk-menu__feature { position: relative; display: block; border-radius: var(--kk-r); overflow: hidden; aspect-ratio: 4 / 5; color: #fff; text-decoration: none; padding: 0 !important; }
.kk-menu__feature img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--kk-dur-reveal) var(--kk-ease-out); }
.kk-menu__feature:hover img { transform: scale(1.04); }
.kk-menu__feature span { position: absolute; inset: auto 0 0 0; padding: 40px 14px 14px; background: linear-gradient(to top, rgb(12 17 14 / .78), transparent); font-weight: 650; font-stretch: 106%; display: flex; justify-content: space-between; align-items: center; }
.kk-header__actions { display: flex; align-items: center; gap: 6px; }
.kk-header__phone { display: inline-flex; align-items: center; gap: 8px; margin-right: 6px; color: var(--kk-text); font-weight: 600; font-size: .9375rem; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kk-header__phone i { font-size: 18px; color: var(--kk-primary); }
.kk-iconbtn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--kk-r); background: none; border: 0; color: var(--kk-text); cursor: pointer; text-decoration: none; transition: background-color var(--kk-dur-fast); }
.kk-iconbtn:hover { background: color-mix(in oklab, var(--kk-text) 7%, transparent); }
.kk-iconbtn i { font-size: 22px; }
.kk-cartcount { position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--kk-accent); color: #151B17; font-size: 11px; font-weight: 750; line-height: 19px; text-align: center; font-variant-numeric: tabular-nums; transform-origin: center; }
.kk-cartcount[data-count="0"] { display: none; }
.kk-cartcount.is-bump { animation: kk-bump 520ms var(--kk-ease-out); }
@keyframes kk-bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
.kk-burger { display: none; }

/* drawer */
.kk-drawer { position: fixed; inset: 0; z-index: 60; }
.kk-drawer[hidden] { display: none; }
.kk-drawer__scrim { position: absolute; inset: 0; background: rgb(12 17 14 / .5); opacity: 0; transition: opacity var(--kk-dur-slow) var(--kk-ease-out); }
.kk-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100vw, 420px); background: var(--kk-surface); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--kk-dur-slow) var(--kk-ease-drawer); box-shadow: var(--kk-shadow-lg); }
.kk-drawer.is-open .kk-drawer__scrim { opacity: 1; }
.kk-drawer.is-open .kk-drawer__panel { transform: none; }
.kk-drawer__top { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--kk-line); }
.kk-drawer__body { flex: 1; overflow-y: auto; padding: 8px 20px 24px; }
.kk-drawer__body > ul { list-style: none; margin: 0; padding: 0; }
.kk-drawer__body > ul > li { border-bottom: 1px solid var(--kk-line); }
.kk-drawer__body a, .kk-drawer__body summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; color: var(--kk-text); text-decoration: none; font-size: 1.25rem; font-weight: 650; font-stretch: 108%; cursor: pointer; list-style: none; }
.kk-drawer__body summary::-webkit-details-marker { display: none; }
.kk-drawer__body details[open] summary i { transform: rotate(180deg); }
.kk-drawer__body summary i { transition: transform var(--kk-dur-fast); font-size: 16px; }
.kk-drawer__body details ul { list-style: none; margin: 0 0 12px; padding: 0 0 0 14px; }
.kk-drawer__body details a { min-height: 46px; font-size: 1rem; font-weight: 550; font-stretch: 100%; }
.kk-drawer__foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--kk-line); display: grid; gap: 12px; }
.kk-drawer__foot .kk-grid2 { gap: 10px; }
.kk-drawer__foot p { font-size: .8125rem; color: var(--kk-muted); }
body.kk-lock { overflow: hidden; }

/* ---------- hero ---------- */
.kk-hero { position: relative; padding-block: clamp(28px, 4vw, 64px) clamp(48px, 6vw, 96px); overflow: hidden; }
.kk-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.kk-hero__copy { position: relative; z-index: 1; }
.kk-hero__copy .kk-display { margin-bottom: 22px; }
.kk-hero__copy .kk-lead { margin-bottom: 32px; max-width: 34ch; color: var(--kk-text); opacity: .78; }
.kk-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.kk-hero__facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 36px 0 0; padding: 26px 0 0; list-style: none; border-top: 1px solid var(--kk-line); }
.kk-hero__facts li { display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 550; }
.kk-hero__facts i { font-size: 20px; color: var(--kk-primary); }
.kk-hero__media { position: relative; margin: 0; }
.kk-hero__main { position: relative; border-radius: var(--kk-r); overflow: hidden; aspect-ratio: 4 / 4.4; background: var(--kk-surface-2); box-shadow: var(--kk-shadow-md); }
.kk-hero__main img { width: 100%; height: 100%; object-fit: cover; }
.kk-hero__inset { position: absolute; left: -9%; bottom: 9%; width: 38%; aspect-ratio: 4 / 5; border-radius: var(--kk-r); overflow: hidden; border: 5px solid var(--kk-bg); box-shadow: var(--kk-shadow-lg); }
.kk-hero__inset img { width: 100%; height: 100%; object-fit: cover; }
.kk-hero__tag { position: absolute; right: 18px; top: 18px; display: grid; gap: 4px; padding: 14px 16px; min-width: 200px; background: color-mix(in oklab, var(--kk-surface) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: var(--kk-r); box-shadow: var(--kk-shadow-md); color: var(--kk-text); text-decoration: none; transition: transform var(--kk-dur-base) var(--kk-ease-out), box-shadow var(--kk-dur-base); }
.kk-hero__tag:hover { transform: translateY(-2px); text-decoration: none; }
.kk-hero__tag small { font-size: .7rem; font-weight: 650; font-stretch: 120%; letter-spacing: .12em; text-transform: uppercase; color: var(--kk-muted); }
.kk-hero__tag strong { font-family: var(--kk-font); font-size: 1.05rem; font-stretch: 106%; }
.kk-hero__tag span { font-size: .9rem; color: var(--kk-muted); font-variant-numeric: tabular-nums; }
.kk-hero__tag span b { color: var(--kk-primary); font-weight: 700; }
.kk-hero__grain { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 85% 12%, color-mix(in oklab, var(--kk-accent) 16%, transparent), transparent 42%); }

/* ---------- trust strip ---------- */
.kk-trust { border-block: 1px solid var(--kk-line); background: var(--kk-surface); }
.kk-trust ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 26px 0; }
.kk-trust li { display: flex; gap: 14px; align-items: flex-start; }
.kk-trust i { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--kk-r); background: var(--kk-surface-2); color: var(--kk-primary); font-size: 22px; }
.kk-trust strong { display: block; font-family: var(--kk-font); font-size: .9875rem; font-weight: 650; font-stretch: 104%; line-height: 1.3; }
.kk-trust span { font-size: .8125rem; color: var(--kk-muted); line-height: 1.45; }

/* ---------- tiles (bento) ---------- */
.kk-tiles { display: grid; gap: var(--kk-gap); grid-template-columns: 1.35fr 1fr 1fr; grid-auto-rows: clamp(220px, 21vw, 300px); }
.kk-tiles[data-count="4"] > :nth-child(1) { grid-row: span 2; }
.kk-tiles[data-count="4"] > :nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
.kk-tiles[data-count="3"] { grid-template-columns: 1.35fr 1fr; }
.kk-tiles[data-count="3"] > :nth-child(1) { grid-row: span 2; }
.kk-tiles[data-count="5"] > :nth-child(1) { grid-row: span 2; }
.kk-tiles[data-count="2"] { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(260px, 28vw, 380px); }
.kk-tile { position: relative; display: block; border-radius: var(--kk-r); overflow: hidden; background: var(--kk-surface-2); color: #fff; text-decoration: none; isolation: isolate; }
.kk-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--kk-dur-reveal) var(--kk-ease-out); z-index: -2; }
.kk-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(12 17 14 / .78) 0%, rgb(12 17 14 / .25) 48%, transparent 70%); z-index: -1; }
.kk-tile:hover img { transform: scale(1.045); }
.kk-tile__body { position: absolute; inset: auto 0 0 0; padding: clamp(18px, 2vw, 28px); display: grid; gap: 6px; }
.kk-tile__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--kk-font); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.75rem); font-weight: 700; font-stretch: 108%; letter-spacing: -0.01em; line-height: 1.1; }
.kk-tile__title i { font-size: 22px; transition: transform var(--kk-dur-base) var(--kk-ease-out); }
.kk-tile:hover .kk-tile__title i { transform: translateX(4px); }
.kk-tile__text { font-size: .9rem; color: rgb(238 240 234 / .82); max-width: 38ch; }
.kk-tile:hover { text-decoration: none; }

/* ---------- product grids + cards ---------- */
.kk-grid { display: grid; gap: var(--kk-gap); }
.kk-grid--buy { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kk-grid--quote { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.kk-pcard { position: relative; display: flex; flex-direction: column; background: var(--kk-surface); border-radius: var(--kk-r); overflow: hidden; transition: transform var(--kk-dur-base) var(--kk-ease-out), box-shadow var(--kk-dur-base) var(--kk-ease-out); }
.kk-pcard--buy { box-shadow: var(--kk-shadow-sm); }
.kk-pcard:hover { box-shadow: var(--kk-shadow-md); }
.kk-pcard--buy:hover { transform: translateY(-2px); }
.kk-pcard:focus-within { box-shadow: 0 0 0 2px var(--kk-primary); }
.kk-pcard__media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--kk-surface-2); overflow: hidden; }
.kk-pcard--quote .kk-pcard__media { aspect-ratio: 4 / 3; }
.kk-pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--kk-dur-reveal) var(--kk-ease-out); }
.kk-pcard:hover .kk-pcard__media img { transform: scale(1.04); }
.kk-pcard__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px; }
.kk-pcard--quote .kk-pcard__body { padding: 20px 20px 22px; gap: 10px; }
.kk-pcard__title { font-family: var(--kk-font); font-size: 1rem; font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kk-pcard--quote .kk-pcard__title { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); font-weight: 700; font-stretch: 106%; letter-spacing: -0.01em; }
.kk-pcard__title a { color: inherit; text-decoration: none; }
.kk-pcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.kk-pcard__spec { font-size: .8125rem; color: var(--kk-muted); }
.kk-pcard__lead { font-size: .9375rem; color: var(--kk-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kk-pcard__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.kk-pcard__price strong { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kk-pcard--quote .kk-pcard__price strong { font-size: 1.4rem; font-stretch: 104%; }
.kk-pcard__price .kk-from { font-size: .72rem; font-weight: 650; font-stretch: 120%; letter-spacing: .12em; text-transform: uppercase; color: var(--kk-muted); }
.kk-pcard__price small { font-size: .75rem; color: var(--kk-muted); }
.kk-pcard__price s { color: var(--kk-muted); font-size: .9rem; }
.kk-pcard__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8125rem; color: var(--kk-muted); }
.kk-pcard__meta span { display: inline-flex; align-items: center; gap: 6px; }
.kk-pcard__meta i { font-size: 16px; color: var(--kk-primary); }
.kk-pcard__cta { position: relative; z-index: 1; margin-top: 6px; }
.kk-pcard--quote .kk-pcard__cta { margin-top: 8px; }
.kk-pcard__stamps { display: flex; flex-wrap: wrap; gap: 6px; }

/* spec plate: shown until the owner uploads a photo */
.kk-plate { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 18px; text-align: center; color: var(--kk-primary); background:
  repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in oklab, var(--kk-primary) 6%, transparent) 23px 24px),
  repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in oklab, var(--kk-primary) 6%, transparent) 23px 24px),
  var(--kk-surface-2); }
.kk-plate__board { position: relative; width: 62%; height: 22%; min-height: 34px; border-radius: 2px; background: linear-gradient(180deg, #d7b98a, #c9a46d 55%, #b98f57); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12), 0 10px 18px -10px rgb(0 0 0 / .45); }
.kk-plate__board::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 5px, rgb(120 80 30 / .18) 5px 6px); border-radius: inherit; }
.kk-plate__board--post { width: 22%; height: 58%; background: linear-gradient(90deg, #cdb07d, #b48b52); }
.kk-plate__board--post::before { background: repeating-linear-gradient(90deg, transparent 0 5px, rgb(120 80 30 / .18) 5px 6px); }
.kk-plate__board--panel { width: 60%; height: 56%; background: repeating-linear-gradient(90deg, #cfb07c 0 16px, #bc955e 16px 18px); }
.kk-plate__board--sheet { width: 60%; height: 42%; background: radial-gradient(circle at 20% 30%, rgb(255 255 255 / .12) 0 2px, transparent 3px) 0 0 / 11px 9px, linear-gradient(135deg, #cdb58c, #b9996a); }
.kk-plate__dim { font-family: var(--kk-font); font-size: .82rem; font-weight: 650; font-stretch: 112%; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.kk-plate__note { font-size: .7rem; font-weight: 600; font-stretch: 120%; letter-spacing: .12em; text-transform: uppercase; color: var(--kk-muted); }

/* stock line */
.kk-stock { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 550; }
.kk-stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.kk-stock--in { color: var(--kk-success); }
.kk-stock--low { color: var(--kk-warning); }
.kk-stock--out { color: var(--kk-danger); }
.kk-stock--order { color: var(--kk-muted); }

/* ---------- catalog page ---------- */
.kk-pagehead { padding-block: clamp(24px, 3vw, 40px) clamp(28px, 3.5vw, 48px); }
.kk-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; font-size: .8125rem; color: var(--kk-muted); }
.kk-crumbs a { color: var(--kk-muted); text-decoration: none; }
.kk-crumbs a:hover { color: var(--kk-primary); text-decoration: underline; }
.kk-crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
.kk-pagehead__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: end; }
.kk-pagehead .kk-h1 { margin-bottom: 14px; }
.kk-pagehead--plain .kk-pagehead__grid { grid-template-columns: 1fr; }
.kk-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.kk-toolbar__count { font-size: .875rem; color: var(--kk-muted); }
.kk-toolbar .kk-select { width: auto; min-height: 42px; font-size: .9rem; }
.kk-catalog__group + .kk-catalog__group { margin-top: var(--kk-section); }
.kk-note { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 36px; padding: 22px 24px; border-radius: var(--kk-r); background: var(--kk-surface-2); }
.kk-note p { font-weight: 550; }
.kk-empty { padding: 48px 24px; text-align: center; border: 1.5px dashed var(--kk-line-strong); border-radius: var(--kk-r); color: var(--kk-muted); }

/* ---------- PDP ---------- */
.kk-pdp { padding-block: clamp(20px, 2.6vw, 36px) var(--kk-section); }
.kk-pdp__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.kk-gallery__main { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--kk-r); overflow: hidden; background: var(--kk-surface-2); border: 0; padding: 0; cursor: zoom-in; }
.kk-gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--kk-dur-base); }
.kk-gallery__main.is-swapping img { opacity: .35; }
.kk-gallery__count { position: absolute; right: 12px; bottom: 12px; padding: 5px 10px; border-radius: var(--kk-r-sm); background: rgb(12 17 14 / .62); color: #fff; font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.kk-gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-top: 10px; }
.kk-gallery__thumb { aspect-ratio: 1; border-radius: var(--kk-r); overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--kk-surface-2); cursor: pointer; opacity: .7; transition: opacity var(--kk-dur-fast), border-color var(--kk-dur-fast); }
.kk-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kk-gallery__thumb:hover { opacity: 1; }
.kk-gallery__thumb[aria-current="true"] { border-color: var(--kk-primary); opacity: 1; }
.kk-buybox { position: sticky; top: calc(var(--kk-header-h) + 20px); display: grid; gap: 18px; }
.kk-buybox h1 { font-size: clamp(1.75rem, 1.45rem + 1.3vw, 2.6rem); font-weight: 750; font-stretch: 108%; letter-spacing: -0.02em; line-height: 1.08; }
.kk-buybox__lead { color: var(--kk-muted); font-size: 1.0625rem; }
.kk-buybox__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.kk-buybox__price strong { font-size: clamp(1.75rem, 1.58rem + .74vw, 2.25rem); font-weight: 750; font-stretch: 104%; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; transition: opacity var(--kk-dur-fast); }
.kk-buybox__price strong.is-loading { opacity: .4; }
.kk-buybox__price span { color: var(--kk-muted); font-size: .9rem; }
.kk-buybox__price .kk-from { font-size: .75rem; font-weight: 650; font-stretch: 120%; letter-spacing: .12em; text-transform: uppercase; color: var(--kk-muted); align-self: center; }
.kk-opts { display: grid; gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; }
.kk-opts legend { padding: 0; margin-bottom: 10px; font-size: .9rem; font-weight: 650; display: flex; justify-content: space-between; width: 100%; }
.kk-opts legend span { font-weight: 500; color: var(--kk-muted); }
.kk-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.kk-pill { position: relative; }
.kk-pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kk-pill span { display: inline-flex; flex-direction: column; justify-content: center; min-height: 46px; padding: 6px 16px; border-radius: var(--kk-r); border: 1.5px solid var(--kk-line-strong); background: var(--kk-surface); font-size: .9375rem; font-weight: 550; line-height: 1.25; transition: border-color var(--kk-dur-fast), background-color var(--kk-dur-fast), box-shadow var(--kk-dur-fast); }
.kk-pill span small { font-size: .75rem; font-weight: 500; color: var(--kk-muted); }
.kk-pill input:hover + span { border-color: var(--kk-text); }
.kk-pill input:checked + span { border-color: var(--kk-primary); box-shadow: inset 0 0 0 1px var(--kk-primary); background: color-mix(in oklab, var(--kk-primary) 6%, var(--kk-surface)); font-weight: 650; }
.kk-pill input:focus-visible + span { outline: 2px solid var(--kk-primary); outline-offset: 2px; }
.kk-pill input:disabled + span { border-style: dashed; color: var(--kk-muted); text-decoration: line-through; }
.kk-rows { display: grid; gap: 8px; }
.kk-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; border-radius: var(--kk-r); border: 1.5px solid var(--kk-line); background: var(--kk-surface); cursor: pointer; transition: border-color var(--kk-dur-fast), background-color var(--kk-dur-fast); }
.kk-row:hover { border-color: var(--kk-line-strong); }
.kk-row input { width: 20px; height: 20px; accent-color: var(--kk-primary); flex: none; margin: 0; }
.kk-row__name { flex: 1; font-weight: 550; line-height: 1.3; }
.kk-row__delta { font-size: .875rem; color: var(--kk-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kk-row:has(input:checked) { border-color: var(--kk-primary); background: color-mix(in oklab, var(--kk-primary) 5%, var(--kk-surface)); }
.kk-row:has(input:checked) .kk-row__delta { color: var(--kk-primary); font-weight: 650; }
.kk-row.is-locked { opacity: .45; cursor: not-allowed; }
.kk-row.is-locked:hover { border-color: var(--kk-line); }
.kk-qtyline { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.kk-qty { display: inline-flex; align-items: center; height: 48px; border: 1.5px solid var(--kk-line-strong); border-radius: var(--kk-r); background: var(--kk-surface); overflow: hidden; }
.kk-qty button { width: 44px; height: 100%; border: 0; background: none; color: var(--kk-text); font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.kk-qty button:hover { background: var(--kk-surface-2); }
.kk-qty button:disabled { opacity: .35; cursor: not-allowed; }
.kk-qty input { width: 56px; height: 100%; border: 0; text-align: center; font: inherit; font-weight: 650; font-variant-numeric: tabular-nums; background: none; -moz-appearance: textfield; }
.kk-qty input::-webkit-outer-spin-button, .kk-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kk-linetotal { font-size: .9rem; color: var(--kk-muted); font-variant-numeric: tabular-nums; }
.kk-linetotal b { color: var(--kk-text); }
.kk-panel { display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--kk-r); background: var(--kk-surface-2); font-size: .9rem; line-height: 1.5; }
.kk-panel i { flex: none; font-size: 22px; color: var(--kk-primary); margin-top: 1px; }
.kk-panel strong { display: block; font-size: .9375rem; margin-bottom: 2px; }
.kk-buybox__help { font-size: .875rem; color: var(--kk-muted); }
.kk-buybox__help a { font-weight: 600; }
.kk-buybox__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .875rem; color: var(--kk-muted); }
.kk-buybox__meta span { display: inline-flex; align-items: center; gap: 7px; }
.kk-buybox__meta i { color: var(--kk-primary); font-size: 18px; }

/* configurator */
.kk-config { margin-top: clamp(48px, 6vw, 88px); padding-block: clamp(36px, 4.5vw, 64px); background: var(--kk-surface-2); }
.kk-config__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.kk-config__steps { display: grid; gap: 34px; }
.kk-config .kk-pill span { background: var(--kk-surface); }
.kk-config .kk-row { border-color: transparent; box-shadow: var(--kk-shadow-sm); }
.kk-custom { display: none; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.kk-custom.is-on { display: grid; }
.kk-summary { position: sticky; top: calc(var(--kk-header-h) + 20px); background: var(--kk-surface); border-radius: var(--kk-r); box-shadow: var(--kk-shadow-md); padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 16px; }
.kk-summary h3 { font-size: .75rem; font-weight: 650; font-stretch: 120%; letter-spacing: .12em; text-transform: uppercase; color: var(--kk-muted); }
.kk-summary__name { font-family: var(--kk-font); font-size: 1.35rem; font-weight: 700; font-stretch: 106%; line-height: 1.15; }
.kk-summary__list { list-style: none; margin: 0; padding: 0 0 16px; display: grid; gap: 8px; border-bottom: 1px solid var(--kk-line); font-size: .9375rem; }
.kk-summary__list li { display: flex; justify-content: space-between; gap: 12px; }
.kk-summary__list li span:last-child { color: var(--kk-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kk-summary__total { display: grid; gap: 4px; }
.kk-summary__total small { font-size: .8125rem; color: var(--kk-muted); }
.kk-summary__total strong { font-size: clamp(1.9rem, 1.7rem + .8vw, 2.4rem); font-weight: 750; font-stretch: 104%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: opacity var(--kk-dur-fast); }
.kk-summary__total strong.is-loading { opacity: .4; }
.kk-summary__fine { font-size: .8125rem; color: var(--kk-muted); }

/* steps */
.kk-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); list-style: none; margin: 0; padding: 0; counter-reset: kkstep; }
.kk-steps li { position: relative; padding-top: 30px; }
.kk-steps li::before { counter-increment: kkstep; content: counter(kkstep, decimal-leading-zero); position: absolute; top: 0; left: 0; font-family: var(--kk-font); font-size: .75rem; font-weight: 700; font-stretch: 120%; letter-spacing: .12em; color: var(--kk-primary); background: var(--kk-accent); padding: 4px 7px; border-radius: var(--kk-r-sm); }
.kk-steps li::after { content: ""; position: absolute; top: 11px; left: 44px; right: -24px; height: 1px; background: linear-gradient(90deg, var(--kk-line-strong) 0 100%); opacity: .6; }
.kk-steps li:last-child::after { display: none; }

.kk-steps h3 { font-size: 1.2rem; font-weight: 700; font-stretch: 106%; margin: 12px 0 8px; }
.kk-steps p { color: var(--kk-muted); font-size: .9375rem; }
.kk-band--green .kk-steps p, .kk-band--dark .kk-steps p { color: var(--kk-dark-muted); }
.kk-band--green .kk-steps li::after { background: rgb(255 255 255 / .25); }

.kk-details { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); }
.kk-details h2 { font-size: 1.5rem; font-weight: 700; font-stretch: 106%; margin-bottom: 16px; }
.kk-specs { display: grid; gap: 24px; }
.kk-specs div { display: grid; grid-template-columns: 140px 1fr; gap: 6px 16px; font-size: .9375rem; padding-top: 14px; border-top: 1px solid var(--kk-line); }
.kk-specs dt { color: var(--kk-muted); }
.kk-specs dd { margin: 0; font-weight: 550; font-variant-numeric: tabular-nums; }

/* sticky mobile bar */
.kk-stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--kk-surface) 96%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 -1px 0 var(--kk-line), 0 -12px 30px -18px rgb(12 17 14 / .4); transform: translateY(110%); transition: transform var(--kk-dur-slow) var(--kk-ease-out); }
.kk-stickybar.is-on { transform: none; }
.kk-stickybar__price { display: grid; line-height: 1.2; }
.kk-stickybar__price small { font-size: .72rem; color: var(--kk-muted); }
.kk-stickybar__price strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* ---------- split / feature ---------- */
.kk-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 88px); align-items: center; }
.kk-split--flip .kk-split__media { order: 2; }
.kk-split__media { position: relative; border-radius: var(--kk-r); overflow: hidden; aspect-ratio: 5 / 4; background: var(--kk-surface-2); }
.kk-split__media img { width: 100%; height: 100%; object-fit: cover; }
.kk-split__copy { display: grid; gap: 18px; justify-items: start; }
.kk-split__copy .kk-prose { color: var(--kk-muted); }
.kk-band--green .kk-split__copy .kk-prose, .kk-band--dark .kk-split__copy .kk-prose { color: var(--kk-dark-muted); }
.kk-ticks { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 10px; }
.kk-ticks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 550; }
.kk-ticks i { flex: none; margin-top: 2px; font-size: 20px; color: var(--kk-primary); }
.kk-band--green .kk-ticks i, .kk-band--dark .kk-ticks i { color: var(--kk-dark-accent); }
.kk-split__stat { position: absolute; left: 16px; bottom: 16px; padding: 12px 16px; border-radius: var(--kk-r); background: var(--kk-surface); color: var(--kk-text); box-shadow: var(--kk-shadow-md); display: grid; }
.kk-split__stat strong { font-family: var(--kk-font); font-size: 1.6rem; font-weight: 750; font-stretch: 110%; line-height: 1; font-variant-numeric: tabular-nums; }
.kk-split__stat span { font-size: .8125rem; color: var(--kk-muted); }

/* ---------- reviews ---------- */
.kk-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kk-gap); }
.kk-review { display: grid; gap: 16px; align-content: start; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--kk-r); background: var(--kk-surface); box-shadow: var(--kk-shadow-sm); margin: 0; }
.kk-review__stars { color: var(--kk-accent); font-size: 16px; letter-spacing: 2px; }
.kk-review blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.55; }
.kk-review figcaption { font-size: .8125rem; color: var(--kk-muted); display: flex; align-items: center; gap: 8px; }
.kk-review figcaption i { font-size: 16px; color: #1877F2; }

/* ---------- yard photo band ---------- */
.kk-yard { display: grid; gap: var(--kk-gap); grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: clamp(170px, 17vw, 250px); }
.kk-yard[data-count="4"] > :nth-child(1) { grid-row: span 2; }
.kk-yard[data-count="4"] > :nth-child(4) { grid-column: 2 / span 2; }
.kk-yard[data-count="3"] > :nth-child(1) { grid-row: span 2; }
.kk-yard[data-count="3"] > :nth-child(3) { grid-column: 2 / span 2; }
.kk-yard[data-count="2"] { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(220px, 26vw, 360px); }
.kk-yard[data-count="1"] { grid-template-columns: 1fr; grid-auto-rows: clamp(240px, 36vw, 480px); }
.kk-yard__item { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--kk-r); overflow: hidden; background: var(--kk-surface-2); cursor: zoom-in; }
.kk-yard__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--kk-dur-reveal) var(--kk-ease-out); }
.kk-yard__item:hover img { transform: scale(1.04); }
.kk-yard__item:focus-visible { outline-offset: 3px; }
.kk-yard__cap { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: var(--kk-r-sm); background: rgb(12 17 14 / .66); color: #fff; font-size: .8125rem; font-weight: 550; }

/* ---------- faq ---------- */
.kk-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.kk-faq__list { border-top: 1px solid var(--kk-line); }
.kk-faq details { border-bottom: 1px solid var(--kk-line); }
.kk-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none; font-family: var(--kk-font); font-size: 1.0625rem; font-weight: 650; font-stretch: 104%; }
.kk-faq summary::-webkit-details-marker { display: none; }
.kk-faq summary i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--kk-surface-2); color: var(--kk-primary); font-size: 16px; transition: transform var(--kk-dur-base) var(--kk-ease-out), background-color var(--kk-dur-fast); }
.kk-faq details[open] summary i { transform: rotate(45deg); background: var(--kk-primary); color: var(--kk-primary-contrast); }
.kk-faq__a { padding: 0 48px 22px 0; color: var(--kk-muted); }
.kk-faq__a > * + * { margin-top: .8em; }

/* ---------- cta band ---------- */
.kk-cta { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 32px; align-items: center; }
.kk-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.kk-cta .kk-h2 { max-width: 20ch; }
.kk-cta p { margin-top: 12px; }

/* ---------- contact ---------- */
.kk-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.kk-contact__list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 18px; }
.kk-contact__list li { display: flex; gap: 14px; }
.kk-contact__list i { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--kk-r); background: var(--kk-surface-2); color: var(--kk-primary); font-size: 20px; }
.kk-contact__list small { display: block; font-size: .75rem; font-weight: 650; font-stretch: 120%; letter-spacing: .12em; text-transform: uppercase; color: var(--kk-muted); margin-bottom: 2px; }
.kk-contact__list a, .kk-contact__list span { color: var(--kk-text); font-weight: 600; text-decoration: none; }
.kk-contact__list a:hover { color: var(--kk-primary); text-decoration: underline; }
.kk-map { border-radius: var(--kk-r); overflow: hidden; aspect-ratio: 4 / 3; background: var(--kk-surface-2); box-shadow: var(--kk-shadow-sm); }
.kk-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.05); }
.kk-card { background: var(--kk-surface); border-radius: var(--kk-r); box-shadow: var(--kk-shadow-sm); padding: clamp(22px, 3vw, 36px); }
.kk-card h2 { margin-bottom: 8px; }

/* ---------- cart ---------- */
.kk-cart { padding-block: clamp(20px, 3vw, 40px) var(--kk-section); }
.kk-cart__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(24px, 3vw, 48px); align-items: start; margin-top: 28px; }
.kk-cartline { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 18px; background: var(--kk-surface); border-radius: var(--kk-r); box-shadow: var(--kk-shadow-sm); }
.kk-cartline + .kk-cartline { margin-top: 12px; }
.kk-cartline__media { width: 96px; aspect-ratio: 1; border-radius: var(--kk-r); overflow: hidden; background: var(--kk-surface-2); }
.kk-cartline__media img { width: 100%; height: 100%; object-fit: cover; }
.kk-cartline__name { font-weight: 650; line-height: 1.3; }
.kk-cartline__meta { font-size: .8125rem; color: var(--kk-muted); margin-top: 3px; }
.kk-cartline__unit { font-size: .875rem; color: var(--kk-muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.kk-cartline__qty form { display: inline-flex; align-items: center; height: 42px; border: 1.5px solid var(--kk-line-strong); border-radius: var(--kk-r); overflow: hidden; }
.kk-cartline__qty button { width: 40px; height: 100%; border: 0; background: none; cursor: pointer; font-size: 17px; color: var(--kk-text); }
.kk-cartline__qty button:hover { background: var(--kk-surface-2); }
.kk-cartline__qty span { min-width: 34px; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; }
.kk-cartline__end { display: grid; justify-items: end; gap: 8px; }
.kk-cartline__total { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.kk-cartline__remove button { border: 0; background: none; color: var(--kk-muted); font-size: .8125rem; cursor: pointer; text-decoration: underline; padding: 4px 0; }
.kk-cartline__remove button:hover { color: var(--kk-danger); }
.kk-summarybox { position: sticky; top: calc(var(--kk-header-h) + 20px); background: var(--kk-surface); border-radius: var(--kk-r); box-shadow: var(--kk-shadow-md); padding: 24px; display: grid; gap: 14px; }
.kk-summarybox h2 { font-size: 1.2rem; font-weight: 700; font-stretch: 106%; }
.kk-summarybox__row { display: flex; justify-content: space-between; gap: 16px; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.kk-summarybox__row span:first-child { color: var(--kk-muted); }
.kk-summarybox__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--kk-line); font-weight: 700; }
.kk-summarybox__total strong { font-size: 1.6rem; font-stretch: 104%; font-variant-numeric: tabular-nums; }
.kk-summarybox__fine { font-size: .8125rem; color: var(--kk-muted); }
.kk-cart__empty { display: grid; justify-items: center; gap: 16px; text-align: center; padding: 64px 24px; background: var(--kk-surface); border-radius: var(--kk-r); box-shadow: var(--kk-shadow-sm); margin-top: 28px; }
.kk-cart__empty i { font-size: 44px; color: var(--kk-primary); }

/* ---------- timber delivery checker (kk-postcode-check) ---------- */
.kk-pc { display: grid; gap: 8px; }
.kk-pc__row { display: flex; gap: 8px; }
.kk-pc__row .kk-input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.kk-pc__row .kk-input::placeholder { text-transform: none; }
.kk-pc__row .kk-btn { flex: none; }
.kk-pc__result { white-space: pre-line; font-size: .9375rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.kk-pc__result.is-error { color: var(--kk-danger); }
.kk-pc__result.has-estimate { display: grid; gap: 2px; white-space: normal; padding: 12px 14px; border-radius: var(--kk-r); background: color-mix(in oklab, var(--kk-primary) 6%, var(--kk-surface)); border: 1px solid color-mix(in oklab, var(--kk-primary) 22%, var(--kk-surface)); }
.kk-pc__label { font-size: .8125rem; color: var(--kk-muted); }
.kk-pc__fee { font-family: var(--kk-font); font-size: 1.75rem; font-weight: 750; font-stretch: 104%; line-height: 1.15; color: var(--kk-primary); font-variant-numeric: tabular-nums; }
.kk-pc__extra { white-space: pre-line; font-size: .875rem; line-height: 1.45; margin-top: 4px; }
.kk-pc__note { font-size: .8125rem; color: var(--kk-muted); }
.kk-panel .kk-pc { margin-top: 14px; }
.kk-summarybox .kk-pc { padding-top: 16px; border-top: 1px solid var(--kk-line); }
.sl-summary .kk-pc { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--kk-line); }
.kk-pcbox { max-width: 560px; display: grid; gap: 12px; }

/* ---------- checkout: timber delivery added to the order (kk-codel) ---------- */
.kk-codel { display: grid; gap: 12px; padding: 16px 18px; border-radius: var(--kk-r); border: 1.5px solid var(--kk-line); background: var(--kk-surface); }
.kk-codel__title { font-weight: 700; font-size: 1rem; }
.kk-codel__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kk-codel__opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--kk-line-strong); border-radius: var(--kk-r); cursor: pointer; transition: border-color var(--kk-dur-fast), background-color var(--kk-dur-fast); }
.kk-codel__opt:has(input:checked) { border-color: var(--kk-primary); background: color-mix(in oklab, var(--kk-primary) 6%, var(--kk-surface)); }
.kk-codel__opt input { flex: none; margin-top: 3px; accent-color: var(--kk-primary); }
.kk-codel__opt span { display: grid; gap: 2px; }
.kk-codel__opt strong { font-size: .9375rem; font-weight: 650; }
.kk-codel__opt small { font-size: .8125rem; color: var(--kk-muted); }
.kk-codel__result { font-size: .9375rem; line-height: 1.5; color: var(--kk-muted); font-variant-numeric: tabular-nums; }
.kk-codel__result.is-error { color: var(--kk-danger); }
.kk-codel__result.is-ok { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--kk-r); background: color-mix(in oklab, var(--kk-primary) 6%, var(--kk-surface)); border: 1px solid color-mix(in oklab, var(--kk-primary) 22%, var(--kk-surface)); color: var(--kk-text); }
.kk-codel__label { font-size: .8125rem; color: var(--kk-muted); }
.kk-codel__fee { font-family: var(--kk-font); font-size: 1.75rem; font-weight: 750; font-stretch: 104%; line-height: 1.15; color: var(--kk-primary); font-variant-numeric: tabular-nums; }
.kk-codel__added { font-size: .875rem; }
.sl-summary__row.is-pending span:last-child { color: var(--kk-muted); }
[data-kk-pay].is-waiting { opacity: .55; cursor: not-allowed; }
.kk-cartline--delivery .kk-cartline__media { display: grid; place-items: center; font-size: 34px; color: var(--kk-primary); }
.kk-cartline--delivery .kk-cartline__end { grid-column: -2; }
@media (max-width: 560px) { .kk-codel__opts { grid-template-columns: 1fr; } }

/* ---------- platform checkout / order pages restyle ---------- */
.checkout-page, .kk-orderpage { padding-block: clamp(20px, 3vw, 40px) var(--kk-section); }
.sl-checkout { width: 100%; max-width: calc(var(--kk-max) + 2 * var(--kk-gutter)); margin-inline: auto; padding-inline: var(--kk-gutter); }
.sl-checkout .sl-heading { font-family: var(--kk-font); font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); font-weight: 750; font-stretch: 110%; letter-spacing: -0.02em; margin: 0 0 8px; }
.sl-checkout__grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(24px, 3vw, 48px); align-items: start; margin-top: 24px; }
.sl-checkout__panel, .sl-checkout form.sl-checkout__panel { display: grid; gap: 18px; background: none; border: 0; padding: 0; box-shadow: none; }
.sl-checkout__step { margin: 0; padding: clamp(20px, 2.6vw, 30px); border: 0; border-radius: var(--kk-r); background: var(--kk-surface); box-shadow: var(--kk-shadow-sm); display: grid; gap: 16px; min-width: 0; }
.sl-checkout__step-legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; font-family: var(--kk-font); font-size: 1.15rem; font-weight: 700; font-stretch: 106%; margin-bottom: 4px; padding: 0; }
.sl-checkout__step-legend + * { clear: both; }
.sl-checkout__step-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--kk-primary); color: var(--kk-primary-contrast); font-size: .875rem; font-weight: 700; }
.sl-field { display: grid; gap: 7px; }
.sl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sl-field__label { font-size: .875rem; font-weight: 600; }
.sl-field__req { color: var(--kk-danger); }
.sl-input, .sl-checkout input.input, .sl-checkout select.input { width: 100%; min-height: 48px; padding: 11px 14px; border-radius: var(--kk-r); border: 1.5px solid var(--kk-line-strong); background: var(--kk-surface); color: var(--kk-text); font: inherit; font-size: 1rem; }
.sl-input:focus { outline: none; border-color: var(--kk-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--kk-primary) 18%, transparent); }
.sl-check { display: flex; align-items: flex-start; gap: 12px; font-size: .9375rem; cursor: pointer; }
.sl-check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--kk-primary); flex: none; }
.sl-checkout .sl-btn, .sl-summary .sl-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border-radius: var(--kk-r); border: 1.5px solid var(--kk-primary); background: var(--kk-primary); color: var(--kk-primary-contrast); font-family: var(--kk-font); font-weight: 650; font-stretch: 105%; font-size: 1rem; cursor: pointer; text-decoration: none; width: 100%; transition: background-color var(--kk-dur-fast); }
.sl-checkout .sl-btn:hover { background: var(--kk-primary-hover); }
.sl-checkout .sl-btn--ghost { background: transparent; color: var(--kk-text); border-color: var(--kk-text); min-height: 48px; width: auto; }
.sl-checkout__pay { display: grid; gap: 10px; }
/* card is the main way to pay; bank transfer (invoice) is the quieter second button */
.sl-checkout .sl-btn.kk-pay--invoice { background: var(--kk-surface); color: var(--kk-primary); }
.sl-checkout .sl-btn.kk-pay--invoice:hover { background: color-mix(in oklab, var(--kk-primary) 7%, var(--kk-surface)); }
.kk-buyer__company:not([hidden]) { display: grid; gap: 14px; }
.sl-alert { padding: 14px 16px; border-radius: var(--kk-r); background: color-mix(in oklab, var(--kk-accent) 16%, var(--kk-surface)); border: 1px solid color-mix(in oklab, var(--kk-accent) 40%, var(--kk-surface)); font-size: .9375rem; }
.sl-summary { position: sticky; top: calc(var(--kk-header-h) + 20px); background: var(--kk-surface); border-radius: var(--kk-r); box-shadow: var(--kk-shadow-md); padding: 24px; display: grid; gap: 12px; }
.sl-summary__title { font-family: var(--kk-font); font-size: 1.2rem; font-weight: 700; font-stretch: 106%; margin: 0; }
.sl-summary__lines { display: grid; gap: 12px; }
.sl-summary__line { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; }
.sl-summary__line img, .sl-summary__line-media { width: 56px; height: 56px; border-radius: var(--kk-r); object-fit: cover; background: var(--kk-surface-2); display: block; }
.sl-summary__line-name { font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.sl-summary__line-qty { font-size: .8125rem; color: var(--kk-muted); font-variant-numeric: tabular-nums; }
.sl-summary__line-amount { font-weight: 650; font-variant-numeric: tabular-nums; }
.sl-summary__divider { border: 0; border-top: 1px solid var(--kk-line); margin: 4px 0; }
.sl-summary__row { display: flex; justify-content: space-between; gap: 12px; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.sl-summary__total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.sl-summary__total strong { font-size: 1.6rem; font-stretch: 104%; font-variant-numeric: tabular-nums; }
.sl-summary__note, .sl-summary__customs { font-size: .8125rem; color: var(--kk-muted); margin: 0; }
.sl-trust { display: grid; gap: 8px; padding-top: 6px; }
.sl-trust__item { display: flex; gap: 10px; font-size: .875rem; color: var(--kk-muted); margin: 0; }
.sl-trust__item::before { content: "✓"; color: var(--kk-success); font-weight: 700; }
.sl-backlink { display: inline-flex; margin-top: 18px; color: var(--kk-muted); font-size: .9rem; }
.sl-checkout__signin { display: none; }
.sl-coupon { display: grid; gap: 8px; }
.sl-coupon__row { display: flex; gap: 8px; }
.kk-kicker { font-size: 1.0625rem; color: var(--kk-muted); max-width: 60ch; }
.kk-orderok { max-width: 720px; margin-inline: auto; text-align: center; display: grid; justify-items: center; gap: 18px; padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 48px); background: var(--kk-surface); border-radius: var(--kk-r); box-shadow: var(--kk-shadow-md); }
.kk-orderok > i { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: color-mix(in oklab, var(--kk-success) 14%, var(--kk-surface)); color: var(--kk-success); font-size: 36px; }
.kk-orderok ol { text-align: left; display: grid; gap: 10px; margin: 8px 0; padding-left: 1.2em; color: var(--kk-muted); }

/* ---------- footer ---------- */
.kk-footer { background: var(--kk-dark); color: var(--kk-dark-text); padding-top: clamp(48px, 6vw, 88px); }
.kk-footer a { color: var(--kk-dark-text); text-decoration: none; }
.kk-footer a:hover { color: var(--kk-dark-accent); text-decoration: underline; }
.kk-footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); padding-bottom: clamp(36px, 4vw, 56px); }
.kk-footer .kk-wordmark { color: var(--kk-dark-text); }
.kk-footer .kk-wordmark__kk { font-size: 1.9rem; }
.kk-footer .kk-wordmark__kk .kk-amp { color: var(--kk-dark-accent); }
.kk-footer__desc { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 14px 0 18px; font-size: .7rem; font-weight: 650; font-stretch: 120%; letter-spacing: .14em; text-transform: uppercase; color: var(--kk-dark-muted); }
.kk-footer__desc span + span { padding-left: 14px; border-left: 1px solid var(--kk-dark-line); }
.kk-footer__about { color: var(--kk-dark-muted); font-size: .9375rem; max-width: 40ch; }
.kk-footer h2 { font-size: .75rem; font-weight: 650; font-stretch: 120%; letter-spacing: .14em; text-transform: uppercase; color: var(--kk-dark-muted); margin-bottom: 16px; }
.kk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .9375rem; }
.kk-footer__contact li { display: flex; gap: 10px; align-items: flex-start; color: var(--kk-dark-muted); }
.kk-footer__contact i { color: var(--kk-dark-accent); font-size: 18px; margin-top: 2px; }
.kk-footer__social { display: flex; gap: 8px; margin-top: 20px; }
.kk-footer__social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--kk-r); background: var(--kk-dark-surface); font-size: 20px; }
.kk-footer__social a:hover { background: var(--kk-dark-line); text-decoration: none; }
.kk-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 22px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--kk-dark-line); font-size: .8125rem; color: var(--kk-dark-muted); }
.kk-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.kk-footer__bottom a { color: var(--kk-dark-muted); }

/* ---------- modal / lightbox / toast / fab ---------- */
.kk-modal { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--kk-r); background: var(--kk-surface); color: var(--kk-text); box-shadow: var(--kk-shadow-lg); overflow: auto; }
.kk-modal::backdrop { background: rgb(12 17 14 / .55); backdrop-filter: blur(2px); }
.kk-modal[open] { animation: kk-pop var(--kk-dur-slow) var(--kk-ease-out); }
@keyframes kk-pop { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.kk-modal__head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 24px 16px; background: var(--kk-surface); border-bottom: 1px solid var(--kk-line); }
.kk-modal__head h2 { font-size: 1.5rem; font-weight: 750; font-stretch: 108%; letter-spacing: -0.015em; line-height: 1.15; }
.kk-modal__head p { font-size: .9rem; color: var(--kk-muted); margin-top: 6px; }
.kk-modal__body { padding: 20px 24px 24px; }
.kk-modal__config { margin-bottom: 18px; padding: 14px 16px; border-radius: var(--kk-r); background: var(--kk-surface-2); font-size: .875rem; white-space: pre-line; }
.kk-modal__config strong { display: block; font-size: .72rem; font-weight: 650; font-stretch: 120%; letter-spacing: .12em; text-transform: uppercase; color: var(--kk-muted); margin-bottom: 6px; white-space: normal; }
.kk-modal__done { display: none; text-align: center; padding: 36px 24px 40px; }
.kk-modal.is-done .kk-modal__done { display: grid; justify-items: center; gap: 14px; }
.kk-modal.is-done .kk-modal__form { display: none; }
.kk-modal__done i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: color-mix(in oklab, var(--kk-success) 14%, var(--kk-surface)); color: var(--kk-success); font-size: 32px; }
.kk-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(8 12 10 / .94); color: #fff; }
.kk-lightbox::backdrop { background: transparent; }
.kk-lightbox img { position: absolute; inset: 56px 64px; width: calc(100% - 128px); height: calc(100% - 112px); object-fit: contain; }
.kk-lightbox button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .12); color: #fff; font-size: 22px; cursor: pointer; }
.kk-lightbox button:hover { background: rgb(255 255 255 / .22); }
.kk-lightbox [data-lb-close] { top: 12px; right: 12px; }
.kk-lightbox [data-lb-prev] { left: 12px; top: 50%; transform: translateY(-50%); }
.kk-lightbox [data-lb-next] { right: 12px; top: 50%; transform: translateY(-50%); }
.kk-lightbox__count { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); font-size: .8125rem; opacity: .8; font-variant-numeric: tabular-nums; }
.kk-toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 12px 12px 12px 18px; border-radius: var(--kk-r); background: var(--kk-dark); color: var(--kk-dark-text); box-shadow: var(--kk-shadow-lg); font-size: .9375rem; transform: translate(-50%, 140%); opacity: 0; transition: transform var(--kk-dur-slow) var(--kk-ease-out), opacity var(--kk-dur-base); }
.kk-toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.kk-toast i { font-size: 20px; color: var(--kk-dark-accent); }
.kk-toast a { color: var(--kk-dark-accent); font-weight: 650; white-space: nowrap; padding: 6px 10px; border-radius: var(--kk-r); }
.kk-toast.is-error i { color: #ff8a7a; }
.kk-fab { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--kk-primary); color: var(--kk-primary-contrast); box-shadow: 0 12px 28px -8px rgb(12 17 14 / .5); font-size: 28px; text-decoration: none; transition: transform var(--kk-dur-base) var(--kk-ease-out), background-color var(--kk-dur-fast), bottom var(--kk-dur-slow) var(--kk-ease-out); }
.kk-fab:hover { transform: translateY(-2px); background: var(--kk-primary-hover); text-decoration: none; }
body.kk-has-bar .kk-fab { bottom: 92px; }

/* ---------- link colour guard ----------
   The platform's sections.css colours every link with `.sl-body a` (0,1,1), which beats a single component
   class. Re-assert the component colours on anchors (keep this block after the components). */
.sl-body a.kk-btn { color: var(--b-fg); }
.sl-body a.kk-btn--secondary:hover { color: var(--kk-text); }
.sl-body a.kk-btn--amber:hover { color: #151B17; }
.sl-body a.kk-btn--ghost-light:hover { color: var(--kk-dark-text); }
.sl-body a.kk-chip { color: var(--kk-text); }
.sl-body a.kk-chip.is-active, .sl-body a.kk-chip[aria-current="page"] { color: var(--kk-primary-contrast); }
.sl-body a.kk-tile, .sl-body a.kk-menu__feature { color: #fff; }
.sl-body a.kk-wordmark, .sl-body a.kk-nav__link, .sl-body a.kk-header__phone, .sl-body a.kk-iconbtn, .sl-body a.kk-hero__tag,
.sl-body .kk-menu a, .sl-body .kk-drawer__body a, .sl-body .kk-contact__list a, .sl-body .kk-pcard__title a, .sl-body a.kk-pcard__media { color: var(--kk-text); }
.sl-body .kk-menu a:hover, .sl-body a.kk-nav__link:hover, .sl-body .kk-contact__list a:hover, .sl-body .kk-menu__all a { color: var(--kk-primary); }
.sl-body .kk-crumbs a { color: var(--kk-muted); }
.sl-body .kk-crumbs a:hover { color: var(--kk-primary); }
.sl-body .kk-footer a, .sl-body .kk-footer a.kk-wordmark { color: var(--kk-dark-text); }
.sl-body .kk-footer a:hover { color: var(--kk-dark-accent); }
.sl-body .kk-footer__bottom a { color: var(--kk-dark-muted); }
.sl-body a.kk-fab { color: var(--kk-primary-contrast); }
.sl-body .kk-toast a, .sl-body .kk-announce p a { color: var(--kk-dark-accent); }
.sl-body .kk-announce__side a { color: inherit; }
.sl-body .kk-band--green a.kk-link, .sl-body .kk-band--dark a.kk-link { color: var(--kk-dark-accent); }
.sl-body .sl-backlink { color: var(--kk-muted); }

/* ---------- reveal ---------- */
.kk-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--kk-dur-reveal) var(--kk-ease-out), transform var(--kk-dur-reveal) var(--kk-ease-out); }
.kk-reveal.is-in { opacity: 1; transform: none; }
html:not(.kk-js) .kk-reveal { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1279px) {
  .kk-header__phone span { display: none; }
  .kk-grid--buy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  :root { --kk-header-h: 64px; }
  .kk-nav, .kk-header__phone { display: none; }
  .kk-burger { display: inline-grid; }
  .kk-header__actions { margin-left: auto; }
  .kk-hero__grid, .kk-split, .kk-pdp__grid, .kk-config__grid, .kk-details, .kk-faq, .kk-contact, .kk-cart__grid, .sl-checkout__grid, .kk-pagehead__grid, .kk-cta { grid-template-columns: minmax(0, 1fr); }
  .kk-hero__media { order: -1; }
  .kk-hero__main { aspect-ratio: 4 / 3.2; }
  .kk-hero__inset { left: auto; right: 14px; bottom: -22px; width: 30%; }
  .kk-split--flip .kk-split__media { order: 0; }
  .kk-trust ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kk-grid--quote { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kk-reviews { grid-template-columns: minmax(0, 1fr); }
  .kk-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .kk-steps li::after { display: none; }
  .kk-buybox, .kk-summary, .kk-summarybox, .sl-summary { position: static; }
  .kk-stickybar { display: flex; }
  .kk-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kk-footer__brand { grid-column: 1 / -1; }
  .kk-head--row { grid-template-columns: 1fr; }
  .kk-head__link { grid-column: 1; grid-row: auto; justify-self: start; }
  .kk-announce__side { display: none; }
}
@media (max-width: 767px) {
  .kk-tiles, .kk-tiles[data-count] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; }
  .kk-tiles[data-count] > * { grid-column: auto !important; grid-row: auto !important; }
  .kk-tiles > :first-child { grid-row: auto; aspect-ratio: auto; }
  .kk-yard, .kk-yard[data-count] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(var(--kk-gutter) * -1); padding-inline: var(--kk-gutter); scrollbar-width: none; }
  .kk-yard::-webkit-scrollbar { display: none; }
  .kk-yard > .kk-yard__item { flex: 0 0 82%; height: 240px; scroll-snap-align: start; }
  .kk-grid--buy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kk-grid--quote { grid-template-columns: minmax(0, 1fr); }
  .kk-pcard--buy .kk-pcard__body { padding: 12px; gap: 6px; }
  .kk-pcard--buy .kk-pcard__title { font-size: .9375rem; }
  .kk-pcard--buy .kk-pcard__price strong { font-size: 1.1rem; }
  .kk-pcard--buy .kk-btn { min-height: 44px; padding: 0 10px; font-size: .8125rem; }
  .kk-grid2, .sl-field-row, .kk-custom.is-on { grid-template-columns: minmax(0, 1fr); }
  .kk-cartline { grid-template-columns: 72px minmax(0, 1fr); }
  .kk-cartline__media { width: 72px; }
  .kk-cartline__qty, .kk-cartline__end { grid-column: 2; justify-items: start; }
  .kk-cartline__end { display: flex; align-items: center; gap: 16px; }
  .kk-footer__top { grid-template-columns: minmax(0, 1fr); }
  .kk-trust ul { gap: 18px; padding: 22px 0; }
  .kk-hero__facts { gap: 10px 18px; }
  .kk-lightbox img { inset: 56px 8px; width: calc(100% - 16px); }
  .kk-toast { bottom: 16px; }
  .kk-faq__a { padding-right: 0; }
  .kk-specs div { grid-template-columns: 110px 1fr; }
  .kk-grid--buy .kk-plate { gap: 8px; padding: 10px; }
  .kk-grid--buy .kk-plate__note { display: none; }
  .kk-grid--buy .kk-plate__dim { font-size: .7rem; letter-spacing: .02em; }
}
.kk-cartline__media:empty, .sl-summary__line-media { background:
  repeating-linear-gradient(90deg, transparent 0 11px, color-mix(in oklab, var(--kk-primary) 7%, transparent) 11px 12px),
  linear-gradient(180deg, transparent 38%, #cfae78 38% 62%, transparent 62%), var(--kk-surface-2); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .kk-reveal { opacity: 1; transform: none; }
}
@media print {
  .sl-section--kk-header, .kk-fab, .kk-stickybar, .kk-footer, .kk-toast { display: none !important; }
}

/* House rule (no AI tells): no eyebrows, step numbers, accent bars, icon chips, breadcrumbs, twin outline buttons
   or scroll fade-ins. Labels that name something stay, in sentence case. */
.kk-eyebrow, .kk-pcard__stamps, .kk-crumbs, .kk-hero__tag small { display: none !important; }
.kk-steps li { padding-top: 0; }
.kk-steps li::before, .kk-steps li::after { content: none !important; display: none !important; }
.kk-steps h3 { margin-top: 0; }
.kk-trust i, .kk-ticks i, .kk-contact__list i { display: none !important; }
.kk-ticks { gap: 0; }
.kk-ticks li { display: block; padding: 11px 0; border-bottom: 1px solid var(--kk-line); }
.kk-ticks li:first-child { border-top: 1px solid var(--kk-line); }
.kk-band--green .kk-ticks li, .kk-band--dark .kk-ticks li { border-color: rgb(255 255 255 / .18); }
.kk-faq summary i, .kk-faq details[open] summary i { width: auto; height: auto; background: none; color: var(--kk-primary); font-size: 18px; }
.kk-reveal, .kk-js .kk-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.kk-hero__ctas { align-items: center; gap: 12px 24px; }
.kk-cta__actions { align-items: center; gap: 12px 24px; }
.kk-buybox__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.kk-pcard__price .kk-from, .kk-buybox__price .kk-from { text-transform: none; letter-spacing: 0; font-stretch: 100%; font-size: .875rem; font-weight: 500; }
.kk-summary h3, .kk-contact__list small, .kk-footer h2, .kk-modal__config strong { text-transform: none; letter-spacing: 0; font-stretch: 100%; font-size: .875rem; }

/* Page designer: the canvas wraps each editable picture in span.sl-pe-media. Inside a fixed-ratio box the wrapper has
   to fill the box the way the picture does, or the photo shrinks to its natural height in the editor only. */
.kk-hero__main > .sl-pe-media, .kk-hero__inset > .sl-pe-media, .kk-split__media > .sl-pe-media, .kk-yard__item > .sl-pe-media { display: block; width: 100%; height: 100%; }