:root{
  --base:#ffffff;
  --contrast:#111111;
  --accent-4:#686868;
  --accent-5:#fbfaf3;
  --line: rgba(0,0,0,0.14);
  --radius-pill: 9999px;
  --max: 1340px;
  --gutter: clamp(20px, 5vw, 140px);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--base); color:var(--contrast);
  font-family:"Manrope", sans-serif; font-weight:300; letter-spacing:-0.1px; line-height:1.4;
  font-size:clamp(1.05rem, 1rem + .2vw, 1.15rem);
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
h1,h2,h3,h4{font-weight:400; letter-spacing:-0.1px; line-height:1.15; margin:0;}
h1{font-size:clamp(2.15rem, 2.15rem + 2vw, 3rem);}
h2{font-size:clamp(1.75rem, 1.75rem + .6vw, 2rem);}
h3{font-size:clamp(1.1rem, 1.1rem + .3vw, 1.25rem);}
p{margin:0;}
/* max-width:90% BEZ absolutnego ogranicznika rozciągał treść w nieskończoność
   na bardzo szerokich ekranach (ultrawide, duże 4K) — --max istniało w :root,
   ale nigdzie nie było faktycznie użyte. min() ogranicza do mniejszej z dwóch
   wartości, więc na wąskich ekranach zachowanie zostaje identyczne (90%), a na
   szerokich treść zatrzymuje się na 1340px zamiast rosnąć bez końca. */
.wrap{max-width:min(90%, var(--max)); margin:0 auto; padding:0 var(--gutter);}

/* ---------- Header ---------- */
header.site{ border-bottom:1px solid #e4e2dd; position:sticky; top:0; background:#fff; z-index:50; }
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px var(--gutter); }
.logo{ font-size:clamp(1.1rem,1.3vw,1.4rem); font-weight:500; letter-spacing:10px; text-transform:uppercase; white-space:nowrap; }
nav.main-nav{display:flex; gap:34px;}
nav.main-nav a{ font-size:1rem; padding-bottom:4px; border-bottom:1px solid transparent; transition:border-color .2s ease; }
nav.main-nav a.active, nav.main-nav a:hover, nav.main-nav a:focus-visible{border-color:var(--contrast);}
.header-actions{display:flex; align-items:center; gap:22px;}
.search-box{ display:flex; align-items:center; gap:8px; border:1px solid #ddd; border-radius:var(--radius-pill); padding:8px 16px; min-width:200px; }
.search-box input{ border:0; outline:0; font-family:inherit; font-size:.95rem; width:100%; background:transparent; }
.search-box svg{flex:none; opacity:.65;}
.cart-link{display:flex; align-items:center; gap:8px; font-weight:600; font-size:.95rem;}
.cart-badge{ background:var(--contrast); color:#fff; border-radius:50%; width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; }
.burger{display:none; background:none; border:0; cursor:pointer; padding:4px;}

.mobile-nav{ display:none; flex-direction:column; padding:8px var(--gutter) 20px; border-top:1px solid #ece9e3; }
.mobile-nav.open{ display:flex; }
.mobile-nav a{ padding:12px 0; border-bottom:1px solid #f2f1ec; font-size:1rem; }
.mobile-nav a.active{ font-weight:600; }
.mobile-search{ padding:12px 0; }
.mobile-search input{ width:100%; padding:.7em 1em; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:.95rem; }

@media (max-width: 900px){
  nav.main-nav{display:none;}
  .search-box{display:none;}
  .burger{display:block;}
  .header-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
  .logo{ justify-self:center; }
  .header-actions{ justify-self:end; }
}

/* ---------- Buttons ---------- */
.btn{ display:inline-block; font-size:.9rem; font-weight:500; text-transform:uppercase; letter-spacing:.4px; padding:1rem 2.25rem; border-radius:5px; cursor:pointer; border:1px solid transparent; transition:opacity .2s ease; }
.btn-dark{background:var(--contrast); color:#fff;}
.btn-dark:hover{opacity:.85;}
.btn-outline{background:transparent; color:#fff; border-color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-outline-dark{background:transparent; color:var(--contrast); border-color:var(--contrast);}
.btn-outline-dark:hover{background:#f2f1ec;}

.breadcrumb{ padding:22px var(--gutter) 0; font-size:.85rem; color:var(--accent-4); }
.breadcrumb a{color:var(--accent-4);}
.breadcrumb a:hover{color:var(--contrast); text-decoration:underline;}

/* ---------- Product card (współdzielone: home / sklep / produkt-powiązane) ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.product-card{text-align:center;}
.product-card figure{ margin:0; border-radius:10px; overflow:hidden; background:#f4f4f2; aspect-ratio:1; position:relative; }
.product-card img{width:100%; height:100%; object-fit:cover;}

/* Zoom podążający za myszką — patrz assets/js/hover-zoom.js. Klasa "hover-zoom"
   dodawana do kontenera z obrazkiem w środku (karty produktów, galeria produktu). */
.hover-zoom{ overflow:hidden; }
.hover-zoom img{ transition:transform .5s cubic-bezier(.22,.61,.36,1), transform-origin .5s cubic-bezier(.22,.61,.36,1); }
.hover-zoom:hover img{ transform:scale(1.3); }

.product-card .badge{
  position:absolute; top:10px; left:10px; background:#fff; color:#111; font-size:.7rem; font-weight:600;
  padding:5px 11px; border-radius:999px; box-shadow:0 1px 4px rgba(0,0,0,.2); z-index:2;
}
.product-card h4{padding-top:14px; font-size:.95rem; font-weight:500;}
.product-card .price{padding-top:4px; font-size:.9rem;}
.product-card .tag{ display:inline-block; margin-top:8px; font-size:.7rem; border:.8px solid var(--line); border-radius:999px; padding:3px 10px; color:#333; }
.product-card .tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:8px; }
.product-card .tags .tag{ margin-top:0; }
@media (max-width:1024px){ .product-grid{grid-template-columns:repeat(2,1fr);} }

.empty-state{ text-align:center; padding:60px 20px; color:var(--accent-4); }

/* ---------- Footer ---------- */
footer.site-footer{padding:56px var(--gutter) 24px; margin-top:20px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:32px;}
.footer-grid h2{letter-spacing:5px; text-transform:uppercase; font-size:1.4rem;}
.footer-grid p{padding-top:12px; font-size:.9rem; color:var(--accent-4);}
.footer-grid h4{padding-bottom:14px;}
.footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.footer-grid a{font-size:.9rem; color:#333;}
.footer-grid a:hover{text-decoration:underline;}
.footer-bottom{border-top:1px solid #e4e2dd; padding-top:20px; text-align:center; font-size:.7rem; color:var(--accent-4);}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr; text-align:center;} }