/* Listing produktów — makieta „Kategoria MAIN” (Figma 129:4).

   Kolumna boczna 13→328 px, treść 367→1428 px, siatka trzech kafli 345 px
   z odstępem 12 px. Arkusz wchodzi tylko na widokach sklepu.              */

/* Kreska pod okruszkami jest tylko w sklepie — na podstronach makieta
   jej nie ma. Reszta stylów siedzi w main.css, bo pasek jest wspólny. */
.md-crumbs { border-bottom: 1px solid #f1f1f1; }

.md-shop {
	display: grid;
	grid-template-columns: 315px 1061px;
	gap: 39px;
	max-width: var(--md-container);
	margin-inline: auto;
	padding: 20px 12px 0 13px;
}

/* Kolumna z treścią zaczyna się 13 px niżej niż boczna — tak jest w makiecie
   (pierwsza pozycja menu 196 px, nagłówek kategorii 199 px). */
.md-shop__main { padding-top: 13px; }

/* ---- kolumna boczna ---- */

.md-side { display: flex; flex-direction: column; }

.md-side__item { position: relative; }

.md-side__link,
.md-side__sublink {
	display: block;
	padding-block: 10.5px;
	font-size: 14px;
	line-height: 16px;
	transition: opacity .18s;
}

.md-side__link:hover,
.md-side__sublink:hover { opacity: .6; }

.md-side__link.is-current { font-weight: 700; }
.md-side__sublink.is-current { font-weight: 500; }

.md-side__toggle {
	position: absolute;
	right: 0;
	top: 3px;
	width: 25px;
	height: 25px;
	padding: 0;
}

.md-side__toggle svg { width: 25px; height: 25px; }

.md-side__sub {
	display: flex;
	flex-direction: column;
	margin: -4px 0 15px;
	padding-left: 23px;
}

.md-side__sub[hidden] { display: none; }

.md-side__sub .md-side__sublink { padding-block: 9px; }

/* ---- nagłówek i licznik ---- */

.md-shop__head {
	display: flex;
	align-items: baseline;
	gap: 39px;
	min-height: 22px;
}

.md-shop__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 20px;
	text-transform: uppercase;
}

.md-shop__count {
	margin: 0;
	font-size: var(--md-text-base);
	line-height: 11px;
}

/* ---- pasek filtrów ---- */

.md-filters {
	position: relative;
	display: grid;
	/* Liczba kolumn zależy od tego, ile cech ma sens w danej kategorii —
	   reszta paska zostaje pusta, tak jak w makiecie DRAMA HOME. */
	grid-template-columns: repeat(var(--md-filter-count, 5), minmax(0, 174.8px)) 1fr 187px;
	height: 38px;
	margin-top: 30px;
	border: 1px solid var(--md-grey-2);
}

.md-filter { position: relative; }

/* Kreska po ostatniej kolumnie, a nie przed przełącznikiem widoku — przy
   krótszym pasku pusta przestrzeń zostaje po prawej, tak jak w makiecie. */
.md-filter + .md-filter { border-left: 1px solid var(--md-grey-2); }
.md-filter:last-of-type { border-right: 1px solid var(--md-grey-2); }

/* Przełącznik zawsze siedzi w ostatniej kolumnie siatki. */
.md-filters__views { grid-column: -2; }

.md-filter__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: 0 19px 0 18px;
	font-size: var(--md-text-md);
	line-height: 13px;
	text-transform: uppercase;
}

.md-filter__chevron {
	width: 17px;
	height: 17px;
	transition: transform .2s;
}

.md-filter__button[aria-expanded="true"] .md-filter__chevron { transform: rotate(180deg); }

.md-filter__panel {
	position: absolute;
	left: -1px;
	right: -1px;
	top: 100%;
	z-index: 20;
	max-height: 320px;
	padding: 14px 16px;
	overflow-y: auto;
	background: var(--md-white);
	border: 1px solid var(--md-grey-2);
	border-top: 0;
}

.md-filter__panel[hidden] { display: none; }

.md-filter__list { display: flex; flex-direction: column; gap: 10px; }

.md-filter__link,
.md-filter__check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--md-text-base);
	line-height: 12px;
	cursor: pointer;
}

.md-filter__link.is-current { font-weight: 600; }

.md-filter__check input { width: 12px; height: 12px; accent-color: var(--md-black); }

.md-filter__price { display: flex; gap: 10px; }

.md-filter__price label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--md-text-base);
}

.md-filter__price input {
	width: 70px;
	padding: 6px 8px;
	border: 1px solid var(--md-grey-2);
	font: inherit;
	font-size: var(--md-text-base);
}

.md-filter__empty { margin: 0; font-size: var(--md-text-base); color: var(--md-grey-2); }

.md-filters__views {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 15px;
	padding-right: 15px;
}

.md-view { width: 14px; height: 14px; padding: 0; opacity: .35; transition: opacity .18s; }
.md-view svg { width: 14px; height: 14px; }
.md-view.is-current,
.md-view:hover { opacity: 1; }

.md-filters__submit {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	padding: 8px 18px;
	background: var(--md-black);
	color: var(--md-white);
	font-size: var(--md-text-base);
	text-transform: uppercase;
}

/* ---- siatka produktów ---- */

.md-shop__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Kolumny stykają się na 12 px, ale kolejny rząd zaczyna się 42 px
	   pod poprzednim (makieta 13:685: kafel 323→955, następny 997). */
	gap: 42px 12px;
	margin: 34px 0 0 2px;
}

.md-shop.is-cols-4 .md-shop__grid { grid-template-columns: repeat(4, 1fr); }

.md-prodcard { min-width: 0; }
.md-prodcard__link { display: block; }

.md-prodcard__media {
	position: relative;
	display: block;
	aspect-ratio: 345 / 500;
	overflow: hidden;
	background: var(--md-band);
}

.md-prodcard__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .8, .3, 1);
}

.md-prodcard__link:hover .md-prodcard__img { transform: scale(1.03); }

.md-prodcard__badge {
	position: absolute;
	left: 18px;
	top: 21px;
	display: grid;
	place-items: center;
	min-width: 38px;
	height: 17px;
	padding-inline: 9px;
	background: var(--md-black);
	color: var(--md-white);
	font-size: var(--md-text-sm);
	line-height: 9px;
	text-transform: uppercase;
}

.md-prodcard__title {
	display: block;
	margin-top: 17px;
	padding-left: 8px;
	font-size: var(--md-text-md);
	line-height: 13px;
	text-transform: uppercase;
}

.md-prodcard__prices {
	display: flex;
	gap: 14px;
	margin: 9px 0 0;
	padding-left: 8px;
	font-size: var(--md-text-base);
	line-height: 11px;
}

.md-prodcard__omnibus {
	margin: 14px 0 0;
	padding-left: 8px;
	font-size: var(--md-text-base);
	line-height: 17px;
	color: var(--md-grey-3);
}

.md-prodcard__sizes {
	display: flex;
	gap: 22px;
	margin-top: 20px;
	padding-left: 9px;
	font-size: var(--md-text-md);
	line-height: 13px;
	text-transform: uppercase;
}

.md-shop__empty { margin-top: 40px; font-size: var(--md-text-md); }

/* ---- stopka listingu ---- */

.md-shop__foot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 62px;
	padding-bottom: 37px;
}

.md-pager {
	display: flex;
	align-items: center;
	height: 38px;
	border: 1px solid #d2d0d0;
}

.md-pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: 36px;
	height: 100%;
	padding-inline: 6px;
	font-size: var(--md-text-md);
	line-height: 13px;
	transition: opacity .18s;
}

.md-pager .page-numbers:hover { opacity: .6; }

.md-pager .page-numbers.current {
	font-weight: 600;
	border-bottom: 1px solid currentColor;
}

.md-pager .prev,
.md-pager .next { width: 38px; padding: 0; }

.md-pager .prev { border-right: 1px solid #d2d0d0; }
.md-pager .next { border-left: 1px solid #d2d0d0; }

.md-pager__arrow { display: block; width: 15px; height: 15px; }
.md-pager .prev .md-pager__arrow { transform: rotate(90deg) scaleY(-1); }
.md-pager .next .md-pager__arrow { transform: rotate(-90deg) scaleY(-1); }

.md-top {
	position: absolute;
	right: 6px;
	top: -2px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var(--md-black);
	color: var(--md-white);
	transition: opacity .2s;
}

.md-top:hover { opacity: .8; }
.md-top svg { width: 24px; height: 24px; transform: rotate(180deg); }

/* ---- responsywność (nasza decyzja, makieta ma tylko 1440 px) ---- */

@media (max-width: 1439px) {
	.md-shop { grid-template-columns: 250px 1fr; gap: 32px; padding-inline: 24px; }
	.md-shop__grid { margin-left: 0; }
}

@media (max-width: 900px) {
	.md-shop { grid-template-columns: 1fr; gap: 24px; }
	.md-shop__side { order: 2; }

	.md-filters { grid-template-columns: repeat(3, 1fr); height: auto; }
	.md-filter__button { height: 38px; }
	.md-filters__views { display: none; }

	.md-shop__grid { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================ karta produktu

   Makieta „MAIN KARTA PRODUKT” (Figma 53:98). Galeria 12→835 px,
   kolumna z opisem 959→1395 px.                                          */

.md-product {
	display: grid;
	grid-template-columns: 823px 436px;
	gap: 124px;
	max-width: var(--md-container);
	margin-inline: auto;
	padding: 3px 45px 0 12px;
}

/* ---- galeria ---- */

.md-gallery__main,
.md-gallery__item {
	margin: 0;
	overflow: hidden;
	background: var(--md-band);
}

.md-gallery__main { aspect-ratio: 823 / 1233; }
.md-gallery__item { aspect-ratio: 404 / 606; }

.md-gallery__img { width: 100%; height: 100%; object-fit: cover; }

.md-gallery__rest {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	margin-top: 15px;
}

/* ---- kolumna z opisem ---- */

.md-summary { padding-top: 40px; }

.md-summary__badge {
	margin: 0 0 6px;
	font-size: var(--md-text-md);
	line-height: 13px;
	text-transform: uppercase;
	color: var(--md-grey-2);
}

.md-summary__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding-top: 24px;
	border-top: 1px solid #f1f1f1;
}

.md-summary__title {
	margin: 0;
	font-size: 16px;
	line-height: 18px;
	text-transform: uppercase;
}

.md-summary__wish { flex: 0 0 auto; width: 19px; height: 19px; transition: opacity .18s; }
.md-summary__wish:hover { opacity: .55; }

.md-summary__lead {
	margin: 15px 0 0;
	font-size: 14px;
	line-height: 16px;
}

.md-summary__prices {
	display: flex;
	gap: 30px;
	margin: 43px 0 0;
	font-size: 16px;
	line-height: 18px;
}

.md-summary__price { font-weight: 600; }

.md-summary__price--old {
	font-weight: 400;
	color: var(--md-grey-2);
	text-decoration: line-through;
}

/* ---- rozmiary i przycisk ---- */

.md-cartform { margin: 0; }

.md-sizes-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-top: 74px;
}

.md-sizes-row__label {
	font-size: 14px;
	line-height: 16px;
	text-transform: uppercase;
}

.md-sizes {
	display: flex;
	gap: 28px;
	align-items: baseline;
}

.md-size {
	padding: 0 3px 4px;
	border: 0;
	border-bottom: 1px solid transparent;
	font-size: 14px;
	line-height: 16px;
	text-transform: uppercase;
	background: none;
	transition: opacity .18s;
}

button.md-size { cursor: pointer; }
button.md-size:hover { opacity: .6; }
.md-size.is-current { border-bottom-color: currentColor; }

/* Lista wariantów jest potrzebna skryptowi WooCommerce, ale w makiecie
   jej nie ma — sterują nią kliknięcia w rozmiary powyżej.

   Sam `.md-sizes-row select` (0,1,1) nie wystarczał: arkusz WooCommerce ma
   `.woocommerce div.product form.cart .variations select` (0,4,3) z
   `display: inline-block` i wygrywał specyficznością, więc obok rozmiarów
   sterczało natywne „Wybierz opcję". Nadpisujemy cudzy arkusz, więc tu
   `!important` jest na miejscu — inaczej wystarczy, że Woo zmieni kolejność
   sklejania plików i select wraca. */
.md-sizes-row select,
.md-cartform .reset_variations,
.md-cartform .quantity { display: none !important; }

/* To samo dla kontenerów, w które Woo czasem opakowuje listę. */
.md-cartform .variations td.value,
.md-cartform .variations th.label { display: contents; }

.md-btn-cart {
	display: grid;
	float: none;
	clear: both;
	place-items: center;
	width: 100%;
	height: 48px;
	margin-top: 38px;
	background: var(--md-black);
	color: var(--md-white);
	font-size: 14px;
	line-height: 16px;
	text-transform: uppercase;
	transition: opacity .2s;
}

.md-btn-cart:hover { opacity: .85; }
.md-btn-cart:disabled { opacity: .4; cursor: not-allowed; }

.md-cartform .woocommerce-variation-price { margin-top: 20px; font-size: 14px; }
.md-cartform .woocommerce-variation-availability { margin-top: 10px; font-size: var(--md-text-md); }

/* ---- informacje cenowe ---- */

.md-summary__info {
	margin-top: 29px;
	font-size: var(--md-text-md);
	line-height: 13px;
	color: var(--md-grey-2);
}

.md-summary__info p { margin: 0 0 12px; }
.md-summary__info p:last-child { margin-bottom: 0; }

/* ---- sekcje rozwijane ---- */

.md-acc { margin-top: 23px; }

.md-acc__item { border-bottom: 1px solid #f1f1f1; }

.md-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 28px 0;
	font-size: var(--md-text-md);
	line-height: 13px;
	text-transform: uppercase;
	text-align: left;
}

.md-acc__chevron {
	width: 16px;
	height: 16px;
	transition: transform .2s;
}

.md-acc__head[aria-expanded="true"] .md-acc__chevron { transform: scaleY(-1); }

.md-acc__body {
	padding-bottom: 34px;
	font-size: var(--md-text-md);
	line-height: 18px;
}

.md-acc__body[hidden] { display: none; }
.md-acc__body p { margin: 0 0 1em; }
.md-acc__body p:last-child { margin-bottom: 0; }

/* ---- „Kup również" ---- */

.md-related { padding-top: 70px; }

/* ---- responsywność ---- */

@media (max-width: 1439px) {
	.md-product { grid-template-columns: 1.9fr 1fr; gap: 60px; padding-inline: 24px; }
}

@media (max-width: 900px) {
	.md-product { grid-template-columns: 1fr; gap: 32px; }
	.md-summary { padding-top: 0; }
	.md-gallery__rest { grid-template-columns: repeat(2, 1fr); }
}

/* ---- karta podarunkowa: wybór innej kwoty zamiast rozmiarów ---- */

.md-amounts { margin-top: 55px; }

.md-amounts__label {
	margin: 0 0 21px;
	font-size: 14px;
	line-height: 16px;
}

.md-amounts__list {
	display: grid;
	grid-template-columns: repeat(2, 215px);
	gap: 6px;
}

.md-amount {
	display: grid;
	place-items: center;
	height: 54px;
	border: 1px solid var(--md-black);
	font-size: 14px;
	line-height: 16px;
	transition: background-color .18s, color .18s;
}

.md-amount:hover { background: var(--md-black); color: var(--md-white); }

.md-amounts + .md-btn-cart { margin-top: 40px; }

@media (max-width: 900px) {
	.md-amounts__list { grid-template-columns: repeat(2, 1fr); }
}