/* =========================================================
   ARTarual — pracownia biżuterii
   Kierunek: katalog. Drobna typografia, dużo bieli,
   szare kafle ze zdjęciami, czarny pasek na górze,
   biała stopka z wielkim wordmarkiem.
   ========================================================= */
:root{
  --black:   #000000;
  --ink:     #1A1A1A;
  --grey:    #6E6E6E;   /* podpis pod produktem */
  --grey-2:  #9B9B9B;   /* nieaktywny filtr, placeholder */
  --line:    #E3E3E3;
  --tile:    #ECECEC;   /* szary kafel pod zdjęciem */
  --paper:   #FFFFFF;
  --paper-2: #F6F6F6;
  --navy:    #020085;   /* dokładny kolor z logo.png — stopka i wordmark logo */

  --font-sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Tinos", "Times New Roman", Times, serif;

  --edge: 40px;
  --radius: 14px;

  --topbar-h: 40px;
  --header-h: 66px;
}

*,*::before,*::after{ box-sizing:border-box; }
/* overflow-x na html, nie na body — na body tworzy osobny kontekst
   przewijania i psuje position:sticky w potomkach (np. .pgal na
   stronie produktu przestaje się trzymać przy scrollu) */
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:400;
  font-size:13px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
main, header, footer{ position:relative; }

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
p{ margin:0 0 1em; }
h1,h2,h3,h4{ margin:0; font-weight:700; color:var(--ink); line-height:1.2; }

.wrap{ width:100%; margin:0 auto; padding:0 var(--edge); }
/* wąska kolumna na dłuższy tekst — reszta strony jedzie na pełną szerokość */
.wrap--narrow{ max-width:1080px; }

:focus-visible{ outline:1px solid var(--black); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* =========================================================
   Delikatny fade + wsunięcie przy wjeżdżaniu w viewport (script.js
   dopisuje .reveal do sekcji/kafli, .is-visible po wejściu w kadr —
   patrz IntersectionObserver w script.js)
   ========================================================= */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{ opacity:1; transform:none; }
/* lekki poślizg kolejnych kafli w rzędzie siatki produktów */
.piece.reveal:nth-child(4n+2){ transition-delay:.08s; }
.piece.reveal:nth-child(4n+3){ transition-delay:.16s; }
.piece.reveal:nth-child(4n+4){ transition-delay:.24s; }

/* wspólna etykieta: drobne wersaliki */
.note{
  display:inline-block; font-family:var(--font-sans); font-weight:700;
  font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink);
  line-height:1.6;
}
.note--navy{ color:var(--ink); }
.ghost{ display:none !important; }

/* =========================================================
   Pasek z hasłem — pod nagłówkiem, w kolorze loga
   ========================================================= */
.topbar{
  background:var(--navy);
  color:#fff; height:var(--topbar-h);
  display:flex; align-items:center; justify-content:center;
  padding:0 var(--edge);
}
.topbar span{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  text-align:center;
}

/* =========================================================
   Header — hamburger z lewej, logo na środku, akcje z prawej.
   Menu jest rozwijaną listą na KAŻDEJ szerokości ekranu (nie tylko na
   telefonie) — jedna wersja wyglądu i zachowania wszędzie.
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50; background:var(--paper);
  border-bottom:1px solid var(--line);
}
/* 1fr po obu stronach (nie auto) — inaczej hamburger (wąski) i
   Instagram+koszyk (szersze) mają różną szerokość, środkowa kolumna z
   logiem przesuwa się od prawdziwego środka i wygląda na "nie
   wyśrodkowane" względem paska z hasłem pod spodem */
.site-header .wrap{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  height:var(--header-h); gap:1rem;
}
.logo{ display:flex; align-items:center; justify-content:center; }
.logo img{ height:28px; width:auto; } /* logo.png jest już granatowe — bez filtra */

.nav-toggle{
  display:block; justify-self:start; background:none; border:0;
  width:34px; height:34px; cursor:pointer; padding:0;
}
.nav-toggle span{ display:block; width:20px; height:1px; background:var(--ink); margin:5px auto; }

/* Menu jako szuflada z lewej krawędzi + przyciemnione tło — ten sam
   język wizualny co koszyk (.bag), tylko z drugiej strony. Zasłania
   cały ekran (łącznie z nagłówkiem), więc ma własny przycisk zamknięcia
   u góry — hamburger jest wtedy i tak schowany pod tłem. */
.nav-backdrop{
  position:fixed; inset:0; z-index:58; background:rgba(0,0,0,.32);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s;
}
.nav-backdrop.open{ opacity:1; visibility:visible; }

.main-nav{
  position:fixed; inset:0 auto 0 0; z-index:59; width:min(320px,86vw); height:100%;
  background:var(--paper); display:flex; flex-direction:column; align-items:stretch;
  overflow-y:auto; box-shadow:24px 0 60px -34px rgba(0,0,0,.4);
  transform:translateX(-100%); transition:transform .3s cubic-bezier(.2,.6,.2,1);
}
.main-nav.open{ transform:translateX(0); }

.main-nav__head{ display:flex; justify-content:flex-end; padding:1.3rem var(--edge) 0; }
.main-nav__close{ background:none; border:0; padding:0; cursor:pointer; font-size:15px; color:var(--ink); }

.main-nav ul{ list-style:none; display:flex; flex-direction:column; gap:0; margin:0; padding:.4rem var(--edge) 1.8rem; }
.main-nav > ul > li{ border-bottom:1px solid var(--line); }
.main-nav > ul > li > a{
  display:block; padding:.95rem 0; font-size:13.5px; color:var(--ink);
  transition:opacity .15s ease;
}
.main-nav > ul > li > a:hover{ opacity:.55; }

/* prawa strona nagłówka — tylko Instagram i koszyk; flagi PL/EN mieszkają
   teraz w rozwijanym menu (.nav-lang-item), nie tutaj */
.nav-actions{ display:flex; align-items:center; justify-content:flex-end; gap:1.4rem; }
.nav-actions a{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.09em; font-weight:500;
  color:var(--ink); white-space:nowrap;
}
.nav-actions a:hover{ text-decoration:underline; text-underline-offset:3px; }
.nav-actions .nav-icon{ display:inline-flex; align-items:center; }
.nav-actions .nav-icon:hover{ text-decoration:none; opacity:.6; }

/* PL / EN flag switch — flags stay in their real colours always; only
   opacity marks which one is active (a grayscale filter would make the
   Polish flag look like it is broken, not just "not selected") */
.lang-switch{ display:inline-flex; align-items:center; gap:.7rem; }
.lang-switch button{
  background:none; border:0; padding:0; margin:0; cursor:pointer;
  font-size:19px; line-height:1; opacity:.4;
  transition:opacity .2s ease;
}
.lang-switch button[aria-current="true"]{ opacity:1; cursor:default; }
.lang-switch button:hover{ opacity:.75; }
.nav-lang-item{ display:flex; align-items:center; padding:.95rem 0; }

/* =========================================================
   Rozwijane „sklep" — zawsze klik/tap, jedna pozycja w liście
   ========================================================= */
.main-nav li.has-sub{ position:static; }
.sub-toggle{
  font-family:var(--font-sans); font-size:13.5px; font-weight:400; color:var(--ink);
  background:none; border:0; padding:.95rem 0; cursor:pointer;
  display:flex; width:100%; align-items:center; justify-content:space-between;
}
.sub-toggle .caret{ font-size:6px; transition:transform .25s ease; }
.has-sub.open .sub-toggle .caret{ transform:rotate(180deg); }

.main-nav .subnav{
  list-style:none; margin:0; padding:0 0 .7rem .9rem; position:static;
  display:none; gap:0;
}
.has-sub.open .subnav{ display:grid; }
.subnav li{ border:0 !important; }
.subnav a{ display:block !important; padding:.55rem 0 !important; font-size:13.5px; white-space:nowrap; }
.subnav a:hover, .subnav a[aria-current="page"]{ opacity:.55; }

/* =========================================================
   Baner pełnoekranowy (hero)
   ========================================================= */
/* na komputerze/laptopie: dwa zdjęcia obok siebie, na wysokość
   wypełniają resztę ekranu pod paskiem i nagłówkiem (żeby nic z
   sekcji "new" nie było widać bez przewinięcia) */
.hero-band{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  height:calc(100vh - var(--topbar-h) - var(--header-h)); min-height:480px;
}
.hero-band figure{ margin:0; overflow:hidden; background:var(--tile); }
.hero-band img{ width:100%; height:100%; object-fit:cover; }
.hero-band__overlay{
  position:absolute; left:var(--edge); bottom:2.6rem; z-index:2; color:#fff; max-width:min(46ch,54%);
  text-shadow:0 1px 22px rgba(0,0,0,.34);
}
.hero-band__title{
  font-family:var(--font-sans); font-weight:800; text-transform:uppercase;
  font-size:clamp(2.4rem,5.4vw,4.4rem); line-height:.98; letter-spacing:-.025em; color:#fff;
  margin:0 0 .5rem;
}
.hero-band__sub{
  font-size:17px; font-weight:700; line-height:1.45; margin:0 0 1.4rem; color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45);
}

/* biała pigułka na zdjęciu */
.btn-pill{
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:var(--ink); border:1px solid #fff; border-radius:100px;
  font-size:12px; font-weight:500; padding:.62rem 1.5rem; line-height:1;
  transition:background .22s ease, color .22s ease;
}
.btn-pill:hover{ background:transparent; color:#fff; }

/* =========================================================
   Przyciski
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-sans); font-size:12px; font-weight:500; line-height:1;
  padding:1.05rem 2.6rem; border:1px solid var(--black); border-radius:0;
  transition:background .22s ease, color .22s ease;
}
.btn-primary{ background:var(--black); color:#fff; }
.btn-primary:hover{ background:transparent; color:var(--ink); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--black); color:#fff; }
.btn-row{ display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin-top:2rem; }

/* =========================================================
   Sekcje
   ========================================================= */
.section{ padding:4.5rem 0; position:relative; }
.section--paper2{ background:var(--paper-2); }
.section--pink, .section--lavender, .section--lime, .section--orange{ background:var(--paper-2); }
.section--navy{ background:var(--black); color:rgba(255,255,255,.8); }
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4,.section--navy .note{ color:#fff; }
.section__inner{ position:relative; }

/* nagłówek sekcji = drobna etykieta, jak „NEW IN" w referencji */
.sec-head{ margin-bottom:1.6rem; }
.sec-head h2{
  font-family:var(--font-sans); font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.09em; color:var(--ink); line-height:1.4;
}
/* eyebrow jest już zbędny — etykietą jest sam nagłówek */
.sec-head .note{ display:none; }
.section--navy .sec-head h2{ color:#fff; }

/* =========================================================
   Siatka produktów
   ========================================================= */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.8rem 14px; }
/* wariant na stronę główną: kwadratowe, mniejsze kafle w węższej kolumnie */
.gallery--compact .piece__frame{ aspect-ratio:1/1; }
.gallery--loose .piece{ transform:none; }

.piece{ position:relative; }
.piece a{ display:block; }
.piece__frame{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:var(--tile); border:0; border-radius:var(--radius);
  box-shadow:0 0 0 rgba(0,0,0,0); display:block;
  transition:box-shadow .35s ease;
}
/* delikatny cień + powiększenie zdjęcia na hover — bez tego siatka
   produktów wygląda trochę statycznie */
.piece:hover .piece__frame{ box-shadow:0 20px 36px -20px rgba(0,0,0,.24); }
.piece__frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity .5s ease, transform .5s ease;
}
.piece:hover .piece__frame img{ transform:scale(1.045); }
/* drugie zdjęcie odsłania się na hover — jak w referencji */
.piece__frame .piece__img--alt{ opacity:0; }
.piece:hover .piece__frame .piece__img--alt{ opacity:1; }

.piece__meta{ display:flex; align-items:flex-start; gap:1rem; margin-top:.85rem; }
.piece__name{
  font-family:var(--font-serif); font-weight:400; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.015em; color:var(--ink); line-height:1.4;
}
.piece__price{
  font-family:var(--font-serif); font-weight:400; font-size:11.5px;
  text-transform:uppercase; letter-spacing:.015em; color:var(--ink);
  margin-left:auto; white-space:nowrap; padding-top:1px;
}
/* podpis materiałowy pod nazwą */
.piece__desc{
  font-family:var(--font-sans); font-size:12px; color:var(--grey);
  margin:.35rem 0 0; line-height:1.5;
}
/* numer i plakietka z poprzedniej wersji — w katalogu zbędne */
.piece__no, .piece__frame .tag{ display:none; }

.gallery-more{ text-align:center; margin-top:3.4rem; }
/* domyślnie zwykły link w zdaniu */
.text-link{
  display:inline; border:0; padding:0; background:none; color:var(--ink);
  font-family:inherit; font-size:inherit; line-height:inherit;
  border-bottom:1px solid var(--line); transition:border-color .22s ease;
}
.text-link:hover{ border-bottom-color:var(--ink); }
/* stojąc samodzielnie staje się przyciskiem „View all" */
.gallery-more .text-link, .btn-row .text-link{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-sans); font-size:12.5px; font-weight:400;
  border:1px solid var(--black); padding:.95rem 2.8rem; line-height:1;
  transition:background .22s ease, color .22s ease;
}
.gallery-more .text-link:hover, .btn-row .text-link:hover{ background:var(--black); color:#fff; }
.section--navy .btn-row .text-link{ border-color:#fff; color:#fff; }
.section--navy .btn-row .text-link:hover{ background:#fff; color:var(--ink); }

/* =========================================================
   Photo wall (photoshoot.html) — kolumnowy kolaż, sam się
   zwija do jednej kolumny na telefonie, bez dodatkowego JS-a
   ========================================================= */
.photo-wall{ column-count:3; column-gap:14px; }
.photo-wall figure{
  margin:0 0 14px; break-inside:avoid; overflow:hidden;
  border-radius:var(--radius); background:var(--tile);
}
.photo-wall img{ display:block; width:100%; height:auto; }
@media (max-width:1024px){ .photo-wall{ column-count:2; } }
@media (max-width:560px){ .photo-wall{ column-count:1; } }

/* =========================================================
   Filtry kolekcji — środek, drobny tekst, bez ramek
   ========================================================= */
.filter-row{
  display:flex; justify-content:center; flex-wrap:wrap; gap:2.4rem;
  margin:0 0 3.2rem;
}
.filter-btn{
  background:none; border:0; padding:.2rem 0; cursor:pointer;
  font-family:var(--font-sans); font-size:12px; color:var(--grey-2);
  transition:color .2s ease;
}
.filter-btn:hover{ color:var(--ink); }
.filter-btn.active{ color:var(--ink); text-decoration:underline; text-underline-offset:4px; }

/* =========================================================
   Nagłówek podstrony / kolekcji — wyśrodkowany, drobny
   ========================================================= */
.page-hero{ padding:3.4rem 0 3rem; text-align:center; }
.page-hero h1{
  font-family:var(--font-sans); font-weight:700; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.1em; color:var(--ink); margin-bottom:1rem;
}
.page-hero p{
  max-width:660px; margin:0 auto; font-size:13px; color:var(--ink); line-height:1.7;
}

/* strona 404 */
.error-code{
  font-family:var(--font-sans); font-weight:800; font-size:clamp(4rem,16vw,8rem);
  line-height:.9; letter-spacing:-.02em; color:var(--line); margin:0 0 1rem;
}
.page-hero > .wrap > .note{ display:none; }

/* metryczka dropu — drobny szary tekst rozdzielony kropkami */
.drop-meta{
  display:flex; justify-content:center; flex-wrap:wrap; gap:0; margin-top:1.2rem;
  font-size:11.5px; color:var(--grey);
}
.badge{
  border:0; border-radius:0; background:none; padding:0; color:var(--grey);
  font-family:var(--font-sans); font-size:11.5px; font-weight:400;
  text-transform:none; letter-spacing:0;
}
.badge + .badge::before{ content:"·"; margin:0 .7rem; color:var(--grey-2); }

/* =========================================================
   Kolaż zdjęć — statyczny, bez animacji
   ========================================================= */
.collage{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px; }
.collage figure{ margin:0; overflow:hidden; border-radius:var(--radius); background:var(--tile); }
.collage img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.6,.2,1); }
.collage figure:hover img{ transform:scale(1.03); }
.collage .tall{ grid-row:span 2; }
.collage .wide{ grid-column:span 2; }

/* dawny przewijany pas — zatrzymany i sprowadzony do statycznej siatki */
.strip{ position:relative; background:var(--paper); overflow:hidden; border:0; }
.strip__track{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; width:auto; animation:none; padding:0 var(--edge); }
.strip__track img{ width:100%; height:230px; object-fit:cover; border:0; border-radius:var(--radius); }
.strip__label{ display:none; }

/* =========================================================
   Zdjęcia — wspólne
   ========================================================= */
.ph{
  margin:0; position:relative; aspect-ratio:3/4; overflow:hidden;
  background:var(--tile); border:0; border-radius:var(--radius); box-shadow:none; transform:none;
}
.ph img{ width:100%; height:100%; object-fit:cover; }
.ph--tape::before{ display:none; }
.split .ph{ max-width:none; }

.wall{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.wall .ph{ aspect-ratio:3/4; transform:none !important; }
.wall .ph img{ transition:transform .7s cubic-bezier(.2,.6,.2,1); }
.wall .ph:hover img{ transform:scale(1.03); }

/* hero z poprzedniej wersji — gdyby gdzieś zostało w markupie */
.hero{ padding:3rem 0; }
.hero__grid{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.hero-cluster{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hero-cluster .blob{ display:none; }
.hero h1{ font-family:var(--font-sans); font-weight:800; text-transform:uppercase; font-size:clamp(2rem,4.5vw,3.4rem); letter-spacing:-.02em; line-height:1; }
.hero__lede{ font-size:13px; max-width:52ch; }
.hl{ font-family:inherit; font-style:normal; color:inherit; background:none; -webkit-text-fill-color:currentColor; }

/* =========================================================
   Wielkie oświadczenie (jak cytat prasowy w referencji)
   ========================================================= */
.statement{ max-width:none; text-align:left; }
.statement p{
  font-family:var(--font-sans); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.6rem,4.2vw,3.3rem); line-height:1.04; letter-spacing:-.025em;
  color:var(--ink); margin:0;
}
.section--navy .statement p{ color:#fff; }
.statement .sign{
  display:inline-block; margin-top:1.8rem; font-family:var(--font-serif);
  font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--grey);
}

/* =========================================================
   Trzy kolumny (z czego / jak to działa)
   ========================================================= */
.stuff{ display:grid; grid-template-columns:repeat(3,1fr); gap:3.4rem; }
.stuff__item{ position:relative; padding:1.2rem 0 0; border-top:1px solid var(--line); }
.stuff__item::before{ display:none; }
.stuff__item h3{
  font-family:var(--font-sans); font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink); margin-bottom:.6rem;
}
.stuff__item p{ color:var(--grey); margin:0; font-size:13px; }

/* =========================================================
   Split (o mnie)
   ========================================================= */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:3.4rem; align-items:center; }
.portrait{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--tile); border:0; border-radius:var(--radius); box-shadow:none; transform:none; }
.portrait::before{ display:none; }
.portrait img{ width:100%; height:100%; object-fit:cover; }
.split p{ color:var(--ink); font-size:13px; max-width:56ch; }

.story-list{ display:grid; gap:0; margin-top:1.4rem; }
.story-list .row{
  display:grid; grid-template-columns:120px 1fr; gap:1.6rem; align-items:baseline;
  padding:1.2rem 0; border-bottom:1px solid var(--line);
}
.story-list .row:first-child{ border-top:1px solid var(--line); }
.story-list .when{
  font-family:var(--font-serif); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--grey-2); line-height:1.6;
}
.story-list p{ margin:0; color:var(--ink); font-size:13px; }

/* =========================================================
   Kontakt
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.contact-lines{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:0; }
.contact-lines li{
  display:flex; gap:1rem; align-items:center; font-size:13px;
  padding:.9rem 0; border-bottom:1px solid var(--line);
}
.contact-lines li:first-child{ border-top:1px solid var(--line); }
.contact-lines .ic{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex:none;
  font-size:10px; color:var(--grey); background:transparent !important;
}
.social-row{ display:flex; gap:1.6rem; margin-top:1.8rem; }
.social-row a{
  width:auto; height:auto; border:0; border-radius:0; display:inline-flex;
  font-family:var(--font-sans); font-size:11.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.09em; color:var(--ink);
  border-bottom:1px solid var(--line); padding-bottom:2px;
  transition:border-color .22s ease;
}
.social-row a:hover{ border-bottom-color:var(--ink); background:none; transform:none; }

.form-card{ background:transparent; border:0; border-radius:0; padding:0; box-shadow:none; }
.form{ display:grid; gap:1.6rem; }
.form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
.field label{
  display:block; font-family:var(--font-sans); font-weight:500; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.09em; color:var(--grey); margin-bottom:.5rem;
}
.field input, .field select, .field textarea{
  width:100%; font-family:var(--font-sans); font-weight:400; font-size:13px;
  padding:.7rem 0; border:0; border-bottom:1px solid var(--line); border-radius:0;
  background:transparent; color:var(--ink); transition:border-color .22s ease;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:0; border-bottom-color:var(--ink); }
.field input::placeholder, .field textarea::placeholder{ color:var(--grey-2); }
.form-note{ font-size:11.5px; color:var(--grey-2); }
#form-success{
  display:none; background:var(--paper-2); border:0; border-radius:0; padding:.9rem 1.2rem;
  font-family:var(--font-sans); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.09em; color:var(--ink);
}
#form-success.show{ display:block; }

/* =========================================================
   Q&A
   ========================================================= */
.qa{ display:grid; gap:0; max-width:820px; }
.qa details{ border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; }
.qa details:last-child{ border-bottom:1px solid var(--line); }
.qa summary{
  cursor:pointer; list-style:none; padding:1.2rem 0;
  font-family:var(--font-sans); font-weight:500; font-size:13px; color:var(--ink);
  display:flex; justify-content:space-between; gap:2rem; align-items:baseline;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:"+"; font-family:var(--font-sans); font-weight:400; color:var(--grey-2); font-size:14px; line-height:1; }
.qa details[open] summary::after{ content:"–"; }
.qa .a{ padding:0 0 1.4rem; color:var(--grey); font-size:13px; max-width:70ch; }

/* =========================================================
   Karta produktu
   ========================================================= */
.product{ display:grid; grid-template-columns:1fr 1.15fr; gap:3.4rem; align-items:start; }

.pgal{ position:sticky; top:calc(var(--header-h) + 24px); max-width:460px; }
.pgal__main{
  position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--tile);
  border:0; border-radius:var(--radius); box-shadow:none; cursor:zoom-in;
}
.pgal__main img{ width:100%; height:100%; object-fit:cover; }
.pgal__thumbs{ display:flex; gap:14px; margin-top:14px; flex-wrap:wrap; }
.pgal__thumbs button{
  width:88px; aspect-ratio:4/5; padding:0; overflow:hidden; cursor:pointer;
  background:var(--tile); border:0; border-radius:10px; opacity:.5;
  transition:opacity .22s ease;
}
.pgal__thumbs button img{ width:100%; height:100%; object-fit:cover; }
.pgal__thumbs button:hover{ opacity:.8; }
.pgal__thumbs button[aria-selected="true"]{ opacity:1; transform:none; box-shadow:none; }

.product__head h1{
  font-family:var(--font-sans); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.02em; line-height:1.05; color:var(--ink);
}
.product__no{
  font-family:var(--font-serif); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--grey-2); display:block; margin-bottom:.7rem;
}
.product__lede{ font-size:13px; color:var(--grey); max-width:52ch; margin-top:.9rem; }

.product-facts{ display:grid; grid-template-columns:1fr; gap:1.6rem; margin-top:1.8rem; }
.product-facts div{ padding-top:.8rem; padding-left:0; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink); }
.product-facts div::before{ display:none; }
.product-facts strong{
  display:block; font-family:var(--font-sans); font-weight:500; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.09em; color:var(--grey); margin-bottom:.25rem;
}

.opt{ margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.opt__head{ display:flex; align-items:baseline; gap:.7rem; margin-bottom:.9rem; flex-wrap:wrap; }
.opt__head h3{
  font-family:var(--font-sans); font-weight:500; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.09em; color:var(--grey); margin:0;
}
.opt__pick{ font-family:var(--font-serif); font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink); }

.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  font-family:var(--font-sans); font-weight:400; font-size:12px; cursor:pointer;
  background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:0;
  padding:.55rem .9rem; display:inline-flex; align-items:center; gap:.5rem; line-height:1.2;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.chip:hover{ border-color:var(--ink); transform:none; }
.chip[aria-pressed="true"]{ background:var(--black); color:#fff; border-color:var(--black); box-shadow:none; }
.chip .dot{ width:11px; height:11px; border-radius:50%; border:1px solid rgba(0,0,0,.18); flex:none; }
.chip[aria-pressed="true"] .dot{ border-color:rgba(255,255,255,.5); }
.chip .delta{ font-size:11px; color:var(--grey-2); opacity:1; }
.chip[aria-pressed="true"] .delta{ color:rgba(255,255,255,.6); opacity:1; }

.sizes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:6px; }
.size-btn{
  cursor:pointer; background:transparent; border:1px solid var(--line); border-radius:0;
  padding:.6rem .25rem; text-align:center; line-height:1.35; color:var(--ink);
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.size-btn:hover{ border-color:var(--ink); transform:none; }
.size-btn .n{ display:block; font-family:var(--font-sans); font-weight:500; font-size:12.5px; color:inherit; }
.size-btn .mm{ display:block; font-size:10.5px; color:var(--grey-2); opacity:1; }
.size-btn .d{ display:block; font-size:10px; color:var(--grey-2); font-weight:400; min-height:1em; }
.size-btn[aria-pressed="true"]{ background:var(--black); color:#fff; border-color:var(--black); box-shadow:none; }
.size-btn[aria-pressed="true"] .mm, .size-btn[aria-pressed="true"] .d{ color:rgba(255,255,255,.6); opacity:1; }
.size-help{ margin-top:1rem; font-size:12px; color:var(--grey); }
/* .text-link w tym miejscu jest zwykłym linkiem — patrz reguła bazowa */

.summary{ margin-top:2.2rem; background:var(--paper-2); border:0; border-radius:0; padding:1.8rem; box-shadow:none; }
.summary__price{ display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; }
.summary__price .val{
  font-family:var(--font-sans); font-weight:800; font-size:1.9rem;
  color:var(--ink); line-height:1; letter-spacing:-.02em;
}
.summary__price .from{
  font-family:var(--font-serif); font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--grey);
}
.summary__pricenote{ font-size:11.5px; color:var(--grey); margin:.5rem 0 0; }
.summary__rows{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:0; font-size:12.5px; }
.summary__rows li{ display:flex; justify-content:space-between; gap:1.2rem; padding:.6rem 0; border-bottom:1px solid var(--line); }
.summary__rows li:first-child{ border-top:1px solid var(--line); }
.summary__rows .k{ color:var(--grey); opacity:1; }
.summary__rows .v{ font-weight:500; text-align:right; color:var(--ink); }
.lead-badge{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.4rem;
  background:none; border:0; border-radius:0; padding:0;
  font-family:var(--font-sans); font-weight:500; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.09em; color:var(--ink);
}
.summary .btn-row{ margin-top:1.5rem; }
.summary__note{ font-size:11.5px; color:var(--grey-2); opacity:1; margin:1.1rem 0 0; }

.copied{
  font-family:var(--font-sans); font-size:10.5px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--grey); margin-left:.7rem; opacity:0; transition:opacity .22s ease;
}
.copied.show{ opacity:1; }

/* =========================================================
   Lightbox
   ========================================================= */
.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(255,255,255,.98); display:none; align-items:center; justify-content:center; padding:5vh 6vw; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:90vh; width:auto; border:0; border-radius:var(--radius); }
.lightbox__close{
  position:absolute; top:1.2rem; right:1.4rem; width:36px; height:36px; border-radius:50%;
  cursor:pointer; background:transparent; border:1px solid var(--line); color:var(--ink);
  font-family:var(--font-sans); font-size:12px; transition:border-color .2s ease;
}
.lightbox__close:hover{ border-color:var(--ink); }

/* =========================================================
   Tabela rozmiarów
   ========================================================= */
.size-table{ width:100%; border-collapse:collapse; border:0; background:transparent; }
.size-table th, .size-table td{ padding:.75rem 1rem; text-align:left; font-size:12.5px; border-bottom:1px solid var(--line); }
.size-table thead th{
  background:transparent; color:var(--grey);
  font-family:var(--font-sans); font-weight:500; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.09em;
}
.size-table tbody tr:nth-child(even){ background:var(--paper-2); }
.table-scroll{ overflow-x:auto; }

/* =========================================================
   Stopka — granatowa, drobna, z wielkim wordmarkiem
   ========================================================= */
.site-footer{ background:var(--navy); color:rgba(255,255,255,.75); padding:4.5rem 0 1.6rem; border-top:1px solid rgba(255,255,255,.15); }
.footer-top{
  display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start;
  padding-bottom:3rem; border:0;
}
.footer-col h4{
  font-family:var(--font-serif); font-weight:400; color:#fff;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.9rem;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.footer-col a{ font-family:var(--font-serif); font-size:12.5px; color:rgba(255,255,255,.85); }
.footer-col a:hover{ text-decoration:underline; text-underline-offset:3px; color:#fff; }
.footer-col p{ font-family:var(--font-serif); font-size:12.5px; color:rgba(255,255,255,.55); max-width:34ch; margin:1.6rem 0 0; }

/* wielki wordmark — typografia, bo logo.png ma tylko 256 px szerokości.
   Subtelny, jaśniejszy odcień granatu — działa jak wodny znak w tle. */
.footer-wordmark{
  padding-bottom:.12em;
  font-family:var(--font-sans); font-weight:800; text-transform:uppercase;
  font-size:clamp(3rem,15.2vw,15rem); line-height:.82; letter-spacing:-.035em;
  color:rgba(255,255,255,.1); margin:1rem 0 .6rem; user-select:none;
}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:.8rem;
  font-family:var(--font-serif); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:rgba(255,255,255,.6); flex-wrap:wrap; gap:.6rem; border:0;
}
.footer-bottom a:hover{ text-decoration:underline; text-underline-offset:3px; color:#fff; }

/* =========================================================
   Responsywność
   ========================================================= */
@media (max-width:1180px){
  :root{ --edge:28px; }
  .main-nav ul{ gap:1.5rem; }
  .main-nav > ul > li > a, .sub-toggle, .subnav a{ font-size:11.5px; }
  .nav-actions{ gap:1.2rem; }
  .nav-actions a{ font-size:10.5px; }
}
@media (max-width:1024px){
  .product{ grid-template-columns:1fr; gap:2.4rem; }
  .pgal{ position:static; max-width:560px; }
  .gallery{ grid-template-columns:repeat(3,1fr); }
  .collage, .wall, .strip__track{ grid-template-columns:repeat(3,1fr); }
  /* rozciągnięcia kafelkują się bez dziur tylko przy 4 kolumnach */
  .collage .tall{ grid-row:auto; }
  .collage .wide{ grid-column:auto; }
}
@media (max-width:900px){
  .split, .contact-grid{ grid-template-columns:1fr; gap:2.4rem; }
  .stuff{ grid-template-columns:1fr; gap:1.8rem; }
  .hero-band{ grid-template-columns:1fr; height:min(58vh,460px); min-height:0; }
  .hero-band figure:nth-child(2){ display:none; } /* jedno zdjęcie na telefonie */
  .hero-band__overlay{ max-width:none; right:var(--edge); }
  .footer-top{ grid-template-columns:1fr; gap:2.4rem; }
}
@media (max-width:720px){
  :root{ --edge:18px; }
  .gallery{ grid-template-columns:repeat(2,1fr); gap:2rem 12px; }
  .collage, .wall, .strip__track{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .collage{ grid-auto-rows:150px; }
  .section{ padding:3.2rem 0; }
  .story-list .row{ grid-template-columns:1fr; gap:.3rem; }
  .form .row2{ grid-template-columns:1fr; }
  .footer-bottom{ justify-content:flex-start; }
  .summary{ padding:1.3rem; }
  .pgal__thumbs button{ width:64px; }
  .filter-row{ gap:1.4rem; }
  .topbar span{ font-size:10px; }
}
/* telefony: jedno duże zdjęcie produktowe pod drugim, nie dwie wąskie kolumny
   (laptopy/tablety zostają przy siatce z zapytania wyżej) */
@media (max-width:560px){
  .gallery{ grid-template-columns:1fr; gap:2.6rem; }
}

/* =========================================================
   Kroki z ilustracją (jak to działa / customs / rozmiarówka)
   Rysunki to inline SVG w kolorze tekstu, na tym samym szarym
   kaflu co zdjęcia produktów — żeby siatka trzymała się kupy.
   ========================================================= */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.6rem 14px; }
.step__art{
  background:var(--tile); border-radius:var(--radius); aspect-ratio:3/2;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.3rem; color:var(--ink);
}
.step__art svg{ width:52%; max-width:190px; height:auto; }
.step__no{
  display:block; font-family:var(--font-serif); font-size:11.5px;
  letter-spacing:.08em; color:var(--grey-2); margin-bottom:.5rem;
}
.step h3{
  font-family:var(--font-sans); font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink); margin-bottom:.55rem;
}
.step p{ color:var(--grey); font-size:13px; margin:0; }

/* =========================================================
   Listy rozwijane (materiał / kamień / kolor)
   ========================================================= */
.opt__label{
  display:block; font-family:var(--font-sans); font-weight:500; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.09em; color:var(--grey); margin-bottom:.6rem;
}
.select-wrap{ position:relative; }
.select-wrap::after{
  content:""; position:absolute; right:15px; top:50%; width:7px; height:7px;
  border-right:1px solid var(--ink); border-bottom:1px solid var(--ink);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.select-wrap select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  width:100%; font-family:var(--font-sans); font-weight:400; font-size:13px; color:var(--ink);
  background:transparent; border:1px solid var(--line); border-radius:0;
  padding:.85rem 2.6rem .85rem 1rem; line-height:1.3; cursor:pointer;
  transition:border-color .2s ease;
}
.select-wrap select:hover{ border-color:var(--grey-2); }
.select-wrap select:focus{ border-color:var(--ink); outline:0; }

/* =========================================================
   Koszyk — szuflada z prawej. Bez płatności: całość idzie
   jednym mailem, stan trzymany w localStorage.
   ========================================================= */
.bag{ position:fixed; inset:0; z-index:300; display:none; }
.bag.open{ display:block; }
.bag__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.32); }
.bag__panel{
  position:absolute; top:0; right:0; height:100%; width:min(420px,100%);
  background:var(--paper); display:flex; flex-direction:column;
  box-shadow:-24px 0 60px -34px rgba(0,0,0,.45);
}
.bag__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:1.3rem 1.6rem; border-bottom:1px solid var(--line);
  font-size:11.5px; text-transform:uppercase; letter-spacing:.09em; font-weight:500;
}
.bag__close{ background:none; border:0; padding:0; cursor:pointer; font-size:13px; color:var(--ink); }
.bag__body{ flex:1; overflow-y:auto; padding:0 1.6rem; }
.bag__empty{ color:var(--grey); font-size:13px; padding:2.4rem 0; }
.bag__item{
  display:grid; grid-template-columns:58px 1fr auto; gap:1rem;
  padding:1.2rem 0; border-bottom:1px solid var(--line);
}
.bag__thumb{ background:var(--tile); border-radius:8px; overflow:hidden; aspect-ratio:4/5; }
.bag__thumb img{ width:100%; height:100%; object-fit:cover; }
.bag__name{
  font-family:var(--font-serif); font-size:11.5px;
  text-transform:uppercase; letter-spacing:.015em; color:var(--ink);
}
.bag__spec{ font-size:11.5px; color:var(--grey); margin:.35rem 0 0; line-height:1.5; }
.bag__side{ display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:.6rem; }
.bag__price{ font-family:var(--font-serif); font-size:11.5px; white-space:nowrap; }
.bag__remove{
  background:none; border:0; padding:0 0 1px; cursor:pointer;
  font-family:var(--font-sans); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--grey-2); border-bottom:1px solid var(--line);
  transition:color .2s ease, border-color .2s ease;
}
.bag__remove:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.bag__foot{ border-top:1px solid var(--line); padding:1.4rem 1.6rem 1.8rem; }
.bag__total{
  display:flex; justify-content:space-between; margin-bottom:1.2rem;
  font-family:var(--font-serif); font-size:12.5px; text-transform:uppercase; letter-spacing:.06em;
}
.bag__send{ width:100%; }
.bag__note{ font-size:11px; color:var(--grey-2); margin:1rem 0 0; line-height:1.55; }

/* =========================================================
   Blok „napisz do mnie" na stronie customów
   ========================================================= */
.cta-split{
  display:grid; grid-template-columns:1fr auto; gap:2.4rem; align-items:center;
  padding:2rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.cta-split__text p{ margin:0; max-width:54ch; font-size:13px; }
.cta-split__actions{ display:flex; gap:.7rem; flex-wrap:wrap; }

/* =========================================================
   Drobiazgi
   ========================================================= */
.table-note{ margin-top:1.4rem; font-size:12px; color:var(--grey); max-width:74ch; }
.contact-lines a{ border-bottom:1px solid var(--line); transition:border-color .2s ease; }
.contact-lines a:hover{ border-bottom-color:var(--ink); }

@media (max-width:900px){
  .steps{ grid-template-columns:1fr; gap:2rem; }
  .cta-split{ grid-template-columns:1fr; gap:1.4rem; align-items:start; }
}
@media (max-width:720px){
  .steps{ gap:1.8rem; }
  .step__art{ aspect-ratio:2/1; }
}