:root {
  --gap: 16px;
  --controls-size: 44px;
    --gap: 1rem;
  --gap-lg: 1.25rem;
  --thumb: 4.5rem;
  --radius: .5rem;
  --ring: 0 0 0 .15rem #2f6b84 inset;
  --wrap: 75rem;             /* szerokość sekcji */
  --brand: #3f6f86;
}

.space{
	width: 100%;
	border-top: 2px solid #efefef;
	margin: auto;
	margin-top: 5rem;
	margin-bottom: 5rem;
}

.slider {
  position: relative;
   max-width: 1800px; /* dostosuj jak chcesz */
  margin: 0 auto;
}

.viewport {
  overflow: hidden;      /* <<< tylko to, co w kadrze */
  width: 100%;
  position: relative;
}

.track {
  display: flex;
  flex-wrap: nowrap;      /* <<< nic się nie zawija */
  gap: var(--gap);
  transition: transform 420ms ease;
  will-change: transform;
}

/* 4 karty na widok ZAWSZE */
.card {
  flex: 0 0 calc((100% - 3 * var(--gap)) / 4);
  background: #fff;
  border-radius: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  overflow: hidden;
  text-align: center;
  min-width:200px;
}

/* Obrazek 1:1 */
.thumb {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  background: #eee;
  display: block;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card .content { padding: 12px 14px 16px; }

.title {
  font-size: 14px;
  line-height: 1.3;
  margin: 0 0 6px;
  color: #222;
  min-height: 2.6em;
}
.price { font-weight: 700; color: #1a1a1a; }

/* Strzałki */
.nav {
  position: absolute;
  top: 10%;
  transform: translateY(-50%);
  width: var(--controls-size);
  height: var(--controls-size);
  border-radius:0;
  border: none;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .12s ease, box-shadow .12s ease, opacity .2s ease;
  z-index: 2;
}
.nav:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 6px 22px rgba(0,0,0,.16);
}
.nav:disabled { opacity: .4; cursor: default; }

.prev { left: 3px; }
.next { right: 3px; }
.nav svg { width: 22px; height: 22px; }

.slider-show-more {
  display: block;
  width: 100%;            /* szerokość taka jak slider */
  text-align: center;     /* środek w poziomie */
  margin-top: 16px;       /* odstęp od slidera */
}

.slider-show-more button {
  padding: 10px 20px;
  background: #5D899E;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.slider-show-more button:hover {
  background: #487183;
}



/* Centrowanie całości */
.feature-wrap{
	//max-width: var(--wrap-max);
	margin: 0 auto;
	padding: 0 var(--gap);
}

/* Grid bez media-queries */
.feature-grid{
	display: flex;
	flex-wrap: wrap;           /* pozwól się zawijać */
	gap: var(--gap);
	align-items: stretch;
}

/* 3 kolumny kiedy się mieszczą,
   a kiedy brakuje miejsca – spada do 2, potem do 1.
   Klucz: flex-basis na 1/3 + min-width pilnujący zawijania. */
.feature-card{
	flex: 1 1 calc((100% - 2*var(--gap)) / 3);
	min-width: 18rem;          /* próg zawinięcia (~288px + rama) */
	display: block;
	text-decoration: none;
	color: inherit;
	background: #fff;
	padding: var(--frame);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

/* PIONOWE proporcje zdjęcia (portret) */
.feature-media{
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;       /* <<< pionowy prostokąt */
	overflow: hidden;
	border-radius: calc(var(--radius) - .125rem);
}

.feature-media > img{
	width: 100%;
	height: 100%;
	object-fit: cover;         /* wypełnij kadr */
	display: block;
}

/* delikatne ściemnienie dołu */
.feature-media::after{
	content: "";
	position: absolute;
	inset: 0;
	background: var(--overlay);
	pointer-events: none;
}

/* Napisy + biały przycisk jak na referencji */
.caption{
	position: absolute;
	left: 50%;
	bottom: 1.1rem;
	transform: translateX(-50%);
	text-align: center;
	color: #fff;
}

.kicker{
	margin: 0 0 .7rem 0;
	font-size: 1rem;
	letter-spacing: .08em;
}

.cta{
	display: inline-block;
	padding: .75rem 1.5rem;
	background: #fff;
	color: #222;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: .25rem;
	box-shadow: var(--btn-shadow);
	font-size: .95rem;
	letter-spacing: .12em;
	white-space: nowrap;
	transition: transform .15s ease, box-shadow .15s ease;
}
.feature-card:hover .cta{
	transform: translateY(-.05rem);
	box-shadow: 0 .35rem 1rem rgba(0,0,0,.22);
}

/* kontener strony produktu */
.product-wrap{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* galeria + panel detali obok siebie (zwijają się same bez @media) */
.product{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-lg);
  align-items: flex-start;
}

/* GALERIA */
.gallery{
  flex: 1 1 36rem;
  min-width: 20rem;
}

.pg-main{
  margin: 0 0 var(--gap);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 .2rem 1rem rgba(0,0,0,.12);
}
.pg-main > img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: opacity .18s linear;
}
.fade-out{ opacity: .2; }
.fade-in { opacity: 1; }

/* MINIATURY POD GŁÓWNYM – jeden rząd (mogą zawijać) */
.pg-thumbs{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.pg-thumbs.is-hidden{ display: none; }

.pg-thumb{
  width: var(--thumb);
  height: var(--thumb);
  padding: 0;
  border: 0;
  border-radius: .4rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 .05rem .25rem rgba(0,0,0,.15);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.pg-thumb:hover{ transform: translateY(-.06rem); box-shadow: 0 .25rem .8rem rgba(0,0,0,.2); }
.pg-thumb.is-active{ box-shadow: var(--ring), 0 .25rem .8rem rgba(0,0,0,.18); }

.pg-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* KROPKI – pokazywane, gdy miniatury się nie mieszczą */
.pg-dots{ display: none; gap: .6rem; justify-content: center; }
.pg-dots:not(.is-hidden){ display: flex; }
.dot{
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: #cfd6da;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.dot:hover{ transform: scale(1.1); }
.dot.is-active{
  background: #2f6b84;
  box-shadow: 0 0 0 .15rem rgba(47,107,132,.25);
}

/* DETALE */
.details{
  flex: 1 1 26rem;
  min-width: 18rem;
}

.p-title{
  margin: 0 0 .5rem 0;
  font-weight: 500;
  letter-spacing: .15rem;
  font-size: 1.6rem;
  color: #444;
}
.p-price{
  color: #6b6b6b;
  font-size: 1.1rem;
  margin-bottom: 1.2rem;
}
.p-desc{ margin: 0 0 .8rem; color: #333; }
.p-bullets{ margin: 0 0 1.2rem 1.2rem; }

.p-size{ margin-bottom: 1.2rem; }
.p-label{ display: inline-block; margin-bottom: .4rem; color: #444; }

.p-size-list{ display: flex; gap: .6rem; }
.size-btn{
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 .6rem;
  border: 1px solid #d9d9d9;
  background: #fff;
  border-radius: .25rem;
  cursor: pointer;
}
.size-btn.is-selected{ border-color: #333; box-shadow: inset 0 0 0 .1rem #333; }

.btn-primary{
  display: inline-block;
  width: 50%;
  border: 0;
  border-radius: .25rem;
  background: var(--brand);
  color: #fff;
  padding: .9rem 1rem;
  letter-spacing: .12rem;
  cursor: pointer;
  box-shadow: 0 .15rem .6rem rgba(0,0,0,.15);
  text-align:center!important;
}
.btn-primary:hover{ filter: brightness(.95); }



.nutshell-wrap{
	//max-width: var(--wrap);
	margin: 0 auto;
	padding: 2.5rem 1rem 3rem;
}

/* Nagłówek sekcji */
.nutshell-title{
	margin: 0 0 1.5rem 0;
	text-align: center;
	font-weight: 500;
	letter-spacing: .3rem;
	font-size: 2rem;
	color: #404040;
}

/* Rząd kart:
   - zawsze w jednym wierszu (nowrap)
   - gdy nie ma miejsca → pojawia się poziomy scroll
   - scroll-snap dla eleganckiego zatrzaskiwania kafli */
.nutshell-row{
	display: flex;
	flex-wrap: nowrap;              /* bez zawijania */
	gap: var(--gap);
	overflow-x: auto;               /* poziomy scroll na wąsko */
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	padding-bottom: .25rem;         /* miejsce na ewent. pasek scrolla */
	justify-content: center;        /* ładne centrowanie na szerokich ekranach */
}

/* Karta:
   - szerokość bazowa ~1/3 kontenera
   - minimalna szerokość wymusza overflow (scroll) na wąskich ekranach
*/
.ns-card{
	flex: 1 1 calc((100% - 2*var(--gap)) / 3);
	min-width: 20rem;               /* gdy 3×min + gaps > viewport → pojawia się scroll */
	scroll-snap-align: start;
}

/* Obraz – prostokąt 4:3 */
.ns-media{
	margin: 0 0 1rem 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	background: #eee;
}
.ns-media > img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Tytuł + „podkreślenie” */
.ns-head{
	margin: .25rem 0 .75rem 0;
	text-align: center;
	font-weight: 600;
	letter-spacing: .2rem;
	color: #333;
	position: relative;
	padding-bottom: .35rem;
}
.ns-head::after{
	content: "";
	display: block;
	width: 6rem;
	height: 2px;
	background: #bdbdbd;
	margin: .35rem auto 0;
	opacity: .8;
}

/* Opis */
.ns-text{
	margin: 0;
	color: #454545;
	text-align: center;
}

/* Subtelny pasek przewijania (opcjonalnie) */
.nutshell-row{
	scrollbar-width: thin;
	scrollbar-color: #c7d1d6 transparent;
}
.nutshell-row::-webkit-scrollbar{ height: .6rem; }
.nutshell-row::-webkit-scrollbar-track{ background: transparent; }
.nutshell-row::-webkit-scrollbar-thumb{
	background: #c7d1d6;
	border-radius: 999px;
}
.p-price, .price {
	font-weight: 600;
	font-size: 1.2rem;
	color: #333;
}