:root {
    --ground: #0E0C0A;
    --ground-2: #181513;
    --ink: #EFEAE2;
    --ink-rgb: 239, 234, 226;
    --ink-90: rgba(239, 234, 226, 0.92);
    --ink-60: rgba(239, 234, 226, 0.62);
    --ink-40: rgba(239, 234, 226, 0.40);
    --ink-20: rgba(239, 234, 226, 0.20);
    --rule: rgba(239, 234, 226, 0.12);
    --accent: #B0231C;
    --display: 'Bricolage Grotesque', system-ui, sans-serif;
    --body: 'Space Grotesk', system-ui, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, monospace;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--ground);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  ::selection { background: var(--accent); color: #fff; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; }

  .kf-root { background: var(--ground); color: var(--ink); }

  .kf-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
  }

  /* ──────────── small shared bits ──────────── */

  .kf-kicker {
    font-family: var(--body);
    font-size: 13px;
    letter-spacing: .02em;
    color: var(--ink-60);
    display: inline-flex; align-items: center; gap: 10px;
  }
  .kf-kicker-light { color: rgba(var(--ink-rgb), .7); }
  .kf-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(176, 35, 28, .18);
  }
  .kf-mono-small {
    font-family: var(--mono); font-size: 11px;
    letter-spacing: .06em; color: var(--ink-60);
    text-transform: uppercase;
  }

  /* type scale */
  .kf-h1 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(44px, 6.5vw, 96px);
    line-height: 1.0;
    letter-spacing: -0.025em;
    margin: 18px 0 0;
    text-wrap: balance;
    font-variation-settings: "opsz" 48;
  }
  .kf-h2 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    text-wrap: balance;
    font-variation-settings: "opsz" 36;
  }
  .kf-h2-md { font-size: clamp(28px, 3.4vw, 44px); }
  .kf-lede {
    margin-top: 22px;
    max-width: 520px;
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.6;
    color: rgba(var(--ink-rgb), .82);
    text-wrap: pretty;
  }
  .kf-body {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(var(--ink-rgb), .82);
    margin: 0;
    text-wrap: pretty;
  }

  /* buttons */
  .kf-btn {
    appearance: none; cursor: pointer; border: 1px solid var(--ink);
    padding: 13px 18px;
    font-family: var(--body); font-size: 14px; font-weight: 500;
    letter-spacing: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    background: transparent; color: var(--ink);
    border-radius: 999px;
    transition: background .2s, color .2s, border-color .2s, transform .15s;
  }
  .kf-btn:hover { transform: translateY(-1px); }
  .kf-btn:active { transform: translateY(0); }
  .kf-btn-primary {
    background: var(--accent); border-color: var(--accent); color: #fff;
  }
  .kf-btn-primary:hover { filter: brightness(1.08); }
  .kf-btn-ghost {
    background: transparent; color: var(--ink); border-color: rgba(var(--ink-rgb), .25);
  }
  .kf-btn-ghost:hover { border-color: var(--ink); background: rgba(var(--ink-rgb), .05); }
  .kf-btn-block { display: flex; width: 100%; }
  .kf-btn[disabled] { opacity: .4; cursor: not-allowed; }
  .kf-btn[disabled]:hover { transform: none; }

  .kf-cta-row { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }

  /* ──────────── nav ──────────── */
  .kf-nav {
    position: sticky; top: 0; z-index: 30;
    background: color-mix(in oklab, var(--ground) 84%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--rule);
  }
  .kf-nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 16px 28px;
    max-width: 1280px; margin: 0 auto;
  }
  .kf-logo {
    display: inline-flex; gap: 10px; align-items: center; color: var(--ink);
  }
  .kf-logo-text {
    font-family: var(--display);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -.01em;
  }
  .kf-nav-links {
    justify-self: center;
    display: flex; gap: 28px; align-items: center;
  }
  .kf-link {
    font-size: 14px;
    color: var(--ink-90);
    position: relative;
    padding: 4px 0;
    display: inline-flex; gap: 6px; align-items: center;
  }
  .kf-link::after {
    content: ""; position: absolute; left: 0; bottom: -2px;
    width: 100%; height: 1px; background: var(--accent);
    transform: scaleX(0); transform-origin: left; transition: transform .2s;
  }
  .kf-link:hover::after { transform: scaleX(1); }
  .kf-pill-beta {
    font-family: var(--mono); font-size: 9px;
    letter-spacing: .12em;
    padding: 2px 5px;
    background: rgba(var(--ink-rgb), .08);
    color: var(--ink-60);
    border-radius: 4px;
  }
  .kf-pill-beta-solid {
    background: var(--accent); color: #fff;
    padding: 3px 7px; font-size: 10px;
  }
  .kf-nav-right {
    display: flex; gap: 14px; align-items: center; justify-content: flex-end;
  }
  .kf-lang {
    display: flex; gap: 2px; align-items: center;
    font-family: var(--mono); font-size: 12px;
  }
  .kf-lang button {
    appearance: none; background: transparent; border: 0; padding: 4px 6px;
    color: var(--ink-40); cursor: pointer; font: inherit;
  }
  .kf-lang button.on { color: var(--ink); }
  .kf-lang span { color: var(--ink-20); }
  .kf-cart-btn {
    position: relative;
    appearance: none; background: transparent; border: 1px solid var(--rule);
    color: var(--ink); width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
  }
  .kf-cart-btn:hover { border-color: var(--ink); }
  .kf-cart-dot {
    position: absolute; top: -4px; right: -4px;
    background: var(--accent); color: #fff;
    width: 18px; height: 18px; border-radius: 50%;
    font-family: var(--mono); font-size: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--ground);
  }

  /* ──────────── hero ──────────── */
  .kf-hero { padding: 56px 0 80px; }
  .kf-hero-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .kf-hero-art {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
  }
  .kf-hero-art > div:first-child { border-radius: 24px; }
  .kf-hero-img {
    position: relative;
    aspect-ratio: 4/5;
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    background: var(--ground-2);
  }
  .kf-hero-img img {
    position: absolute; inset: 0; z-index: 2;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .kf-hero-img > div {
    position: absolute; inset: 0; z-index: 1;
  }
  .kf-card-real-img {
    position: absolute; inset: 0; z-index: 2;
    background: var(--ground-2);
    display: flex; align-items: center; justify-content: center;
  }
  .kf-card-real-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .kf-card-foot {
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid var(--rule);
    font-size: 11px;
    color: var(--ink-60);
    letter-spacing: .02em;
  }
  .kf-hero-badge {
    position: absolute;
    left: 18px; bottom: 18px;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    display: inline-flex; gap: 8px; align-items: center;
  }
  .kf-light .kf-hero-badge { background: rgba(255,255,255,.7); color: #15110D; }
  .kf-pulse {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
    animation: kf-pulse 1.8s ease-in-out infinite;
  }
  @keyframes kf-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent); }
    50% { box-shadow: 0 0 0 6px rgba(176,35,28,0); }
  }

  /* ──────────── section ──────────── */
  .kf-section { padding: 96px 0; }
  .kf-section-head {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 32px;
    align-items: end;
    margin-bottom: 48px;
  }
  .kf-section-sub {
    max-width: 380px;
    margin: 0;
    color: var(--ink-60);
    font-size: 15px;
    text-wrap: pretty;
  }
  .kf-section-sub-light { color: rgba(var(--ink-rgb), .65); }

  /* ──────────── products ──────────── */
  .kf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 28px;
  }
  .kf-card {
    display: flex;
    flex-direction: column;
    background: var(--ground-2);
    border: 1px solid var(--rule);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .25s, border-color .2s, box-shadow .25s;
  }
  .kf-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--ink-rgb), .25);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
  }
  .kf-light .kf-card:hover { box-shadow: 0 18px 40px rgba(0,0,0,.08); }
  .kf-card-img-wrap {
    position: relative;
    overflow: hidden;
  }
  .kf-card-tag {
    position: absolute; top: 14px; left: 14px;
    background: var(--accent);
    color: #fff;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .12em;
    padding: 5px 9px;
    border-radius: 999px;
  }
  .kf-card-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
  .kf-card-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  }
  .kf-card-name {
    font-family: var(--display); font-weight: 700;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -.015em;
    margin: 0;
  }
  .kf-card-price {
    font-family: var(--display); font-weight: 600;
    font-size: 18px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .kf-card-desc {
    font-size: 14px;
    color: var(--ink-60);
    margin: 0;
    flex: 1;
  }

  /* ──────────── configurator ──────────── */
  .kf-cfg-section {
    background: linear-gradient(180deg, var(--ground) 0%, var(--ground-2) 100%);
    padding: 100px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .kf-cfg-head {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 32px;
    align-items: end;
    margin-bottom: 56px;
  }
  .kf-cfg-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: start;
  }
  .kf-cfg-preview {
    position: sticky;
    top: 100px;
    border-radius: 24px;
    background: var(--ground);
    border: 1px solid var(--rule);
    padding: 28px;
    overflow: hidden;
  }
  .kf-cfg-preview-inner {
    display: flex; flex-direction: column; gap: 18px;
    align-items: stretch;
  }
  .kf-cfg-mask {
    position: relative;
    width: 100%; aspect-ratio: 4/5;
    margin: 0 auto;
    transition: border-radius .35s ease, background .4s ease, filter .25s;
    box-shadow: inset 0 -20px 60px rgba(0,0,0,.4), inset 0 20px 40px rgba(255,255,255,.06);
  }
  .kf-cfg-eye {
    position: absolute; top: 32%;
    width: 18%; height: 13%;
    background: radial-gradient(circle, rgba(0,0,0,.85) 30%, rgba(0,0,0,.35) 70%);
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,.4);
    transform: translateY(-50%);
  }
  .kf-cfg-front {
    position: absolute;
    left: 50%; bottom: 16%;
    transform: translateX(-50%);
    transition: all .35s ease;
    box-shadow: 0 6px 20px rgba(0,0,0,.45), inset 0 4px 10px rgba(255,255,255,.08);
  }
  .kf-cfg-front-doll {
    width: 38%; height: 28%;
    border-radius: 50%;
  }
  .kf-cfg-front-mute {
    width: 42%; height: 26%;
    border-radius: 30%;
  }
  .kf-cfg-front-toilet {
    width: 48%; height: 32%;
    border-radius: 16% 16% 50% 50%;
  }
  .kf-cfg-grid-dots {
    position: absolute; inset: 18% 18%;
    background-image: radial-gradient(circle, rgba(0,0,0,.55) 1.5px, transparent 2px);
    background-size: 12px 12px;
    border-radius: inherit;
  }
  .kf-cfg-funnel {
    position: absolute;
    left: 50%; top: 18%;
    width: 50%; height: 70%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,.5) 30%, transparent 70%);
    border-radius: 0 0 50% 50%;
  }
  .kf-cfg-sheen {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.16) 0%, transparent 40%);
    pointer-events: none;
  }
  .kf-cfg-stitch {
    position: absolute; inset: 8% 12%;
    border: 1.5px dashed rgba(255,255,255,0.22);
    border-radius: inherit;
    pointer-events: none;
  }
  .kf-cfg-engrave {
    position: absolute;
    left: 50%; top: 84%;
    transform: translateX(-50%);
    font-family: var(--mono); font-size: 13px;
    letter-spacing: .25em;
    text-shadow: 0 1px 0 rgba(0,0,0,.4);
    white-space: nowrap;
  }
  .kf-cfg-preview-foot {
    display: flex; justify-content: space-between;
    border-top: 1px solid var(--rule);
    padding-top: 14px;
  }

  /* steps */
  .kf-cfg-steps { display: flex; flex-direction: column; gap: 28px; }
  .kf-step { display: grid; gap: 12px; }
  .kf-step-head {
    display: flex; gap: 12px; align-items: baseline;
  }
  .kf-step-n {
    font-family: var(--mono); font-size: 11px;
    color: var(--accent);
    letter-spacing: .1em;
  }
  .kf-step-label {
    font-family: var(--display); font-weight: 600;
    font-size: 18px;
    letter-spacing: -.01em;
  }

  /* option groups */
  .kf-opts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .kf-opts-row { grid-template-columns: repeat(3, 1fr); }
  .kf-opt {
    appearance: none; cursor: pointer;
    text-align: left;
    background: var(--ground-2);
    border: 1px solid var(--rule);
    padding: 14px 14px;
    border-radius: 12px;
    color: var(--ink);
    display: flex; flex-direction: column; gap: 4px;
    transition: border-color .15s, background .15s, transform .1s;
  }
  .kf-opt:hover { border-color: rgba(var(--ink-rgb), .3); }
  .kf-opt.on {
    border-color: var(--accent);
    background: color-mix(in oklab, var(--accent) 14%, var(--ground-2));
  }
  .kf-opt-name { font-weight: 600; font-size: 15px; }
  .kf-opt-sub { font-size: 12px; color: var(--ink-60); }
  .kf-opt-add { font-family: var(--mono); font-size: 11px; color: var(--ink-60); }
  .kf-opt-sm { padding: 10px 12px; }

  .kf-swatches {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }
  .kf-swatch {
    appearance: none; cursor: pointer;
    background: transparent; border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 8px;
    display: flex; flex-direction: column; gap: 8px; align-items: center;
    color: var(--ink);
    transition: border-color .15s;
  }
  .kf-swatch:hover { border-color: rgba(var(--ink-rgb), .3); }
  .kf-swatch.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
  .kf-swatch-dot {
    width: 32px; height: 32px; border-radius: 50%;
    box-shadow: inset 0 -3px 8px rgba(0,0,0,.45), inset 0 2px 4px rgba(255,255,255,.08);
  }
  .kf-swatch-name { font-size: 11px; color: var(--ink-60); }

  .kf-cfg-input {
    appearance: none; width: 100%;
    background: var(--ground-2);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 14px 16px;
    color: var(--ink); font: inherit;
    font-family: var(--mono); letter-spacing: .12em;
    outline: none;
    transition: border-color .15s;
  }
  .kf-cfg-input:focus { border-color: var(--accent); }
  .kf-cfg-input::placeholder { color: var(--ink-40); letter-spacing: 0; font-family: var(--body); }
  .kf-cfg-input-meta {
    display: flex; justify-content: space-between;
    font-family: var(--mono); font-size: 11px;
    color: var(--ink-60);
    margin-top: 6px;
  }

  .kf-cfg-summary {
    margin-top: 12px;
    padding: 20px;
    border: 1px solid var(--rule);
    border-radius: 14px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px;
    background: var(--ground);
  }
  .kf-cfg-total {
    font-family: var(--display); font-weight: 700;
    font-size: 32px; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
  }
  .kf-cfg-note {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--ink-60);
  }

  /* ──────────── about ──────────── */
  .kf-about-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: start;
  }
  .kf-points {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 8px;
  }
  .kf-points li {
    padding: 18px 0;
    border-top: 1px solid var(--rule);
  }
  .kf-points li:last-child { border-bottom: 1px solid var(--rule); }
  .kf-point-head {
    display: flex; gap: 14px; align-items: baseline;
    font-family: var(--display); font-weight: 600;
    font-size: 19px;
    letter-spacing: -.01em;
  }
  .kf-point-n {
    font-family: var(--mono); font-size: 11px;
    color: var(--accent);
    letter-spacing: .1em;
  }
  .kf-points p {
    margin: 6px 0 0 28px;
    color: var(--ink-60);
    font-size: 14px;
  }

  .kf-about-contact {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
    display: grid; gap: 6px;
  }
  .kf-mail-link {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(20px, 2vw, 26px);
    letter-spacing: -.015em;
    display: inline-flex; gap: 10px; align-items: baseline;
    color: var(--ink);
    transition: color .2s;
  }
  .kf-mail-link:hover { color: var(--accent); }
  .kf-mail-link span { font-size: .8em; }

  .kf-disclaimer {
    margin-top: 64px;
    padding: 24px 28px;
    border: 1px solid var(--rule);
    border-radius: 14px;
    background: var(--ground-2);
    max-width: 720px;
  }
  .kf-disclaimer p {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-60);
    text-wrap: pretty;
  }

  /* ──────────── footer ──────────── */
  .kf-footer {
    background: var(--ground-2);
    border-top: 1px solid var(--rule);
    padding: 64px 0 28px;
  }
  .kf-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--rule);
  }
  .kf-footer-h {
    font-family: var(--display); font-weight: 600;
    font-size: 14px;
    margin: 0 0 14px;
    letter-spacing: -.005em;
  }
  .kf-pre {
    margin: 0;
    font-family: var(--body);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--ink-90);
  }
  .kf-link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
  .kf-link-list a { font-size: 14px; color: var(--ink-90); }
  .kf-link-list a:hover { color: var(--accent); }
  .kf-footer-bottom {
    margin-top: 22px;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    font-size: 12px;
    color: var(--ink-60);
  }

  /* ──────────── drawer ──────────── */
  .kf-scrim {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    opacity: 0; pointer-events: none; transition: opacity .25s;
    z-index: 50;
  }
  .kf-scrim.on { opacity: 1; pointer-events: auto; }
  .kf-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(440px, 100vw);
    background: var(--ground); color: var(--ink);
    border-left: 1px solid var(--rule);
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.6,.05,.2,1);
    z-index: 60;
    display: flex; flex-direction: column;
  }
  .kf-drawer.on { transform: translateX(0); }
  .kf-drawer > header {
    padding: 22px 24px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--rule);
  }
  .kf-x {
    appearance: none; background: transparent; border: 1px solid var(--rule);
    color: var(--ink); width: 32px; height: 32px; border-radius: 50%;
    cursor: pointer;
  }
  .kf-x:hover { border-color: var(--ink); }
  .kf-drawer-body {
    flex: 1; padding: 22px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 20px;
  }
  .kf-empty { color: var(--ink-60); font-size: 14px; }
  .kf-drawer-row { display: flex; gap: 14px; align-items: flex-start; }
  .kf-drawer-thumb {
    width: 72px; height: 72px; flex-shrink: 0;
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--rule);
  }
  .kf-drawer-name {
    font-family: var(--display); font-weight: 600;
    font-size: 16px; letter-spacing: -.01em;
    line-height: 1.25;
  }
  .kf-drawer-price {
    font-family: var(--display); font-weight: 600;
    font-size: 16px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .kf-link-mono {
    appearance: none; background: transparent; border: 0; padding: 0;
    color: var(--ink-60); font-family: var(--mono); font-size: 11px;
    letter-spacing: .06em; cursor: pointer; text-decoration: underline;
  }
  .kf-drawer > footer {
    padding: 22px; border-top: 1px solid var(--rule);
    display: grid; gap: 12px;
  }
  .kf-drawer-total {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 14px; color: var(--ink-60);
  }
  .kf-drawer-total-num {
    font-family: var(--display); font-weight: 700;
    font-size: 26px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .kf-fineprint {
    margin: 0;
    font-size: 12px;
    color: var(--ink-60);
  }

  /* ──────────── responsive ──────────── */
  @media (max-width: 980px) {
    .kf-container { padding: 0 20px; }
    .kf-nav-inner { padding: 14px 20px; grid-template-columns: 1fr auto; }
    .kf-nav-links { display: none; }
    .kf-hero-inner { grid-template-columns: 1fr; gap: 32px; }
    .kf-hero { padding: 32px 0 56px; }
    .kf-section { padding: 64px 0; }
    .kf-section-head { grid-template-columns: 1fr; gap: 16px; }
    .kf-section-head h2 + p,
    .kf-section-head .kf-section-sub { margin-top: 0; }
    .kf-cfg-head { grid-template-columns: 1fr; gap: 16px; }
    .kf-cfg-section { padding: 64px 0; }
    .kf-cfg-grid { grid-template-columns: 1fr; gap: 32px; }
    .kf-cfg-preview { position: relative; top: 0; }
    .kf-cfg-mask { max-width: 320px; }
    .kf-about-grid { grid-template-columns: 1fr; gap: 32px; }
    .kf-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  }
  @media (max-width: 640px) {
    .kf-h1 { font-size: 44px; }
    .kf-h2 { font-size: 32px; }
    .kf-swatches { grid-template-columns: repeat(2, 1fr); }
    .kf-opts { grid-template-columns: 1fr; }
    .kf-cfg-summary { flex-direction: column; align-items: stretch; gap: 14px; }
  }

/* ─── Placeholder (statische Variante; React-Prototyp generierte SVG inline) ─── */
.kf-placeholder {
	position: relative;
	width: 100%;
	aspect-ratio: 4/5;
	background:
		radial-gradient(120% 100% at 30% 20%, rgba(255,255,255,0.04) 0%, transparent 60%),
		radial-gradient(80% 60% at 80% 100%, rgba(255,255,255,0.015) 0%, transparent 60%),
		var(--ground-2);
	overflow: hidden;
	border-radius: inherit;
}
.kf-placeholder::after {
	content: attr(data-label);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: rgba(239, 234, 226, 0.45);
	text-align: center;
	padding: 0 8px;
	white-space: nowrap;
}

/* ─── Content-Wrapper für Page/Single/Archive-Templates ─── */
.kf-content-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 64px 28px 96px;
	min-height: 60vh;
}
.kf-content-wrap > h1.wp-block-post-title,
.kf-content-wrap > .wp-block-query-title {
	margin-bottom: 32px;
}

/* WC-Blöcke ans Token-System anpassen (sehr leichter Overlay) */
.kf-content-wrap .wp-block-woocommerce-product-template { gap: 24px; }
.kf-content-wrap .wp-block-post-title a,
.kf-content-wrap .wc-block-grid__product-title { color: var(--ink); }
.kf-content-wrap a { color: var(--accent); }
.kf-content-wrap .wp-block-button__link {
	background: var(--accent);
	color: #fff;
	border-radius: 999px;
}

/* ─── Mobile-Hamburger: CSS-only Toggle via Checkbox + :checked ─── */
.kf-burger { display: none; }

@media (max-width: 980px) {
	.kf-nav-inner {
		grid-template-columns: 1fr auto;
	}
	.kf-nav-links {
		display: none;
		grid-column: 1 / -1;
		flex-direction: column;
		align-items: flex-start;
		padding: 12px 0 18px;
		border-top: 1px solid var(--rule);
		margin-top: 8px;
		gap: 14px;
	}
	.kf-burger {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 4px;
		width: 38px; height: 38px;
		border: 1px solid var(--rule);
		border-radius: 999px;
		cursor: pointer;
		transition: border-color .2s;
	}
	.kf-burger:hover { border-color: var(--ink); }
	.kf-burger span {
		display: block;
		width: 16px; height: 1.5px;
		background: var(--ink);
		transition: transform .25s, opacity .15s;
	}
	/* Wenn die versteckte Checkbox vorm Markup checked ist → Nav zeigen + Burger zu X morphen */
	.kf-nav:has(.kf-nav-toggle:checked) .kf-nav-links { display: flex; }
	.kf-nav:has(.kf-nav-toggle:checked) .kf-burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
	.kf-nav:has(.kf-nav-toggle:checked) .kf-burger span:nth-child(2) { opacity: 0; }
	.kf-nav:has(.kf-nav-toggle:checked) .kf-burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
}

/* ─── Logo image sizing (overrides image native size) ─── */
.kf-logo img {
	display: block;
	width: auto;
	height: 36px;
	object-fit: contain;
}
.kf-footer-brand img {
	height: 32px;
	width: auto;
	object-fit: contain;
}

/* ─── kf-section-tight (für Service-Strip mit weniger vertikalem Raum) ─── */
.kf-section-tight {
	padding: 0 0 64px;
}

/* ─── WC-Product-Collection in der Home-Section ──────────────────────── */
/* Die `<li>`-Item-Wrapper der product-collection-Liste ans Kartenlayout angleichen */
.kf-section .wc-block-product-template,
.kf-section .wp-block-post-template.wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
	gap: 22px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.kf-section .wc-block-product-template > li,
.kf-section .wp-block-post-template > li {
	background: var(--ground-2);
	border: 1px solid var(--rule);
	border-radius: 16px;
	overflow: hidden;
	transition: transform .25s, box-shadow .25s, border-color .25s;
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
}
.kf-section .wc-block-product-template > li:hover {
	transform: translateY(-3px);
	border-color: var(--ink-20);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.kf-section .wc-block-product-template img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 5;
	background: var(--ground);
}
.kf-section .wc-block-product-template .wp-block-post-title {
	font-family: var(--display);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: -.01em;
	margin: 14px 18px 4px;
}
.kf-section .wc-block-product-template .wp-block-post-title a { color: var(--ink); }
.kf-section .wc-block-product-template .wp-block-post-excerpt {
	color: var(--ink-60);
	font-size: 13px;
	line-height: 1.5;
	margin: 0 18px 12px;
}
.kf-section .wc-block-product-template .wc-block-components-product-price,
.kf-section .wc-block-product-template .woocommerce-Price-amount {
	font-family: var(--mono);
	font-size: 14px;
	color: var(--ink);
	margin: 0 18px 12px;
	display: block;
}
.kf-section .wc-block-product-template .wp-block-button {
	margin: auto 18px 18px;
}

/* ─── Kleinere Hero-H1-Variante (für Wortmarken/Brand-Headlines) ───────── */
.kf-h1.kf-h1-sm {
	font-size: clamp(34px, 4.4vw, 64px);
	line-height: 1.05;
	letter-spacing: -.02em;
}

/* ─── About-Block: Text + Foto Layout ───────────────────────────────── */
.kf-about-body {
	margin-top: 22px;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(var(--ink-rgb), .82);
	max-width: 560px;
}
.kf-about-body p {
	margin: 0 0 16px;
}
.kf-about-body p:last-child {
	margin-bottom: 0;
}
.kf-about-photo {
	position: relative;
}
.kf-photo-box {
	width: 100%;
	border-radius: 24px;
	overflow: hidden;
	background: var(--ground-2);
	border: 1px solid var(--rule);
	aspect-ratio: 3 / 4;
	position: relative;
}
.kf-photo-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.kf-placeholder-square {
	aspect-ratio: 1 / 1;
}
.kf-about-contact {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* ─── Konfigurator-Embed-Wrapper (für 3D-Live-Vorschau Plugin) ───────── */
.kf-configurator-embed {
	margin-top: 32px;
	border: 1px solid var(--rule);
	border-radius: 24px;
	overflow: hidden;
	background: var(--ground-2);
	min-height: 480px;
	position: relative;
}
/* Plugin-eigene Pink-Akzente aufs Oxblood-System nachziehen (sofern möglich) */
.kf-configurator-embed [style*="#ff2d55"],
.kf-configurator-embed [style*="rgb(255, 45, 85)"] {
	/* kann nicht überschrieben werden via CSS — Plugin-Inline-Styles bleiben.
	   Falls Look stört: Plugin-Settings im Backend anpassen. */
}
/* Smooth scroll für #configurator-Anchor */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 80px; }

/* ─── Konfigurator Beta-Hinweis-Overlay ───────────────────────────────── */
.kf-cfg-beta-overlay {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(14, 12, 10, 0.88);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	padding: 28px 20px;
	transition: opacity .35s cubic-bezier(.6,.05,.2,1), visibility 0s linear .35s;
	border-radius: inherit;
}
.kf-cfg-beta-overlay.is-dismissed {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.kf-cfg-beta-card {
	max-width: 580px;
	width: 100%;
	background: var(--ground-2);
	border: 1px solid var(--rule);
	border-radius: 18px;
	padding: 32px 32px 28px;
	color: var(--ink);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.kf-cfg-beta-card h3 {
	margin: 14px 0 18px;
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(22px, 2.4vw, 30px);
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--ink);
}
.kf-cfg-beta-card p {
	margin: 0 0 12px;
	color: rgba(var(--ink-rgb), .82);
	font-size: 14.5px;
	line-height: 1.55;
}
.kf-cfg-beta-card p:last-of-type {
	margin-bottom: 24px;
}
.kf-cfg-beta-card strong {
	color: var(--ink);
	font-weight: 600;
}
.kf-cfg-beta-card .kf-btn {
	margin-top: 4px;
}

@media (max-width: 640px) {
	.kf-cfg-beta-overlay { padding: 16px; }
	.kf-cfg-beta-card    { padding: 24px 22px 22px; border-radius: 14px; }
	.kf-cfg-beta-card h3 { font-size: 20px; }
	.kf-cfg-beta-card p  { font-size: 14px; }
}

/* ─── Footer-Credits (Foto-Hinweis Models + Fotograf) ─────────────────── */
.kf-footer-credits {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--rule);
	max-width: 920px;
}
.kf-footer-credits p {
	font-family: var(--mono);
	font-size: 11px;
	line-height: 1.65;
	letter-spacing: 0.04em;
	color: var(--ink-60);
	margin: 0 0 6px;
}
.kf-footer-credits p:last-child {
	margin-bottom: 0;
}
.kf-footer-credits a {
	color: var(--ink-90);
	text-decoration: underline;
	text-decoration-color: var(--rule);
	text-underline-offset: 2px;
	transition: color .15s, text-decoration-color .15s;
}
.kf-footer-credits a:hover {
	color: var(--accent);
	text-decoration-color: var(--accent);
}