/* ==========================================================================
   BigFoto – reset, typografia, siatka, utility
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-3); line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}
body.has-drawer { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--accent-soft); color: var(--text); }
hr { border: 0; border-top: 1px solid var(--border); margin: 0; }
strong, b { font-weight: 600; }
small { font-size: var(--fs-1); }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 800; line-height: 1.05; letter-spacing: 0; text-wrap: balance; }
h1, h2 { text-transform: uppercase; letter-spacing: .005em; }
h3, h4 { font-weight: 700; line-height: 1.15; }
h1 { font-size: var(--fs-8); }
h2 { font-size: var(--fs-7); }
h3 { font-size: var(--fs-6); }
h4 { font-size: var(--fs-5); letter-spacing: -0.005em; }
.display { font-family: var(--font-display); font-weight: 800; letter-spacing: .005em; line-height: 1; text-transform: uppercase; }
.lead { font-size: var(--fs-4); line-height: 1.55; color: var(--text-muted); max-width: 60ch; text-wrap: pretty; }
.mono { font-family: var(--font-mono); font-size: var(--fs-0); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.kicker { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--cta); color: var(--cta-contrast); font-family: var(--font-body); font-size: var(--fs-0); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; box-shadow: var(--sticker-sm); transform: rotate(-1.5deg); transform-origin: left center; align-self: flex-start; }
.kicker--flat { transform: none; box-shadow: none; }
.kicker--soft { background: var(--brand-soft); color: var(--brand); box-shadow: none; transform: none; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.tnum { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --- siatka i kontenery --- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--wide { width: min(100% - 2 * var(--gutter), 1440px); margin-inline: auto; }
.grid { display: grid; gap: var(--gutter); }
.grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-12 { grid-column: span 12; }
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--stack-gap, var(--space-4)); }
.row { display: flex; align-items: center; gap: var(--row-gap, var(--space-3)); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--tight { padding-block: var(--space-8); }
.section--alt { background: var(--bg-alt); }
.section--surface { background: var(--surface); }
.section__head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; }
.section__head h2 { max-width: 24ch; }
.section__head .stack { --stack-gap: var(--space-3); }
.section__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); border: 2px solid var(--border-strong); font-weight: 600; font-size: var(--fs-2); color: var(--text); white-space: nowrap; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.section__link:hover { border-color: var(--text); color: var(--text); }
.section__link .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.section__link:hover .icon { transform: translateX(3px); }
.shelf { border-top: 1px solid var(--border); padding-top: var(--space-4); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.shelf__label { font-family: var(--font-mono); font-size: var(--fs-0); text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); }

/* --- ikony --- */
.icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; } .icon--lg { width: 24px; height: 24px; } .icon--xl { width: 32px; height: 32px; stroke-width: 1.5; }
.icon--fill { fill: currentColor; }

/* --- pasery (crop marks) – motyw systemowy --- */
.crop { position: relative; }
.crop::before, .crop::after, .crop > .crop-b::before, .crop > .crop-b::after {
  content: ""; position: absolute; width: 12px; height: 12px; border-color: var(--crop-color, var(--text)); border-style: solid; pointer-events: none; opacity: var(--crop-opacity, 1); transition: opacity var(--dur) var(--ease);
}
.crop::before { top: -1px; left: -1px; border-width: 1.5px 0 0 1.5px; }
.crop::after { top: -1px; right: -1px; border-width: 1.5px 1.5px 0 0; }
.crop > .crop-b::before { bottom: -1px; left: -1px; border-width: 0 0 1.5px 1.5px; }
.crop > .crop-b::after { bottom: -1px; right: -1px; border-width: 0 1.5px 1.5px 0; }
.crop > .crop-b { position: absolute; inset: 0; pointer-events: none; }

/* --- reveal --- */
.reveal { opacity: 1; transform: none; }
/* Ukrywamy do animacji TYLKO gdy JS wystartował (klasa na <html> od app.js).
   Bez tego wystarczy zablokowany albo wolno wczytany skrypt, żeby 26 sekcji
   strony głównej zostało niewidocznych — w sklepie to nie do przyjęcia. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal { opacity: .001; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
  .js-reveal .reveal.is-in { opacity: 1; transform: none; }
  .js-reveal .reveal[data-delay="1"] { transition-delay: .08s; } .js-reveal .reveal[data-delay="2"] { transition-delay: .16s; } .js-reveal .reveal[data-delay="3"] { transition-delay: .24s; } .js-reveal .reveal[data-delay="4"] { transition-delay: .32s; }
}

/* --- responsywność siatki --- */
@media (max-width: 1024px) {
  :root { --fs-8: 2.5rem; --fs-7: 2rem; }
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; }
  .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .section { padding-block: var(--space-8); }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; --fs-8: 2rem; --fs-7: 1.75rem; --fs-6: 1.375rem; --header-h: 64px; }
  .section { padding-block: var(--space-7); }
  .section__head { margin-bottom: var(--space-5); }
}

/* --- pasy kolorystyczne, fale, konfetti (motyw „naklejkowy”) --- */
.band { position: relative; background: var(--brand); color: var(--brand-contrast); }
.band--cta { background: var(--cta); color: var(--cta-contrast); }
.band--soft { background: var(--brand-soft); color: var(--text); }
.band--alt { background: var(--bg-alt); color: var(--text); }
.band--ink { background: var(--footer-bg); color: var(--footer-text); }
.wave-bottom { position: relative; }
.wave-bottom::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 42px; background: inherit; z-index: 3; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 42' preserveAspectRatio='none'><path d='M0 0h160v6c-20 0-30 24-60 24S60 6 40 6 10 30 0 30z'/></svg>") repeat-x left top / 160px 42px; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 42' preserveAspectRatio='none'><path d='M0 0h160v6c-20 0-30 24-60 24S60 6 40 6 10 30 0 30z'/></svg>") repeat-x left top / 160px 42px; }
.wave-bottom + * { padding-top: calc(var(--space-7) + 42px); }
.wave-top { position: relative; }
.wave-top::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 42px; background: inherit; z-index: 3; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 42' preserveAspectRatio='none'><path d='M0 42h160v-6c-20 0-30-24-60-24S60 36 40 36 10 12 0 12z'/></svg>") repeat-x left bottom / 160px 42px; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 42' preserveAspectRatio='none'><path d='M0 42h160v-6c-20 0-30-24-60-24S60 36 40 36 10 12 0 12z'/></svg>") repeat-x left bottom / 160px 42px; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.confetti span { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--cta); opacity: .9; }
.confetti span:nth-child(2n) { background: var(--accent); width: 8px; height: 8px; }
.confetti span:nth-child(3n) { background: var(--mint); width: 12px; height: 12px; border-radius: 3px; transform: rotate(20deg); }
.confetti span:nth-child(5n) { background: #fff; opacity: .6; width: 6px; height: 6px; }
.sticker { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--surface); color: var(--text); border: 2px solid var(--ink); box-shadow: var(--sticker-sm); font-weight: 700; font-size: var(--fs-1); transform: rotate(-2deg); }
.accent-word { color: var(--cta); }

/* Tekst wyłącznie dla czytników ekranu (WordPress/WooCommerce używają tej
   klasy np. przy „Wymagane” obok gwiazdki). Regułę dostarczają zwykle arkusze
   Woo — wyłączyliśmy je, więc bez tego napis był widoczny w formularzach. */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.screen-reader-text:focus { position: static !important; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; white-space: normal; }