:root{
      --container: 1200px;
      --gap: 24px;
      --radius: 14px;
      --shadow: 0 6px 18px rgba(0,0,0,.06);
      --border: 1px solid #e7e7e7;
      --fg: #121212;
      --muted:#6b7280;
      --brand:#0f172a;
      --bg:#fff;
      --toolbar:#fafafa;
    }
   
    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--fg);background:#f6f7f9}
    a{color:inherit;text-decoration:none}
    .container{max-width:var(--container);margin:0 auto;padding:0 16px}

    /* ======= Toolbar ======= */
    .toolbar{
      position:sticky;top:0;z-index:10;
      backdrop-filter:saturate(180%) blur(4px);
      background:color-mix(in oklab, var(--toolbar) 85%, white);
      border-bottom:var(--border);
    }
    .toolbar-inner{display:flex;align-items:center;gap:8px;padding:12px 0}
    .toolbar-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .btn{
      display:inline-flex;align-items:center;gap:8px;
      padding:8px 12px;border:var(--border);border-radius:10px;background:var(--bg);
      cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,.03)
    }
    .btn:hover{box-shadow:var(--shadow)}
    .select{padding:8px 12px;border:var(--border);border-radius:10px;background:var(--bg)}
    .spacer{flex:1}

    .view-toggle{display:flex;gap:6px}
    .icon{
      width:18px;height:18px;display:inline-block;vertical-align:middle
    }
    .btn[data-active="true"]{outline:2px solid #00000012}

    /* ======= Products grid ======= */
    .products{
      display:grid; gap:var(--gap); padding:24px 0 64px;
      /* <= 1099px: auto-fit min 200px; >= 1100px: stałe 4 kolumny */
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    @media(min-width:1100px){
      .products{ grid-template-columns: repeat(4, minmax(0,1fr)); }
    }

    .card{
      display:flex;flex-direction:column;gap:10px;
      border:var(--border);background:var(--bg);
      box-shadow:var(--shadow);overflow:hidden
    }
    .card-media{
      aspect-ratio: 1 / 1; /* kwadrat */
      background:#eee;overflow:hidden
    }
    .card-media img{
      width:100%;height:100%;object-fit:cover;display:block
    }
    .card-body{padding:12px 14px 16px}
    .title{font-weight:600;line-height:1.3}
    .price{margin-top:6px;color:var(--brand);font-weight:700}
    .muted{color:var(--muted);font-size:.92rem}

    /* ======= Compact grid (gęstsza) ======= */
    .products.compact{gap:14px}
    .products.compact .card{}
    .products.compact .card-body{padding:10px 12px}

    /* ======= List view ======= */
    .products.list{
      display:flex;flex-direction:column
    }
    .products.list .card{
      flex-direction:row;align-items:center;gap:16px
    }
    .products.list .card-media{flex:0 0 200px;aspect-ratio:1/1}
    .products.list .card-body{padding:0 8px 0 0}
    .products.list .title{font-size:1.05rem}
    .products.list .meta{display:flex;gap:10px;margin-top:6px}

    /* ======= Filters drawer ======= */
/* ======= Filters drawer — TOP SHEET ======= */
.drawer-backdrop{
  position:fixed; inset:0;
  background:rgba(15,23,42,.35);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease; z-index:20;
}

.drawer {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
	max-width: none;
	height: auto;
	max-height: 92dvh;
	background: var(--bg);
	border: 0;
	border-bottom: var(--border);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
	transform: translateY(calc(-100% - var(--scroll-offset, 0px)));
	transition: transform 0.25s ease;
	z-index: 21;
	overflow: hidden;
}
/* otwarte = wsunięte z góry na dół */
.drawer.open {
	transform: translateY(0);
}

.drawer-header{
  position:sticky; top:0;
  padding:14px 16px;
  padding-top: max(14px, env(safe-area-inset-top)); /* notch iOS */
  background:var(--bg);
  border-bottom:var(--border);
  display:flex; justify-content:space-between; align-items:center;
  z-index:1;
}

.drawer-body{
  padding:12px 16px;
  overflow:auto; /* wnętrze przewijalne, panel nieruchomy */
}

/* backdrop aktywny */
.backdrop-open{ opacity:1; pointer-events:auto; }

    .backdrop-open{opacity:1;pointer-events:auto}
    .chip{display:inline-block;border:var(--border);border-radius:999px;padding:6px 10px;margin:4px;background:#fff;cursor:pointer}
	
	
	
	
	.filter-group-collapsible {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.filter-toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 600;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px 4px;
	font-size: 1rem;
}

.filter-toggle .arrow {
	transition: transform 0.3s ease;
	font-size: 0.9rem;
}

.filter-options {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding-right: 0;
}

.filter-options.open {
	max-height: 500px; /* duży limit – wystarczy na dowolną ilość */
	padding-left: 12px;
}

.filter-toggle.open .arrow {
	transform: rotate(180deg);
}

.filter-options label {
	font-weight: normal;
	font-size: 0.95rem;
}




.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin: 32px 0 64px;
	font-size: 1rem;
}

.pagination .page {
	color: var(--fg);
	text-decoration: none;
	padding: 4px 8px;
	position: relative;
	transition: color 0.2s;
}

.pagination .page:hover {
	color: var(--brand);
}

.pagination .page.current::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 2px;
	background-color: var(--fg);
}

.card-info {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 3;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
	pointer-events: none;
}

.card-media.hover-previewing img {
	transition: opacity 0.5s ease-in-out;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.card-media {
	position: relative;
}
.card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 0.3s ease-in-out;
}

.filter-badge {
	display: inline-block;
	background: #e0e7ff;
	color: #1e3a8a;
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.2s;
	border: 1px solid #c7d2fe;
}
.filter-badge:hover {
	background: #c7d2fe;
}