/* ---------------------------------------------------------------
   Kraff — arkusz współdzielony motywu WordPress.
   Port 1:1 design tokenów i komponentów z apps/frontend-preview
   (ten sam plik :root, te same nazwy klas), żeby WooCommerce wyglądał
   jak zweryfikowany wcześniej statyczny wzorzec, a nie jak nowy design.
   Ścieżki do obrazów są względne wobec TEGO pliku (assets/css/site.css),
   nie wobec strony — stąd „../images/…”.
--------------------------------------------------------------- */

:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --paper-alt:#f1efe9;
  --oxblood:#7a1420;
  --oxblood-strong:#5c0f18;
  /* Czysta czerwień litery "F" w logo (zmierzona z pikseli logo.png:
     ~rgb(235,0,0)) — INNY odcień niż --oxblood (bordowy, stonowany, użyty
     w reszcie serwisu). Osobny token, nie podmiana --oxblood, żeby nie
     zmieniać koloru wszędzie indziej bez pytania — na razie tylko tam,
     gdzie wprost o to poproszono. */
  --logo-red:#eb0000;
  --brass:#a9895a;
  --steel:#6e7174;
  --line: rgba(10,10,10,0.14);
  --announce-h:36px;
}

*{box-sizing:border-box;}
html, body{margin:0; padding:0;}
body{background:var(--paper); color:var(--ink); font-family:'Karla', sans-serif; overflow-x:hidden;}
a{color:inherit;}
h1,h2,h3{font-family:'Marcellus', Georgia, serif; font-weight:500; text-wrap:balance; margin:0;}
img{max-width:100%;}
:focus-visible{outline:2px solid var(--oxblood); outline-offset:3px;}

.eyebrow{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--steel);}
.rule{height:1px; background:var(--line); border:none;}
.btn-line{
  display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; text-decoration:none; color:var(--ink);
  border-bottom:1px solid var(--ink); padding-bottom:4px; width:fit-content; background:none; border-top:none; border-left:none; border-right:none; cursor:pointer;
}
.btn-line svg{transition:transform .25s ease;}
.btn-line:hover svg{transform:translateX(4px);}

.btn-solid{
  display:inline-flex; align-items:center; gap:10px; padding:15px 26px;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  font-family:'Karla', sans-serif; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
.btn-solid:hover{background:var(--oxblood); border-color:var(--oxblood);}
.btn-solid[disabled]{opacity:.5; cursor:default; background:var(--ink); border-color:var(--ink);}
.btn-outline{
  display:inline-flex; align-items:center; gap:10px; padding:14px 26px;
  background:none; color:var(--ink); border:1px solid var(--ink);
  font-family:'Karla', sans-serif; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  transition:background .25s ease, color .25s ease;
}
.btn-outline:hover{background:var(--ink); color:var(--paper);}
.btn-outline[disabled]{opacity:.5; cursor:default;}

.gutter{padding-inline:max(20px, calc((100vw - 1280px)/2));}

/* ---- pasek ogłoszeń ---- */
.announce{
  position:fixed; top:0; left:0; right:0; z-index:41; height:var(--announce-h);
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--paper); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; text-align:center;
  transition:transform .35s ease, opacity .25s ease;
  white-space:nowrap; overflow:hidden; padding-inline:16px;
}
.announce.is-hidden{transform:translateY(-100%); opacity:0; pointer-events:none;}
.announce .announce-short{display:none;}
@media (max-width: 600px){
  .announce{letter-spacing:.08em;}
  .announce .announce-long{display:none;}
  .announce .announce-short{display:inline;}
}

/* ---- header ---- */
/* grid, nie flex+space-between: ta druga rozkłada środkową kolumnę (nav)
   proporcjonalnie do RÓŻNICY szerokości dwóch bocznych bloków — zmierzone
   naprawdę (CDP): blok logo 143.6px vs blok ikon 58px, więc nav lądowała
   ~35-43px na prawo od prawdziwego środka strony, nie w jego osi. Grid z
   równymi bocznymi kolumnami (1fr/auto/1fr) centruje nav naprawdę, niezależnie
   od tego, że logo i ikony mają różną szerokość. */
header{
  position:fixed; top:var(--announce-h); left:0; right:0; z-index:40;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:16px;
  padding:22px max(20px, calc((100vw - 1280px)/2));
  transition:background .4s ease, padding .4s ease, border-color .4s ease, top .35s ease;
  border-bottom:1px solid transparent;
}
/* Jawne grid-column, nie poleganie na kolejności w źródle: na mobile
   nav.links ma display:none, a display:none CAŁKOWICIE usuwa element z
   siatki (nie zostawia pustego miejsca) — przy samym auto-placement
   header-icons "spadłoby" w jego miejsce (środkowa kolumna) zamiast
   zostać w prawej. Sprawdzone naprawdę (CDP, 390px): bez tego ikony
   lądowały tuż obok logo, nie przy prawej krawędzi. */
header .wordmark{grid-column:1; justify-self:start;}
header nav.links{grid-column:2; justify-self:center;}
header .header-icons{grid-column:3; justify-self:end;}
header.solid{background:var(--paper); padding-block:14px; border-color:var(--line);}
header.bar-hidden{top:0;}
/* aspect-ratio (nie tylko height) jest kluczowe: .wordmark ma TYLKO dzieci
   position:absolute (oba warianty logo, do przenikania), więc bez jawnej
   szerokości sam kontener liczyłby się jako 0px — poza normalnym przepływem
   obraz wciąż by się "malował" (position:absolute nie jest ograniczany przez
   content-box rodzica), ale klikalny obszar linku i miejsce rezerwowane w
   flex-layoucie nagłówka byłyby zerowe. */
.wordmark{position:relative; display:inline-block; height:52px; aspect-ratio:279/101;}
.wordmark .logo-mark{height:52px; width:auto; position:absolute; top:0; left:0; transition:opacity .4s ease;}
.wordmark .logo-dark{opacity:1;}
.wordmark .logo-light{opacity:0;}
nav.links{display:flex; gap:38px;}
nav.links a{font-family:'Karla', sans-serif; font-size:15px; font-weight:700; letter-spacing:.04em; text-decoration:none; color:var(--ink);}
nav.links a:hover{color:var(--oxblood);}
nav.links a.is-active{color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:2px;}
nav.links a.nav-sale{color:var(--oxblood);}
nav.links a.nav-sale:hover{color:var(--oxblood-strong);}
.header-icons{display:flex; gap:20px; align-items:center;}
.header-icons svg{width:19px; height:19px;}
.header-icons a{position:relative; display:flex; line-height:0;}
.header-icons button{background:none; border:none; padding:0; margin:0; cursor:pointer; color:inherit; display:flex; line-height:0;}
.header-icons button.nav-toggle{display:none;}
.cart-badge{
  position:absolute; top:-7px; right:-9px; min-width:16px; height:16px; padding:0 4px;
  border-radius:8px; background:var(--oxblood); color:#f1efe9;
  font-family:'Karla', sans-serif; font-size:10px; font-weight:700; line-height:16px; text-align:center;
}

/* nad ciemnym hero: jasny wariant, dopóki header nie zrobi się .solid */
header.on-dark:not(.solid) nav.links a,
header.on-dark:not(.solid) .header-icons{color:#f1efe9;}
header.on-dark:not(.solid) nav.links a.nav-sale{color:#e0a3aa;}
header.on-dark:not(.solid) .logo-dark{opacity:0;}
header.on-dark:not(.solid) .logo-light{opacity:1;}
header.on-dark:not(.solid) nav.links a:hover{color:var(--brass);}

/* ---- drawer mobilny (nav.js) ---- */
html.nav-open{overflow:hidden;}
.nav-drawer{position:fixed; inset:0; z-index:70; visibility:hidden;}
.nav-drawer.is-open{visibility:visible;}
.nav-drawer-backdrop{position:absolute; inset:0; background:rgba(10,10,10,.5); opacity:0; transition:opacity .25s ease;}
.nav-drawer.is-open .nav-drawer-backdrop{opacity:1;}
.nav-drawer-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(300px, 82vw);
  background:var(--paper); box-shadow:-12px 0 40px rgba(0,0,0,.18);
  padding:28px 26px; display:flex; flex-direction:column; gap:8px;
  transform:translateX(100%); transition:transform .3s ease;
}
.nav-drawer.is-open .nav-drawer-panel{transform:translateX(0);}
.nav-drawer-close{align-self:flex-end; background:none; border:none; padding:6px; margin:-6px -6px 18px 0; cursor:pointer; color:var(--ink); display:flex;}
.nav-drawer-close svg{width:20px; height:20px; display:block;}
.nav-drawer-panel a{font-family:'Karla', sans-serif; font-size:18px; font-weight:700; letter-spacing:.02em; text-decoration:none; color:var(--ink); padding:10px 0; border-bottom:1px solid var(--line);}
.nav-drawer-panel a:last-of-type{border-bottom:none;}
.nav-drawer-panel a:hover, .nav-drawer-panel a.is-active{color:var(--oxblood);}
.nav-drawer-panel a.nav-sale{color:var(--oxblood);}
.nav-drawer-panel a.nav-sale:hover{color:var(--oxblood-strong);}

/* ---- hero (tylko front-page.php) ---- */
#top{padding-top:0;}
.hero{position:relative; background:var(--paper);}
.hero.is-scrub{height:170vh;}
.hero-stage{position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden;}
.hero.is-scrub .hero-stage{position:sticky; top:0;}
.hero-media{
  position:absolute; inset:0; overflow:hidden;
  background:radial-gradient(70% 60% at 70% 45%, #2a2622 0%, #141210 55%, #0a0a0a 100%);
  clip-path:inset(0 0 0 0);
  will-change:clip-path;
}
.hero-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.06), rgba(255,255,255,0) 28%, rgba(0,0,0,.14) 75%, rgba(0,0,0,.24));
  mix-blend-mode:soft-light; opacity:.55;
}
.hero-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:30% 50%; transform:scale(1.18); transform-origin:85% 50%;}
.hero-shade{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.46) 40%, rgba(10,10,10,.10) 74%, rgba(10,10,10,.02) 100%),
             linear-gradient(0deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,0) 46%);
  will-change:opacity;
}
.hero-copy{position:absolute; left:0; right:0; bottom:0; padding-bottom:clamp(70px,10vh,118px); color:#f1efe9;}
.hero-copy-inner{max-width:680px;}
.hero-kicker{display:flex; align-items:center; gap:14px; margin-bottom:20px; font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(241,239,233,.78);}
.hero-kicker::after{content:""; width:58px; height:1px; background:currentColor; opacity:.72;}
.hero-copy h1{font-size:clamp(44px,6.2vw,92px); line-height:.98; letter-spacing:-.015em; max-width:11.5ch;}
@media (min-width: 700px){ .hero-copy h1 .line{white-space:nowrap;} }
.hero-copy h1 .line{display:block; overflow:hidden; padding-bottom:.28em;}
.hero-copy h1 .line > span{display:block;}
.hero-copy p{margin-top:28px; font-size:16px; line-height:1.72; color:rgba(241,239,233,.78); max-width:45ch;}
.hero-cta-row{display:flex; gap:16px; margin-top:34px; flex-wrap:wrap;}
.hero-scroll-cue{position:absolute; left:0; bottom:28px; display:flex; align-items:center; gap:12px; color:rgba(241,239,233,.54); font-size:10px; letter-spacing:.18em; text-transform:uppercase;}
.hero-scroll-cue::before{content:""; width:26px; height:1px; background:currentColor;}
.hero-scroll-cue svg{width:13px; height:13px;}
.hero .btn-solid{background:#f1efe9; color:#0a0a0a; border-color:#f1efe9;}
.hero .btn-solid:hover{background:var(--oxblood); border-color:var(--oxblood); color:#f1efe9;}
.hero .btn-outline{color:#f1efe9; border-color:rgba(241,239,233,.6);}
.hero .btn-outline:hover{background:#f1efe9; color:#0a0a0a; border-color:#f1efe9;}

@media (prefers-reduced-motion: no-preference){
  .hero-copy h1 .line > span{transform:translateY(105%); animation:line-up 1.1s cubic-bezier(.2,.75,.15,1) forwards;}
  .hero-copy h1 .line:nth-child(2) > span{animation-delay:.12s;}
  .hero-copy p, .hero-cta-row{opacity:0; animation:fade-in .9s ease .55s forwards;}
  .hero-media img{animation:media-in 1.8s ease both;}
}
@keyframes line-up{to{transform:translateY(0);}}
@keyframes fade-in{to{opacity:1;}}
@keyframes media-in{from{opacity:0;} to{opacity:1;}}

/* ---- Rotomaty KRAFF (marka własna) ---- */
.kraff-rotomaty{padding-block:110px; background:var(--paper-alt);}
.kraff-rotomaty .frame{background:#e7e4dc;}
.kraff-rotomaty-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(40px,6vw,90px); align-items:center;}
.kraff-rotomaty-grid .frame{aspect-ratio:4/3;}
.kraff-rotomaty-head{max-width:520px;}
.kraff-rotomaty-head h2{font-size:clamp(32px,4vw,48px); margin-top:14px;}

/* ---- wybierz po okazji ---- */
.occasions{padding-block:100px 110px;}
.occasions-head{margin-bottom:36px;}
.occasions-head h2{font-size:clamp(28px,3.6vw,40px); margin-top:14px;}
.occasions-grid{display:grid; grid-template-columns:repeat(var(--cols,5),1fr); gap:16px;}
.occasion-tile[hidden]{display:none;}
.occasion-tile{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:22px 20px; border:1px solid var(--line); text-decoration:none; color:var(--ink);
  font-family:'Marcellus', serif; font-size:16px;
  transition:border-color .2s ease, background .2s ease;
}
.occasion-tile:hover{border-color:var(--ink); background:var(--paper-alt);}
.occasion-tile svg{flex:none; transition:transform .25s ease;}
.occasion-tile:hover svg{transform:translateX(4px);}
.occasion-tile--sale{border-color:var(--oxblood); color:var(--oxblood);}
.occasion-tile--sale:hover{background:var(--oxblood); color:var(--paper);}

/* ---- marki ---- */
.brands{padding:140px 0;}
.brands-head{max-width:640px; margin:0 auto 64px; text-align:center;}
.brands-head h2{font-size:clamp(32px,4vw,48px); margin-top:14px;}
.brands-head p{margin-top:20px; font-size:15px; line-height:1.7; color:var(--steel);}
.brand-marquee{
  position:relative; overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.brand-track{display:flex; align-items:center; width:max-content; animation:brand-scroll 34s linear infinite;}
.brand-marquee:hover .brand-track{animation-play-state:paused;}
.brand-item{
  display:flex; align-items:center; gap:32px; padding:0 32px; white-space:nowrap;
  font-family:'Marcellus', serif; font-size:clamp(22px,2.6vw,32px); color:var(--steel);
  transition:color .25s ease;
}
.brand-item:hover{color:var(--ink);}
.brand-item .dot{width:5px; height:5px; border-radius:50%; background:var(--brass); flex:none;}
@keyframes brand-scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){ .brand-track{animation:none;} }

/* ---- kolekcja / siatki kart (współdzielone z archiwum WooCommerce) ---- */
.collection{padding-top:140px; padding-bottom:150px;}
.collection-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:44px;}
.collection-head h2{font-size:clamp(32px,4vw,48px);}
.strip{display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; margin:0 max(20px, calc((100vw - 1280px)/2)) 0 max(20px, calc((100vw - 1280px)/2)); scrollbar-width:none;}
.strip::-webkit-scrollbar{display:none;}
.card{scroll-snap-align:start; flex:0 0 320px; opacity:0; transform:translateY(36px);}
.frame{background:var(--paper-alt); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:18px; text-align:center; position:relative; overflow:hidden;}
.frame span{font-size:11px; letter-spacing:.08em; color:var(--steel); text-transform:uppercase;}
a.frame{text-decoration:none; display:flex;}
.card .frame{aspect-ratio:4/5;}
.frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.card:hover .frame img{transform:scale(1.04); transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
#kolekcja .strip{display:grid; grid-template-columns:repeat(5,1fr); overflow-x:visible; scroll-snap-type:none; margin-inline:20px;}
#kolekcja .card{flex:none;}
.card h3{font-size:20px; margin-top:18px;}
.card p{font-size:13px; color:var(--steel); line-height:1.6; margin-top:8px;}
.card .btn-line{margin-top:14px; font-size:11px;}
@media (prefers-reduced-motion: reduce){ .card{opacity:1 !important; transform:none !important; transition:none !important;} }

.sold-ribbon{
  position:absolute; top:14px; left:14px; background:var(--ink); color:var(--paper);
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 10px;
}
.card.is-sold .frame img{filter:grayscale(.4); opacity:.72;}
.card.is-sold .price{color:var(--steel);}

/* ---- strona 404 ---- */
/* Pionowe centrowanie względem CAŁEGO viewportu: main{} ma box-sizing:
   border-box (globalne *{}), więc min-height:100svh już WLICZA jej własne
   padding-top/bottom (132px/140px) — to jedyne źródło pionowego rozmiaru,
   nic nie sumuje się z żadnym drugim (to był błąd poprzedniej wersji:
   osobny min-height WEWNĄTRZ main, które samo już miało swój padding).
   align-items centruje .err-inner w tym, co zostaje między paddingami. */
.kraff-404{display:flex; align-items:center; justify-content:center; min-height:100svh;}
.kraff-404 .err-inner{max-width:560px; text-align:center;}
.kraff-404 .err-code{font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--brass);}
.kraff-404 .err-rule{display:block; width:40px; height:1px; background:var(--brass); margin:14px auto 0; transform-origin:50% 50%;}
.kraff-404 h1{font-size:clamp(32px,4.6vw,56px); margin-top:18px; line-height:1.05;}
.kraff-404 .err-inner > p{font-size:15px; line-height:1.75; color:var(--steel); margin-top:22px;}
.kraff-404 .err-links{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:36px;}
.kraff-404 .err-contact{margin-top:40px; font-size:13px; color:var(--steel);}
.kraff-404 .err-contact a{text-decoration:underline; text-underline-offset:3px;}
.kraff-404 .err-contact a:hover{color:var(--ink);}

/* ---- listing (archiwum kategorii WooCommerce) ---- */
main{padding-top:calc(var(--announce-h) + 96px); padding-bottom:140px;}
.breadcrumb{display:flex; gap:8px; align-items:center; font-size:12px; color:var(--steel); margin-bottom:40px; flex-wrap:wrap;}
.breadcrumb a{text-decoration:none;}
.breadcrumb a:hover{color:var(--ink);}
.breadcrumb .sep{color:var(--line);}
.category-head{max-width:640px; margin-bottom:56px;}
.category-head h1{font-size:clamp(34px,4.2vw,52px); margin-top:14px;}
.category-head p{margin-top:18px; font-size:15px; line-height:1.7; color:var(--steel);}
.listing-controls{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px;}
.listing-count{font-size:13px; color:var(--steel);}
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.product-grid .card{flex:none; opacity:1; transform:none; width:100%;}
.product-grid .card .price{font-size:13px; font-weight:700; margin-top:8px;}
.product-grid .card .brand{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--steel); margin-top:16px;}
.listing-empty{padding:60px 0; font-size:14px; color:var(--steel); text-align:center;}
/* the_posts_pagination() owija numery w .nav-links — JEGO, nie .pagination
   (<nav>, jedno dziecko), trzeba zrobić flex, żeby numery faktycznie stały
   obok siebie. .page-numbers musi być inline-flex, nie flex: zwykły flex
   robi z każdego numeru blokowy kontener, więc numery lądowały jeden pod
   drugim zamiast w rzędzie — sprawdzone wprost na żywym markupie. */
.pagination{margin-top:60px; font-size:13px;}
.pagination .nav-links{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.pagination .page-numbers{display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border:1px solid var(--line); text-decoration:none; color:var(--ink);}
.pagination .page-numbers.current{background:var(--logo-red); color:var(--paper); border-color:var(--logo-red);}
.pagination .page-numbers:hover:not(.current){border-color:var(--ink);}
.pagination .page-numbers.prev, .pagination .page-numbers.next{display:none;} /* tylko cyfry, bez strzałek tekstowych */

/* ---- strona produktu ---- */
.product-layout{display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:start;}
.gallery-main{aspect-ratio:1/1; background:var(--paper-alt); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.gallery-main span{font-size:11px; letter-spacing:.08em; color:var(--steel); text-transform:uppercase;}
.gallery-main img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.product-info h1{font-size:clamp(30px,3vw,42px); margin-top:10px;}
.product-info .price{font-family:'Marcellus', serif; font-size:26px; margin-top:18px;}
.product-info .price ins{text-decoration:none;}
.product-info .price del{color:var(--steel); font-size:.7em; margin-right:8px;}
.availability{display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;}
.availability .dot{width:7px; height:7px; border-radius:50%; background:#2f8a4e; flex:none;}
.availability.is-out .dot{background:var(--oxblood);}
.description{margin-top:22px; font-size:14px; line-height:1.7; color:var(--steel); max-width:44ch;}
.spec-table{margin-top:28px; border-top:1px solid var(--line);}
.spec-row{display:flex; justify-content:space-between; gap:24px; padding:13px 0; border-bottom:1px solid var(--line); font-size:13px;}
.spec-row .k{color:var(--steel);}
.spec-row .v{font-weight:700; text-align:right;}
.cta-row{display:flex; gap:16px; margin-top:32px; flex-wrap:wrap;}
.trust-row{display:flex; gap:28px; margin-top:36px; padding-top:24px; border-top:1px solid var(--line); flex-wrap:wrap;}
.trust-item{display:flex; align-items:center; gap:10px; font-size:12px; color:var(--steel);}
.trust-item svg{width:18px; height:18px; flex:none; color:var(--brass);}
.related{padding-block:120px 130px;}
.related .strip{margin:0;}
.related-head{margin-bottom:44px;}
.related-head h2{font-size:clamp(28px,3.4vw,40px);}

/* Natywny formularz WooCommerce (woocommerce_template_single_add_to_cart)
   dociągnięty do wyglądu .btn-solid bez przepisywania jego markupu —
   nonce/warianty/ilość zostają dokładnie takie, jak WooCommerce oczekuje. */
.cta-row form.cart{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.cta-row .quantity{display:none;} /* sold_individually=yes na każdym produkcie — ilość zawsze 1 */
.cta-row p.stock{display:none;} /* dubluje .availability już pokazaną wyżej, nad opisem */
.single_add_to_cart_button{
  display:inline-flex; align-items:center; gap:10px; padding:15px 26px;
  background:var(--ink) !important; color:var(--paper) !important; border:1px solid var(--ink) !important;
  font-family:'Karla', sans-serif !important; font-size:12px !important; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; cursor:pointer; border-radius:0 !important; box-shadow:none !important;
  transition:background .25s ease, border-color .25s ease;
}
.single_add_to_cart_button:hover{background:var(--oxblood) !important; border-color:var(--oxblood) !important;}
.single_add_to_cart_button.disabled{opacity:.5; cursor:default;}
.woocommerce-message, .woocommerce-error, .woocommerce-info{
  list-style:none; margin:0 0 20px; padding:14px 18px; border:1px solid var(--line);
  font-size:13px; background:var(--paper-alt); color:var(--ink);
}
.woocommerce-message a.button, .woocommerce-error a.button{margin-left:10px; text-decoration:underline;}

/* ---- footer ---- */
footer{background:#0a0a0a; color:#f1efe9; padding:70px 0 40px;}
/* 6 kolumn, nie 5 — doszła "Grupa KRAFF" (link do siostrzanego rotomaty.pl,
   wymóg "strony mają tworzyć jedną całość"). */
.foot-grid{display:grid; grid-template-columns:1.1fr repeat(4, .8fr) 1.2fr; gap:28px;}
footer .foot-logo{height:40px; width:auto; display:block;}
footer .eyebrow{color:rgba(241,239,233,.5); margin-bottom:14px;}
footer a{display:block; font-size:13px; text-decoration:none; color:rgba(241,239,233,.85); margin-bottom:10px;}
footer a:hover{color:var(--brass);}
.foot-bottom{margin-top:60px; padding-top:24px; border-top:1px solid rgba(241,239,233,.14); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; font-size:11px; color:rgba(241,239,233,.45);}
.foot-legal{display:flex; gap:16px; flex-wrap:wrap;}
.foot-bottom a{display:inline; margin:0; color:inherit; text-decoration:underline; text-underline-offset:3px;}
.foot-bottom a:hover{color:var(--brass);}
.visually-hidden{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.newsletter{display:flex; flex-wrap:wrap; margin-top:16px; border-bottom:1px solid rgba(241,239,233,.35);}
.newsletter input{flex:1 1 140px; min-width:0; background:none; border:none; color:#f1efe9; font:inherit; font-size:13px; padding:10px 0;}
.newsletter input::placeholder{color:rgba(241,239,233,.45);}
.newsletter input:focus{outline:none;}
.newsletter button{background:none; border:none; color:#f1efe9; font:inherit; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; padding:10px 0 10px 12px;}
.newsletter button:hover{color:var(--brass);}
.newsletter:focus-within{border-color:var(--brass);}
.newsletter-msg{flex-basis:100%; margin:0; font-size:12px; color:var(--brass); min-height:0;}
.newsletter-msg:empty{display:none;}
.newsletter-msg{padding:8px 0;}

/* ---- legal-page (Regulamin / Polityka prywatności — page.php) ----
   Selektor to .legal-page, NIE .legal-doc: ta druga klasa miała przyjść
   z treści przeniesionej w Etapie 2, ale import wyciągnął tylko WNĘTRZE
   <article class="legal-doc">, nigdy sam wrapper — więc klasa nigdy nie
   trafiła do bazy, a cały ten blok był martwym CSS. .legal-page jest
   dodawana wprost w page.php (po ID strony), nie zgadywana z treści.

   max-width:68ch NIE może siedzieć na samym .legal-page (to ten sam
   element co .gutter, czyli <main>) — .gutter liczy swój padding-inline
   z założeniem, że element ma szerokość całego viewportu; dołożony tu
   drugi max-width zostawiał na realną treść zaledwie kilka pikseli
   (zmierzone: main 68ch ≈ 646px, .gutter zjadał z tego 640px paddingu,
   zostawało 6px — każde słowo lądowało w osobnej linijce). Wąska kolumna
   czytelności idzie więc na DZIECI main, nie na main samo. */
.legal-page > *{max-width:68ch;}
.legal-page h1{font-size:clamp(30px,3.6vw,44px); margin-top:14px;}
.legal-updated{font-size:13px; color:var(--steel); margin-top:16px;}
.legal-intro{font-size:15px; line-height:1.75; color:var(--steel); margin-top:24px; padding-bottom:28px; border-bottom:1px solid var(--line);}

.legal-page h2{
  font-family:'Marcellus', Georgia, serif; font-size:22px; font-weight:500;
  margin-top:56px; padding-top:28px; border-top:1px solid var(--line);
  display:flex; align-items:baseline; gap:12px; scroll-margin-top:120px;
}
.legal-page h2 .num{
  font-family:'Karla', sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.08em; color:var(--brass); flex:none;
}
.legal-page h3{font-family:'Karla', sans-serif; font-size:14px; font-weight:700; letter-spacing:.02em; margin-top:28px;}
.legal-page p{font-size:15px; line-height:1.8; color:var(--ink); margin-top:14px;}
.legal-page ul, .legal-page ol{margin:14px 0 0; padding-left:22px; font-size:15px; line-height:1.8; color:var(--ink);}
.legal-page li{margin-bottom:8px;}
.legal-page li::marker{color:var(--brass);}
.legal-page a.inline-link{text-decoration:underline; text-underline-offset:3px;}
.legal-page a.inline-link:hover{color:var(--oxblood);}
.legal-page code{
  font-family:ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:0.9em;
  background:var(--paper-alt); padding:2px 6px; border-radius:3px;
}

/* Ramka TODO: dane, których nie wolno zmyślać (nazwa firmy, NIP, numer
   konta…) — wyraźnie wydzielona, ale stonowana: to notatka robocza dla
   właściciela sklepu, nie błąd ani ostrzeżenie dla klienta. */
.legal-page .legal-todo{
  background:var(--paper-alt); border-left:3px solid var(--brass);
  padding:16px 20px; margin:20px 0; font-size:14px; line-height:1.7; color:var(--ink);
}
.legal-page .legal-todo b{
  display:block; font-family:'Karla', sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--oxblood-strong); margin-bottom:6px;
}

/* Wariant "rozwiązane" — te same wymiary co .legal-todo, ale spokojniejsze
   (brass zamiast oxblood, bez skojarzenia "ostrzeżenie"): potwierdzone,
   prawdziwe dane firmowe, nie zadanie do zrobienia. */
.legal-page .legal-fact{
  background:var(--paper-alt); border-left:3px solid var(--ink);
  padding:16px 20px; margin:20px 0; font-size:14px; line-height:1.7; color:var(--ink);
}
.legal-page .legal-fact b{
  display:block; font-family:'Karla', sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--steel); margin-bottom:6px;
}

/* Wzór formularza odstąpienia — czytelnie jako "dokument do wypełnienia",
   nie jak zwykły akapit: ramka + linie do uzupełnienia (.blank) jak na
   prawdziwym formularzu. */
.legal-page .legal-sample{
  border:1px solid var(--line); background:var(--paper); padding:24px 26px;
  margin:20px 0; font-size:14px; line-height:2.1; color:var(--ink);
}
.legal-page .legal-sample .eyebrow{display:block; margin-bottom:14px;}
.legal-page .blank{
  display:inline-block; min-width:220px; border-bottom:1px solid var(--line);
  vertical-align:bottom; margin-bottom:-2px;
}
.legal-page .blank-full{display:block; width:100%; min-width:0; margin-top:4px;}
.legal-page .footnote{display:block; margin-top:18px; font-size:12px; color:var(--steel);}

@media (max-width:600px){
  .legal-page h2{flex-direction:column; align-items:flex-start; gap:4px;}
}

/* ---- strona zwykła (Koszyk/Kasa/Moje konto/Regulamin/Polityka — page.php) ----
   Celowo BEZ max-width tutaj: .gutter (patrz wyżej) sam dociąga efektywną
   szerokość treści do 1280px przez padding-inline wyliczany z (100vw-1280px)/2
   — dokładnie ten sam mechanizm, którego używają archive-product.php,
   front-page.php, search.php i single-product.php, zawsze SAMEGO .gutter,
   bez dodatkowego max-width na tym samym elemencie. Wcześniejszy
   max-width:1280px na .kraff-page (bez margin:auto) kolidował z tym —
   <main> zostawał 1280px-owym blokiem przyklejonym do LEWEJ krawędzi
   (zamiast całej szerokości viewportu), a padding .gutter nadal liczył się
   tak, jakby main miał pełną szerokość — na ekranach szerszych niż 1280px
   cała treść (łącznie z panelem logowania) lądowała w lewej połówce strony,
   z pustą prawą połową. Potwierdzone pomiarem DOM na 1920px: .woocommerce
   miało left:320 width:640 zamiast być wyśrodkowane w pełnej szerokości.
   Klasa .kraff-page zostaje w znaczniku (page.php) na potrzeby ew.
   przyszłego stylowania, ale celowo nic tu po niej nie dziedziczymy. */

/* ---- WooCommerce Blocks: Koszyk i Kasa (page_id 6/7, Gutenberg) ----
   Nazwy klas potwierdzone na żywym, renderowanym DOM-ie (nie z dokumentacji) —
   WooCommerce Blocks ich nie dokumentuje jako stabilnego publicznego API,
   więc przy aktualizacji wtyczki warto je zweryfikować ponownie. */
.wc-block-cart, .wc-block-checkout{font-family:'Karla', sans-serif; color:var(--ink);}
.wc-block-cart h2, .wc-block-checkout h2,
.wc-block-cart__totals-title, .wc-block-components-checkout-step__title{
  font-family:'Marcellus', Georgia, serif; font-weight:500; font-size:19px;
}
.wc-block-cart-items__header{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--steel);
  border-bottom:1px solid var(--line); padding-bottom:12px;
}
.wc-block-cart-items__row{border-bottom:1px solid var(--line); padding-block:22px;}
.wc-block-cart-item__image img{border:1px solid var(--line);}
.wc-block-components-product-name{font-family:'Marcellus', Georgia, serif; font-size:16px; text-decoration:none; color:var(--ink);}
.wc-block-components-product-metadata__description{color:var(--steel); font-size:13px;}
.wc-block-cart-item__remove-link{color:var(--steel) !important;}
.wc-block-cart-item__remove-link:hover{color:var(--oxblood) !important;}

.wc-block-components-totals-wrapper, .wc-block-components-totals-item{border-color:var(--line) !important;}
.wc-block-components-totals-item__label{color:var(--ink);}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:'Marcellus', Georgia, serif; font-size:18px; font-weight:500;
}
.wc-block-components-panel__button{font-size:13px; color:var(--ink);}

/* Przyciski WooCommerce Blocks — ta sama kropla jak .btn-solid, ale bez
   zmiany markupu (React je renderuje, nie szablon PHP). */
.wc-block-components-button:not(.is-link) .wc-block-components-button__text,
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button{
  background:var(--ink) !important; color:var(--paper) !important; border-radius:0 !important;
  border:1px solid var(--ink) !important; font-family:'Karla', sans-serif !important;
  font-size:12px !important; font-weight:700 !important; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:none !important;
}
.wc-block-components-button:hover:not(.is-link), .wc-block-cart__submit-button:hover{
  background:var(--oxblood) !important; border-color:var(--oxblood) !important;
}
.wc-block-components-radio-control__input:checked{accent-color:var(--ink);}
.wc-block-components-radio-control__option-layout{border-color:var(--line) !important;}
.wc-block-components-text-input input, .wc-block-components-combobox input, select.wc-block-components-select-list__input{
  border-radius:0 !important; border-color:var(--line) !important; font-family:'Karla', sans-serif !important;
}
.wc-block-components-text-input input:focus, select:focus{outline:2px solid var(--oxblood) !important; outline-offset:1px;}

/* ---- WooCommerce: reset wyglądu domyślnych bloków pod ten design ---- */
.woocommerce ul.products{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; list-style:none; margin:0; padding:0;}
.woocommerce ul.products li.product{width:auto; margin:0; float:none;}
.woocommerce-breadcrumb{display:none;} /* własny .breadcrumb w header szablonu */
.woocommerce .star-rating{display:none;} /* brak prawdziwych opinii — nic do pokazania */

/* ---- Zamówienie otrzymane (checkout/thankyou.php — natywny szablon WooCommerce,
   NIE kopiowany do motywu: te hooki (BACS, przyszłe metody płatności) zbyt łatwo
   rozjechać się z aktualizacjami wtyczki; stylujemy tylko jej realne, stabilne
   klasy) ---- */
.woocommerce-order{max-width:640px; margin:0 auto; padding-block:70px 90px;}
.order-received-badge{
  display:block; width:64px; height:64px; margin:0 auto 24px; border-radius:50%;
  border:1px solid var(--brass); background:var(--paper-alt); position:relative; flex:none;
}
.order-received-badge::after{
  content:''; position:absolute; top:23px; left:18px; width:18px; height:10px;
  border-left:2px solid var(--brass); border-bottom:2px solid var(--brass); transform:rotate(-45deg);
}
.woocommerce-thankyou-order-received{
  font-family:'Marcellus', Georgia, serif !important; font-size:clamp(20px,2.4vw,26px) !important;
  text-align:center; border:none !important; background:none !important; padding:0 !important;
  color:var(--ink) !important; box-shadow:none !important; line-height:1.35 !important;
}
.woocommerce-order-overview{
  list-style:none; margin:40px 0 0; padding:0; border-top:1px solid var(--line);
}
.woocommerce-order-overview li{
  display:flex; justify-content:space-between; gap:16px; padding:14px 2px;
  border-bottom:1px solid var(--line); font-size:13px; letter-spacing:.02em; color:var(--ink);
}
.woocommerce-order-overview li strong{font-weight:700;}
.woocommerce-order h2, .wc-bacs-bank-details-heading, .woocommerce-order-details__title{
  font-family:'Marcellus', Georgia, serif; font-size:18px; margin:0 0 16px;
}
.woocommerce-bacs-bank-details{
  margin-top:40px; padding:26px; border:1px solid var(--line); background:var(--paper-alt);
}
.wc-bacs-bank-details-account-name{font-family:'Karla', sans-serif; font-size:13px; font-weight:700; margin:0 0 10px;}
.wc-bacs-bank-details{list-style:none; margin:0; padding:0; font-size:14px; display:grid; gap:6px;}
.woocommerce-order-details{margin-top:48px;}
.woocommerce-table{width:100%; border-collapse:collapse; font-size:14px;}
.woocommerce-table th, .woocommerce-table td{padding:12px 2px; border-bottom:1px solid var(--line); text-align:left;}
.woocommerce-table th:last-child, .woocommerce-table td:last-child, .woocommerce-table td.product-total{text-align:right;}
.woocommerce-table tfoot th{font-weight:400; color:var(--steel);}

/* ---- Panel klienta (Moje konto) — kokpit, zamówienia, faktury, adresy ----
   Klasyczne szablony WooCommerce (nie bloki Gutenberg jak Koszyk/Kasa),
   więc stabilne, udokumentowane nazwy klas — bezpieczne do stylowania
   samym CSS, bez nadpisywania PHP szablonów. */
/* Siatka 220px+1fr ma sens tylko tam, gdzie faktycznie jest boczna
   nawigacja (zalogowany klient). Na ekranie logowania/rejestracji/resetu
   hasła (gość) .woocommerce ma inne dzieci (h2 + form wprost) — bez tego
   guarda ten sam grid je rozjeżdżał. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){
  display:grid; grid-template-columns:240px 1fr; gap:64px; align-items:start;
}
/* Ten sam gatunek błędu co przy rejestracji (patrz komentarz przy
   #customer_login.u-columns): woocommerce-layout.css narzuca
   ".woocommerce-account .woocommerce-MyAccount-navigation{float:left;
   width:30%}" i "...-content{float:right;width:68%}" — dwuklasowy
   selektor, wyższa specyficzność niż nasz jednoklasowy. Procentowa
   szerokość liczy się od szerokości TRACKA grida, więc pasek boczny
   realnie dostawał 30% z 240px = 72px (zmierzone CDP) — stąd wrażenie
   "ściśnięcia", które zgłosił użytkownik; to nie była kwestia paddingu. */
.woocommerce-MyAccount-navigation{grid-column:1; float:none !important; width:100% !important;}
.woocommerce-MyAccount-content{float:none !important; width:100% !important;}
.woocommerce-MyAccount-navigation ul{list-style:none; margin:0; padding:0;}
.woocommerce-MyAccount-navigation li{border-bottom:1px solid var(--line);}
.woocommerce-MyAccount-navigation li a{
  display:block; padding:16px 6px; font-size:13px; font-weight:700; letter-spacing:.02em;
  line-height:1.3; text-decoration:none; color:var(--steel); transition:color 160ms ease;
}
.woocommerce-MyAccount-navigation li a:hover{color:var(--ink);}
.woocommerce-MyAccount-navigation li.is-active a{color:var(--ink); border-left:2px solid var(--brass); padding-left:16px; margin-left:-18px;}
.woocommerce-MyAccount-content{grid-column:2; font-size:15px; line-height:1.8; color:var(--ink);}

/* ---- Kokpit (woocommerce/myaccount/dashboard.php — override szablonu) ----
   Domyślny WC dashboard to dwa gołe akapity z podkreślonymi linkami, bez
   żadnej hierarchii. Zamiast tylko doginać CSS-em, szablon dostał własny,
   prosty markup (powitanie, kafelek ostatniego zamówienia, trzy skróty) —
   patrz komentarz w samym pliku override. */
.kraff-dashboard-greeting{font-family:'Marcellus', Georgia, serif; font-size:22px; font-weight:500; margin:0 0 32px;}
/* text-decoration:none !important — ".woocommerce-MyAccount-content
   a:not(.button)" (dwie klasy + pseudoklasa) ma wyższą specyficzność niż
   pojedyncza klasa .kraff-dashboard-last-order/-action i wygrywała,
   podkreślając całe kafelki łącznie z zagnieżdżonym tekstem. */
.kraff-dashboard-last-order{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border:1px solid var(--line); padding:20px 24px; margin:0 0 40px;
  text-decoration:none !important; color:var(--ink);
  transition:border-color 160ms ease, background 160ms ease;
}
.kraff-dashboard-last-order:hover{border-color:var(--ink); background:var(--paper-alt);}
.kraff-dashboard-last-order .eyebrow{display:block; margin-bottom:10px;}
.kraff-dashboard-last-order-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-size:14px; font-variant-numeric:tabular-nums;}
.kraff-dashboard-last-order-row > span:first-child{font-family:'Marcellus', Georgia, serif; font-size:16px;}
.kraff-dashboard-arrow{width:18px; height:18px; flex-shrink:0; color:var(--steel); transition:transform 200ms cubic-bezier(.23,1,.32,1), color 160ms ease;}
.kraff-dashboard-last-order:hover .kraff-dashboard-arrow{transform:translateX(4px); color:var(--ink);}

/* Własny, niezależny od (kruchego, patrz komentarz przy statusach tabeli
   zamówień) nazewnictwa klas WooCommerce system koloru statusu — ten sam
   zestaw barw co kropki w tabeli, podany jawnie przez PHP (completed/
   processing→dobry, on-hold/pending→ostrzeżenie, cancelled/failed/
   refunded→zły), nie wyciągany z klasy WC. */
.kraff-status{position:relative; padding-left:16px; font-weight:700;}
.kraff-status::before{
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border-radius:50%; background:var(--steel);
}
.kraff-status-good{color:#3a7d44;}
.kraff-status-good::before{background:#3a7d44;}
.kraff-status-warn{color:#7f6744;}
.kraff-status-warn::before{background:var(--brass);}
.kraff-status-bad{color:var(--oxblood);}
.kraff-status-bad::before{background:var(--oxblood);}

.kraff-dashboard-actions{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:0 0 36px;}
.kraff-dashboard-action{
  display:flex; flex-direction:column; gap:8px; padding:22px 20px; border:1px solid var(--line);
  text-decoration:none !important; color:var(--ink);
  transition:border-color 160ms ease, background 160ms ease, transform 160ms ease-out;
  /* occasional-use ekran (odwiedzany kilka razy na sesję, nie setki razy
     dziennie) — delikatne wejście uzasadnione; patrz animate skill */
  opacity:0; transform:translateY(8px);
  animation:kraff-dashboard-in 360ms cubic-bezier(.23,1,.32,1) forwards;
}
.kraff-dashboard-action:nth-child(1){animation-delay:0ms;}
.kraff-dashboard-action:nth-child(2){animation-delay:40ms;}
.kraff-dashboard-action:nth-child(3){animation-delay:80ms;}
@keyframes kraff-dashboard-in{to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){
  .kraff-dashboard-action{animation:kraff-dashboard-in-reduced 200ms ease forwards;}
  @keyframes kraff-dashboard-in-reduced{to{opacity:1;}}
}
.kraff-dashboard-action:hover{border-color:var(--ink); background:var(--paper-alt);}
.kraff-dashboard-action:active{transform:scale(0.98);}
.kraff-dashboard-action-title{font-family:'Marcellus', Georgia, serif; font-size:17px; font-weight:500;}
.kraff-dashboard-action-desc{font-size:13px; color:var(--steel); line-height:1.5;}

.kraff-dashboard-logout{font-size:13px; color:var(--steel); margin:0;}
.kraff-dashboard-logout a{color:var(--steel); text-decoration:underline; text-underline-offset:3px;}
.kraff-dashboard-logout a:hover{color:var(--oxblood);}

@media (max-width:620px){
  .kraff-dashboard-actions{grid-template-columns:1fr;}
  .kraff-dashboard-last-order{flex-direction:column; align-items:flex-start; gap:14px;}
}
.woocommerce-MyAccount-content p{margin:0 0 14px;}
.woocommerce-MyAccount-content a:not(.button){text-decoration:underline; text-underline-offset:3px;}
.woocommerce-MyAccount-content a:not(.button):hover{color:var(--oxblood);}

/* Przyciski w panelu (Zobacz/Faktura/Zapisz zmiany/Potwierdź e-mail…) —
   ta sama kropla co .btn-outline w reszcie serwisu, dociągnięta przez CSS
   (klasyczne szablony renderują je jako zwykłe <a class="button">). */
.woocommerce-MyAccount-content .button, .woocommerce-account .woocommerce-message .button{
  display:inline-flex; align-items:center; gap:8px; padding:11px 20px;
  background:none !important; color:var(--ink) !important; border:1px solid var(--ink) !important;
  font-family:'Karla', sans-serif; font-size:11px !important; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none !important; border-radius:0 !important;
  box-shadow:none !important; cursor:pointer;
}
.woocommerce-MyAccount-content .button:hover{background:var(--ink) !important; color:var(--paper) !important;}

/* Lista zamówień (/my-account/orders/) — cała tabela stała Karlą, łącznie
   z numerem zamówienia i kwotą, przez co wyglądała jak domyślna, generyczna
   tabela danych, bez żadnego akcentu marki. W reszcie serwisu Marcellus
   (serif) jest zarezerwowany dla "nazwanych rzeczy" — nazwa produktu, adres,
   cena produktu (patrz .product-info .price, .wc-block-components-product-
   name) — Karla dla gęstych, funkcjonalnych danych. Numer zamówienia i
   kwota dostają ten sam akcent tutaj; data/status zostają Karlą, bo to
   dane do skanowania wzrokiem, nie "nazwane rzeczy". */
.woocommerce-orders-table{width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums;}
.woocommerce-orders-table th{
  text-align:left; padding:10px 8px; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--steel); border-bottom:1px solid var(--ink);
}
.woocommerce-orders-table td{padding:16px 8px; border-bottom:1px solid var(--line); vertical-align:middle;}
.woocommerce-orders-table__cell-order-number a{font-family:'Marcellus', Georgia, serif; font-size:15px;}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions{white-space:nowrap;}
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button{padding:8px 14px; margin:2px 4px 2px 0;}

/* Status zamówienia: kropka + tekst, kolor zależny od statusu — czytelne
   na pierwszy rzut oka, bez polegania wyłącznie na treści tekstu. */
.woocommerce-orders-table__cell-order-status{position:relative; padding-left:22px !important;}
.woocommerce-orders-table__cell-order-status::before{
  content:''; position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border-radius:50%; background:var(--steel);
}
/* Klasa statusu siedzi na <tr> ("…__row--status-X"), NIE na komórce
   statusu jak zakładały poprzednie selektory (".status-X.…__cell-order-
   status") — ta kombinacja klas nigdy nie istniała na jednym elemencie,
   więc kropka zawsze była szara (--steel), niezależnie od statusu.
   Potwierdzone realnym outerHTML wiersza zamówienia, nie dokumentacją. */
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status{color:#3a7d44;}
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status::before,
.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status::before{background:#3a7d44;}
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status{
  /* --brass (#a9895a) wprost jako kolor tekstu nie ma dość kontrastu na
     białym tle dla normalnego tekstu (WCAG AA) — to ten sam odcień,
     przyciemniony tylko na potrzeby czytelności etykiety, kropka obok
     zostaje w czystym --brass. */
  color:#7f6744;
}
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status::before,
.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status::before{background:var(--brass);}
.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status{color:var(--oxblood);}
.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status::before,
.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status::before,
.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status::before{background:var(--oxblood);}

/* Adresy (/my-account/edit-address/, podgląd na Zamówieniu i Adresach) */
.woocommerce-Addresses{display:flex; flex-wrap:wrap; gap:32px;}
.woocommerce-Address{flex:1 1 280px;}
.woocommerce-Address-title{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px;}
.woocommerce-Address-title h2, .woocommerce-column__title{font-family:'Marcellus', Georgia, serif; font-size:17px; margin:0;}
.woocommerce-Address address, .woocommerce-column address{
  font-style:normal; font-size:14px; line-height:1.7; color:var(--ink);
  border:1px solid var(--line); padding:20px 22px; background:var(--paper-alt);
}

/* Formularze (szczegóły konta, adresy) */
.woocommerce-MyAccount-content form .form-row{margin-bottom:18px;}
.woocommerce-MyAccount-content label{display:block; font-size:12px; font-weight:700; letter-spacing:.02em; margin-bottom:6px; color:var(--ink);}
.woocommerce-MyAccount-content input.input-text, .woocommerce-MyAccount-content select, .woocommerce-MyAccount-content textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:0;
  font-family:'Karla', sans-serif; font-size:14px; color:var(--ink); background:var(--paper);
}
.woocommerce-MyAccount-content input.input-text:focus, .woocommerce-MyAccount-content select:focus{
  outline:2px solid var(--oxblood); outline-offset:1px; border-color:var(--oxblood);
}
.woocommerce-MyAccount-content fieldset{border:1px solid var(--line); padding:22px; margin:24px 0;}
.woocommerce-MyAccount-content fieldset legend{font-size:13px; font-weight:700; padding:0 8px; margin-left:-8px;}
.woocommerce-MyAccount-content button[type="submit"], .woocommerce-MyAccount-content input[type="submit"]{
  display:inline-flex; align-items:center; gap:10px; padding:14px 26px;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink); border-radius:0;
  font-family:'Karla', sans-serif; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; cursor:pointer;
}
.woocommerce-MyAccount-content button[type="submit"]:hover{background:var(--oxblood); border-color:var(--oxblood);}

/* Komunikaty (np. "Potwierdź adres e-mail") */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-NoticeGroup li{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  list-style:none; padding:16px 20px; margin:0 0 24px; font-size:14px;
  border-left:3px solid var(--brass); background:var(--paper-alt);
}
.woocommerce-error{border-left-color:var(--oxblood);}
/* WooCommerce core dolewa własną ikonkę (font "WooCommerce") przez ::before —
   niebieska, nie z palety Kraff, i w tym gridowym layoucie koliduje z treścią. */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before{content:none !important;}

/* ---- Logowanie / rejestracja / reset hasła (gość, bez bocznej nawigacji) ----
   Celowo BEZ wypełnionego tła i grubej ramki wokół formularza — reszta serwisu
   oddziela treść pustą przestrzenią i cienkimi liniami (.rule), nie boksami;
   wypełniony .frame jest zarezerwowany dla placeholderów zdjęć, nie tekstu/
   formularzy. Ekran centrowany też w pionie (min-height), żeby nie "uciekał"
   pod sam górny pasek z dużą pustą przestrzenią pod spodem. */
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)){
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  /* Ten blok NIE zaczyna się na górze okna — nad nim jest ok. 271px nagłówka,
     paska ogłoszeń, okruszków i "Moje konto". Żeby zawartość wylądowała na
     prawdziwym środku CAŁEGO widocznego okna (a nie na środku samego siebie,
     czyli niżej niż trzeba), wysokość musi być pomniejszona o 2× ten odstęp —
     wtedy T + H/2 = 100vh/2. Zmierzone realnie (CDP), nie "na oko". */
  min-height:max(300px, calc(100vh - 542px)); padding:40px 0;
}
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) > h2{
  font-family:'Marcellus', Georgia, serif; font-size:26px; font-weight:500;
  margin:0 0 30px; text-align:center;
}
/* Gdy rejestracja jest włączona, WooCommerce chowa "Logowanie"/"Zarejestruj
   się" głębiej (w .u-column1/.u-column2), więc powyższy selektor na
   bezpośrednie dziecko już ich nie łapie — bez tego nagłówki kolumn spadały
   do domyślnego rozmiaru przeglądarki (24px = 1.5em), zauważalnie mniejszego
   niż wszystkie inne nagłówki w serwisie. Wyrównanie do lewej (nie center):
   to teraz nagłówki dwóch kolumn obok siebie, nie jeden wyśrodkowany tytuł. */
.woocommerce-account #customer_login.u-columns h2{
  font-family:'Marcellus', Georgia, serif; font-size:26px; font-weight:500;
  margin:0 0 22px; text-align:left;
}
/* Opisowy tekst pod polami (np. "Na adres e-mail zostanie wysłany…" i klauzula
   o danych osobowych) nie miał żadnej reguły — dziedziczył domyślny rozmiar
   przeglądarki (16px), wyraźnie większy niż 12–15px używane konsekwentnie
   w reszcie panelu konta. */
.woocommerce-account #customer_login.u-columns p:not(.form-row),
.woocommerce-account #customer_login.u-columns .woocommerce-privacy-policy-text p{
  font-size:13px; line-height:1.6; color:var(--steel); margin:14px 0 0;
}
.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword{
  width:100%; max-width:380px; box-sizing:border-box;
  /* WooCommerce core ma własny, mocniejszy selektor ".woocommerce form.login"
     (2 klasy + element = wyższa specyficzność niż nasza jedna klasa) z grubą
     ramką, tłem i zaokrąglonymi rogami — stąd !important, żeby rzeczywiście
     wygrać, nie tylko nadpisać w źródle. */
  border:none !important; border-top:1px solid var(--line) !important;
  background:none !important; border-radius:0 !important;
  padding:30px 0 0 !important; margin:0 !important;
}
.woocommerce-ResetPassword > p:first-child{
  font-size:14px; line-height:1.7; color:var(--steel); margin:0 0 22px;
}
.woocommerce-form-login .form-row, .woocommerce-form-register .form-row, .woocommerce-ResetPassword .form-row{
  margin-bottom:18px;
}
.woocommerce-form-login label, .woocommerce-form-register label, .woocommerce-ResetPassword label{
  display:block; font-size:12px; font-weight:700; letter-spacing:.02em; margin-bottom:6px; color:var(--ink);
}
.woocommerce-form-login .required, .woocommerce-form-register .required, .woocommerce-ResetPassword .required{
  color:var(--oxblood); text-decoration:none;
}
.woocommerce-form-login input.input-text, .woocommerce-form-register input.input-text, .woocommerce-ResetPassword input.input-text{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:0;
  font-family:'Karla', sans-serif; font-size:14px; color:var(--ink); background:var(--paper);
  box-sizing:border-box; transition:border-color .2s ease;
}
.woocommerce-form-login input.input-text:focus, .woocommerce-form-register input.input-text:focus, .woocommerce-ResetPassword input.input-text:focus{
  outline:2px solid var(--oxblood); outline-offset:1px; border-color:var(--oxblood);
}
.woocommerce-form-login .password-input{position:relative; display:block;}
.woocommerce-form-login .password-input input{padding-right:42px;}
.woocommerce-form-login .show-password-input{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; background:none; border:none; cursor:pointer; color:var(--steel);
}
.woocommerce-form-login .show-password-input:hover{color:var(--ink);}
.woocommerce-form-login p.form-row:has(.woocommerce-form-login__rememberme){
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:0;
}
.woocommerce-form-login__rememberme{
  display:flex; align-items:center; gap:8px; font-size:13px; font-weight:400; margin:0; cursor:pointer;
  text-transform:none; letter-spacing:normal;
}
.woocommerce-form-login__rememberme input{accent-color:var(--ink); width:15px; height:15px; margin:0;}
.woocommerce-account .woocommerce button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 26px;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink); border-radius:0;
  font-family:'Karla', sans-serif; font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; cursor:pointer; transition:background .2s ease, border-color .2s ease;
}
.woocommerce-account .woocommerce button[type="submit"]:hover{background:var(--oxblood); border-color:var(--oxblood);}
.woocommerce-ResetPassword button[type="submit"]{width:100%; margin-top:4px;}
.woocommerce-LostPassword.lost_password{margin:22px 0 0; font-size:13px;}
.woocommerce-LostPassword.lost_password a{color:var(--steel); text-decoration:underline; text-underline-offset:3px;}
.woocommerce-LostPassword.lost_password a:hover{color:var(--oxblood);}

/* Rejestracja obok logowania (dwie kolumny) — włączone w ustawieniach
   WooCommerce (woocommerce_enable_myaccount_registration). WooCommerce ma
   WŁASNY plik woocommerce-layout.css (osobny od woocommerce.css!) z regułą
   ".col2-set .col-1{float:left;width:48%}" / ".col-2{float:right;width:48%}"
   — float teoretycznie jest ignorowany na dzieciach grida, ale żeby nie
   polegać na tej niejednoznaczności (i na przyszłość, gdyby WC to kiedyś
   zmienił), kolumny dostają jawne grid-column/row + zerowanie float/width
   zamiast ufać samemu auto-placement. Bez tego logowanie i rejestracja
   renderowały się w dwóch różnych wierszach zamiast obok siebie (zmierzone
   realnie przez CDP, nie "na oko"). */
.woocommerce-account #customer_login.u-columns{
  display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:900px; width:100%; align-items:start;
}
.woocommerce-account #customer_login.u-columns .u-column1{grid-column:1; grid-row:1; float:none; width:auto;}
.woocommerce-account #customer_login.u-columns .u-column2{grid-column:2; grid-row:1; float:none; width:auto;}
.woocommerce-account #customer_login.u-columns .woocommerce-form-login,
.woocommerce-account #customer_login.u-columns .woocommerce-form-register{max-width:none;}

@media (max-width:620px){
  .woocommerce-account #customer_login.u-columns{grid-template-columns:1fr;}
  /* grid-row:1 z reguły bazowej zostaje, jeśli go tu nie zresetujemy —
     obie kolumny lądują w tym samym wierszu/tej samej kolumnie i nachodzą
     na siebie, zamiast ułożyć się jedna pod drugą (złapane realnym
     zrzutem ekranu na 390px, nie oczywiste przy samym czytaniu CSS). */
  .woocommerce-account #customer_login.u-columns .u-column1{grid-column:1; grid-row:1;}
  .woocommerce-account #customer_login.u-columns .u-column2{grid-column:1; grid-row:2; margin-top:40px;}
}

@media (max-width:880px){
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation){grid-template-columns:1fr; gap:28px;}
  .woocommerce-MyAccount-navigation{grid-column:1;}
  .woocommerce-MyAccount-navigation ul{display:flex; flex-wrap:wrap; gap:0 18px; border-bottom:1px solid var(--line); margin-bottom:8px;}
  .woocommerce-MyAccount-navigation li{border-bottom:none;}
  .woocommerce-MyAccount-navigation li.is-active a{border-left:none; padding-left:2px; margin-left:0; border-bottom:2px solid var(--brass);}
  .woocommerce-MyAccount-content{grid-column:1;}
  .woocommerce-orders-table thead{display:none;}
  .woocommerce-orders-table, .woocommerce-orders-table tbody, .woocommerce-orders-table tr, .woocommerce-orders-table td{display:block; width:100%;}
  .woocommerce-orders-table tr{border:1px solid var(--line); margin-bottom:16px; padding:14px;}
  .woocommerce-orders-table td{border:none; padding:6px 0;}
}

@media (max-width: 880px){
  nav.links{display:none;}
  .header-icons button.nav-toggle{display:flex;}
  .wordmark{height:40px;}
  header{padding-block:14px;}
  .wordmark .logo-mark{height:40px;}
  main{padding-top:calc(var(--announce-h) + 100px);}
  .hero.is-scrub{height:150vh;}
  .hero-copy p{font-size:15px;}
  .hero-media img{object-position:58% 38%; transform:none;}
  .hero-copy{padding-bottom:clamp(64px,10vh,92px);}
  .hero-copy h1{max-width:10.5ch;}
  .hero-shade{background:linear-gradient(0deg, rgba(10,10,10,.82) 0%, rgba(10,10,10,.42) 58%, rgba(10,10,10,.12) 100%);}
  .kraff-rotomaty-grid{grid-template-columns:1fr;}
  .collection-head{flex-direction:column; align-items:flex-start;}
  #kolekcja .strip{display:flex; overflow-x:auto; scroll-snap-type:x mandatory;}
  #kolekcja .card{flex:0 0 260px;}
  .kraff-rotomaty{padding-block:80px;}
  .occasions{padding-block:70px 80px;}
  .occasions-grid{grid-template-columns:repeat(2,1fr);}
  .occasion-tile{padding:18px 16px; font-size:15px;}
  .brands{padding:90px 0;}
  .brand-item{padding:0 22px; gap:20px;}
  .foot-grid{grid-template-columns:1fr 1fr; gap:28px;}
  .collection{padding-top:90px; padding-bottom:90px;}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr);}
  .product-layout{grid-template-columns:1fr; gap:36px;}
}