:root{
  --sidebar-w: 240px;
  --header-h: 80px;
  --border-color: #ddd;
  --accent: #333;
}
*{box-sizing:border-box;}
body{margin:0;font-family:Arial, Helvetica, sans-serif;color:#222;}
a{color:inherit;}

/* UKŁAD 4 PÓL */
.layout{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas:
    "brand nav"
    "sidebar content";
  min-height:100vh;
}

/* Lewe górne: nazwa firmy */
.brand{
  grid-area: brand;
  display:flex;
  align-items:center;
  padding:0 1rem;
  font-size:1.3rem;
  font-weight:bold;
  border-bottom:1px solid var(--border-color);
}
.brand a{text-decoration:none;}

/* Prawe górne: nav bar */
.topnav{
  grid-area: nav;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--border-color);
}
.topnav ul{list-style:none;display:flex;gap:1.5rem;margin:0;padding:0 1.5rem;}
.topnav a{text-decoration:none;padding:.4rem 0;}
.topnav li.active a{font-weight:bold;border-bottom:2px solid var(--accent);}

/* Lewe dolne: kategorie, zawsze widoczne */
.sidebar{
  grid-area: sidebar;
  background:#f6f6f6;
  padding:1rem;
  border-right:1px solid var(--border-color);
  overflow-y:auto;
}
.sidebar h2{font-size:.9rem;text-transform:uppercase;color:#777;margin-top:0;}
.sidebar ul{list-style:none;margin:0;padding:0;}
.sidebar li{margin-bottom:.6rem;}
.sidebar a{text-decoration:none;}
.sidebar li.active a{font-weight:bold;}

/* Prawe dolne: dynamiczna zawartość, największe pole */
.content{
  grid-area: content;
  padding:1.5rem 2rem;
  overflow-y:auto;
}

/* Siatka kategorii / produktów (Oferta) */
.grid-siatka{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:1.5rem;
  margin-top:1rem;
}
.grid-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  text-decoration:none;
  border:1px solid var(--border-color);
  border-radius:8px;
  padding:.75rem;
  transition: box-shadow .15s ease;
}
.grid-item:hover{box-shadow:0 2px 10px rgba(0,0,0,.12);}
.grid-item img{
  width:100%;height:150px;object-fit:contain;object-position:center;
  background:#f7f7f7;border-radius:4px;
}
.grid-item span{margin-top:.5rem;}

/* Strona produktu */
.breadcrumb{margin-bottom:.5rem;}
.breadcrumb a{text-decoration:none;color:#555;}
.produkt-zdjecie{max-width:100%;max-height:500px;display:block;margin:1rem 0;border-radius:6px;cursor:zoom-in;}
.galeria-produktu{margin-bottom:.5rem;}
.galeria-miniatury{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem;}
.galeria-miniatury .miniatura{
  width:70px;height:70px;object-fit:contain;object-position:center;
  background:#f7f7f7;border-radius:4px;cursor:pointer;
  border:2px solid transparent;opacity:.7;transition:opacity .15s, border-color .15s;
}
.galeria-miniatury .miniatura:hover{opacity:1;}
.galeria-miniatury .miniatura.aktywna{opacity:1;border-color:var(--accent);}

/* Lightbox - powiększenie zdjęcia produktu (markup i JS w produkt.php) */
body.lb-otwarty{overflow:hidden;}
.lightbox{
  display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;
  background:rgba(0,0,0,.94);flex-direction:column;align-items:center;
  /* Kontrolki: ciemne wypełnienie + jasna obwódka + ciemna otoczka = widoczne na białym i na ciemnym zdjęciu */
  --lb-tlo:rgba(0,0,0,.78);
  --lb-tlo-hover:rgba(0,0,0,.95);
  --lb-obrys:rgba(255,255,255,.9);
  --lb-obrys-grubosc:2px;
  --lb-otoczka:0 0 0 1px rgba(0,0,0,.65), 0 2px 10px rgba(0,0,0,.55);
}
.lightbox.otwarty{display:flex;}
.lb-scena{
  flex:1;min-height:0;width:100%;box-sizing:border-box;overflow:hidden;touch-action:none;
  display:flex;align-items:center;justify-content:center;
  padding:4rem 4.5rem .5rem;
}
.lb-obraz{
  max-width:100%;max-height:100%;object-fit:contain;
  user-select:none;-webkit-user-drag:none;
  transform-origin:center center;will-change:transform;
}
.lb-obraz.animuj{transition:transform .18s ease;}
.lb-obraz.powiekszony{cursor:grab;}
.lb-obraz.przeciaganie{cursor:grabbing;}
.lb-btn{
  position:absolute;z-index:2;width:44px;height:44px;border-radius:50%;
  background:var(--lb-tlo);color:#fff;font-size:1.3rem;line-height:1;
  border:var(--lb-obrys-grubosc) solid var(--lb-obrys);box-shadow:var(--lb-otoczka);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.lb-btn:hover{background:var(--lb-tlo-hover);border-color:#fff;}
.lb-zamknij{top:.75rem;right:.75rem;font-size:2rem;}
.lb-prev{left:.75rem;top:50%;transform:translateY(-50%);}
.lb-next{right:.75rem;top:50%;transform:translateY(-50%);}
.lb-licznik{
  position:absolute;z-index:2;top:calc(.75rem + 4px);left:1rem;height:36px;padding:0 .85rem;
  display:flex;align-items:center;border-radius:18px;
  background:var(--lb-tlo);color:#fff;font-size:.9rem;
  border:var(--lb-obrys-grubosc) solid var(--lb-obrys);box-shadow:var(--lb-otoczka);
}
.lb-zoom{
  position:absolute;z-index:2;top:.75rem;left:50%;transform:translateX(-50%);
  display:flex;gap:2px;padding:2px;border-radius:24px;
  background:var(--lb-tlo);border:var(--lb-obrys-grubosc) solid var(--lb-obrys);box-shadow:var(--lb-otoczka);
}
.lb-zoom-btn{
  min-width:40px;height:40px;padding:0 .4rem;border:0;border-radius:20px;
  background:transparent;color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;
}
.lb-zoom-btn:hover:not(:disabled){background:rgba(255,255,255,.28);}
.lb-zoom-btn:disabled{opacity:.35;cursor:default;}
.lb-zoom-proc{min-width:58px;font-size:.85rem;}
.lb-miniatury{
  flex:none;display:flex;gap:.5rem;justify-content:safe center;
  max-width:100%;overflow-x:auto;padding:.5rem 1rem 1rem;box-sizing:border-box;
}
.lb-miniatura{
  flex:none;width:64px;height:64px;padding:0;border:2px solid transparent;
  border-radius:4px;background:#222;opacity:.6;cursor:pointer;
}
.lb-miniatura img{width:100%;height:100%;object-fit:contain;display:block;}
.lb-miniatura:hover{opacity:1;}
.lb-miniatura.aktywna{opacity:1;border-color:#fff;}
.lb-btn:focus-visible, .lb-zoom-btn:focus-visible, .lb-miniatura:focus-visible{
  outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #000;
}
@media (prefers-contrast: more){
  .lightbox{--lb-tlo:#000;--lb-tlo-hover:#000;--lb-obrys:#fff;--lb-obrys-grubosc:3px;}
  .lb-miniatura{opacity:1;}
}

table{border-collapse:collapse;width:100%;margin:.5rem 0 1.5rem;}
table th, table td{border:1px solid var(--border-color);padding:.5rem .75rem;text-align:left;}
.tabela-dostepnosc th, .tabela-dostepnosc td{text-align:center;}
.tabela-dostepnosc th{background:#f6f6f6;}

/* Responsywność na wąskie ekrany */
@media (max-width: 768px){
  .layout{
    grid-template-columns:1fr;
    grid-template-rows: var(--header-h) auto auto 1fr;
    grid-template-areas:
      "brand"
      "nav"
      "sidebar"
      "content";
  }
  .topnav ul{flex-wrap:wrap;gap:.75rem;padding:.5rem 1rem;}
  .sidebar{border-right:none;border-bottom:1px solid var(--border-color);}
  .lb-scena{padding:4rem .5rem .5rem;}
}