/* Mrs. Drama — arkusz główny.

   Wymiary są przepisane wprost z makiety (ramka 1440 px). Projekt nie używa
   nigdzie rozstrzelenia liter ani innych krojów niż Spartan Regular/Medium,
   więc `letter-spacing` zostaje domyślny.                                     */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--md-white);
	color: var(--md-black);
	font-family: var(--md-font);
	font-size: var(--md-text-md);
	font-weight: 400;
	line-height: 1.3;
}

img, picture, video, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

p { margin: 0 0 1em; }

h1, h2, h3, h4 {
	margin: 0 0 .6em;
	font-weight: 400;
	line-height: 1.25;
	text-transform: uppercase;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.md-container {
	width: 100%;
	max-width: var(--md-container);
	margin-inline: auto;
	padding-inline: 24px;
}

.md-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 12px 18px;
	background: var(--md-black);
	color: var(--md-white);
}

.md-skip:focus { left: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.md-i { width: 100%; height: 100%; }

/* ============================================================ pasek górny */

.md-topbar {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: var(--md-bar-h);
	background: var(--md-bar);
	overflow: hidden;
}

.md-topbar__inner {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 158px;
	margin-top: 16px;
}

.md-topbar__item {
	margin: 0;
	font-size: var(--md-text-base);
	line-height: 11px;
	text-transform: uppercase;
	white-space: nowrap;
}

.md-topbar__close {
	position: absolute;
	right: 15px;
	top: 14px;
	width: 14px;
	height: 14px;
	padding: 0;
	transition: opacity .18s;
}

.md-topbar__close:hover { opacity: .55; }

.md-topbar.is-closed { display: none; }

/* ============================================================ nagłówek */

.md-head {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--md-white);
}

/* Na stronie głównej nagłówek leży NA zdjęciu bohaterskim — w makiecie to
   biała powierzchnia o kryciu 10% z delikatnym cieniem. */
.md--home .md-head {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
}

.md-header {
	background: var(--md-white);
	transition: transform .3s cubic-bezier(.4, 0, .2, 1), background-color .3s;
}

.md--home .md-header {
	background: rgba(255, 255, 255, .1);
	box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
	/* Samo 10% bieli na zdjęciu bohaterskim nie oddziela nagłówka od tła —
	   logo i ikony gubiły się w fotografii. Rozmycie tego, co pod spodem,
	   daje czytelność bez zaciemniania zdjęcia. */
	backdrop-filter: blur(14px) saturate(120%);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
}

/* Przeglądarka bez `backdrop-filter` (starsze Safari na iOS, Firefox z
   wyłączoną flagą) pokazałaby nagłówek praktycznie przezroczysty. Wtedy
   zamiast rozmycia dajemy mocniejsze tło — czytelność ważniejsza od efektu. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.md--home .md-header { background: rgba(255, 255, 255, .72); }
}

.md--home .md-head.is-solid .md-header {
	background: var(--md-white);
	box-shadow: none;
	/* Pod nieprzezroczystą bielą nie widać już nic, co dałoby się rozmyć —
	   a `backdrop-filter` i tak kazałby przeglądarce składać warstwę przy
	   każdej klatce przewijania. Wyłączamy poza zdjęciem bohaterskim. */
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.md-head.is-hidden { transform: translateY(-100%); }

.md-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	height: var(--md-row-h);
	max-width: var(--md-container);
	margin-inline: auto;
	padding: 0 18px 14px 24px;
}

/* Ikona i podpis nie są w makiecie wyrównane do środka względem siebie —
   ikona siedzi 7 px, a napis 17 px od góry wiersza. Stąd flex-start. */
.md-burger {
	display: flex;
	align-self: flex-start;
	align-items: flex-start;
	gap: 15px;
	padding: 0;
}

.md-burger__icon { width: 28px; height: 28px; margin-top: 7px; }

.md-burger__label {
	margin-top: 17px;
	font-size: var(--md-text-md);
	line-height: 13px;
	text-transform: uppercase;
}

.md-header__logo {
	position: absolute;
	left: 50%;
	top: 14px;
	translate: -50% 0;
}

.md-logo__svg { width: 143px; height: 18px; }
.md-logo__img { width: auto; max-height: 24px; }

.md-header__tools {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.md-header__icons {
	display: flex;
	align-items: center;
	gap: 30px;
}

.md-tool {
	position: relative;
	display: block;
	width: 19px;
	height: 19px;
	padding: 0;
	transition: opacity .18s;
}

.md-tool:hover { opacity: .55; }

.md-tool--search,
.md-tool--account { width: 17px; height: 17px; }

.md-cart__count {
	position: absolute;
	left: calc(100% + 3px);
	bottom: -2px;
	font-size: var(--md-text-base);
	line-height: 1;
	opacity: 0;
	transition: opacity .18s;
}

.md-cart__count.is-filled { opacity: 1; }

/* Stała szerokość 56 px (1366→1422 w makiecie) trzyma ikony dokładnie tam,
   gdzie mają być — inaczej szerokość napisu waluty przesuwałaby cały rząd. */
.md-lang {
	display: flex;
	flex: 0 0 56px;
	align-items: center;
	justify-content: space-between;
	margin-left: 28px;
}

.md-lang__item {
	font-size: var(--md-text-base);
	line-height: 11px;
	text-transform: uppercase;
	transition: opacity .18s;
}

a.md-lang__item:hover { opacity: .55; }

.md-lang__sep {
	width: 1px;
	height: 9.5px;
	background: currentColor;
}

/* ============================================================ mega-menu

   W makiecie panel zaczyna się pod paskiem ogłoszeniowym i ma 574 px —
   nie przykrywa całego ekranu.                                               */

.md-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: var(--md-bar-h);
	z-index: 10;
	height: 574px;
	max-height: calc(100vh - var(--md-bar-h));
	background: var(--md-white);
	overflow-y: auto;
	animation: mdMegaIn .32s cubic-bezier(.3, .9, .35, 1) both;
}

/* Zamknięty pasek ogłoszeniowy znika z układu, więc panel wjeżdża pod sam
   nagłówek. Selektor działa, bo pasek i panel są rodzeństwem w .md-head. */
.md-topbar.is-closed ~ .md-mega { top: 0; max-height: 100vh; }

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

body.md-menu-open { overflow: hidden; }

@keyframes mdMegaIn {
	from { opacity: 0; transform: translateY(-14px); }
}

.md-mega__bar {
	display: flex;
	align-items: flex-start;
	height: 44px;
	padding-inline: 24px;
}

.md-mega__close {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 0;
	font-size: var(--md-text-md);
	line-height: 13px;
	text-transform: uppercase;
}

.md-mega__close .md-i { width: 30px; height: 30px; margin-top: 7px; }
.md-mega__close span { margin-top: 17px; }

.md-mega__body {
	display: grid;
	grid-template-columns: 227px 306px 800px;
	max-width: var(--md-container);
	width: 100%;
	margin-inline: auto;
	padding: 0 40px 0 67px;
}

.md-mega__main { margin-top: 43px; }

/* Wysokość wiersza ustawiona na wysokość liter (13 px) — inaczej odstępy
   liczyłyby się od „strutu” listy i cała kolumna rozjechałaby się o kilka px. */
.md-mega__list { display: flex; flex-direction: column; gap: 24px; line-height: 13px; }
.md-mega__list--secondary { margin-top: 64px; gap: 21px; }

.md-mega__link {
	display: flex;
	align-items: center;
	width: fit-content;
	gap: 15px;
	font-size: var(--md-text-md);
	line-height: 13px;
	text-transform: uppercase;
	transition: opacity .18s;
}

.md-mega__link:hover { opacity: .5; }

.md-mega__item.is-accent > .md-mega__link { color: var(--md-accent); }

.md-mega__link[aria-expanded="true"] {
	font-weight: 500;
}

.md-mega__link[aria-expanded="true"] > span:first-child {
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
}

.md-mega__arrow {
	width: 22px;
	height: 7px;
	opacity: 0;
	transition: opacity .2s, transform .2s;
}

.md-mega__link[aria-expanded="true"] .md-mega__arrow { opacity: 1; }

.md-mega__subs { margin-top: 40px; }

.md-mega__sub { display: flex; flex-direction: column; gap: 12px; line-height: 13px; }
.md-mega__sub-lead { margin-bottom: 3px; }

.md-mega__sublink {
	display: block;
	width: fit-content;
	font-size: var(--md-text-md);
	line-height: 13px;
	text-transform: uppercase;
	color: var(--md-grey-2);
	transition: color .18s;
}

.md-mega__sublink:hover,
.md-mega__sublink.is-accent { color: var(--md-black); }

.md-mega__promo { grid-column: 3; }

.md-mega__tiles {
	display: grid;
	grid-template-columns: repeat(4, 188px);
	gap: 16px;
	align-content: start;
	margin-top: 30px;
}

.md-tile { position: relative; display: block; }

.md-tile__media {
	display: block;
	aspect-ratio: 188 / 281;
	overflow: hidden;
	background: var(--md-band);
}

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

.md-tile__label,
.md-tile__badge {
	position: absolute;
	font-size: var(--md-text-sm);
	line-height: 9px;
	text-transform: uppercase;
}

.md-tile__label { left: 14px; top: 14px; }
.md-tile__badge { right: 17px; top: 13px; color: var(--md-accent); }

.md-mega__social {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 122px;
	margin: 125px 0 0 auto;
}

.md-social__link {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: var(--md-text-md);
	line-height: 14px;
	color: var(--md-grey-3);
	transition: color .18s;
}

.md-social__link:hover { color: var(--md-black); }

.md-social__icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

/* ============================================================ okruszki

   Pasek pojawia się na listingu, karcie produktu i podstronach. Kreskę pod
   nim dokłada arkusz sklepu.                                               */

.md-crumbs__inner {
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: var(--md-container);
	margin-inline: auto;
	padding: 30px 12px 24px 16px;
}

.md-crumbs__item {
	font-size: var(--md-text-sm);
	line-height: 9px;
	text-transform: uppercase;
	transition: opacity .18s;
}

a.md-crumbs__item:hover { opacity: .6; }
.md-crumbs__item.is-current { color: var(--md-grey-2); }

.md-crumbs__sep { width: 10px; height: 10px; color: var(--md-grey-2); }

/* ============================================================ strona główna

   Układ kolumn: kafle produktów stoją od 12 do 1428 px, czyli kontener ma
   1440 px i 12 px marginesu po bokach. Nagłówki sekcji są wcięte o kolejne
   16 px — tak jest w makiecie.                                              */

.md-wide {
	width: 100%;
	max-width: var(--md-container);
	margin-inline: auto;
	padding-inline: 12px;
}

/* Odnośnik z kreską. Powtarza się w całym projekcie w jednej postaci:
   10 px, wersaliki, kreska 5 px pod tekstem. */
.md-link {
	display: inline-block;
	padding-bottom: 5px;
	border-bottom: 1px solid currentColor;
	font-size: var(--md-text-base);
	line-height: 11px;
	text-transform: uppercase;
	transition: opacity .18s;
}

.md-link:hover { opacity: .6; }

/* ---- bohater ---- */

.md-hero {
	position: relative;
	height: var(--md-hero-h);
	overflow: hidden;
	background: var(--md-band);
}

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

.md-hero__inset {
	position: absolute;
	left: 204px;
	top: 177px;
	width: 205px;
	height: 367px;
	overflow: hidden;
}

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

/* Kolumna, a nie zwykły blok: odnośnik jest elementem liniowym i w bloku
   dostawałby dodatkowy odstęp od interlinii rodzica. */
.md-hero__caption {
	position: absolute;
	left: 959px;
	top: 361px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.md-hero__title {
	margin: 0 0 17px;
	font-size: var(--md-text-lg);
	font-weight: 500;
	line-height: 22px;
	text-transform: uppercase;
}

/* ---- nagłówek sekcji ---- */

.md-head-row {
	display: flex;
	align-items: center;
	padding-left: 16px;
}

/* Wiersz podnoszą dopiero okrągłe strzałki (38 px) — bez nich nagłówek
   zaczyna się dokładnie tam, gdzie sekcja. */
.md-head-row--arrows { min-height: 38px; }

.md-head-row__title {
	margin: 0;
	font-size: var(--md-text-lg);
	line-height: 22px;
	text-transform: uppercase;
	white-space: nowrap;
}

.md-head-row__more {
	display: flex;
	align-items: center;
	margin-left: 20px;
}

.md-head-row__arrow {
	width: 22px;
	height: 7px;
	margin-right: 18px;
}

.md-arrows {
	display: flex;
	/* Grafika strzałki z Figmy to koło wypełniające CAŁE pole 38×38 px
	   (okrąg od 0,3 do 37,7), więc bez odstępu z CSS oba kółka się stykają. */
	gap: 10px;
	margin-left: auto;
}

.md-arrows__btn {
	width: 38px;
	height: 38px;
	padding: 0;
	transition: opacity .18s;
}

.md-arrows__btn:hover { opacity: .55; }
.md-arrows__btn svg { width: 38px; height: 38px; }

/* W Figmie lewa strzałka to ta sama grafika odbita w poziomie. */
.md-arrows__btn[data-dir="prev"] svg { transform: scaleX(-1); }

/* ---- rzędy kafli ---- */

.md-row { padding-top: 42px; }
.md-row--row2 { padding-top: 44px; }
.md-row--row3 { padding-top: 58px; }

/*
 * Rząd kafli to karuzela, nie statyczna siatka.
 *
 * Wcześniej stało tu `grid-template-columns: repeat(4, 1fr)` — cztery kolumny
 * wypełniające kontener co do piksela. Nic nie wystawało poza krawędź, więc
 * `scrollBy()` ze strzałek nie miał dokąd przesunąć i przyciski z makiety
 * sprawiały wrażenie zepsutych. Teraz kafle idą w jednym rzędzie, każdy
 * szerokości jednej czwartej widoku, a nadmiar wychodzi poza ekran.
 */
.md-row__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 36px) / 4);
	gap: 12px;
	margin-top: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	/* Płynność trzymamy tutaj, a nie w `scrollBy({behavior:"smooth"})`.
	   Tamten wariant w części środowisk po prostu nie rusza taśmy i strzałki
	   wyglądają na zepsute; przy ustawieniu `scrollLeft` wprost przeglądarka
	   animuje, gdy umie, a gdy nie — przeskakuje, ale działa. */
	scroll-behavior: smooth;
	scrollbar-width: none;           /* Firefox */
	-ms-overflow-style: none;        /* starsze Edge */
}

/* Pasek przewijania psułby kadr z makiety — zostaje sam gest i strzałki. */
.md-row__track::-webkit-scrollbar { display: none; }

.md-row__track > * { scroll-snap-align: start; }

/* Strzałka przy krańcu taśmy nie ma co robić — wygaszamy ją, zamiast
   zostawiać przycisk, który wygląda na zepsuty. */
.md-arrows__btn[disabled] {
	opacity: .25;
	cursor: default;
	pointer-events: none;
}

/* ---- kropki pod rzędem ---- */

.md-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
}

.md-dots__btn {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 1px solid var(--md-black);
	border-radius: 50%;
	background: none;
	cursor: pointer;
	transition: background-color .18s, transform .18s;
}

.md-dots__btn.is-current {
	background: var(--md-black);
	transform: scale(1.25);
}

/* Palec na telefonie ma trafić w coś większego niż 7 px — powiększamy
   obszar klikalny, nie samą kropkę. */
.md-dots__btn::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	margin: -9px 0 0 -9px;
}

@media (prefers-reduced-motion: reduce) {
	.md-row__track { scroll-behavior: auto; }
	.md-dots__btn { transition: none; }
}

/* Na węższych ekranach mniej kafli naraz, inaczej robią się paski. */
@media (max-width: 1100px) {
	.md-row__track { grid-auto-columns: calc((100% - 24px) / 3); }
}

@media (max-width: 820px) {
	.md-row__track { grid-auto-columns: calc((100% - 12px) / 2); }
}

@media (max-width: 560px) {
	.md-row__track { grid-auto-columns: 78%; }
}

/* Kafle stoją zawsze 54 px pod górą nagłówka. Gdy nie ma okrągłych strzałek,
   wiersz nagłówka jest o 16 px niższy, więc odstęp musi urosnąć. */
.md-head-row:not(.md-head-row--arrows) + .md-row__track { margin-top: 32px; }

.md-tilecard { min-width: 0; }

.md-tilecard__link { display: block; }

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

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

.md-tilecard__link:hover .md-tilecard__img { transform: scale(1.03); }

.md-tilecard__badge {
	position: absolute;
	left: 15px;
	top: 15px;
	display: grid;
	place-items: center;
	width: 68px;
	height: 17px;
	background: var(--md-black);
	color: var(--md-white);
	font-size: var(--md-text-sm);
	line-height: 9px;
	text-transform: uppercase;
}

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

.md-row--row1 .md-tilecard__title { padding-left: 16px; }

.md-tilecard__desc {
	margin: 6px 0 0;
	padding-left: 9px;
	font-size: var(--md-text-base);
	line-height: 11px;

	/* Przycięcie do dwóch wierszy — tyle ma opis w makiecie.
	   WooCommerce trzyma „krótki opis" w `post_excerpt`, ale sklep wpisuje tam
	   PEŁNY opis produktu: na produkcyjnych danych karta puchła do dwunastu
	   wierszy, rozpychała rząd i spychała cenę poza kadr. Przycięcie w CSS,
	   a nie ucinanie tekstu w PHP, bo cały opis ma zostać w źródle strony
	   (czytniki ekranu, wyszukiwarki) — chowamy tylko nadmiar. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

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

/* Bez opisu odstęp jest minimalnie ciaśniejszy. Tytuł siedzi w środku
   odnośnika, więc sąsiadem cen jest cały odnośnik, nie sam tytuł. */
.md-tilecard__link + .md-tilecard__prices { margin-top: 11px; }

.md-price .woocommerce-Price-amount { font-size: inherit; }
.md-price--old { color: var(--md-grey-2); text-decoration: line-through; }

.md-tilecard__omnibus {
	margin: 8px 0 0;
	padding-left: 9px;
	font-size: var(--md-text-xs);
	line-height: 8px;
	color: var(--md-grey-3);
}

/* ---- banery na pół ekranu ---- */

.md-banners {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 74px;
}

.md-banners--pair2 { margin-top: 60px; }

.md-banner {
	position: relative;
	height: 716px;
	overflow: hidden;
	background: var(--md-band);
}

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

.md-banner__caption {
	position: absolute;
	left: 50%;
	top: 364px;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 292px;
	translate: -50% 0;
	color: var(--md-white);
	text-align: center;
}

.md-banner__title {
	margin: 0;
	padding-top: 10px;
	font-size: var(--md-text-lg);
	font-weight: 500;
	line-height: 22px;
	text-transform: uppercase;
}

/* ---- o marce ---- */

.md-about {
	position: relative;
	display: grid;
	grid-template-columns: 720px 1fr;
	height: 716px;
	margin-top: 60px;
	border-block: 1px solid #f1f1f1;
	background: var(--md-white);
}

.md-about__media { overflow: hidden; background: var(--md-band); }
.md-about__img { width: 100%; height: 100%; object-fit: cover; }

.md-about__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 306px 0 0 172px;
}

.md-about__title {
	margin: 0 0 29px;
	font-size: var(--md-text-md);
	line-height: 13px;
	text-transform: uppercase;
}

.md-about__body {
	max-width: 287px;
	margin: 0 0 30px;
	font-size: var(--md-text-base);
	line-height: 18px;
}

/* Podpis leży na zdjęciu, przekrzywiony tak jak w makiecie. */
.md-about__signature {
	position: absolute;
	left: 111px;
	top: 493px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 510px;
	height: 158px;
	pointer-events: none;
}

.md-about__signature svg {
	width: 502px;
	height: 99px;
	rotate: -6.85deg;
}

/* ---- pas z Instagrama ---- */

.md-ig { margin-top: 75px; }

/* Nagłówek pasa jest w makiecie wcięty o 9 px głębiej niż pozostałe. */
.md-head-row--ig { padding-left: 25px; }

.md-ig__icon { width: 21px; height: 21px; margin-left: 12px; }
.md-head-row--ig .md-head-row__more { margin-left: 25px; }
.md-head-row--ig .md-head-row__arrow { margin-right: 26px; }

.md-ig__grid {
	display: grid;
	grid-template-columns: 267px 550px 267px 267px;
	gap: 16px;
	align-items: start;
	margin-top: 38px;
	padding-left: 17px;
}

.md-igcard__media {
	display: block;
	aspect-ratio: 267 / 388;
	overflow: hidden;
	background: var(--md-band);
}

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

.md-igcard__link:hover .md-igcard__img { transform: scale(1.03); }

.md-igcard__title {
	display: block;
	margin-top: 30px;
	font-size: var(--md-text-md);
	line-height: 13px;
	text-transform: uppercase;
}

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

.md-ig__feature {
	aspect-ratio: 550 / 687;
	overflow: hidden;
	background: var(--md-band);
}

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

/* ---- newsletter ---- */

/* Pas nie jest wyśrodkowany: w makiecie ma 86 px z lewej i 68 px z prawej. */
.md-nl {
	max-width: var(--md-container);
	margin: 89px auto 0;
	padding: 0 68px 0 86px;
}

.md-nl__band {
	display: grid;
	grid-template-columns: 621px 1fr;
	width: 100%;
	height: 351px;
	background: var(--md-band);
}

.md-nl__media { overflow: hidden; }
.md-nl__img { width: 100%; height: 100%; object-fit: cover; }

.md-nl__content { padding: 31px 0 0 45px; }

.md-nl__title {
	margin: 0 0 17px;
	font-size: var(--md-text-lg);
	line-height: 22px;
	text-transform: uppercase;
}

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

.md-nl__note { margin-top: 9px; color: var(--md-grey-3); }

.md-nl__form { margin-top: 18px; }

.md-nl__field {
	position: relative;
	display: block;
	width: 302px;
	height: 38px;
	background: var(--md-white);
}

.md-nl__field + .md-nl__field { margin-top: 8px; }

.md-nl__field input {
	width: 100%;
	height: 100%;
	padding: 0 46px 0 16px;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--md-text-base);
	color: inherit;
}

.md-nl__field input:focus { outline: 1px solid var(--md-black); outline-offset: -1px; }

.md-nl__label {
	position: absolute;
	left: 16px;
	top: 14px;
	font-size: var(--md-text-base);
	line-height: 11px;
	pointer-events: none;
	transition: opacity .15s;
}

.md-nl__field input:focus ~ .md-nl__label,
.md-nl__field input:not(:placeholder-shown) ~ .md-nl__label { opacity: 0; }

.md-nl__icon {
	position: absolute;
	right: 20px;
	top: 11px;
	width: 16px;
	height: 16px;
	color: var(--md-grey-2);
}

.md-nl__submit {
	display: block;
	width: 302px;
	height: 30px;
	margin-top: 15px;
	background: var(--md-black);
	color: var(--md-white);
	font-size: var(--md-text-base);
	line-height: 11px;
	text-transform: uppercase;
	transition: opacity .2s;
}

.md-nl__submit:hover { opacity: .85; }

.md-nl__consent {
	max-width: 486px;
	margin: 26px 0 0;
	font-size: var(--md-text-base);
	line-height: 15px;
	color: var(--md-grey-1);
}

.md-nl__consent a { text-decoration: underline; }

.md-nl__consent--check {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.md-nl__result {
	margin: 10px 0 0;
	font-size: var(--md-text-base);
	line-height: 13px;
}

.md-nl__result.is-error { color: var(--md-accent); }

/* ============================================================ stopka */

.md-footer {
	margin-top: 91px;
	border-top: 1px solid #f1f1f1;
}

.md-footer__inner {
	display: grid;
	grid-template-columns: 457px 274px 286px 269px 1fr;
	max-width: var(--md-container);
	margin-inline: auto;
	padding: 33px 12px 28px 37px;
}

.md-footer__brand a { display: block; }
.md-footer__logo { width: 171px; height: 21px; }

.md-footer__col { padding-top: 11px; }

.md-footer__list { display: flex; flex-direction: column; gap: 16px; line-height: 13px; }

.md-footer__list .md-menu__link {
	font-size: var(--md-text-md);
	line-height: 13px;
	text-transform: uppercase;
	transition: opacity .18s;
}

.md-footer__list .md-menu__link:hover { opacity: .6; }

.md-footer__heading {
	margin: 0;
	font-size: var(--md-text-md);
	line-height: 13px;
	text-transform: uppercase;
}

.md-footer__heading--online { margin-top: 26px; }

.md-footer__address {
	margin: 13px 0 0;
	font-size: var(--md-text-base);
	line-height: 16px;
}

.md-footer__contact {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 8px 0 0;
	font-size: var(--md-text-base);
	line-height: 18px;
}

.md-footer__contact:first-of-type { margin-top: 8px; }

.md-footer__icon { flex: 0 0 auto; width: 16px; height: 16px; }

.md-footer__social { display: flex; flex-direction: column; gap: 13px; }

.md-footer__social .md-social__link {
	font-size: var(--md-text-md);
	line-height: 13px;
	text-transform: uppercase;
	color: inherit;
}

.md-footer__bar {
	border-top: 1px solid #f1f1f1;
	padding: 34px 0 25px;
	text-align: center;
}

.md-copy {
	margin: 0;
	font-size: var(--md-text-md);
	line-height: 19px;
	text-transform: uppercase;
}

/* ============================================================ typografia treści */

.md-prose { max-width: 760px; font-size: var(--md-text-md); text-transform: none; line-height: 1.7; }
.md-prose img { margin-block: 1.4em; }

/*
 * Strony tekstowe (regulamin, zwroty, polityka prywatności, wysyłka) to w
 * większości listy i tabele, a globalny reset na początku pliku zdejmuje
 * z `ul`/`ol` punktory i wcięcie. Poza treścią jest to pożądane - menu i
 * siatki produktów nie chcą kropek - ale tutaj zlewało kilkanaście punktów
 * regulaminu w jeden nieczytelny blok. Przywracamy domyślne zachowanie
 * wyłącznie w obrębie `.md-prose`.
 */
.md-prose ul,
.md-prose ol { margin: 1em 0; padding-left: 1.5em; }
.md-prose ul { list-style: disc; }
.md-prose ol { list-style: decimal; }
.md-prose li { margin-block: 0.4em; }
.md-prose li::marker { color: var(--md-black); }

.md-prose p { margin-block: 1em; }

.md-prose h2,
.md-prose h3,
.md-prose h4 {
	margin-block: 1.8em 0.6em;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Makieta ma tylko trzy rozmiary tekstu, więc h3 i h4 różnią się od treści
   wersalikami i rozstrzeleniem, a nie wielkością. */
.md-prose h2 { font-size: var(--md-text-lg); }
.md-prose h3 { font-size: var(--md-text-md); }
.md-prose h4 { font-size: var(--md-text-base); }

.md-prose a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.md-prose table {
	width: 100%;
	margin-block: 1.4em;
	border-collapse: collapse;
}

.md-prose th,
.md-prose td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--md-bar);
	text-align: left;
	vertical-align: top;
}

.md-prose th {
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.md-prose td:last-child,
.md-prose th:last-child { text-align: right; }

@media (max-width: 600px) {
	.md-prose th,
	.md-prose td { padding: 10px 8px; }
	.md-prose th { white-space: normal; }
}

.md-btn {
	display: inline-block;
	padding: 14px 40px;
	background: var(--md-black);
	color: var(--md-white);
	font-size: var(--md-text-base);
	text-transform: uppercase;
	transition: opacity .2s;
}

.md-btn:hover { opacity: .8; }

.md-404__inner { padding-block: 140px; text-align: center; }
.md-404__code { margin: 0; font-size: 84px; color: var(--md-grey-2); }

/* ============================================================ responsywność

   Projekt jest tylko w 1440 px — poniższe punkty to nasze decyzje,
   nie odwzorowanie makiety.                                                  */

@media (max-width: 1439px) {
	.md-mega__body { grid-template-columns: 227px 306px 1fr; padding-inline: 40px; }
	.md-mega__tiles { grid-template-columns: repeat(4, 1fr); }

	.md-hero__inset { left: 14vw; }
	.md-hero__caption { left: auto; right: 6vw; }

	.md-about { grid-template-columns: 50% 1fr; }
	.md-about__text { padding-left: 12vw; }
	.md-about__signature { left: 8%; }

	.md-ig__grid { grid-template-columns: 1fr 2.06fr 1fr 1fr; padding-left: 0; }

	.md-nl__band { grid-template-columns: 48% 1fr; }
}

@media (max-width: 1100px) {
	.md-topbar__inner { gap: 60px; }

	.md-mega { height: auto; }
	.md-mega__body { grid-template-columns: 200px 1fr; }
	.md-mega__promo { grid-column: 1 / -1; }
	.md-mega__tiles { grid-template-columns: repeat(4, 1fr); margin-top: 40px; }
	.md-mega__social { margin: 32px 0 40px; }

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

@media (max-width: 1100px) {
	.md-hero { height: 70vh; min-height: 460px; }
	.md-hero__inset { width: 26vw; height: 46vh; top: 22%; }

	.md-banner { height: 62vh; min-height: 420px; }

	.md-about { grid-template-columns: 1fr; height: auto; }
	.md-about__media { aspect-ratio: 720 / 716; }
	.md-about__text { padding: 48px 24px 64px; }
	.md-about__signature { left: 6%; top: auto; bottom: 52%; }

	.md-ig__grid { grid-template-columns: repeat(2, 1fr); }
	.md-ig__feature { grid-column: 1 / -1; order: -1; aspect-ratio: 16 / 9; }

	.md-nl { padding-inline: 24px; }
	.md-nl__band { grid-template-columns: 1fr; height: auto; }
	.md-nl__media { aspect-ratio: 621 / 351; }
	.md-nl__content { padding: 32px 24px 40px; }

	.md-footer__inner { grid-template-columns: 1fr 1fr 1fr; gap: 40px 24px; padding-inline: 24px; }
	.md-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
	.md-topbar__inner { gap: 40px; }
	.md-topbar__item:nth-child(n+2) { display: none; }

	.md-mega__body { grid-template-columns: 1fr; padding-inline: 24px; gap: 32px; }
	.md-mega__main, .md-mega__subs, .md-mega__tiles { margin-top: 0; }
	.md-mega__tiles { grid-template-columns: repeat(2, 1fr); }

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

	.md-row__track { grid-template-columns: repeat(2, 1fr); }
	.md-head-row { flex-wrap: wrap; gap: 12px; padding-left: 0; }
	.md-head-row__title { white-space: normal; }

	.md-banners { grid-template-columns: 1fr; }

	.md-hero__caption { left: 24px; right: auto; top: auto; bottom: 48px; }
	.md-hero__inset { display: none; }

	.md-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
	.md-row__track { grid-template-columns: 1fr 1fr; gap: 8px; }
	.md-ig__grid { grid-template-columns: 1fr; }
	.md-nl__field, .md-nl__submit { width: 100%; }
	.md-footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	:root { --md-row-h: 56px; --md-header-h: 96px; }

	.md-burger__label { display: none; }
	.md-header__icons { gap: 18px; }
	.md-lang { display: none; }
	.md-logo__svg { width: 118px; height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}