/* ============================================================================
   AURELLE — Naturalna Pielęgnacja Premium
   Zawartość:
     01. Design tokens (paleta, typografia, rytm)
     02. Reset i elementy bazowe
     03. Komponenty globalne (container, przyciski, eyebrow, nagłówki)
     04. Dostępność (skip-link, focus, reduced-motion)
     05. Header + menu mobilne
     06. Hero
     07. Marquee (linia editorialna)
     08. Brand story
     09. Produkty
     10. Wyróżniki
     11. Sekcja editorialna
     12. Newsletter
     13. Footer
     14. Toast
     15. Animacje reveal
     16. Responsywność
     17. prefers-reduced-motion
   ============================================================================ */

/* ============================================================================
   01. DESIGN TOKENS
   Jedno miejsce do zmiany palety i typografii — przydatne przy wdrożeniu
   brandbooka klienta lub migracji do WordPressa (Custom Properties).
   ============================================================================ */
:root {
  /* Kolory */
  --bg:            #F7F4EF;   /* kość słoniowa — tło strony */
  --bg-alt:        #EFE9DF;   /* piaskowe tło akcentowe */
  --surface:       #FFFFFF;   /* białe powierzchnie (karty) */
  --ink:           #201D19;   /* atrament — tekst, przyciski, footer */
  --ink-soft:      #57504A;   /* drugorzędny tekst */
  --bronze:        #9C7B52;   /* akcent — brąz */
  --bronze-soft:   #B99B76;   /* jaśniejszy akcent */
  --error:         #A4452C;   /* komunikaty błędów formularza */
  --hairline:      rgba(32, 29, 25, .14);
  --hairline-soft: rgba(32, 29, 25, .08);
  --hairline-dark: rgba(247, 244, 239, .16);

  /* Typografia */
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:  "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Rytm i rozmiary */
  --container: min(100% - 2.5rem, 1240px);
  --header-h: 88px;
  --section-pad: clamp(5rem, 11vw, 9rem);
  --radius: 999px;   /* przyciski pigułki */
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Cienie — bardzo stonowane, tylko tam, gdzie niezbędne */
  --shadow-card: 0 24px 60px -28px rgba(32, 29, 25, .28);
  --shadow-float: 0 18px 44px -22px rgba(32, 29, 25, .35);
}

/* ============================================================================
   02. RESET I ELEMENTY BAZOWE
   ============================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Offsety dla kotwic pod sticky header */
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

ul,
ol {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: var(--bronze);
  color: var(--bg);
}

/* ============================================================================
   03. KOMPONENTY GLOBALNE
   ============================================================================ */
.container {
  width: var(--container);
  margin-inline: auto;
}

.section {
  padding-block: var(--section-pad);
}

/* Nagłówek sekcji — „eyebrow”: mała, rozstrzelona etykieta nad tytułem */
.eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bronze);
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.4rem;
}

/* Kreska przed eyebrow — detal editorialny */
.eyebrow::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: var(--bronze);
  flex: none;
}

/* Tytuły sekcji — serif, kursywa jako akcent */
.section-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  max-width: 22ch;
}

.section-title em {
  font-style: italic;
  color: var(--bronze);
}

/* Akapit wprowadzający pod tytułem */
.lead {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.5;
  color: var(--ink);
}

/* Przyciski */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.05rem 2.1rem;
  border-radius: var(--radius);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color .35s var(--ease-out),
    color .35s var(--ease-out),
    transform .35s var(--ease-out),
    box-shadow .35s var(--ease-out);
}

.btn--primary {
  background: var(--ink);
  color: var(--bg);
}

.btn--primary:hover {
  background: var(--bronze);
  transform: translateY(-2px);
}

.btn--primary:active {
  transform: translateY(0);
}

.btn--sm {
  padding: .78rem 1.5rem;
}

/* Link ze strzałką — drugorzędne CTA */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--hairline);
  transition: border-color .3s var(--ease-out), gap .3s var(--ease-out);
}

.link-arrow::after {
  content: "→";
  font-size: 1rem;
  line-height: 1;
  transition: transform .3s var(--ease-out);
}

.link-arrow:hover {
  border-color: var(--bronze);
  gap: .85rem;
}

.link-arrow:hover::after {
  transform: translateX(2px);
}

/* ============================================================================
   04. DOSTĘPNOŚĆ
   ============================================================================ */
/* Link pomijający nawigację */
.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 200;
  padding: .7rem 1.2rem;
  background: var(--ink);
  color: var(--bg);
  font-size: .8rem;
  font-weight: 600;
  border-radius: var(--radius);
  transform: translateY(-300%);
  transition: transform .3s var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Widoczny fokus klawiatury — spójny ze stylem marki */
:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Klasa pomocnicza — ukrycie wizualne przy zachowaniu czytnika ekranu */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   05. HEADER + MENU MOBILNE
   ============================================================================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition:
    background-color .4s var(--ease-out),
    box-shadow .4s var(--ease-out);
}

/* Stan po przewinięciu — delikatne szkło + hairline */
.site-header.is-scrolled {
  background: rgba(247, 244, 239, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--hairline);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: var(--header-h);
}

/* Logo */
.logo {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: .16em;
  margin-right: auto;
}

.logo-dot {
  color: var(--bronze);
}

/* Nawigacja desktop */
.nav {
  display: flex;
  gap: 2.2rem;
}

.nav a {
  position: relative;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .06em;
  padding-block: .4rem;
}

/* Podkreślenie nav — subtelna linia rosnąca */
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease-out);
}

.nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Hamburger */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 120;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color .3s var(--ease-out);
}

.nav-toggle:hover {
  border-color: var(--bronze);
}

.nav-toggle__line {
  width: 1.1rem;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .4s var(--ease-out);
}

/* Hamburger → X */
.nav-toggle[aria-expanded="true"] .nav-toggle__line:first-child {
  transform: translateY(3.75px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

/* Overlay menu mobilne */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition:
    opacity .45s var(--ease-out),
    transform .45s var(--ease-out),
    visibility .45s;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.mobile-menu__nav a {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 8vw, 2.8rem);
  line-height: 1.35;
  color: var(--ink);
  transition: color .3s var(--ease-out);
}

.mobile-menu__nav a:hover {
  color: var(--bronze);
}

.mobile-menu__cta {
  margin-top: .5rem;
}

.mobile-menu__note {
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--ink-soft);
}

/* ============================================================================
   06. HERO
   ============================================================================ */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

/* Tytuł hero — największy element strony */
.hero-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.9rem, 7vw, 5.2rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  margin-bottom: 1.6rem;
}

.hero-title em {
  font-style: italic;
  color: var(--bronze);
}

.hero-lead {
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 2.4rem;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.8rem;
  margin-bottom: 2.6rem;
}

.hero-note {
  font-size: .78rem;
  letter-spacing: .05em;
  color: var(--ink-soft);
}

/* Wizual hero — ramka offsetowa w tle (detal editorialny) */
.hero-visual {
  position: relative;
  padding-bottom: 2.5rem;
}

.hero-visual__media {
  position: relative;
  will-change: transform; /* parallax */
}

/* Ramka przesunięta względem grafiki */
.hero-visual__media::before {
  content: "";
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 1px solid var(--hairline);
  pointer-events: none;
}

.hero-visual img {
  width: 100%;
  height: auto;
}

/* Pływająca karta nowości */
.hero-card {
  position: absolute;
  left: -1.6rem;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  max-width: 21rem;
  padding: 1.1rem 1.4rem;
  background: var(--surface);
  box-shadow: var(--shadow-float);
  animation: floatCard 7s ease-in-out infinite;
}

.hero-card__dot {
  width: 9px;
  height: 9px;
  margin-top: .45rem;
  border-radius: 50%;
  background: var(--bronze);
  flex: none;
}

.hero-card__label {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: .2rem;
}

.hero-card__name {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  line-height: 1.25;
}

.hero-card__price {
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin-top: .3rem;
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Animacje wejścia hero — odpalają się raz po załadowaniu */
.anim {
  opacity: 0;
  animation: fadeUp 1s var(--ease-out) forwards;
}

.anim--1 { animation-delay: .1s; }
.anim--2 { animation-delay: .22s; }
.anim--3 { animation-delay: .34s; }
.anim--4 { animation-delay: .46s; }
.anim--5 { animation-delay: .58s; }

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   07. MARQUEE — przewijana linia editorialna
   ============================================================================ */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--hairline-soft);
  padding-block: 1.05rem;
  user-select: none;
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  width: max-content;
  animation: marquee 36s linear infinite;
}

.marquee__track span {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-style: italic;
  letter-spacing: .04em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.marquee__sep {
  color: var(--bronze);
  font-size: .8rem;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ============================================================================
   08. BRAND STORY
   ============================================================================ */
.story {
  background: var(--bg);
}

.story-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.story-visual figure {
  position: relative;
}

/* Rama + przesunięcie wizualu story */
.story-visual figure::after {
  content: "";
  position: absolute;
  inset: auto -1.4rem -1.4rem auto;
  width: 62%;
  height: 62%;
  border: 1px solid var(--hairline);
  pointer-events: none;
}

.story-visual img {
  width: 100%;
  height: auto;
}

.story-visual__caption {
  margin-top: 1.4rem;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Kolumna treści */
.story-content > p:not(.eyebrow):not(.lead) {
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: 1.4rem;
}

.story-content .lead {
  margin-bottom: 1.6rem;
}

/* Statystyki — dwie kolumny, duże serifowe liczby */
.story-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.4rem 2rem;
  margin-top: 3rem;
  padding-top: 2.6rem;
  border-top: 1px solid var(--hairline);
}

.stat__value {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 4.5vw, 3.6rem);
  line-height: 1;
  font-weight: 500;
}

.stat__value span {
  font-size: .55em;
  color: var(--bronze);
}

.stat__label {
  margin-top: .55rem;
  font-size: .82rem;
  letter-spacing: .05em;
  color: var(--ink-soft);
}

/* ============================================================================
   09. PRODUKTY
   ============================================================================ */
.products {
  background: var(--bg-alt);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2.8rem, 6vw, 4.5rem);
}

.section-head__note {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: right;
}

/* Siatka produktów — karty renderowane z js/products.js */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.6rem);
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
}

/* Zdjęcie produktu */
.product-card__media {
  position: relative;
  aspect-ratio: 4 / 4.6;
  overflow: hidden;
  background: var(--bg-alt);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}

.product-card:hover .product-card__media img {
  transform: scale(1.045);
}

/* Plakietka (Bestseller / Zestaw) */
.product-card__badge {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 1;
  padding: .4rem .9rem;
  background: var(--ink);
  color: var(--bg);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Treść karty */
.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem 1.5rem 1.6rem;
}

.product-card__category {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: .5rem;
}

.product-card__name {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: .5rem;
}

.product-card__desc {
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 1.2rem;
}

.product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline-soft);
}

.product-card__price {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .03em;
}

/* Przycisk „dodaj do koszyka” — wersja demo; przy WooCommerce
   zastąpi go natywny przycisk sklepu */
.btn-add {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--hairline);
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}

.btn-add::before {
  content: "+";
  font-size: 1rem;
  line-height: 1;
  color: var(--bronze);
  transition: transform .3s var(--ease-out);
}

.btn-add:hover {
  color: var(--bronze);
  border-color: var(--bronze);
}

.btn-add:hover::before {
  transform: rotate(90deg);
}

/* ============================================================================
   10. WYRÓŻNIKI
   ============================================================================ */
.values {
  background: var(--bg);
}

.values-head {
  max-width: 46ch;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.6rem);
}

.value {
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
  transition: border-color .4s var(--ease-out);
}

.value:hover {
  border-color: var(--bronze);
}

.value__index {
  font-family: var(--font-serif);
  font-size: .95rem;
  font-style: italic;
  color: var(--bronze);
  margin-bottom: 1.1rem;
}

.value__title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: .8rem;
}

.value__text {
  font-size: .88rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ============================================================================
   11. SEKCJA EDITORIALNA
   ============================================================================ */
.editorial {
  background: var(--bg);
  padding-top: 0;
}

.editorial-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  margin-bottom: clamp(4rem, 8vw, 7rem);
}

.editorial-figure {
  position: relative;
}

/* Ciemna rama w tle dużego zdjęcia */
.editorial-figure::before {
  content: "";
  position: absolute;
  inset: -1.4rem auto auto -1.4rem;
  width: 58%;
  height: 58%;
  border: 1px solid var(--hairline);
  pointer-events: none;
}

.editorial-figure img {
  width: 100%;
  height: auto;
}

.editorial-content .lead {
  margin-bottom: 1.6rem;
}

.editorial-content > p:not(.eyebrow):not(.lead) {
  color: var(--ink-soft);
  max-width: 52ch;
}

/* Duży cytat — samodzielny akcent typograficzny */
.quote {
  position: relative;
  max-width: 62rem;
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.quote::before,
.quote::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 3.4rem;
  height: 1px;
  background: var(--bronze);
}

.quote::before { top: 0; }
.quote::after  { bottom: 0; }

.quote p {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
}

.quote__author {
  margin-top: 2rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.quote__line {
  width: 1.8rem;
  height: 1px;
  background: var(--bronze);
}

/* ============================================================================
   12. NEWSLETTER
   ============================================================================ */
.newsletter {
  background: var(--bg-alt);
}

.newsletter-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.newsletter-figure {
  position: relative;
}

/* Rama wokół mniejszego wizualu newslettera */
.newsletter-figure::after {
  content: "";
  position: absolute;
  inset: auto auto -1.3rem 1.3rem;
  width: 55%;
  height: 55%;
  border: 1px solid var(--hairline);
  pointer-events: none;
}

.newsletter-figure img {
  width: 100%;
  height: auto;
}

.newsletter-text {
  color: var(--ink-soft);
  max-width: 48ch;
  margin-bottom: 2.2rem;
}

/* Formularz */
.newsletter-form__row {
  display: flex;
  gap: .8rem;
  max-width: 30rem;
}

.newsletter-form__input {
  flex: 1;
  min-width: 0;
  padding: 1.05rem 1.3rem;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}

.newsletter-form__input::placeholder {
  color: rgba(87, 80, 74, .6);
}

.newsletter-form__input:focus {
  outline: none;
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(156, 123, 82, .16);
}

/* Stan błędu */
.newsletter-form__input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(164, 69, 44, .12);
}

.newsletter-form__error {
  min-height: 1.4em;
  margin-top: .6rem;
  font-size: .8rem;
  color: var(--error);
}

/* Zgoda RODO */
.newsletter-form__consent {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  max-width: 30rem;
  margin-top: .4rem;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--ink-soft);
  cursor: pointer;
}

.newsletter-form__consent input {
  margin-top: .28rem;
  accent-color: var(--bronze);
  flex: none;
}

.newsletter-form__consent a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.newsletter-form__consent a:hover {
  color: var(--bronze);
}

/* Komunikat sukcesu */
.newsletter-success {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  max-width: 30rem;
  padding: 1.4rem 1.6rem;
  background: var(--surface);
  border-left: 2px solid var(--bronze);
}

.newsletter-success__icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border-radius: 50%;
  background: var(--bronze);
  color: var(--bg);
}

.newsletter-success__title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: .25rem;
}

.newsletter-success__text {
  font-size: .86rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ============================================================================
   13. FOOTER
   ============================================================================ */
.site-footer {
  background: var(--ink);
  color: var(--bg);
  padding-top: clamp(4rem, 8vw, 6rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.footer-logo {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: .14em;
  margin-bottom: 1.2rem;
}

.footer-logo span {
  color: var(--bronze-soft);
}

.footer-tagline {
  font-size: .92rem;
  line-height: 1.7;
  color: rgba(247, 244, 239, .66);
  margin-bottom: 1.8rem;
}

.footer-social {
  display: flex;
  gap: 1.6rem;
}

.footer-social a {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, .66);
  padding-bottom: .25rem;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}

.footer-social a:hover {
  color: var(--bg);
  border-color: var(--bronze-soft);
}

.footer-col__title {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bronze-soft);
  margin-bottom: 1.4rem;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.footer-col a,
.footer-col li {
  font-size: .9rem;
  color: rgba(247, 244, 239, .72);
  transition: color .3s var(--ease-out);
}

.footer-col a:hover {
  color: var(--bg);
}

.footer-contact__note {
  margin-top: 1.2rem;
  font-size: .76rem;
  color: rgba(247, 244, 239, .45);
}

/* Dolna belka */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--hairline-dark);
  font-size: .78rem;
  color: rgba(247, 244, 239, .5);
}

.footer-legal {
  display: flex;
  gap: 1.8rem;
}

.footer-legal a {
  transition: color .3s var(--ease-out);
}

.footer-legal a:hover {
  color: var(--bg);
}

/* ============================================================================
   14. TOAST — komunikat po akcji (np. dodanie do koszyka)
   ============================================================================ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 150;
  transform: translate(-50%, 140%);
  max-width: min(92vw, 26rem);
  padding: .95rem 1.5rem;
  background: var(--ink);
  color: var(--bg);
  font-size: .86rem;
  line-height: 1.5;
  text-align: center;
  box-shadow: var(--shadow-float);
  transition: transform .5s var(--ease-out);
}

.toast.is-visible {
  transform: translate(-50%, 0);
}

/* ============================================================================
   15. ANIMACJE REVEAL — fade/slide przy przewijaniu
   Obserwator w main.js dodaje klasę .is-visible.
   ============================================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .9s var(--ease-out),
    transform .9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

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

/* Opóźnienia kaskadowe w gridach */
.product-card:nth-child(2),
.values-grid .value:nth-child(2) { --reveal-delay: .1s; }
.product-card:nth-child(3),
.values-grid .value:nth-child(3) { --reveal-delay: .2s; }
.values-grid .value:nth-child(4)  { --reveal-delay: .3s; }

/* ============================================================================
   16. RESPONSYWNOŚĆ
   ============================================================================ */

/* Laptop / tablet poziomy */
@media (max-width: 1100px) {
  :root {
    --header-h: 76px;
  }

  .nav {
    gap: 1.6rem;
  }

  .hero-grid {
    grid-template-columns: 1fr 1fr;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet */
@media (max-width: 960px) {
  .nav,
  .header-cta {
    display: none;
  }

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

  .header-inner {
    gap: 1rem;
  }

  /* Hero układa się pionowo — wizual trafia pod treść */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .hero-content {
    max-width: 34rem;
  }

  .hero-visual {
    max-width: 30rem;
    margin-inline: auto;
    width: 100%;
  }

  .hero-card {
    left: 0;
  }

  .story-grid,
  .editorial-grid,
  .newsletter-grid {
    grid-template-columns: 1fr;
  }

  .story-visual,
  .newsletter-figure {
    max-width: 26rem;
  }

  /* Wizual story pod treścią — porządek: najpierw tekst */
  .story .story-visual {
    order: 2;
  }

  .story .story-content {
    order: 1;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Telefon poziomy / większy telefon */
@media (max-width: 640px) {
  :root {
    --container: min(100% - 1.6rem, 1240px);
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }

  .section-head__note {
    text-align: left;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-legal {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .newsletter-form__row {
    flex-direction: column;
    gap: .7rem;
  }

  .newsletter-form__row .btn {
    width: 100%;
  }

  /* Pływająca karta hero na małych ekranach */
  .hero-card {
    position: static;
    margin-top: 1.6rem;
    box-shadow: none;
    border: 1px solid var(--hairline-soft);
  }

  .hero-visual__media::before {
    inset: .9rem -.9rem -.9rem .9rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .story-stats {
    gap: 1.8rem 1.2rem;
  }

  .quote__author {
    flex-wrap: wrap;
  }
}

/* ============================================================================
   17. PREFERS-REDUCED-MOTION
   Wyłączamy wszystkie animacje i płynne przewijanie dla osób,
   które preferują ograniczenie ruchu.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .anim {
    opacity: 1;
  }

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