@charset "UTF-8";
/* ==========================================================================
   ANTYKI POMORZE — arkusz główny
   Design system: design-system/antyki-pomorze/MASTER.md
   Kolejność: tokeny → reset → typografia → layout → materiał (dąb) →
              komponenty → sekcje → motion → responsywność → print
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENY */
:root {
  /* paper */
  --paper: #fcfaf7;
  --paper-2: #f6f1e9;
  --paper-3: #efe8dc;

  /* ink */
  --ink: #1c1614;
  --ink-soft: #4a423c;
  --ink-mute: #6e645c;

  /* gold */
  --gold: #b67728;
  --gold-deep: #9c631e;
  --gold-ink: #7e4f16;
  --gold-light: #d9a65a;
  --gold-wash: #f5eada;

  /* oak */
  --oak: #6b4423;
  --oak-dark: #3a2415;
  --oak-deep: #241509;

  /* structure */
  --line: #e4dacc;
  --line-strong: #cbbba4;
  --ok: #2f6b45;
  --warn: #9a6212;
  --danger: #a32b22;

  /* type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-ui: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Skalowanie i po szerokości, i po wysokości — na niskim ekranie (laptop
     13", 720p) nagłówek nie zepchnie CTA pod linię zgięcia. */
  --fs-display: clamp(2.75rem, min(7.6vw, 11.5vh), 6.75rem);
  --fs-h1: clamp(2.375rem, 5.5vw, 4.5rem);
  --fs-h2: clamp(1.875rem, 4vw, 3.25rem);
  --fs-h3: clamp(1.3125rem, 2.1vw, 1.75rem);
  --fs-lead: clamp(1.0625rem, 1.4vw, 1.3125rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-label: 0.6875rem;
  --measure: 68ch;

  /* space */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;
  --sp-9: 10rem;

  --container: 1440px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius: 2px;
  --radius-lg: 3px;
  --header-h: 76px;

  /* motion */
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 460ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* elevation — warm shadows, never neutral grey */
  --sh-1: 0 1px 2px rgba(58, 36, 21, 0.06);
  --sh-2: 0 4px 16px -4px rgba(58, 36, 21, 0.12), 0 1px 3px rgba(58, 36, 21, 0.06);
  --sh-3: 0 18px 48px -18px rgba(36, 21, 9, 0.28), 0 2px 8px rgba(58, 36, 21, 0.07);

  /* procedural paper grain — 0 bytes of transfer */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------- 2. RESET */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-3));
}

body {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* subtle paper tooth over the whole page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.28;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 9998;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* focus — visible, always */
:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 2px;
  border-radius: 1px;
}

.oak-deep :focus-visible,
.section--oak :focus-visible {
  outline-color: var(--gold-light);
}

::selection {
  background: var(--gold);
  color: #fff;
}

.skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -100px;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-sm);
  transition: top var(--dur) var(--ease);
}

.skip-link:focus {
  top: var(--sp-2);
}

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

/* ------------------------------------------------------------ 3. TYPOGRAFIA */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

h4 {
  font-size: 1.125rem;
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0;
}

p {
  max-width: var(--measure);
  text-wrap: pretty;
}

strong {
  font-weight: 600;
  color: var(--ink);
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.028em;
  color: var(--ink);
}

.display em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-ink);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--ink-soft);
}

.label {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.label::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--gold);
  flex: none;
}

.label--plain::before {
  display: none;
}

.label--light {
  color: var(--gold-light);
}

.label--light::before {
  background: var(--gold-light);
}

.muted {
  color: var(--ink-mute);
}

.price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.price small {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}

.price--old {
  font-size: 1rem;
  color: var(--ink-mute);
  text-decoration: line-through;
  font-weight: 400;
}

.link-underline {
  color: var(--gold-ink);
  font-weight: 500;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
  padding-bottom: 2px;
}

.link-underline:hover {
  background-size: 0% 1px;
  color: var(--ink);
}

/* ---------------------------------------------------------------- 4. LAYOUT */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: 900px;
}

.section {
  position: relative;
  padding-block: clamp(var(--sp-6), 9vw, var(--sp-9));
}

.section--tight {
  padding-block: clamp(var(--sp-5), 6vw, var(--sp-7));
}

.section--paper2 {
  background: var(--paper-2);
}

.section-head {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: clamp(var(--sp-5), 6vw, var(--sp-7));
  max-width: 46rem;
}

.section-head--split {
  max-width: none;
  grid-template-columns: 1fr;
  align-items: end;
}

@media (min-width: 900px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--sp-6);
  }
}

.grid {
  display: grid;
  gap: var(--sp-3);
}

.stack > * + * {
  margin-top: var(--flow, var(--sp-3));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

.rule {
  height: 1px;
  border: 0;
  background: var(--line);
}

.rule--gold {
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* ------------------------------------------------------ 5. MATERIAŁ — DĄB
   Dąb wyłącznie jako płaszczyzna. Każda płaszczyzna ma fazowaną krawędź
   (inset light top / dark bottom) — to sprzedaje fizyczność drewna. */
.oak {
  position: relative;
  background-color: var(--oak-dark);
  background-image: url("../../media/tekstury/oak-mid.webp");
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

.oak--dark {
  background-image: url("../../media/tekstury/oak-dark.webp");
  background-color: var(--oak-deep);
}

.oak--light {
  background-image: url("../../media/tekstury/oak-light.webp");
  background-color: var(--oak);
}

.oak--column {
  background-image: url("../../media/tekstury/oak-column.webp");
  background-size: cover;
}

/* intarsja — wąski pas dębu z hairline złotym */
.inlay {
  height: clamp(14px, 2.2vw, 26px);
  background-color: var(--oak);
  background-image: url("../../media/tekstury/oak-strip.webp");
  background-size: auto 100%;
  background-repeat: repeat-x;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid rgba(36, 21, 9, 0.5);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.28),
    inset 0 -2px 3px rgba(255, 255, 255, 0.08);
}

.inlay--dark {
  background-image: url("../../media/tekstury/oak-strip-dark.webp");
  background-color: var(--oak-deep);
}

.inlay--thin {
  height: 8px;
}

/* sekcja na ciemnym dębie — tekst kremowy, kontrast ≥ 13:1 */
.section--oak {
  color: rgba(252, 250, 247, 0.86);
  background-color: var(--oak-deep);
  background-image: url("../../media/tekstury/oak-dark.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
}

.section--oak::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      180deg,
      rgba(20, 11, 5, 0.9),
      rgba(20, 11, 5, 0.8) 45%,
      rgba(20, 11, 5, 0.93)
    );
  pointer-events: none;
}

.section--oak > * {
  position: relative;
}

.section--oak h2,
.section--oak h3,
.section--oak .display {
  color: var(--paper);
}

.section--oak .muted {
  color: rgba(252, 250, 247, 0.62);
}

/* ------------------------------------------------------------ 6. PRZYCISKI */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-bd: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.8rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}

/* wipe fill — kierunkowy, nie fade */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold-deep);
  transform: translateY(101%);
  transition: transform var(--dur-slow) var(--ease);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: translateY(0);
}

.btn:hover {
  color: #fff;
  border-color: var(--gold-deep);
  box-shadow: var(--sh-2);
}

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
}

.btn--ghost:hover {
  color: #fff;
}

.btn--gold {
  --btn-bg: var(--gold-deep);
  --btn-fg: #fff;
  --btn-bd: var(--gold-deep);
}

.btn--gold::before {
  background: var(--ink);
}

.btn--gold:hover {
  border-color: var(--ink);
}

.btn--onoak {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  --btn-bd: rgba(217, 166, 90, 0.55);
}

.btn--onoak::before {
  background: var(--gold-light);
}

.btn--onoak:hover {
  color: var(--oak-deep);
  border-color: var(--gold-light);
}

.btn--sm {
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.42;
  pointer-events: none;
}

/* tekstowy link-przycisk ze strzałką */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-ink);
  cursor: pointer;
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}

.btn-text::after {
  content: "";
  width: 1.4rem;
  height: 1px;
  background: currentColor;
  transition: width var(--dur) var(--ease);
}

.btn-text:hover {
  color: var(--ink);
  gap: 0.85rem;
}

.btn-text:hover::after {
  width: 2rem;
}

.section--oak .btn-text {
  color: var(--gold-light);
}

.section--oak .btn-text:hover {
  color: var(--paper);
}

/* okrągły przycisk ikonowy */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

.icon-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.icon-btn:active {
  transform: scale(0.94);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

/* --------------------------------------------------------------- 7. HEADER */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 900;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(252, 250, 247, 0);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out), height var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

.header.is-stuck {
  background: rgba(252, 250, 247, 0.94);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line);
  box-shadow: var(--sh-1);
}

.header.is-hidden {
  transform: translateY(-100%);
  transition: transform var(--dur-slow) var(--ease-out);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--gold);
  min-height: 44px;
  transition: opacity var(--dur) var(--ease);
}

.brand:hover {
  opacity: 0.78;
}

.brand__mark {
  width: 34px;
  height: 32px;
  flex: none;
  color: var(--gold);
}

.brand__word {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand__name {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}

.brand__sub {
  font-family: var(--font-ui);
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-ink);
  line-height: 1;
}

.nav {
  display: none;
}

@media (min-width: 1024px) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(var(--sp-2), 2vw, var(--sp-4));
  }
}

.nav__link {
  position: relative;
  padding: 0.5rem 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color var(--dur) var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.35rem;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--ink);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cart-btn {
  position: relative;
}

.cart-btn__count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  background: var(--gold-deep);
  color: #fff;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transform: scale(0);
  transition: transform var(--dur) var(--ease);
}

.cart-btn__count.is-visible {
  transform: scale(1);
}

.cart-btn__count.is-bump {
  animation: bump 420ms var(--ease);
}

@keyframes bump {
  0%,
  100% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.45);
  }
}

.burger {
  display: inline-flex;
}

@media (min-width: 1024px) {
  .burger {
    display: none;
  }
}

.burger__box {
  position: relative;
  width: 18px;
  height: 12px;
}

.burger__box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

.burger__box span:nth-child(1) {
  top: 0;
}

.burger__box span:nth-child(2) {
  top: 5px;
}

.burger__box span:nth-child(3) {
  top: 10px;
}

.burger[aria-expanded="true"] .burger__box span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__box span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] .burger__box span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* mobilne menu */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 890;
  display: grid;
  grid-template-rows: var(--header-h) 1fr auto;
  background: var(--paper);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-slow) var(--ease);
  visibility: hidden;
}

.mobile-nav.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: var(--sp-4) var(--gutter);
  overflow-y: auto;
}

.mobile-nav__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 8vw, 2.75rem);
  color: var(--ink);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease),
    color var(--dur) var(--ease);
}

.mobile-nav.is-open .mobile-nav__link {
  opacity: 1;
  transform: none;
  transition-delay: calc(80ms + var(--i, 0) * 55ms);
}

.mobile-nav__link:hover {
  color: var(--gold-ink);
}

.mobile-nav__link span {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--gold-ink);
}

.mobile-nav__foot {
  padding: var(--sp-4) var(--gutter) calc(var(--sp-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}

body.is-locked {
  overflow: hidden;
}

/* ------------------------------------------------------------------ 8. HERO */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(100svh, 920px);
  padding-top: calc(var(--header-h) + clamp(var(--sp-3), 5vh, var(--sp-5)));
  padding-bottom: clamp(var(--sp-4), 7vh, var(--sp-6));
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--sp-6);
  }
}

.hero__kicker {
  margin-bottom: var(--sp-3);
}

.hero__title {
  margin-bottom: var(--sp-3);
}

.hero__lead {
  max-width: 34rem;
  margin-bottom: var(--sp-4);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: clamp(var(--sp-3), 4vh, var(--sp-5));
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.hero__meta div {
  min-width: 7rem;
}

.hero__meta dt {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.25rem;
}

.hero__meta dd {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ink);
  line-height: 1;
}

/* kolumna dębowa — materiałowy akcent hero */
/* Zdjęcie w dębowej ramie — rama jest materiałem marki, zdjęcie treścią. */
.hero__panel {
  position: relative;
  margin: 0;
  padding: clamp(0.5rem, 1.6vw, 0.75rem);
  background-color: var(--oak);
  background-image: url("../../media/tekstury/oak-mid.webp");
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -2px 6px rgba(0, 0, 0, 0.35), var(--sh-3);
}

.hero__panel-inner {
  position: relative;
  /* na wąskim ekranie panel leży pod tekstem — szeroki kadr nie rozpycha
     strony w pionie; od tabletu wraca do pionowego 4:5 obok kolumny tekstu */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--oak-deep);
}

@media (min-width: 768px) {
  .hero__panel-inner {
    aspect-ratio: 4 / 5;
  }
}

.hero__panel-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* delikatne przyciemnienie dolnej krawędzi — znak musi być czytelny */
.hero__panel-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 55%,
    rgba(20, 11, 5, 0.55) 100%
  );
  pointer-events: none;
}

.hero__mark {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  z-index: 2;
  width: clamp(34px, 4vw, 50px);
  color: var(--gold-light);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}

.hero__mark svg {
  width: 100%;
  height: auto;
}

.hero__panel figcaption {
  padding: 0.7rem 0.25rem 0.1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(252, 250, 247, 0.82);
  text-align: center;
}

.hero__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid var(--gold);
  z-index: 3;
}

.hero__corner--tl {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.hero__corner--br {
  bottom: -1px;
  right: -1px;
  border-left: 0;
  border-top: 0;
}

/* dekoracyjna siatka złota w tle hero */
.hero__lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 25% 100%;
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent,
    #000 30%,
    #000 70%,
    transparent
  );
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--sp-3);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.scroll-cue__line {
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, var(--gold), transparent);
  transform-origin: top;
  animation: cue 2.4s var(--ease) infinite;
}

@keyframes cue {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}

/* --------------------------------------------------------------- 9. MARQUEE */
.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  padding-block: 0.85rem;
  background: var(--ink);
  color: var(--gold-light);
  border-block: 1px solid rgba(182, 119, 40, 0.35);
  user-select: none;
}

.marquee__track {
  display: flex;
  flex: none;
  gap: var(--sp-4);
  padding-right: var(--sp-4);
  animation: marquee 42s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  flex: none;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee__item::after {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}

@keyframes marquee {
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

/* -------------------------------------------------------------- 10. LICZBY */
.stats {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.stat {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--gold);
}

.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--ink-mute);
}

/* ---------------------------------------------------------- 11. KATEGORIE */
/* Kafli jest tyle, ile niepustych kategorii (dziś 3, docelowo do 7).
   Flex zamiast gridu, bo przy nieparzystej liczbie kafli ostatni rząd
   sam się dopełnia — siatka zostawiała w tym miejscu dziurę. */
.cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.cats > .cat {
  flex: 1 1 260px;
}

.cat {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 240px;
  padding: var(--sp-3);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--oak);
  color: var(--paper);
  isolation: isolate;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

/* Zdjęcie poglądowe: domyślne + drugie, które wjeżdża po najechaniu. */
.cat__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: opacity var(--dur-slow) var(--ease), transform 900ms var(--ease);
}

.cat__img--alt {
  z-index: -2;
  opacity: 0;
}

/* Przyciemnienie musi być zawsze — złoty podpis leży na zdjęciu. */
.cat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(20, 11, 5, 0.9) 0%, rgba(20, 11, 5, 0.55) 38%,
    rgba(20, 11, 5, 0.12) 100%);
  transition: opacity var(--dur-slow) var(--ease);
}

.cat__text {
  position: relative;
}

.cat:hover,
.cat:focus-visible {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: var(--sh-2);
}

.cat:hover .cat__img,
.cat:focus-visible .cat__img {
  transform: scale(1);
}

.cat:hover .cat__img--alt,
.cat:focus-visible .cat__img--alt {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cat__img {
    transform: none;
  }

  .cat:hover .cat__img,
  .cat:focus-visible .cat__img {
    transform: none;
  }
}

.cat__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.875rem);
  line-height: 1.1;
  color: inherit;
  transition: color var(--dur) var(--ease);
}

.cat__count {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Kafel jest teraz zawsze ciemny (zdjęcie + gradient), więc jasne złoto. */
  color: var(--gold-light);
}

.cat__icon {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 26px;
  height: 26px;
  color: var(--gold);
  opacity: 0.7;
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.cat:hover .cat__icon {
  color: var(--gold-light);
  opacity: 1;
  transform: translate(2px, -2px);
}

/* ---------------------------------------------------- 12. KARTA PRODUKTU */
.products {
  display: grid;
  gap: var(--sp-4) var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  transition: transform var(--dur) var(--ease);
}

.card:hover {
  transform: translateY(-4px);
}

.card__media {
  position: relative;
  display: block;
  /* Jednakowe proporcje wszystkich kafelków, żeby podpisy i ceny układały
     się w równych liniach. 3:2, bo tyle mają prawie wszystkie zdjęcia
     mebli — wypełniają kafelek dokładnie, bez śladu pasów. Przy zdjęciu
     pionowym wolne miejsce wypada po BOKACH, gdzie zdjęcia są jasne
     (meble stoją przy ścianie, parkiet zajmuje tylko dół kadru).

     Wolne miejsce wypełniamy dwiema warstwami. Pod spodem jednolity kolor
     policzony z boków tego zdjęcia — wstawiany w atrybucie style, osobno
     dla każdego zdjęcia, liczy go narzedzia/konwertuj-zdjecia.php (pole
     tloZdjec). Na nim rozmyta kopia zdjęcia, która zmiękcza granicę —
     patrz .card__tlo niżej. */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Miękkie przejście między zdjęciem a pasem obok niego.

   Jednolity kolor spod spodu to jedna barwa na całe zdjęcie — najczęstsza
   na jego lewej i prawej krawędzi. Przy komodzie orzechowej ta krawędź
   nie jest jednolita: u góry jasna ściana, niżej cień i parkiet, więc
   w połowie wysokości między pasem a zdjęciem widać granicę.

   Dlatego pod zdjęciem kładziemy jeszcze raz to samo zdjęcie — w tym samym
   miejscu i rozmiarze co ono (contain, wyśrodkowane), mocno rozmyte.
   Rozmycie wylewa barwy krawędzi na boki: tuż przy zdjęciu pas ma dokładnie
   jego kolor z tej samej wysokości, a dalej łagodnie zanika w jednolitą
   barwę. Nigdzie nie ma ostrej granicy, a kolor nadąża za zdjęciem
   na każdej wysokości.

   Warstwę wstawiamy tylko przy zdjęciach o innych proporcjach niż kafelek,
   bo tylko one mają pasy. Przy pozostałych byłaby niewidoczna pod zdjęciem,
   więc nie każemy przeglądarce jej rozmywać.

   Dlaczego osobny element, a nie ::before z adresem w zmiennej CSS:
   adres względny w zmiennej jest rozwiązywany niejednakowo — Chrome liczy
   go od arkusza stylów (czyli assets/css/), więc zdjęcia dawały 404. Adres
   wpisany wprost w atrybut style elementu zawsze liczy się od strony. */
.card__tlo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  /* Rozciągnięcie w POZIOMIE — po to, żeby poświata sięgała dalej w pas.
     Tylko w poziomie, bo pionu ruszyć nie wolno: kolor musi zostać na tej
     samej wysokości co miejsce, które dopełnia. */
  transform: scaleX(1.25);
  filter: blur(24px);
}

/* Zdjęcie samo wyznacza wysokość kafelka — tak jak na Allegro.

   Droga do tego rozwiązania: najpierw kafelki miały sztywne 4:3 i „cover",
   co obcinało pionowym zdjęciom gzyms i nogi. Potem „contain" w tym samym
   sztywnym kafelku — nic już nie ginęło, ale wokół pionowych zdjęć zostawały
   szerokie beżowe pasy. Nie da się ich ukryć doborem koloru: z 88 zdjęć
   tylko 5 ma jasne tło, pozostałe mają ściany, parkiet i wnętrza w różnych
   barwach, więc żaden jeden kolor nie pasuje.

   Dlatego nie narzucamy już kafelkom wspólnego kształtu. Wysokie meble dają
   wysokie kafelki, szerokie — niskie. Żadnych pasów i żadnego kadrowania.
   Wymiary trafiają do atrybutów width/height obrazka (z pola wymiaryZdjec
   w katalogu), więc przeglądarka rezerwuje miejsce z góry i nic nie
   podskakuje przy wczytywaniu. */
.card__img {
  /* nad rozmytą kopią z .card__tlo */
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 800ms var(--ease), opacity var(--dur) var(--ease);
}

.card:hover .card__img {
  transform: scale(1.045);
}

.card__img--alt {
  position: absolute;
  inset: 0;
  height: 100%;
  /* Kadr wyznacza pierwsze zdjęcie; zamienne wpisujemy w niego bez
     rozciągania, bo może mieć inne proporcje. */
  object-fit: contain;
  opacity: 0;
}

.card:hover .card__img--alt {
  opacity: 1;
}

.card__badges {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
}

.badge {
  padding: 0.3rem 0.6rem;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.badge--gold {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: #fff;
}

.badge--sold {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.badge--reserved {
  background: var(--warn);
  border-color: var(--warn);
  color: #fff;
}

/* szybkie akcje — wsuwają się, ale zawsze dostępne z klawiatury */
.card__quick {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 2;
  display: flex;
  gap: 0.4rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.card:hover .card__quick,
.card:focus-within .card__quick {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .card__quick {
    opacity: 1;
    transform: none;
  }
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.4rem;
  padding-top: var(--sp-2);
}

.card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.card__meta span:not(:last-child)::after {
  content: " ·";
  color: var(--line-strong);
}

.card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.25;
  /* Miejsce na dwie linie z góry. Bez tego jednowyrazowa nazwa podnosi
     cenę o jeden wiersz i ceny w rzędzie przestają być na jednej wysokości. */
  min-height: 2.5em;
  color: var(--ink);
}

/* Obszar dotyku 44px dla tytułu bez rozpychania karty. Zdjęcie nad tytułem
   prowadzi do tego samego produktu i jest dużym celem, ale tytuł też
   powinien dać się trafić palcem. */
.card__title a {
  display: inline-block;
  padding-block: 0.625rem;
  margin-block: -0.625rem;
  transition: color var(--dur) var(--ease);
}

.card__title a:hover {
  color: var(--gold-ink);
}

.card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  /* Dosuwamy do dołu karty, więc ceny w rzędzie stoją w jednej linii
     także wtedy, gdy nazwa zajęła trzy wiersze. */
  margin-top: auto;
  padding-top: 0.25rem;
}

.card__allegro {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color var(--dur) var(--ease);
}

.card__allegro:hover {
  color: var(--gold-ink);
}

/* Obszar dotyku 44px w pionie bez wpływu na layout — ujemny margines
   kompensuje padding, więc wiersz z ceną zostaje wyrównany do linii bazowej. */
.card__allegro {
  padding-block: 0.625rem;
  margin-block: -0.625rem;
}

.card__allegro svg {
  width: 13px;
  height: 13px;
}

.card.is-sold .card__media {
  filter: grayscale(0.55);
  opacity: 0.72;
}

/* -------------------------------------------------- 13. PROCES RENOWACJI */
.steps {
  display: grid;
  gap: var(--sp-4);
  counter-reset: step;
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-4);
  }
}

@media (min-width: 1200px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.step {
  position: relative;
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(217, 166, 90, 0.32);
}

.step__num {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background-color: var(--oak);
  background-image: url("../../media/tekstury/oak-mid.webp");
  background-size: 200%;
  background-position: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--paper);
}

.step h3 {
  margin: var(--sp-3) 0 0.6rem;
  font-size: 1.375rem;
}

.step p {
  font-size: var(--fs-sm);
  color: rgba(252, 250, 247, 0.72);
}

/* ------------------------------------------------ 13b. WARSZTAT (ZDJĘCIA) */
.workshop {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
  .workshop {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.workshop__item {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(217, 166, 90, 0.28);
  border-radius: var(--radius);
  background: var(--oak-deep);
}

.workshop__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 800ms var(--ease);
}

.workshop__item:hover img {
  transform: scale(1.04);
}

.workshop__item figcaption {
  padding: 0.7rem 0.85rem;
  border-top: 1px solid rgba(217, 166, 90, 0.22);
  font-size: 0.75rem;
  line-height: 1.45;
  color: rgba(252, 250, 247, 0.72);
}

/* na ciemnym tle plakietka PRZYKŁAD musi zmienić kolory */
.section--oak .is-placeholder::before {
  background: rgba(20, 11, 5, 0.82);
  border-color: rgba(217, 166, 90, 0.5);
  color: var(--gold-light);
}

/* --------------------------------------------------- 13c. ATUTY / DOSTAWA */
.perks {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .perks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .perks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.perk {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.perk:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--sh-2);
}

.perk__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--gold-wash);
  border-radius: 50%;
  color: var(--gold-ink);
}

.perk__icon svg {
  width: 21px;
  height: 21px;
}

.perk h3 {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
}

.perk p {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  max-width: none;
}

/* czwarty kafel to ostrzeżenie o kosztach transportu — musi się wybijać */
.perk--accent {
  background: var(--gold-wash);
  border-color: var(--gold);
  border-left-width: 3px;
}

.perk--accent:hover {
  border-color: var(--gold-deep);
}

.perk--accent .perk__icon {
  background: var(--gold-deep);
  color: #fff;
}

/* ------------------------------------------- 10b. SEKCJA „KIM JESTEŚMY"
   Zdjęcie po lewej, tekst po prawej. Wcześniej pod nagłówkiem zostawało
   ~400 px pustki, bo kolumna z tytułem była dużo krótsza od kolumny z tekstem. */
.about {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: clamp(var(--sp-5), 7vw, var(--sp-7));
}

@media (min-width: 900px) {
  .about {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--sp-6);
    align-items: center;
  }
}

/* rama jak w hero — dębowa listwa i zdjęcie w środku */
.about__photo {
  position: relative;
  margin: 0;
  padding: clamp(0.5rem, 1.4vw, 0.75rem);
  background-color: var(--oak);
  background-image: url("../../media/tekstury/oak-mid.webp");
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -2px 6px rgba(0, 0, 0, 0.35), var(--sh-2);
}

.about__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--paper-3);
}

.about__text h2 {
  max-width: 18ch;
}

/* -------------------------------------------- 13d. ZDJĘCIA WNĘTRZ
   Wspólna reguła: obraz w kontenerze z overflow:hidden, żeby parallax
   nigdy nie wystawał poza kadr (patrz MASTER.md sekcja 6). */
.figure-wide,
.band,
.mosaic__item {
  overflow: hidden;
  border-radius: var(--radius);
}

/* pojedyncze zdjęcie z podpisem — pod tekstem sekcji */
.figure-wide {
  position: relative;
  margin: 0 0 var(--sp-5);
  border: 1px solid var(--line);
  background: var(--paper-3);
}

.figure-wide img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  will-change: transform;
}

@media (min-width: 900px) {
  .figure-wide img {
    aspect-ratio: 21 / 9;
  }
}

.figure-wide figcaption {
  display: grid;
  gap: 0.3rem;
  padding: var(--sp-3);
  border-top: 1px solid var(--line);
  background: var(--paper);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  max-width: 46rem;
}

.figure-wide figcaption span {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

/* pas pełnej szerokości — akcent między sekcjami */
.band {
  position: relative;
  border-block: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper-3);
}

.band img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  will-change: transform;
}

@media (min-width: 768px) {
  .band img {
    aspect-ratio: 21 / 9;
  }
}

/* Równa siatka 2×2 — wszystkie kafle tej samej wielkości, ten sam kadr 4:3.
   Wcześniejszy zygzak z kaflami o różnych rozpiętościach sprawiał wrażenie,
   jakby jedno zdjęcie wystawało poza układ. */
.mosaic {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 700px) {
  .mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mosaic__item {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--paper-3);
}

.mosaic__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--ease);
}

.mosaic__item:hover img {
  transform: scale(1.045);
}

/* złoty hairline pojawiający się na hover — spójne z kartami produktów */
.mosaic__item::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}

.mosaic__item:hover::after {
  opacity: 1;
}

/* ---------------------------------------------------------- 14. OPINIE */
/* Maksymalnie 3 kolumny — dłuższe cytaty w węższej kolumnie źle się czytają. */
.reviews {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .reviews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .reviews {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.review__product {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--paper-2);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-mute);
  max-width: none;
}

.review__product svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 1px;
  color: var(--gold-ink);
}

/* Obszar dotyku 44px bez rozpychania ramki — padding kompensowany marginesem. */
.review__product a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.7rem;
  margin-block: -0.7rem;
  color: var(--gold-ink);
  font-weight: 500;
  transition: color var(--dur) var(--ease);
}

.review__product a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.mb-1 {
  margin-bottom: 0.35rem;
}

.rating-summary .review__stars svg {
  width: 17px;
  height: 17px;
}

.review {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.review:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: var(--sh-2);
}

.review__stars {
  display: flex;
  gap: 2px;
  color: var(--gold);
}

.review__stars svg {
  width: 15px;
  height: 15px;
}

.review__quote {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--ink);
}

.review__quote::before {
  content: "„";
}

.review__quote::after {
  content: "”";
}

.review__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
}

.review__avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  background: var(--gold-wash);
  border: 1px solid var(--gold);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold-ink);
}

/* display:block jest tu konieczny — to <span>-y, więc bez tego imię i źródło
   sklejają się w jedną linię („IrenaAllegro"). */
.review__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.review__where {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-mute);
  line-height: 1.4;
}

/* wyraźne oznaczenie treści zastępczej */
.is-placeholder {
  position: relative;
}

.is-placeholder::before {
  content: "PRZYKŁAD";
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.2rem 0.45rem;
  background: var(--paper-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}

.rating-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
}

.rating-summary__score {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--ink);
}

/* ------------------------------------------------------ 15. ZAUFANIE */
.trust {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.trust__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.trust__item:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}

.trust__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  background: var(--gold-wash);
  border-radius: 50%;
  color: var(--gold-ink);
}

.trust__icon svg {
  width: 20px;
  height: 20px;
}

/* jak wyżej — bez display:block etykieta i wartość skleiłyby się w jedną linię */
.trust__label {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.trust__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--ink);
  line-height: 1.3;
}

/* ------------------------------------------------------ 16. FORMULARZE */
.form {
  display: grid;
  gap: var(--sp-3);
}

.form__row {
  display: grid;
  gap: var(--sp-3);
  /* Bez tego siatka rozciaga oba pola do rownej wysokosci. Gdy jedno ma pod
     soba podpowiedz (np. "Tu wyslemy potwierdzenie"), drugie rosnie razem
     z nim i jego input staje sie wyzszy — pola wygladaly nierowno. */
  align-items: start;
}

@media (min-width: 640px) {
  .form__row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

.field__label .req {
  color: var(--danger);
  margin-left: 0.15em;
}

.field__hint {
  font-size: 0.75rem;
  color: var(--ink-mute);
  line-height: 1.5;
}

.field__control {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: var(--fs-body);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.field__control::placeholder {
  color: #a2988e;
}

.field__control:hover {
  border-color: var(--ink-mute);
}

.field__control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(182, 119, 40, 0.16);
}

textarea.field__control {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}

select.field__control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a423c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
  cursor: pointer;
}

.field__error {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--danger);
}

.field.has-error .field__control {
  border-color: var(--danger);
  background: #fdf6f5;
}

.field.has-error .field__error {
  display: flex;
}

/* radio jako karta wyboru */
.choice {
  display: grid;
  gap: var(--sp-2);
}

.choice__opt {
  position: relative;
  display: flex;
  gap: 0.85rem;
  padding: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.choice__opt:hover {
  border-color: var(--gold);
}

.choice__opt input {
  appearance: none;
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.choice__opt input:checked {
  border-color: var(--gold-deep);
  border-width: 6px;
}

.choice__opt:has(input:checked) {
  border-color: var(--gold);
  background: var(--gold-wash);
}

.choice__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

.choice__desc {
  font-size: 0.8125rem;
  color: var(--ink-mute);
  line-height: 1.5;
}

.check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  cursor: pointer;
  font-size: 0.8125rem;
  line-height: 1.55;
}

.check input {
  appearance: none;
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.check input:checked {
  background: var(--gold-deep)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 12px no-repeat;
  border-color: var(--gold-deep);
}

/* ------------------------------------------------------------ 17. SKLEP */
.shop {
  display: grid;
  gap: var(--sp-4);
  align-items: start;
}

@media (min-width: 1024px) {
  .shop {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--sp-6);
  }
}

.filters {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 1024px) {
  .filters {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-3));
  }
}

.filters__group {
  display: grid;
  gap: 0.75rem;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.filters__title {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.filter-list {
  display: grid;
  gap: 0.15rem;
}

.filter-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--ink-soft);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.filter-btn:hover {
  background: var(--paper-3);
  color: var(--ink);
}

.filter-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
}

.filter-btn span {
  font-size: 0.75rem;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

.filter-btn[aria-pressed="true"] span {
  color: rgba(252, 250, 247, 0.7);
}

.shop__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}

.shop__count {
  font-size: var(--fs-sm);
  color: var(--ink-mute);
}

.shop__count strong {
  font-variant-numeric: tabular-nums;
}

.filters-toggle {
  display: inline-flex;
}

@media (min-width: 1024px) {
  .filters-toggle {
    display: none;
  }
}

@media (max-width: 1023px) {
  .filters {
    display: none;
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-2);
  }

  .filters.is-open {
    display: grid;
  }
}

.empty {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  padding: var(--sp-7) var(--sp-3);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-2);
}

.empty svg {
  width: 44px;
  height: 44px;
  color: var(--gold);
  opacity: 0.7;
}

/* skeleton na czas ładowania JSON — rezerwuje miejsce, CLS ~0 */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--paper-3);
  border-radius: var(--radius);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  to {
    transform: translateX(100%);
  }
}

.skeleton-card__media {
  aspect-ratio: 4 / 3;
}

.skeleton-card__line {
  height: 12px;
  margin-top: 0.75rem;
}

.skeleton-card__line--short {
  width: 45%;
}

/* -------------------------------------------------------- 18. PRODUKT */
.pdp {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
}

@media (min-width: 1024px) {
  .pdp {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--sp-6);
  }
}

.gallery {
  display: grid;
  gap: var(--sp-2);
}

.gallery__main {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-3);
}

/* Główne zdjęcie produktu — jak w kafelkach, własne proporcje. */
.gallery__main img {
  display: block;
  width: 100%;
  height: auto;
}

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.5rem;
}

.gallery__thumb {
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-3);
  cursor: pointer;
  padding: 0;
  transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* Miniatury zostają kwadratowe i kadrowane. Przy 60 px służą tylko do
   przeskakiwania między zdjęciami, a pasy w każdej z nich wyglądałyby
   gorzej niż wycinek — całe zdjęcie i tak widoczne jest powyżej. */
.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__thumb[aria-current="true"] {
  border-color: var(--gold);
  border-width: 2px;
}

.gallery__thumb:not([aria-current="true"]) {
  opacity: 0.68;
}

.gallery__thumb:hover {
  opacity: 1;
  border-color: var(--gold);
}

.pdp__panel {
  display: grid;
  gap: var(--sp-3);
}

@media (min-width: 1024px) {
  .pdp__panel {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-3));
  }
}

/* ------------------------------------------- POWIĘKSZANIE ZDJĘĆ (LUPA) */
.gallery__main--zoom {
  cursor: zoom-in;
}

.lupa {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: clamp(0.75rem, 3vw, 2rem);
  background: rgba(20, 11, 5, 0.94);
  /* zapas na pasek adresu w telefonach */
  padding-bottom: max(clamp(0.75rem, 3vw, 2rem), env(safe-area-inset-bottom));
}

.lupa.is-open {
  display: flex;
}

.lupa img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  /* gest przesuwania obsługujemy sami, przeglądarka nie ma przewijać w bok */
  touch-action: pan-y;
}

.lupa__zamknij,
.lupa__nav {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 1px solid rgba(252, 250, 247, 0.28);
  border-radius: 50%;
  background: rgba(20, 11, 5, 0.55);
  color: var(--paper);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.lupa__zamknij:hover,
.lupa__nav:hover,
.lupa__zamknij:focus-visible,
.lupa__nav:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.lupa__zamknij svg,
.lupa__nav svg {
  width: 22px;
  height: 22px;
}

.lupa__zamknij {
  position: absolute;
  top: clamp(0.75rem, 3vw, 1.5rem);
  right: clamp(0.75rem, 3vw, 1.5rem);
  z-index: 1;
}

.lupa__licznik {
  position: absolute;
  bottom: clamp(0.75rem, 3vw, 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: rgba(252, 250, 247, 0.75);
}

/* Na telefonie strzałki tylko przeszkadzają — tam przesuwa się palcem. */
@media (max-width: 700px) {
  .lupa__nav {
    display: none;
  }
}

/* Opis pod galerią — wyśrodkowany i zwężony, bo długi tekst czyta się źle,
   gdy linia ma pół ekranu szerokości. */
.pdp__opis {
  max-width: 62ch;
  margin: var(--sp-5) auto 0;
}

@media (min-width: 1024px) {
  .pdp__opis {
    margin-top: var(--sp-6, var(--sp-5));
  }
}

.pdp__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.pdp__price .price {
  font-size: 2.25rem;
}

.specs {
  font-size: var(--fs-sm);
}

.specs tr {
  border-bottom: 1px solid var(--line);
}

.specs th,
.specs td {
  padding: 0.7rem 0;
  text-align: left;
  vertical-align: top;
}

.specs th {
  width: 42%;
  font-weight: 500;
  color: var(--ink-mute);
}

.specs td {
  color: var(--ink);
}

.notice {
  display: flex;
  gap: 0.75rem;
  padding: var(--sp-3);
  background: var(--gold-wash);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.notice svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--gold-ink);
  margin-top: 2px;
}

.notice p {
  max-width: none;
}

.notice--info {
  background: var(--paper-3);
  border-left-color: var(--ink-mute);
}

.notice--ok {
  background: #eef5f0;
  border-left-color: var(--ok);
}

/* --------------------------------------------------------- 19. KOSZYK */
.cart-layout {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
}

@media (min-width: 1024px) {
  .cart-layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--sp-6);
  }
}

.cart-item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 640px) {
  .cart-item {
    grid-template-columns: 110px minmax(0, 1fr) auto;
    align-items: start;
  }
}

.cart-item__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-3);
}

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

.cart-item__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--ink);
  line-height: 1.3;
}

.cart-item__meta {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--ink-mute);
}

.cart-item__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: 0.6rem;
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}

.qty button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.qty button:hover {
  background: var(--paper-3);
}

.qty output {
  min-width: 2.5rem;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cart-item__remove {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.cart-item__remove:hover {
  color: var(--danger);
}

.cart-item__remove svg {
  width: 14px;
  height: 14px;
}

.cart-item__price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.summary {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

@media (min-width: 1024px) {
  .summary {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-3));
  }
}

.summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}

.summary__row--total {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-strong);
  font-size: var(--fs-body);
}

.summary__row--total dd {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.summary__row dt {
  color: var(--ink-mute);
}

.summary__row dd {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.steps-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.steps-bar li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.steps-bar li[aria-current="step"] {
  color: var(--gold-ink);
}

.steps-bar li::before {
  content: counter(list-item);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.625rem;
}

/* ---------------------------------------------------------- 20. STOPKA */
.footer {
  position: relative;
  padding-top: var(--sp-7);
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  background: var(--ink);
  color: rgba(252, 250, 247, 0.7);
  font-size: var(--fs-sm);
}

.footer h2,
.footer h3 {
  color: var(--paper);
}

.footer__grid {
  display: grid;
  gap: var(--sp-5);
  padding-bottom: var(--sp-6);
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  }
}

.footer__title {
  margin-bottom: var(--sp-2);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.footer__list {
  display: grid;
  gap: 0.1rem;
}

.footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: rgba(252, 250, 247, 0.7);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.footer__list a:hover {
  color: var(--gold-light);
  transform: translateX(3px);
}

.footer__brand {
  color: var(--gold-light);
}

.footer__brand svg {
  width: 44px;
  height: auto;
  margin-bottom: var(--sp-2);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(252, 250, 247, 0.12);
  font-size: 0.75rem;
  color: rgba(252, 250, 247, 0.5);
  line-height: 1.7;
}

.footer__bottom > div {
  display: grid;
  gap: 0.1rem;
}

.footer__credit {
  margin-top: 0.4rem;
  color: rgba(252, 250, 247, 0.42);
}

.footer__credit a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -0.5rem;
  color: var(--gold-light);
  font-weight: 600;
  letter-spacing: 0.02em;
  background-image: linear-gradient(var(--gold-light), var(--gold-light));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 6px);
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}

.footer__credit a:hover {
  background-size: 100% 1px;
  color: #fff;
}

.footer address {
  font-style: normal;
  line-height: 1.8;
}

.footer__hours {
  display: grid;
  gap: 0.2rem;
  font-size: 0.8125rem;
  max-width: 15rem;
}

.footer__hours li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
}

.footer__hours li span:last-child {
  color: var(--paper);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Podpisane pigułki zamiast samych ikon — po sylwetce nie dało się poznać,
   że środkowy przycisk prowadzi do naszych ofert na Allegro. */
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--sp-2);
}

.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.95rem;
  border: 1px solid rgba(252, 250, 247, 0.2);
  border-radius: 999px;
  color: rgba(252, 250, 247, 0.78);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.socials a:hover,
.socials a:focus-visible {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--ink);
}

.socials svg {
  width: 17px;
  height: 17px;
  /* .footer__brand svg dokłada margin-bottom (to reguła dla logo w stopce),
     przez co ikonki lądowały 8 px nad środkiem pigułki. */
  margin: 0;
  flex-shrink: 0;
}

/* --------------------------------------------------------- 21. TOAST */
.toasts {
  position: fixed;
  right: var(--sp-2);
  bottom: var(--sp-2);
  z-index: 9999;
  display: grid;
  gap: 0.5rem;
  width: min(360px, calc(100vw - var(--sp-4)));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--sh-3);
  font-size: 0.8125rem;
  line-height: 1.5;
  pointer-events: auto;
  animation: toast-in var(--dur-slow) var(--ease);
}

.toast.is-out {
  animation: toast-out var(--dur) var(--ease-out) forwards;
}

.toast svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--gold-light);
  margin-top: 1px;
}

.toast strong {
  display: block;
  color: #fff;
  font-weight: 600;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ------------------------------------------------- 21b. PASEK COOKIES */
.cookie-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 9500;
  background: var(--paper);
  border-top: 1px solid var(--gold);
  box-shadow: 0 -12px 40px -12px rgba(36, 21, 9, 0.22);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%);
  /* visibility w transition sprawia, że zsunięty pasek jest nie tylko poza
     ekranem, ale też niedostępny dla klawiatury i czytników ekranu */
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease),
    visibility var(--dur-slow) var(--ease);
}

.cookie-bar.is-in {
  transform: none;
  visibility: visible;
}

/* wąska intarsja dębowa nad paskiem — spina go z resztą strony */
.cookie-bar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background-color: var(--oak);
  background-image: url("../../media/tekstury/oak-strip.webp");
  background-size: auto 100%;
  background-repeat: repeat-x;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.3);
}

.cookie-bar__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-start;
  padding-block: var(--sp-3);
}

@media (min-width: 860px) {
  .cookie-bar__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
  }
}

.cookie-bar__text {
  display: flex;
  gap: 0.75rem;
}

.cookie-bar__text svg {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
  color: var(--gold-ink);
}

.cookie-bar__text p {
  font-size: 0.8125rem;
  line-height: 1.6;
  max-width: 62ch;
}

.cookie-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: none;
}

@media (max-width: 480px) {
  .cookie-bar__actions .btn {
    flex: 1 1 auto;
  }
}

/* -------------------------------------------------------- 22. PRELOADER */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: grid;
  place-items: center;
  background: var(--paper);
  transition: opacity var(--dur-slow) var(--ease-out),
    visibility var(--dur-slow) var(--ease-out);
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden;
}

.preloader svg {
  width: 84px;
  height: auto;
  color: var(--gold);
}

.preloader svg path {
  animation: mark-in 900ms var(--ease) both;
}

@keyframes mark-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ------------------------------------------------------------ 23. MOTION
   Fallback dla IntersectionObserver. GSAP, jeśli się wczyta, nadpisuje
   te wartości — ale treść jest widoczna nawet gdy JS padnie (patrz .no-js). */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.no-js [data-reveal],
html:not(.js) [data-reveal] {
  opacity: 1;
  transform: none;
}

[data-reveal-mask] {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 900ms var(--ease);
}

[data-reveal-mask].is-in {
  clip-path: inset(0 0 0 0);
}

.split-line {
  display: block;
  overflow: hidden;
}

.split-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 820ms var(--ease);
  transition-delay: var(--line-delay, 0ms);
}

.is-in .split-line > span,
.split-line.is-in > span {
  transform: none;
}

html:not(.js) .split-line > span {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal],
  [data-reveal-mask],
  .split-line > span,
  .mobile-nav__link {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .marquee__track {
    animation: none !important;
  }

  .section--oak {
    background-attachment: scroll;
  }

  .scroll-cue__line {
    animation: none;
    transform: scaleY(1);
    opacity: 0.6;
  }
}

/* iOS nie obsługuje background-attachment: fixed — wyłącz parallax */
@media (max-width: 1023px), (hover: none) {
  .section--oak {
    background-attachment: scroll;
  }
}

/* ------------------------------------------------------------- 24. UTILS */
.mt-0 {
  margin-top: 0;
}

.mt-2 {
  margin-top: var(--sp-2);
}

.mt-3 {
  margin-top: var(--sp-3);
}

.mt-4 {
  margin-top: var(--sp-4);
}

.mt-5 {
  margin-top: var(--sp-5);
}

.mt-6 {
  margin-top: var(--sp-6);
}

.mb-3 {
  margin-bottom: var(--sp-3);
}

.mb-4 {
  margin-bottom: var(--sp-4);
}

.text-center {
  text-align: center;
}

.mx-auto {
  margin-inline: auto;
}

.is-hidden {
  display: none !important;
}

.page-head {
  padding-top: calc(var(--header-h) + var(--sp-6));
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--sp-2);
  font-size: 0.75rem;
  color: var(--ink-mute);
}

.crumbs a {
  display: inline-block;
  padding-block: 0.75rem;
  margin-block: -0.75rem;
  transition: color var(--dur) var(--ease);
}

.crumbs a:hover {
  color: var(--gold-ink);
}

.crumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 0.5rem;
  color: var(--line-strong);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* --------------------------------------------------- 24a. GODZINY OTWARCIA */
.hours {
  display: grid;
  gap: 0;
  max-width: 22rem;
}

.hours > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}

.hours > div:last-child {
  border-bottom: 0;
}

.hours dt {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.hours dd {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hours .is-closed dt,
.hours .is-closed dd {
  color: var(--ink-mute);
  font-weight: 400;
}

/* dzisiejszy dzień wyróżniony złotą krawędzią — ustawiany z JS */
.hours > div.is-today {
  margin-inline: -0.75rem;
  padding-inline: 0.75rem;
  background: var(--gold-wash);
  border-bottom-color: transparent;
  box-shadow: inset 2px 0 0 var(--gold);
}

.hours > div.is-today dt {
  color: var(--gold-ink);
  font-weight: 600;
}

/* ------------------------------- 24a2. OSTRZEŻENIE ROBOCZE (żółty banner)
   Celowo krzyczy — ma nie przejść niezauważone na produkcję. Kontrast
   sprawdzony: ink na #FFF4C2 = 13.8:1. */
/* Widoczny tylko lokalnie — to notatka dla właściciela, nie dla klienta.
   Klasę .is-dev nadaje app.js na localhost / file://. Bez JS banner się nie
   pokaże, co jest bezpieczniejsze niż odwrotnie. */
.alert-legal {
  display: none;
}

.is-dev .alert-legal {
  display: block;
}

.alert-legal {
  padding: var(--sp-3) var(--sp-4);
  background: #fff4c2;
  border: 2px solid #e0a900;
  border-left-width: 6px;
  border-radius: var(--radius);
  color: #3d2f00;
  box-shadow: var(--sh-2);
}

.alert-legal p {
  max-width: none;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.alert-legal strong {
  color: #241c00;
}

.alert-legal__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--sp-2);
  padding: 0.35rem 0.7rem;
  background: #1c1600;
  color: #ffdf5e;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.alert-legal__badge svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.alert-legal__todo {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px dashed #d9a900;
  font-size: 0.8125rem !important;
  font-weight: 600;
}

.alert-legal code {
  padding: 0.1em 0.35em;
  background: rgba(0, 0, 0, 0.08);
  border-radius: var(--radius);
}

.alert-legal .fill {
  background: #ffe066;
  border-bottom-color: #b58900;
  color: #3d2f00;
}

/* ------------------------------------------------- 24b. DOKUMENTY (PROSE) */
.prose {
  max-width: 74ch;
}

.prose h2 {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
  font-size: 1.625rem;
}

.prose h3 {
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-1);
  font-size: 1.1875rem;
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0;
}

.prose p,
.prose li {
  max-width: none;
}

.prose p + p {
  margin-top: var(--sp-2);
}

.prose ul,
.prose ol {
  margin-top: var(--sp-2);
  padding-left: 1.35rem;
  display: grid;
  gap: 0.45rem;
}

.prose ul {
  list-style: none;
  padding-left: 0;
}

.prose ul > li {
  position: relative;
  padding-left: 1.35rem;
}

.prose ul > li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}

.prose ol {
  list-style: decimal;
}

.prose ol > li::marker {
  color: var(--gold-ink);
  font-weight: 600;
}

.prose dl {
  margin-top: var(--sp-2);
  display: grid;
  gap: 0.5rem;
}

.prose dt {
  font-weight: 600;
  color: var(--ink);
}

.prose code {
  padding: 0.1em 0.35em;
  background: var(--paper-3);
  border-radius: var(--radius);
  font-size: 0.9em;
  word-break: break-word;
}

/* Szeroka tabela przewija się w swoim kontenerze — body nigdy nie scrolluje
   poziomo (reguła 5 z quick-reference). */
.table-scroll {
  overflow-x: auto;
  margin-top: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}

.table-scroll table {
  min-width: 34rem;
  margin: 0;
}

.table-scroll .specs th,
.table-scroll .specs td {
  padding: 0.7rem 0.9rem;
  width: auto;
}

.table-scroll .specs thead th {
  background: var(--paper-2);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.table-scroll .specs tbody td:first-child {
  white-space: nowrap;
}

.prose .fill {
  padding: 0.05em 0.5em;
  background: var(--gold-wash);
  border-bottom: 1px dashed var(--gold);
  color: var(--gold-ink);
  font-weight: 600;
  font-size: 0.9375em;
}

/* ------------------------------------------------------------- 25. PRINT */
@media print {
  .header,
  .mobile-nav,
  .footer,
  .toasts,
  .preloader,
  .marquee,
  .scroll-cue,
  .btn,
  .card__quick {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  body::after {
    display: none;
  }

  [data-reveal],
  .split-line > span {
    opacity: 1 !important;
    transform: none !important;
  }
}