/*
Theme Name: VIDEOCADE
Theme URI: https://videocade.eu/
Author: LTEK Labs
Description: Motyw sklepu VIDEOCADE. Wygląd przeniesiony 1:1 ze statycznej wersji
  strony (Next.js): te same tokeny marki, ta sama typografia i te same komponenty.
  Obsługuje WooCommerce własnymi szablonami, żeby sklep nie rozjechał się z resztą.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: proprietary
Text Domain: videocade
*/

/* ---------------------------------------------------------------------------
   Nunito — font zmienny (200–1000), hostowany u nas.
   Dwa pliki, nie osiem: Google serwuje jeden plik na cały zakres grubości,
   podzielony wyłącznie po zakresie znaków. Oryginalny landing deklarował je
   czterokrotnie (400/700/800/900) wskazując za każdym razem ten sam plik.
   Self-hosting jest tu wymogiem, nie optymalizacją: docelowy hosting Apache
   ma działać bez żadnych zapytań do zewnętrznych domen.
   --------------------------------------------------------------------------- */
@font-face{
  font-family:'Nunito';
  font-style:normal;
  font-weight:200 1000;
  font-display:swap;
  src:url('assets/fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Nunito';
  font-style:normal;
  font-weight:200 1000;
  font-display:swap;
  src:url('assets/fonts/nunito-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===========================================================================
   VIDEOCADE — system designu
   ---------------------------------------------------------------------------
   Tokeny i komponenty przeniesione 1:1 z landinga iamats.com/videocade
   (paleta, typografia Nunito, przyciski z twardym cieniem, tekstura hatch).
   Rozszerzenia dotyczą wyłącznie warstwy sklepowej, której landing nie miał.
   =========================================================================== */

:root{
  /* --- paleta marki (wartości oryginalne, nie zaokrąglane) --- */
  --cream:       #F1EAD6;
  --beige:       #C9C3B2;
  --dark:        #141414;
  --mint:        #00FFBD;
  --green:       #0E490F;
  --green-2:     #2C6B2F;
  --yellow:      #FFD900;
  --lime:        #A8C200;
  --ink:         #17140F;
  --blue:        #4CC3F0;
  --blue-dark:   #2FB3E6;

  /* --- odcienie pochodne (z oryginalnego arkusza) --- */
  --muted:       #3a382f;   /* akapity na kremowym */
  --muted-2:     #6a6656;   /* podpisy, stany nieaktywne */
  --muted-dark:  #cfc9b8;   /* akapity na ciemnym */
  --rule-dark:   #3a3a38;   /* linie na ciemnym */
  --rule-dark-2: #4a4a47;
  --rule-light:  #a9a291;   /* obrys "coming soon" */

  --radius:      6px;
  --shadow-btn:  4px 4px 0 rgba(0,0,0,0.55);
  --wrap:        1280px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:'Nunito', system-ui, -apple-system, "Segoe UI", sans-serif;
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* height:auto jest OBOWIĄZKOWE odkąd obrazki mają atrybuty width/height —
   bez tego atrybut height działa jak presentational hint i rozciąga obrazek */
img{ max-width:100%; display:block; height:auto; }

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

/* widoczny focus — klawiatura musi wiedzieć, gdzie stoi (WCAG 2.2) */
:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:2px;
}
.on-dark :focus-visible, .made :focus-visible, .gallery :focus-visible{
  outline-color:var(--mint);
}

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* przeskok do treści — pierwszy tabulator na stronie */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--cream);
  padding:12px 20px; border-radius:0 0 var(--radius) 0; font-weight:800;
}
.skip-link:focus{ left:0; }

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 40px;
}

/* --------------------------------------------------------------------------
   tekstura ukośnych prążków — odtworzona w CSS, zero obrazków
   -------------------------------------------------------------------------- */
.hatch{ position:relative; }
.hatch::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    -55deg,
    rgba(255,255,255,0.09) 0px,
    rgba(255,255,255,0.09) 2px,
    transparent 2px,
    transparent 16px
  );
  pointer-events:none;
}
.hatch.on-dark::before{
  background-image:repeating-linear-gradient(
    -55deg,
    rgba(255,255,255,0.06) 0px,
    rgba(255,255,255,0.06) 2px,
    transparent 2px,
    transparent 16px
  );
}

/* --------------------------------------------------------------------------
   przyciski
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 28px;
  border-radius:var(--radius);
  font-weight:700;
  font-size:16px;
  font-family:inherit;
  box-shadow:var(--shadow-btn);
  border:2px solid var(--ink);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 rgba(0,0,0,0.55); }
.btn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(0,0,0,0.55); }

.btn-dark{  background:var(--ink);   color:var(--cream); }
.btn-light{ background:var(--cream); color:var(--ink);   }
/* główne CTA zakupowe — jedyny niebieski akcent na stronie */
.btn-buy{   background:var(--blue);  color:var(--ink);   }
.btn-buy:hover{ background:var(--blue-dark); }

/* wariant dla gier jeszcze niedostępnych — nieklikalny */
.btn-soon{
  background:transparent;
  color:var(--muted-2);
  border:2px dashed var(--rule-light);
  box-shadow:none;
  cursor:default;
}
.btn-soon:hover{ transform:none; box-shadow:none; }

.btn-sm{ padding:12px 26px; font-size:15px; }

.btn-row{ display:flex; gap:16px; flex-wrap:wrap; }

/* --------------------------------------------------------------------------
   nagłówek serwisu
   -------------------------------------------------------------------------- */
header.site{
  background:var(--beige);
  padding:20px 0;
  position:relative;
  z-index:5;
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  position:relative;
  z-index:1;
}
.brand{ display:flex; align-items:center; gap:16px; }
.brand-badge{
  background:var(--mint);
  padding:14px 22px;
  border-radius:var(--radius);
  display:flex;
  align-items:center;
}
.brand-badge img{ height:22px; width:auto; }
.ltek-logo{ height:38px; width:auto; }

.site-nav{
  display:flex; align-items:center; gap:28px;
  font-weight:800; font-size:15px;
}
.site-nav a{ padding:4px 0; border-bottom:2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"]{ border-bottom-color:var(--green); }

/* CTA w nagłówku to ten sam przycisk co pod konsolami, tylko niższy,
   żeby nie rozpychał paska ponad wysokość logo */
.nav-inner .btn{ padding:12px 28px; white-space:nowrap; }

/* Dwa przyciski po prawej w nagłówku: Shop i Cart. */
.nav-actions{ display:flex; align-items:center; gap:10px; }
.btn-cart .cart-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px; margin-left:4px;
  border-radius:10px; background:var(--ink); color:var(--cream);
  font-size:12px; font-weight:900; line-height:1;
}

.nav-toggle{ display:none; }

/* --------------------------------------------------------------------------
   eyebrow — separator z etykietą
   -------------------------------------------------------------------------- */
.eyebrow{
  display:flex;
  align-items:center;
  gap:24px;
  justify-content:center;
  margin:0 auto 56px;
  max-width:900px;
}
.eyebrow .line{ flex:1; height:1px; background:var(--green); }
.eyebrow .label{
  font-weight:800;
  font-size:15px;
  letter-spacing:2px;
  text-transform:lowercase;
  white-space:nowrap;
  color:var(--ink);
}
.eyebrow .label b{ color:var(--green); font-weight:900; text-transform:uppercase; }
.eyebrow.on-dark .line{ background:var(--green-2); }
.eyebrow.on-dark .label{ color:var(--cream); }
.eyebrow.on-dark .label b{ color:var(--green-2); }

.kicker{
  font-weight:900;
  font-size:14px;
  letter-spacing:1px;
  color:var(--yellow);
  -webkit-text-stroke:0.3px var(--ink);
  margin-bottom:14px;
  text-transform:lowercase;
}

/* --------------------------------------------------------------------------
   stopka
   -------------------------------------------------------------------------- */
footer.site{
  background:var(--dark);
  color:var(--muted-dark);
  padding:70px 0 40px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  position:relative; z-index:1;
}
.footer-grid h3{
  font-size:13px; font-weight:900; letter-spacing:2px; text-transform:uppercase;
  color:var(--cream); margin-bottom:18px;
}
.footer-grid ul{ list-style:none; display:grid; gap:10px; font-size:15px; }
.footer-grid a:hover{ color:var(--mint); }
.footer-brand img{ height:26px; width:auto; margin-bottom:18px; }
.footer-brand p{ font-size:15px; line-height:1.6; max-width:320px; }
.footer-bottom{
  margin-top:56px; padding-top:24px;
  border-top:1px solid var(--rule-dark);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:14px; color:var(--muted-2);
  position:relative; z-index:1;
}

/* --------------------------------------------------------------------------
   wspólne bloki sekcji
   -------------------------------------------------------------------------- */
.section{ padding:90px 0; }
.section-dark{ background:var(--dark); color:var(--cream); }
.section-dark p{ color:var(--muted-dark); }

.page-head{ padding:70px 0 50px; background:var(--beige); }
.page-head h1{ font-size:52px; font-weight:900; line-height:1.05; letter-spacing:-1px; }
.page-head p{ font-size:18px; line-height:1.6; max-width:620px; margin-top:20px; color:var(--muted); }
.page-head .inner{ position:relative; z-index:1; }

.breadcrumb{
  font-size:14px; font-weight:700; color:var(--muted-2);
  margin-bottom:18px; display:flex; gap:8px; flex-wrap:wrap;
}
.breadcrumb a:hover{ color:var(--green); }

/* --------------------------------------------------------------------------
   prosta treść tekstowa (regulaminy, FAQ, historia marki)
   -------------------------------------------------------------------------- */
.prose{ max-width:760px; }
.prose h2{ font-size:28px; font-weight:900; line-height:1.25; margin:44px 0 14px; }
.prose h3{ font-size:20px; font-weight:800; margin:28px 0 10px; }
.prose p, .prose li{ font-size:17px; line-height:1.7; color:var(--muted); }
.prose p{ margin-bottom:16px; }
.prose ul, .prose ol{ margin:0 0 18px 22px; display:grid; gap:8px; }
.prose strong{ color:var(--ink); font-weight:800; }
.prose a{ color:var(--green); font-weight:700; text-decoration:underline; }
.prose > *:first-child{ margin-top:0; }
.prose .lead{ font-size:19px; color:var(--ink); font-weight:700; }

/* --------------------------------------------------------------------------
   responsywność wspólna
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .wrap{ padding:0 24px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .page-head h1{ font-size:38px; }
  .site-nav{ gap:18px; font-size:14px; }
}
@media (max-width:720px){
  header.site .site-nav{
    order:3; width:100%; justify-content:flex-start; gap:16px; flex-wrap:wrap;
    padding-top:14px; border-top:1px solid rgba(23,20,15,0.15);
  }
  .nav-inner{ flex-wrap:wrap; }
  .ltek-logo{ height:30px; }
}
@media (max-width:560px){
  .page-head h1{ font-size:30px; }
  .footer-grid{ grid-template-columns:1fr; }
  .nav-inner .btn{ padding:10px 20px; font-size:15px; }
  .section{ padding:64px 0; }
}

/* --------------------------------------------------------------------------
   szacunek dla ustawień systemowych — cała animacja jest opcjonalna
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ===========================================================================
   STRONA GŁÓWNA — sekcje przeniesione z landinga
   =========================================================================== */

.hero{ background:var(--beige); padding:70px 0 0 0; }
.hero-inner{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:40px;
  align-items:center;
  position:relative;
  z-index:1;
}
/* h1 ma dwie warstwy: duży lead plakatowy + mniejsza linia niosąca frazę
   produktową. Cały tekst zostaje w h1, więc dla botów to jeden nagłówek. */
.hero h1{ font-weight:900; letter-spacing:-1px; margin-bottom:34px; }
.h1-lead{ display:block; font-size:64px; line-height:1.05; }
.h1-sub{
  display:block; margin-top:22px;
  font-size:26px; font-weight:800; line-height:1.3;
  letter-spacing:0; max-width:480px;
}
.hero p{ font-size:18px; line-height:1.6; max-width:520px; margin-bottom:36px; }
.hero p strong{ font-weight:800; }

.hero-console{ display:flex; justify-content:center; padding:0 20px; position:relative; }
.hero-console .console-shot{ width:100%; max-width:340px; }
.hero-console img{
  width:100%;
  /* cień MUSI zostać na <img>, nie na opakowaniu — inaczej dostałby go też canvas */
  filter:drop-shadow(10px 14px 18px rgba(0,0,0,0.30));
}
.hero-spacer{ height:40px; }

/* --- filozofia --- */
.philosophy{ padding:90px 0; text-align:center; }
.philosophy h2{
  font-size:38px; font-weight:800; line-height:1.3;
  max-width:920px; margin:0 auto 30px;
}
.philosophy h2 .accent{ color:var(--green); }
.philosophy > .wrap > p{
  font-size:18px; line-height:1.7; max-width:640px;
  margin:0 auto 64px; color:var(--muted);
}
.benefits{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:32px; max-width:900px; margin:0 auto; list-style:none;
}
.benefit img{ height:64px; width:auto; margin:0 auto 16px; }
.benefit p{
  font-size:15px; font-weight:700; line-height:1.4;
  margin:0; color:var(--ink);
}

/* --- zapowiedź specyfikacji --- */
.spec-intro{ padding:0 0 70px; }
.spec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.spec-grid h2{ font-size:38px; font-weight:800; line-height:1.2; }
.spec-grid p{ font-size:17px; line-height:1.6; text-align:right; color:var(--muted); }

/* --- jak to powstaje (ciemna) --- */
.made{ background:var(--dark); color:var(--cream); padding:90px 0; }
.made-top{
  display:grid; grid-template-columns:0.9fr 1.1fr;
  gap:24px 60px; align-items:start; margin-bottom:20px;
  position:relative; z-index:1;
}
/* zdjęcie zajmuje oba wiersze, inaczej wysoki render rozpycha wiersz z nagłówkiem */
.made-top > img{
  grid-column:1; grid-row:1 / span 2;
  align-self:center; max-width:340px; margin:0 auto;
  filter:drop-shadow(0 0 32px rgba(0,255,189,0.10));
}
.made-intro{ grid-column:2; grid-row:1; }
.made h2{ font-size:36px; font-weight:800; line-height:1.25; margin:18px 0 24px; }
.made-top p{ font-size:17px; line-height:1.6; color:var(--muted-dark); max-width:520px; }
.made-list{ grid-column:2; grid-row:2; }
.made-item{
  padding:26px 0; border-top:1px solid var(--rule-dark);
  display:grid; grid-template-columns:90px 1fr; gap:20px;
}
.made-item:last-child{ border-bottom:1px solid var(--rule-dark); }
.made-num{ font-weight:900; font-size:24px; color:var(--yellow); letter-spacing:1px; }
.made-item h3{ font-size:20px; font-weight:800; margin-bottom:8px; }
.made-item p{ font-size:15px; line-height:1.6; color:var(--muted-dark); }

/* --- pasek z logotypem --- */
.wordmark-strip{ background:var(--dark); padding:0 0 90px; }
.wordmark-strip .eyebrow-inline{
  display:flex; align-items:center; gap:28px;
  max-width:900px; margin:0 auto; position:relative; z-index:1;
}
.wordmark-strip .line{ flex:1; height:1px; background:var(--rule-dark-2); }
.wordmark-strip img{ height:52px; width:auto; flex:none; }

/* --- galeria (wycinki na przezroczystości) --- */
.gallery{ background:var(--dark); padding:0 24px 90px; }
.gallery-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:40px; max-width:1060px; margin:0 auto; align-items:center;
  /* podnosi zdjęcia ponad warstwę .hatch::before, żeby paski szły za nimi */
  position:relative; z-index:1;
}
.gallery-grid img{
  width:100%; max-width:460px; aspect-ratio:1 / 1;
  object-fit:cover; margin:0 auto; display:block;
  filter:drop-shadow(0 0 40px rgba(255,255,255,0.07));
}
/* kadr 1:1 obcina wyłącznie przezroczysty margines — wartości policzone
   z kanału alpha oryginalnych plików; przy podmianie trzeba je przeliczyć */
.gallery-grid img:nth-child(1){ object-position:50% 45%; }
.gallery-grid img:nth-child(2){ object-position:50% 54%; }

@media (max-width:980px){
  .h1-lead{ font-size:42px; }
  .h1-sub{ font-size:21px; margin-top:16px; }
  .hero-inner{ grid-template-columns:1fr; }
  .hero-console{ order:-1; }
  .benefits{ grid-template-columns:repeat(2,1fr); }
  .spec-grid{ grid-template-columns:1fr; }
  .spec-grid p{ text-align:left; }
  .made-top{ grid-template-columns:1fr; }
  .made-top > img{ grid-column:1; grid-row:1; }
  .made-intro{ grid-column:1; grid-row:2; }
  .made-list{ grid-column:1; grid-row:3; }
  .gallery-grid{ grid-template-columns:1fr; gap:24px; max-width:420px; }
}
@media (max-width:980px){
  /* na tablecie render idzie na górę (order:-1), więc musi zostawić miejsce
     na nagłówek — pełne 340px zjadałoby cały pierwszy ekran */
  /* Ograniczenie szerokości MUSI siedzieć na .console-shot, nie na <img>.
     Canvas z gameplayem pozycjonuje się procentowo względem opakowania — gdy
     opakowanie jest szersze od obrazka, nakładka wyjeżdża poza ekran konsoli
     (złapane na telefonie 390px: ekran 8x8 rozciągnięty w pas poza obudowę). */
  .hero-console .console-shot{ max-width:250px; }
}
@media (max-width:560px){
  .h1-lead{ font-size:32px; }
  .h1-sub{ font-size:18px; }
  .philosophy h2{ font-size:26px; }
  .benefits{ grid-template-columns:1fr 1fr; gap:24px; }
  .made h2, .spec-grid h2{ font-size:27px; }
  /* Telefon: przy 340px render (1200x2134) ma ~600px wysokości i wypycha H1
     poniżej zgięcia — na screenshocie 390x844 nagłówka nie było widać wcale.
     Zmniejszamy render i skracamy górny odstęp, żeby zdjęcie i nagłówek
     mieściły się razem na pierwszym ekranie. */
  .hero{ padding:32px 0 0; }
  .hero-console{ padding:0; }
  .hero-console .console-shot{ max-width:180px; }
  .hero-inner{ gap:24px; }
  .hero h1{ margin-bottom:22px; }
  .hero p{ font-size:17px; margin-bottom:28px; }
  .hero-spacer{ height:20px; }
}

/* ===========================================================================
   SKLEP — półka z konsolami i karta produktu
   =========================================================================== */

/* --- siatka "pick your console" (współdzielona: home + /consoles) --- */
.showcase{ padding:90px 0 100px; }
.showcase-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:36px 28px; align-items:end;
}
.showcase figure{
  display:flex; flex-direction:column; align-items:center;
  /* obrazek dostaje całą wolną wysokość, więc podpisy i przyciski
     stoją w jednej linii mimo różnej wysokości renderów */
  height:100%; margin:0;
}
.showcase figure .console-shot{
  width:100%; max-width:220px; margin-top:auto;
  transition:transform .25s ease;
}
.showcase figure img{
  width:100%;
  filter:drop-shadow(10px 14px 16px rgba(0,0,0,0.24));
}
/* podnosimy CAŁE opakowanie, nie sam obrazek — inaczej canvas zostałby w miejscu */
.showcase figure a:hover .console-shot{ transform:translateY(-6px); }
.showcase figcaption{ text-align:center; margin-top:22px; }
.showcase figcaption h3{ font-size:18px; font-weight:800; color:var(--ink); }
.showcase figcaption > span{
  display:block; font-size:14px; font-weight:700;
  color:var(--muted-2); margin-top:4px;
}
.showcase .price{
  display:block; font-size:16px; font-weight:900;
  color:var(--ink); margin-top:10px;
}
.showcase .price small{ font-weight:700; color:var(--muted-2); font-size:13px; }
.showcase .btn{ margin-top:18px; }

/* --- karta produktu --- */
.product{ padding:60px 0 90px; }
.product-grid{
  display:grid; grid-template-columns:0.9fr 1.1fr;
  gap:60px; align-items:start;
}
.product-media{
  background:var(--beige);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow-btn);
  padding:40px 20px;
  display:flex; justify-content:center;
  position:relative; overflow:hidden;
}
/* Karta produktu pokazuje front i tył obudowy OBOK SIEBIE.
   Pierwsza wersja układała je w kolumnie — kadr urósł wtedy do 1185 px
   wysokości, czyli na telefonie metr przewijania, zanim widać opis.
   Rząd z zawijaniem skraca go do ~380 px, a trzecie zdjęcie samo przechodzi
   do drugiego rzędu, bez zmiany reguł.
   Nakładka canvas trzyma się ekranu przy każdej szerokości, bo jest
   pozycjonowana procentowo względem .console-shot, a obrazek wypełnia je
   co do piksela (.console-shot img { width:100% }). */
.product-media{
  flex-direction:row; flex-wrap:wrap;
  align-items:flex-start; justify-content:center;
  gap:18px;
}
.product-media .console-shot{
  flex:1 1 0; min-width:0; max-width:300px;
  position:relative; z-index:1;
}
.product-media img{
  width:100%;
  filter:drop-shadow(10px 14px 18px rgba(0,0,0,0.30));
}
.product-info h1{ font-size:44px; font-weight:900; line-height:1.05; letter-spacing:-1px; }
.product-tagline{
  font-size:19px; font-weight:800; color:var(--green);
  margin-top:10px;
}
.product-desc{ font-size:17px; line-height:1.7; color:var(--muted); margin:24px 0; }

.price-row{
  display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  margin:28px 0 8px;
}
.price-now{ font-size:34px; font-weight:900; letter-spacing:-1px; }
.price-note{ font-size:14px; font-weight:700; color:var(--muted-2); }

.stock{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14px; font-weight:800; margin-bottom:26px;
}
.stock::before{
  content:""; width:10px; height:10px; border-radius:50%;
  background:var(--green-2); box-shadow:0 0 0 3px rgba(44,107,47,0.18);
}
.stock.preorder::before{ background:var(--yellow); box-shadow:0 0 0 3px rgba(255,217,0,0.20); }

.spec-list{ list-style:none; margin:36px 0 0; border-top:1px solid rgba(23,20,15,0.15); }
.spec-list > div{
  display:grid; grid-template-columns:190px 1fr; gap:20px;
  padding:14px 0; border-bottom:1px solid rgba(23,20,15,0.15);
  font-size:15px; line-height:1.5;
}
.spec-list .k{ font-weight:800; color:var(--ink); }
.spec-list .v{ color:var(--muted); }

/* --- co jest w pudełku: jedyne miejsce, gdzie gra motyw kartridża --- */
.inbox{
  margin-top:44px; padding:28px;
  background:var(--beige);
  border:2px solid var(--ink); border-radius:var(--radius);
}
.inbox h2{ font-size:19px; font-weight:900; margin-bottom:8px; }
.inbox p{ font-size:15px; line-height:1.6; color:var(--muted); }
.inbox ul{ list-style:none; margin-top:14px; display:grid; gap:8px; }
.inbox li{ font-size:15px; font-weight:700; padding-left:20px; position:relative; }
.inbox li::before{
  content:""; position:absolute; left:0; top:7px;
  width:9px; height:9px; background:var(--green-2); border-radius:2px;
}

/* --- pasek zaufania pod półką --- */
.assurance{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  padding:44px 0 0; margin-top:60px;
  border-top:1px solid rgba(23,20,15,0.15);
}
.assurance h3{ font-size:16px; font-weight:900; margin-bottom:8px; }
.assurance p{ font-size:15px; line-height:1.6; color:var(--muted); }

/* --- powiązane konsole --- */
.related{ padding:0 0 90px; }

@media (max-width:980px){
  .showcase-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 24px; }
  .product-grid{ grid-template-columns:1fr; gap:36px; }
  .product-info h1{ font-size:34px; }
  .assurance{ grid-template-columns:1fr; gap:22px; }
  .spec-list > div{ grid-template-columns:1fr; gap:2px; }
}
@media (max-width:560px){
  .showcase-grid{ grid-template-columns:1fr; gap:56px; }
}

/* ===========================================================================
   EKRAN KONSOLI — animacja gameplayu rysowana NA RENDERZE PRODUKTU
   ---------------------------------------------------------------------------
   Canvas leży na matrycy w miejscu zmierzonym z pliku źródłowego. Pozycja jest
   podana w procentach, więc trzyma się ekranu w każdym rozmiarze renderu.
   =========================================================================== */
.console-shot{
  display:block;
  position:relative;
  width:100%;
  line-height:0;
}
/* Obrazek zawsze wypełnia opakowanie co do piksela — inaczej procentowa
   pozycja canvasu przestaje pokrywać się z matrycą na renderze. */
.console-shot img{ width:100%; max-width:none; }

.console-screen{
  position:absolute;
  display:block;
  pointer-events:none;      /* karta produktu jest linkiem — canvas nie może go zasłaniać */
  image-rendering:auto;
}


/* --- pasek "attract mode": cztery ekrany LED grające same z siebie --- */
.attract{ background:var(--dark); color:var(--cream); padding:80px 0; }
.attract-lead{
  text-align:center; max-width:640px; margin:0 auto 52px;
  position:relative; z-index:1;
}
.attract-lead p{ font-size:17px; line-height:1.7; color:var(--muted-dark); }

/* --- zajawka dziedzictwa marki --- */
.heritage-teaser{ padding:0 0 100px; }
.heritage-inner{
  display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;
  background:var(--beige); border:2px solid var(--ink);
  border-radius:var(--radius); box-shadow:var(--shadow-btn);
  padding:48px; position:relative; overflow:hidden;
}
.heritage-inner h2{ font-size:32px; font-weight:900; line-height:1.2; margin-bottom:18px; }
.heritage-inner p{ font-size:16px; line-height:1.7; color:var(--muted); margin-bottom:14px; }
/* Zdjęcie jest wycinkiem na przezroczystości — w ramce zostawiało szeroki pusty
   margines wokół koła. Kadrujemy 1:1 tak samo jak w galerii: cover obcina sam
   przezroczysty margines, a object-position jest policzony z kanału alpha tego
   pliku (checkers_in_box: koło na y 228-1508). Przy podmianie pliku przeliczyć. */
.heritage-photo{
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:50% 54%;
  filter:drop-shadow(8px 10px 14px rgba(0,0,0,0.22));
}

.heritage-year{
  font-size:13px; font-weight:900; letter-spacing:3px;
  color:var(--green); text-transform:uppercase; margin-bottom:12px;
}

@media (max-width:980px){
  .heritage-inner{ grid-template-columns:1fr; gap:28px; padding:32px; }
}
@media (max-width:560px){
  .heritage-inner h2{ font-size:25px; }
}



/* --- dokumenty prawne --- */
.legal-draft{
  background:var(--yellow);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  padding:16px 20px;
  font-size:15px !important;
  line-height:1.6;
  color:var(--ink) !important;
  margin-bottom:32px;
}
.legal-updated{
  margin-top:44px; padding-top:20px;
  border-top:1px solid rgba(23,20,15,0.15);
  font-size:14px !important; color:var(--muted-2) !important;
}

.shelf-lead{
  text-align:center; max-width:620px; margin:0 auto 52px;
  font-size:17px; line-height:1.7; color:var(--muted);
}

/* ===========================================================================
   TEST IT ONLINE — okno z grywalną konsolą
   =========================================================================== */
.play-overlay{
  position:fixed; inset:0; z-index:50;
  background:rgba(10,9,7,0.82);
  display:flex; align-items:center; justify-content:center;
  padding:24px; overflow:auto;
}
.play-panel{
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:8px 8px 0 rgba(0,0,0,0.55);
  max-width:720px; width:100%;
  padding:22px 26px 26px;
}
.play-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  border-bottom:1px solid rgba(23,20,15,0.15); padding-bottom:14px; margin-bottom:20px;
}
.play-head h2{ font-size:24px; font-weight:900; letter-spacing:-.5px; }
.play-close{
  background:none; border:2px solid var(--ink); border-radius:var(--radius);
  width:38px; height:38px; font-size:16px; font-weight:800; cursor:pointer;
  font-family:inherit; color:var(--ink); line-height:1;
}
.play-close:hover{ background:var(--ink); color:var(--cream); }

.play{ display:grid; grid-template-columns:minmax(0,270px) 1fr; gap:28px; align-items:start; }
.play-console{ position:relative; width:100%; line-height:0; }
.play-console img{ width:100%; height:auto; display:block; }

/* Pola aktywne leżą na przyciskach renderu. Są przezroczyste — obraz konsoli
   jest ich wyglądem — ale to prawdziwe <button>, więc mają fokus i etykietę. */
.play-btn{
  position:absolute; border:0; background:transparent; padding:0; margin:0;
  border-radius:14%; cursor:pointer; touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
.play-btn:active{ background:rgba(255,255,255,0.16); }
.play-btn:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }

.play-slider{
  position:absolute; cursor:ew-resize; touch-action:none; border-radius:10px;
}
.play-slider:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }
.play-knob{
  position:absolute; top:50%; width:14px; height:58%;
  transform:translate(-50%,-50%);
  background:var(--cream); border:2px solid var(--ink); border-radius:4px;
  pointer-events:none;
}

.play-side{ display:flex; flex-direction:column; gap:18px; }
.play-status{ display:flex; flex-wrap:wrap; gap:8px 30px; margin:0; }
.play-status > div{ display:flex; flex-direction:column; gap:2px; }
.play-status dt{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
  font-weight:800;
}
.play-status dd{ margin:0; font-size:19px; font-weight:900; letter-spacing:-.5px;
  font-variant-numeric:tabular-nums; }
.play-hint{ font-size:15px; line-height:1.6; color:var(--muted); }

@media (max-width:760px){
  .play{ grid-template-columns:1fr; gap:20px; }
  .play-console{ max-width:280px; margin:0 auto; }
  .play-panel{ padding:16px 16px 20px; }
}

/* wejście do gry z półki — dyskretne, żeby nie konkurowało z przyciskiem zakupu */
.card-try{
  margin-top:12px; background:none; border:0; padding:4px 2px; cursor:pointer;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12.5px; letter-spacing:.06em; color:var(--green);
  font-weight:700; text-decoration:underline; text-underline-offset:3px;
}
.card-try:hover{ color:var(--ink); }

/* sterowanie — wyróżnione monospacem, bo to instrukcja, nie opis */
.play-controls{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:13px; line-height:1.65; color:var(--ink);
  background:rgba(23,20,15,0.05);
  border-left:3px solid var(--green);
  padding:10px 12px; border-radius:0 4px 4px 0;
}

/* ===========================================================================
   NAKŁADKA WORDPRESS/WOOCOMMERCE
   ---------------------------------------------------------------------------
   Wszystko powyżej jest przeniesione 1:1 ze statycznej wersji strony i ma takie
   zostać. Tutaj i tylko tutaj trafiają różnice wynikające z tego, że znaczniki
   generuje teraz WooCommerce, a nie nasz JSX.
   =========================================================================== */

/* Cena Woo to zagnieżdżone spany (<span class="amount"><span>€</span>89</span>).
   Reguła `.showcase figcaption span{display:block}` z wersji statycznej łapała
   je wszystkie i rozbijała cenę na dwa wiersze — symbol waluty lądował nad
   kwotą. Zawężamy do dzieci bezpośrednich. */
.showcase figcaption > span { display:block; }
.showcase figcaption span span { display:inline; }
.showcase .price .woocommerce-Price-amount { font-weight:900; }
.showcase .price del { opacity:.55; font-weight:700; margin-right:6px; }
.showcase .price ins { text-decoration:none; }

/* --- formularz koszyka w rzędzie przycisków ---------------------------- */
.btn-row form.cart{ margin:0; display:inline-flex; }
.btn-row form.cart .btn{ font-family:inherit; cursor:pointer; }
.price-now .woocommerce-Price-amount{ font-weight:inherit; }
.product-desc p{ margin-bottom:16px; }
.product-desc p:last-child{ margin-bottom:0; }

/* --- komunikaty WooCommerce ------------------------------------------- */
.woocommerce-notices-wrapper:empty{ display:none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  list-style:none; margin:0 0 24px; padding:14px 18px;
  border:2px solid var(--ink); border-radius:var(--radius);
  font-size:15px; line-height:1.55; font-weight:700;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;
}
.woocommerce-message{ background:var(--mint); color:var(--ink); }
.woocommerce-info{ background:var(--beige); color:var(--ink); }
.woocommerce-error{ background:var(--yellow); color:var(--ink); }
.woocommerce-message .button,
.woocommerce-info .button{
  margin-left:auto; background:var(--ink); color:var(--cream);
  padding:8px 18px; border-radius:var(--radius); font-size:14px; font-weight:800;
}

/* --- koszyk i kasa -----------------------------------------------------
   Woo generuje tu własne tabele i formularze. Nie przepisujemy ich szablonów —
   wystarczy ubrać je w te same tokeny, co resztę strony. */
.woo-page{ padding:60px 0 90px; }
.woo-page .wrap > h2{ font-size:24px; font-weight:900; margin:34px 0 16px; }

.woocommerce table.shop_table{
  width:100%; border-collapse:collapse; margin-bottom:28px;
  border:2px solid var(--ink); border-radius:var(--radius); overflow:hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  padding:14px 16px; text-align:left; font-size:15px;
  border-bottom:1px solid rgba(23,20,15,0.15);
}
.woocommerce table.shop_table th{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:800; color:var(--muted-2); background:var(--beige);
}
.woocommerce table.shop_table img{ width:64px; height:auto; }
.woocommerce table.shop_table .product-remove a{
  font-weight:900; text-decoration:none; color:var(--muted-2);
}
.woocommerce table.shop_table .product-remove a:hover{ color:var(--accent,#0E490F); }

.woocommerce .quantity input[type="number"],
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  width:100%; padding:11px 13px; font-family:inherit; font-size:15px;
  border:2px solid var(--ink); border-radius:var(--radius);
  background:var(--cream); color:var(--ink);
}
.woocommerce .quantity input[type="number"]{ width:84px; text-align:center; }
.woocommerce form .form-row{ margin-bottom:16px; }
.woocommerce form .form-row label{
  display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:800; color:var(--muted-2); margin-bottom:6px;
}

/* Wszystkie przyciski Woo dostają wygląd przycisków strony */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 26px; border-radius:var(--radius); border:2px solid var(--ink);
  background:var(--blue); color:var(--ink);
  font-family:inherit; font-size:15px; font-weight:800; cursor:pointer;
  box-shadow:var(--shadow-btn); text-decoration:none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover{ background:var(--blue-dark); }
.woocommerce .cart .button[name="update_cart"]{ background:var(--cream); }

.woocommerce .cart-collaterals{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.woocommerce .cart_totals h2,
.woocommerce-checkout h3{ font-size:20px; font-weight:900; margin-bottom:14px; }

/* ===========================================================================
   KOSZYK NA TELEFONIE — wiersze jako karty, nie tabela
   ---------------------------------------------------------------------------
   Tabela koszyka ma sześć kolumn i przy 390px miała 451px szerokości, czyli
   wychodziła poza ekran. Przeglądarka ratowała się ściskaniem najwęższej
   kolumny — miniatury — do 32px, a obrazek zapadał się do 0x0 i produktu
   w ogóle nie było widać. Zmierzone 09.10.2026.

   Dlatego poniżej 820px wiersz produktu przestaje być wierszem tabeli i staje
   się kartą: miniatura w lewym górnym rogu, obok niej nazwa, cena, ilość
   i suma, krzyżyk w prawym górnym rogu.

   Etykiety („PRICE", „QUANTITY") biorą się z atrybutu `data-title`, który
   WooCommerce sam wstawia w szablonie koszyka — nagłówki kolumn są na
   telefonie ukryte, więc bez nich zostałyby gołe liczby.

   Zakres jest WĄSKI: tylko `tr.cart_item`. Ostatni wiersz tabeli to kupon
   i „Update cart" w jednej komórce `colspan` — gdyby złapać go tą samą regułą,
   rozsypałby się na osobne bloki. */

@media (max-width:820px){
  .woocommerce-cart-form table.shop_table,
  .woocommerce-cart-form table.shop_table tbody{ display:block; border:0; }
  .woocommerce-cart-form table.shop_table tr.cart_item{
    display:block; position:relative;
    border:2px solid var(--ink); border-radius:var(--radius);
    background:var(--beige);
    padding:14px 44px 14px 92px; margin-bottom:14px; min-height:132px;
  }
  .woocommerce-cart-form table.shop_table tr.cart_item td{
    display:block; width:auto; border-bottom:0; padding:3px 0; text-align:left;
  }
  .woocommerce-cart-form table.shop_table tr.cart_item td::before{
    content:attr(data-title); display:block;
    font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    font-weight:800; color:var(--muted-2);
  }
  .woocommerce-cart-form table.shop_table tr.cart_item td.product-thumbnail{
    position:absolute; left:14px; top:14px; width:64px; padding:0;
  }
  .woocommerce-cart-form table.shop_table tr.cart_item td.product-remove{
    position:absolute; right:12px; top:10px; width:auto; padding:0;
  }
  .woocommerce-cart-form table.shop_table tr.cart_item td.product-thumbnail::before,
  .woocommerce-cart-form table.shop_table tr.cart_item td.product-remove::before,
  .woocommerce-cart-form table.shop_table tr.cart_item td.product-name::before{ content:none; }
  .woocommerce-cart-form table.shop_table tr.cart_item td.product-name{
    font-weight:900; font-size:17px; padding-bottom:6px;
  }
  /* Wiersz z kuponem i „Update cart" zostaje zwykłą komórką. */
  .woocommerce-cart-form table.shop_table tr:not(.cart_item) td{ display:block; border-bottom:0; }
  .woocommerce-cart-form table.shop_table tr:not(.cart_item) td::before{ content:none; }
}

@media (max-width:820px){
  .woocommerce .cart-collaterals{ grid-template-columns:1fr; gap:26px; }
  /* TYLKO nagłówki kolumn z thead. Reguła obejmowała wcześniej każdy `th`,
     a WooCommerce trzyma w `th` także ETYKIETY WIERSZY w stopce tabeli
     (Subtotal / Shipment / Total) i w tabeli sum koszyka. Na telefonie
     podsumowanie pokazywało więc gołe kwoty — „€1 / InPost Courier: €5 / €6"
     bez ani jednego słowa, co która liczba znaczy. */
  .woocommerce table.shop_table thead th{ display:none; }
}

/* ===========================================================================
   KASA — dwie kolumny na desktopie, jedna na telefonie
   ---------------------------------------------------------------------------
   Układ jednokolumnowy spychał podsumowanie i pola karty poniżej całego
   formularza adresowego: na desktopie trzeba było przewinąć przez kilkanaście
   pól, żeby zobaczyć, ile się płaci. Teraz kwota i karta stoją obok pól
   i zostają w kadrze (`position:sticky`).

   Kolejność w DOM to express → pola → podsumowanie, więc telefon dostaje
   dokładnie to, co trzeba, bez `order` w CSS. Nie używamy `order` świadomie:
   rozjeżdża kolejność czytania z kolejnością tabulatora.

   Punkt podziału to 1000px, nie 820px jak reszta motywu. Przy 820px prawa
   kolumna schodziłaby do ~330px, a tam wchodzi tabela zamówienia i pola karty
   Stripe'a — robiło się ciasno zanim zrobiło się wąsko.
   =========================================================================== */

.vc-checkout{ display:grid; gap:34px; align-items:start; }

@media (min-width:1000px){
  .vc-checkout{ grid-template-columns:minmax(0,1fr) minmax(330px,400px); gap:52px; }
  /* 24px zapasu, żeby karta nie kleiła się do górnej krawędzi okna. */
  .vc-checkout__review{ position:sticky; top:24px; }
}

/* W kasie billing i shipping idą JEDEN POD DRUGIM — są już w wąskiej kolumnie.
   Dwie kolumny wewnątrz jednej kolumny dawały pola szerokie na 280px. */
.woocommerce-checkout .col2-set{ display:block; }
.woocommerce-checkout .col2-set .col-2{ margin-top:30px; }

/* Imię i nazwisko mieszczą się obok siebie nawet w zwężonej kolumnie.
   Woo nadaje tym polom klasy form-row-first / form-row-last i sam ich nie
   styluje — bez tego wszystko stało w jednej kolumnie aż do stopki. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{
  display:grid; grid-template-columns:1fr 1fr; column-gap:16px;
}
.woocommerce-checkout .form-row-first{ grid-column:1; }
.woocommerce-checkout .form-row-last{ grid-column:2; }
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > p:not(.form-row-first):not(.form-row-last),
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > p:not(.form-row-first):not(.form-row-last){
  grid-column:1 / -1;
}

/* Prawa kolumna jako jedna karta. Tabela ma własną ramkę z reguł wyżej —
   dwie ramki jedna w drugiej wyglądały jak błąd, więc wewnętrzną zdejmujemy. */
.vc-checkout__review #order_review{
  border:2px solid var(--ink); border-radius:var(--radius);
  background:var(--beige); padding:20px; margin-bottom:0;
}
.vc-checkout__review #order_review table.shop_table{
  border:0; border-radius:0; margin-bottom:18px; background:transparent;
}
.vc-checkout__review #order_review table.shop_table th{ background:transparent; }
.vc-checkout__review #order_review table.shop_table th,
.vc-checkout__review #order_review table.shop_table td{ padding:10px 0; }
.vc-checkout__review #order_review table.shop_table tr:last-child th,
.vc-checkout__review #order_review table.shop_table tr:last-child td{ border-bottom:0; }

/* Sposób wysyłki: Woo renderuje go jako listę z punktorami wewnątrz komórki. */
.vc-checkout__review #shipping_method{ list-style:none; margin:0; padding:0; }
.vc-checkout__review #shipping_method li{ margin:0; }

/* ---------------------------------------------------------------------------
   Pola karty (Stripe UPE)
   Element Stripe'a jest wstrzykiwany jako iframe i dopasowuje się do
   kontenera. Kontener nie miał ani box-sizing, ani ograniczenia szerokości,
   więc rząd „numer karty / data / CVC" wychodził poza ramkę bloku płatności —
   dokładnie to widać na zrzucie właściciela.
   --------------------------------------------------------------------------- */
.woocommerce-checkout #payment{ background:transparent; border-radius:0; }
.woocommerce-checkout #payment ul.payment_methods{
  list-style:none; margin:0 0 16px; padding:0; border:0;
}
.woocommerce-checkout #payment ul.payment_methods li{ margin:0 0 10px; }
.woocommerce-checkout #payment ul.payment_methods li > label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:800; text-transform:none; letter-spacing:0;
  color:var(--ink); margin:0;
}
.woocommerce-checkout #payment div.payment_box{
  box-sizing:border-box; width:100%; max-width:100%;
  margin:10px 0 0; padding:14px;
  background:var(--cream); border:2px solid var(--ink); border-radius:var(--radius);
}
.woocommerce-checkout #payment div.payment_box::before{ display:none; }
.woocommerce-checkout #payment div.payment_box *,
.woocommerce-checkout #payment div.payment_box iframe{ box-sizing:border-box; max-width:100%; }
.woocommerce-checkout #payment .wc-stripe-upe-element{ width:100%; }

.woocommerce-checkout #payment .place-order{ margin:18px 0 0; padding:0; }
.woocommerce-checkout #payment #place_order{ width:100%; }

/* Zgody i regulamin — drobnym drukiem, nie jak akapit treści. */
.woocommerce-checkout .woocommerce-privacy-policy-text p,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label{
  font-size:13px; line-height:1.5; color:var(--muted);
}
.woocommerce-checkout .woocommerce-terms-and-conditions{
  /* overflow-y JEST KONIECZNE razem z max-height: bez niego regulamin zostaje
     ucięty na 180px i reszty nie da się przeczytać ani przewinąć, a to jest
     dokument, którego zaznaczenie zgody dotyczy. */
  max-height:180px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:12px; margin-bottom:12px;
  border:1px solid rgba(23,20,15,0.25); border-radius:var(--radius);
  background:var(--cream); font-size:13px;
}
.woocommerce-checkout .woocommerce-terms-and-conditions h2,
.woocommerce-checkout .woocommerce-terms-and-conditions h3{ font-size:14px; margin:12px 0 6px; }
/* Zabezpieczenie na przyszłość: gdyby któryś dokument prawny znów dostał baner
   szkicu (`draft` w LegalPage), NIE ma go pokazywać okienko zgody przy
   płaceniu — tam czyta się jak ostrzeżenie przed zakupem, a nie jak notka
   redakcyjna. Od 09.10.2026 żaden dokument banera nie ma, więc reguła jest
   dziś bezczynna i taka ma zostać. */
.woocommerce-checkout .woocommerce-terms-and-conditions .legal-draft{ display:none; }

/* ---------------------------------------------------------------------------
   Rezerwacja miejsca na pola karty
   ---------------------------------------------------------------------------
   Stripe montuje pola karty dopiero po swoim potoku: Stripe.js, po jednym
   zapytaniu `elements/sessions` na metodę płatności (~480 ms każde), potem
   ramki. Zmierzony przebieg na żywej kasie 09.10.2026:

     0,8 s  kontener istnieje, pusty
     1,5 s  Stripe dokłada klasę StripeElement, ramka ma 2 px wysokości
     5,3 s  ramka dostaje treść, 154-233 px

   Serwer w tym nie uczestniczy — TTFB 164 ms, dokument gotowy w 375 ms.
   Tego nie da się stąd przyspieszyć; to potok wtyczki i Stripe.js.

   Da się usunąć SKOK UKŁADU. Bez rezerwacji pole karty stało jako sliver 2 px
   i po kilku sekundach skakało o 231 px, zabierając ze sobą wszystko poniżej
   (zgody, przycisk „Place order"). Zmierzony CLS 0,054.

   ⛔ ŚWIADOMIE BEZ NAPISU „ładowanie" I BEZ `:has()`. Pierwsza wersja używała
   `:not(:has(iframe))` — nie działa, bo ramka pojawia się w DOM po 1,5 s, PUSTA,
   i selektor przestaje trafiać na 4 sekundy przed pojawieniem się pól. CSS nie
   odróżni ramki pustej od gotowej. Napis pod spodem (z-index) groziłby tym, że
   zostanie widoczny pod prawdziwym formularzem karty — gorsze niż brak napisu.
   Prawdziwy wskaźnik ładowania wymaga JS-u nasłuchującego zdarzeń Stripe'a.

   ⛔ EXPRESS CHECKOUT CELOWO BEZ REZERWACJI. Apple Pay i Google Pay pojawiają
   się TYLKO na urządzeniach, które je obsługują — na pozostałych Stripe nie
   renderuje nic. Rezerwacja wysokości zostawiłaby tam pustą dziurę na zawsze.
   --------------------------------------------------------------------------- */

.woocommerce-checkout #payment .wc-stripe-upe-element{ min-height:190px; }

/* Express checkout (Apple Pay / Google Pay) — nad siatką, na całą szerokość. */
#wc-stripe-express-checkout-element{ margin:0 auto 14px; max-width:520px; }
#wc-stripe-express-checkout-button-separator{
  max-width:520px; margin:0 auto 24px; text-align:center;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:800; color:var(--muted-2);
}

/* Przycisk jest inline-flex, więc odstęp między węzłem tekstowym a znacznikiem
   ceny z Woo znikał ("Buy —€89"). Flexbox zjada białe znaki między elementami,
   dlatego odstęp musi być zadeklarowany. */
.btn{ gap:.35em; }