/* ==========================================================================
   inna.pl — drukarnia odzieży · ETAP 1 · wspólne style
   Koncepcja układu: „wzornik i metka” — kafle jak karty kolorów,
   ceny jak metki (netto / szt.), dużo bieli, jeden żywy kolor marki
   i jeden akcent używany oszczędnie.
   Paleta: 3 warianty do porównania (data-palette na <html>): A / B / C
   ========================================================================== */

:root{
  /* --- Paleta A: Kobalt + limonka (domyślna) --- */
  --brand:#2F3CF4;          /* główny, żywy */
  --brand-strong:#1C27C9;   /* hover / tekst na jasnym tle */
  --brand-tint:#ECEEFF;     /* spokojne tło sekcji */
  --pop:#D9F55C;            /* akcent: wyróżnienia, marker, plakietki */
  --pop-ink:#1D2410;        /* tekst na akcencie */
  --calm:#EEF3EF;           /* drugi spokojny kolor (szałwia) */

  /* --- Neutralne (lekko chłodne, pod kolor marki) --- */
  --ink:#14151C;
  --ink-2:#3B3D4A;
  --muted:#6C6F7D;
  --line:#E3E4EA;
  --line-strong:#CDCFD8;
  --surface:#FFFFFF;
  --surface-2:#F6F7F9;
  --bg:#FFFFFF;

  /* --- Semantyczne --- */
  --ok:#17845B;
  --ok-tint:#E5F5EE;
  --warn:#B86E00;
  --heart:#E5484D;

  /* --- Typografia --- */
  --f-display:'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --f-body:'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-xs:.78rem;
  --fs-sm:.875rem;
  --fs-base:1rem;
  --fs-md:1.125rem;
  --fs-lg:1.375rem;
  --fs-xl:clamp(1.6rem, 2.6vw, 2.25rem);
  --fs-2xl:clamp(2.1rem, 4vw, 3.1rem);
  --fs-hero:clamp(2.7rem, 6.4vw, 5.2rem);

  /* --- Kształt --- */
  --r-sm:8px;
  --r:14px;
  --r-lg:22px;
  --r-pill:999px;
  --shadow:0 1px 2px rgba(20,21,28,.05), 0 6px 18px rgba(20,21,28,.06);
  --shadow-lg:0 2px 4px rgba(20,21,28,.05), 0 18px 44px rgba(20,21,28,.12);

  --wrap:1240px;
  --gutter:clamp(16px, 3vw, 28px);
  --section:clamp(56px, 8vw, 104px);

  color-scheme:light;
}

/* --- Paleta B: Koral + mięta --- */
:root[data-palette="b"]{
  --brand:#F2542D;
  --brand-strong:#C93A16;
  --brand-tint:#FFF0EA;
  --pop:#8FE3C3;
  --pop-ink:#0E2E22;
  --calm:#EEF1F6;
  --ink:#191617;
  --ink-2:#433C3D;
  --muted:#77706F;
  --line:#ECE6E3;
  --line-strong:#D9D0CC;
  --surface-2:#F8F6F5;
}
/* --- Paleta C: Morski turkus + słońce --- */
:root[data-palette="c"]{
  --brand:#0A8F8A;
  --brand-strong:#06716D;
  --brand-tint:#E3F5F3;
  --pop:#FFC93C;
  --pop-ink:#2C2100;
  --calm:#F1EFF8;
  --ink:#10191A;
  --ink-2:#36484A;
  --muted:#667779;
  --line:#E1E8E8;
  --line-strong:#C9D5D5;
  --surface-2:#F4F8F8;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition:none!important; animation:none!important;} }
body{
  margin:0;
  font-family:var(--f-body);
  font-size:var(--fs-base);
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
  color:var(--ink);
}
h1{font-size:var(--fs-2xl);}
h2{font-size:var(--fs-2xl);}
h3{font-size:var(--fs-lg); letter-spacing:-.01em;}
h4{font-size:var(--fs-md);}
p{margin:0; color:var(--ink-2);}
a{color:inherit; text-decoration:none;}
img,svg{max-width:100%;}
button,input,select,textarea{font:inherit; color:inherit;}
:focus-visible{outline:3px solid var(--brand); outline-offset:2px; border-radius:6px;}
ul{margin:0; padding:0; list-style:none;}

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter);}
.section{padding-block:var(--section);}
.section--tint{background:var(--surface-2);}
.section--brand{background:var(--brand-tint);}
.stack{display:flex; flex-direction:column; gap:16px;}
.sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ====== Etykiety / eyebrow ====== */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand-strong);
}
.eyebrow::before{content:""; width:18px; height:3px; border-radius:2px; background:var(--brand);}

.section-head{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:24px 48px;
  align-items:end; margin-bottom:36px;
}
.section-head .lead{max-width:56ch; font-size:var(--fs-md); color:var(--muted);}
.section-head .head-side{display:flex; flex-direction:column; gap:14px; align-items:flex-start;}
.section-head--center{grid-template-columns:1fr; text-align:center; justify-items:center;}
@media (max-width:820px){ .section-head{grid-template-columns:1fr;} }

.link-more{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--brand-strong);
  border-bottom:2px solid currentColor; padding-bottom:2px;
}
.link-more:hover{color:var(--ink);}
.link-more svg{width:16px; height:16px; transition:transform .15s;}
.link-more:hover svg{transform:translateX(3px);}

/* ====== Przyciski ====== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px; border-radius:var(--r-pill); border:1.5px solid transparent;
  font-weight:700; font-size:.95rem; line-height:1.1; cursor:pointer; white-space:nowrap;
  transition:background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.btn svg{width:18px; height:18px; flex:none;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--brand); color:#fff;}
.btn-primary:hover{background:var(--brand-strong);}
.btn-dark{background:var(--ink); color:#fff;}
.btn-dark:hover{background:var(--brand-strong);}
.btn-ghost{background:var(--surface); border-color:var(--line-strong); color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-pop{background:var(--pop); color:var(--pop-ink);}
.btn-pop:hover{filter:brightness(.95);}
.btn-sm{padding:10px 16px; font-size:.86rem;}
.btn-lg{padding:17px 28px; font-size:1rem;}
.btn-block{width:100%;}
.btn-wrap{white-space:normal; text-align:center;}

.chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--r-pill);
  border:1.5px solid var(--line); background:var(--surface); font-size:var(--fs-sm); font-weight:600; cursor:pointer;
  transition:border-color .15s, background .15s, color .15s;
}
.chip:hover{border-color:var(--ink);}
.chip[aria-pressed="true"], .chip.is-active{background:var(--ink); border-color:var(--ink); color:#fff;}
.chip .x{opacity:.7;}

/* ====== Pasek wersji poglądowej ====== */
.proto-bar{
  background:var(--ink); color:#fff; font-size:var(--fs-xs); letter-spacing:.02em;
  text-align:center; padding:7px 16px;
}
.proto-bar b{color:var(--pop);}

/* ====== Topbar ====== */
.topbar{background:var(--surface-2); border-bottom:1px solid var(--line); font-size:var(--fs-sm); color:var(--ink-2);}
.topbar .wrap{display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; padding-block:9px;}
.topbar .t-left{display:flex; align-items:center; gap:6px;}
.topbar .t-center{font-weight:700; color:var(--ink);}
.topbar .t-right{justify-self:end; display:flex; gap:18px;}
.topbar .t-right a:hover{color:var(--brand-strong);}
.stars{color:#F5A524; letter-spacing:1px;}
@media (max-width:900px){
  .topbar .wrap{grid-template-columns:1fr; justify-items:center; gap:4px;}
  .topbar .t-left,.topbar .t-right{display:none;}
}

/* ====== Header ====== */
.site-header{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:50;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex; align-items:center; gap:20px; min-height:72px;}
.logo{
  display:inline-flex; align-items:baseline; gap:1px;
  font-family:var(--f-display); font-weight:800; font-size:1.6rem; letter-spacing:-.04em; color:var(--ink);
}
.logo .dot{color:var(--brand);}
.logo small{font-family:var(--f-body); font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-left:8px;}

.nav{display:flex; align-items:center; gap:2px; margin-left:auto; margin-right:auto;}
.nav > li{position:relative;}
.nav > li > a, .nav > li > button{
  display:inline-flex; align-items:center; gap:4px; padding:10px 12px; border-radius:var(--r-pill);
  font-weight:600; font-size:.94rem; background:none; border:0; cursor:pointer; color:var(--ink); white-space:nowrap;
}
.nav > li > a:hover, .nav > li > button:hover, .nav > li.is-active > a, .nav > li.is-active > button{background:var(--brand-tint); color:var(--brand-strong);}
.nav .caret{width:14px; height:14px; transition:transform .15s;}
.nav li:hover .caret, .nav li:focus-within .caret{transform:rotate(180deg);}
.dropdown{
  position:absolute; top:100%; left:50%; transform:translate(-50%, 8px);
  min-width:280px; padding:10px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; transition:opacity .15s, transform .15s, visibility .15s;
}
.nav li:hover > .dropdown, .nav li:focus-within > .dropdown{opacity:1; visibility:visible; transform:translate(-50%, 2px);}
.dropdown a{display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px;}
.dropdown a:hover{background:var(--surface-2);}
.dropdown a b{font-weight:700; font-size:.95rem;}
.dropdown a span{font-size:var(--fs-sm); color:var(--muted);}
.dropdown--wide{min-width:520px; display:grid; grid-template-columns:1fr 1fr; gap:2px;}
.dropdown .dd-foot{grid-column:1/-1; border-top:1px solid var(--line); margin-top:6px; padding-top:6px;}
.dropdown .dd-foot a{flex-direction:row; justify-content:space-between; font-weight:700; color:var(--brand-strong);}

.header-actions{display:flex; align-items:center; gap:8px;}
.icon-btn{
  position:relative; width:44px; height:44px; display:inline-grid; place-items:center;
  border-radius:50%; border:1.5px solid var(--line); background:var(--surface); cursor:pointer;
}
.icon-btn:hover{border-color:var(--ink);}
.icon-btn svg{width:20px; height:20px;}
.icon-btn .badge{
  position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px;
  border-radius:10px; background:var(--heart); color:#fff; font-size:.72rem; font-weight:800;
  display:grid; place-items:center; border:2px solid var(--surface);
}
.icon-btn .badge[data-n="0"]{display:none;}
.icon-btn.has-items svg{color:var(--heart); fill:var(--heart);}
.menu-toggle{display:none;}

.search-panel{border-top:1px solid var(--line); background:var(--surface);}
.search-panel form{display:flex; gap:10px; padding-block:14px;}
.search-panel input{flex:1; min-width:0; padding:13px 16px; border-radius:var(--r-pill); border:1.5px solid var(--line-strong); background:var(--surface);}

@media (max-width:1360px){ .site-header .logo small{display:none;} }
@media (max-width:1180px){
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(380px, 88vw); margin:0; z-index:60;
    flex-direction:column; align-items:stretch; gap:0; padding:84px 16px 24px;
    background:var(--surface); box-shadow:var(--shadow-lg); overflow-y:auto;
    display:none;
  }
  .nav.is-open{display:flex; animation:navIn .2s ease-out;}
  .nav > li > a, .nav > li > button{width:100%; justify-content:space-between; padding:14px 12px; border-radius:10px; font-size:1.05rem;}
  .dropdown, .dropdown--wide{position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:0; min-width:0; display:none; padding:0 0 8px 8px; grid-template-columns:1fr;}
  .nav li.is-open > .dropdown{display:block;}
  .nav li:hover > .dropdown{transform:none;}
  .menu-toggle{display:inline-grid;}
  .header-actions{margin-left:auto;}
  .nav-close{position:absolute; top:18px; right:16px;}
}
@media (min-width:1181px){ .nav-close{display:none;} }
@media (max-width:560px){
  .header-actions .btn{display:none;}
  .logo small{display:none;}
}
@keyframes navIn{from{transform:translateX(40px); opacity:0}to{transform:none; opacity:1}}
.nav-scrim{position:fixed; inset:0; background:rgba(20,21,28,.35); z-index:55;}

/* ====== Breadcrumb ====== */
.crumbs{background:var(--surface-2); border-bottom:1px solid var(--line); font-size:var(--fs-sm); color:var(--muted);}
.crumbs .wrap{display:flex; flex-wrap:wrap; gap:8px; padding-block:12px;}
.crumbs a:hover{color:var(--brand-strong);}
.crumbs b{color:var(--ink); font-weight:600;}

/* ====== Hero ====== */
.hero{position:relative; overflow:hidden; background:var(--surface);}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:40px; align-items:center; padding-block:clamp(40px,6vw,80px) clamp(36px,5vw,64px);}
.hero-copy{display:flex; flex-direction:column; gap:22px; align-items:flex-start;}
.est{
  width:78px; height:78px; border-radius:50%; border:2px solid var(--ink);
  display:grid; place-items:center; text-align:center; transform:rotate(-10deg);
  font-family:var(--f-display); line-height:1;
}
.est small{display:block; font-size:.7rem; font-weight:600;}
.est b{display:block; font-size:1.35rem; font-weight:800;}
.hero h1{font-size:var(--fs-hero); font-weight:800; letter-spacing:-.045em; line-height:.95;}
.marker{position:relative; display:inline-block; z-index:0; white-space:nowrap;}
.marker::after{
  content:""; position:absolute; left:-.06em; right:-.08em; bottom:.04em; height:.42em; z-index:-1;
  background:var(--pop); border-radius:.12em; transform:skewX(-8deg);
}
.hero .hero-sub{font-size:clamp(1.1rem,1.6vw,1.3rem); font-weight:600; color:var(--ink); max-width:34ch; line-height:1.4;}
.hero .hero-note{color:var(--muted); max-width:52ch;}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px;}

.hero-art{position:relative; aspect-ratio:1/1; max-width:560px; width:100%; justify-self:end;}
.hero-art .blob{position:absolute; inset:6% 4% 4% 8%; border-radius:46% 54% 50% 50% / 52% 46% 54% 48%; background:var(--brand-tint);}
.hero-art .g{position:absolute; filter:drop-shadow(0 18px 24px rgba(20,21,28,.16));}
.hero-art .g1{width:62%; left:4%; top:20%; transform:rotate(-8deg);}
.hero-art .g2{width:56%; right:0; top:4%; transform:rotate(7deg);}
.hero-art .g3{width:34%; right:10%; bottom:2%; transform:rotate(-4deg);}
.hero-art .swatch-strip{
  position:absolute; left:2%; bottom:6%; display:flex; gap:6px; padding:8px; border-radius:var(--r-pill);
  background:var(--surface); box-shadow:var(--shadow);
}
.hero-art .swatch-strip i{width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);}
.hero-art .photo-note{position:absolute; right:0; bottom:-4px; font-size:var(--fs-xs); color:var(--muted);}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;}
  .hero-art{justify-self:center; max-width:420px;}
}

/* ====== USP — jeden rząd ====== */
.usp{border-block:1px solid var(--line); background:var(--surface);}
.usp ul{display:grid; grid-template-columns:repeat(4, minmax(0,1fr));}
.usp li{display:flex; align-items:center; gap:12px; padding:20px 16px; font-size:var(--fs-sm); color:var(--muted);}
.usp li + li{border-left:1px solid var(--line);}
.usp li b{display:block; color:var(--ink); font-size:var(--fs-base);}
.usp .ico{width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center; background:var(--brand-tint); color:var(--brand-strong);}
.usp .ico svg{width:22px; height:22px;}
@media (max-width:900px){
  .usp ul{grid-template-columns:repeat(2,minmax(0,1fr));}
  .usp li:nth-child(3){border-left:0;}
  .usp li:nth-child(n+3){border-top:1px solid var(--line);}
}
@media (max-width:480px){ .usp li{padding:14px 8px; gap:8px;} .usp .ico{width:34px;height:34px;} }

/* ====== Kafel produktu ====== */
.grid-products{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px;}
@media (max-width:1060px){ .grid-products{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:760px){ .grid-products{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;} }

.ptile{
  position:relative; display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); transition:box-shadow .2s, border-color .2s, transform .2s;
  min-width:0;
}
.ptile:hover{box-shadow:var(--shadow-lg); border-color:transparent; transform:translateY(-2px);}
.ptile .p-media{
  position:relative; display:block; aspect-ratio:1/1; border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
  background:var(--surface-2); overflow:hidden;
}
.ptile .p-media svg{position:absolute; inset:9%; width:82%; height:82%; transition:transform .3s;}
.ptile:hover .p-media svg{transform:scale(1.04);}
.p-star{
  position:absolute; top:10px; left:10px; z-index:2;
  display:inline-flex; align-items:center; gap:4px; padding:4px 9px 4px 7px; border-radius:var(--r-pill);
  background:var(--pop); color:var(--pop-ink); font-size:.72rem; font-weight:800; letter-spacing:.02em;
}
.p-star svg{width:13px; height:13px;}
.p-fav{
  position:absolute; top:8px; right:8px; z-index:2; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; background:var(--surface); border:0; cursor:pointer; box-shadow:var(--shadow);
  color:var(--ink-2);
}
.p-fav svg{width:18px; height:18px;}
.p-fav[aria-pressed="true"]{color:#fff; background:var(--heart);}
.p-fav[aria-pressed="true"] svg{fill:#fff;}
.ptile .p-body{display:flex; flex-direction:column; gap:6px; padding:12px 14px 16px; flex:1;}
.p-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 8px; min-height:26px;}
@media (max-width:760px){ .ptile .tags{justify-content:flex-start;} .ptile .p-body{padding:10px 10px 14px;} .sw{width:16px;height:16px;} .p-star{font-size:0; padding:5px; gap:0;} .p-star svg{width:14px;height:14px;} }
.swatches{position:relative; display:flex; align-items:center; gap:5px;}
.sw{
  width:18px; height:18px; border-radius:50%; border:0; padding:0; cursor:pointer; flex:none;
  box-shadow:inset 0 0 0 1px rgba(20,21,28,.18);
}
.sw.is-on{box-shadow:inset 0 0 0 1px rgba(20,21,28,.18), 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink);}
.sw-more{
  border:0; background:none; cursor:pointer; padding:2px 4px; border-radius:6px;
  font-size:.75rem; font-weight:700; color:var(--brand-strong);
}
.sw-more:hover{background:var(--brand-tint);}
.sw-pop{
  position:absolute; left:-6px; top:calc(100% + 8px); z-index:20; width:228px; padding:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-lg);
}
.sw-pop p{font-size:.75rem; font-weight:700; color:var(--muted); margin-bottom:8px;}
.sw-pop .sw-grid{display:grid; grid-template-columns:repeat(7, 22px); gap:7px;}
.sw-pop .sw{width:22px; height:22px;}
.tags{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px;}
.tag{
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--r-pill);
  font-size:.7rem; font-weight:700; white-space:nowrap; background:var(--surface-2); color:var(--ink-2);
}
.tag svg{width:11px; height:11px;}
.tag--eco{background:var(--ok-tint); color:var(--ok);}
.tag--best{background:var(--brand-tint); color:var(--brand-strong);}
.tag--fast{background:var(--calm); color:var(--ink-2);}
.p-brand{font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.p-name{font-weight:700; font-size:.98rem; line-height:1.3; color:var(--ink);}
.p-name a::after{content:""; position:absolute; inset:0; z-index:1;}
.ptile .swatches, .ptile .p-fav, .ptile .p-star{z-index:3;}
.ptile .sw-pop{z-index:20;}
.p-style{font-size:.78rem; color:var(--muted);}
.p-price{margin-top:auto; padding-top:6px; display:flex; align-items:baseline; gap:6px; font-variant-numeric:tabular-nums;}
.p-price b{font-family:var(--f-display); font-size:1.2rem; font-weight:700; color:var(--brand-strong); letter-spacing:-.01em;}
.p-price span{font-size:.75rem; color:var(--muted);}

/* ====== Usługi — karty ze zdjęciem ====== */
.services{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px; align-items:start;}
@media (max-width:1100px){ .services{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:720px){ .services{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;} }
@media (max-width:460px){ .services{grid-template-columns:1fr;} }
.svc{background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;}
.svc .svc-body{padding:16px 16px 20px; display:flex; flex-direction:column; gap:10px;}
.svc h3{font-size:1.2rem;}
.svc .svc-min{
  align-self:flex-start; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--r-pill); background:var(--pop); color:var(--pop-ink);
}
.dots{display:flex; flex-direction:column; gap:7px;}
.dots li{position:relative; padding-left:16px; font-size:.88rem; line-height:1.4; color:var(--ink-2);}
.dots li::before{content:""; position:absolute; left:2px; top:.5em; width:6px; height:6px; border-radius:50%; background:var(--brand);}

/* Placeholder zdjęcia */
.photo{
  position:relative; aspect-ratio:16/10; overflow:hidden; display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 80% 10%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 60%),
    linear-gradient(135deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 70%, var(--brand)) 100%);
  color:#fff;
}
.photo svg.photo-g{width:46%; height:auto; opacity:.9; filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));}
.photo .photo-label{
  position:absolute; left:10px; bottom:10px; display:inline-flex; align-items:center; gap:6px;
  font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--r-pill); background:rgba(255,255,255,.16); backdrop-filter:blur(4px); color:#fff;
}
.photo .photo-label svg{width:12px; height:12px;}
.photo--light{background:var(--calm); color:var(--ink);}
.photo--light .photo-label{background:rgba(20,21,28,.08); color:var(--ink-2);}

/* ====== Projekt gratis — kroki ====== */
.design-intro{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 56px; align-items:end; margin-bottom:40px;}
.design-intro h2 .marker::after{height:.36em;}
.design-intro .free{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:8px 14px; border-radius:var(--r-pill);
  background:var(--ink); color:#fff; font-weight:700; font-size:var(--fs-sm);
}
.design-intro .free b{color:var(--pop);}
.design-intro p{font-size:var(--fs-md);}
@media (max-width:820px){ .design-intro{grid-template-columns:1fr;} }
.steps{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; counter-reset:step;}
@media (max-width:820px){ .steps{grid-template-columns:1fr;} }
.step{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px; display:grid; grid-template-columns:96px minmax(0,1fr); gap:18px; align-items:center;}
.step .step-n{font-family:var(--f-display); font-weight:800; font-size:.8rem; letter-spacing:.06em; color:var(--brand-strong); text-transform:uppercase;}
.step h3{font-size:1.08rem; margin:4px 0 6px;}
.step p{font-size:.9rem; color:var(--muted);}
.step .mock{
  aspect-ratio:1/1; border-radius:12px; background:var(--surface-2); display:grid; place-items:center;
  font-family:var(--f-display); font-weight:800; font-size:.86rem; line-height:1; text-align:center; letter-spacing:-.01em;
}
.step:nth-child(1) .mock{background:repeating-linear-gradient(0deg, var(--surface-2) 0 11px, var(--line) 11px 12px); color:var(--ink-2); font-style:italic; font-weight:600; transform:rotate(-3deg);}
.step:nth-child(2) .mock{background:var(--brand); color:#fff;}
.step:nth-child(3) .mock{background:var(--pop); color:var(--pop-ink);}

/* ====== Formularz zapytania ====== */
.quote{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:0; border-radius:var(--r-lg); overflow:hidden; background:var(--brand); color:#fff;}
.quote-info{padding:clamp(28px,4vw,52px); display:flex; flex-direction:column; gap:18px;}
.quote-info h2{color:#fff; font-size:var(--fs-xl);}
.quote-info h2 sup{color:var(--pop);}
.quote-info p{color:rgba(255,255,255,.88); font-size:var(--fs-md);}
.quote-info .q-strong{font-weight:700; color:#fff;}
.quote-contacts{display:flex; flex-wrap:wrap; gap:14px 32px; margin-top:6px;}
.quote-contacts a{display:flex; flex-direction:column;}
.quote-contacts b{font-family:var(--f-display); font-size:clamp(1.3rem,2.2vw,1.65rem); font-weight:700; letter-spacing:-.01em;}
.quote-contacts span{font-size:var(--fs-sm); color:rgba(255,255,255,.75);}
.quote-info .foot{margin-top:auto; font-size:var(--fs-sm); color:rgba(255,255,255,.75);}
.quote-form{background:var(--surface); color:var(--ink); margin:12px; border-radius:calc(var(--r-lg) - 6px); padding:clamp(20px,3vw,32px);}
@media (max-width:900px){ .quote{grid-template-columns:1fr;} }

.form{display:grid; gap:14px;}
.form .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:520px){ .form .row2{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:6px; min-width:0;}
.field label{font-size:var(--fs-sm); font-weight:700; color:var(--ink);}
.field label .opt{font-weight:500; color:var(--muted);}
.field input, .field textarea, .field select{
  width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line-strong); background:var(--surface);
  transition:border-color .15s, box-shadow .15s;
}
.field textarea{min-height:110px; resize:vertical;}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-tint);}
.drop{
  display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:12px; cursor:pointer;
  border:1.5px dashed var(--line-strong); background:var(--surface-2); transition:border-color .15s, background .15s;
}
.drop:hover, .drop.is-over{border-color:var(--brand); background:var(--brand-tint);}
.drop .ico{width:40px; height:40px; flex:none; border-radius:10px; display:grid; place-items:center; background:var(--surface); color:var(--brand-strong); box-shadow:var(--shadow);}
.drop .ico svg{width:20px; height:20px;}
.drop b{display:block; font-size:var(--fs-sm);}
.drop span{font-size:.78rem; color:var(--muted);}
.drop input{position:absolute; width:1px; height:1px; opacity:0;}
.check{display:flex; gap:10px; align-items:flex-start; font-size:.82rem; color:var(--muted);}
.check input{margin-top:3px; accent-color:var(--brand); width:16px; height:16px; flex:none;}
.captcha{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-sm); max-width:300px;
}
.captcha .ok{display:flex; align-items:center; gap:8px; font-weight:600;}
.captcha .ok i{width:22px; height:22px; border-radius:50%; background:var(--ok); display:grid; place-items:center; color:#fff;}
.captcha .ok i svg{width:13px; height:13px;}
.captcha small{font-size:.66rem; color:var(--muted); text-align:right; line-height:1.2;}
.trust{display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center; font-size:.8rem; color:var(--muted);}
.trust span{display:inline-flex; align-items:center; gap:6px;}
.trust svg{width:15px; height:15px; color:var(--ok);}
.form-hint{font-size:.8rem; color:var(--muted); text-align:center;}
.form-done{padding:14px 16px; border-radius:12px; background:var(--ok-tint); color:var(--ok); font-weight:600; font-size:var(--fs-sm);}

/* ====== Realizacje — slider ====== */
.slider{position:relative;}
.slider-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 4*16px)/5); gap:16px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px;
}
.slider-track::-webkit-scrollbar{display:none;}
@media (max-width:1060px){ .slider-track{grid-auto-columns:calc((100% - 2*16px)/3);} }
@media (max-width:640px){ .slider-track{grid-auto-columns:72%;} }
.slider-nav{display:flex; gap:8px;}
.arrow{
  width:48px; height:48px; border-radius:50%; border:1.5px solid var(--line-strong); background:var(--surface);
  display:grid; place-items:center; cursor:pointer; transition:background .15s, border-color .15s, color .15s;
}
.arrow:hover{background:var(--ink); border-color:var(--ink); color:#fff;}
.arrow svg{width:20px; height:20px;}
.work{scroll-snap-align:start; display:flex; flex-direction:column; gap:10px; min-width:0;}
.work .w-media{position:relative; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden; display:grid; place-items:center;}
.work .w-media > svg{width:68%; height:auto; filter:drop-shadow(0 12px 16px rgba(0,0,0,.18));}
.work .w-ph svg{width:11px; height:11px;}
.work .w-media .w-print{position:absolute; inset:0; display:grid; place-items:center;}
.work .w-ph{
  display:inline-flex; align-items:center; gap:5px;
  position:absolute; left:10px; top:10px; font-size:.64rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--r-pill); background:rgba(255,255,255,.75); color:var(--ink-2);
}
.work .w-tech{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.92rem;}
.work .w-tech i{width:9px; height:9px; border-radius:50%; background:var(--brand);}
.grid-works{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px 16px;}
@media (max-width:1060px){ .grid-works{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:640px){ .grid-works{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px;} }

/* ====== Marki ====== */
.brands{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:12px;}
@media (max-width:1060px){ .brands{grid-template-columns:repeat(5,minmax(0,1fr));} }
@media (max-width:720px){ .brands{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:420px){ .brands{grid-template-columns:repeat(2,minmax(0,1fr));} }
.brand-tile{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  aspect-ratio:3/2; padding:10px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line);
  transition:border-color .15s, box-shadow .15s, transform .15s; text-align:center;
}
.brand-tile:hover{box-shadow:var(--shadow-lg); border-color:transparent; transform:translateY(-2px);}
.brand-tile .wm{
  font-family:var(--f-display); font-weight:800; font-size:clamp(.95rem,1.4vw,1.15rem); letter-spacing:-.01em; line-height:1.05;
  color:var(--bc, var(--ink)); transition:color .2s, filter .2s;
}
.brand-tile .wm small{display:block; font-family:var(--f-body); font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.75;}
.brand-tile .ph{font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.brands[data-mode="mono"] .wm{color:var(--ink-2); filter:grayscale(1);}
.brands[data-mode="mono"] .brand-tile:hover .wm{color:var(--bc, var(--ink)); filter:none;}
.seg{display:inline-flex; padding:4px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line);}
.seg button{border:0; background:none; padding:7px 14px; border-radius:var(--r-pill); font-weight:700; font-size:.82rem; cursor:pointer; color:var(--muted);}
.seg button[aria-pressed="true"]{background:var(--ink); color:#fff;}

/* ====== Dla kogo ====== */
.audience{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px;}
@media (max-width:1000px){ .audience{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:460px){ .audience{grid-template-columns:1fr;} }
.aud{background:var(--surface); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;}
.aud .photo{aspect-ratio:16/9;}
.aud-body{padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px;}
.aud h3{font-size:1.06rem; text-transform:none;}
.aud ul{display:flex; flex-wrap:wrap; gap:6px;}
.aud li{font-size:.8rem; padding:3px 10px; border-radius:var(--r-pill); background:var(--surface-2); color:var(--ink-2);}
.aud--all{background:var(--ink); color:#fff;}
.aud--all h3{color:#fff;}
.aud--all p{color:rgba(255,255,255,.8);}
.aud--all .aud-body{justify-content:center; height:100%; padding:24px;}
.aud--all .big{font-family:var(--f-display); font-weight:800; font-size:1.5rem; line-height:1.1; color:var(--pop);}
.plansza-note{display:inline-flex; align-items:center; gap:8px; font-size:.8rem; color:var(--muted); padding:6px 12px; border-radius:var(--r-pill); border:1px dashed var(--line-strong);}

/* ====== Opinie ====== */
.reviews{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;}
@media (max-width:900px){ .reviews{grid-template-columns:1fr;} }
.review{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; display:flex; flex-direction:column; gap:14px;}
.review .r-top{display:flex; justify-content:space-between; align-items:center;}
.review .r-score{font-weight:800; font-variant-numeric:tabular-nums;}
.review blockquote{margin:0; font-size:1rem; color:var(--ink);}
.review .r-who{display:flex; align-items:center; gap:10px; margin-top:auto;}
.review .av{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--brand-tint); color:var(--brand-strong); font-weight:800; font-size:.8rem;}
.review .r-who b{display:block; font-size:.9rem;}
.review .r-who span{font-size:.78rem; color:var(--muted);}
.sample{font-size:.64rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:var(--r-pill); background:var(--surface-2); color:var(--muted); border:1px dashed var(--line-strong);}
.clients{margin-top:40px; padding-top:28px; border-top:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:16px;}
.clients .lbl{font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.client-logos{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; width:100%;}
@media (max-width:820px){ .client-logos{grid-template-columns:repeat(3,minmax(0,1fr));} }
.client-logos span{height:64px; border-radius:12px; border:1px dashed var(--line-strong); display:grid; place-items:center; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}

/* ====== Footer ====== */
.site-footer{background:var(--ink); color:rgba(255,255,255,.72); padding-block:56px 28px; margin-top:0;}
.site-footer .f-grid{display:grid; grid-template-columns:1.4fr repeat(4, minmax(0,1fr)); gap:32px;}
@media (max-width:980px){ .site-footer .f-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .site-footer .f-about{grid-column:1/-1;} }
.site-footer .logo{color:#fff;}
.site-footer h4{color:#fff; font-size:.95rem; margin-bottom:14px;}
.site-footer li{margin-bottom:9px; font-size:.92rem;}
.site-footer a:hover{color:var(--pop);}
.site-footer .f-about p{color:rgba(255,255,255,.65); font-size:.92rem; margin-top:14px; max-width:36ch;}
.site-footer .muted-link{opacity:.55;}
.site-footer .f-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); font-size:.82rem;}
.site-footer .f-bottom nav{display:flex; gap:18px;}
.socials{display:flex; gap:8px; margin-top:18px;}
.socials a{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.08);}
.socials a:hover{background:var(--pop); color:var(--pop-ink);}
.socials svg{width:17px; height:17px;}

/* ====== Przełącznik palety (tylko podgląd) ====== */
.palette-switch{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:70;
  display:flex; align-items:center; gap:6px; padding:6px 8px 6px 14px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-lg); font-size:.78rem; font-weight:700;
}
.palette-switch button{
  display:inline-flex; align-items:center; gap:2px; padding:4px; border-radius:var(--r-pill); border:2px solid transparent; background:none; cursor:pointer;
}
.palette-switch button[aria-pressed="true"]{border-color:var(--ink);}
.palette-switch i{width:16px; height:16px; border-radius:50%; display:block;}
.palette-switch .lbl-full{white-space:nowrap;}
@media (max-width:520px){ .palette-switch .lbl-full{display:none;} }

/* ====== Katalog ====== */
.page-head{padding-block:clamp(28px,4vw,48px) 8px;}
.page-head h1{font-size:var(--fs-2xl); margin-top:12px;}
.page-head p{margin-top:12px; max-width:62ch; font-size:var(--fs-md); color:var(--muted);}
.page-head .accent{color:var(--brand-strong); font-weight:700;}
.catalog{display:grid; grid-template-columns:240px minmax(0,1fr); gap:36px; padding-block:24px 72px;}
@media (max-width:960px){ .catalog{grid-template-columns:1fr;} }
.filters{display:flex; flex-direction:column; gap:26px;}
.filters h3{font-family:var(--f-body); font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px;}
.flist{display:flex; flex-direction:column; gap:2px;}
.flist button{
  display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; text-align:left;
  padding:8px 10px; border:0; border-radius:10px; background:none; cursor:pointer; font-weight:500; font-size:.94rem; color:var(--ink-2);
}
.flist button:hover{background:var(--surface-2); color:var(--ink);}
.flist button[aria-pressed="true"]{background:var(--brand-tint); color:var(--brand-strong); font-weight:700;}
.flist button .n{font-size:.75rem; color:var(--muted); font-variant-numeric:tabular-nums;}
.flist .qf-ico{display:inline-flex; align-items:center; gap:8px;}
.flist .qf-ico svg{width:15px; height:15px;}
.filters-toggle{display:none;}
@media (max-width:960px){
  .filters{display:none;}
  .filters.is-open{display:flex;}
  .filters-toggle{display:inline-flex;}
  .flist{flex-direction:row; flex-wrap:wrap; gap:6px;}
  .flist button{width:auto; border:1.5px solid var(--line); border-radius:var(--r-pill); padding:6px 12px;}
}
.results-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;}
.results-bar .count{color:var(--muted);}
.results-bar .count b{color:var(--ink);}
.select{padding:10px 36px 10px 14px; border-radius:var(--r-pill); border:1.5px solid var(--line-strong); background:var(--surface); appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2314151C' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; font-weight:600; font-size:.9rem;}
.active-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; min-height:0;}
.empty{padding:48px 20px; text-align:center; border:1px dashed var(--line-strong); border-radius:var(--r); color:var(--muted);}
.help-box{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:24px; align-items:center;
  background:var(--brand-tint); border-radius:var(--r-lg); padding:clamp(24px,4vw,48px);
}
.help-box h2{font-size:var(--fs-xl);}
.help-box p{margin-top:12px; max-width:48ch;}
.help-box .big{font-family:var(--f-display); font-weight:800; font-size:clamp(3.2rem,8vw,6rem); line-height:.9; letter-spacing:-.05em; color:var(--brand);}
.help-box .big-wrap{text-align:center;}
.help-box .big-wrap b{display:block; margin-top:8px;}
.help-box .big-wrap span{font-size:var(--fs-sm); color:var(--muted);}
@media (max-width:760px){ .help-box{grid-template-columns:1fr;} }

/* ====== Produkt ====== */
.product{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); padding-block:32px 56px;}
@media (max-width:900px){ .product{grid-template-columns:1fr;} }
.gallery{display:flex; flex-direction:column; gap:12px; position:sticky; top:96px; align-self:start;}
@media (max-width:900px){ .gallery{position:static;} }
.gallery .main{position:relative; aspect-ratio:1/1; border-radius:var(--r-lg); background:var(--surface-2); display:grid; place-items:center; overflow:hidden;}
.gallery .main svg{width:78%; height:78%; transition:opacity .2s;}
.gallery .main .view-label{position:absolute; left:14px; bottom:14px; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.thumbs{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px;}
.thumbs button{
  aspect-ratio:1/1; border-radius:12px; border:2px solid transparent; background:var(--surface-2); cursor:pointer; padding:6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.thumbs button svg{width:70%; height:auto;}
.thumbs button[aria-pressed="true"]{border-color:var(--ink); color:var(--ink);}
.pinfo{display:flex; flex-direction:column; gap:20px; min-width:0;}
.pinfo .title-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;}
.pill-best{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--r-pill); background:var(--pop); color:var(--pop-ink); font-size:.78rem; font-weight:800;}
.pill-best svg{width:13px; height:13px;}
.saved-pill{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--r-pill); background:color-mix(in srgb, var(--heart) 12%, var(--surface)); color:var(--heart); font-size:.78rem; font-weight:800;}
.saved-pill svg{width:14px; height:14px; fill:currentColor;}
.pinfo h1{font-size:clamp(1.9rem,3.4vw,2.7rem);}
.pinfo .sku{font-size:var(--fs-sm); color:var(--muted); margin-top:6px;}
.price-box{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:12px; padding:18px 20px; border-radius:var(--r); background:var(--surface-2);}
.price-box small{display:block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.price-box .big{font-family:var(--f-display); font-size:2.3rem; font-weight:800; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.1;}
.price-box .vat{font-size:var(--fs-sm); color:var(--muted);}
.opt-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:10px;}
.opt-head h3{font-family:var(--f-body); font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.opt-head span{font-weight:700; font-size:.92rem;}
.opt-head a{font-size:var(--fs-sm); text-decoration:underline; color:var(--ink-2);}
.color-grid{display:flex; flex-wrap:wrap; gap:9px;}
.color-grid .sw{width:30px; height:30px;}
.size-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(92px,1fr)); gap:8px;}
.size{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 8px 8px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--surface); transition:border-color .15s, background .15s;
}
.size.has-qty{border-color:var(--brand); background:var(--brand-tint);}
.size .s-l{font-weight:800; font-size:.95rem;}
.size input{
  width:100%; padding:8px 4px; text-align:center; border-radius:8px; border:1.5px solid var(--line-strong); background:var(--surface);
  font-weight:700; font-variant-numeric:tabular-nums; -moz-appearance:textfield;
}
.size input::-webkit-outer-spin-button, .size input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.size input:focus{outline:none; border-color:var(--brand);}
.size .s-p{font-size:.78rem; font-weight:700; color:var(--brand-strong); font-variant-numeric:tabular-nums;}
.size .s-st{font-size:.68rem; color:var(--muted);}
.size.is-out{opacity:.45;}
.sum-box{display:grid; grid-template-columns:auto 1fr; gap:4px 18px; align-items:center; padding:16px 18px; border-radius:var(--r); border:1.5px solid var(--ink);}
.sum-box .s-lbl{font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.sum-box .s-qty{font-family:var(--f-display); font-size:1.9rem; font-weight:800; font-variant-numeric:tabular-nums; line-height:1;}
.sum-box .s-price{font-size:.95rem; color:var(--ink-2);}
.sum-box .s-price b{color:var(--ink); font-variant-numeric:tabular-nums;}
.sum-box .s-hint{grid-column:1/-1; font-size:.78rem; color:var(--muted);}
.buy-row{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:10px;}
@media (max-width:520px){ .buy-row{grid-template-columns:1fr;} }
.toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom, 0px)); transform:translate(-50%, 20px); z-index:90;
  padding:12px 18px; border-radius:var(--r-pill); background:var(--ink); color:#fff; font-weight:600; font-size:.92rem; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:calc(100vw - 32px);
}
.toast.is-on{opacity:1; transform:translate(-50%, 0); pointer-events:auto;}
.toast a{color:var(--pop); text-decoration:underline; margin-left:8px;}
.features{display:flex; flex-direction:column; gap:14px; padding-top:18px; border-top:1px solid var(--line);}
.feature{display:flex; gap:14px; align-items:flex-start;}
.feature .ico{width:40px; height:40px; flex:none; border-radius:12px; background:var(--brand-tint); color:var(--brand-strong); display:grid; place-items:center;}
.feature .ico svg{width:20px; height:20px;}
.feature b{display:block;}
.feature span{font-size:.9rem; color:var(--muted);}

.tabs{border-bottom:1px solid var(--line); display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;}
.tabs button{
  padding:14px 16px; border:0; background:none; cursor:pointer; font-weight:700; font-size:.95rem; color:var(--muted);
  border-bottom:3px solid transparent; margin-bottom:-1px; white-space:nowrap;
}
.tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--brand);}
.tab-panel{padding-block:28px 8px;}
.tab-cols{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px;}
@media (max-width:820px){ .tab-cols{grid-template-columns:1fr;} }
.tab-panel h3{font-size:1.2rem; margin-bottom:10px;}
.tab-panel p{max-width:62ch; margin-bottom:12px;}
.spec{width:100%; border-collapse:collapse; font-size:.94rem;}
.spec th, .spec td{text-align:left; padding:11px 0; border-bottom:1px solid var(--line);}
.spec th{font-weight:500; color:var(--muted); width:42%;}
.spec td{font-weight:700;}
.table-wrap{overflow-x:auto;}
.size-table{border-collapse:collapse; min-width:520px; font-variant-numeric:tabular-nums;}
.size-table th, .size-table td{padding:10px 16px; border-bottom:1px solid var(--line); text-align:center;}
.size-table th:first-child, .size-table td:first-child{text-align:left; color:var(--muted); font-weight:500;}
.size-table thead th{font-weight:800;}
.tech-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
@media (max-width:520px){ .tech-list{grid-template-columns:1fr;} }
.tech-list li{display:flex; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:12px; background:var(--surface-2); font-weight:600;}
.tech-list li span{font-size:.8rem; font-weight:700;}
.tech-list .yes{color:var(--ok);}
.tech-list .mid{color:var(--warn);}

/* ====== Wycena / schowek ====== */
.quote-list{display:flex; flex-direction:column; gap:12px;}
.qitem{display:grid; grid-template-columns:88px minmax(0,1fr) auto; gap:16px; align-items:center; padding:14px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface);}
.qitem .q-img{aspect-ratio:1/1; border-radius:10px; background:var(--surface-2); display:grid; place-items:center;}
.qitem .q-img svg{width:80%; height:80%;}
.qitem h3{font-size:1rem;}
.qitem .q-meta{font-size:.84rem; color:var(--muted); margin-top:4px;}
.qitem .q-sizes{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.qitem .q-sizes span{font-size:.74rem; font-weight:700; padding:2px 8px; border-radius:var(--r-pill); background:var(--surface-2);}
.qitem .q-right{text-align:right; display:flex; flex-direction:column; gap:6px; align-items:flex-end;}
.qitem .q-right b{font-variant-numeric:tabular-nums;}
.qitem .rm{border:0; background:none; color:var(--muted); cursor:pointer; font-size:.8rem; text-decoration:underline;}
@media (max-width:560px){ .qitem{grid-template-columns:64px minmax(0,1fr);} .qitem .q-right{grid-column:1/-1; flex-direction:row; justify-content:space-between; align-items:center;} }
.q-total{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px; border-radius:var(--r); background:var(--ink); color:#fff;}
.q-total b{font-family:var(--f-display); font-size:1.4rem; font-variant-numeric:tabular-nums;}
.two-col{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:40px; align-items:start;}
@media (max-width:960px){ .two-col{grid-template-columns:1fr;} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,3vw,32px);}

/* ====== Strona zastępcza ====== */
.soon{display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding-block:clamp(56px,9vw,120px);}
.soon h1{font-size:var(--fs-2xl); max-width:18ch;}
.soon p{font-size:var(--fs-md); max-width:52ch;}
.soon .row{display:flex; flex-wrap:wrap; gap:10px;}

.contact-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:40px; padding-block:24px 80px;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
.contact-list{display:flex; flex-direction:column; gap:18px;}
.contact-list li{display:flex; gap:14px;}
.contact-list .ico{width:44px; height:44px; flex:none; border-radius:12px; background:var(--brand-tint); color:var(--brand-strong); display:grid; place-items:center;}
.contact-list .ico svg{width:20px; height:20px;}
.contact-list small{display:block; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.contact-list b{font-size:1.1rem;}