/* Kolor produktu steruje motywem: white = ciemna strona, black = jasna. */
:root {
  color-scheme: dark;
  --paper: #171817;
  --ink: #f5f1ea;
  --muted: #bcb7ae;
  --brown: #dbb88d;
  --surface: #1d1f1e;
  --surface-raised: #252725;
  --surface-input: #202220;
  --line: #3d403b;
  --accent-ink: #e4c69e;
  --selection: #403a30;
  --selection-ink: #edd0a7;
  --action: #e3c196;
  --action-ink: #25211c;
  --hero-wash: linear-gradient(90deg, #0d1013ab, #0d101336 38%, transparent 60%);
  --detail-wash: linear-gradient(90deg, #1d1f1e 0%, #1d1f1e 27%, #1d1f1ef5 30%, #1d1f1e66 37%, transparent 43%);
  --contact-wash: linear-gradient(90deg, #17181791, #171817ed 37%, #171817fa);
  --contact-image: url('../images/white-druga-2.webp');
  --hero-mobile: #202421;
}

:root[data-finish="black"] {
  color-scheme: light;
  --paper: #faf8f5;
  --ink: #191918;
  --muted: #67615b;
  --brown: #72502f;
  --surface: #f5f1eb;
  --surface-raised: #ffffff;
  --surface-input: #fbfaf8;
  --line: #ded7ce;
  --accent-ink: #8b6138;
  --selection: #eee0ce;
  --selection-ink: #604426;
  --action: #242321;
  --action-ink: #ffffff;
  --hero-wash: linear-gradient(90deg, #faf6eff5, #faf6efb8 29%, #faf6ef33 44%, transparent 57%);
  --detail-wash: linear-gradient(90deg, #f5f1eb 0%, #f5f1eb 27%, #f5f1ebf5 30%, #f5f1eb66 37%, transparent 43%);
  --contact-wash: linear-gradient(90deg, #fcfaf64d, #f7f4efdb 37%, #f7f4efed);
  --contact-image: url('../images/black-druga-2.webp');
  --hero-mobile: #f7f3eb;
}

/* Pełne pokrycie motywu, także pól formularza, ikon i nawigacji mobilnej. */
body, .site-header, .benefits, .variants, .variant-card,
.detail-banner, .interior-banner, .contact, .contact-form,
.benefits li, .navigation, .finish-bar, .finish-switch,
.field input, .field select, .field textarea {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

.site-header { background: var(--paper); }
.navigation a { color: var(--ink); }
.navigation a:hover { color: var(--brown); }
.button-dark { background: var(--action); color: var(--action-ink); }
.button-dark:hover { background: var(--action); filter: brightness(1.12); }
.button-sand { color: #25211c; }
.hero { color: var(--ink); }
.hero h1 span { color: var(--accent-ink); }
.hero::after { background: var(--hero-wash); }
.benefits { background: var(--paper); }
.benefits li { background: var(--surface); border-color: var(--line); }
.benefits p { color: var(--muted); }
.variants { background: var(--paper); }
.section-intro strong { font-weight: 650; color: var(--ink); }
.variant-card { color: var(--ink); background: var(--surface-raised); }
.variant-caption > span { color: var(--muted); }
.detail-banner { background: var(--surface); }
.detail-banner::after { background: var(--detail-wash); }
.product-note { border-color: var(--line); }
.size-badges span {
  color: var(--selection-ink);
  background: var(--selection);
  border-color: var(--line);
}
.interior-banner { color: var(--ink); background: var(--surface); border-top-color: var(--paper); }
.interior-copy .eyebrow { color: var(--brown); }
.interior-copy > p:not(.eyebrow), .fireplace-features { color: var(--muted); }
.fireplace-features { border-color: var(--line); }
.fireplace-features li::before { background: var(--brown); }
.contact { background: var(--paper); }
.contact::before { background-image: var(--contact-image); }
.contact::after { background: var(--contact-wash); }
.contact-copy > p:not(.eyebrow) { color: var(--muted); }
.contact-form { background: var(--surface-raised); border: 1px solid var(--line); }
.field input, .field textarea, .field select {
  background: var(--surface-input);
  color: var(--ink);
  border-color: var(--line);
}
.field ::placeholder { color: var(--muted); opacity: .7; }
.field label span { color: var(--brown); }
.size-field label span {
  background: var(--surface-input);
  color: var(--ink);
  border-color: var(--line);
}
.size-field input:checked + span {
  background: var(--selection);
  color: var(--selection-ink);
  border-color: var(--brown);
}
.form-status { color: var(--brown); }
:root[data-finish="white"] .form-status[data-kind="error"] { color: #ffa79c; }
:root[data-finish="white"] .form-status[data-kind="success"] { color: #a7d6ac; }
.skip-link { background: var(--surface-raised); color: var(--ink); }
.menu-toggle span { background: var(--ink); }

/* Przełącznik wykończenia nad hero. */
.finish-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 1.6vw, 30px) var(--gutter);
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.finish-bar .eyebrow { margin-bottom: 3px; font-size: 10px; }
.finish-bar h2 { font-size: clamp(18px, 1.8vw, 29px); line-height: 1.3; letter-spacing: -.035em; font-weight: 600; }
.finish-bar-copy > p:last-child { color: var(--muted); font-size: clamp(11px, 1vw, 15px); margin-top: 4px; }
.finish-picker { width: clamp(330px, 34vw, 510px); flex-shrink: 0; }
.finish-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  isolation: isolate;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}
.finish-switch-thumb {
  position: absolute;
  z-index: -1;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc((100% - 10px) / 2);
  border-radius: 999px;
  background: var(--surface-raised);
  box-shadow: 0 2px 8px #00000015;
  border: 1px solid var(--line);
  transition: transform .4s cubic-bezier(.2,.75,.25,1), background-color .35s;
}
:root[data-finish="black"] .finish-switch-thumb { transform: translateX(100%); }
.finish-option {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 62px;
  padding: 10px 17px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  text-align: left;
}
.finish-option[aria-pressed="true"] { color: var(--ink); }
.finish-option strong { display: block; font-size: 15px; font-weight: 750; }
.finish-option small { display: block; font-size: 10px; white-space: nowrap; font-weight: 400; margin-top: 1px; }
.finish-check { margin-left: auto; font-size: 13px; opacity: 0; color: var(--brown); }
.finish-option[aria-pressed="true"] .finish-check { opacity: 1; }
.finish-swatch, .form-swatch {
  display: inline-block;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #88888880;
  box-shadow: inset 0 2px 3px #ffffff22, 0 2px 4px #00000020;
}
.swatch-white { background: linear-gradient(135deg, #fff, #e4e2db); }
.swatch-black { background: linear-gradient(135deg, #484a47, #101210); }
.finish-hint { margin-top: 7px; text-align: center; font-size: 10px; color: var(--muted); min-height: 15px; }
.finish-hint[data-error="true"] { color: var(--brown); }
.finish-switch[aria-busy="true"] { cursor: progress; }
.finish-switch[aria-busy="true"] .finish-switch-thumb { border-style: dashed; }
[data-scene] { transition: opacity .25s; }
.finish-changing [data-scene] { opacity: .65; }
.color-field { grid-column: auto; }
.size-field:not(.color-field) { grid-column: auto; }
.color-field label > span { display: flex; align-items: center; gap: 7px; padding: .4em 1em; }
.form-swatch { width: 15px; height: 15px; }
.color-field input { z-index: 1; }

@media (max-width: 1050px) {
  .color-field, .size-field:not(.color-field) { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .navigation { background: var(--paper); }
  .navigation a { border-color: var(--line); }
  .finish-bar { display: block; padding: 18px 5% 12px; }
  .finish-bar-copy { text-align: center; }
  .finish-bar .eyebrow { font-size: 9px; }
  .finish-bar h2 { font-size: 20px; }
  .finish-bar-copy > p:last-child { display: none; }
  .finish-picker { width: 100%; max-width: 440px; margin: 12px auto 0; }
  .finish-option { min-height: 53px; padding: 8px 12px; gap: 9px; }
  .finish-option strong { font-size: 14px; }
  .finish-option small { font-size: 9px; }
  .finish-swatch { width: 24px; height: 24px; }
  .finish-hint { margin-top: 6px; font-size: 9px; }
  .finish-check { font-size: 11px; }
  .hero { background: var(--hero-mobile); }
  .hero::after { background: linear-gradient(180deg, var(--hero-mobile) 0%, var(--hero-mobile) 34%, transparent 72%); }
  .color-field label > span { min-height: 39px; padding: 8px 20px; }
}

@media (max-width: 380px) {
  .finish-option { padding: 8px 10px; gap: 7px; }
  .finish-option small { font-size: 8px; }
  .finish-check { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Formularz kontaktowy i ochrona antyspamowa. */
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.recaptcha-notice { margin: 12px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.recaptcha-notice a { text-decoration: underline; text-underline-offset: 2px; }
.contact-form[aria-busy="true"] { cursor: progress; }
.submit-button:disabled { cursor: wait; opacity: .7; }